feat: .

src/assets/img/icon-xia.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="24" viewBox="0 0 44 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="icon-xia" d="M44 3.61644L22 24L2.43072e-07 3.61644L4.25806 -9.02897e-07L22 16.4384L39.7419 -4.79756e-07L44 3.61644Z" fill="#FFFBED"/>
+</svg>

src/views/home/iframeView/index.vue

@@ -28,7 +28,7 @@
         <p class="desc">
           <span style="font-weight: bold">{{ iframeData.age }}</span
           ><br /><span style="font-weight: bold">{{ iframeData.collection }}</span
-          ><br /><span style="text-indent: 2em; display: block">{{ iframeData.desc }}</span>
+          ><br /><span>{{ iframeData.desc }}</span>
         </p>
       </div>
     </div>

src/views/home/index.vue

@@ -8,7 +8,7 @@
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="i in currentData.list[0]">
             <div class="item-box" @click="changeIframe(i)">
-              <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
+              <img :src="`resource/img/${i.thumb ? 'thumb/' + i.thumb : '1.png'}`" alt="" />
               <span class="item-name">{{ i.name }}</span>
             </div>
           </div>
@@ -18,7 +18,7 @@
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="i in currentData.list[1]">
             <div class="item-box" @click="changeIframe(i)">
-              <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
+              <img :src="`resource/img/${i.thumb ? 'thumb/' + i.thumb : '1.png'}`" alt="" />
               <span class="item-name">{{ i.name }}</span>
             </div>
           </div>
@@ -28,7 +28,7 @@
         <div class="swiper-wrapper">
           <div class="swiper-slide" v-for="i in currentData.list[2]">
             <div class="item-box" @click="changeIframe(i)">
-              <img :src="`resource/img/${i.thumb ? i.thumb : '1.png'}`" alt="" />
+              <img :src="`resource/img/${i.thumb ? 'thumb/' + i.thumb : '1.png'}`" alt="" />
               <span class="item-name">{{ i.name }}</span>
             </div>
           </div>
@@ -39,7 +39,7 @@
       <div class="switch">
         <div class="current-item" @click="showSwitch = !showSwitch">
           <span>{{ currentData.name }}</span>
-          <div class="arrow"></div>
+          <div :class="{ up: showSwitch }" class="arrow"></div>
         </div>
         <div class="switch-list" :class="{ open: showSwitch }">
           <div class="scroll-box">
@@ -307,10 +307,16 @@ const hanlderSwiper = (item) => {
     groupList.push(three);
   } else if (length >= 6 && length < 18) {
     // 只有两行
-    let one = list.slice(0, 6);
-    let two = list.slice(6, length);
-    groupList.push(one);
-    groupList.push(two);
+
+    if (length - 6 < 3) {
+      let one = list.slice(0, length);
+      groupList.push(one);
+    } else {
+      let one = list.slice(0, 6);
+      let two = list.slice(6, length);
+      groupList.push(one);
+      groupList.push(two);
+    }
   } else if (length >= 4 && length < 6) {
     // 只有一行
     let one = list.slice(0, length);
@@ -438,11 +444,16 @@ onMounted(() => {
           white-space: nowrap;
         }
         .arrow {
-          width: 0.32rem;
-          height: 0.32rem;
-          background: url(../../assets/img/arrow.png) no-repeat;
-          background-size: 100%;
+          width: 0.3867rem;
+          height: 0.2133rem;
+          background: url(../../assets/img/icon-xia.svg) no-repeat;
+          background-size: 100% 100%;
           margin-left: 0.1333rem;
+          transition: transform 0.3s;
+          transform-origin: center center;
+          &.up {
+            transform: rotate(-180deg);
+          }
         }
       }
       .switch-list {