feat: 焦裕禄纪念园

src/assets/data.js

@@ -4,6 +4,51 @@ export const infoTemo = {
   serverUrl: serverUrlTemp,
   swArr: [
     {
+      id: 45,
+      name: "焦裕禄纪念园",
+      partOf: "焦裕禄纪念园",
+      link: `${serverUrlTemp}/bwCN/scene/JiaoYuLu/index.html#/scene`,
+      code: "JiaoYuLu",
+      oldNum: 0,
+      newNum: 0,
+      bannerConfig: {
+        style: {
+          backgroundPosition: "bottom center",
+        },
+        imgs: [
+          {
+            name: "1.png",
+            style: {
+              width: 221,
+              height: 769,
+              top: 93,
+              right: 39,
+            },
+          },
+          {
+            name: "btn.png",
+            style: {
+              width: 309,
+              height: 87,
+              top: 937,
+              right: 29,
+            },
+          },
+        ],
+      },
+      isSW: true, //属于轮播图
+    },
+    // {
+    //   id: 44,
+    //   name: "照亮时光之美-维多利亚时期油灯艺术展",
+    //   partOf: "江门市博物馆",
+    //   link: `${serverUrlTemp}/bwCN/scene/SG-o187kPshPMz/index.html?m=SG-o187kPshPMz`,
+    //   code: "SG-o187kPshPMz",
+    //   oldNum: 0,
+    //   newNum: 0,
+    //   isSW: true, //属于轮播图
+    // },
+    {
       id: 43,
       name: "万象随陶钧-馆藏古代陶瓷艺术展",
       partOf: "武汉博物院",
@@ -308,7 +353,7 @@ export const infoTemo = {
       code: "code_jmct",
       oldNum: 0,
       newNum: 0,
-      isSW: true, //属于轮播图
+      isSW: false, //属于轮播图
       // bannerConfig: {
       //   imgs: [
       //     {

src/pages/Banner/index.vue

@@ -12,14 +12,25 @@
       class="banner-close"
       @click="$router.back()"
     />
-    <img
-      v-for="img in item.bannerConfig.imgs"
-      :key="img.name"
-      :src="`./banners/${item.id}/${img.name}`"
-      class="banner-img"
-      :style="vhCalcStyle(img.style)"
-      @click="img.name === 'btn.png' ? openPage(item, false) : null"
-    />
+    <template v-for="img in item.bannerConfig.imgs" :key="img.name">
+      <video
+        v-if="isVideo(img.name)"
+        :src="`./banners/${item.id}/${img.name}`"
+        class="banner-img"
+        :style="vhCalcStyle(img.style)"
+        autoplay
+        muted
+        loop
+        playsinline
+      />
+      <img
+        v-else
+        :src="`./banners/${item.id}/${img.name}`"
+        class="banner-img"
+        :style="vhCalcStyle(img.style)"
+        @click="img.name === 'btn.png' ? openPage(item, false) : null"
+      />
+    </template>
   </div>
 </template>
 
@@ -31,6 +42,7 @@ import { useRoute } from "vue-router";
 import { openPage } from "@/utils";
 
 const route = useRoute();
+const isVideo = (name) => name.endsWith(".mp4");
 const item = computed(() => {
   const id = route.params.id;
   return infoTemo.swArr.find((item) => item.id === Number(id));