wmsh精品展多行省略+处理显示undefined

src/views/boutique/components/wmsh/index.vue

@@ -35,7 +35,10 @@
           <div class="swiper-info wow animate__animated animate__fadeInRight">
             <span>毕节博物馆第 {{ getIndex() }} 层线路图</span>
           </div>
-          <div class="swiper-arrow wow animate__animated animate__fadeIn" data-wow-delay="0.5s">
+          <div
+            class="swiper-arrow wow animate__animated animate__fadeIn"
+            data-wow-delay="0.5s"
+          >
             <div class="up" @click="handleSwiperChange('up')">
               <img src="@/assets/imgs/boutique/wmsh/2nd/arrow_up.png" alt="" />
             </div>
@@ -49,8 +52,15 @@
         </div>
         <div class="desc">
           <div>
-            <img src="@/assets/imgs/boutique/wmsh/2nd/desc_title.png" alt="" class="wow animate__animated animate__zoomInRight" />
-            <div class="desc-info wow animate__animated animate__slideInRight" data-wow-delay="0.2s">
+            <img
+              src="@/assets/imgs/boutique/wmsh/2nd/desc_title.png"
+              alt=""
+              class="wow animate__animated animate__zoomInRight"
+            />
+            <div
+              class="desc-info wow animate__animated animate__slideInRight"
+              data-wow-delay="0.2s"
+            >
               毕节地区历史悠久，文化源远流长。自二十三万年前的远古时期，黔西观音洞人在与大自然的顽强搏斗中，开创了远古历史文明，成为中华文明的重要组成部分；进入新石器时代，生活在这片土地上的先民拥有了陶器制作、出现了农业，将文明继续向前推进；商周至战国时期，毕节先民逐步从穴居走向屋居，并掌握了青铜、铁冶炼技术。秦汉时期，毕节与中原就有着政治、经济、文化联系；至汉代，毕节已初开昌明；蜀汉时期，彝族济济火助诸葛亮南征有功，建立了罗甸国，与乌撒地方政权“勾”一起创造了千年彝族文化；明洪武年间，彝族女政治家奢香夫人开“龙场九驿”以通滇蜀。清初进一步推行“改土归流”政策，促进了交通、经济、文化的大发展，民族文化百花齐放。贵州地下党第一个党支部，贵州唯一一个省级地方红色革命政权——川滇黔省革命委员会革命根据地，贵州抗日救国军等反映了毕节是一块革命的热土；大方航空航天发动机制造厂的建立，标志着中国航空航天工业在这里诞生。社会主义建设时期，毕节地区各民族在党和政府的领导下，完成了清匪反霸、土地分配、农村生产合作社、土地承包等社会主义初始建设，全区的农业、工业和社会事业建设取得了巨大成就。有着厚重的历史文化，多姿多彩的民族文化和光辉灿烂的红色文化的毕节，随着改革开放，特别是毕节“开发扶贫、生态建设”试验区的建立，在党中央、国务院、各民主党派中央的高度关心、支持、帮扶下，全区各族人民在地委、行署的领导下，发扬革命老区、试验区精神，开拓进取、不断创新、勤奋努力，在挣脱贫困奔小康的道路上奋勇前进，硕果累累。改革试验绘宏图，跨越崛起正当时。一个正在崛起的毕节，一个科学发展的毕节，正在迈向新的跨越发展的新境地。
             </div>
           </div>
@@ -63,7 +73,10 @@
             alt=""
           />
         </p>
-        <div class="menu wow animate__animated animate__zoomIn" :class="{ red: i > 4 }">
+        <div
+          class="menu wow animate__animated animate__zoomIn"
+          :class="{ red: i > 4 }"
+        >
           <ul class="menu1" v-if="data[i - 1].children[0].title">
             <li v-for="(node, j) in data[i - 1].children" :key="j">
               <div
@@ -71,7 +84,7 @@
                 :class="{ active: selectNode[i - 1]?.title === node.title }"
                 @click="handleNodeClick(node, i, 1)"
               >
-                <span>{{ node.title }}</span>
+                <span>{{ node.title || "" }}</span>
                 <img
                   src="@/assets/imgs/boutique/wmsh/common/title_bg.png"
                   alt=""
@@ -117,7 +130,10 @@
               data-wow-delay="0.3s"
             />
           </div>
-          <div class="desc wow animate__animated animate__fadeInUp" :class="i % 2 === 1 ? 'left' : 'right'">
+          <div
+            class="desc wow animate__animated animate__fadeInUp"
+            :class="i % 2 === 1 ? 'left' : 'right'"
+          >
             <div class="txt" v-if="i % 2 === 1">
               <p>{{ getTitle(curNode[i - 1]) }}</p>
               <div>
@@ -134,7 +150,7 @@
             </div>
             <div class="txt" v-if="i % 2 === 0">
               <p>{{ getTitle(curNode[i - 1]) }}</p>
-              <div>
+              <div :title="curNode[i - 1]?.intro">
                 {{ curNode[i - 1]?.intro }}
               </div>
             </div>
@@ -157,11 +173,16 @@
                 :src="require(`@/assets/imgs/boutique/wmsh/5th/zp${n}.png`)"
                 alt=""
                 class="wow animate__animated"
-                :class="n % 2 === 1 ? 'animate__slideInDown' : 'animate__slideInUp'"
+                :class="
+                  n % 2 === 1 ? 'animate__slideInDown' : 'animate__slideInUp'
+                "
                 data-wow-delay="0.5s"
               />
             </div>
-            <p class="wow animate__animated animate__fadeInUp" data-wow-delay="0.5s">
+            <p
+              class="wow animate__animated animate__fadeInUp"
+              data-wow-delay="0.5s"
+            >
               <img
                 src="@/assets/imgs/boutique/wmsh/common/title_bg.png"
                 alt=""
@@ -246,12 +267,12 @@ export default {
   },
   methods: {
     getTitle(node) {
-      let str = node.title;
+      let str = node.title || "";
       if (node.subtitle) {
         str += `--${node.subtitle}`;
       }
 
-      return `${node.name}  ${str}` || "";
+      return `${node.name || ""} ${str || ""}`;
     },
     handleNodeClick(data, index, type) {
       if (type === 1) {
@@ -525,6 +546,7 @@ export default {
             }
           }
           > .txt {
+            width: 700px;
             > p {
               font-size: 32px;
               margin-bottom: 40px;
@@ -535,6 +557,12 @@ export default {
             > div {
               font-size: 16px;
               line-height: 32px;
+              max-height: 220px;
+              overflow: hidden; /*隐藏多出部分文字*/
+              text-overflow: ellipsis; /*用省略号代替多出部分文字*/
+              display: -webkit-box; /* 显示多行文本容器 */
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 7; /*显示行数*/
             }
           }
           > .pic {