From 6ccd9ddcaabc6000733fd265c83c49e145e741fb Mon Sep 17 00:00:00 2001 From: yujialong <479214531@qq.com> Date: Thu, 5 Dec 2024 11:48:04 +0800 Subject: [PATCH] =?UTF-8?q?=E7=86=8F=E5=90=AC=E5=88=86=E7=B1=BB=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.less | 3 ++ src/pages/ListenType/MainType/index.less | 41 ++++++++++++--------- src/pages/ListenType/MainType/index.tsx | 12 +----- src/pages/ListenType/SingleType/index.less | 43 +++++++++++++--------- src/pages/ListenType/SingleType/index.tsx | 38 ++++++++----------- 5 files changed, 69 insertions(+), 68 deletions(-) diff --git a/src/app.less b/src/app.less index e69de29..a26a58c 100644 --- a/src/app.less +++ b/src/app.less @@ -0,0 +1,3 @@ +::-webkit-scrollbar { + display: none; +} diff --git a/src/pages/ListenType/MainType/index.less b/src/pages/ListenType/MainType/index.less index 02c679b..d1fe29c 100644 --- a/src/pages/ListenType/MainType/index.less +++ b/src/pages/ListenType/MainType/index.less @@ -57,26 +57,33 @@ .typelist { height: calc(100vh - 2.5rem); - padding: 0 0.7rem 0 1rem; + text-align: center; + background-color: #fff; .item { - width: 100%; - height: 2.5rem; - display: flex; - - .line { - width: .1875rem; - height: .625rem; - border-radius: 1.0625rem; - background-color: #3ba366; - margin: auto .3125rem auto 0; + position: relative; + font-size: .75rem; + line-height: 2.5rem; + background-color: #f5f6fa; + &.active { + background-color: #fff; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + width: .18rem; + height: 1.2rem; + background-color: #3ba366; + border-radius: 1.0625rem; + transform: translateY(-50%); + } } - - .title { - height: 1.0625rem; - line-height: 1.0862rem; - font-size: .75rem; - margin: auto auto auto 0; + &.active-prev { + border-bottom-right-radius: .6rem; + } + &.active-next { + border-top-right-radius: .6rem; } } } diff --git a/src/pages/ListenType/MainType/index.tsx b/src/pages/ListenType/MainType/index.tsx index 400d0fc..90fbe0d 100644 --- a/src/pages/ListenType/MainType/index.tsx +++ b/src/pages/ListenType/MainType/index.tsx @@ -225,17 +225,9 @@ export default function MainType() { typeList && chooseType !== -1 && typeList[chooseType] && typeList[chooseType].children.map((item: any, index: number) => ( handleChooseTypeType(index)} - > - { - choooseTypeType === index && - } - {item.class_name} - + >{item.class_name} )) } diff --git a/src/pages/ListenType/SingleType/index.less b/src/pages/ListenType/SingleType/index.less index d635aa3..ac14c5e 100644 --- a/src/pages/ListenType/SingleType/index.less +++ b/src/pages/ListenType/SingleType/index.less @@ -40,33 +40,40 @@ .typelist { height: calc(100vh - 6.5rem - 1rem); - padding: 0 0.7rem 0 1rem; + text-align: center; + background-color: #fff; .item { - width: 100%; - height: 2.5rem; - display: flex; - - .line { - width: .1875rem; - height: .625rem; - border-radius: 1.0625rem; - background-color: #3ba366; - margin: auto .3125rem auto 0; + position: relative; + font-size: .75rem; + line-height: 2.5rem; + background-color: #f5f6fa; + &.active { + background-color: #fff; + &::before { + content: ''; + position: absolute; + top: 50%; + left: 0; + width: .18rem; + height: 1.2rem; + background-color: #3ba366; + border-radius: 1.0625rem; + transform: translateY(-50%); + } } - - .title { - height: 1.0625rem; - line-height: 1.0862rem; - font-size: .75rem; - margin: auto auto auto 0; + &.active-prev { + border-bottom-right-radius: .6rem; + } + &.active-next { + border-top-right-radius: .6rem; } } } } .product_container { - width: calc(100vw - 4.5rem); + width: calc(100vw - 4.8rem); height: 100%; .product { diff --git a/src/pages/ListenType/SingleType/index.tsx b/src/pages/ListenType/SingleType/index.tsx index 2c54806..54cb8f2 100644 --- a/src/pages/ListenType/SingleType/index.tsx +++ b/src/pages/ListenType/SingleType/index.tsx @@ -147,7 +147,7 @@ export default function SingleType() { } }) } - + }, [typeCode]) const handleChooseTypeType = (index: number) => { @@ -164,48 +164,40 @@ export default function SingleType() { url: '/pages/ListenDetail/index?prdtId=' + prdtId }) } - + return ( - - {pageTitle} + {pageTitle} - + scrollWithAnimation + > { typeList.map((item: any, index: number) => ( handleChooseTypeType(index)} - > - { - choooseTypeType === index && - } - {item.class_name} - + >{item.class_name} )) } - { @@ -215,9 +207,9 @@ export default function SingleType() { className='item' onClick={()=>handleDetail(item.PrdtId)} > - {item.PrdtTitle} @@ -227,8 +219,8 @@ export default function SingleType() { - - + + )