style: 竹子简介断句

src/views/BambooHotView3/index.vue

@@ -13,6 +13,9 @@
 
       <p
         class="bamboo-hot2-hot__inner"
+        :class="{
+          line28: checkedHotId === 7
+        }"
         v-html="ITEM_INFO_MAP[checkedHotId].info"
       />
     </div>
@@ -216,36 +219,36 @@ const match = windowSizeInCssForRef.value.match(/\d+/)
 const maxTranslateXLength = 1000 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10)
 let itemScrollMap = {
   1: 0,
-  2: 230 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
+  2: 250 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
   3: 280 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
-  4: 640 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
+  4: 660 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
   7: 900 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
   8: 840 / Number(windowSizeWhenDesignForRef.value) * parseInt(match[0], 10),
 }
 const ITEM_INFO_MAP = {
   1: {
     label: '水竹',
-    info: '篷耳小，形状为卵形或长椭圆形。锋舌边缘生有短白纤毛。筝片直立，呈三角形至狭长三角形。'
+    info: '竿可高六米许，粗达三厘米；篷耳小，<br/>形状为卵形或长椭圆形。<br/>锋舌边缘生有短白纤毛。筝片直立，<br/>呈三角形至狭长三角形。<br/>叶片为线状披针形或披针形，<br/>下表面基部有些许毛。'
   },
   2: {
     label: '紫竹',
-    info: '紫竹幼竿绿色，覆盖细柔毛和白粉，幕环有毛，籍鞘背面红褐色或绿色加深。叶片小而薄，窄披针形。'
+    info: '紫竹幼竿绿色，覆盖细柔毛和白粉，<br/>幕环有毛，籍鞘背面红褐色或绿色加深。<br/>斑点微小或无，锌鞘上端常密集，<br/>带微量白粉和淡褐色刺毛。叶片小而薄，<br/>窄披针形，先端尖长。'
   },
   3: {
     label: '梅鹿竹',
-    info: '梅鹿竹斑纹相连，圆形，外轮廓深色，斑心发白。竹地上有兽斑状斑痕，酷似梅花鹿的花纹。'
+    info: '梅鹿竹斑纹相连，圆形，外轮廓深色，<br/>斑心发白。有些竹地呈青灰色，<br/>上有兽斑状斑痕，酷似梅花鹿的花纹。'
   },
   4: {
     label: '楠竹',
-    info: '单轴散生型常绿乔木状竹类植物，呈直立状，竹叶深绿，呈披针形'
+    info: '单轴散生型常绿乔木状竹类植物，<br/>株高约二十米，径可达十二至三十厘米，<br/>呈直立状，基部节间长一至六厘米，<br/>中部节间长达四十厘米，<br/>新秆上具细柔毛后脱落。'
   },
   7: {
     label: '湘妃竹',
-    info: '中小型竹，竿环及箨<span style="writing-mode:horizontal-tb;">（tuò）</span>环隆起，竿箨黄褐色，有黑褐色斑点，箨叶三角形或带形'
+    info: '中小型竹，竿高五米至十米，<br/>竿环及箨<span style="writing-mode:horizontal-tb;letter-spacing:0">（tuò）</span>环隆起，竿箨黄褐色，<br/>有黑褐色斑点，箨耳较小，矩圆形或镰形，<br/>箨叶三角形或带形，<br/>橘红色，边缘绿色，叶带状披针形，<br/>叶舌发达，有叶耳及长肩毛。'
   },
   8: {
     label: '单竹',
-    info: '竹质细腻，纤维韧性极强，可制成薄如蝉翼的竹篾丝，编织成绸似、绢似的精美竹编工艺品。'
+    info: '民间俗称“苦慈”，竹质细腻，<br/>纤维韧性极强，可制成薄如蝉翼、<br/>细如发丝的竹篾丝，编织成绸似、<br/>绢似的精美竹编工艺品。'
   },
 }
 
@@ -424,7 +427,7 @@ img {
 
   &.left {
     right: unset;
-    left: calc(70 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     writing-mode: vertical-lr;
 
     .bamboo-hot2-hot__title::before {
@@ -434,7 +437,7 @@ img {
   }
   &__title {
     position: relative;
-    margin-bottom: calc(90 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    margin-bottom: calc(80 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     font-weight: bold;
     letter-spacing: 5px;
     font-size: calc(38 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
@@ -453,10 +456,13 @@ img {
   }
   &__inner {
     letter-spacing: 2px;
-    white-space: pre-wrap;
+    white-space: nowrap;
     line-height: calc(40 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
     font-size: calc(20 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-    height: calc(430 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+
+    &.line28 {
+      line-height: calc(28 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+    }
   }
 }