style: --

src/views/BambooHotView3/index.vue

@@ -13,9 +13,8 @@
 
       <p
         class="bamboo-hot2-hot__inner"
-      >
-        {{ ITEM_INFO_MAP[checkedHotId].info }}
-      </p>
+        v-html="ITEM_INFO_MAP[checkedHotId].info"
+      />
     </div>
 
     <div
@@ -180,13 +179,17 @@
 
     <div class="system-btns">
       <BtnBack @click="goBack" />
-      <OperationTip
-        id="operationH"
-        class="operation-h"
-        text=""
-        direction="h"
-        :is-show="isShowOperationTip"
-      />
+
+      <!-- 提示语 -->
+      <div :class="`operation-tip ${titShow ? '' : 'operation-tipHide'}`">
+        左右滑动
+        <img
+          class=""
+          :src="require(`@/assets/images/icon_operation_h_white.png`)"
+          alt=""
+          draggable="false"
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -223,7 +226,7 @@ const ITEM_INFO_MAP = {
   },
   7: {
     label: '湘妃竹',
-    info: '中小型竹，竿环及箨（tuò）环隆起，竿箨黄褐色，有黑褐色斑点，箨叶三角形或带形'
+    info: '中小型竹，竿环及箨<span style="writing-mode:initial;">（tuò）</span>环隆起，竿箨黄褐色，有黑褐色斑点，箨叶三角形或带形'
   },
   8: {
     label: '单竹',
@@ -231,6 +234,7 @@ const ITEM_INFO_MAP = {
   },
 }
 
+const titShow = ref(true)
 const bgImgLoaded = ref(false)
 const {
   windowSizeInCssForRef,
@@ -347,6 +351,7 @@ const handleTouchstart = (e) => {
 }
 const handleTouchmove = (e) => {
   e.preventDefault()
+  titShow.value = false
   if (hotVisible.value || !isMouseDown.value || !e.changedTouches.length) return
 
   if (
@@ -606,9 +611,29 @@ img {
   bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
   z-index: 2;
 
-  .operation-h {
-    width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    transition: opacity 0.5s ease-in-out;
+  // 提示语
+  .operation-tip {
+    position: absolute;
+    z-index: 30;
+    left: 50%;
+    bottom: 7%;
+    transform: translateX(-50%);
+    color: white;
+    font-size: 12px;
+    letter-spacing: 3px;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    opacity: 1;
+    transition: opacity 1s;
+
+    img {
+      width: 30px;
+    }
+  }
+
+  .operation-tipHide {
+    opacity: 0;
   }
 }