各页面的操作提示

src/components/OperationTip.vue

@@ -7,7 +7,7 @@
       <img
         class=""
         :src="
-          require(`@/assets/images/icon_operation_${props.direction}_${props.color}.png`)
+          require(`@/assets/images/icon_operation_${props.type}_${props.color}.png`)
         "
         alt=""
         draggable="false"
@@ -29,9 +29,9 @@ import { ref, computed, watch } from "vue"
 const { windowSizeInCssForRef, windowSizeWhenDesignForRef } = useSizeAdapt()
 
 const props = defineProps({
-  direction: {
+  type: {
     type: String,
-    default: "v", // h
+    default: "wheel", // 'wheel', 'click'
   },
   color: {
     type: String,

src/views/HotspotDetail1.vue

@@ -10,7 +10,7 @@
     <div :class="`HD1_2 ${isLookImg ? '' : 'HD1_2Hide'}`">
       <img
         class=""
-        :src="require(`@/assets/images/icon_white_click.png`)"
+        :src="require(`@/assets/images/icon_operation_click_white.png`)"
         alt=""
         draggable="false"
       >

src/views/MoreContent.vue

@@ -11,7 +11,7 @@
         :style="{
           left: bgLeft + 'px',
         }"
-        src="@/assets/images/fade-chapter-wood/bg-min.jpg"
+        src="@/assets/images/more-content-wood/bg-min.jpg"
         alt=""
         draggable="false"
       >
@@ -24,7 +24,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/4-min.png"
+          src="@/assets/images/more-content-wood/4-min.png"
           alt=""
           draggable="false"
         >
@@ -38,7 +38,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/3-min.png"
+          src="@/assets/images/more-content-wood/3-min.png"
           alt=""
           draggable="false"
         >
@@ -52,7 +52,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/2-min.png"
+          src="@/assets/images/more-content-wood/2-min.png"
           alt=""
           draggable="false"
         >
@@ -66,7 +66,7 @@
       >
         <img
           class="bamboo"
-          src="@/assets/images/fade-chapter-wood/1-min.png"
+          src="@/assets/images/more-content-wood/1-min.png"
           alt=""
           draggable="false"
         >
@@ -102,7 +102,7 @@
           <div class="button-group animation-show-long-hide">
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -114,7 +114,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -126,7 +126,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -138,7 +138,7 @@
             </button>
             <img
               class="splitter"
-              src="@/assets/images/fade-chapter-wood/btn-splitter.png"
+              src="@/assets/images/more-content-wood/btn-splitter.png"
               alt=""
               draggable="false"
             >
@@ -233,8 +233,9 @@
     <BtnBack @click="router.go('-1')" />
 
     <OperationTip
+      v-show="isShowOperationTip"
       class="operation-tip"
-      :text="'左右滑动'"
+      :text="'向下滑动滚轮'"
       :color="'green'"
     />
   </div>
@@ -347,6 +348,14 @@ function onClickRestart() {
 
 const isShowCast = ref(false)
 
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  if (v) {
+    isShowOperationTip.value = false
+    unwatch()
+  }
+})
+
 </script>
 
 <style lang="less" scoped>
@@ -437,7 +446,7 @@ const isShowCast = ref(false)
           );
           color: #474747;
           left: 0;
-          background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
+          background-image: url(@/assets/images/more-content-wood/btn-bg-big.png);
           background-size: contain;
           background-repeat: no-repeat;
           background-position: center center;
@@ -508,7 +517,7 @@ const isShowCast = ref(false)
           > div {
             .button-common-style();
             color: #474747;
-            background-image: url(@/assets/images/fade-chapter-wood/btn-bg-big.png);
+            background-image: url(@/assets/images/more-content-wood/btn-bg-big.png);
             background-size: contain;
             background-repeat: no-repeat;
             background-position: center center;
@@ -622,14 +631,8 @@ const isShowCast = ref(false)
 
   > .operation-tip {
     position: absolute;
-    right: calc(
-      44 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    bottom: calc(
-      74 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+    bottom: calc(234px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+    right: calc(507px  * v-bind("windowHeight") / v-bind("windowHeightDesign"));
   }
 }
 </style>

src/views/PaintingList.vue

@@ -202,9 +202,17 @@
       @click="router.go(-1)"
     />
     <OperationTip
-      class="operation-tip"
-      direction="h"
-      :is-show="isShowOperationTip"
+      v-show="isShowClickTip"
+      class="operation-tip-click"
+      :text="'点击收起'"
+      :color="'white'"
+      type="click"
+    />
+    <OperationTip
+      v-show="isShowWheelTip"
+      class="operation-tip-wheel"
+      :text="'向下滑动滚轮'"
+      :color="'green'"
     />
   </div>
 </template>
@@ -225,7 +233,6 @@ const store = useStore()
 const $env = inject('$env')
 
 const menuEl = ref(null)
-const menuElScrollLeft = ref(0)
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
@@ -315,19 +322,16 @@ function getPaintingSizeStringForShow({ width, height }) {
   return `${width}\u00D7${height} 厘米`
 }
 
-const expandedAgeNameList = ref(new Set(['宋']))
-
-const isShowOperationTip = ref(true)
-const unwatch = watch(menuElScrollLeft, (v) => {
-  isShowOperationTip.value = false
-  unwatch()
-})
+const expandedAgeNameList = ref(new Set(['宋', '元', '明', '清']))
 
 function onClickAge(ageName, evt) {
   if (haveSwipedThisTime.value) {
     return
   }
-  isShowOperationTip.value = false
+  if (isShowClickTip.value) {
+    isShowClickTip.value = false
+    isShowWheelTip.value = true
+  }
   if (expandedAgeNameList.value.has(ageName)) {
     expandedAgeNameList.value.delete(ageName)
   } else {
@@ -357,6 +361,13 @@ function onClickPainting(item) {
   })
 }
 
+const isShowClickTip = ref(true)
+const isShowWheelTip = ref(false)
+const unwatch = watch(translateLength, (v) => {
+  isShowClickTip.value = false
+  isShowWheelTip.value = false
+  unwatch()
+})
 </script>
 
 <style lang="less" scoped>
@@ -668,10 +679,16 @@ function onClickPainting(item) {
   >.button-back{
     z-index: 2;
   }
-  >.operation-tip{
+  > .operation-tip-click {
+    position: absolute;
+    left: calc(42px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    bottom: calc(102px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    z-index: 10;
+  }
+  > .operation-tip-wheel {
     position: absolute;
-    left: 43px;
-    bottom: 102px;
+    left: 50%;
+    bottom: calc(102px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
     transform: translateX(-50%);
     z-index: 10;
   }

src/views/PoemList.vue

@@ -138,8 +138,9 @@
     <BtnBack @click="router.go('-1')" />
 
     <OperationTip
+      v-show="isShowOperationTip"
       class="operation-tip"
-      :text="'左右滑动'"
+      :text="'向下滑动滚轮'"
       :color="'green'"
     />
   </div>
@@ -250,6 +251,14 @@ watch(translateLength, (v) => {
     }
   }
 })
+
+const isShowOperationTip = ref(true)
+const unwatch = watch(translateLength, (v) => {
+  if (v) {
+    isShowOperationTip.value = false
+    unwatch()
+  }
+})
 </script>
 
 <style lang="less" scoped>
@@ -511,14 +520,10 @@ watch(translateLength, (v) => {
 
   > .operation-tip {
     position: absolute;
-    right: calc(
-      44 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
-    bottom: calc(
-      74 / v-bind("windowSizeWhenDesignForRef") *
-        v-bind("windowSizeInCssForRef")
-    );
+    left: 42%;
+    bottom: calc(234px * v-bind('windowHeight') / v-bind('windowHeightDesign'));
+    transform: translateX(-50%);
+
   }
 }
 </style>