huoran
/
FE_five-color-flower
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

熏听分类样式优化

Browse Source
master
yujialong 3 months ago
parent 5e72ae7a32
commit 6ccd9ddcaa
5 changed files with 69 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/app.less
  2. 41
      src/pages/ListenType/MainType/index.less
  3. 12
      src/pages/ListenType/MainType/index.tsx
  4. 43
      src/pages/ListenType/SingleType/index.less
  5. 38
      src/pages/ListenType/SingleType/index.tsx

3
src/app.less
Unescape View File

@ -0,0 +1,3 @@
::-webkit-scrollbar {
display: none;
}

41
src/pages/ListenType/MainType/index.less
Unescape View File

@ -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;
}
}
}

12
src/pages/ListenType/MainType/index.tsx
Unescape View File

@ -225,17 +225,9 @@ export default function MainType() {
typeList && chooseType !== -1 && typeList[chooseType] && typeList[chooseType].children.map((item: any, index: number) => (
<View
key={index}
className='item'
className={`item ${choooseTypeType === index ? 'active' : choooseTypeType === index + 1 ? 'active-prev' : choooseTypeType === index - 1 ? 'active-next' : ''}`}
onClick={()=>handleChooseTypeType(index)}
>
{
choooseTypeType === index && <View className='line'></View>
}
<View
className='title'
style={choooseTypeType === index? {color: '#3ba366'} : {}}
>{item.class_name}</View>
</View>
>{item.class_name}</View>
))
}
</ScrollView>

43
src/pages/ListenType/SingleType/index.less
Unescape View File

@ -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 {

38
src/pages/ListenType/SingleType/index.tsx
Unescape View File

@ -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 (
<View className='singleType_bg'>
<View className='header'>
<View
<View
className='back'
onClick={handleBack}
></View>
<View className='title'>{pageTitle}</View>
<View className='title'>{pageTitle}</View>
</View>
<View className='main_context'>
<View className='type_container'>
<ScrollView
<ScrollView
className='typelist'
scrollY
scrollWithAnimation
>
scrollWithAnimation
>
{
typeList.map((item: any, index: number) => (
<View
key={index}
className='item'
className={`item ${choooseTypeType === index ? 'active' : choooseTypeType === index + 1 ? 'active-prev' : choooseTypeType === index - 1 ? 'active-next' : ''}`}
onClick={()=>handleChooseTypeType(index)}
>
{
choooseTypeType === index && <View className='line'></View>
}
<View
className='title'
style={choooseTypeType === index? {color: '#3ba366'} : {}}
>{item.class_name}</View>
</View>
>{item.class_name}</View>
))
}
</ScrollView>
</View>
<View className='product_container'>
<ScrollView
<ScrollView
className='product'
scrollY
scrollWithAnimation
scrollWithAnimation
>
<View className='container'>
{
@ -215,9 +207,9 @@ export default function SingleType() {
className='item'
onClick={()=>handleDetail(item.PrdtId)}
>
<Image
<Image
className='icon'
src={item.PrdtCover}
src={item.PrdtCover}
lazyLoad
></Image>
<View className='title'>{item.PrdtTitle}</View>
@ -227,8 +219,8 @@ export default function SingleType() {
</View>
</ScrollView>
</View>
</View>
</View>
)

Write Preview
Loading…
Cancel
Save