修改首页搜索,top3,功能模块,课程推荐样式

v2
king 1 year ago
parent 9fb280b866
commit 9f5e6af772
  1. 11
      src/components/videoCover/videoCover.scss
  2. 2
      src/components/videoCover/videoCover.tsx
  3. 1
      src/pages/home/components/curRecommended.tsx
  4. 2
      src/pages/home/components/feature.tsx
  5. 2
      src/pages/home/components/feature_recommended.tsx
  6. 4
      src/pages/home/components/search.tsx
  7. 21
      src/pages/home/home.module.scss
  8. 4
      src/pages/home/home.tsx

@ -33,13 +33,18 @@
} }
.marker { .marker {
font-size: 24rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
height: 34rpx;
padding: 0 8rpx;
position: absolute; position: absolute;
background: rgba(#000, .5); background: rgba(#000, .5);
color: #fff; color: #fff;
padding: 0 10px; border-radius: 0 0 8px 0;
border-radius: 0 0 0 10px;
top: 0; top: 0;
right: 0; left: 0;
} }
Image { Image {

@ -30,8 +30,8 @@ const VideoCover: FC<VideoCoverProps> = (opt: VideoCoverProps) => {
<View className='video' onClick={jump}> <View className='video' onClick={jump}>
<View className='upper'> <View className='upper'>
<Img height={180} src={opt.thumb} mode='widthFix'/> <Img height={180} src={opt.thumb} mode='widthFix'/>
{opt.content && <View className='content'>{opt.content}</View>}
{opt.marker && <View className='marker'>{opt.marker}</View>} {opt.marker && <View className='marker'>{opt.marker}</View>}
{opt.content && <View className='content'>{opt.content}</View>}
</View> </View>
<View className='box'> <View className='box'>
<View className='title'>{opt.title}</View> <View className='title'>{opt.title}</View>

@ -47,6 +47,7 @@ const CurRecommended: FC = () => {
id={c.id} id={c.id}
depId={c.id} depId={c.id}
key={c.id} key={c.id}
marker={`${c.class_hour}`}
/>) />)
} }
</View> </View>

@ -23,7 +23,7 @@ const Feature: FC = () => {
<View className='flex justify-around' style={{marginBottom: '20px'}}> <View className='flex justify-around' style={{marginBottom: '20px'}}>
{ {
list.map(d => <View className='text-center' onClick={() => jump(d.url)}> list.map(d => <View className='text-center' onClick={() => jump(d.url)}>
<Image src={d.image} style={{width: '48px', height: '48px'}}/> <Image src={d.image} style={{width: '48px', height: '48px', verticalAlign: 'middle'}}/>
<View className={styles.featureList}>{d.text}</View> <View className={styles.featureList}>{d.text}</View>
</View>) </View>)
} }

@ -151,7 +151,7 @@ const FeatureRecommended: FC<Props> = (props) => {
return ( return (
<View className={styles.feature}> <View className={styles.feature}>
<Swiper nextMargin='30px' style={{height: '440rpx'}}> <Swiper nextMargin='30px' style={{height: '450rpx'}}>
{ {
data.map(d => <SwiperItem key={d.url}> data.map(d => <SwiperItem key={d.url}>
<Image <Image

@ -13,9 +13,9 @@ export const Search: FC = () => {
return ( return (
<View className={styles.search} onClick={jump}> <View className={styles.search} onClick={jump}>
<Image src={search} mode='widthFix' style={{width: 18,verticalAlign:'middle'}}/> <Image src={search} mode='widthFix' style={{width: 16, height: 16, verticalAlign: 'middle'}}/>
{/*<Icon name='search' size={18} color='#808080'/>*/} {/*<Icon name='search' size={18} color='#808080'/>*/}
<View className='ml-1'></View> <View></View>
</View> </View>
) )
} }

@ -80,9 +80,12 @@
margin-bottom: 40rpx; margin-bottom: 40rpx;
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC; font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #909795; color: #909795;
line-height: 1; line-height: 1;
view {
margin-left: 8rpx;
}
} }
.adware { .adware {
@ -101,21 +104,21 @@
font-family: PingFang SC-Bold, PingFang SC; font-family: PingFang SC-Bold, PingFang SC;
font-weight: bold; font-weight: bold;
color: #323635; color: #323635;
margin-top: 20px; margin-top: 18rpx;
} }
.courseTag { .courseTag {
width: 162px; width: 162px;
height: 46rpx; height: 46rpx;
margin: 0 auto 30rpx; margin: 0 auto 10rpx;
display: block; display: block;
} }
.feature { .feature {
color: #323635; color: #323635;
background: #fff; background: #fff;
padding: 30rpx 0 30rpx 30rpx; padding: 20rpx 0 25rpx 25rpx;
margin-bottom: 40rpx; margin-bottom: 40rpx;
border-radius: 20rpx; border-radius: 20rpx;
position: relative; position: relative;
@ -125,7 +128,7 @@
content: ''; content: '';
display: block; display: block;
position: absolute; position: absolute;
right: 0; right: -1px;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 40rpx; width: 40rpx;
@ -136,7 +139,7 @@
.featureTitle { .featureTitle {
max-width: 212px; max-width: 212px;
height: 50rpx; height: 50rpx;
padding-bottom: 20rpx; padding-bottom: 10rpx;
} }
.featureText { .featureText {
@ -144,7 +147,7 @@
} }
.featureTextTitle { .featureTextTitle {
font-size: 32rpx; font-size: 28rpx;
font-family: PingFang SC-Medium, PingFang SC; font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #323635; color: #323635;
@ -155,7 +158,7 @@
} }
.featureTextDescription { .featureTextDescription {
font-size: 28rpx; font-size: 24rpx;
font-family: PingFang SC-Medium, PingFang SC; font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #909795; color: #909795;
@ -163,7 +166,7 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
line-height: 2; line-height: 3;
} }
.ranking { .ranking {

@ -51,8 +51,8 @@ const Home: FC = () => {
cancelBack cancelBack
leftNode={ leftNode={
<> <>
<Image src={logo} style={{height: "100%"}} mode='heightFix'/> <Image src={logo} style={{height: "110%"}} mode='heightFix'/>
<Text style={{fontWeight: 'bold'}} className='ml-2'></Text> <Text className='ml-1 font-36'></Text>
</> </>
} }
> >

Loading…
Cancel
Save