feat: --

src/App.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { RouterView } from "vue-router";
+
+localStorage.setItem("visitCount", "1");
 </script>
 
 <template>

src/apis/index.js

@@ -1,5 +1,12 @@
-import { requestByGet } from "@dage/service";
+import { requestByGet, requestByPost } from "@dage/service";
 
 export const getViewerApi = () => {
   return requestByGet("/api/visit/getList");
 };
+
+export const addViewerApi = (num) => {
+  return requestByPost("/api/visit/add", {
+    num,
+    type: "visit",
+  });
+};

src/assets/data.js

@@ -4,10 +4,190 @@ export const infoTemo = {
   serverUrl: serverUrlTemp,
   swArr: [
     {
+      id: 38,
+      name: "天路云锦——跨越千年的经纬交融",
+      partOf: "西藏博物馆",
+      link: `${serverUrlTemp}/bwCN/scene/6K7QZ3SX46J/index.html`,
+      code: "6K7QZ3SX46J",
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true, //属于轮播图
+      bannerConfig: {
+        imgs: [
+          {
+            name: "1.png",
+            style: {
+              width: 75,
+              height: 85,
+              top: 35,
+              right: 35,
+            },
+          },
+          {
+            name: "2.png",
+            style: {
+              width: 295,
+              height: 392,
+              top: 88,
+              right: 52,
+            },
+          },
+          {
+            name: "3.png",
+            style: {
+              width: 287,
+              height: 185,
+              top: 498,
+              right: 41,
+            },
+          },
+          {
+            name: "btn.png",
+            style: {
+              width: 340,
+              height: 80,
+              top: 1284,
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: "99",
+            },
+          },
+          {
+            name: "4.png",
+            style: {
+              width: 144,
+              height: 380,
+              top: 836,
+              left: 32,
+              zIndex: "99",
+            },
+          },
+          {
+            name: "5.png",
+            style: {
+              width: "100%",
+              top: 0,
+              left: 0,
+            },
+          },
+        ],
+      },
+    },
+    {
+      id: 37,
+      name: "定海商帮——风云际会百年路",
+      partOf: "舟山博物馆",
+      link: `${serverUrlTemp}/bwCN/scene/LBacIX1hVkK-39/index.html`,
+      code: "LBacIX1hVkK-39",
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true, //属于轮播图
+      bannerConfig: {
+        imgs: [
+          {
+            name: "1.png",
+            style: {
+              width: 671,
+              height: 810,
+              top: 22,
+              marginLeft: -5,
+              left: "50%",
+              transform: "translateX(-50%)",
+            },
+          },
+          {
+            name: "logo.png",
+            style: {
+              width: 130,
+              height: 125,
+              top: 44,
+              left: 44,
+            },
+          },
+          {
+            name: "btn.png",
+            style: {
+              width: 192,
+              height: 82,
+              top: 1000,
+              left: 85,
+              zIndex: "99",
+            },
+          },
+        ],
+      },
+    },
+    {
+      id: 36,
+      name: "锦样人生——钱小萍丝绸艺术作品展",
+      partOf: "中国丝绸博物馆",
+      link: `${serverUrlTemp}/bwCN/scene/0jJIWZByLzI-40/index.html`,
+      code: "0jJIWZByLzI-40",
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true, //属于轮播图
+      bannerConfig: {
+        imgs: [
+          {
+            name: "1.png",
+            style: {
+              width: 58,
+              height: 543,
+              top: 73,
+              left: 76,
+            },
+          },
+          {
+            name: "2.png",
+            style: {
+              width: 258,
+              height: 393,
+              top: 947,
+              left: 23,
+            },
+          },
+          {
+            name: "3.png",
+            style: {
+              width: 332,
+              height: 102,
+              top: 1480,
+              left: 43,
+            },
+          },
+          {
+            name: "4.png",
+            style: {
+              width: 216,
+              height: 172,
+              top: 1410,
+              right: 48,
+            },
+          },
+          {
+            name: "btn.png",
+            style: {
+              width: 217,
+              height: 54,
+              top: 1391,
+              left: 43,
+              zIndex: "99",
+            },
+          },
+        ],
+      },
+    },
+    {
       id: 35,
       name: "楚风剑韵·玉柄流光——楚国第一玉剑数字展",
       partOf: "十堰市博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/chuGuoYuJian/index.html#/`,
+      link: `${serverUrlTemp}/bwCN/scene/chuGuoYuJian/index.html#/?mask=1&back=1`,
       code: "CGYJ_CODE",
       oldNum: 0,
       newNum: 0,
@@ -62,32 +242,32 @@ export const infoTemo = {
       changeSta: true,
       loc: 1, //属于第一个模板
       isSW: true, //属于轮播图
-      bannerConfig: {
-        imgs: [
-          {
-            name: "btn.png",
-            style: {
-              width: 253,
-              height: 45,
-              top: 1176,
-              left: "50%",
-              transform: "translateX(-50%)",
-              zIndex: "99",
-            },
-          },
-          {
-            name: "1.png",
-            style: {
-              width: 353,
-              height: 697,
-              top: 242,
-              marginLeft: -54,
-              left: "50%",
-              transform: "translateX(-50%)",
-            },
-          },
-        ],
-      },
+      // bannerConfig: {
+      //   imgs: [
+      //     {
+      //       name: "btn.png",
+      //       style: {
+      //         width: 253,
+      //         height: 45,
+      //         top: 1176,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //         zIndex: "99",
+      //       },
+      //     },
+      //     {
+      //       name: "1.png",
+      //       style: {
+      //         width: 353,
+      //         height: 697,
+      //         top: 242,
+      //         marginLeft: -54,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //       },
+      //     },
+      //   ],
+      // },
     },
     {
       id: 33,
@@ -100,17 +280,64 @@ export const infoTemo = {
       changeSta: true,
       loc: 1, //属于第一个模板
       isSW: true, //属于轮播图
+      // bannerConfig: {
+      //   style: {
+      //     backgroundPosition: "top center",
+      //   },
+      //   imgs: [
+      //     {
+      //       name: "btn.png",
+      //       style: {
+      //         width: 224,
+      //         height: 79,
+      //         top: 1381,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //         zIndex: "99",
+      //       },
+      //     },
+      //     {
+      //       name: "1.png",
+      //       style: {
+      //         width: 747,
+      //         height: 914,
+      //         bottom: 0,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //       },
+      //     },
+      //     {
+      //       name: "2.png",
+      //       style: {
+      //         width: 495,
+      //         height: 273,
+      //         top: 308,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //       },
+      //     },
+      //   ],
+      // },
+    },
+    {
+      id: 32,
+      name: "礼蕴天地 和合致美——文物里的东方生活美学展",
+      partOf: "武侯祠博物馆",
+      link: `${serverUrlTemp}/bwCN/scene/SG-Y4mCHTxYxaM/index.html?m=SG-Y4mCHTxYxaM#/`,
+      code: "SG-Y4mCHTxYxaM",
+      oldNum: 0,
+      newNum: 0,
+      changeSta: true,
+      loc: 1, //属于第一个模板
+      isSW: true, //属于轮播图
       bannerConfig: {
-        style: {
-          backgroundPosition: "top center",
-        },
         imgs: [
           {
             name: "btn.png",
             style: {
-              width: 224,
-              height: 79,
-              top: 1381,
+              width: 351,
+              height: 80,
+              top: 1206,
               left: "50%",
               transform: "translateX(-50%)",
               zIndex: "99",
@@ -119,9 +346,9 @@ export const infoTemo = {
           {
             name: "1.png",
             style: {
-              width: 747,
-              height: 914,
-              bottom: 0,
+              width: 684,
+              height: 51,
+              top: 27,
               left: "50%",
               transform: "translateX(-50%)",
             },
@@ -129,9 +356,19 @@ export const infoTemo = {
           {
             name: "2.png",
             style: {
-              width: 495,
-              height: 273,
-              top: 308,
+              width: 227,
+              height: 921,
+              top: 145,
+              left: "50%",
+              transform: "translateX(-50%)",
+            },
+          },
+          {
+            name: "3.png",
+            style: {
+              width: 713,
+              height: 90,
+              bottom: 20,
               left: "50%",
               transform: "translateX(-50%)",
             },
@@ -140,22 +377,10 @@ export const infoTemo = {
       },
     },
     {
-      id: 32,
-      name: "礼蕴天地 和合致美——文物里的东方生活美学展",
-      partOf: "武侯祠博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/SG-Y4mCHTxYxaM/index.html?m=SG-Y4mCHTxYxaM#/`,
-      code: "SG-Y4mCHTxYxaM",
-      oldNum: 0,
-      newNum: 0,
-      changeSta: true,
-      loc: 1, //属于第一个模板
-      isSW: true, //属于轮播图
-    },
-    {
       id: 31,
       name: "吴淞江，苏州河",
       partOf: "苏州湾博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/UJz22X8Eeq7/index.html?m=SG-UJz22X8Eeq7`,
+      link: `${serverUrlTemp}/bwCN/scene/UJz22X8Eeq7/scene.html?m=SG-UJz22X8Eeq7`,
       code: "SG-UJz22X8Eeq7",
       oldNum: 0,
       newNum: 0,
@@ -210,13 +435,13 @@ export const infoTemo = {
       id: 30,
       name: "看见中国先秦丝绸宝库一一荆州马山一号楚墓织绣品特展",
       partOf: "荆州博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/2tsq9R17gWx/index.html?m=SG-2tsq9R17gWx`,
+      link: `${serverUrlTemp}/bwCN/scene/2tsq9R17gWx/scene.html`,
       code: "SG-2tsq9R17gWx",
       oldNum: 0,
       newNum: 0,
       changeSta: false,
       loc: 1, //属于第一个模板
-      isSW: true, //属于轮播图
+      isSW: false, //属于轮播图
       bannerConfig: {
         imgs: [
           {
@@ -431,7 +656,7 @@ export const infoTemo = {
       id: 27,
       name: "丝光度--梁绍基的良渚梦境",
       partOf: "良渚博物院",
-      link: `${serverUrlTemp}/bwCN/scene/KDkinir2nCX-29/index.html?m=SG-KDkinir2nCX-29`,
+      link: `${serverUrlTemp}/bwCN/scene/KDkinir2nCX-29/scene.html`,
       code: "SG-KDkinir2nCX-29",
       oldNum: 0,
       newNum: 0,
@@ -505,7 +730,7 @@ export const infoTemo = {
       id: 26,
       name: "瑞兽祥禽映华夏--中国传统文化里的动物世界",
       partOf: "中国（海南）南海博物",
-      link: `${serverUrlTemp}/bwCN/scene/3dMfhvy0ttC-25/index.html?m=SG-3dMfhvy0ttC-25`,
+      link: `${serverUrlTemp}/bwCN/scene/3dMfhvy0ttC-25/scene.html`,
       code: "SG-3dMfhvy0ttC-25",
       oldNum: 0,
       newNum: 0,
@@ -585,7 +810,7 @@ export const infoTemo = {
       id: 25,
       name: "走进两海交汇的文明--意大利普利亚考古文物展",
       partOf: "中国（海南）南海博物",
-      link: `${serverUrlTemp}/bwCN/scene/sp3L9rPJMRq/index.html?m=SG-sp3L9rPJMRq`,
+      link: `${serverUrlTemp}/bwCN/scene/sp3L9rPJMRq/scene.html`,
       code: "SG-sp3L9rPJMRq",
       oldNum: 0,
       newNum: 0,
@@ -650,7 +875,7 @@ export const infoTemo = {
       id: 24,
       name: "锦程-中国丝绸与丝绸之路",
       partOf: "中国丝绸博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/SGCtiUIIgiE-40/index.html?m=SGCtiUIIgiE-40`,
+      link: `${serverUrlTemp}/bwCN/scene/SGCtiUIIgiE-40/scene.html`,
       code: "SGCtiUIIgiE-40",
       oldNum: 0,
       newNum: 0,
@@ -915,7 +1140,7 @@ export const infoTemo = {
       id: 17,
       name: "碧色万里--10-12世纪的草原丝绸之路",
       partOf: "中国丝绸博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/SG-cZhL5llbCLb-09/scene/index.html`,
+      link: `${serverUrlTemp}/bwCN/scene/SG-cZhL5llbCLb-09/scene/index.html#/home?m=SG-cZhL5llbCLb-09`,
       code: "SG-cZhL5llbCLb-09",
       oldNum: 0,
       newNum: 0,
@@ -988,7 +1213,7 @@ export const infoTemo = {
       id: 16,
       name: "物华天宝 黎海琼珍",
       partOf: "海南省博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/wuHuaTianBao/scene/index.html`,
+      link: `${serverUrlTemp}/bwCN/scene/wuHuaTianBao/scene/index.html#/home?m=mm-1562`,
       code: "mm-1562",
       oldNum: 0,
       newNum: 0,
@@ -1063,7 +1288,7 @@ export const infoTemo = {
       id: 15,
       name: "元代的杭州和泉州",
       partOf: "杭州博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/SG-KMDgP6uBEsn/index.html`,
+      link: `${serverUrlTemp}/bwCN/scene/SG-KMDgP6uBEsn/index.html#/scene`,
       code: "SG-KMDgP6uBEsn",
       oldNum: 0,
       newNum: 0,
@@ -1121,7 +1346,7 @@ export const infoTemo = {
       id: 14,
       name: "武汉博物馆",
       partOf: "琬琰英华——馆藏历代文物珍赏",
-      link: `${serverUrlTemp}/bwCN/scene/WuhanMuseum/scene/index.html`,
+      link: `${serverUrlTemp}/bwCN/scene/WuhanMuseum/scene/index.html#/home?m=SG-56imSLC7Zli`,
       code: "WuhanMuseum",
       oldNum: 0,
       newNum: 0,
@@ -1176,59 +1401,59 @@ export const infoTemo = {
       changeSta: true,
       loc: 1, //属于第一个模板
       isSW: false, //属于轮播图
-      bannerConfig: {
-        imgs: [
-          {
-            name: "btn.png",
-            style: {
-              width: 270,
-              height: 71,
-              top: 1003,
-              left: "50%",
-              transform: "translateX(-50%)",
-              zIndex: "99",
-            },
-          },
-          {
-            name: "1.png",
-            style: {
-              width: "100%",
-              top: 1067,
-              left: 0,
-            },
-          },
-          {
-            name: "2.png",
-            style: {
-              width: 726,
-              height: 110,
-              top: 126,
-              left: "50%",
-              transform: "translateX(-50%)",
-            },
-          },
-          {
-            name: "3.png",
-            style: {
-              width: 682,
-              height: 675,
-              top: 229,
-              left: "50%",
-              transform: "translateX(-50%)",
-              zIndex: "1",
-            },
-          },
-          {
-            name: "4.png",
-            style: {
-              width: 92,
-              height: 441,
-              top: 645,
-              right: 31,
-            },
-          },
-        ],
-      },
+      // bannerConfig: {
+      //   imgs: [
+      //     {
+      //       name: "btn.png",
+      //       style: {
+      //         width: 270,
+      //         height: 71,
+      //         top: 1003,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //         zIndex: "99",
+      //       },
+      //     },
+      //     {
+      //       name: "1.png",
+      //       style: {
+      //         width: "100%",
+      //         top: 1067,
+      //         left: 0,
+      //       },
+      //     },
+      //     {
+      //       name: "2.png",
+      //       style: {
+      //         width: 726,
+      //         height: 110,
+      //         top: 126,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //       },
+      //     },
+      //     {
+      //       name: "3.png",
+      //       style: {
+      //         width: 682,
+      //         height: 675,
+      //         top: 229,
+      //         left: "50%",
+      //         transform: "translateX(-50%)",
+      //         zIndex: "1",
+      //       },
+      //     },
+      //     {
+      //       name: "4.png",
+      //       style: {
+      //         width: 92,
+      //         height: 441,
+      //         top: 645,
+      //         right: 31,
+      //       },
+      //     },
+      //   ],
+      // },
     },
     {
       id: 11,
@@ -1293,7 +1518,7 @@ export const infoTemo = {
       id: 10,
       name: "渺渺大象-浙江古代造像艺术",
       partOf: "平湖市博物馆",
-      link: `${serverUrlTemp}/bwCN/scene/mm1574/index.html?m=mm-1574`,
+      link: `${serverUrlTemp}/bwCN/scene/mm1574/scene.html`,
       code: "mm-1574",
       oldNum: 0,
       newNum: 0,
@@ -1358,7 +1583,7 @@ export const infoTemo = {
       id: 9,
       name: "热的血－纪念五卅运动100周年文物史料专题展",
       partOf: "中共一大纪念馆",
-      link: `${serverUrlTemp}/bwCN/scene/mm1567/index.html?m=mm-1567`,
+      link: `${serverUrlTemp}/bwCN/scene/mm1567/index.html?m=mm-1567#/scene`,
       code: "mm-1567",
       oldNum: 0,
       newNum: 0,
@@ -1410,7 +1635,7 @@ export const infoTemo = {
       id: 7,
       name: "深蓝宝藏—南海西北陆坡一二号沉船考古成果特展",
       partOf: "中国（海南）南海博物馆 ",
-      link: `${serverUrlTemp}/bwCN/scene/mm1537/index.html?m=mm-1537`,
+      link: `${serverUrlTemp}/bwCN/scene/mm1537/index.html?m=mm-1537#/home`,
       code: "mm-1537",
       oldNum: 0,
       newNum: 0,
@@ -1491,7 +1716,7 @@ export const infoTemo = {
       id: 3,
       name: '"宜子孙--汉代玉器集萃"展',
       partOf: "良渚博物院 ",
-      link: `${serverUrlTemp}/bwCN/scene/mm1557/index.html?m=mm-1557`,
+      link: `${serverUrlTemp}/bwCN/scene/mm1557/scene.html`,
       code: "mm-1557",
       oldNum: 0,
       newNum: 0,

src/components/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card" @click="openPage(item)">
+  <div class="card" @click="handleClick">
     <VanImage
       :src="`./images/${item.id}s.jpg`"
       :alt="item.name"
@@ -23,6 +23,14 @@
 
 <script setup>
 import { openPage } from "@/utils";
+import { addViewerApi } from "@/apis";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
 
 /**
  * 取主标题：在最早出现的分隔符之前截断。
@@ -58,12 +66,10 @@ function formatViewerCount(v) {
   return `${Number.isInteger(t) ? t : t.toFixed(1)}w`;
 }
 
-defineProps({
-  item: {
-    type: Object,
-    required: true,
-  },
-});
+function handleClick() {
+  addViewerApi(props.item.code);
+  openPage(props.item);
+}
 </script>
 
 <style scoped lang="scss">

src/components/SearchPopup.vue

@@ -144,7 +144,7 @@ watch(show, (open) => {
     min-height: 0;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    align-items: flex-start;
     gap: 33px;
     overflow-y: auto;
 
@@ -156,6 +156,7 @@ watch(show, (open) => {
   &-empty {
     grid-column: 1 / -1;
     margin: 80px 0 0;
+    width: 100%;
     text-align: center;
     color: #76685e;
     font-size: 26px;

src/pages/Home/index.vue

@@ -11,7 +11,7 @@
       <SwiperSlide
         v-for="item in recommendList"
         :key="item.id"
-        @click="openPage(item)"
+        @click="handleSlideClick(item)"
       >
         <VanImage
           :src="`./images/${item.id}h.jpg`"
@@ -95,6 +95,7 @@ import { useRoute, useRouter } from "vue-router";
 import { openPage } from "@/utils";
 import SearchPopup from "@/components/SearchPopup.vue";
 import QrcodePopup from "@/components/QrcodePopup.vue";
+import { addViewerApi } from "@/apis";
 
 const route = useRoute();
 const router = useRouter();
@@ -145,6 +146,11 @@ const getInfo = async () => {
   resourceList.value = temp;
 };
 
+const handleSlideClick = (item) => {
+  addViewerApi(item.code);
+  openPage(item);
+};
+
 onMounted(() => {
   getInfo();
 });

src/pages/Scene/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="scene-page">
+    <iframe
+      class="scene-iframe"
+      :src="iframeSrc"
+      frameborder="0"
+      title="场景"
+    />
+    <img
+      src="@/assets/images/back1.png"
+      alt="返回"
+      class="scene-back-btn"
+      @click="goBack"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+const route = useRoute();
+
+const iframeSrc = computed(() => {
+  const url = new URL(decodeURIComponent(route.query.url));
+  url.searchParams.set("play", "1");
+  return url;
+});
+
+const goBack = () => {
+  router.back();
+};
+</script>
+
+<style scoped lang="scss">
+@use "@/assets/utils.scss";
+
+.scene-page {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+}
+
+.scene-iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+// prettier-ignore
+.scene-back-btn {
+  position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 67px;
+    height: 67px;
+    cursor: pointer;
+    z-index: 999;
+}
+</style>

src/router/index.js

@@ -13,6 +13,11 @@ const router = createRouter({
       component: () => import("@/pages/Banner/index.vue"),
       name: "Banner",
     },
+    {
+      path: "/scene",
+      component: () => import("@/pages/Scene/index.vue"),
+      name: "Scene",
+    },
   ],
 });
 

src/utils/index.js

@@ -22,5 +22,5 @@ export const openPage = (item, verify = true) => {
     return;
   }
 
-  window.open(item.link, "_blank");
+  router.push({ name: "Scene", query: { url: encodeURIComponent(item.link) } });
 };