feat(draw): 更换视频

src/views/detail/birdview_mb/index.vue

@@ -161,7 +161,7 @@ const KEYARRAY = ref({
       {
         cover: "chendm-1-cover.png",
         type: "video",
-        target: require("@/assets/images/resource/show-case/chenDM.mp4"),
+        target: require("@/assets/images/resource/show-case/chen.mp4"),
         label: "真理的味道",
       },
 
@@ -186,7 +186,7 @@ const KEYARRAY = ref({
       {
         cover: "dax-2-cover.png",
         type: "video",
-        target: require("@/assets/images/resource/show-case/da-1.mp4"),
+        target: require("@/assets/images/resource/show-case/an.mp4"),
         label: "大安寺塔",
       },
       {

src/views/home/birdview_mb/index.vue

@@ -2,52 +2,105 @@
   <div class="birdview">
     <ViewOperation>
       <div class="birdcon">
-        <img class="bd_bg" :src="require(`@/assets/images/resource/home/mob_bg.jpg`)" alt="" />
-
-        <div @click="tagItem(item)" class="tag animate__animated animate__backInDown" v-for="(item, i) in tagData"
-          :style="{ top: `calc(${item.top} + 7%)`, left: item.left, width: item.width, 'animation-delay': `${Number(i.replace('icon', '')) * 0.02}s` }"
-          :key="i">
-          <img v-if="(quanguo && item.type === 'quanguo') || (zhejiang && item.type === 'zhejiang') || firstIn"
-            :src="require(`@/assets/images/resource/home/tag/${i}.png`)" alt="" />
+        <img
+          class="bd_bg"
+          :src="require(`@/assets/images/resource/home/mob_bg.jpg`)"
+          alt=""
+        />
+
+        <div
+          @click="tagItem(item)"
+          class="tag animate__animated animate__backInDown"
+          v-for="(item, i) in tagData"
+          :style="{
+            top: `calc(${item.top} + 7%)`,
+            left: item.left,
+            width: item.width,
+            'animation-delay': `${Number(i.replace('icon', '')) * 0.02}s`,
+          }"
+          :key="i"
+        >
+          <img
+            v-if="
+              (quanguo && item.type === 'quanguo') ||
+              (zhejiang && item.type === 'zhejiang') ||
+              firstIn
+            "
+            :src="require(`@/assets/images/resource/home/tag/${i}.png`)"
+            alt=""
+          />
         </div>
 
-        <div @click="tagItem(tagData['icon6'])" class="tag wu animate__animated animate__bounceInLeft"
-          :style="{ 'animation-delay': '0.8s' }">
-          <img v-if="quanguo || firstIn" :src="require(`@/assets/images/resource/home/wu.png`)" alt="" />
+        <div
+          @click="tagItem(tagData['icon6'])"
+          class="tag wu animate__animated animate__bounceInLeft"
+          :style="{ 'animation-delay': '0.8s' }"
+        >
+          <img
+            v-if="quanguo || firstIn"
+            :src="require(`@/assets/images/resource/home/wu.png`)"
+            alt=""
+          />
         </div>
 
-        <div @click="tagItem(tagData['icon7'])" class="tag ta animate__animated animate__bounceInRight"
-          :style="{ 'animation-delay': '0.8s' }">
-          <img v-if="quanguo || firstIn" :src="require(`@/assets/images/resource/home/ta.png`)" alt="" />
+        <div
+          @click="tagItem(tagData['icon7'])"
+          class="tag ta animate__animated animate__bounceInRight"
+          :style="{ 'animation-delay': '0.8s' }"
+        >
+          <img
+            v-if="quanguo || firstIn"
+            :src="require(`@/assets/images/resource/home/ta.png`)"
+            alt=""
+          />
         </div>
 
-        <div class="tag title animate__animated animate__fadeInLeft" :style="{ 'animation-delay': '0.8s' }">
-          <img :src="require(`@/assets/images/resource/home/title.png`)" alt="" />
+        <div
+          class="tag title animate__animated animate__fadeInLeft"
+          :style="{ 'animation-delay': '0.8s' }"
+        >
+          <img
+            :src="require(`@/assets/images/resource/home/title.png`)"
+            alt=""
+          />
         </div>
       </div>
     </ViewOperation>
 
-    <div class="right animate__animated animate__fadeInRight" :style="{ 'animation-delay': '0.8s' }">
-      <img @click="quanguo = !quanguo"
-        :src="require(`@/assets/images/resource/home/tag/icon-quanguo${quanguo ? '-1' : ''}.png`)" alt="" />
-      <img @click="zhejiang = !zhejiang"
-        :src="require(`@/assets/images/resource/home/tag/icon-zhejiang${zhejiang ? '-1' : ''}.png`)" alt="" />
+    <div
+      class="right animate__animated animate__fadeInRight"
+      :style="{ 'animation-delay': '0.8s' }"
+    >
+      <img
+        @click="quanguo = !quanguo"
+        :src="
+          require(`@/assets/images/resource/home/tag/icon-quanguo${
+            quanguo ? '-1' : ''
+          }.png`)
+        "
+        alt=""
+      />
+      <img
+        @click="zhejiang = !zhejiang"
+        :src="
+          require(`@/assets/images/resource/home/tag/icon-zhejiang${
+            zhejiang ? '-1' : ''
+          }.png`)
+        "
+        alt=""
+      />
     </div>
   </div>
-  <teleport to='body'>
+  <teleport to="body">
     <transition name="fade">
       <div v-if="isToast" class="toast">
-        <div class="toastbody">
-          内容完善中
-        </div>
+        <div class="toastbody">内容完善中</div>
       </div>
     </transition>
   </teleport>
 </template>
 
 <script setup>
-
-
 import ViewOperation from "./ViewOperation";
 import { tag_position } from "@/data";
 import { onMounted, watch, computed, ref, watchEffect } from "vue";
@@ -56,41 +109,35 @@ import { useRouter, useRoute } from "vue-router";
 const router = useRouter();
 const route = useRoute();
 
-let isAside = ref(true)
-let current = ref('')
-
-let quanguo = ref(false)
-let zhejiang = ref(false)
-let isToast = ref(false)
+let isAside = ref(true);
+let current = ref("");
 
-let firstIn = ref(true)
+let quanguo = ref(false);
+let zhejiang = ref(false);
+let isToast = ref(false);
 
+let firstIn = ref(true);
 
 const unwatch = watch([quanguo, zhejiang], () => {
-  firstIn.value = false
-  unwatch()
-})
+  firstIn.value = false;
+  unwatch();
+});
 
-
-
-const tagData = computed(() => tag_position)
+const tagData = computed(() => tag_position);
 
 const tagItem = (item) => {
-  console.log('result:', item.id);
+  console.log("result:", item.id);
 
   if (item.scene) {
-    router.push({ name: 'Detail', params: { id: item.id } })
-  }
-  else {
-    isToast.value = true
+    router.push({ name: "Detail", params: { id: item.id } });
+  } else {
+    isToast.value = true;
     let t = setTimeout(() => {
-      isToast.value = false
-      clearTimeout(t)
+      isToast.value = false;
+      clearTimeout(t);
     }, 2000);
   }
-
-}
-
+};
 </script>
 
 <style lang="scss" scoped>
@@ -102,7 +149,6 @@ $w: 10px;
   z-index: 9;
   background-color: #77a3a4;
 
-
   .birdcon {
     height: 100%;
     width: 100%;
@@ -122,7 +168,7 @@ $w: 10px;
       left: 10%;
       top: 20%;
 
-      >img {
+      > img {
         width: 100%;
         position: absolute;
         display: inline-block;
@@ -155,7 +201,7 @@ $w: 10px;
       top: 4%;
       width: 56%;
 
-      >img {
+      > img {
         left: 0;
         top: 0;
       }
@@ -163,16 +209,24 @@ $w: 10px;
   }
 
   .right {
-    position: fixed;
-    right: 10px;
-    top: 55%;
-    width: 28%;
+    // position: fixed;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    bottom: 10%;
+    height: 39px;
     display: flex;
-    flex-direction: column;
-
-    >img {
-      width: 100%;
-      margin: 10px 0;
+    padding: 0;
+    margin: 0;
+    flex-direction: row;
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+      height: 100%;
+      width: auto;
+      margin: 0 10px;
     }
   }
 }