fix：更新双钩设色和竹谱默认状态

src/views/BambooBookScene1.vue

@@ -30,7 +30,6 @@ const x = window.innerHeight / 1018
 const innerWidth = ref((15523 / 33) * x + 'px')
 const innerHeight = ref(window.innerHeight + 'px')
 
-
 </script>
 
 <template>

src/views/BambooBookScene2.vue

@@ -4,6 +4,7 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 
 // 竹子的三个部分图片
+import moren from '@/assets/images/moren.png'
 import ganImg from '@/assets/images/gan.png'
 import zhiImg from '@/assets/images/zhi.png'
 import yeImg from '@/assets/images/ye.png'
@@ -11,7 +12,7 @@ import yeImg from '@/assets/images/ye.png'
 
 // 第二屏
 // 杆-1 枝-2 叶-3
-const curPart = ref(1)
+const curPart = ref(0)
 
 const emit = defineEmits(['next', 'close'])
 
@@ -21,7 +22,9 @@ const emit = defineEmits(['next', 'close'])
 const x = window.innerWidth / window.innerHeight
 
 onMounted(() => {
-  console.log('比例', x)
+  setTimeout(() => {
+    curPart.value = 1
+  }, 1500)
 })
 
 
@@ -33,52 +36,64 @@ const {
 
 <template>
   <div class="screen-box">
-    <transition name="fade-in-out">
-      <div class="screen-box2">
-        <div class="title-disc">
-          当前展示内容
-        </div>
+    <!-- <transition name="fade-in-out" /> -->
+    <div class="screen-box2">
+      <div class="title-disc">
+        当前展示内容
+      </div>
+      <Transition name="fade-out">
+        <img
+          v-show="curPart === 0"
+          class="detail-img"
+          :style="{ width: x > 0.5 ? '100%' : '' }"
+          :src="moren"
+          alt=""
+        >
+      </Transition>
+      <Transition name="fade-in">
         <img
+          v-show="curPart !== 0"
           class="detail-img"
-          :style="{width: x > 0.5 ? '100%' :''}"
-          :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : yeImg"
+          :style="{ width: x > 0.5 ? '100%' : '' }"
+          :src="curPart == 1 ? ganImg : curPart == 2 ? zhiImg : curPart == 3 ? yeImg : moren"
           alt=""
         >
-        <!-- 竹子部分选择 -->
-        <div class="options-box">
-          <div
-            :class="{ 'active': curPart == 1 }"
-            @click="() => { curPart = 1 }"
-          >
-            杆
-          </div>
-          <div
-            :class="{ 'active': curPart == 2 }"
-            @click="() => { curPart = 2 }"
-          >
-            枝
-          </div>
-          <div
-            :class="{ 'active': curPart == 3 }"
-            @click="() => { curPart = 3 }"
-          >
-            叶
-          </div>
+      </Transition>
+      <!-- 竹子部分选择 -->
+      <div class="options-box">
+        <div
+          :class="{ 'active': curPart == 1 }"
+          @click="() => { curPart = 1 }"
+        >
+          杆
         </div>
         <div
-          class="index3-income"
-          @click="emit('next',curPart)"
+          :class="{ 'active': curPart == 2 }"
+          @click="() => { curPart = 2 }"
         >
-          查看画法
+          枝
         </div>
-        <div class="system-btns">
-          <BtnBack
-            :color="`green`"
-            @click="emit('close')"
-          />
+        <div
+          :class="{ 'active': curPart == 3 }"
+          @click="() => { curPart = 3 }"
+        >
+          叶
         </div>
       </div>
-    </transition>
+      <div
+        :style="{ opacity: curPart == 0 ? '0' : '1' }"
+        class="index3-income"
+        @click="emit('next', curPart)"
+      >
+        查看画法
+      </div>
+      <div class="system-btns">
+        <BtnBack
+          :color="`green`"
+          @click="emit('close')"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -97,9 +112,7 @@ const {
     align-items: center;
     background-image: url(@/assets/images/screen-box2.png);
     background-size: 100% 100%;
-    // background: linear-gradient(180deg, #233E16 -100%, rgba(156, 171, 148, 0.5) 100%);
-    // backdrop-filter: blur(15px);
-    // padding-top: calc(71 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+    position: relative;
 
     .title-disc {
       width: 100%;
@@ -109,7 +122,8 @@ const {
       font-size: calc(20 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
       line-height: calc(23 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
       font-family: 'KaiTi';
-      // top: calc(50 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
+      position: absolute;
+      top: calc(50 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
     }
 
     .detail-img {
@@ -117,9 +131,8 @@ const {
       height: calc(506 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       object-fit: cover;
       object-position: left;
-      // @media screen and (max-width: 350px) {
-      //   width: 100%;
-      // }
+      position: absolute;
+      top: 5%;
     }
 
     .options-box {
@@ -132,6 +145,8 @@ const {
       line-height: calc(32 /v-bind(windowSizeWhenDesignForRef)* v-bind(windowSizeInCssForRef));
       font-family: 'KingHwa_OldSong';
       margin: calc(58 / v-bind(windowSizeWhenDesignForRef)*v-bind(windowSizeInCssForRef)) auto;
+      position: absolute;
+      bottom: 14%;
 
       >.active {
         width: calc(55 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -144,7 +159,7 @@ const {
         display: flex;
         justify-content: center;
         align-items: center;
-        text-shadow: 2px 4px 4px rgba(71,100,70,0.5);
+        text-shadow: 2px 4px 4px rgba(71, 100, 70, 0.5);
         font-size: calc(36 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
         font-family: calc(42 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeWhenDesignForRef));
       }
@@ -162,6 +177,8 @@ const {
       background-image: url(@/assets/images/btn_more.png);
       background-size: 100% 100%;
       font-family: 'KaiTi';
+      position: absolute;
+      bottom: 8%;
     }
 
     .system-btns {