Merge remote-tracking branch 'origin/master' into flexible

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

@@ -72,6 +72,9 @@
           alt=""
           draggable="false"
         >
+        <div class="img-title">
+          建设中的元大都
+        </div>
       </div>
     </div>
   </div>
@@ -275,6 +278,11 @@ const tab1ContentPageNumber = ref(1)
         background-color: rgba(145,129,117,0.25);
         object-fit: cover;
       }
+      >.img-title{
+        margin-top: -2.5em;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: "Source Han Sans SC light";
+      }
     }
   }
 }

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

@@ -27,6 +27,9 @@
           alt=""
           draggable="false"
         >
+        <div class="img-title">
+          修复后的菏泽沉船
+        </div>
       </div>
     </div>
   </div>
@@ -121,16 +124,23 @@ const emit = defineEmits(['close'])
       position: relative;
       width: calc(818 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(438 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
       >img{
-        position: absolute;
-        left: 0;
-        top: 0;
+        flex: 0 0 auto;
         width: 100%;
-        height: 100%;
         // background: rgba(145,129,117,0.25);
         // border: 1px solid #FFE88B;
         // padding: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       }
+      >.img-title{
+        flex: 0 0 auto;
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        margin-top: 0.5em;
+        font-family: "Source Han Sans SC light";
+      }
     }
   }
 }

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

@@ -26,6 +26,9 @@
             :src="require(`@/assets/images/CameraContent-3-2-2-img-${currentSwitchIdx + 1}.jpg`)"
             alt=""
           >
+          <div class="img-title">
+            关汉卿画像
+          </div>
         </div>
       </div>
     </div>
@@ -198,8 +201,19 @@ const next = () => {
         }
       }
       >.design-wrap-right {
-        img {
-          width: calc(367 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        position: relative;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        >.detail-img{
+          height: 70%;
+        }
+        >.img-title{
+          margin-top: 0.5em;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: "Source Han Sans SC light";
         }
       }
     }

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

@@ -6,13 +6,16 @@
       @click="emit('close')"
     />
     <h1>{{ title }}</h1>
-    <div class="content-wrap">
-      <div class="design-wrap">
-        <img
-          class="content-wrap__left"
-          src="@/assets/images/CameraContent-3-2-3-left-bg.png"
-        >
-
+    <div class="wrap-1">
+      <div class="wrap-2">
+        <div class="content-wrap__left">
+          <img
+            src="@/assets/images/CameraContent-3-2-3-left-bg.png"
+          >
+          <div class="img-title">
+            元墓戏曲壁画
+          </div>
+        </div>
         <div class="content-wrap__right text-indent">
           <div>
             <p>
@@ -85,45 +88,54 @@ const title = '表演元曲的著名演员'
     z-index: 1;
   }
 
-  .content-wrap {
+  .wrap-1 {
     position: absolute;
     left: 50%;
     top: 54%;
     width: 100%;
     height: calc(723 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, -50%);
-
-    &__right {
+    >.wrap-2 {
+      position: absolute;
+      left: 0;
+      top: 0;
       display: flex;
       align-items: center;
-      justify-content: center;
-      width: 956px;
-      height: 475px;
-      background: url('@/assets/images/CameraContent-3-2-3-right-bg.png') no-repeat center / contain;
-
-      > div {
-        width: 716px;
-        font-size: 20px;
+      justify-content: space-between;
+      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;
+      >.content-wrap__left{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        >img{
+          flex: 0 0 auto;
+          height: 75%;
+        }
+        >.img-title{
+          margin-top: 0.5em;
+          font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          font-family: "Source Han Sans SC light";
+        }
       }
-    }
-  }
+      >.content-wrap__right {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 956px;
+        height: 475px;
+        background: url('@/assets/images/CameraContent-3-2-3-right-bg.png') no-repeat center / contain;
 
-  .design-wrap {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    align-items: center;
-    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'));
+        > div {
+          width: 716px;
+          font-size: 20px;
+        }
+      }
     }
   }
 }

src/components/HotspotDialog-1.vue

@@ -1275,6 +1275,7 @@ const close = () => {
     left: 41px;
     width: 72px;
     cursor: pointer;
+    z-index: 100;
   }
   &__info {
     position: absolute;

src/components/UserGuide.vue

@@ -15,7 +15,7 @@
         {{ curStep === 6 ? '我知道了' : '下一步' }}
       </div>
       <template v-if="curStep === 0">
-        <div class="user-guide-1" />
+        <div :class="['user-guide-1', $isMobile && 'is-mobile']" />
       </template>
       <template v-else>
         <template v-if="curStep > 1">
@@ -108,11 +108,12 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from "vue"
+import { onMounted, ref, inject } from "vue"
 
 const curStep = ref(0)
 const guideTabStyle = ref('')
 const showVideo = ref(true)
+const $isMobile = inject('$isMobile')
 const emits = defineEmits(['close'])
 
 onMounted(() => {
@@ -350,6 +351,13 @@ const handleClose = () => {
     transform: translate(-50%, -50%);
     background: url("@/assets/images/guide/Group479-min.png") no-repeat center / contain;
 
+    &.is-mobile {
+      background-image: url("@/assets/images/mobile/tips_mobile-min.png");
+
+      &::after {
+        display: none;
+      }
+    }
     &::after {
       content: '';
       position: absolute;

src/views/PanoView.vue

@@ -28,9 +28,10 @@
         })"
       />
       <button
-        v-if="sceneIdx === 1"
-        class="ship-btn"
-        @click="showShipGame = true"
+        class="game-entry-page-btn"
+        @click="showGameEntryPage({
+          gameName: sceneIdx === 0 ? '广寒宫' : sceneIdx === 1 ? '聊城古船' : '多宝阁',
+        })"
       />
       <button
         v-if="sceneIdx === 0 && cameraIdx === 0"
@@ -51,6 +52,11 @@
         class="character-wrap"
         draggable="false"
       >
+        <div
+          v-if="$isMobile"
+          :class="['character-wrap__menu', isShowMenu && 'active']"
+          @click="isShowMenu = !isShowMenu"
+        />
         <button
           class="name"
           @click="isShowCharacterDesc = true"
@@ -124,26 +130,26 @@
           draggable="false"
         >
         <button
-          class="one btn-on-track"
+          :class="['one btn-on-track', isShowMenu && 'hover']"
           @click="showingContentIdx = 1"
         >
           <span>{{ btnOnTrack1Name }}</span>
         </button>
         <button
-          class="two btn-on-track"
+          :class="['two btn-on-track', isShowMenu && 'hover']"
           @click="showingContentIdx = 2"
         >
           <span>{{ btnOnTrack2Name }}</span>
         </button>
         <button
           v-if="!(sceneIdx === 1 && cameraIdx === 1)"
-          class="three btn-on-track"
+          :class="['three btn-on-track', isShowMenu && 'hover']"
           @click="showingContentIdx = 3"
         >
           <span>{{ btnOnTrack3Name }}</span>
         </button>
         <button
-          :class="['btn-on-track four', (sceneIdx === 1 && cameraIdx === 1) && 'four2']"
+          :class="['btn-on-track four', (sceneIdx === 1 && cameraIdx === 1) && 'four2', isShowMenu && 'hover']"
           @click="router[$isMobile ? 'replace' : 'push']({
             name: 'RelicList',
             query: {
@@ -409,6 +415,12 @@ const btnReturnHomeImgUrl = computed(() => {
 const btnReturnHomeActiveImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-return-home-active-${sceneIdx.value + 1}.png`) + ')'
 })
+const btnGameEntryPageImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-game-entry-page-${sceneIdx.value + 1}.png`) + ')'
+})
+const btnGameEntryPageActiveImgUrl = computed(() => {
+  return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/btn-game-entry-page-active-${sceneIdx.value + 1}.png`) + ')'
+})
 
 const btnOnTrack1ImgUrl = computed(() => {
   return `url(${process.env.VUE_APP_CLI_MODE === 'dev' ? '' : '../'}` + require(`@/assets/images/camera-btn-${sceneIdx.value + 1}-${cameraIdx.value + 1}-1.png`) + ')'
@@ -946,6 +958,7 @@ watch(() => store.getters.iframeAttrs, (v) => {
   }
 })
 
+const isShowMenu = ref(false)
 const isShowHotspotDetail = ref(false)
 const isShowHotspotDetail2 = ref(!!route.query.hotspot)
 const isShowHotspotDetail3 = ref(false)
@@ -985,10 +998,11 @@ window.showIframe = (hotspotInfo) => {
   console.log('parent window: showIframe...')
   store.dispatch('openIframePage', hotspotInfo)
 }
-window.showGameEntryPage = function(hotspotInfo) {
+function showGameEntryPage(hotspotInfo) {
   console.log('parent window: showGameEntryPage. param: ', hotspotInfo)
   store.dispatch('openGameEntryPage', hotspotInfo)
 }
+window.showGameEntryPage = showGameEntryPage
 /**
  * end of iframe的逻辑
  */
@@ -1114,47 +1128,47 @@ onMounted(() => {
       width: 100%;
       height: 100%;
     }
-    >button.guide-btn{
+    >button.return-home{
       position: absolute;
       width: 77px;
       height: 77px;
-      top: 128px;
+      top: 43px;
       right: 51px;
-      background-image: url('@/assets/images/guide/tbn_help-min.png');
+      background-image: v-bind(btnReturnHomeImgUrl);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       z-index: 5;
+      &:hover{
+        background-image: v-bind(btnReturnHomeActiveImgUrl);
+      }
     }
-    >button.ship-btn{
+    >button.game-entry-page-btn{
       position: absolute;
       width: 77px;
       height: 77px;
       top: 128px;
       right: 51px;
-      background-image: url('@/assets/images/ship-game/tbn_game_boat-min.png');
+      background-image: v-bind(btnGameEntryPageImgUrl);
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       z-index: 5;
       &:hover{
-        background-image: url('@/assets/images/ship-game/btn_game boat_hover_green-min.png');
+        background-image: v-bind(btnGameEntryPageActiveImgUrl);
       }
     }
-    >button.return-home{
+    >button.guide-btn{
       position: absolute;
       width: 77px;
       height: 77px;
-      top: 43px;
+      top: 213px;
       right: 51px;
-      background-image: v-bind(btnReturnHomeImgUrl);
+      background-image: url('@/assets/images/guide/tbn_help-min.png');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
       z-index: 5;
-      &:hover{
-        background-image: v-bind(btnReturnHomeActiveImgUrl);
-      }
     }
     >.camera-desc{
       z-index: 7;
@@ -1168,6 +1182,20 @@ onMounted(() => {
       bottom: 0;
       width: 300px;
       height: 452px;
+
+      .character-wrap__menu {
+        position: absolute;
+        left: -10px;
+        bottom: 30px;
+        width: 85px;
+        height: 95px;
+        background: url('@/assets/images/mobile/btn_menu_open-min.png') no-repeat center / contain;
+        z-index: 6;
+
+        &.active {
+          background-image: url('@/assets/images/mobile/btn_menu_close-min.png');
+        }
+      }
       >button.name{
         position: absolute;
         top: 50px;
@@ -1290,7 +1318,8 @@ onMounted(() => {
           line-height: 27px;
           letter-spacing: 5px;
         }
-        &:hover{
+        &:hover,
+        &.hover{
           width: 390px;
           height: 104px;
           transform: translate(-13px, -5px);
@@ -1303,7 +1332,8 @@ onMounted(() => {
         left: 210px;
         top: -42px;
         background-image: v-bind(btnOnTrack1ImgUrl);
-        &:hover{
+        &:hover,
+        &.hover{
           top: -49px;
           left: 217px;
           background-image: v-bind(btnOnTrack1ActiveImgUrl);
@@ -1313,7 +1343,8 @@ onMounted(() => {
         left: 336px;
         top: 62px;
         background-image: v-bind(btnOnTrack2ImgUrl);
-        &:hover{
+        &:hover,
+        &.hover{
           top: 54px;
           background-image: v-bind(btnOnTrack2ActiveImgUrl);
         }
@@ -1322,7 +1353,8 @@ onMounted(() => {
         left: 385px;
         top: 205px;
         background-image: v-bind(btnOnTrack3ImgUrl);
-        &:hover{
+        &:hover,
+        &.hover{
           top: 196px;
           left: 391px;
           background-image: v-bind(btnOnTrack3ActiveImgUrl);
@@ -1332,7 +1364,8 @@ onMounted(() => {
         left: 352px;
         top: 353px;
         background-image: v-bind(btnOnTrack4ImgUrl);
-        &:hover{
+        &:hover,
+        &.hover{
           top: 344px;
           left: 359px;
           background-image: v-bind(btnOnTrack4ActiveImgUrl);
@@ -1342,7 +1375,8 @@ onMounted(() => {
           left: 385px;
           top: 205px;
 
-          &:hover {
+          &:hover,
+          &.hover {
             top: 196px;
             left: 391px;
           }