style: bamboo hot view change

src/views/BambooHotView2/index.vue

@@ -3,15 +3,19 @@
     <div
       v-if="hotVisible"
       class="bamboo-hot2-hot"
+      :class="{
+        left: [13, 14].includes(checkedHotId)
+      }"
     >
       <div class="bamboo-hot2-hot__title">
         {{ ITEM_INFO_MAP[checkedHotId].label }}
       </div>
 
-      <div
+      <p
         class="bamboo-hot2-hot__inner"
-        v-html="ITEM_INFO_MAP[checkedHotId].info"
-      />
+      >
+        {{ ITEM_INFO_MAP[checkedHotId].info }}
+      </p>
     </div>
 
     <div
@@ -46,44 +50,23 @@
       <div
         class="bamboo-hot2-b2"
         :class="{
-          hide: hotVisible && checkedHotId !== 2
+          hide: hotVisible
         }"
       >
         <img
           src="./images/bamboo2.png"
-          @load="handleBambooOffset(2)"
         >
       </div>
-      <div
-        class="bamboo-hot2__hot b2"
-        :class="{
-          hide: hotVisible
-        }"
-        @click="handleHot(2)"
-      >
-        <p>紫竹</p>
-      </div>
 
       <div
         class="bamboo-hot2-b3"
         :class="{
-          hide: hotVisible && checkedHotId !== 3
+          hide: hotVisible
         }"
       >
         <img
           src="./images/bamboo3.png"
-          @load="handleBambooOffset(3)"
-        >
-
-        <div
-          class="bamboo-hot2__hot"
-          :class="{
-            hide: hotVisible
-          }"
-          @click="handleHot(3)"
         >
-          <p>梅鹿竹</p>
-        </div>
       </div>
 
       <div
@@ -129,10 +112,22 @@
       <div
         class="bamboo-hot2-b7"
         :class="{
+          hide: hotVisible && checkedHotId !== 7
+        }"
+      >
+        <img
+          src="./images/bamboo7.png"
+          @load="handleBambooOffset(7)"
+        >
+      </div>
+      <div
+        class="bamboo-hot2__hot b7"
+        :class="{
           hide: hotVisible
         }"
+        @click="handleHot(7)"
       >
-        <img src="./images/bamboo7.png">
+        <p>湘妃竹</p>
       </div>
 
       <div
@@ -189,21 +184,48 @@
       >
         <img src="./images/bamboo12.png">
       </div>
+
       <div
         class="bamboo-hot2-b13"
         :class="{
+          hide: hotVisible && checkedHotId !== 13
+        }"
+      >
+        <img
+          src="./images/bamboo13.png"
+          @load="handleBambooOffset(13)"
+        >
+      </div>
+      <div
+        class="bamboo-hot2__hot b13"
+        :class="{
           hide: hotVisible
         }"
+        @click="handleHot(13)"
       >
-        <img src="./images/bamboo13.png">
+        <p>梅鹿竹</p>
       </div>
+
       <div
         class="bamboo-hot2-b14"
         :class="{
-          hide: hotVisible
+          hide: hotVisible && checkedHotId !== 14
         }"
       >
-        <img src="./images/bamboo14.png">
+        <img
+          src="./images/bamboo14.png"
+          @load="handleBambooOffset(14)"
+        >
+
+        <div
+          class="bamboo-hot2__hot"
+          :class="{
+            hide: hotVisible
+          }"
+          @click="handleHot(14)"
+        >
+          <p>紫竹</p>
+        </div>
       </div>
 
       <div
@@ -249,52 +271,36 @@ import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 
 let itemScrollMap = {
   1: 0,
-  2: 166,
-  3: 201,
   4: 450,
-  8: 1048
+  7: 0,
+  8: 1048,
+  13: 0,
+  14: 0
 }
 const ITEM_INFO_MAP = {
   1: {
     label: '水竹',
-    info: `
-      <p>竿可高6米许，粗达3厘米；篷耳小，形状为卵形或长椭圆形。</p>
-      <p>锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。</p>
-      <p>叶片为线状披针形或披针形，下表面基部有些许毛。</p>
-    `
+    info: '篷耳小，形状为卵形或长椭圆形。锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。'
   },
-  2: {
+  14: {
     label: '紫竹',
-    info: `
-      <p>紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，</p>
-      <p>籍鞘背面红褐色或绿色加深。斑点微小或无，</p>
-      <p>锌鞘上端常密集，带微量白粉和淡褐色刺毛。叶片小而薄，窄披针形，先端尖长。</p>
-    `
+    info: '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，籍鞘背面红褐色或绿色加深。叶片小而薄，窄披针形。'
   },
-  3: {
+  13: {
     label: '梅鹿竹',
-    info: `
-      <p>梅鹿竹斑纹相连，圆形，</p>
-      <p>外轮廓深色，斑心发白。</p>
-      <p>有些竹地呈青灰色，上有兽斑状斑痕，酷似梅花鹿的花纹。</p>
-    `
+    info: '梅鹿竹斑纹相连，圆形，外轮廓深色，斑心发白。竹地上有兽斑状斑痕，酷似梅花鹿的花纹。'
   },
   4: {
     label: '楠竹',
-    info: `
-      <p>单轴散生型常绿乔木状竹类植物，株高约20米，</p>
-      <p>径可达12-30厘米，呈直立状，</p>
-      <p>基部节间长1-6厘米，中部节间长达40厘米，</p>
-      <p>秆上具细柔毛后脱落。</p>
-    `
+    info: '单轴散生型常绿乔木状竹类植物，呈直立状，竹叶深绿，呈披针形'
+  },
+  7: {
+    label: '湘妃竹',
+    info: '中小型竹，竿环及箨（tuò）环隆起，竿箨黄褐色，有黑褐色斑点，箨叶三角形或带形'
   },
   8: {
     label: '单竹',
-    info: `
-      <p>民间俗称“苦慈”，竹质细腻，</p>
-      <p>纤维韧性极强，可制成薄如蝉翼、细如发丝的竹篾丝，</p>
-      <p>编织成绸似、绢似的精美竹编工艺品。</p>
-    `
+    info: '竹质细腻，纤维韧性极强，可制成薄如蝉翼的竹篾丝，编织成绸似、绢似的精美竹编工艺品。'
   },
 }
 
@@ -324,9 +330,20 @@ const handleHot = (id) => {
 }
 
 const handleBambooOffset = (target) => {
+  let temp = 0
+
+  if ([13, 14].includes(target)) {
+    if (target === 13) {
+      temp = window.innerWidth * 0.2
+    }
+
+    itemScrollMap[target] = bambooWrapBg.value.scrollWidth - window.innerWidth - temp
+    return
+  }
+
   const offset = window.innerWidth / 6
   const left = document.getElementsByClassName(`bamboo-hot2-b${target}`)?.[0].getBoundingClientRect().left
-  let temp = 0
+
   switch (target) {
   case 3:
     temp = window.innerWidth / 3
@@ -334,8 +351,11 @@ const handleBambooOffset = (target) => {
   case 4:
     temp = -(window.innerWidth * 0.25)
     break
+  case 7:
+    temp = (window.innerWidth * 0.2)
+    break
   case 8:
-    temp = -(window.innerWidth * 0.7)
+    temp = -(window.innerWidth * 0.6)
     break
   }
   itemScrollMap[target] = left - offset + temp
@@ -488,6 +508,16 @@ img {
   white-space: nowrap;
   z-index: 999;
 
+  &.left {
+    right: unset;
+    left: calc(70 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    writing-mode: vertical-lr;
+
+    .bamboo-hot2-hot__title::before {
+      right: unset;
+      left: calc(-5 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
+  }
   &__title {
     position: relative;
     margin-bottom: calc(90 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -508,9 +538,11 @@ img {
     }
   }
   &__inner {
-    letter-spacing: 3px;
+    letter-spacing: 2px;
+    white-space: pre-wrap;
     line-height: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     font-size: calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    height: calc(400 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
   }
 }
 
@@ -560,20 +592,9 @@ img {
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
-  .bamboo-hot2__hot.b2 {
-    top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    left: calc(305 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
-    z-index: 4;
-  }
   &-b3 {
     left: calc(140 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
-
-    .bamboo-hot2__hot {
-      top: calc(300 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    }
   }
   &-b4 {
     left: calc(600 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -597,6 +618,12 @@ img {
     transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
+  .bamboo-hot2__hot.b7 {
+    top: calc(160 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(1330 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    transform: translateZ(calc(10 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
+    z-index: 4;
+  }
   &-b8 {
     left: calc(1180 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(25 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.8);
@@ -629,9 +656,20 @@ img {
     transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
     z-index: 2;
   }
+  .bamboo-hot2__hot.b13 {
+    top: calc(360 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(2280 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    transform: translateZ(calc(15 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef')));
+    z-index: 4;
+  }
   &-b14 {
     left: calc(2220 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     transform: translateZ(calc(30 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))) scale(0.7);
+
+    .bamboo-hot2__hot {
+      top: calc(200 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      right: calc(110 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
   }
   &.wrap-hide {
     &::before,