优化轮播

public/static/offline/JSON/getShopActivityList.json

@@ -1 +1,60 @@
-{"code":200,"msg":"操作成功","data":[{"id":620,"entryCode":"7PtFGpCK-XIyq_qKRJPR5","title":"COLOMBO   V-SPACE限时店 ","content":{"fileUrl":["/iotFile/project-ey_fpaur6s6fkgvszywana/20231011/qefzeBHe1POo537vRZ08S.jpg"],"title":"COLOMBO V-SPACE限时店 ","titleEn":"COLOMBO V-SPACE","time":"即日起-10/30(一)","place":"成都SKP 1F","placeEn":"成都SKP 1F","typeId":["liuUoTMkKVyk_ON7TV3jw"]}}]}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR5",
+      "title": "COLOMBO   V-SPACE限时店 ",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20231011/qefzeBHe1POo537vRZ08S.jpg"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-10/30(一)",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    },
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR51",
+      "title": "COLOMBO   V-SPACE限时店 ",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20231011/qefzeBHe1POo537vRZ08S.jpg"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-10/30(一)",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    },
+    {
+      "id": 620,
+      "entryCode": "7PtFGpCK-XIyq_qKRJPR521",
+      "title": "COLOMBO   V-SPACE限时店 ",
+      "content": {
+        "fileUrl": [
+          "/iotFile/project-ey_fpaur6s6fkgvszywana/20231011/qefzeBHe1POo537vRZ08S.jpg"
+        ],
+        "title": "COLOMBO V-SPACE限时店 ",
+        "titleEn": "COLOMBO V-SPACE",
+        "time": "即日起-10/30(一)",
+        "place": "成都SKP 1F",
+        "placeEn": "成都SKP 1F",
+        "typeId": [
+          "liuUoTMkKVyk_ON7TV3jw"
+        ]
+      }
+    }
+  ]
+}

src/components/ActivityDetail/MainActivityDetail.vue

@@ -3,13 +3,11 @@
     <masker @click="close">
       <div v-show="actInfo.type === '档期活动'">
         <swiper
-          :ref="mySwiper1"
           class="carousel"
-          :autoplay="true"
+          :autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false, delay: 5000 }"
           :observer="true"
           :modules="modules"
           :loop="actInfo.fileUrl_h.length > 1"
-          :effect="'fade'"
           :pagination="true"
           @swiper="setControlledSwiper"
         >
@@ -27,10 +25,9 @@
       </div>
       <div v-show="actInfo.type !== '档期活动'" class="shop-container">
         <swiper
-          :ref="mySwiper2"
           class="carousel1"
           :slides-per-view="2"
-          :autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false }"
+          :autoplay="{ autoplay: actInfo.list.length > 2, disableOnInteraction: false, delay: 5000 }"
           :observer="true"
           :space-between="40"
           :pagination="true"
@@ -47,10 +44,10 @@
             <div class="label">{{ $t('activity.time') + item.content.time }}</div>
             <div class="label">{{ $t('activity.address') + switchLanguage(item.content, 'place') }}</div>
           </swiper-slide>
-          <div v-if="actInfo.list.length > 1" class="swiper-prev-w" @click="pre2">
+          <div v-if="actInfo.list.length > 2" class="swiper-prev-w" @click="pre2">
             <img src="@/assets/images/activity/prev-b.png" alt="" />
           </div>
-          <div v-if="actInfo.list.length > 1" class="swiper-next-w" @click="next2">
+          <div v-if="actInfo.list.length > 2" class="swiper-next-w" @click="next2">
             <img src="@/assets/images/activity/next-b.png" alt="" />
           </div>
         </swiper>
@@ -65,7 +62,7 @@
 
 <script setup lang="ts">
 import { shallowRef } from 'vue'
-import { Autoplay, Pagination, EffectFade } from 'swiper'
+import { Autoplay, Pagination } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/effect-fade'
@@ -75,7 +72,7 @@ import masker from '@/base/Masker/Masker.vue'
 import Marquees from '@/base/Marquees/Marquees.vue'
 
 const modules1 = [Autoplay, Pagination]
-const modules = [Autoplay, Pagination, EffectFade]
+const modules = [Autoplay, Pagination]
 interface AItem {
   actInfo: any
 }