upup

.env.dev

@@ -3,5 +3,6 @@ NODE_ENV=development
 PUBLIC_PATH=/
 VUE_APP_DEPLOY_ORIGIN=
 VUE_APP_PC_URL="https://culture.4dage.com/NanjingMuseumWuJinZangPC/index.html#/"
+VUE_APP_SCENE_URL="https://culture.4dage.com/NanjingMuseumWuJinZangNew/scene/spg.html?m=KJ-et2X3su4ofm"
 # VUE_APP_PC_URL="www.baidu.com"
 

.env.mytest

@@ -2,4 +2,5 @@ VUE_APP_CLI_MODE=test
 NODE_ENV=production
 PUBLIC_PATH=./
 VUE_APP_DEPLOY_ORIGIN=
-VUE_APP_PC_URL="../NanjingMuseumWuJinZangPC/index.html#/"
+VUE_APP_PC_URL="../NanjingMuseumWuJinZangPC/index.html#/"
+VUE_APP_SCENE_URL="./scene/spg.html?m=KJ-et2X3su4ofm"

.env.prod

@@ -2,4 +2,5 @@ VUE_APP_CLI_MODE=prod
 NODE_ENV=production
 PUBLIC_PATH=./
 VUE_APP_DEPLOY_ORIGIN=
-VUE_APP_PC_URL="../wjz/index.html"
+VUE_APP_PC_URL="../wjz/index.html"
+VUE_APP_SCENE_URL="./scene/spg.html?m=KJ-et2X3su4ofm"

public/configText.js

@@ -37,7 +37,7 @@ var configText = {
     },
     {
       title: '绢',
-      desc:	`绢，在国画中读四声，常被误读成一声。绘在绢、绫、丝织物上的字画，称为绢本，在画面中能看到明显的横竖交错的纺织痕迹。`,
+      desc:	`绢在国画中读四声，常被误读成一声。绘在绢、绫、丝织物上的字画，称为绢本，在画面中能看到明显的横竖交错的纺织痕迹。`,
     },
     {
       title: '纸',

src/views/OnlineSceneView.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 
+const $env = inject('$env')
 const route = useRoute()
 const router = useRouter()
 </script>
@@ -8,7 +10,7 @@ const router = useRouter()
 <template>
   <div class="home">
     <iframe
-      src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
+      :src="$env.VUE_APP_SCENE_URL"
       frameborder="0"
     />
     <BtnBack

src/views/SceneView.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { useRouter } from 'vue-router'
 const router = useRouter()
+import { inject } from "vue"
+const $env = inject('$env')
 const closeScene = () => {
   const musicDom = document.getElementById('bg-music')
   musicDom.play()
@@ -15,7 +17,7 @@ const closeScene = () => {
       @click="closeScene()"
     />
     <iframe
-      src="https://www.4dkankan.com/spg.html?m=KJ-et2X3su4ofm"
+      :src="$env.VUE_APP_SCENE_URL"
       frameborder="0"
     />
   </div>

src/views/ShuangGouSheSeDetail.vue

@@ -114,28 +114,30 @@ const curPercentage = computed(() => {
 <template>
   <div
     class="home"
-    @touchstart="handletouchstart($event)"
-    @touchend="touchEnd($event)"
   >
     <div class="title">
       <span
         :style="{ color: curIndex == 1 ? 'rgba(71, 71, 71, 0.15)' : '' }"
-        @click="curIndex == 0 ? openVideoBox() : ''"
+        @click="curIndex = 0"
       >双钩</span>
       <span
         :style="{ color: curIndex == 0 ? 'rgba(71, 71, 71, 0.15)' : '' }"
-        @click="curIndex == 1 ? openVideoBox() : ''"
+        @click="curIndex = 1"
       >设色</span>
-      <!-- <img
-        src="@/assets/images/icon_video.png"
+      <img
+        src="@/assets/images/icon_video_active.png"
         class="icon-video"
         @click="openVideoBox"
-      > -->
+      >
+      <span
+        class="video-text"
+        @click="openVideoBox"
+      >观看视频</span>
       <!-- 两个提示 -->
       <div
-        v-show="curIndex == 0"
+        v-show="curIndex == 1"
         class="operation-video-tip"
-        style="top: -55%; right: -50%"
+        style="top: -10vh; right: -30%"
       >
         <div>点击查看</div>
         <img
@@ -146,9 +148,9 @@ const curPercentage = computed(() => {
         >
       </div>
       <div
-        v-show="curIndex == 1"
+        v-show="curIndex == 0"
         class="operation-video-tip"
-        style="bottom: -55%; right: -50%"
+        style="top:38%; right: -52%"
       >
         <img
           class=""
@@ -158,12 +160,6 @@ const curPercentage = computed(() => {
         >
         <div>点击查看</div>
       </div>
-      <!-- <img
-        class=""
-        :src="require(`@/assets/images/icon-click-tip-green.png`)"
-        alt=""
-        draggable="false"
-      > -->
     </div>
 
     <div class="shuanggou-yezi">
@@ -223,13 +219,13 @@ const curPercentage = computed(() => {
         @click="goBack"
       />
 
-      <OperationTip
+      <!-- <OperationTip
         id="operationH"
         class="operation-h"
         text=""
         direction="h"
         :is-show="isShowOperationTip"
-      />
+      /> -->
 
       <!-- <OperationTip
         class="operation-h"
@@ -310,15 +306,29 @@ const curPercentage = computed(() => {
     top: 26%;
     letter-spacing: 10px;
     z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     .icon-video {
       width: calc(
-        48 / v-bind("windowSizeWhenDesignForRef") *
+        36 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
       height: calc(
-        48 / v-bind("windowSizeWhenDesignForRef") *
+        36 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
+      margin-top: 10px;
+    }
+    .video-text{
+      color: #7b916b;
+      font-family: KaiTi;
+      writing-mode: horizontal-tb;
+      font-size: calc(
+        14 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      letter-spacing: 0px;
     }
     .operation-video-tip {
       position: absolute;
@@ -326,6 +336,7 @@ const curPercentage = computed(() => {
       display: flex;
       align-items: center;
       pointer-events: none;
+      letter-spacing: 1px;
       & > img {
         width: 40px;
       }
@@ -342,6 +353,24 @@ const curPercentage = computed(() => {
         writing-mode: vertical-rl;
       }
     }
+    .video-btn{
+      width: calc(
+        36 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      height: calc(
+        36 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      display: flex;
+      flex-direction: column;
+      font-size: calc(
+        14 / v-bind("windowSizeWhenDesignForRef") *
+          v-bind("windowSizeInCssForRef")
+      );
+      font-family: KaiTi;
+      color: #7b916b;
+    }
   }
 
   .shuanggou-yezi {
@@ -377,7 +406,7 @@ const curPercentage = computed(() => {
   .text {
     display: flex;
     position: absolute;
-    right: 30%;
+    right: 32%;
     top: 40vh;
     // top: calc(50 /v-bind('windowSizeWhenDesignForRef')/v-bind('windowSizeInCssForRef'));
     color: #707f48;
@@ -464,7 +493,7 @@ const curPercentage = computed(() => {
         v-bind("windowSizeInCssForRef")
     );
     bottom: calc(
-      20 / v-bind("windowSizeWhenDesignForRef") *
+      35 / v-bind("windowSizeWhenDesignForRef") *
         v-bind("windowSizeInCssForRef")
     );
   }