搞搞搞

src/App.vue

@@ -116,22 +116,22 @@ api.fetchPanoData().then((res) => {
 // }
 
 // 字体
-// @font-face {
-//   font-family: 'Source Han Serif CN';
-//   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
-// }
-// @font-face {
-//   font-family: 'Source Han Serif CN-Bold';
-//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
-// }
+@font-face {
+  font-family: 'Source Han Serif CN';
+  src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
+}
+@font-face {
+  font-family: 'Source Han Serif CN-Bold';
+  src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
+}
 // i {
 //   font-style: italic;
 // }
 
 // 滚动条，只设置某一项可能导致不生效。
-// ::-webkit-scrollbar { background: #dddecc; width: 6px; height: 6px; }
-// ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 3px; }
-// ::-webkit-scrollbar-corner { background: #dddecc; }
+::-webkit-scrollbar { background: rgba(0, 0, 0, 0.2); width: 6px; height: 6px; }
+::-webkit-scrollbar-thumb { background: #C9AD83; border-radius: 3px; }
+::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.2); }
 
 // vue组件过渡效果
 .fade-out-leave-active {

src/components/CameraDesc.vue

@@ -1,14 +1,15 @@
 <template>
   <div class="camera-desc">
     <div class="wrap">
+      <h1>第一章 大汗之城</h1>
       <div class="desc">
-        sdfkjsfsfg记得发个看到过受到法律上的风光
+        雄伟的元大都宫阙因此被人称颂，堪称杰作的通惠河因此被世人铭记。尚在南方的时候，大都城的雄伟壮阔赵孟頫已早有耳闻，他前往和义门，拜见大都的设计者刘秉忠，向其了解大都城的规划设计，并由外及内（外城、皇城、宫城）俯瞰大都城的雄伟壮阔。沿着大都城街道感受都城统一的规划布局，能工巧匠的巧妙设计，以及为营建大都设立的专门机构。
       </div>
       <button
         class="close"
         @click="emit('close')"
       >
-        知道了
+        <span>知道了</span>
       </button>
     </div>
   </div>
@@ -19,6 +20,11 @@ import { ref, computed, watch, onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt()
+
 const emit = defineEmits(['close'])
 
 const route = useRoute()
@@ -35,20 +41,68 @@ const store = useStore()
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
   .wrap{
     position: absolute;
-    left: 50%;
-    top: 10px;
-    transform: translateX(-50%);
-    background-color: blue;
-    width: 70vw;
-    height: 30vh;
+    left: calc(50% + 15 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: calc(1340 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(569 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background-image: url(@/assets/images/camera-desc-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    padding-right: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >h1{
+      position: absolute;
+      top: calc(110 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(50% - 30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      transform: translate(-50%, 0);
+      width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(71 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-image: url(@/assets/images/camera-desc-title-bg.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+    >.desc{
+      margin-top: calc(210 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(1034 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(240 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: auto;
+      margin-right: auto;
+      font-size: calc(22 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Serif SC, Source Han Serif SC;
+      font-weight: 600;
+      color: #4A350E;
+      line-height: calc(37 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      letter-spacing: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: 0.5em;
+      overflow: auto;
+    }
     >button.close{
       position: absolute;
-      left: 50%;
-      bottom: 10px;
+      left: calc(50% - 30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      bottom: calc(45 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       transform: translateX(-50%);
+      width: calc(224 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(67 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background-image: url(@/assets/images/btn-close-camera-desc.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      >span{
+        font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Serif CN, Source Han Serif CN;
+        font-weight: 800;
+        background: linear-gradient(180deg, #FFFBC4 0%, #E5C05B 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
     }
   }
 }

src/store/index.js

@@ -3,7 +3,7 @@ import { createStore } from 'vuex'
 export default createStore({
   state: {
     panoData: null,
-    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
+    haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? true : false,
     canStart: false,
   },
   getters: {

src/views/PanoView.vue

@@ -9,13 +9,18 @@
     />
     <CameraDesc
       v-if="isShowCameraDesc"
+      class="camera-desc"
       @close="isShowCameraDesc = false"
     />
     <CharacterDesc
       v-if="isShowCharacterDesc"
+      class="character-desc"
       @close="isShowCharacterDesc = false"
     />
-    <div class="character-wrap">
+    <div
+      class="character-wrap"
+      draggable="false"
+    >
       <button
         class="name"
         @click="isShowCharacterDesc = true"
@@ -67,6 +72,7 @@
       <button
         v-for="(item, idx) in cameraList"
         :key="idx"
+        class="camera-entry"
         :class="{
           active: idx === Number(route.query.cameraIdx)
         }"
@@ -92,6 +98,7 @@
           draggable="false"
         >
       </button>
+      <button class="next-camera" />
     </div>
   </div>
 </template>
@@ -199,6 +206,9 @@ onBeforeRouteUpdate((to, from) => {
 </script>
 
 <style lang="less" scoped>
+*{
+  user-select: none;
+}
 .pano-view{
   position: relative;
   height: 100%;
@@ -223,6 +233,12 @@ onBeforeRouteUpdate((to, from) => {
       background-image: url(@/assets/images/btn-return-home-active.png);
     }
   }
+  >.camera-desc{
+    z-index: 5;
+  }
+  >.character-desc{
+    z-index: 5;
+  }
   >.character-wrap{
     position: absolute;
     left: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -344,7 +360,7 @@ onBeforeRouteUpdate((to, from) => {
     align-items: center;
     padding-top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     padding-right: calc(204 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    >button{
+    >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'));
@@ -376,7 +392,7 @@ onBeforeRouteUpdate((to, from) => {
         z-index: -1;
       }
     }
-    >button.active{
+    >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-weight: 600;
@@ -390,6 +406,13 @@ onBeforeRouteUpdate((to, from) => {
         display: initial;
       }
     }
+    >button.next-camera{
+      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'));
+    }
   }
 }
 </style>