upp

src/views/MoreContent.vue

@@ -267,6 +267,29 @@
           alt=""
           draggable="false"
         >
+        <!-- 第三页文字 -->
+        <div class="shuang-gou-she-se-group shuang-gou-she-se-group3">
+          <div
+            class="watch-detail animation-show-long-hide"
+            @click="
+              () => {
+                isShowGamePage = true;
+              }
+            "
+          >
+            开始游戏
+          </div>
+          <div class="group-title">
+            创作体验
+            <img
+              class="deco"
+              src="@/assets/images/more-content-deco.png"
+              alt=""
+              draggable="false"
+            >
+          </div>
+        </div>
+        <!-- 第四页文字 -->
         <div
           class="wei-ye-group"
         >
@@ -278,21 +301,17 @@
             class="game-box"
             @click="
               () => {
-                isShowGamePage = true;
+                isShowScenePage = true;
               }
             "
           >
-            画作创作
+            线上展厅
           </div>
           <div
             class="online-box"
-            @click="
-              () => {
-                isShowScenePage = true;
-              }
-            "
+            @click="router.replace('/')"
           >
-            线上展厅
+            重新开始
           </div>
         </div>
         <img
@@ -306,7 +325,7 @@
 
     <PaginationComp
       class="pagination"
-      :total="3"
+      :total="4"
       :idx="currentAnchorIdx"
     />
     <BtnBack
@@ -556,7 +575,9 @@ const {
   anchorPosList: [
     (maxTranslateLength.value * positionNumInit.value) / windowWidthDesign -
       windowWidth.value / 2,
-    (maxTranslateLength.value * 967) / windowWidthDesign -
+    (maxTranslateLength.value * 800) / windowWidthDesign -
+      windowWidth.value / 2,
+    (maxTranslateLength.value * 1320) / windowWidthDesign -
       windowWidth.value / 2,
     (maxTranslateLength.value * 1840) / windowWidthDesign -
       windowWidth.value / 2,
@@ -694,10 +715,11 @@ const isReady = ref(true)
 
 
 onBeforeMount(() => {
-  if (window.location.href.includes('anchorIdx=0')) {
-    // 第一个页面跳转 要白屏渐进  其他页面不用
-    isReady.value = false
-  }
+  // 第一个页面跳转 要白屏渐进  其他页面不用
+  if (route.query.anchorIdx) {
+    if (route.query.anchorIdx == 0) isReady.value = false
+  } else isReady.value = false
+
 
   window.addEventListener("resize", () => {
     window.setTimeout(() => {
@@ -850,7 +872,7 @@ onMounted(() => {
         position: absolute;
         bottom: 0;
         left: calc(
-          1000px * v-bind("layer4SpeedFactor") * v-bind("windowHeight") /
+          950px * v-bind("layer4SpeedFactor") * v-bind("windowHeight") /
             v-bind("windowHeightDesign")
         );
         height: 100%;
@@ -892,7 +914,7 @@ onMounted(() => {
         position: absolute;
         bottom: 0;
         left: calc(
-          1403px * v-bind("layer4SpeedFactor") * v-bind("windowHeight") /
+          970px * v-bind("layer4SpeedFactor") * v-bind("windowHeight") /
             v-bind("windowHeightDesign")
         );
         height: 100%;
@@ -928,7 +950,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          880px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          647px * v-bind("windowHeight") / v-bind("windowHeightDesign")
         );
       }
 
@@ -960,7 +982,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          393px * v-bind("layer3SpeedFactor") * v-bind("windowHeight") /
+          300px * v-bind("layer3SpeedFactor") * v-bind("windowHeight") /
             v-bind("windowHeightDesign")
         );
       }
@@ -1013,7 +1035,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          420px * v-bind("layer2SpeedFactor") * v-bind("windowHeight") /
+          355px * v-bind("layer2SpeedFactor") * v-bind("windowHeight") /
             v-bind("windowHeightDesign")
         );
       }
@@ -1023,7 +1045,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          920px * v-bind("layer2SpeedFactor") * v-bind("windowHeight") /
+          846px * v-bind("layer2SpeedFactor") * v-bind("windowHeight") /
             v-bind("windowHeightDesign")
         );
       }
@@ -1086,6 +1108,8 @@ onMounted(() => {
       }
 
       > .shuang-gou-she-se-group {
+        z-index: 100;
+
         position: absolute;
         top: calc(
           245px * v-bind("windowHeight") / v-bind("windowHeightDesign")
@@ -1135,6 +1159,13 @@ onMounted(() => {
         }
       }
 
+      // 第三页
+      .shuang-gou-she-se-group3{
+        left: calc(
+          1280px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+        );
+      }
+
       > .bamboo-1_02 {
         position: absolute;
         top: 0;
@@ -1150,7 +1181,7 @@ onMounted(() => {
           245px * v-bind("windowHeight") / v-bind("windowHeightDesign")
         );
         left: calc(
-          936px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          795px * v-bind("windowHeight") / v-bind("windowHeightDesign")
         );
 
         > .button-group {
@@ -1240,11 +1271,11 @@ onMounted(() => {
           justify-content: center;
           align-items: center;
           margin-top: calc(
-            30 / v-bind("windowSizeWhenDesignForRef") *
+            62 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")
           );
           margin-left: calc(
-            -60 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
+            -30 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
           );
           font-size: calc(
             20 / v-bind("windowSizeWhenDesignForRef") *
@@ -1253,25 +1284,19 @@ onMounted(() => {
         }
 
         > .online-box {
+          font-weight: 700;
+          color: #768c77;
           width: calc(
             200 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")
           );
-          background: url(@/assets/images/online-scene-bg.png);
-          background-size: 100% 100%;
-          padding: calc(
-            70 / v-bind("windowSizeWhenDesignForRef") *
-              v-bind("windowSizeInCssForRef")
-          );
           white-space: nowrap;
           display: flex;
           justify-content: center;
           align-items: center;
-          margin-top: calc(
-            -57 / v-bind("windowSizeWhenDesignForRef") * v-bind("windowSizeInCssForRef")
-          );
+
           margin-left: calc(
-            40 / v-bind("windowSizeWhenDesignForRef") *
+            -25 / v-bind("windowSizeWhenDesignForRef") *
               v-bind("windowSizeInCssForRef")
           );
           font-size: calc(
@@ -1286,7 +1311,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          960px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          870px * v-bind("windowHeight") / v-bind("windowHeightDesign")
         );
       }
 
@@ -1295,7 +1320,7 @@ onMounted(() => {
         top: 0;
         height: 100%;
         left: calc(
-          1336px * v-bind("windowHeight") / v-bind("windowHeightDesign")
+          1365px * v-bind("windowHeight") / v-bind("windowHeightDesign")
         );
       }