feat: 初步修改完成

public/index.html

@@ -17,8 +17,8 @@
     <script src="<%= VUE_APP_STATIC_DIR %>/lib/jweixin-1.6.0.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/lib/swiper/swiper-bundle.min.js"></script>
 
-    <script>
-      // new window.VConsole()
-    </script>
+    <!-- <script>
+      new window.VConsole()
+    </script> -->
   </body>
 </html>

src/App.vue

@@ -6,33 +6,38 @@
 import { ref, onMounted, watch, nextTick, provide, computed } from "vue";
 import emitter from "@/mitt/index";
 import { useRoute } from "vue-router";
-import browser from '@/utils/browser';
-import 'animate.css';
+import browser from "@/utils/browser";
+import "animate.css";
 
-const isMobile = computed(() => browser.isMobile())
-const detectIPad = computed(() => browser.detectIPad())
+const isMobile = computed(() => browser.isMobile());
+const detectIPad = computed(() => browser.detectIPad());
 
-const isLandscape = ref(window.orientation === 90 || window.orientation === -90)
-watch(isLandscape, ()=>{
+const isLandscape = ref(
+  window.orientation === 90 || window.orientation === -90
+);
+watch(isLandscape, () => {
   if (isLandscape.value) {
-    window.location.reload()
+    window.location.reload();
   }
 });
 
 onMounted(() => {
   if (isMobile.value || detectIPad.value) {
     // window.orientation：获取屏幕旋转方向
-    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", () => {
-      // 正常方向或屏幕旋转180度
-      if (window.orientation === 180 || window.orientation === 0) {
-        isLandscape.value = false
-      }
+    window.addEventListener(
+      "onorientationchange" in window ? "orientationchange" : "resize",
+      () => {
+        // 正常方向或屏幕旋转180度
+        if (window.orientation === 180 || window.orientation === 0) {
+          isLandscape.value = false;
+        }
 
-      // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
-      if (window.orientation === 90 || window.orientation === -90) {
-        isLandscape.value = true
+        // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
+        if (window.orientation === 90 || window.orientation === -90) {
+          isLandscape.value = true;
+        }
       }
-    });
+    );
   }
 });
 </script>
@@ -76,7 +81,7 @@ body {
     width: 80%;
     padding: 20px;
 
-    >p {
+    > p {
       text-align: center;
       font-size: 18px;
       line-height: 2;

src/views/detail/birdview_mb/index.vue

@@ -2,19 +2,42 @@
   <div class="birdview">
     <ViewOperation>
       <div class="birdcon" :key="current.icon">
-        <img class="bd_bg" :src="require(`@/assets/images/resource/detail/${current.icon}.jpg`)" alt="" />
-
-        <div @click="router.push({ name: 'Scene', params: { id: route.params.id } })"
+        <img
+          class="bd_bg"
+          :src="require(`@/assets/images/resource/detail/${current.icon}.jpg`)"
+          alt=""
+        />
+
+        <div
+          @click="
+            router.push({ name: 'Scene', params: { id: route.params.id } })
+          "
           class="tag ta animate__animated animate__bounceInRight"
-          :style="{ top: current.top, left: current.left, width: current.width }">
-          <img :src="require(`@/assets/images/resource/detail/map_button-blue_.png`)" alt="" />
+          :style="{
+            top: current.top,
+            left: current.left,
+            width: current.width,
+          }"
+        >
+          <img
+            :src="
+              require(`@/assets/images/resource/detail/map_button-blue_.png`)
+            "
+            alt=""
+          />
           <span>{{ current.name }}</span>
         </div>
       </div>
     </ViewOperation>
-    <div class="tag intro animate__animated animate__fadeInRight" :style="{ 'animation-delay': '0.5s' }">
-      <img @click="showItr = !showItr"
-        :src="require(`@/assets/images/resource/detail/introduce${showItr ? 1 : ''}_icon.png`)" alt="" />
+    <div
+      class="tag intro animate__animated animate__fadeInRight"
+      :style="{ 'animation-delay': '0.5s' }"
+    >
+      <img
+        @click="goToLink"
+        :src="require(`@/assets/images/resource/detail/declaration.png`)"
+        alt=""
+      />
     </div>
 
     <div class="btm_con" :class="{ sshow: !showItr }">
@@ -27,19 +50,97 @@
             <h3>{{ item.name }}</h3>
             <p>{{ item.intro }}</p>
             <div class="shouqi" @click="showItr = false">收起</div>
+
+            <div class="content" v-if="item.content.length > 0">
+              <div
+                class="case-item"
+                v-for="con in item.content"
+                @click="handleCaseItem(con)"
+              >
+                <img
+                  :src="
+                    require(`@/assets/images/resource/show-case/${con.cover}`)
+                  "
+                />
+                <span class="label" v-if="con.label">
+                  <template v-if="con.type === 'video'">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M9 7v8l7-4zm12-4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </template>
+                  <template v-if="con.type === 'vr'">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M21.01 4C20.45 4 17.4 5.5 12 5.5c-5.31 0-8.49-1.49-9.01-1.49c-.53 0-.99.44-.99 1.01V19c0 .57.46 1 .99 1c.57 0 3.55-1.5 9.01-1.5c5.42 0 8.44 1.5 9.01 1.5c.53 0 .99-.43.99-1V5c0-.57-.46-1-.99-1zM20 17.63c-2.01-.59-4.62-1.13-8-1.13c-3.39 0-5.99.54-8 1.13V6.38c2.58.73 5.32 1.12 8 1.12c3.38 0 5.99-.54 8-1.13v11.26z"
+                        fill="currentColor"
+                      ></path>
+                      <path
+                        d="M9.17 10.99l-3.69 4.42c2-.26 4.18-.41 6.52-.41c2.3 0 4.52.15 6.51.4L14 10l-2.83 3.39l-2-2.4z"
+                        fill="currentColor"
+                      ></path>
+                    </svg>
+                  </template>
+                  {{ con.label }}
+                </span>
+              </div>
+            </div>
           </li>
         </ul>
         <div class="swiper-pagination"></div>
       </div>
-      <div @click="router.push({ name: 'Scene', params: { id: route.params.id } })" class="v-detial">查看详情</div>
+      <!-- <div @click="handleDetail" class="v-detail">查看详情</div> -->
+    </div>
+
+    <div class="video-player" v-if="currentVideo">
+      <div class="close-icon" @click="currentVideo = ''">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M289.94 256l95-95A24 24 0 0 0 351 127l-95 95l-95-95a24 24 0 0 0-34 34l95 95l-95 95a24 24 0 1 0 34 34l95-95l95 95a24 24 0 0 0 34-34z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </div>
+
+      <div class="video" :class="{ full: isVideoFullScreen }">
+        <video ref="videoRef" :src="currentVideo"></video>
+        <!-- <div class="opt">
+          <div class="opt-fullscreen" @click="handleFullScreen">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"
+                fill="currentColor"
+              ></path>
+            </svg>
+            <span>全屏查看</span>
+          </div>
+        </div> -->
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-
-
 import ViewOperation from "./ViewOperation";
+import { useFullscreen } from "@vueuse/core";
 import { tag_position } from "@/data";
 import { onMounted, watch, computed, ref, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
@@ -48,54 +149,118 @@ const router = useRouter();
 const route = useRoute();
 
 const KEYARRAY = ref({
-  'cwd': {
-    name: '陈望道故居',
-    icon: 'cwd',
-    width: '12%',
-    top: '30%',
+  cwd: {
+    name: "陈望道故居",
+    icon: "cwd",
+    width: "12%",
+    top: "30%",
     scene: "1287",
-    left: '65%',
-    intro: "陈望道故居，位于浙江省金华市义乌市城西街道分水塘村后分片110号，占地面积约430.9平方米整体坐北朝南，为前廊式天井院砖木结构建筑，始建于清宣统元年（1909年）。陈望道故居整体由一座三合式院落与......"
+    left: "65%",
+    intro:
+      "陈望道故居，位于浙江省金华市义乌市城西街道分水塘村后分片110号，占地面积约430.9平方米整体坐北朝南，为前廊式天井院砖木结构建筑，始建于清宣统元年（1909年）。陈望道故居整体由一座三合式院落与......",
+    content: [
+      {
+        cover: "chendm-1-cover.png",
+        type: "video",
+        target: require("@/assets/images/resource/show-case/chenDM.mp4"),
+        label: "真理的味道",
+      },
+
+      {
+        cover: "chendm-vr-cover.png",
+        type: "vr",
+        target: "",
+        label: "VR浏览",
+      },
+    ],
   },
-  'dats': {
-    name: '大安寺塔',
-    icon: 'dats',
+  dats: {
+    name: "大安寺塔",
+    icon: "dats",
     width: "10%",
     left: "45%",
     scene: "1286",
     top: "30%",
-    intro: "大安寺塔是义乌境内现存最早的砖木结构建筑，坐落在义乌绣湖畔，宋大观四年（1110年）建造， 塔壁和塔体内有大量“庚寅岁建”的砖铭，据此推知距今已有896年历史。"
-  }
-})
-
-let isAside = ref(true)
-let currentId = ref(route.params.id)
+    intro:
+      "大安寺塔是义乌境内现存最早的砖木结构建筑，坐落在义乌绣湖畔，宋大观四年（1110年）建造， 塔壁和塔体内有大量“庚寅岁建”的砖铭，据此推知距今已有896年历史。",
+    content: [
+      {
+        cover: "dax-2-cover.png",
+        type: "video",
+        target: require("@/assets/images/resource/show-case/da-1.mp4"),
+        label: "大安寺塔",
+      },
+      {
+        cover: "dyt-1-cover.png",
+        type: "vr",
+        target: "",
+        label: "VR浏览",
+      },
+    ],
+  },
+});
 
-let current = computed(() => KEYARRAY.value[currentId.value] || KEYARRAY.value['dats'])
+let isAside = ref(true);
+let currentId = ref(route.params.id);
+const declarationLink = ref(
+  "https://www.4dmodel.com/SuperTwoCustom/yw2023/netbook/index.html?pages=3&mode=rtl"
+);
 
-let showItr = ref(true)
-let mySwiper = ref('')
+let current = computed(
+  () => KEYARRAY.value[currentId.value] || KEYARRAY.value["dats"]
+);
 
+const currentVideo = ref("");
+const videoRef = ref();
+const isVideoFullScreen = ref(false);
+let showItr = ref(true);
+let mySwiper = ref("");
 
-const tagData = computed(() => tag_position)
+const tagData = computed(() => tag_position);
 
 onMounted(() => {
   mySwiper.value = new Swiper("#bsw", {
     slidesPerView: "auto",
-    initialSlide: currentId.value === 'cwd' ? 0 : 1,
+    initialSlide: currentId.value === "cwd" ? 0 : 1,
     pagination: {
-      el: '.swiper-pagination',
-      bulletClass: 'my-bullet',
-      bulletActiveClass: 'my-bullet-active'
+      el: ".swiper-pagination",
+      bulletClass: "my-bullet",
+      bulletActiveClass: "my-bullet-active",
     },
     on: {
       slideChange: function () {
-        currentId.value = this.activeIndex == 0 ? 'cwd' : 'dats'
-        router.replace({ name: 'Detail', params: { id: currentId.value } })
+        currentId.value = this.activeIndex == 0 ? "cwd" : "dats";
+        router.replace({ name: "Detail", params: { id: currentId.value } });
       },
     },
   });
-})
+});
+
+const handleCaseItem = (con) => {
+  switch (true) {
+    case con.type === "vr":
+      router.push({ name: "Scene", params: { id: route.params.id } });
+      break;
+    case con.type === "video":
+      currentVideo.value = con.target;
+      setTimeout(() => {
+        videoRef.value && videoRef.value.play();
+      }, 300);
+
+      break;
+    default:
+      break;
+  }
+};
+// const handleDetail = () => {
+//   router.push({ name: "Scene", params: { id: route.params.id } });
+// };
+const handleFullScreen = () => {
+  isVideoFullScreen.value = true;
+};
+const goToLink = () => {
+  window.open(declarationLink.value, "_self");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -107,7 +272,6 @@ $w: 10px;
   z-index: 9;
   background-color: #77a3a4;
 
-
   .birdcon {
     height: 100%;
     width: 100%;
@@ -127,27 +291,25 @@ $w: 10px;
       left: 10%;
       top: 20%;
 
-      >img {
+      > img {
         width: 100%;
         display: inline-block;
       }
-
     }
 
-
     .ta {
       width: 12%;
       left: 65%;
       top: 22%;
       text-align: center;
 
-      >span {
+      > span {
         width: 100%;
         height: 100%;
         font-size: 20px;
         letter-spacing: 1px;
         font-weight: bold;
-        color: #FFFFFF;
+        color: #ffffff;
         line-height: 50px;
         writing-mode: vertical-lr;
         position: absolute;
@@ -156,22 +318,20 @@ $w: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
-        font-family: 'siyuan';
+        font-family: "siyuan";
       }
     }
-
-
   }
 
   .intro {
     left: unset;
     right: 20px;
     top: 4%;
-    width: 10%;
+    width: 60px;
     position: fixed;
     max-width: 60px;
 
-    >img {
+    > img {
       left: 0;
       top: 0;
       width: 100%;
@@ -186,8 +346,8 @@ $w: 10px;
     min-height: 300px;
     background: rgba(34, 157, 169, 0.9);
     border-radius: 25px 25px 0px 0px;
-    transition: transform .3s ease;
-    .hide-bar{
+    transition: transform 0.3s ease;
+    .hide-bar {
       width: 100%;
       position: absolute;
       height: 20px;
@@ -195,12 +355,12 @@ $w: 10px;
       left: 0;
       text-align: center;
       z-index: 999;
-      >span{
+      > span {
         margin-top: 8px;
         width: 100px;
         height: 6px;
         display: inline-block;
-        background: #FEDF3B;
+        background: #fedf3b;
         border-radius: 4px;
       }
     }
@@ -209,64 +369,169 @@ $w: 10px;
       .swiper-slide {
         font-size: 16px;
         padding: 18px 20px;
+        padding-top: 36px;
         box-sizing: border-box;
 
-        >h3 {
+        > h3 {
           font-size: 22px;
-          color: #FEDF3B;
-          font-family: 'siyuan';
+          color: #fedf3b;
+          font-family: "siyuan";
         }
 
-        >p {
+        > p {
           width: 100%;
           text-align: justify;
           line-height: 1.5;
           margin-top: 14px;
         }
 
-
         .shouqi {
           position: absolute;
           font-size: 14px;
           right: 20px;
-          top: 24px;
+          top: 38px;
           padding: 2px 20px;
-          color: #FEDF3B;
+          color: #fedf3b;
           border-radius: 25px;
-          border: 1px solid #FEDF3B;
-
+          border: 1px solid #fedf3b;
+        }
+        .content {
+          margin-bottom: 64px;
+          .case-item {
+            width: 100%;
+            height: 153px;
+            margin: 15px 0;
+            border-radius: 25px;
+            border: 1px solid #fedf3b;
+            overflow: hidden;
+            position: relative;
+            .label {
+              position: absolute;
+              background: rgba(0, 0, 0, 0.6);
+              z-index: 100;
+              bottom: 10px;
+              right: 10px;
+              font-size: 12px;
+              display: inline-flex;
+              align-items: center;
+              height: 24px;
+              vertical-align: middle;
+              padding: 0 12px;
+              border-radius: 4px;
+              border-color: 1px solid rgba(255, 255, 255, 0.6);
+              white-space: nowrap;
+              svg {
+                width: 16px;
+                height: 16px;
+                margin-right: 3px;
+              }
+            }
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+              border-radius: 25px;
+              position: relative;
+            }
+          }
         }
-
-
       }
     }
 
-    .v-detial {
+    .v-detail {
       width: 90%;
       line-height: 44px;
       height: 44px;
-      background: #26878D;
+      background: #26878d;
       border-radius: 40px;
       text-align: center;
-      border: 1px solid #FEDF3B;
-      color: #FEDF3B;
+      border: 1px solid #fedf3b;
+      color: #fedf3b;
       position: absolute;
       left: 50%;
       bottom: 30px;
       transform: translateX(-50%);
       font-size: 16px;
+      z-index: 1000;
     }
   }
 
   .sshow {
     transform: translateY(calc(100% - 22px));
+    .swiper-pagination {
+      display: none;
+    }
+  }
+  .video-player {
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 1);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 10000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .close-icon {
+      position: absolute;
+      top: 30px;
+      right: 30px;
+      svg {
+        width: 28px;
+        height: 28px;
+      }
+    }
+    .video {
+      max-height: 450px;
+      width: 100%;
+
+      video {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+      }
+      &.full {
+        height: 100%;
+        video {
+          object-fit: scale-down;
+        }
+        .opt {
+          display: none;
+        }
+      }
+      .opt {
+        width: 100%;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 30px;
+      }
+      .opt-fullscreen {
+        color: white;
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        border-radius: 8px;
+        border: 1px solid white;
+        border-color: rgba($color: #ffffff, $alpha: 0.7);
+        padding: 2px 14px 2px 8px;
+        svg {
+          width: 26px;
+          height: 26px;
+        }
+      }
+    }
   }
 }
 </style>
 
 <style lang="scss">
-.swiper-pagination{
-  bottom: 76px!important;
+.swiper-pagination {
+  top: 5px !important;
+  height: 30px;
 }
 .my-bullet {
   width: 12px;
@@ -281,9 +546,9 @@ $w: 10px;
 
 .my-bullet-active {
   background-image: url(~@/assets/images/resource/detail/card_select.png);
-  width: 24px;
-  height: 24px;
+  width: 16px;
+  height: 16px;
   background-size: 100% 100%;
   background-color: transparent;
 }
-</style>
+</style>