From 3f8e77d02cd33b324a046673ce1254aad63d8b6f Mon Sep 17 00:00:00 2001
From: liruiqiang <3151805288@qq.com>
Date: Fri, 15 Aug 2025 14:37:32 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/components/PageSkeleton.vue | 394 ++++++++++++++++++++++++++++
 src/pages/index/styles/category.scss        |  26 ++
 src/pages/index/styles/hot.scss             |  52 ++++
 3 files changed, 472 insertions(+)
 create mode 100644 src/pages/index/components/PageSkeleton.vue
 create mode 100644 src/pages/index/styles/category.scss
 create mode 100644 src/pages/index/styles/hot.scss

diff --git a/src/pages/index/components/PageSkeleton.vue b/src/pages/index/components/PageSkeleton.vue
new file mode 100644
index 0000000..e00831c
--- /dev/null
+++ b/src/pages/index/components/PageSkeleton.vue
@@ -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>
diff --git a/src/pages/index/styles/category.scss b/src/pages/index/styles/category.scss
new file mode 100644
index 0000000..cb1dd45
--- /dev/null
+++ b/src/pages/index/styles/category.scss
@@ -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;
+    }
+  }
+}
diff --git a/src/pages/index/styles/hot.scss b/src/pages/index/styles/hot.scss
new file mode 100644
index 0000000..17482b6
--- /dev/null
+++ b/src/pages/index/styles/hot.scss
@@ -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;
+  }
+}