fix: 🐛 重新生成首页骨架屏

src/pages/index/components/PageSkeleton.vue

@@ -1,183 +1,214 @@
 <template name="skeleton">
-  <view is="components/JbcSwiper">
+  <view class="sk-container">
-    <view class="carousel JbcSwiper--carousel">
+    <view class="viewport viewport">
-      <swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
+      <scroll-view
-        <swiper-item
+        :enable-back-to-top="true"
-          style="
+        :refresher-enabled="true"
-            position: absolute;
+        :scroll-y="true"
-            width: 100%;
+        class="scrool-view scrool-view"
-            height: 100%;
-            transform: translate(0%, 0px) translateZ(0px);
-          "
-        >
-          <navigator :render-link="false" class="navigator JbcSwiper--navigator" hover-class="none">
-            <image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
-          </navigator>
-        </swiper-item>
-      </swiper>
-      <view class="indicator JbcSwiper--indicator">
-        <text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
-        <text class="dot JbcSwiper--dot"></text>
-        <text class="dot JbcSwiper--dot"></text>
-        <text class="dot JbcSwiper--dot"></text>
-        <text class="dot JbcSwiper--dot"></text>
-      </view>
-    </view>
-  </view>
-  <view is="pages/index/components/CategoryPanel">
-    <view class="category CategoryPanel--category">
-      <navigator
-        :render-link="false"
-        class="category-item CategoryPanel--category-item"
-        hover-class="none"
       >
-        <image class="icon CategoryPanel--icon sk-image"></image>
+        <view is="components/JbcSwiper">
-        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-158 sk-text"
+          <view class="carousel JbcSwiper--carousel">
-          >居家</text
+            <swiper :circular="true" :current="0" :interval="3000" :autoplay="false">
-        >
+              <swiper-item
-      </navigator>
+                style="
-      <navigator
+                  position: absolute;
-        :render-link="false"
+                  width: 100%;
-        class="category-item CategoryPanel--category-item"
+                  height: 100%;
-        hover-class="none"
+                  transform: translate(0%, 0px) translateZ(0px);
-      >
+                "
-        <image class="icon CategoryPanel--icon sk-image"></image>
+              >
-        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-849 sk-text"
+                <navigator
-          >锦鲤</text
+                  :render-link="false"
-        >
+                  class="navigator JbcSwiper--navigator"
-      </navigator>
+                  hover-class="none"
-      <navigator
+                >
-        :render-link="false"
+                  <image class="image JbcSwiper--image sk-image" mode="aspectFill"></image>
-        class="category-item CategoryPanel--category-item"
+                </navigator>
-        hover-class="none"
+              </swiper-item>
-      >
+            </swiper>
-        <image class="icon CategoryPanel--icon sk-image"></image>
+            <view class="indicator JbcSwiper--indicator">
-        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-598 sk-text"
+              <text class="dot JbcSwiper--dot active JbcSwiper--active"></text>
-          >服饰</text
+              <text class="dot JbcSwiper--dot"></text>
-        >
+              <text class="dot JbcSwiper--dot"></text>
-      </navigator>
+              <text class="dot JbcSwiper--dot"></text>
-      <navigator
+              <text class="dot JbcSwiper--dot"></text>
-        :render-link="false"
+            </view>
-        class="category-item CategoryPanel--category-item"
+          </view>
-        hover-class="none"
-      >
-        <image class="icon CategoryPanel--icon sk-image"></image>
-        <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-271 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-768 sk-text"
-          >个护</text
-        >
-      </navigator>
-      <navigator
-        :render-link="false"
-        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-999 sk-text"
-          >严选</text
-        >
-      </navigator>
-      <navigator
-        :render-link="false"
-        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-502 sk-text"
-          >数码</text
-        >
-      </navigator>
-      <navigator
-        :render-link="false"
-        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-420 sk-text"
-          >运动</text
-        >
-      </navigator>
-      <navigator
-        :render-link="false"
-        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-89 sk-text">杂项</text>
-      </navigator>
-      <navigator
-        :render-link="false"
-        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-28 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-496 sk-text"
-            >特惠推荐</text
-          >
-          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-20 sk-text"
-            >精选全攻略</text
-          >
         </view>
-        <navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
+        <view is="pages/index/components/CategoryPanel">
-          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <view class="category CategoryPanel--category">
-          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+            <navigator
-        </navigator>
+              :render-link="false"
-      </view>
+              class="category-item CategoryPanel--category-item"
-      <view class="item HotPanel--item">
+              hover-class="none"
-        <view class="title HotPanel--title">
+            >
-          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-183 sk-text"
+              <image class="icon CategoryPanel--icon sk-image"></image>
-            >爆款推荐</text
+              <text class="text CategoryPanel--text sk-transparent sk-text-14-2857-800 sk-text"
-          >
+                >居家</text
-          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-205 sk-text"
+              >
-            >最受欢迎</text
+            </navigator>
-          >
+            <navigator
+              :render-link="false"
+              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-259 sk-text"
+                >锦鲤</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-519 sk-text"
+                >服饰</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-450 sk-text"
+                >母婴</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-191 sk-text"
+                >个护</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-808 sk-text"
+                >严选</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-794 sk-text"
+                >数码</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-241 sk-text"
+                >运动</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-577 sk-text"
+                >杂项</text
+              >
+            </navigator>
+            <navigator
+              :render-link="false"
+              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-685 sk-text"
+                >品牌</text
+              >
+            </navigator>
+          </view>
         </view>
-        <navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
+        <view is="pages/index/components/HotPanel">
-          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+          <view class="panel HotPanel--panel hot HotPanel--hot">
-          <image class="image HotPanel--image sk-image" mode="aspectFit"></image>
+            <view class="item HotPanel--item">
-        </navigator>
+              <view class="title HotPanel--title">
-      </view>
+                <text
-      <view class="item HotPanel--item">
+                  class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-914 sk-text"
-        <view class="title HotPanel--title">
+                  >特惠推荐</text
-          <text class="title-text HotPanel--title-text sk-transparent sk-text-14-2857-35 sk-text"
+                >
-            >一站买全</text
+                <text
-          >
+                  class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-766 sk-text"
-          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-223 sk-text"
+                  >精选全攻略</text
-            >精心优选</text
+                >
-          >
+              </view>
+              <navigator :render-link="false" 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-437 sk-text"
+                  >爆款推荐</text
+                >
+                <text
+                  class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-14 sk-text"
+                  >最受欢迎</text
+                >
+              </view>
+              <navigator :render-link="false" 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-767 sk-text"
+                  >一站买全</text
+                >
+                <text
+                  class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-976 sk-text"
+                  >精心优选</text
+                >
+              </view>
+              <navigator :render-link="false" 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-741 sk-text"
+                  >新鲜好物</text
+                >
+                <text
+                  class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-965 sk-text"
+                  >生活加分项</text
+                >
+              </view>
+              <navigator :render-link="false" 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>
-        <navigator :render-link="false" class="cards HotPanel--cards" hover-class="none">
+      </scroll-view>
-          <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-158 sk-text"
-            >新鲜好物</text
-          >
-          <text class="title-desc HotPanel--title-desc sk-transparent sk-text-14-2857-452 sk-text"
-            >生活加分项</text
-          >
-        </view>
-        <navigator :render-link="false" 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>
@@ -192,14 +223,14 @@
 .sk-transparent {
   color: transparent !important;
 }
-.sk-text-24-0741-766 {
+.sk-text-24-0000-172 {
   background-image: linear-gradient(
-    transparent 24.0741%,
+    transparent 24%,
     #eeeeee 0%,
-    #eeeeee 75.9259%,
+    #eeeeee 76%,
     transparent 0%
   ) !important;
-  background-size: 100% 48.913rpx;
+  background-size: 100% 50rpx;
   position: relative !important;
 }
 .sk-text {
@@ -209,189 +240,214 @@
   color: transparent !important;
   background-repeat: repeat-y !important;
 }
-.sk-text-14-2857-226 {
+.sk-text-14-2857-64 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 38.0435rpx;
+  background-size: 100% 39.2rpx;
   position: relative !important;
 }
-.sk-text-14-2857-158 {
+.sk-text-14-2857-800 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-849 {
+.sk-text-14-2857-259 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-598 {
+.sk-text-14-2857-519 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-271 {
+.sk-text-14-2857-450 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-768 {
+.sk-text-14-2857-191 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-999 {
+.sk-text-14-2857-808 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-502 {
+.sk-text-14-2857-794 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-420 {
+.sk-text-14-2857-241 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-89 {
+.sk-text-14-2857-577 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-28 {
+.sk-text-14-2857-685 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 35.5072rpx;
+  background-size: 100% 36.4rpx;
   position: relative !important;
 }
-.sk-text-14-2857-496 {
+.sk-text-14-2857-914 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 43.1159rpx;
+  background-size: 100% 44.8rpx;
   position: relative !important;
 }
-.sk-text-14-2857-20 {
+.sk-text-14-2857-766 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 32.971rpx;
+  background-size: 100% 33.6rpx;
   position: relative !important;
 }
-.sk-text-14-2857-183 {
+.sk-text-14-2857-437 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 43.1159rpx;
+  background-size: 100% 44.8rpx;
   position: relative !important;
 }
-.sk-text-14-2857-205 {
+.sk-text-14-2857-14 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 32.971rpx;
+  background-size: 100% 33.6rpx;
   position: relative !important;
 }
-.sk-text-14-2857-35 {
+.sk-text-14-2857-767 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 43.1159rpx;
+  background-size: 100% 44.8rpx;
   position: relative !important;
 }
-.sk-text-14-2857-223 {
+.sk-text-14-2857-976 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 32.971rpx;
+  background-size: 100% 33.6rpx;
   position: relative !important;
 }
-.sk-text-14-2857-452 {
+.sk-text-14-2857-741 {
   background-image: linear-gradient(
     transparent 14.2857%,
     #eeeeee 0%,
     #eeeeee 85.7143%,
     transparent 0%
   ) !important;
-  background-size: 100% 32.971rpx;
+  background-size: 100% 44.8rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-965 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 33.6rpx;
   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;