liruiqiang
2 months ago
3 changed files with 472 additions and 0 deletions
-
394src/pages/index/components/PageSkeleton.vue
-
26src/pages/index/styles/category.scss
-
52src/pages/index/styles/hot.scss
@ -0,0 +1,394 @@ |
|||||
|
<template name="skeleton"> |
||||
|
<view is="components/XtxSwiper"> |
||||
|
<view class="carousel XtxSwiper--carousel"> |
||||
|
<!-- App 端控制台未知报错，删除 swiper 错误消失？ --> |
||||
|
<view class="indicator XtxSwiper--indicator"> |
||||
|
<text class="dot XtxSwiper--dot active XtxSwiper--active"></text> |
||||
|
<text class="dot XtxSwiper--dot"></text> |
||||
|
<text class="dot XtxSwiper--dot"></text> |
||||
|
<text class="dot XtxSwiper--dot"></text> |
||||
|
<text class="dot XtxSwiper--dot"></text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view is="pages/index/components/CategoryPanel"> |
||||
|
<view class="category CategoryPanel--category"> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-382 sk-text" |
||||
|
>居家</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-248 sk-text" |
||||
|
>锦鲤</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-184 sk-text" |
||||
|
>服饰</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-202 sk-text" |
||||
|
>母婴</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-664 sk-text" |
||||
|
>个护</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-805 sk-text" |
||||
|
>严选</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-445 sk-text" |
||||
|
>数码</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-512 sk-text" |
||||
|
>运动</text |
||||
|
> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-61 sk-text">杂项</text> |
||||
|
</navigator> |
||||
|
<navigator class="category-item CategoryPanel--category-item" hover-class="none"> |
||||
|
<image class="icon CategoryPanel--icon sk-image"></image> |
||||
|
<text class="text CategoryPanel--text sk-transparent sk-text-14-2857-863 sk-text" |
||||
|
>品牌</text |
||||
|
> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view is="pages/index/components/HotPanel"> |
||||
|
<view class="panel HotPanel--panel hot HotPanel--hot"> |
||||
|
<view class="item HotPanel--item"> |
||||
|
<view class="title HotPanel--title"> |
||||
|
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-739 sk-text" |
||||
|
>特惠推荐</text |
||||
|
> |
||||
|
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-229 sk-text" |
||||
|
>精选全攻略</text |
||||
|
> |
||||
|
</view> |
||||
|
<navigator class="cards HotPanel--cards" hover-class="none"> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
<view class="item HotPanel--item"> |
||||
|
<view class="title HotPanel--title"> |
||||
|
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-73 sk-text" |
||||
|
>爆款推荐</text |
||||
|
> |
||||
|
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-879 sk-text" |
||||
|
>最受欢迎</text |
||||
|
> |
||||
|
</view> |
||||
|
<navigator class="cards HotPanel--cards" hover-class="none"> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
<view class="item HotPanel--item"> |
||||
|
<view class="title HotPanel--title"> |
||||
|
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-323 sk-text" |
||||
|
>一站买全</text |
||||
|
> |
||||
|
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-50 sk-text" |
||||
|
>精心优选</text |
||||
|
> |
||||
|
</view> |
||||
|
<navigator class="cards HotPanel--cards" hover-class="none"> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
<view class="item HotPanel--item"> |
||||
|
<view class="title HotPanel--title"> |
||||
|
<text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-70 sk-text" |
||||
|
>新鲜好物</text |
||||
|
> |
||||
|
<text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-877 sk-text" |
||||
|
>生活加分项</text |
||||
|
> |
||||
|
</view> |
||||
|
<navigator class="cards HotPanel--cards" hover-class="none"> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
<image class="image HotPanel--image sk-image" mode="aspectFit"></image> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
/* #ifdef H5 || APP-PLUS */ |
||||
|
/* 修复 H5 端骨架屏样式异常 */ |
||||
|
/* 原因：H5 端样式自动开启 scoped 隔离，导致骨架屏的基础样式被隔离 */ |
||||
|
@import '../styles/category.scss'; |
||||
|
@import '../styles/hot.scss'; |
||||
|
@import '@/components/styles/XtxSwiper.scss'; |
||||
|
/* #endif */ |
||||
|
|
||||
|
.sk-transparent { |
||||
|
color: transparent !important; |
||||
|
} |
||||
|
.sk-text-3-5714-536 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 3.5714%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 96.4286%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 28rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text { |
||||
|
background-origin: content-box !important; |
||||
|
background-clip: content-box !important; |
||||
|
background-color: transparent !important; |
||||
|
color: transparent !important; |
||||
|
background-repeat: repeat-y !important; |
||||
|
} |
||||
|
.sk-text-14-2857-28 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 39.2rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-382 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-248 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-184 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-202 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-664 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-805 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-445 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-512 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-61 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-863 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 36.4rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-739 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 44.8rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-229 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 33.6rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-73 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 44.8rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-879 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 33.6rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-323 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 44.8rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-50 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 33.6rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-70 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 44.8rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-14-2857-877 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 14.2857%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 85.7143%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 33.6rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-text-0-0000-363 { |
||||
|
background-image: linear-gradient( |
||||
|
transparent 0%, |
||||
|
#eeeeee 0%, |
||||
|
#eeeeee 100%, |
||||
|
transparent 0% |
||||
|
) !important; |
||||
|
background-size: 100% 32rpx; |
||||
|
position: relative !important; |
||||
|
} |
||||
|
.sk-image { |
||||
|
background: #efefef !important; |
||||
|
} |
||||
|
.sk-pseudo::before, |
||||
|
.sk-pseudo::after { |
||||
|
background: #efefef !important; |
||||
|
background-image: none !important; |
||||
|
color: transparent !important; |
||||
|
border-color: transparent !important; |
||||
|
} |
||||
|
.sk-pseudo-rect::before, |
||||
|
.sk-pseudo-rect::after { |
||||
|
border-radius: 0 !important; |
||||
|
} |
||||
|
.sk-pseudo-circle::before, |
||||
|
.sk-pseudo-circle::after { |
||||
|
border-radius: 50% !important; |
||||
|
} |
||||
|
.sk-container { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
overflow: hidden; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,26 @@ |
|||||
|
/* 前台类目 */ |
||||
|
.category { |
||||
|
margin: 20rpx 0 0; |
||||
|
padding: 10rpx 0; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
min-height: 328rpx; |
||||
|
|
||||
|
.category-item { |
||||
|
width: 150rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.icon { |
||||
|
width: 100rpx; |
||||
|
height: 100rpx; |
||||
|
} |
||||
|
.text { |
||||
|
font-size: 26rpx; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,52 @@ |
|||||
|
/* 热门推荐 */ |
||||
|
.hot { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
min-height: 508rpx; |
||||
|
margin: 20rpx 20rpx 0; |
||||
|
border-radius: 10rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 24rpx 24rpx 0; |
||||
|
font-size: 32rpx; |
||||
|
color: #262626; |
||||
|
position: relative; |
||||
|
.title-desc { |
||||
|
font-size: 24rpx; |
||||
|
color: #7f7f7f; |
||||
|
margin-left: 18rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
width: 50%; |
||||
|
height: 254rpx; |
||||
|
border-right: 1rpx solid #eee; |
||||
|
border-top: 1rpx solid #eee; |
||||
|
.title { |
||||
|
justify-content: start; |
||||
|
} |
||||
|
&:nth-child(2n) { |
||||
|
border-right: 0 none; |
||||
|
} |
||||
|
&:nth-child(-n + 2) { |
||||
|
border-top: 0 none; |
||||
|
} |
||||
|
.image { |
||||
|
width: 150rpx; |
||||
|
height: 150rpx; |
||||
|
} |
||||
|
} |
||||
|
.cards { |
||||
|
flex: 1; |
||||
|
padding: 15rpx 20rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue