避免文字介绍产生滚动条

src/components/times/sanmiaoshendan.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <TimeCommon :info="info"/>
+    <TimeCommon :info="info" :isLargeDesc="true"/>
   </div>
 </template>
 

src/components/times/timecommon.vue

@@ -8,7 +8,11 @@
       :repeat="true"
       :audio-url="getAudioUrl(`${info.textCn}.mp3`)"
     />
-    <div class="right-info">
+    <div class="right-info"
+      :class="{
+        large: isLargeDesc,
+      }"
+    >
       <SquareWord :word="info.textCn" size="mini" />
       <div class="intro">
         <ul class="introduce">
@@ -57,7 +61,8 @@ const instance = getCurrentInstance()
 const globalProperties = instance.appContext.app.config.globalProperties
 
 const props = defineProps({
-  info: Object
+  info: Object,
+  isLargeDesc: Boolean,
 })
 const mySwiper = ref(null)
 
@@ -192,5 +197,13 @@ const onClickItem = item => {
       }
     }
   }
+  .right-info.large {
+    margin: 0 2rem;
+    padding-top: 2%;
+    .intro {
+      margin-left: 1rem;
+      height: 80%;
+    }
+  }
 }
 </style>

src/views/LongImage.vue

@@ -21,10 +21,17 @@
     />
 
     <div ref="longref$">
-      <component :is="timeItem.component" v-for="(timeItem, index) in timeList"
-        :info="{ ...timeItem.info, id: timeItem.id }" :style="{
+      <component
+        class="time-item"
+        v-for="(timeItem, index) in timeList"
+        :key="timeItem.id"
+        :is="timeItem.component"
+        :info="{ ...timeItem.info, id: timeItem.id }"
+        :style="{
           left: `calc(${itemW}% * ${index} - ${translateLength}px)`,
-        }" @onClickTimeItem="onClickTimeItem" :key="timeItem.id" class="time-item" />
+        }"
+        @onClickTimeItem="onClickTimeItem"
+      />
     </div>
 
     <Interaction ref="interaction$" :currentTimeIdx="currentTimeIdx" :list="timeList" />