style: --

package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.8.3",
     "dayjs": "^1.11.7",
     "element-plus": "^2.4.3",
+    "lib-flexible": "^0.3.2",
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "qrcode": "^1.5.3",
@@ -36,6 +37,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "less": "^4.0.0",
-    "less-loader": "^8.0.0"
+    "less-loader": "^8.0.0",
+    "postcss-px-to-viewport": "^1.1.1"
   }
 }

postcss.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      unitToConvert: 'px', // 需要转换的单位，默认为"px"
+      viewportWidth: 1920, // 设计稿的视口宽度
+      unitPrecision: 5, // 单位转换后保留的精度
+      propList: ['*'], // 能转化为vw的属性列表
+      viewportUnit: 'vw', // 希望使用的视口单位
+      fontViewportUnit: 'vw', // 字体使用的视口单位
+      selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
+      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
+      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
+      replace: true, //  是否直接更换属性值，而不添加备用属性
+      exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
+      include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
+      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+      landscapeUnit: 'vw', // 横屏时使用的单位
+      landscapeWidth: 1920 // 横屏时使用的视口宽度
+    }
+  }
+}

src/App.vue

@@ -34,10 +34,12 @@
 </template>
 
 <script setup>
-import { provide } from 'vue'
+import { provide, inject } from 'vue'
 import { useStore } from "vuex"
+import { useRouter } from "vue-router"
 
 const store = useStore()
+const router = useRouter()
 
 /**
  * 背景音乐
@@ -99,6 +101,49 @@ const startBgAudio = () => {
 provide('handleBgAudio', handleBgAudio)
 provide('stopBgAudio', stopBgAudio)
 provide('startBgAudio', startBgAudio)
+
+const HISTORY_KEY = 'yddFakeHistory'
+router.beforeEach((to, from) => {
+  const cache = sessionStorage.getItem(HISTORY_KEY) ? JSON.parse(sessionStorage.getItem(HISTORY_KEY)) : []
+
+  console.log(to, from, cache.length && cache[cache.length - 1], '====')
+  if (cache.length && JSON.stringify({
+    name: to.name,
+    query: to.query
+  }) === JSON.stringify(cache[cache.length - 1])) return
+
+  cache.push({
+    name: from.name,
+    query: from.query
+  })
+
+  if (cache.length > 5) {
+    cache.shift()
+  }
+
+  sessionStorage.setItem(HISTORY_KEY, JSON.stringify(cache))
+})
+
+const $isMobile = inject('$isMobile')
+const fakeBack = () => {
+  if ($isMobile) {
+    const cache = sessionStorage.getItem(HISTORY_KEY) ? JSON.parse(sessionStorage.getItem(HISTORY_KEY)) : []
+    if (cache.length) {
+      const info = cache.pop()
+      console.log(info)
+      router.replace(info).then(() => {
+        sessionStorage.setItem(HISTORY_KEY, JSON.stringify(cache))
+      })
+    } else {
+      router.replace({
+        name: 'HomeView'
+      })
+    }
+  } else {
+    router.go(-1)
+  }
+}
+provide('fakeBack', fakeBack)
 </script>
 
 <style lang="less">
@@ -121,6 +166,7 @@ provide('startBgAudio', startBgAudio)
     position: absolute;
     top: 52px;
     right: 58px;
+    width: 72px;
     cursor: pointer;
     z-index: 8;
   }
@@ -303,8 +349,8 @@ button.logo{
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 126px;
-    height: 126px;
+    width: 700px;
+    height: 700px;
     > img {
       width: 100%;
       height: 100%;
@@ -314,7 +360,7 @@ button.logo{
       left: 50%;
       bottom: -8px;
       transform: translate(-50%, 100%);
-      font-size: 16px;
+      font-size: 80px;
       font-family: Source Han Sans-Regular, Source Han Sans;
       font-weight: 400;
       color: #ffffff;

src/components/CameraContent-1-1-1.vue

@@ -455,10 +455,11 @@ setInterval(() => {
       >.character-frames-wrapper {
         position: absolute;
         left: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        bottom: calc(-30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(@frame-height * 1.5);
-        width: calc(@frame-width * 1.5);
+        bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(858 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        width: calc(429 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         overflow: hidden;
+        z-index: 1;
         >.frames {
           position: absolute;
           height: 100%;
@@ -693,20 +694,4 @@ setInterval(() => {
     }
   }
 }
-@media only screen and (max-width: 1560px) {
-  .character-frames-wrapper {
-    left: calc(250 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
-    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
-    height: calc(@frame-height * 1) !important;
-    width: calc(@frame-width * 1) !important;
-  }
-}
-@media only screen and (max-width: 1100px) {
-  .character-frames-wrapper {
-    left: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
-    bottom: calc(0 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) !important;
-    height: 350px !important;
-    width: 175px !important;
-  }
-}
 </style>

src/components/CameraContent-1-1-2.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>营都人员与机构</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           能工巧匠
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           专门机构
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -147,9 +147,9 @@ const tab1ContentPageNumber = ref(1)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button{
-        width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >span{
+        width: 46px;
+        height: 168px;
         writing-mode: vertical-lr;
         display: flex;
         justify-content: center;
@@ -160,8 +160,9 @@ const tab1ContentPageNumber = ref(1)
         letter-spacing: 8px;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+        cursor: pointer;
       }
-      >button.active{
+      >span.active{
         color: #43310E;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }

src/components/CameraContent-1-1-3.vue

@@ -87,7 +87,6 @@ const emit = defineEmits(['close'])
     >.left{
       flex: 0 0 auto;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >h2{
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-1-2-2.vue

@@ -8,32 +8,32 @@
     <div class="content-wrap">
       <h1>皇城内的建筑布局</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           御苑
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           太液池
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 3
           }"
           @click="activeTabIdx = 3"
         >
           隆福宫与兴圣宫
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 0"
@@ -119,16 +119,17 @@ const activeTabIdx = ref(0)
   height: calc(680 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
   &__title {
-    margin-bottom: 45px;
+    margin-bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: nowrap;
+    font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   }
   &__inner {
     display: flex;
     align-items: flex-start;
 
     img {
-      flex: 0 0 437px;
+      width: calc(430 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       margin-left: 23px;
-      padding: 20px;
       // border: 1px solid #FFE88B;
       // background: rgba(145,129,117,0.25);
     }
@@ -187,7 +188,7 @@ const activeTabIdx = ref(0)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button {
+      >span {
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -202,7 +203,7 @@ const activeTabIdx = ref(0)
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
       }
-      >button.active{
+      >span.active{
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }

src/components/CameraContent-1-3-1.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>大都城内的寺庙建筑</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           大圣寿万安寺
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           大庆寿寺
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -137,7 +137,7 @@ const activeTabIdx = ref(1)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button {
+      >span {
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         padding-bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -151,8 +151,9 @@ const activeTabIdx = ref(1)
         letter-spacing: 8px;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+        cursor: pointer;
       }
-      >button.active{
+      >span.active{
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }
@@ -171,17 +172,21 @@ const activeTabIdx = ref(1)
       left: calc(480 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(80 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       width: calc(900 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(750 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: flex;
       justify-content: center;
       align-items: flex-start;
 
+      img {
+        width: calc(405 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
       .card-title {
         margin-bottom: 35px;
         white-space: nowrap;
       }
       .text-indent {
         font-size: 20px;
+        overflow: auto;
+        max-height: 475px;
       }
       &__inner {
         margin-right: 40px;

src/components/CameraContent-1-3-3.vue

@@ -113,6 +113,9 @@ const emit = defineEmits(['close'])
         transform: translateY(-50%) scale(1.2);
       }
     }
+    .detail-img {
+      width: 719px;
+    }
   }
 }
 </style>

src/components/CameraContent-2-1-3.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>水利专家及河段治理</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           水利专家
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           河段治理
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -177,7 +177,7 @@ const tab1ContentPageNumber = ref(1)
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
-      >button {
+      >span {
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         writing-mode: vertical-lr;
@@ -190,9 +190,10 @@ const tab1ContentPageNumber = ref(1)
         background: #AC997F;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0, 0, 0, 0.25);
+        cursor: pointer;
       }
 
-      >button.active {
+      >span.active {
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }

src/components/CameraContent-2-2-1.vue

@@ -88,7 +88,6 @@ const emit = defineEmits(['close'])
     >.left{
       flex: 0 0 auto;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       >h2{
         width: calc(616 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(62 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

src/components/CameraContent-2-2-2.vue

@@ -68,6 +68,11 @@ const emit = defineEmits(['close'])
       text-align: center;
       font-size: 18px;
     }
+    &__item {
+      img {
+        width: 782px;
+      }
+    }
   }
   >button.return{
     position: absolute;
@@ -79,6 +84,7 @@ const emit = defineEmits(['close'])
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+    z-index: 1;
   }
   >.content-wrap{
     position: absolute;
@@ -86,12 +92,12 @@ const emit = defineEmits(['close'])
     top: 54%;
     width: 100%;
     // width: calc(1920 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: 723px;
     transform: translate(-50%, -50%);
     background-image: url(@/assets/images/camera-content-2-1-1-design-bg.png);
     background-size: cover;
     background-repeat: no-repeat;
-    background-position: center center;
+    background-position: center;
     >.left{
       flex: 0 0 auto;
       position: relative;

src/components/CameraContent-2-3-1.vue

@@ -28,7 +28,6 @@
         > -->
         <img
           class=""
-          :style="{width: 'auto'}"
           src="@/assets/images/camera-content-2-3-1-img-2.png"
           alt=""
           draggable="false"

src/components/CameraContent-3-1-1.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>元代文化艺术的发展</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           发展与机构
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           艺术家
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -142,7 +142,7 @@ const activeTabIdx = ref(1)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button{
+      >span{
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         writing-mode: vertical-lr;
@@ -155,8 +155,9 @@ const activeTabIdx = ref(1)
         letter-spacing: 1px;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+        cursor: pointer;
       }
-      >button.active{
+      >span.active{
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }

src/components/CameraContent-3-1-2.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>上流社会的雅集盛会</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           盛会介绍
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           活动内容
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -182,7 +182,7 @@ const activeTabIdx = ref(1)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button{
+      >span{
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         writing-mode: vertical-lr;
@@ -195,14 +195,12 @@ const activeTabIdx = ref(1)
         letter-spacing: 1px;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+        cursor: pointer;
       }
-      >button.active{
+      >span.active{
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }
-      >button.active{
-        background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
-      }
       >.splitter{
         position: absolute;
         left: 50%;

src/components/CameraContent-3-2-1.vue

@@ -8,23 +8,23 @@
     <div class="content-wrap">
       <h1>元曲的文化成就</h1>
       <div class="tabbar">
-        <button
+        <span
           :class="{
             active: activeTabIdx === 1
           }"
           @click="activeTabIdx = 1"
         >
           概述
-        </button>
+        </span>
         <div class="splitter" />
-        <button
+        <span
           :class="{
             active: activeTabIdx === 2
           }"
           @click="activeTabIdx = 2"
         >
           发展
-        </button>
+        </span>
       </div>
       <div
         v-if="activeTabIdx === 1"
@@ -144,7 +144,7 @@ const activeTabIdx = ref(1)
       align-items: center;
       left: calc(373 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       top: calc(42 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      >button{
+      >span{
         width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         height: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         writing-mode: vertical-lr;
@@ -157,8 +157,9 @@ const activeTabIdx = ref(1)
         letter-spacing: 8px;
         font-family: "SourceHanSerifCN-SemiBold";
         box-shadow: 3px 4px 9px 0px rgba(0,0,0,0.25);
+        cursor: pointer;
       }
-      >button.active{
+      >span.active{
         color: #6A3906;
         background: linear-gradient(322deg, #C69D49 0%, #F8E6A9 68%);
       }

src/components/CameraContent-3-2-2.vue

@@ -171,10 +171,11 @@ const next = () => {
       background-repeat: no-repeat;
       background-position: center center;
       display: flex;
-      justify-content: space-between;
+      justify-content: center;
       align-items: center;
       box-sizing: border-box;
       >.design-wrap-left {
+        margin-right: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         width: calc(1000 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         >.left-title {
           width: calc(579 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -197,26 +198,8 @@ const next = () => {
         }
       }
       >.design-wrap-right {
-        position: relative;
-        >.btn-left {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          left: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
-        }
-        >.btn-right {
-          width: 50px;
-          height: 50px;
-          position: absolute;
-          right: -25px;
-          top: 50%;
-          transform: translateY(-50%);
-          z-index: 2;
-          cursor: pointer;
+        img {
+          width: calc(367 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
         }
       }
     }

src/components/CameraContent-3-2-3.vue

@@ -114,12 +114,17 @@ const title = '表演元曲的著名演员'
     top: 0;
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     padding: 0 97px 0 195px;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     background: url(@/assets/images/camera-content-3-1-3-design-bg.png) no-repeat center / cover;
+
+    img {
+      margin-right: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(520 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
   }
 }
 </style>

src/components/HotspotDialog-1.vue

@@ -20,6 +20,7 @@
     <!-- 曲苑 -->
     <template v-if="isQY">
       <div
+        v-if="!$isMobile || ($isMobile && qyHover)"
         :class="['qy', qyHover && 'hover']"
         @mouseover="qyHover = true"
         @click="openNewWindow"
@@ -35,11 +36,20 @@
         </div>
       </div>
       <div
+        v-if="$isMobile"
+        class="hotspot-icon spot-qy"
+        @click="qyHover = !qyHover"
+      >
+        <img
+          src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+        >
+      </div>
+      <div
         v-if="qyHover"
         class="qy-hover-bg"
       />
 
-      <div
+      <!-- <div
         :class="['ssz', sszHover && 'hover']"
         @mouseover="sszHover = true"
         @click="sszDetailVisbile = true"
@@ -57,7 +67,7 @@
       <div
         v-if="sszHover"
         class="ssz-hover-bg"
-      />
+      /> -->
 
       <!-- label 详情 -->
       <div
@@ -81,7 +91,7 @@
         <p>戏台藻井</p>
       </div>
 
-      <div
+      <!-- <div
         v-if="sszDetailVisbile"
         :class="['hotspot-dialog-1__info box']"
       >
@@ -100,12 +110,42 @@
           src="@/assets/images/hotspot-relic/image23-min.jpg"
         >
         <p>沙石柱</p>
-      </div>
+      </div> -->
     </template>
 
     <!-- 航运 -->
     <template v-if="isHY">
+      <template v-if="$isMobile">
+        <div
+          class="hotspot-icon spot-hy"
+          @click="hyHover = !hyHover"
+        >
+          <img
+            src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+          >
+        </div>
+
+        <div
+          class="hotspot-icon spot-hy2"
+          @click="hy2Hover = !hy2Hover"
+        >
+          <img
+            src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+          >
+        </div>
+
+        <div
+          class="hotspot-icon spot-hy3"
+          @click="hy3Hover = !hy3Hover"
+        >
+          <img
+            src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+          >
+        </div>
+      </template>
+
       <div
+        v-if="!$isMobile || ($isMobile && hyHover)"
         :class="['hy', hyHover && 'hover']"
         @mouseover="hyHover = true"
         @click="() => {
@@ -130,6 +170,7 @@
       />
 
       <div
+        v-if="!$isMobile || ($isMobile && hy2Hover)"
         :class="['hy2', hy2Hover && 'hover']"
         @mouseover="hy2Hover = true"
         @click="() => {
@@ -154,6 +195,7 @@
       />
 
       <div
+        v-if="!$isMobile || ($isMobile && hy3Hover)"
         :class="['hy3', hy3Hover && 'hover']"
         @mouseover="hy3Hover = true"
         @click="hy3DetailVisbile = true"
@@ -212,6 +254,7 @@
         <video
           autoplay
           controls
+          class="hzcc-video"
           src="@/assets/videos/hotspot-relic/hzcc.mp4"
           @play="stopBgAudio"
           @ended="startBgAudio"
@@ -252,6 +295,16 @@
     <!-- 河畅 -->
     <template v-if="isHC">
       <div
+        v-if="$isMobile"
+        class="hotspot-icon spot-hc"
+        @click="thhHover = !thhHover"
+      >
+        <img
+          src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+        >
+      </div>
+      <div
+        v-if="!$isMobile || ($isMobile && thhHover)"
         :class="['thh', thhHover && 'hover']"
         @mouseover="thhHover = true"
         @click="thhDetailVisbile = true"
@@ -287,21 +340,15 @@
           "
         >
         <img
+          class="box3-min"
           draggable="false"
           src="@/assets/images/box3-min.png"
         >
         <video
           autoplay
           controls
+          class="hc-video"
           src="@/assets/videos/scene-3-hover.mp4"
-          style="
-            position: absolute;
-            top: 50px;
-            left: 30px;
-            width: calc(100% - 60px);
-            height: calc(100% - 80px);
-            object-fit: cover;
-          "
           @play="stopBgAudio"
           @ended="startBgAudio"
         />
@@ -320,6 +367,17 @@
     <!-- 大都揽胜 -->
     <template v-if="isDDLS">
       <div
+        v-if="$isMobile"
+        class="hotspot-icon spot-qss"
+        @click="qssHover = !qssHover"
+      >
+        <img
+          src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+        >
+      </div>
+
+      <div
+        v-if="!$isMobile || ($isMobile && qssHover)"
         :class="['qss', qssHover && 'hover']"
         @mouseover="qssHover = true"
         @click="qssDetailVisbile = true"
@@ -377,6 +435,17 @@
       >
 
       <div
+        v-if="$isMobile"
+        class="hotspot-icon spot-dmd"
+        @click="dmdHover = !dmdHover"
+      >
+        <img
+          src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+        >
+      </div>
+
+      <div
+        v-if="!$isMobile || ($isMobile && dmdHover)"
         :class="['dmd', dmdHover && 'hover']"
         @mouseover="dmdHover = true"
         @click="dmdDetailVisbile = true"
@@ -436,8 +505,19 @@
 
     <!-- 雄伟帝都 -->
     <template v-if="isHYM">
+      <div
+        v-if="$isMobile"
+        class="hotspot-icon spot-hym"
+        @click="hymHover = !hymHover"
+      >
+        <img
+          src="https://4dkk.4dage.com/720yun_fd_manage/fodder/20231211_110554663.png?x-oss-process=image/resize,w_128,q_80"
+        >
+      </div>
+
       <!-- 雄伟帝都-内城门 -->
       <div
+        v-if="!$isMobile || ($isMobile && hymHover)"
         :class="['hym-ncm', hymHover && 'hover']"
         @mouseover="hymHover = true"
         @click="hymDetailVisbile = true"
@@ -475,6 +555,7 @@
         >
         <img
           draggable="false"
+          class="hym-photo"
           src="@/assets/images/box_2-min.png"
         >
         <p>元大都和义门复原图</p>
@@ -544,11 +625,12 @@
 </template>
 
 <script setup>
-import { ref, computed, reactive, inject } from "vue"
+import { ref, computed, inject } from "vue"
 import MsgContent from "./MsgContent.vue"
 import { useStore } from "vuex"
 import { useRoute, useRouter } from "vue-router"
 
+const $isMobile = inject('$isMobile')
 const store = useStore()
 const startBgAudio = inject("startBgAudio")
 const stopBgAudio = inject("stopBgAudio")
@@ -580,9 +662,9 @@ const hy3DetailVisbile = ref(false)
 const qyHover = ref(false)
 const qyDetailVisbile = ref(false)
 const sszHover = ref(false)
-const sszDetailVisbile = ref(false)
+// const sszDetailVisbile = ref(false)
 
-const openedBoxList = reactive([])
+// const openedBoxList = reactive([])
 
 // 曲苑
 const isQY = computed(() => ["_niQSUEYt"].includes(props.relicInfo.name))
@@ -603,10 +685,10 @@ const isDDLS = computed(() =>
   ["_Frw1X3B8", "_IR4EkN4Z"].includes(props.relicInfo.name)
 )
 
-const openNewWindow = () => {
+const openNewWindow = async() => {
   store.dispatch('openIframePage', {
-    url: 'https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html',
-    style: 'width: 375px; height: 812px'
+    url: 'http://192.168.0.44:8082' || 'https://houseoss.4dkankan.com/project/yzdyh-dadu/game/index.html',
+    style: $isMobile ? 'width: 100vh; height: 100%' : 'width: 375px; height: 812px'
   })
 }
 
@@ -763,6 +845,76 @@ const close = () => {
 </script>
 
 <style lang="less" scoped>
+.hc-video {
+  position: absolute;
+  top: 50px;
+  left: 30px;
+  width: calc(100% - 60px);
+  height: calc(100% - 80px);
+  object-fit: cover;
+}
+.hzcc-video {
+  width: 856px;
+}
+.hym-photo {
+  width: 1273px;
+}
+.box3-min {
+  width: 1061px;
+}
+.hotspot-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: inherit;
+    animation-name: hotspot-icon-animation;
+    animation-timing-function: steps(24, end);
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+  &.spot-qy {
+    margin: -100px 0 0 200px;
+  }
+  &.spot-hc {
+    margin-top: -160px;
+  }
+  &.spot-hy {
+    margin: 60px 0 0 -150px;
+  }
+  &.spot-hy2 {
+    margin: 180px 0 0 350px;
+  }
+  &.spot-hy3 {
+    margin: 70px 0 0 350px;
+  }
+  &.spot-hym {
+    margin: -200px 0 0 100px;
+  }
+  &.spot-dmd {
+    margin: -100px 0 0 -20px;
+  }
+  &.spot-qss {
+    margin: -100px 0 0 140px;
+  }
+}
+@keyframes hotspot-icon-animation {
+  0% {
+    translate: 0 0;
+  }
+  100% {
+    translate: 0 -100%;
+  }
+}
 .hotspot-dialog-1 {
   position: fixed;
   top: 0;
@@ -775,6 +927,7 @@ const close = () => {
     position: absolute;
     top: 57%;
     left: 46.5%;
+    width: 56px;
     z-index: 2;
 
     &.move {
@@ -803,49 +956,49 @@ const close = () => {
     position: fixed;
     top: 0;
     left: 0;
-    width: 100vw;
-    height: 100vh;
-  }
-  .icon-1 {
-    left: 53%;
-    bottom: 40%;
-  }
-  .icon-2 {
-    right: 2.5%;
-    bottom: 54%;
-  }
-  .icon-3 {
-    left: 31%;
-    bottom: 30%;
-  }
-  .icon-4 {
-    right: 38%;
-    bottom: 42.5%;
-  }
-  .icon-5 {
-    left: 40%;
-    bottom: 42%;
-  }
-  .icon-6 {
-    bottom: 26.5%;
-    right: 18.5%;
-  }
-  .icon-7 {
-    left: 47%;
-    bottom: 32%;
-  }
-  .icon-8 {
-    bottom: 34.5%;
-    right: 14%;
-  }
-  .icon-9 {
-    left: 28%;
-    bottom: 30.5%;
-  }
-  .icon-10 {
-    right: 16%;
-    bottom: 36.5%;
+    right: 0;
+    bottom: 0;
   }
+  // .icon-1 {
+  //   left: 53%;
+  //   bottom: 40%;
+  // }
+  // .icon-2 {
+  //   right: 2.5%;
+  //   bottom: 54%;
+  // }
+  // .icon-3 {
+  //   left: 31%;
+  //   bottom: 30%;
+  // }
+  // .icon-4 {
+  //   right: 38%;
+  //   bottom: 42.5%;
+  // }
+  // .icon-5 {
+  //   left: 40%;
+  //   bottom: 42%;
+  // }
+  // .icon-6 {
+  //   bottom: 26.5%;
+  //   right: 18.5%;
+  // }
+  // .icon-7 {
+  //   left: 47%;
+  //   bottom: 32%;
+  // }
+  // .icon-8 {
+  //   bottom: 34.5%;
+  //   right: 14%;
+  // }
+  // .icon-9 {
+  //   left: 28%;
+  //   bottom: 30.5%;
+  // }
+  // .icon-10 {
+  //   right: 16%;
+  //   bottom: 36.5%;
+  // }
   &.qy {
     background: url("@/assets/images/hotspot-relic/bg_quyuan-min.jpg") no-repeat
       center / cover;
@@ -1033,14 +1186,18 @@ const close = () => {
     position: absolute;
     top: 10vh;
     left: 25%;
-    z-index: 3;
+    z-index: 4;
 
     img:first-child {
       position: absolute;
       top: -33px;
       right: -33px;
+      width: 72px;
       cursor: pointer;
     }
+    img:last-child {
+      width: 409px;
+    }
   }
   .dmd {
     position: absolute;
@@ -1114,6 +1271,7 @@ const close = () => {
     position: absolute;
     top: 64px;
     left: 41px;
+    width: 72px;
     cursor: pointer;
   }
   &__info {
@@ -1146,7 +1304,7 @@ const close = () => {
         );
       }
       p {
-        top: -8px;
+        top: -16px;
       }
       img:first-child {
         top: -40px;
@@ -1156,6 +1314,7 @@ const close = () => {
       position: absolute;
       top: -10px;
       right: -33px;
+      width: 72px;
       cursor: pointer;
       z-index: 2;
     }

src/components/MsgContent.vue

@@ -30,6 +30,10 @@
 <script setup>
 import { computed, onBeforeUnmount, watch } from 'vue'
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
 const props = defineProps(['list', 'curIndex'])
 const emits = defineEmits(['update:cur-index', 'end', 'back'])
 
@@ -70,7 +74,7 @@ watch(curMsg, () => {
 })
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
   .msg-content {
     position: absolute;
     left: 0;
@@ -90,11 +94,14 @@ watch(curMsg, () => {
       right: 10vw;
       bottom: 0;
       color: #FFF1BE;
-      font-size: 22px;
+      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       letter-spacing: 4px;
       line-height: 37px;
-      font-family: "SourceHanSansSC-Normal";
       text-indent: 2em;
+
+      p {
+        font-family: "SourceHanSansSC-Normal" !important;
+      }
     }
     img:first-child {
       width: 100%;
@@ -103,6 +110,7 @@ watch(curMsg, () => {
       position: absolute;
       right: 36px;
       bottom: 23px;
+      width: calc(121 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     }
   }
 </style>

src/components/MutiRelicHotSpot.vue

@@ -113,6 +113,10 @@ const POSTER_LIST = [
   Poster1Img
 ]
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
 const store = useStore()
 const props = defineProps({
   relicInfo: {
@@ -230,40 +234,41 @@ const showRandomPoster = () => {
     position: absolute;
     top: 95px;
     right: 88px;
+    width: 72px;
     cursor: pointer;
   }
   .my-box {
     position: relative;
     top: -20px;
-    width: 1538px;
-    height: 759px;
+    width: calc(1538 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(759 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background: url('@/assets/images/hotspot-relic/bg_baoxiang-min.png') no-repeat center / contain;
 
     &-list {
       position: absolute;
-      top: 120px;
-      left: 395px;
+      top: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(395 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       display: grid;
       grid-template-columns: repeat(6, 1fr);
-      gap: 35px;
+      gap: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
       &__item {
         display: flex;
         flex-direction: column;
-        width: 103px;
+        width: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
         .img {
           display: flex;
           align-items: center;
           justify-content: center;
           position: relative;
-          width: 103px;
-          height: 103px;
+          width: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          height: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
           img {
             position: relative;
-            width: 70px;
-            height: 70px;
+            width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            height: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             object-position: center;
             object-fit: contain;
             z-index: 1;
@@ -279,7 +284,7 @@ const showRandomPoster = () => {
           }
         }
         .label {
-          width: 103px;
+          width: calc(103 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
@@ -310,9 +315,9 @@ const showRandomPoster = () => {
     flex-direction: column;
     align-items: center;
     position: relative;
-    padding: 110px 90px 150px;
-    width: 442px;
-    height: 565px;
+    padding: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(90 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0;
+    width: calc(442 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(565 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     background: url('@/assets/images/hotspot-relic/Label_wenwu-min.png') no-repeat center / cover;
     cursor: pointer;
     transition: transform linear .2s;
@@ -326,9 +331,9 @@ const showRandomPoster = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      padding: 0 50px;
-      width: 269px;
-      height: 57px;
+      padding: 0 calc(50 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(269 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(57 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       text-align: center;
       overflow: hidden;
       white-space: nowrap;
@@ -350,17 +355,22 @@ const showRandomPoster = () => {
     }
     .img {
       flex-shrink: 0;
-      width: 222px;
-      height: 230px;
+      width: calc(222 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
     }
 
     .description {
+      width: 100%;
       font-size: 18px;
       letter-spacing: 0 !important;
       font-family: "Source Han Sans SC light" !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
     }
   }
 }

src/components/StartUp.vue

@@ -160,7 +160,6 @@ function onClickSkip() {
     transform: translate(-50%, -50%);
     color: #614B39;
     font-size: 36px;
-    font-family: JingHuaLaoSong;
   }
   >button.start{
     position: absolute;

src/components/UserGuide.vue

@@ -19,21 +19,21 @@
       </template>
       <template v-else>
         <template v-if="curStep > 1">
-          <div
-            class="left-line"
-            style="top: 70px"
-          >
-            返回首页
+          <div class="guide-home">
+            <div
+              class="left-line"
+            >
+              返回首页
+            </div>
           </div>
-          <div class="guide-home" />
 
-          <div
-            class="left-line"
-            style="top: 159px"
-          >
-            操作指引
+          <div class="guide-guide">
+            <div
+              class="left-line"
+            >
+              操作指引
+            </div>
           </div>
-          <div class="guide-guide" />
         </template>
 
         <div
@@ -41,15 +41,19 @@
         >
           <div
             class="left-line"
-            style="width: 84px; top: 50%; left: -180px; transform: translateY(-50%)"
           >
             <span>场景互动</span>
           </div>
         </div>
 
         <template v-if="curStep > 5">
-          <div class="top-line">
-            对话赵孟頫
+          <div
+            class="character"
+            style="overflow: visible;"
+          >
+            <div class="top-line">
+              对话赵孟頫
+            </div>
           </div>
           <div class="character">
             <img
@@ -82,7 +86,6 @@
 
             <div
               class="top-line"
-              style="left: 15%; top: -110px; height: 21px"
             >
               <p>改变场景位置</p>
             </div>
@@ -91,10 +94,13 @@
 
         <div
           v-if="curStep > 4"
-          class="top-line"
-          style="left: unset; right: calc(25 / 1920 * 100vw); bottom: calc(290 / 1080 * 100vh);"
+          class="qhcj"
         >
-          切换场景
+          <div
+            class="top-line"
+          >
+            切换场景
+          </div>
         </div>
       </template>
     </template>
@@ -147,6 +153,10 @@ const handleClose = () => {
       animation-duration: 2.5s;
       animation-iteration-count: infinite;
     }
+    .top-line {
+      margin-left: 2px;
+      bottom: 550px;
+    }
   }
   span,
   p {
@@ -169,14 +179,18 @@ const handleClose = () => {
   span {
     position: absolute;
     left: 50%;
-    bottom: calc(18 / 1920 * 100vw);
-    font-size: calc(21 / 1920 * 100vw);
+    bottom: 18px;
+    font-size: 21px;
     color: #794A00;
     font-weight: 600;
     transform: translateX(-50%);
-    letter-spacing: calc(9 / 1920 * 100vw);
+    letter-spacing: 9px;
     font-family: Source Han Serif CN;
   }
+  .top-line {
+    top: -110px;
+    margin-left: -10px;
+  }
 }
 .guide-menu {
   position: absolute;
@@ -191,7 +205,18 @@ const handleClose = () => {
   letter-spacing: 5px;
   box-sizing: border-box;
   font-family: Source Han Serif CN;
-  background: url('@/assets/images/camera-btn-1-1-2-active.png');
+  background: url('@/assets/images/camera-btn-1-1-2-active.png') no-repeat center / contain;
+}
+.qhcj {
+  position: absolute;
+  right: 70px;
+  bottom: 250px;
+  width: 42px;
+  height: 11px;
+
+  .top-line {
+    bottom: 0;
+  }
 }
 .guide-home {
   position: absolute;
@@ -199,8 +224,7 @@ const handleClose = () => {
   height: 77px;
   top: 43px;
   right: 51px;
-  background-size: cover;
-  background-image: url('@/assets/images/btn-return-home-1.png');
+  background: url('@/assets/images/btn-return-home-1.png') no-repeat center / contain;
   z-index: 1;
 }
 .guide-guide {
@@ -213,31 +237,33 @@ const handleClose = () => {
 }
 .guide-dot {
   position: absolute;
-  top: 13%;
-  right: 44.8%;
+  top: 118px;
+  right: 860px;
   width: 35px;
   height: 35px;
-  background: url('@/assets/images/guide/Dots.png');
+  background: url('@/assets/images/guide/Dots.png')  no-repeat center / contain;
   z-index: 1;
 }
 .top-line {
   position: absolute;
-  left: 130px;
+  left: 50%;
   bottom: 550px;
+  height: fit-content;
   font-size: 18px;
   color: rgba(255,255,255,0.85);
   line-height: 21px;
   letter-spacing: 3px;
   white-space: nowrap;
+  transform: translateX(-50%);
   text-shadow: 2px 2px 15px #C9AA79;
 
   &::before {
     content: '';
     position: absolute;
-    bottom: -20px;
-    right: 50%;
-    width: 5px;
-    height: 5px;
+    left: 50%;
+    bottom: -10px;
+    width: 6px;
+    height: 6px;
     border-radius: 50%;
     background-color: #FFEAA8;
     transform: translateX(-50%);
@@ -245,42 +271,47 @@ const handleClose = () => {
   &::after {
     content: '';
     position: absolute;
-    bottom: -112px;
-    right: calc(50% + 2px);
+    bottom: -102px;
+    left: 50%;
     width: 1px;
     height: 92px;
+    border-right: 1px dotted #FFEAA8;
+    box-sizing: border-box;
     transform: translateX(-50%);
-    border-left: 1px dotted #FFEAA8;
   }
 }
 .left-line {
   position: absolute;
-  right: 247px;
+  top: 50%;
+  left: -230px;
   font-size: 18px;
   color: rgba(255,255,255,0.85);
   line-height: 21px;
   letter-spacing: 3px;
   white-space: nowrap;
   text-shadow: 2px 2px 15px #C9AA79;
+  transform: translateY(-50%);
 
   &::before {
     content: '';
     position: absolute;
-    top: 7.5px;
+    top: 50%;
     right: -20px;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background-color: #FFEAA8;
+    transform: translateY(-50%);
   }
   &::after {
     content: '';
     position: absolute;
-    top: 10px;
+    top: 50%;
     right: -125px;
     width: 107px;
     height: 1px;
     border-top: 1px dotted #FFEAA8;
+    transform: translateY(-50%);
   }
 }
 .user-guide {
@@ -294,28 +325,30 @@ const handleClose = () => {
 
   .btn {
     position: absolute;
+    top: 50%;
     left: 50%;
-    bottom: 225px;
+    margin-top: 150px;
     width: 228px;
     height: 88px;
     line-height: 88px;
-    transform: translateX(-50%);
+    transform: translate(-50%, -50%);
     text-align: center;
     letter-spacing: 4px;
     font-size: 21px;
     color: rgba(255,255,255,0.85);
     cursor: pointer;
     font-family: "Source Han Sans SC Regular";
-    background: url('@/assets/images/guide/Rectangle346-min.png');
+    background: url('@/assets/images/guide/Rectangle346-min.png') no-repeat center / contain;
   }
   &-1 {
     position: absolute;
-    top: 20%;
+    top: 50%;
     left: 50%;
+    margin-top: -100px;
     width: 509px;
     height: 294px;
-    transform: translateX(-50%);
-    background: url("@/assets/images/guide/Group479-min.png");
+    transform: translate(-50%, -50%);
+    background: url("@/assets/images/guide/Group479-min.png") no-repeat center / contain;
 
     &::after {
       content: '';
@@ -325,8 +358,13 @@ const handleClose = () => {
       width: 116px;
       height: 116px;
       transform: translateX(-50%);
-      background: url('@/assets/images/guide/icon_mouse-min.png');
+      background: url('@/assets/images/guide/icon_mouse-min.png') no-repeat center / contain;
     }
   }
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }
 </style>

src/main.js

@@ -11,6 +11,7 @@ import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import 'lib-flexible'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)

src/views/EpilogueView.vue

@@ -37,7 +37,7 @@
       <img
         class="restart"
         src="@/assets/images/btn-min.png"
-        @click="router.push('/')"
+        @click="router[$isMobile? 'replace' : 'push']('/')"
       >
     </div>
   </div>
@@ -48,6 +48,7 @@ import { inject, onMounted, ref } from "vue"
 import QRCode from 'qrcode'
 import { useRouter } from "vue-router"
 
+const $isMobile = inject('$isMobile')
 const router = useRouter()
 const isShowVideo = ref(true)
 const stopBgAudio = inject('stopBgAudio')

src/views/HomeView.vue

@@ -97,7 +97,7 @@
         class="scene-entry entry-1"
         @mouseenter="hoveringEntryIdx = 1"
         @mouseleave="hoveringEntryIdx = 0"
-        @click="router.push({
+        @click="router[$isMobile ? 'replace' : 'push']({
           name: 'PanoView',
           query: {
             sceneIdx: 0,
@@ -109,7 +109,7 @@
         class="scene-entry entry-2"
         @mouseenter="hoveringEntryIdx = 2"
         @mouseleave="hoveringEntryIdx = 0"
-        @click="router.push({
+        @click="router[$isMobile ? 'replace' : 'push']({
           name: 'PanoView',
           query: {
             sceneIdx: 1,
@@ -121,7 +121,7 @@
         class="scene-entry entry-3"
         @mouseenter="hoveringEntryIdx = 3"
         @mouseleave="hoveringEntryIdx = 0"
-        @click="router.push({
+        @click="router[$isMobile ? 'replace' : 'push']({
           name: 'PanoView',
           query: {
             sceneIdx: 2,
@@ -143,6 +143,7 @@ const {
   windowSizeWhenDesignForRef,
 } = useSizeAdapt()
 
+const $isMobile = inject('$isMobile')
 const router = useRouter()
 const store = useStore()
 const stopBgAudio = inject('stopBgAudio')

src/views/PanoView.vue

@@ -23,7 +23,7 @@
       />
       <button
         class="return-home"
-        @click="router.push({
+        @click="router[$isMobile ? 'replace' : 'push']({
           name: 'HomeView',
         })"
       />
@@ -144,7 +144,7 @@
         </button>
         <button
           :class="['btn-on-track four', (sceneIdx === 1 && cameraIdx === 1) && 'four2']"
-          @click="router.push({
+          @click="router[$isMobile ? 'replace' : 'push']({
             name: 'RelicList',
             query: {
               sceneIdx: route.query.sceneIdx,
@@ -167,7 +167,7 @@
           }"
           @mouseenter="mouseEnterCameraItemIdx = idx"
           @mouseleave="mouseEnterCameraItemIdx = -1"
-          @click="router.push({
+          @click="router[$isMobile ? 'replace' : 'push']({
             name: route.name,
             query:{
               sceneIdx: route.query.sceneIdx,
@@ -385,6 +385,7 @@ import UserGuide from "@/components/UserGuide.vue"
 import MutiRelicHotSpot from "@/components/MutiRelicHotSpot.vue"
 import ShipGameView from '@/views/ShipGame/ShipGameView.vue'
 
+const $isMobile = inject('$isMobile')
 const GUIDE_KEY = 'is-open-guide'
 const msgVisible = ref(false)
 const curMsgIndex = ref(0)
@@ -486,7 +487,7 @@ const ZMFMsgList = computed(() => {
     case 0:
       return [
         {
-          inner: '<p>平地而起的元大都，是“大汗之城”，也是“天下大都”。</p><p>元世祖至元四年（1267）正月丁未，元大都城破土动工。刘秉忠以太保兼领中书省而总负新都城兴造之责。至元十一年（1274），元大都宫城建成，世祖皇帝忽必烈御正殿，在此接受皇太子和诸王百官的朝贺。两年之后的至元十三年（1276），元大都城建成。</p>',
+          inner: '平地而起的元大都，是“大汗之城”，也是“天下大都”。<br>元世祖至元四年（1267）正月丁未，元大都城破土动工。刘秉忠以太保兼领中书省而总负新都城兴造之责。至元十一年（1274），元大都宫城建成，世祖皇帝忽必烈御正殿，在此接受皇太子和诸王百官的朝贺。两年之后的至元十三年（1276），元大都城建成。',
           audio: 'scene-1-msg-1.mp3'
         },
         {
@@ -854,7 +855,7 @@ watch([cameraIdx, isShowCameraIntro], (vNew) => {
  */
 function onClickNextScene() {
   if (sceneIdx.value === 0) {
-    router.push({
+    router[$isMobile ? 'replace' : 'push']({
       name: route.name,
       query: {
         sceneIdx: Number(route.query.sceneIdx) + 1,
@@ -862,7 +863,7 @@ function onClickNextScene() {
       }
     })
   } else if (sceneIdx.value === 1) {
-    router.push({
+    router[$isMobile ? 'replace' : 'push']({
       name: route.name,
       query: {
         sceneIdx: Number(route.query.sceneIdx) + 1,
@@ -870,7 +871,7 @@ function onClickNextScene() {
       }
     })
   } else if (sceneIdx.value === 2) {
-    router.push({
+    router[$isMobile ? 'replace' : 'push']({
       name: 'EpilogueView',
     })
   }
@@ -1336,9 +1337,9 @@ onMounted(() => {
     >div.camera-list{
       position: absolute;
       bottom: 0;
-      right: 0;
-      width: calc(1346 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(161 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      right: 10px;
+      width: 1346px;
+      height: 161px;
       background-image: v-bind(cameraListBgUrl);
       background-size: cover;
       background-repeat: no-repeat;
@@ -1346,17 +1347,16 @@ onMounted(() => {
       display: flex;
       justify-content: flex-end;
       align-items: center;
-      padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      padding-right: calc(204 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding: 10px 204px 0 0;
       >button.camera-entry{
-        width: calc(198 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
+        width: 198px;
+        height: 41px;
+        font-size: 21px;
+        font-family: "SourceHanSerifCN-SemiBold";
         font-weight: 600;
         color: #FFED87;
-        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        line-height: 25px;
+        letter-spacing: 9px;
         position: relative;
         z-index: 0;
         >img.bg-normal{
@@ -1365,8 +1365,8 @@ onMounted(() => {
           left: 50%;
           top: 50%;
           transform: translate(-50%, -50%);
-          width: calc(198/ v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          height: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: 198px;
+          height: 55px;
           z-index: -1;
         }
         >img.bg-active{
@@ -1375,18 +1375,16 @@ onMounted(() => {
           left: 50%;
           top: 0%;
           transform: translate(-50%, -50%);
-          width: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          width: 230px;
           height: auto;
           z-index: -1;
         }
       }
       >button.camera-entry.active{
-        font-size: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Source Han Serif SC, Source Han Serif SC;
+        font-size: 21px;
         font-weight: 600;
         color: #794A00;
-        line-height: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        letter-spacing: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        letter-spacing: 9px;
         >img.bg-normal{
           display: none;
         }
@@ -1396,10 +1394,10 @@ onMounted(() => {
       }
       >button.next-scene{
         position: absolute;
-        top: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        right: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        width: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        height: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: 30px;
+        right: 45px;
+        width: 70px;
+        height: 100px;
       }
     }
   }

src/views/RelicDetail.vue

@@ -2,7 +2,7 @@
   <div class="relic-detail">
     <button
       class="return"
-      @click="router.go(-1)"
+      @click="fakeBack"
     />
     <div class="left">
       <div
@@ -62,12 +62,13 @@
 </template>
 
 <script setup>
-import { ref, computed, getCurrentInstance, onMounted, nextTick } from "vue"
+import { ref, computed, getCurrentInstance, onMounted, nextTick, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import Swiper from 'swiper/bundle'
 import 'swiper/css/bundle'
 
+const fakeBack = inject('fakeBack')
 const route = useRoute()
 const router = useRouter()
 const store = useStore()

src/views/RelicList.vue

@@ -2,7 +2,7 @@
   <div class="relic-list">
     <button
       class="return"
-      @click="router.go(-1)"
+      @click="fakeBack"
     />
     <el-cascader
       v-model="cascaderValue"
@@ -57,7 +57,7 @@
           }"
           @click="onClickItem(item.idx)"
         >
-          <div
+          <span
             class="name"
             :class="{
               wide: item['名称'].length > 11
@@ -81,13 +81,15 @@
 /**
  * todo: 自动恢复上次滚动位置
  */
-import { ref, computed, watch, watchEffect, onMounted, nextTick, defineComponent } from "vue"
+import { ref, computed, watch, onMounted, nextTick, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from '@/useFunctions/useSmoothSwipe.js'
 import { useElementSize, useWindowSize } from '@vueuse/core'
 import { debounce } from "lodash"
 
+const fakeBack = inject('fakeBack')
+const $isMobile = inject('$isMobile')
 const SCROLL_KEY = 'relicListScrollLeft'
 const route = useRoute()
 const router = useRouter()
@@ -152,11 +154,8 @@ const cameraTree = ref([
 
 const keyword = ref('')
 
-const sceneIdx = computed(() => {
-  return route.query.sceneIdx
-})
-const cameraIdx = computed(() => {
-  return route.query.cameraIdx
+watch(route, () => {
+  cascaderValue.value = (route.query.sceneIdx && route.query.cameraIdx) ? [route.query.sceneIdx, route.query.cameraIdx] : ['0', '0']
 })
 
 const relicData = computed(() => {
@@ -211,7 +210,7 @@ watch(relicData, (vNew) => {
 
 function onClickItem(idx) {
   if (!hasOperatedThisTime.value) {
-    router.push({
+    router[$isMobile ? 'replace' : 'push']({
       name: 'RelicDetail',
       query: {
         sceneIdx: route.query.sceneIdx,
@@ -428,9 +427,6 @@ const handleScroll = debounce(() => {
           font-family: "SourceHanSansSC-Normal";
           font-weight: 800;
           color: #43310E;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
           overflow: hidden;
           writing-mode: vertical-rl;
           background-image: url(@/assets/images/relic-item-title-bg.png);

src/views/ShipGame/ShipGameView.vue

@@ -69,7 +69,7 @@
         }"
       >
         <Draggable
-          v-for="item in MODULE_LIST"
+          v-for="(item, index) in MODULE_LIST"
           :key="item.key"
           :class="['ship-game-footer__item', checkedModule.includes(item.key) && 'checked']"
           @mousedown="() => {
@@ -80,9 +80,9 @@
           }"
         >
           <img
+            :class="`module${index + 1}`"
             draggable="false"
             :src="item.img"
-            :style="{width: item.imgWidth}"
           >
 
           <div
@@ -101,15 +101,15 @@
           <span>{{ item.label }}</span>
         </div>
       </div>
-    </template>
 
-    <video
-      v-if="showVideo"
-      class="video"
-      autoplay
-      src="@/assets/videos/ship-game/end.mp4"
-      @ended="back"
-    />
+      <video
+        v-if="showVideo"
+        class="video"
+        autoplay
+        src="@/assets/videos/ship-game/end.mp4"
+        @ended="back"
+      />
+    </template>
   </div>
 </template>
 
@@ -121,53 +121,51 @@ import { Container, Draggable } from "vue3-smooth-dnd"
 // const router = useRouter()
 const showBanner = ref(true)
 const showVideo = ref(false)
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(1920, 970)
 const MODULE_LIST = [
   {
     label: '甲板',
     img: require('@/assets/images/ship-game/jiaban-min.png'),
-    imgWidth: '252px',
     hightImg: require('@/assets/images/ship-game//highlight_Deck-min.png'),
-    hightImgStyle: 'right: 18px; bottom: 46px; width: 985px; height: 88px;',
+    hightImgStyle: `right: ${`calc(18 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; bottom: ${`calc(46 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; width: ${`calc(985 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(calc(88 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'jiaban'
   },
   {
     label: '船底',
     img: require('@/assets/images/ship-game/di-min.png'),
-    imgWidth: '261px',
     hightImg: require('@/assets/images/ship-game/highlight_Bilge-min.png'),
-    hightImgStyle: 'right: 43px; bottom: 1px; width: 950px; height: 88px;',
+    hightImgStyle: `right: ${`calc(43 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; bottom: 1px; width: ${`calc(950 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(88 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'chuandi'
   },
   {
     label: '船舱',
     img: require('@/assets/images/ship-game/chuanxiang-min.png'),
-    imgWidth: '166px',
     hightImg: require('@/assets/images/ship-game/highlight_Cabin-min.png'),
-    hightImgStyle: 'left: 322px; bottom: 70px; z-index: 2; width: 223px; height: 155px;',
+    hightImgStyle: `left: ${`calc(322 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; bottom: ${`calc(70 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; z-index: 2; width: ${`calc(223 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(155 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'chuancang'
   },
   {
     label: '船舵',
     img: require('@/assets/images/ship-game/duo-min.png'),
-    imgWidth: '203px',
     hightImg: require('@/assets/images/ship-game/highlight_hoods-min.png'),
-    hightImgStyle: 'left: 22px; bottom: 53px; z-index: 2; width: 272px; height: 107px;',
+    hightImgStyle: `left: ${`calc(22 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; bottom: ${`calc(53 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; z-index: 2; width: ${`calc(272 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(107 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'chuanduo'
   },
   {
     label: '船篷',
     img: require('@/assets/images/ship-game/peng-min.png'),
-    imgWidth: '104px',
     hightImg: require('@/assets/images/ship-game/highlight_ship-min.png'),
-    hightImgStyle: 'left: 198px; bottom: 81px; z-index: 2; width: 158px; height: 146px;',
+    hightImgStyle: `left: ${`calc(198 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; bottom: ${`calc(81 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; z-index: 2; width: ${`calc(158 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(146 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'chuanpeng'
   },
   {
     label: '桅杆',
     img: require('@/assets/images/ship-game/gan-min.png'),
-    imgWidth: '206px',
     hightImg: require('@/assets/images/ship-game/highlight_Mast-min.png'),
-    hightImgStyle: 'left: 200px; top: 0; z-index: 2; width: 806px; height: 509px;',
+    hightImgStyle: `left: ${`calc(200 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; top: 0; z-index: 2; width: ${`calc(806 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`}; height: ${`calc(509 / ${windowSizeWhenDesignForRef.value} * ${windowSizeInCssForRef.value})`};`,
     key: 'weigan'
   }
 ]
@@ -187,13 +185,51 @@ watch(checkedModule, val => {
 
 const back = () => {
   // router.back()
+  showVideo.value = false
+  showBanner.value = true
   emits('close')
 }
 </script>
 
 <style lang="less" scoped>
 .drag-class {
-  width: auto !important;
+  &.module1 {
+    width: calc(986 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  &.module2 {
+    width: calc(945 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  &.module3 {
+    width: calc(221 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  &.module4 {
+    width: calc(271 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  &.module5 {
+    width: calc(147 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+  &.module6 {
+    width: calc(806 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  }
+}
+
+.module1 {
+  width: calc(252 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+.module2 {
+  width: calc(261 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+.module3 {
+  width: calc(166 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+.module4 {
+  width: calc(203 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+.module5 {
+  width: calc(104 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+}
+.module6 {
+  width: calc(206 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 }
 
 .ship-game {
@@ -205,22 +241,24 @@ const back = () => {
     top: 52px;
     right: 58px;
     cursor: pointer;
+    width: 72px;
     z-index: 8;
   }
   .video {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
-    right: 0;
-    bottom: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
     z-index: 9;
   }
   &-container {
     position: absolute;
     top: 40px;
     left: 50%;
-    width: 1144px;
-    height: 611px;
+    width: calc(1144 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(611 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translateX(-50%);
     background: url('@/assets/images/ship-game/bg-boat-min.png') no-repeat center / cover;
 
@@ -300,7 +338,6 @@ const back = () => {
         z-index: 2;
       }
       img {
-        width: 100%;
         cursor: pointer;
       }
       span {

yarn.lock

@@ -4286,6 +4286,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+lib-flexible@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmmirror.com/lib-flexible/-/lib-flexible-0.3.2.tgz#06f5a74832314a2d35c12039bc9c3ca2daeaa426"
+  integrity sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg==
+
 lilconfig@^2.0.3:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz"
@@ -4618,7 +4623,7 @@ mz@^2.4.0:
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.6:
+nanoid@^3.3.6, nanoid@^3.3.7:
   version "3.3.7"
   resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
@@ -4733,7 +4738,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-object-assign@^4.0.1:
+object-assign@>=4.0.1, object-assign@^4.0.1:
   version "4.1.1"
   resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
@@ -5209,6 +5214,14 @@ postcss-ordered-values@^5.1.3:
     cssnano-utils "^3.1.0"
     postcss-value-parser "^4.2.0"
 
+postcss-px-to-viewport@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmmirror.com/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz#a25ca410b553c9892cc8b525cc710da47bf1aa55"
+  integrity sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==
+  dependencies:
+    object-assign ">=4.0.1"
+    postcss ">=5.0.2"
+
 postcss-reduce-initial@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmmirror.com/postcss-reduce-initial/-/postcss-reduce-initial-5.1.2.tgz"
@@ -5252,6 +5265,15 @@ postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   resolved "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@>=5.0.2:
+  version "8.4.33"
+  resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 postcss@^7.0.36:
   version "7.0.39"
   resolved "https://registry.npmmirror.com/postcss/-/postcss-7.0.39.tgz"