You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
394 lines
12 KiB
394 lines
12 KiB
<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>
|