新闻资讯

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

@@ -839,44 +839,48 @@
   /********  describe: 新闻资讯  author: TX  date:2020-08-10  ********/
   .client-newsInfor-page{
     // banner
-    .newsInfor-banner{width: 100%;height: 400px;background-image: url("~static/images/client/newsInfor/newsInfor-banner.png");background-position-x: center;}
+    .newsInfor-banner{width: 100%;height: 300px;background-image: url("~static/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("~static/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("~static/images/client/newsInfor/newsInfor-tab-select.svg");}
-      }
 
       // 右侧内容区域
       .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;}
+        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("~static/images/client/newsInfor/newsInfor-details-time.svg");}
             i[type="visits"]{background-image: url("~static/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("~static/images/client/newsInfor/newsInfor-list-icon.svg");margin-left: 8px;}
           a:hover{cursor: pointer;}

pages/news/index.vue

@@ -1,14 +1,38 @@
 <template>
+  <div class="client-newsInfor-page">
+    <!-- 新闻资讯banner栏 -->
+    <div class="newsInfor-banner"></div>
 
-  <div>
-    <h2>News Index page123</h2>
-    <ul>
-      <!-- vue中简单方式实现路由 -->
-      <li><nuxt-link to="/news">NEWS</nuxt-link></li>
+    <!-- 新闻资讯 -->
+    <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>
-
+    <div class="client-container newsInfor-content-box">
+      <ul class="newsInfor-content-ul">
+        <li v-for="(item,index) in newsList  " :key="index">
+          <img :src=" item.pic ||newsInforImg" alt="行业动态">
+          <div class="newsInfor-list-content">
+            <h5>{{item.title}}</h5>
+            <div><i></i><span>{{item.startTime}}</span><i type="visits"></i><span>{{item.visits}}</span>
+            </div>
+            <p>{{item.intro}}</p>
+            <a @click="checkInfo(item)">了解更多</a>
+          </div>
+        </li>
+      </ul >
+      <div class="client-el-pagination">
+        <el-pagination
+          background
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+          :current-page.sync="currentPage"
+          :page-size="pageSize"
+          :total="totalLists">
+        </el-pagination>
+      </div>
+    </div>
 
+  </div>
 </template>
 
 <script>
@@ -21,12 +45,56 @@
     },
     data() {
       return {
-
+        clicked:0,
+        newsClassifyId:   null,
+        newsInforImg:     require(`~/static/images/client/newsInfor/newsInfor-list-img.png`),
+        newsList:         [], //后端返回的数组
+        homeNewsClassify: [],
+        totalLists:         0,
+        currentPage:        1,
+        pageSize:           5,
       };
     },
     computed:   {},
     methods:    {
+      handleCurrentChange(val){
+        this.currentPage = val;
+        this.getMessage();
+
+      },
+      tabSwitch(data,index){
+        this.clicked = index
+        this.newsClassifyId = data.newsClassifyId
+        this.getMessage();
+
+      },
+      getMessage() {
+        let req = {
+          newsClassifyId:  this.newsClassifyId,
+          page:           this.currentPage,
+          size:            this.pageSize,
+        };
+       /* homeNewsList(req).then(res => {
+          if (res.code === 0) {
+            this.newsList = res.data.data;
+            this.totalLists = res.data.total
+          }
+        });*/
+
+      },
+      getHomeNewsClassify() {
+        /*homeNewsClassifyList().then(res => {
+          if (res.code === 0) {
+            this.homeNewsClassify = res.data;
+            this.newsClassifyId = res.data[0].newsClassifyId
+            this.getMessage(res.data[0].newsClassifyId);
+          }
+        });*/
 
+      },
+     /* checkInfo(data) {
+        this.$router.push({ name: 'newsInforDetails', params: data });
+      },*/
     },
     created() {
 

static/images/client/newsInfor/newsInfor-details-time.svg

@@ -1,13 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>时间</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="新闻资讯" transform="translate(-841.000000, -593.000000)">
-            <g id="时间" transform="translate(841.000000, 593.000000)">
-                <circle id="椭圆形" fill="#E8ECFF" cx="10" cy="10" r="10"></circle>
-                <rect id="矩形" fill="#7998FF" transform="translate(10.284521, 7.530476) rotate(14.000000) translate(-10.284521, -7.530476) " x="9.28452088" y="3.5304764" width="2" height="8" rx="1"></rect>
-                <rect id="矩形备份" fill="#4A73FD" transform="translate(12.500000, 10.500000) rotate(90.000000) translate(-12.500000, -10.500000) " x="11.5" y="6.5" width="2" height="8" rx="1"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="10" cy="10" r="9" fill="#E8ECFF"/>
+    <rect width="2" height="8" x="9.285" y="3.53" fill="#7998FF" rx="1" transform="rotate(14 10.285 7.53)"/>
+    <rect width="2" height="8" x="11.5" y="6.5" fill="#4A73FD" rx="1" transform="rotate(90 12.5 10.5)"/>
+  </g>
+</svg>