瀏覽代碼

综合展示新闻中心轮播图添加标题

DESKTOP-6LTVLN7\Liumouren 3 年之前
父節點
當前提交
de96a8f5c3
共有 1 個文件被更改,包括 32 次插入6 次删除
  1. 32 6
      src/views/ComprehensiveDisplay.vue

+ 32 - 6
src/views/ComprehensiveDisplay.vue

@@ -15,7 +15,12 @@
           <!-- 图片轮播区域 -->
           <el-carousel class="Newscenter_main_byArea" height="200px">
             <el-carousel-item v-for="(item, index) in NewscenterAreas" :key="index">
-              <el-image style="cursor: pointer" :src="item.imageUrl" @click="Jump(item.jumpUrl)"></el-image>
+              <el-image style="cursor: pointer" :src="item.imageUrl" @click="Jump(item.jumpUrl)" :alt="item.alt"> </el-image>
+              <div class="Newscenter_main_byArea_alt userSelect_None">
+                <el-tooltip class="item" effect="dark" :content="item.alt" :open-delay="1000">
+                  <span>{{ item.alt }}</span>
+                </el-tooltip>
+              </div>
             </el-carousel-item>
           </el-carousel>
           <!-- 新闻中心内容 -->
@@ -110,23 +115,28 @@ export default {
       NewscenterAreas: [
         {
           imageUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/W020220518322335295754.jpg",
-          jumpUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/t20220517_316299.html"
+          jumpUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/t20220517_316299.html",
+          alt: "于文学在石家庄市督导检查自建房安全隐患排查整治工作"
         },
         {
           imageUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/W020220520541128729525.jpg",
-          jumpUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/t20220520_316317.html"
+          jumpUrl: "http://zfcxjst.hebei.gov.cn/dtlsj/202205/t20220520_316317.html",
+          alt: "周仲明到河北省住房和城乡建设厅专题调研"
         },
         {
           imageUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/W020220517418513508357.jpg",
-          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220517_316294.html"
+          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220517_316294.html",
+          alt: "河北省住房和城乡建设厅举办“奋进新征程 建功新时代”青年干部交流会"
         },
         {
           imageUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/W020220527577333537379.jpg",
-          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220527_316375.html"
+          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220527_316375.html",
+          alt: "河北省住房和城乡建设厅举办扣好廉洁从政“第一粒扣子”青年干部主题演讲比赛"
         },
         {
           imageUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/W020220523637616449653.jpg",
-          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220523_316327.html"
+          jumpUrl: "http://zfcxjst.hebei.gov.cn/sylbt/202205/t20220523_316327.html",
+          alt: "河北省住房和城乡建设厅召开党组扩大会议"
         }
       ],
       // 新闻中心右侧
@@ -217,6 +227,22 @@ export default {
             background: rgba(0, 0, 0, 0.75);
             box-shadow: 0px 0px 5px 1px #ffffff, 0px 0px 10px 2px #000000;
           }
+          &_alt {
+            width: 100%;
+            position: absolute;
+            bottom: 20px;
+            background: linear-gradient(90deg,#409eff,#409eff64);
+            span {
+              color: #FFFFFF;
+              margin: 5px 10px;
+              font-size: 14px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+            }
+          }
         }
         &_content {
           width: 321px;