tab改为 ul li

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

@@ -437,44 +437,58 @@
     .newsInfor-banner{width: 100%;height: 400px;background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-banner.png");background-position-x: center;}
 
     // tab页
-    .newsInfor-tab-box{
-      padding: 80px 0;
-      .el-tabs__item{width: 255px;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);}
-      .el-tabs__item: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;}
+    /*.newsInfor-tab-box{
+
+      .el-tabs__item{}
+      .el-tabs__item
       .el-tabs__item.is-active{color: #2B5CFD;background-image: linear-gradient(270deg, #FFFFFF 0%, #F4F6FF 100%);}
       .el-tabs__item.is-active:before{background-image: url("~@/assets/images/client/newsInfor/" + "newsInfor-tab-select.svg");}
       // element 默认右侧竖线
       .el-tabs__active-bar,.el-tabs__nav-wrap.is-left::after{display: none;}
-    }
+    }*/
+    // 页面主要内容区域
+    .newsInfor-content-box{
+      padding: 80px 0;
+      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);}
+        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");}
+      }
 
-    // 右侧内容区域
-    .tab-state-box{
-      padding: 0 32px;
-      li{margin-bottom: 40px;}
-      li:last-child{margin-bottom: 0;}
-      //图片
-      img{width:200px;min-height:150px;display: inline-block;margin-right: 24px;border-radius: 8px;overflow: hidden;vertical-align: top;}
-      //内容区域
-      .newsInfor-list-content{
-        width: calc(100% - 224px);
-        display: inline-block;
-        vertical-align: top;
+      // 右侧内容区域
+      .newsInfor-content-ul{
+        padding: 0 32px;
+        width: calc(100% - 290px);
+        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;}
+        //内容区域
+        .newsInfor-list-content{
+          width: calc(100% - 224px);
+          display: inline-block;
+          vertical-align: top;
 
-        h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
-        div{
-          margin-bottom: 16px;
-          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;}
+          h1{@include setFontStyle(-2);color: rgba(0,0,0,0.85);margin-bottom: 8px;}
+          div{
+            margin-bottom: 16px;
+            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;}
+          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;}
         }
-        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;}
-        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

@@ -1,33 +1,31 @@
 <template>
     <div class="client-newsInfor-page">
         <!-- 新闻资讯banner栏 -->
-<!--        <div class="newsInfor-banner"></div>-->
+        <div class="newsInfor-banner"></div>
 
-        <!-- 新闻资讯tab页 -->
-        <div class="client-container newsInfor-tab-box">
-            <el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick" class="client-newsInfor-tab">
-                <el-tab-pane name="1" label="行业动态">
-                    <div class="tab-state-box"  >
-                        <ul v-infinite-scroll="load" :infinite-scroll-disabled="false" :infinite-scroll-immediate="false">
-                            <li v-for="(item,index) in newsList  " :key="index">
-                                <img :src=" item.pic ||newsInforImg" alt="行业动态">
-                                <div class="newsInfor-list-content">
-                                    <h1>{{item.title}}</h1>
-                                    <div><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span></div>
-                                    <p>{{item.intro}}</p>
-                                    <a>了解更多</a>
-                                </div>
-                            </li>
-                            <p v-if="loading" style="margin-top:10px;" class="loading">
-                                <span></span>
-                            </p>
-                            <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
-                        </ul>
+        <!-- 新闻资讯 -->
+        <div class="client-container newsInfor-content-box">
+            <ul class="newsInfor-menu-ul">
+                <li class="active">行业动态</li>
+                <li>媒体关注</li>
+            </ul>
+            <ul v-infinite-scroll="load" :infinite-scroll-disabled="false" :infinite-scroll-immediate="false" class="newsInfor-content-ul">
+                <li v-for="(item,index) in newsList  " :key="index">
+                    <img :src=" item.pic ||newsInforImg" alt="行业动态">
+                    <div class="newsInfor-list-content">
+                        <h1>{{item.title}}</h1>
+                        <div><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span></div>
+                        <p>{{item.intro}}</p>
+                        <a>了解更多</a>
                     </div>
-                </el-tab-pane>
-                <el-tab-pane name="2" label="媒体关注">媒体关注</el-tab-pane>
-            </el-tabs>
+                </li>
+                <p v-if="loading" style="margin-top:10px;" class="loading">
+                    <span></span>
+                </p>
+                <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
+            </ul>
         </div>
+
     </div>
 </template>
 
@@ -110,8 +108,8 @@
     };
 </script>
 <style>
-    .tab-state-box {
-        height: 700px;
+    .newsInfor-content-ul {
+        height: 620px;
         overflow-y: auto;
     }
 </style>