新闻资讯第二版---需同步至爬虫项目

src/assets/css/cus-client/cus-client-page.scss

@@ -781,44 +781,49 @@
   /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
   .client-newsInfor-page{
     // banner
-    .newsInfor-banner{width: 100%;height: 400px;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-banner.png");background-position-x: center;}
+    .newsInfor-banner{width: 100%;height: 300px;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-banner.png");background-position-x: center;}
+
+    // 菜单 ul
+    .newsInfor-menu-ul{
+      display: block;
+      margin: 0 auto;
+      text-align: center;
+      background: #F7F9FB;
+      li{display: inline-block;@include setFontStyle(-2);padding:24px 32px;color: rgba(0,0,0,0.64);background: #F7F9FB;transition: all .3s;box-shadow: 0 2px 4px 0 rgba(43,92,253,0.16);border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
+      li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
+      li:hover{
+        transform: scale(1.1);
+      }
+    }
 
     // 页面主要内容区域
     .newsInfor-content-box{
       min-height: 304px;
-      padding: 80px 0;
+      padding: 48px 0 80px;
       ul{display: inline-block;vertical-align: top}
-      // 菜单 ul
-      .newsInfor-menu-ul{
-        li{width: 200px;height: 64px;line-height: 64px;@include setFontStyle(0);color: rgba(0,0,0,0.64);text-align: left;padding: 0;padding-left: 24px;border-bottom: 1px solid rgba(52, 99, 253, 0.08);@include single-line-ellipsis;cursor: pointer}
-        li:before{content: "";width:8px;height:8px;display: inline-block;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-tab-unSelect.svg");margin-right: 16px;
-          vertical-align: middle;}
-        li.active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
-        li.active:before{background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-tab-select.svg");}
-      }
 
       // 右侧内容区域
       .newsInfor-content-ul{
         padding: 0 32px;
-        width: calc(100% - 290px);
+        width: 100%;
         li{margin-bottom: 40px;}
         li:last-child{margin-bottom: 0;}
         //图片
-        img{width:200px;height:150px;display: inline-block;margin-right: 24px;border-radius: 8px;overflow: hidden;vertical-align: top;}
+        img{width:318px;height:178px;display: inline-block;margin-right: 32px;border-radius: 8px;overflow: hidden;vertical-align: top;}
         //内容区域
         .newsInfor-list-content{
-          width: calc(100% - 224px);
+          width: calc(100% - 350px);
           display: inline-block;
           vertical-align: top;
 
           h5{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
           div{
-            margin-bottom: 16px;
+            margin-bottom: 8px;
             i{width: 20px;height: 20px;display: inline-block;margin-right: 14px;vertical-align: middle;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-details-time.svg");}
             i[type="visits"]{background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-details-visits.svg");}
             span{@include setFontStyle(-6);display:inline-block;color: #666;margin-right: 60px;vertical-align: middle;}
           }
-          p{height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 16px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
+          p{height: 72px;@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 32px;text-align: justify;@include multi-line-ellipsis(3);overflow: hidden;}
           a{@include setFontStyle(-6);color: #4A73FD;}
           a:after{content: "";width: 14px;height: 12px;display:inline-block;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-list-icon.svg");margin-left: 8px;}
           a:hover{cursor: pointer;}

src/views/client/newsInfor.vue

@@ -4,10 +4,10 @@
          <div class="newsInfor-banner"></div>
 
         <!-- 新闻资讯 -->
+        <ul class="newsInfor-menu-ul">
+            <li :class="{'active':clicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in homeNewsClassify ">{{item.name}}</li>
+        </ul>
         <div class="client-container newsInfor-content-box">
-            <ul class="newsInfor-menu-ul">
-                <li :class="{'active':clicked===index}" @click="tabSwitch(item,index)" v-for="(item,index) in homeNewsClassify ">{{item.name}}</li>
-            </ul>
             <ul class="newsInfor-content-ul">
                 <li v-for="(item,index) in newsList  " :key="index">
                     <img :src=" item.pic ||newsInforImg" alt="行业动态">