更改结构制作新闻动态、添加新闻

components/NewsScrollList.vue

@@ -5,10 +5,10 @@
             <no-ssr>
                 <vue-seamless-scroll :data="newsData" :class-option="optionTop" class="product-seamless-warp">
                     <ul class="item">
-                        <li v-for="(item,index) in newsData" :key="index">
-                            <nuxt-link :to="item.url">
+                        <li v-for="(item,index) in newsData"  v-if="index<10" :key="item.id">
+                            <!-- <nuxt-link :to="item.url"> -->
                                 {{item.title}}
-                            </nuxt-link>
+                            <!-- </nuxt-link> -->
                         </li>
                     </ul>
                 </vue-seamless-scroll>
@@ -21,7 +21,7 @@
 export default {
     data(){
         return {
-            newsData:this.$store.state.newsListData,
+            newsData:this.$store.state.news.newsData,
         }
     },
     computed:{

components/index/News.vue

@@ -12,8 +12,8 @@
         </dt>
         <dd>
             <ul>
-                <li v-for="(item, index) in dataSource" v-if="index<10" :key="index">
-                    <a :href="item.url" :title="item.title">
+                <li v-for="(item,index) in dataSource" v-if="index<10" :key="item.id">
+                    <a href="#" :title="item.title">
                         {{item.title}}
                     </a>
                     {{item.time}}

pages/index.vue

@@ -109,7 +109,7 @@ export default {
         return {
             productData:this.$store.state.productData,
             qualificationsData:this.$store.state.qualificationsData,
-            newsData:this.$store.state.newsListData,
+            newsData:this.$store.state.news.newsData,
             engineeringData:this.$store.state.engineeringData,
         }
     },
@@ -131,7 +131,7 @@ export default {
                 limitMoveNum: 4
             }
         }
-    },
+    }
 }
 </script>
 

pages/news.vue

 <template>
-    <div>新闻动态</div>
+    <div class="clearfix content">
+        <div class="left-con-wrap">
+            <ProductImgList />
+        </div>
+        <div class="right-con-wrap">   
+            <nuxt-child :key="$route.params.id"/>
+        </div>
+    </div>
 </template>
+<script>
+import ProductImgList from '~/components/ProductImgList.vue'
+
+export default {
+    components:{
+        NewsScrollList,
+        ProductImgList,
+    },
+    asyncData({ store }) {
+        return { newsData: store.state.news.newsData}
+    }
+}
+</script>
+<style lang="scss">
+.left-con-wrap{
+    .column-list{
+        width: 210px;
+        padding-top: 15px;
+        text-align: left;
+        dt{
+            height: 18px;
+            background: url(~assets/images/11019921.gif) no-repeat left top;
+            font-size: 14px;
+            font-weight: bold;
+            color: #004483;
+            padding: 3px 0px 0px 12px;
+        }
+        dd{
+            border: 1px solid #E1E1E1;
+            font-size: 14px;
+            text-align: center;
+            padding: 8px;
+            div{
+                height: 20px;
+                border-bottom: 1px solid #EEEEEE;
+                font-weight: bold;
+                padding-top: 4px;
+                text-align: left;
+                padding-left: 20px;
+                a{
+                    color:#004483;
+                    &.nuxt-link-exact-active{
+                        color:#0982B9;
+                    }
+                }  
+            }
+        }
+    }
+}
+.right-con-wrap{
+    min-height: 600px;
+    text-align: left;
+    padding-top: 15px;
+    .currently-node{
+        height: 25px;
+        background: url(~assets/images/11019918.gif) no-repeat 5px top;
+        padding: 2px 0px 0px 20px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #004483;
+    }
+    .currently-text {
+        padding: 20px;
+        font-size: 14px;
+        line-height: 150%;
+        color: #000;
+    }
+}
+</style>

pages/news/_id.vue

+<template>
+    <div>
+        <div class="currently-node">{{name}}</div>
+        <div class="currently-text" v-html="detail"></div>
+    </div>
+</template>
+<script>
+export default {
+    asyncData({ params, store, error }) {
+        const item = store.state.newsData.find((item) => String(item.id) === params.id)
+        if (!item) {
+            return error({ message: 'User not found', statusCode: 404 })
+        }
+        return item
+    },
+    head() {
+        return {
+            title: this.name
+        }
+    }
+}
+</script>
+

pages/news/index.vue

+<template>
+    <div>
+        <div class="currently-node">新闻动态</div>
+        <div class="currently-text">
+            <p style="text-align: center">
+                <span style="font-size:16px">公司介绍</span>
+            </p>         
+        </div>
+    </div>
+</template>

store/index.js

 export const state = () => ({
-    newsListData: [
-        {
-            title:'公司通过《职业健康安全管理体系》认证',
-            url:'/html/report/18060087-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'八达岭长城景区用水消毒工程顺利完工',
-            url:'/html/report/18060087-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'天绿科技造福人类的旗帜恒久飘扬',
-            url:'/html/report/18060087-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'农村供水消毒技术及设备的选择与应用',
-            url:'/html/report/18060087-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'智能型柜式纯二氧化氯发生器参展水博会受好评',
-            url:'/html/report/18060087-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'喜报：中标大兴区村镇供水消毒设备采购及运行维护项目',
-            url:'/html/report/16080002-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'喜报：中标唐山市2016年度地下水治理设备采购标',
-            url:'/html/report/16080002-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'进军“农村饮水健康行动项目消毒设备工程”',
-            url:'/html/report/16080002-1.htm',
-            time:'2018-06-04',
-        },
-        {
-            title:'喜报：祝贺我公司成功中标“深州市2015年第一批农村饮水安全工程”项目',
-            url:'/html/report/16080002-1.htm',
-            time:'2018-06-04',
-        }
-    ],
     engineeringData:[
         {
             title:'北京朝阳区农村改水',