首页修改

src/views/Home/Index.vue

@@ -18,7 +18,7 @@
         </template>
         <el-skeleton :loading="loading" animated>
           <el-card shadow="never" style="margin-bottom: 10px;height: 300px">
-            <el-carousel :interval="4000" type="card" height="300px">
+            <el-carousel :interval="4000" height="300px" motion-blur @change="handleCarouselChange">
               <el-carousel-item v-for="item in filteredList"  :key="item.imgId">
                 <el-image  style="width: 100%; height: 100%" :src="imgUrl+item.imgImg" alt="无图片" :title="item.imgName"/>
               </el-carousel-item>
@@ -26,7 +26,7 @@
           </el-card>
           <el-row>
             <el-col :span="24">
-              <span v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span>
+              <span class="ellipsis" v-if="filteredList[pageNo - 1]">{{filteredList[pageNo-1].imgName}}</span>
             </el-col>
           </el-row>
         </el-skeleton>
@@ -333,6 +333,10 @@ const selectDate = (val: CalendarDateType) => {
   if (!calendar.value) return
   calendar.value.selectDate(val)
 }
+const handleCarouselChange = async (currentIndex:number) => {
+  pageNo.value=currentIndex+1
+
+}
 let tableData = reactive<Email[]>([])
 const getTableData = async () => {
   const data = [
@@ -523,4 +527,11 @@ onMounted(() => {
   align-items: center; /* 垂直居中 */
   justify-content: center; /* 水平居中 */
 }
+.ellipsis {
+  display: inline-block;    /* 需要是块状元素，span默认是行内元素，所以使用inline-block */
+  max-width: 400px;         /* 设置最大宽度，超出部分将显示省略号 */
+  white-space: nowrap;      /* 禁止换行 */
+  overflow: hidden;         /* 超出容器的内容隐藏 */
+  text-overflow: ellipsis;  /* 超出的内容以省略号显示 */
+}
 </style>