'新闻资讯'

pages/index.vue

@@ -80,13 +80,17 @@
     <div class="index-founder">
       <div class="founder-content-box">
         <div class="founder_img wow animate__animated animate__fadeInLeft">
-          <img src="~/assets/images/index/img_boss.png" alt="">
+          <img src="~/assets/images/index/img_boss2.png" alt="">
+          <div class="name founder-item">
+            <!-- <span class="dot"></span> -->
+            <p>中德智慧创始人</p>
+          </div>
         </div>
         <div class="founder_content">
-          <div class="name founder-item">
+          <!-- <div class="name founder-item">
             <span class="dot"></span>
             <p>中德智慧创始人</p>
-          </div>
+          </div> -->
           <p class="title founder-item wow animate__animated animate__fadeInLeft">培养优质思维模式，建构思维“芯”</p>
           <p
             class="desc founder-item wow animate__animated animate__fadeInDown"
@@ -1414,6 +1418,17 @@ export default {
 <style lang="scss">
 @import "~static/common/style.sass";
 
+@media (max-width: 1680px) {
+  .container {
+    .found-right {
+      display: none;
+    }
+    .index-founder {
+      background-image: none;
+    }
+  }
+}
+
 .container {
   width: 100%;
   // background: #f0f2f5;
@@ -1504,7 +1519,6 @@ ul.cate-nav {
   }
 }
 
-
 .tabs {
   .tab-box {
     display: flex;
@@ -1543,7 +1557,6 @@ ul.cate-nav {
   }
 }
 
-
 .cate-list {
   display: flex;
   align-items: center;
@@ -1667,60 +1680,75 @@ ul.cate-nav {
   background-repeat: no-repeat, no-repeat;
   background-position: 0px 158px, 260px 550px;
   background-color: #f7fbff;
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: $theme_color_fu;
+    // span {
+    //   display: inline-block;
+    //   width: 12px;
+    //   height: 12px;
+    //   border-radius: 50%;
+    //   background: linear-gradient(
+    //     180deg,
+    //     rgba(250, 117, 62, 1) 0%,
+    //     rgba(246, 85, 19, 1) 100%
+    //   );
+    //   box-shadow: 0px 2px 7px 0px rgba(249, 107, 50, 0.8);
+    //   margin-right: 6px;
+    // }
+  }
   .founder-content-box {
-    margin-left: 320px;
     max-width: 1200px;
+    margin: 0 auto;
     z-index: 10;
     display: flex;
     .founder_content {
+      width: 863px;
+      background: #FFFFFF;
+      box-shadow: 0px 2px 17px 0px #D0E7FD;
+      border-radius: 30px 12px 86px 12px;
+
       margin-left: 30px;
-      padding-top: 32px;
+      padding: 40px 30px 30px 53px;
       .founder-item {
         margin-bottom: 14px;
       }
-      .name {
-        display: flex;
-        align-items: center;
-        font-size: 24px;
+      .title {
+        height: 48px;
+        font-size: 34px;
         font-family: PingFangSC-Medium, PingFang SC;
         font-weight: 500;
-        color: $theme_color_fu;
-        span {
-          display: inline-block;
-          width: 12px;
-          height: 12px;
-          border-radius: 50%;
-          background: linear-gradient(
-            180deg,
-            rgba(250, 117, 62, 1) 0%,
-            rgba(246, 85, 19, 1) 100%
-          );
-          box-shadow: 0px 2px 7px 0px rgba(249, 107, 50, 0.8);
-          margin-right: 6px;
-        }
-      }
-      .title {
-        line-height: 58px;
-        font-size: 42px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
-        color: #262626;
+        color: #333333;
+        line-height: 48px;
       }
       .desc {
-        color: #6e6f75;
         font-size: 18px;
-        line-height: 32px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #666666;
+        line-height: 36px;
         margin-bottom: 30px;
+        text-indent: 2em;
       }
       .btn {
-        width: 182px;
         height: 46px;
         line-height: 46px;
+        background: #0D5CFA;
+        border-radius: 24px;
+        width: 182px;
         background: $theme_color_fu;
         box-shadow: 0px 4px 11px 0px rgba(115, 161, 253, 0.95);
         border-radius: 24px;
         text-align: center;
         font-size: 22px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #FFFFFF;
         a {
           color: #ffffff;
         }

pages/news/index.vue

@@ -9,23 +9,26 @@
     <section class="content w1200">
       <div class="aside">
         <ul class="news-cate-list">
-          <li v-for="(item, index) in newsNav" :key="index" class="news-cate-item">
+          <li v-for="(item, index) in $store.state.newsNav" :key="index" class="news-cate-item">
             <div class="icon"><img :src="item.icon" alt="" srcset=""></div>
             <div :class="['title', cateId == item.id ? 'active' : '']" @click="changeCate(item, index)">{{ item.type }}</div>
           </li>
         </ul>
       </div>
       <div class="news-main">
-        <section class="news-list">
+        <section class="empty-content" v-if="isEmpty">
+          <p>暂无新闻~</p>
+        </section>
+        <section class="news-list" v-else>
           <div class="news-list-item" v-for="(item, index) in newsList" :key="index">
             <div class="news-list-left">
-              <nuxt-link :to="{ name: 'news-newsView-id', params: { id: cateId }, query: { cateId: cateId } }">
+              <nuxt-link :to="{ name: 'news-newsView-id', params: { id: item.id }, query: { cateId: item.typeId } }">
                 <img :src="item.articleImg" alt="">
               </nuxt-link>
             </div>
             <div class="news-list-right">
               <div class="news-list-title">
-                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: cateId }, query: { cateId: cateId } }">
+                <nuxt-link :to="{ name: 'news-newsView-id', params: { id: item.id }, query: { cateId: item.typeId } }">
                 {{ item.articleTitle }}
                 </nuxt-link>
               </div>
@@ -61,38 +64,11 @@ export default {
   name: 'news',
   data() {
     return {
+      isEmpty: false,
       currentPage: 1,
       total: 0,
+      cateId: '',
       newsList: [
-        {
-          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 迁标题中德智迁标题中德智慧乔迁……..',
-          time: '2020-6-29',
-          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
-          imgUrl: require('~/assets/images/news/img.png'),
-          id: '1',
-          cateId: '1',
-        },
-        {
-          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 慧乔迁……..',
-          time: '2020-6-29',
-          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
-          imgUrl: require('~/assets/images/news/img.png'),
-          id: '1'
-        },
-        {
-          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 慧乔迁……..',
-          time: '2020-6-29',
-          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
-          imgUrl: require('~/assets/images/news/img.png'),
-          id: '1'
-        },
-        {
-          title: '中德智慧乔迁逻辑狗智慧乔迁智慧乔迁标题中德智 慧乔迁……..',
-          time: '2020-6-29',
-          content: '个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人的何时去个人 的人的何时去个人的何时去…… ',
-          imgUrl: require('~/assets/images/news/img.png'),
-          id: '1'
-        }
       ]
     }
   },
@@ -103,19 +79,21 @@ export default {
   },
   async asyncData({ params, query, store }) {
     // 获取分类列表
-    let newsNav = [];
-    const { data } = await axios(`${store.state.wordpressAPI}/official-api/article/type`);
-    if(data.status === 200) {
-      newsNav = data.data;
-    }
-    console.log(newsNav);
-    let cateId = query.cateId || newsNav[0].id;
-    return {
-      cateId,
-      newsNav
-    }
+    // let newsNav = [];
+    // const { data } = await axios(`${store.state.wordpressAPI}/official-api/article/type`);
+    // if(data.status === 200) {
+    //   newsNav = data.data;
+    // }
+    // console.log(newsNav);
+    // let cateId = query.cateId || newsNav[0].id;
+    // return {
+    //   cateId,
+    //   newsNav
+    // }
   },
   created() {
+    let cateId = this.$route.query.cateId || this.$store.state.newsNav[0].id;
+    this.cateId = cateId;
   },
   mounted() {
     if (process.browser) {
@@ -137,6 +115,11 @@ export default {
       if(data.status === 200) {
         this.total = data.data.total;
         this.newsList = data.data.entityList || [];
+        if(this.newsList.length <= 0) {
+          this.isEmpty = true;
+        } else {
+          this.isEmpty = false;
+        }
       }
     },
     handleSizeChange() {
@@ -280,6 +263,15 @@ export default {
         }
       }
     }
+    .empty-content {
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #797979;
+      line-height: 26px;
+      margin-bottom: 300px;
+      padding: 40px 0 0 90px;
+    }
     .news-pagination {
       margin-top: 80px;
       .el-pagination.is-background {

store/index.js

@@ -7,21 +7,21 @@ import axios from 'axios'
 export const state = () => ({
 	wordpressAPI: 'https://open.zaojiao.net',
 	newsNav: [
-		{
-			icon: require('~/assets/images/news/cate_01.png'),
-			title: '中德资讯',
-			id: 1
-		},
-		{
-			icon: require('~/assets/images/news/cate_02.png'),
-			title: '行业动态',
-			id: 2
-		},
-		{
-			icon: require('~/assets/images/news/cate_03.png'),
-			title: '门店动态',
-			id: 3
-		}
+		// {
+		// 	icon: require('~/assets/images/news/cate_01.png'),
+		// 	title: '中德资讯',
+		// 	id: 1
+		// },
+		// {
+		// 	icon: require('~/assets/images/news/cate_02.png'),
+		// 	title: '行业动态',
+		// 	id: 2
+		// },
+		// {
+		// 	icon: require('~/assets/images/news/cate_03.png'),
+		// 	title: '门店动态',
+		// 	id: 3
+		// }
 	],
 }) 
 
@@ -36,6 +36,12 @@ export const getters = {
 
 export const actions = {
 	async nuxtServerInit({commit,state,req}) {
+    let newsNav = [];
+    const { data } = await axios(`${state.wordpressAPI}/official-api/article/type`);
+		if(data.status === 200) {
+      newsNav = data.data;
+		}
+		commit('setNav', newsNav);
 		
 		// //产品导航
 		// 	let headProdNav = await axios(`${state.wordpressAPI}/proCategory/showAll/main`);