浏览代码

fix:更新竹谱画法数据、分页器,还有竹子热点划不动问题

aamin 1 年之前
父节点
当前提交
3d953c6818
共有 50 个文件被更改,包括 428 次插入136 次删除
  1. 201 20
      public/configExcel.js
  2. 二进制
      public/configMultiMedia/zhupuImages/一笔偃月.png
  3. 二进制
      public/configMultiMedia/zhupuImages/一笔横舟.png
  4. 二进制
      public/configMultiMedia/zhupuImages/一笔片羽.png
  5. 二进制
      public/configMultiMedia/zhupuImages/七笔破双个字.png
  6. 二进制
      public/configMultiMedia/zhupuImages/三笔个字.png
  7. 二进制
      public/configMultiMedia/zhupuImages/三笔金鱼尾.png
  8. 二进制
      public/configMultiMedia/zhupuImages/三笔飞燕.png
  9. 二进制
      public/configMultiMedia/zhupuImages/二笔燕尾.png
  10. 二进制
      public/configMultiMedia/zhupuImages/二笔鱼尾.png
  11. 二进制
      public/configMultiMedia/zhupuImages/五笔交鱼雁尾.png
  12. 二进制
      public/configMultiMedia/zhupuImages/五笔破分字1.png
  13. 二进制
      public/configMultiMedia/zhupuImages/五笔破分字2.png
  14. 二进制
      public/configMultiMedia/zhupuImages/五笔破分字3.png
  15. 二进制
      public/configMultiMedia/zhupuImages/五笔破分字4.png
  16. 二进制
      public/configMultiMedia/zhupuImages/五笔飞燕.png
  17. 二进制
      public/configMultiMedia/zhupuImages/六笔双雁.png
  18. 二进制
      public/configMultiMedia/zhupuImages/初起手一笔.png
  19. 二进制
      public/configMultiMedia/zhupuImages/匹笔惊鸦.png
  20. 二进制
      public/configMultiMedia/zhupuImages/四笔交鱼尾.png
  21. 二进制
      public/configMultiMedia/zhupuImages/图层6.png
  22. 二进制
      public/configMultiMedia/zhupuImages/垂梢.png
  23. 二进制
      public/configMultiMedia/zhupuImages/嫩叶出梢结项1.png
  24. 二进制
      public/configMultiMedia/zhupuImages/嫩叶出梢结项2.png
  25. 二进制
      public/configMultiMedia/zhupuImages/左右生旁枝.png
  26. 二进制
      public/configMultiMedia/zhupuImages/布叶生枝结项.png
  27. 二进制
      public/configMultiMedia/zhupuImages/新竿.png
  28. 二进制
      public/configMultiMedia/zhupuImages/新篁斜队嫩枝.png
  29. 二进制
      public/configMultiMedia/zhupuImages/新篁鲜箨右梢.png
  30. 二进制
      public/configMultiMedia/zhupuImages/新篁鲜箨左梢.png
  31. 二进制
      public/configMultiMedia/zhupuImages/根下生枝.png
  32. 二进制
      public/configMultiMedia/zhupuImages/根下竹胎.png
  33. 二进制
      public/configMultiMedia/zhupuImages/根下笋鞭.png
  34. 二进制
      public/configMultiMedia/zhupuImages/横竿.png
  35. 二进制
      public/configMultiMedia/zhupuImages/点节乙字上抱.png
  36. 二进制
      public/configMultiMedia/zhupuImages/点节八字下抱.png
  37. 二进制
      public/configMultiMedia/zhupuImages/直分字.png
  38. 二进制
      public/configMultiMedia/zhupuImages/直竿带曲.png
  39. 二进制
      public/configMultiMedia/zhupuImages/细竿.png
  40. 二进制
      public/configMultiMedia/zhupuImages/解箨.png
  41. 二进制
      public/configMultiMedia/zhupuImages/起手二笔三笔直竿.png
  42. 二进制
      public/configMultiMedia/zhupuImages/起手鹿角枝.png
  43. 二进制
      public/configMultiMedia/zhupuImages/过墙大小二梢(大).png
  44. 二进制
      public/configMultiMedia/zhupuImages/过墙大小二梢(小).png
  45. 二进制
      public/configMultiMedia/zhupuImages/露根.png
  46. 二进制
      public/configMultiMedia/zhupuImages/鱼骨枝1.png
  47. 二进制
      public/configMultiMedia/zhupuImages/鱼骨枝2.png
  48. 二进制
      src/assets/images/bg-game.png
  49. 126 28
      src/views/BambooBookScene3.vue
  50. 101 88
      src/views/BambooHotView.vue

+ 201 - 20
public/configExcel.js

@@ -563,38 +563,219 @@ var configExcel = {
 var configZhuPu = {
 var configZhuPu = {
   "杆": [
   "杆": [
     {
     {
-      '显示名称': [
-        'zhi', '直', 'gan', '竿', 'dai', '带', 'qu', '曲'
-      ],
-      '名称': '直竿带曲'
+      '名称': '初起手一笔',
+      '画法': '发竿点节式'
     },
     },
     {
     {
-      '显示名称': [
-        'xi', '细', 'gan', '竿'
-      ],
-      '名称': '细竿'
+      '名称': '起手二笔三笔直竿',
+      '画法': '发竿点节式'
     },
     },
+    {
+      '名称': '细竿',
+      '画法': '发竿点节式'
+    },
+
+    {
+      '名称': '新竿',
+      '画法': '发竿点节式'
+    },
+    {
+      '名称': '解箨',
+      '画法': '发竿点节式'
+    },
+    {
+      '名称': '直竿带曲',
+      '画法': '发竿点节式'
+    },
+    {
+      '名称': '点节乙字上抱',
+      '画法': '发竿点节式'
+    },
+    {
+      '名称': '点节八字下抱',
+      '画法': '发竿点节式'
+    },
+
+
+    {
+      '名称': '根下竹胎',
+      '画法': '发竿式'
+    },
+
+    {
+      '名称': '垂梢',
+      '画法': '发竿式'
+    },
+    {
+      '名称': '露根',
+      '画法': '发竿式'
+    },
+    {
+      '名称': '根下笋鞭',
+      '画法': '发竿式'
+    },
+    {
+      '名称': '横竿',
+      '画法': '发竿式'
+    },
+
+
   ],
   ],
   "枝": [
   "枝": [
     {
     {
-      '显示名称': [
-        'qi', '起', 'shou', '手', 'lu', '鹿', 'jiao', '角', 'zhi', '枝'
-      ],
-      '名称': '起手鹿角枝'
+      '名称': '新篁斜队嫩枝',
+      '画法': '横梢式'
+    },
+    {
+      '名称': '布叶生枝结项',
+      '画法': '结项式'
+    },
+    {
+      '名称': '嫩叶出梢结项',
+      '画法': '结项式',
+      '图片名称': '嫩叶出梢结项1'
     },
     },
     {
     {
-      '显示名称': [
-        'zuo', '左', 'you', '右', 'sheng', '生', 'pang', '旁', 'zhi', '枝'
-      ],
-      '名称': '左右生旁枝'
+      '名称': '嫩叶出梢结项',
+      '画法': '结项式',
+      '图片名称': '嫩叶出梢结项2'
+    },
+    {
+      // '显示名称': [
+      //   'qi', '起', 'shou', '手', 'lu', '鹿', 'jiao', '角', 'zhi', '枝'
+      // ],
+      '名称': '起手鹿角枝',
+      '画法': '生枝式'
+    },
+    {
+      '名称': '鱼骨枝1',
+      '画法': '生枝式',
+      '图片名称': '鱼骨枝1'
+    },
+    {
+      '名称': '鱼骨枝2',
+      '画法': '生枝式',
+      '图片名称': '鱼骨枝2'
+    },
+    {
+      // '显示名称': [
+      //   'zuo', '左', 'you', '右', 'sheng', '生', 'pang', '旁', 'zhi', '枝'
+      // ],
+      '名称': '左右生旁枝',
+      '画法': '生枝式',
+
+    },
+    {
+      '名称': '根下生枝',
+      '画法': '生枝式'
     },
     },
   ],
   ],
   "叶": [
   "叶": [
     {
     {
-      '显示名称': [
-        'si', '四', 'bi', '笔', 'luo', '落', 'yan', '雁'
-      ],
-      '名称': '四笔落雁'
+      // '显示名称': [
+      //   'si', '四', 'bi', '笔', 'luo', '落', 'yan', '雁'
+      // ],
+      '名称': '一笔片羽',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '二笔燕尾',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '三笔个字',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '四笔落雁',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '五笔飞燕',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '匹笔惊鸦',
+      '画法': '布偃叶式'
+    },
+    {
+      '名称': '七笔破双个字',
+      '画法': '布偃叶式'
+    },
+
+    {
+      '名称': '一笔横舟',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '一笔偃月',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '二笔鱼尾',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '三笔飞燕',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '三笔金鱼尾',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '四笔交鱼尾',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '五笔交鱼雁尾',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '六笔双雁',
+      '画法': '布仰叶式'
+    },
+    {
+      '名称': '新篁鲜箨左梢',
+      '画法': '出梢式'
+    },
+    {
+      '名称': '新篁鲜箨右梢',
+      '画法': '出梢式'
+    },
+
+    {
+      '名称': '过墙大小二梢(小)',
+      '画法': '垂梢式'
+    },
+    {
+      '名称': '过墙大小二梢(大)',
+      '画法': '垂梢式'
+    },
+
+    {
+      '名称': '直分字',
+      '画法': '直分字'
+    },
+    {
+      '名称': '五笔破分字',
+      '画法': '直分字',
+      '图片名称': '五笔破分字1'
+    },
+    {
+      '名称': '五笔破分字',
+      '画法': '直分字',
+      '图片名称': '五笔破分字2'
+    },
+    {
+      '名称': '五笔破分字',
+      '画法': '直分字',
+      '图片名称': '五笔破分字3'
+    },
+    {
+      '名称': '五笔破分字',
+      '画法': '直分字',
+      '图片名称': '五笔破分字4'
     },
     },
   ]
   ]
 }
 }

二进制
public/configMultiMedia/zhupuImages/一笔偃月.png


二进制
public/configMultiMedia/zhupuImages/一笔横舟.png


二进制
public/configMultiMedia/zhupuImages/一笔片羽.png


二进制
public/configMultiMedia/zhupuImages/七笔破双个字.png


二进制
public/configMultiMedia/zhupuImages/三笔个字.png


二进制
public/configMultiMedia/zhupuImages/三笔金鱼尾.png


二进制
public/configMultiMedia/zhupuImages/三笔飞燕.png


二进制
public/configMultiMedia/zhupuImages/二笔燕尾.png


二进制
public/configMultiMedia/zhupuImages/二笔鱼尾.png


二进制
public/configMultiMedia/zhupuImages/五笔交鱼雁尾.png


二进制
public/configMultiMedia/zhupuImages/五笔破分字1.png


二进制
public/configMultiMedia/zhupuImages/五笔破分字2.png


二进制
public/configMultiMedia/zhupuImages/五笔破分字3.png


二进制
public/configMultiMedia/zhupuImages/五笔破分字4.png


二进制
public/configMultiMedia/zhupuImages/五笔飞燕.png


二进制
public/configMultiMedia/zhupuImages/六笔双雁.png


二进制
public/configMultiMedia/zhupuImages/初起手一笔.png


二进制
public/configMultiMedia/zhupuImages/匹笔惊鸦.png


二进制
public/configMultiMedia/zhupuImages/四笔交鱼尾.png


二进制
public/configMultiMedia/zhupuImages/图层6.png


二进制
public/configMultiMedia/zhupuImages/垂梢.png


二进制
public/configMultiMedia/zhupuImages/嫩叶出梢结项1.png


二进制
public/configMultiMedia/zhupuImages/嫩叶出梢结项2.png


二进制
public/configMultiMedia/zhupuImages/左右生旁枝.png


二进制
public/configMultiMedia/zhupuImages/布叶生枝结项.png


二进制
public/configMultiMedia/zhupuImages/新竿.png


二进制
public/configMultiMedia/zhupuImages/新篁斜队嫩枝.png


二进制
public/configMultiMedia/zhupuImages/新篁鲜箨右梢.png


二进制
public/configMultiMedia/zhupuImages/新篁鲜箨左梢.png


二进制
public/configMultiMedia/zhupuImages/根下生枝.png


二进制
public/configMultiMedia/zhupuImages/根下竹胎.png


二进制
public/configMultiMedia/zhupuImages/根下笋鞭.png


二进制
public/configMultiMedia/zhupuImages/横竿.png


二进制
public/configMultiMedia/zhupuImages/点节乙字上抱.png


二进制
public/configMultiMedia/zhupuImages/点节八字下抱.png


二进制
public/configMultiMedia/zhupuImages/直分字.png


二进制
public/configMultiMedia/zhupuImages/直竿带曲.png


二进制
public/configMultiMedia/zhupuImages/细竿.png


二进制
public/configMultiMedia/zhupuImages/解箨.png


二进制
public/configMultiMedia/zhupuImages/起手二笔三笔直竿.png


二进制
public/configMultiMedia/zhupuImages/起手鹿角枝.png


二进制
public/configMultiMedia/zhupuImages/过墙大小二梢(大).png


二进制
public/configMultiMedia/zhupuImages/过墙大小二梢(小).png


二进制
public/configMultiMedia/zhupuImages/露根.png


二进制
public/configMultiMedia/zhupuImages/鱼骨枝1.png


二进制
public/configMultiMedia/zhupuImages/鱼骨枝2.png


二进制
src/assets/images/bg-game.png


+ 126 - 28
src/views/BambooBookScene3.vue

@@ -1,5 +1,5 @@
 <script setup>
 <script setup>
-import { onMounted, inject } from 'vue'
+import { onMounted, inject, ref, computed } from 'vue'
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import useSizeAdapt from "@/useFunctions/useSizeAdapt"
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { Pagination } from 'swiper/modules'
 import { Pagination } from 'swiper/modules'
@@ -8,6 +8,8 @@ import { Pagination } from 'swiper/modules'
 // import 'swiper/css/pagination'
 // import 'swiper/css/pagination'
 
 
 
 
+
+
 const $env = inject('$env')
 const $env = inject('$env')
 
 
 const {
 const {
@@ -19,14 +21,56 @@ const emit = defineEmits(['close'])
 const props = defineProps({
 const props = defineProps({
   list: {
   list: {
     type: Array,
     type: Array,
-    default: () => {return []},
+    default: () => { return [] },
   },
   },
 })
 })
 
 
 const modules = [Pagination]
 const modules = [Pagination]
-const paginationOptions = { clickable: true }
+
+const swiperRef = ref(null) // 用于访问Swiper实例
+
+const swiperRealIndex = ref(0)
+
+const displayedPages = ref([])
+
+const currentIndex = ref(0)
+
+const slideChange = (item) => {
+  swiperRealIndex.value = item.activeIndex
+  // 这里只是一个简单的示例,根据实际需要调整逻辑
+  const totalSlides = props.list.length // 总幻灯片数量
+  const visibleRange = 5 // 每次显示的分页指示器数量(可以根据需要调整)
+  currentIndex.value = swiperRealIndex.value % 5// 当前幻灯片索引
+  // console.log('currentIndex', currentIndex)
+  // displayedPages.value = totalSlides / 5
+
+  // let start = Math.max(0, currentIndex.value - Math.floor(visibleRange / 2))
+  // let end = Math.min(totalSlides - 1, start + visibleRange - 1)
+
+  if (swiperRealIndex.value >= totalSlides - totalSlides % visibleRange ) {
+    displayedPages.value = Array.from({ length: totalSlides % visibleRange }, (_, i) => 0 + i)
+    // console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)
+  } else {
+    displayedPages.value = Array.from({ length: 5 }, (_, i) => 0 + i)
+  }
+  console.log('displayedPages', totalSlides, visibleRange, swiperRealIndex.value, displayedPages.value)
+
+
+}
+
+
+// 跳转到指定幻灯片
+const goToSlide = (index) => {
+  swiperRef.value.slideTo(index)
+}
+
 onMounted(() => {
 onMounted(() => {
-  console.log(props.list)
+  const totalSlides = props.list.length // 总幻灯片数量
+  const visibleRange = 5 // 每次显示的分页指示器数量(可以根据需要调整)
+  const currentIndex = swiperRealIndex.value// 当前幻灯片索引
+  let start = Math.max(0, currentIndex - Math.floor(visibleRange / 2))
+  let end = Math.min(totalSlides - 1, start + visibleRange - 1)
+  displayedPages.value = Array.from({ length: end - start + 1 }, (_, i) => start + i)
 })
 })
 
 
 
 
@@ -36,41 +80,53 @@ onMounted(() => {
   <div class="screen-box">
   <div class="screen-box">
     <div class="screen-box3">
     <div class="screen-box3">
       <Swiper
       <Swiper
+        ref="swiperRef"
         class="step-list"
         class="step-list"
         :modules="modules"
         :modules="modules"
-        :pagination="paginationOptions"
+        @slide-change="slideChange"
       >
       >
         <SwiperSlide
         <SwiperSlide
-          v-for="(item,index) in list"
+          v-for="(item, index) in list"
           :key="index"
           :key="index"
           class="step-item"
           class="step-item"
         >
         >
           <!-- <div>{{ item['名称'] }}</div> -->
           <!-- <div>{{ item['名称'] }}</div> -->
           <div class="name-box">
           <div class="name-box">
-            <div
+            {{ item['画法'] }}
+            <div class="name-box2">
+              {{ item['名称'] }}
+            </div>
+            <!-- <div
               v-for="(item1,index1) in item['显示名称']"
               v-for="(item1,index1) in item['显示名称']"
               :key="index1"
               :key="index1"
             >
             >
               {{ item1 }}
               {{ item1 }}
-            </div>
+            </div> -->
           </div>
           </div>
           <img
           <img
-            :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['名称']}.png`"
+            :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['图片名称'] ? item['图片名称'] : item['名称']}.png`"
             alt=""
             alt=""
           >
           >
         </SwiperSlide>
         </SwiperSlide>
       </Swiper>
       </Swiper>
-      <div class="system-btns">
-        <BtnBack
-          @click="emit('close')"
+      <!-- 自定义分页器 -->
+      <div class="custom-pagination">
+        <span
+          v-for="(index, i) in displayedPages"
+          :key="i"
+          :class="{ 'pagination-bullet': true, 'swiper-pagination-bullet-active': index === currentIndex }"
+          @click="goToSlide(index)"
         />
         />
       </div>
       </div>
+      <div class="system-btns">
+        <BtnBack @click="emit('close')" />
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 
 
 <style lang='less' scoped>
 <style lang='less' scoped>
-::v-deep{
+::v-deep {
   .swiper-pagination-bullet {
   .swiper-pagination-bullet {
     border: 1px solid white;
     border: 1px solid white;
     background: none;
     background: none;
@@ -78,14 +134,35 @@ onMounted(() => {
     height: 10px;
     height: 10px;
     opacity: 1;
     opacity: 1;
   }
   }
-  .swiper-pagination-bullet-active{
+
+  .swiper-pagination-bullet-active {
     background: white;
     background: white;
   }
   }
-  .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
-        margin: 0 calc(10 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
 
 
-      }
+  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
+  .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
+    margin: 0 calc(5 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+  }
+
+  .custom-pagination {
+    width: 100%;
+    height: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+    span {
+      width: 10px;
+      height: 10px;
+      margin: 0 calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border-radius: 50px;
+      border: 1px solid rgb(245, 243, 243);
+    }
+  }
 }
 }
+
 .screen-box {
 .screen-box {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
@@ -95,43 +172,64 @@ onMounted(() => {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background: url(@/assets/images/screen-box3.png);
     background: url(@/assets/images/screen-box3.png);
-    background-size:cover ;
+    background-size: cover;
 
 
-    .step-list{
+    .step-list {
       width: 100%;
       width: 100%;
       height: calc(100% - 15px);
       height: calc(100% - 15px);
-      .step-item{
+
+      .step-item {
         width: 100%;
         width: 100%;
         height: 100%;
         height: 100%;
         display: flex;
         display: flex;
         justify-content: center;
         justify-content: center;
         align-items: center;
         align-items: center;
         position: relative;
         position: relative;
-        >.name-box{
+
+        >.name-box {
           position: absolute;
           position: absolute;
           left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          writing-mode: horizontal-tb;
+          writing-mode: vertical-rl;
+          letter-spacing: 12px;
           background: url(@/assets/images/name-bg.png);
           background: url(@/assets/images/name-bg.png);
           background-size: 100% 100%;
           background-size: 100% 100%;
-          padding: 15px ;
+          padding: 10px;
           color: #476446;
           color: #476446;
           font-family: 'KingHwa_OldSong';
           font-family: 'KingHwa_OldSong';
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
           line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          >:nth-child(odd){
-            color:#7B916B;
+          // >:nth-child(odd){
+          //   color:#7B916B;
+          //   font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          //   line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          //   transform: translateX(-40%)
+          // }
+
+          .name-box2 {
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            transform: translate(100%, 30%);
+            writing-mode: vertical-rl;
+            letter-spacing: 8px;
+            font-family: 'KingHwa_OldSong';
             font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
             font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-            transform: translateX(-40%)
+            line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            color: #7B916B;
+            white-space: nowrap;
           }
           }
         }
         }
-        >img{
+
+        >img {
           // width: 40%;
           // width: 40%;
+          max-width: 80%;
           margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
           margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
         }
         }
       }
       }
 
 
+
+
     }
     }
 
 
     .system-btns {
     .system-btns {

+ 101 - 88
src/views/BambooHotView.vue

@@ -168,48 +168,53 @@ onMounted(() => {
 
 
 <template>
 <template>
   <div
   <div
-    id="bamboo-hot"
-    ref="scrollableElement"
+
     class="home"
     class="home"
   >
   >
     <div
     <div
       id="bamboo-hot"
       id="bamboo-hot"
-      class="bamboo-hot-bg"
+      ref="scrollableElement"
+      class="scorroll-box"
     >
     >
       <div
       <div
-        v-for="(item, index) in infoList"
-        :key="item.id"
-        class="bamboo-hot-item"
-        :class="{ 'bamboo-hot-animation': currentIndex == index }"
-        :style="{ left: item.left }"
+        id="bamboo-hot"
+        class="bamboo-hot-bg"
       >
       >
-        <img
-          :src="require(`@/assets/images/${item.images}`)"
-          alt=""
-        >
         <div
         <div
-          class="disc-box"
-          :style="{ marginRight: item.marginRight ? item.marginRight : '' }"
+          v-for="(item, index) in infoList"
+          :key="item.id"
+          class="bamboo-hot-item"
+          :class="{ 'bamboo-hot-animation': currentIndex == index }"
+          :style="{ left: item.left }"
         >
         >
+          <img
+            :src="require(`@/assets/images/${item.images}`)"
+            alt=""
+          >
           <div
           <div
-            v-for="(item2) in reverseArray(item.disc)"
-            :key="item2"
-            class="disc-box-item"
+            class="disc-box"
+            :style="{ marginRight: item.marginRight ? item.marginRight : '' }"
           >
           >
-            {{ item2 }}
+            <div
+              v-for="(item2) in reverseArray(item.disc)"
+              :key="item2"
+              class="disc-box-item"
+            >
+              {{ item2 }}
+            </div>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
-    </div>
-    <div class="system-btns">
-      <BtnBack @click="goBack" />
-
-      <OperationTip
-        id="operationH"
-        class="operation-h"
-        text=""
-        direction="h"
-      />
+      <div class="system-btns">
+        <BtnBack @click="goBack" />
+
+        <OperationTip
+          id="operationH"
+          class="operation-h"
+          text=""
+          direction="h"
+        />
+      </div>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
@@ -222,80 +227,88 @@ onMounted(() => {
 .home {
 .home {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
-  overflow-x: scroll;
-  overflow-y: hidden;
-  scrool-behavior: smooth;
 
 
-  .bamboo-hot-bg {
-    width: calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+  .scorroll-box {
+    width: 100%;
     height: 100%;
     height: 100%;
-    background-image: url(@/assets/images/bamboo-hot-bg.png);
-    background-size: 100% 100%;
-    position: relative;
-    // background-position: 383px;
-
-    .bamboo-hot-item {
-      position: absolute;
-      left: 0;
-      top: calc(103 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      opacity: 0.1;
-
-
-      >img {
-        width: calc(150 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-      }
+    overflow-x: scroll;
+    overflow-y: hidden;
+    scrool-behavior: smooth;
+
+    .bamboo-hot-bg {
+      width: calc(3900 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+      height: 100%;
+      background-image: url(@/assets/images/bamboo-hot-bg.png);
+      background-size: 100% 100%;
+      position: relative;
+      // background-position: 383px;
+
+      .bamboo-hot-item {
+        position: absolute;
+        left: 0;
+        top: calc(103 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        opacity: 0.1;
+
+
+        >img {
+          width: calc(150 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        }
 
 
-      .disc-box {
-        display: flex;
-        justify-content: right;
-        margin-top: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
-
-        /* 垂直排列,从右向左 */
-        // direction: rtl;
-        .disc-box-item {
-          writing-mode: vertical-rl;
-          text-orientation: upright;
-          text-align: left;
-          font-family: 'KaiTi';
-          font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          color: #474747;
-          line-height: calc(23 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-          align-items: justify;
-          letter-spacing: .3em;
+        .disc-box {
+          display: flex;
+          justify-content: right;
+          margin-top: calc(50 / v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+
+          /* 垂直排列,从右向左 */
+          // direction: rtl;
+          .disc-box-item {
+            writing-mode: vertical-rl;
+            text-orientation: upright;
+            text-align: left;
+            font-family: 'KaiTi';
+            font-size: calc(16 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            color: #474747;
+            line-height: calc(23 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+            align-items: justify;
+            letter-spacing: .3em;
+          }
         }
         }
       }
       }
-    }
 
 
-    .bamboo-hot-animation {
-      animation: fade-in 1.5s forwards;
+      .bamboo-hot-animation {
+        animation: fade-in 1.5s forwards;
 
 
-      @keyframes fade-in {
-        form {
-          opacity: 0;
-        }
+        @keyframes fade-in {
+          form {
+            opacity: 0;
+          }
 
 
-        to {
-          opacity: 1;
+          to {
+            opacity: 1;
+          }
         }
         }
       }
       }
+
     }
     }
 
 
-  }
+    .system-btns {
+      width: 100%;
+      padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      display: flex;
+      // flex-direction: column;
+      justify-content: flex-end;
+      position: absolute;
+      bottom: calc(60 /v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
+      z-index: 2;
 
 
-  .system-btns {
-    width: 100%;
-    padding: 0 calc(20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef));
-    display: flex;
-    // flex-direction: column;
-    justify-content: flex-end;
-    position: absolute;
-    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-h {
+        width: calc(36 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'));
+        transition: opacity 0.5s ease-in-out;
+      }
     }
     }
   }
   }
+
+
+
 }
 }
 </style>
 </style>