中心资讯和首页资讯图片样式修改

src/views/News/Center.vue

@@ -4,7 +4,7 @@
       <cate :father="zxhdCate"></cate>
       <div class="container">
         <ul class="picNews-ul">
-          <li v-for="(tmp, i) in pictureListArr" :key="i" @click="getInfo(tmp.articleId,tmp.jumppath)">
+          <li v-for="(tmp, i) in pictureListArr" :key="i" @click="getInfo(tmp.articleId,tmp.jumppath)" >
             <div class="picNews-li-tp">
               <img :src="tmp.picFile" alt="" />
             </div>
@@ -12,7 +12,7 @@
               <a :href="tmp.href" @click.prevent="InfoFn(tmp.articleId, tmp.href)" v-html="tmp.title" target="_blank"></a>
             </div>
           </li>
-          <li  style=" height: 0;margin:0" v-for="(i,a) in 4" :key="'a'+a"></li>
+          <li  style=" height: 0;margin:0;border:none" v-for="(i,a) in 4" :key="'a'+a"></li>
         </ul>
         <div class="more"><span @click="lookMore">更多></span></div>
       </div>
@@ -200,6 +200,8 @@ export default {
     justify-content: space-between;
     list-style: none;
     li {
+      overflow: hidden;
+      border: 1px solid #dddddd;
       width: 216px;
       background: #ffffff;
       // box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
@@ -222,6 +224,11 @@ export default {
         font-size: 14px;
         padding: 14px 0;
         a{
+          display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
             color: #414345;
             &:hover{
               text-decoration: none;

src/views/News/index.vue

@@ -13,7 +13,10 @@
                 <div class="tpzx-li-tp">
                   <img :src="tmp.picFile" alt="" />
                 </div>
-                <div class="tpzx-li-bt">{{tmp.title}}</div>
+                <div class="tpzx-li-bt">
+                  <!-- {{tmp.title}} -->
+                  <span  v-html="tmp.title"></span>
+                </div>
               </div>
             </div>
           </div>
@@ -764,6 +767,8 @@ export default {
       display: flex;
       flex-wrap: wrap;
       .tpzx-li {
+        overflow: hidden;
+      border: 1px solid #dddddd;
         // width: 216px;
         width: 24%;
         background: #ffffff;
@@ -784,7 +789,19 @@ export default {
           color: #414345;
           font-size: 14px;
           padding: 14px 0;
-          @include ellipsis;
+          // @include ellipsis;
+          span{
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #414345;
+            &:hover{
+              text-decoration: none;
+              color: #414345;
+            }
+          }
         }
       }
     }