首页文字调整为最多4行

src/views/aboutUs.vue

@@ -31,8 +31,8 @@ export default {
 
 .aboutUs {
   width: 100%;
-  background-image: url(../../static/images/banner_index.jpg);
+  background: url(../../static/images/banner_index.jpg) center no-repeat;
-  background-size: 100% 100%;
+  background-size: auto 100%;
   display: flex;
   justify-content: center;
 }

src/views/home.vue

@@ -112,11 +112,11 @@
           <li v-for="(item, index) in dataUpdateList" :key="index" @click="turnDetailPage(item)">
             <div class="date">
               <p>{{ item.voyage_end_date.slice(8, 10) }}</p>
-              <span>{{ item.voyage_end_date.slice(0, 7) }}</span>
+              <span class="text-ellipsis--4-lines">{{ item.voyage_end_date.slice(0, 7) }}</span>
             </div>
             <div class="des">
               <p>{{ item.voyage_name }}</p>
-              <span>{{ item.voyage_remark }}</span>
+              <span class="text-ellipsis--4-lines">{{ item.voyage_remark }}</span>
             </div>
           </li>
         </ul>
@@ -124,11 +124,11 @@
           <li v-for="(item, index) in sampleDataUpdateList" :key="index">
             <div class="date">
               <p>{{ item.create_time.slice(8, 10) }}</p>
-              <span>{{ item.create_time.slice(0, 7) }}</span>
+              <span class="text-ellipsis--4-lines">{{ item.create_time.slice(0, 7) }}</span>
             </div>
             <div class="des">
               <p>{{ item.dataset_name }}</p>
-              <span>{{ item.job_type }}</span>
+              <span class="text-ellipsis--4-lines">{{ item.job_type }}</span>
             </div>
           </li>
         </ul>
@@ -1275,4 +1275,17 @@ export default {
 #map {
   position: relative;
 }
+
+.text-ellipsis--4-lines {
+  /* 限制显示的行数 */
+  -webkit-line-clamp: 4;
+  /* 将对象作为弹性伸缩盒子模型显示（必要） */
+  display: -webkit-box;
+  /* 设置或检索伸缩盒对象的子元素的排列方式为垂直（必要） */
+  -webkit-box-orient: vertical;
+  /* 隐藏超出容器的内容 */
+  overflow: hidden;
+  /* 文本溢出时显示省略号 */
+  text-overflow: ellipsis;
+}
 </style>