新闻资讯页面样式

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

@@ -441,10 +441,43 @@
     .newsInfor-banner{width: 100%;height: 400px;background: #4d90fe;}
 
     // tab页
-    .newsInfor-tab-box{}
+    .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;}
+      .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;}
+    }
 
     // 右侧内容区域
-    .tab-state-box{}
+    .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;
+
+        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{@include setFontStyle(-4);color: rgba(0,0,0,0.65);line-height: 24px;margin-bottom: 16px;}
+        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/assets/images/client/newsInfor/newsInfor-list-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+  <g fill="#4A73FD">
+    <path d="M5.7916533,10.7026281 C5.96786445,10.8907071 6.0395084,11.1717724 5.97872724,11.436535 C5.91794608,11.7012976 5.73433127,11.9079773 5.49927925,11.976209 C5.26422722,12.0444408 5.01482988,11.9634575 4.84806243,11.7647485 L0.196558167,6.52402306 C0.070759795,6.38344689 0,6.19208864 0,5.99246377 C0,5.7928389 0.070759795,5.60148065 0.196558167,5.46090448 L4.84806243,0.22017906 C5.10862786,-0.0733930232 5.53108787,-0.0733930196 5.79165329,0.220179068 C6.05221871,0.513751156 6.05221872,0.989725553 5.7916533,1.28329764 L1.60529946,5.99296288 L5.7916533,10.7016299 L5.7916533,10.7026281 Z" transform="matrix(-1 0 0 1 6 0)"/>
+    <path d="M13.9787272,11.436535 C13.9179461,11.7012976 13.7343313,11.9079773 13.4992792,11.976209 C13.2642272,12.0444408 13.0148299,11.9634575 12.8480624,11.7647485 L8.19655817,6.52402306 C8.07075979,6.38344689 8,6.19208864 8,5.99246377 C8,5.7928389 8.07075979,5.60148065 8.19655817,5.46090448 L12.8480624,0.22017906 C13.1086279,-0.0733930232 13.5310879,-0.0733930196 13.7916533,0.220179068 C14.0522187,0.513751156 14.0522187,0.989725553 13.7916533,1.28329764 L9.60529946,5.99296288 L13.7916533,10.7016299 C13.9678644,10.8907071 14.0395084,11.1717724 13.9787272,11.436535 Z" transform="matrix(-1 0 0 1 22 0)"/>
+  </g>
+</svg>

src/views/client/newsInfor.vue

@@ -10,7 +10,16 @@
                     <div class="tab-state-box">
                         <ul>
                             <li>
-                                <img>
+                                <img :src="newsInforImg" alt="行业动态">
+                                <div class="newsInfor-list-content">
+                                    <h1>企业为什么需要微课</h1>
+                                    <div><i></i><span>2020-08-03</span><i type="visits"></i><span>2000</span></div>
+                                    <p>“在美国谷歌工作期间，我亲眼见到容器技术的先进性，由此产生了创业的想法。”在采访中，才云科技创始人兼CEO、原谷歌资深软件工程师张鑫向创业邦这样介绍道。他曾作为技术带头人从事谷歌容器化集群管理系统的研发，自动化管理 95% 以上的</p>
+                                    <a>了解更多</a>
+                                </div>
+                            </li>
+                            <li>
+                                <img :src="newsInforImg" alt="行业动态">
                                 <div class="newsInfor-list-content">
                                     <h1>企业为什么需要微课</h1>
                                     <div><i></i><span>2020-08-03</span><i type="visits"></i><span>2000</span></div>
@@ -35,6 +44,7 @@
         },
         data() {
             return {
+                newsInforImg:  require(`@/assets/images/client/newsInfor/newsInfor-list-img.png`),
             };
         },
         components: {