完善新闻动态

assets/css/common.scss

@@ -35,6 +35,6 @@ ul, li, form, dd, dt, dl {
     border-right: 1px solid #E1E1E1;
 }
 .right-con-wrap{
-    width: 720px;
+    width: 736px;
     float: left;
 }
\ No newline at end of file

pages/news.vue

@@ -2,6 +2,7 @@
     <div class="clearfix content">
         <div class="left-con-wrap">
             <ProductImgList />
+            <ContactUs />
         </div>
         <div class="right-con-wrap">   
             <nuxt-child :key="$route.params.id"/>
@@ -10,10 +11,12 @@
 </template>
 <script>
 import ProductImgList from '~/components/ProductImgList.vue'
+import ContactUs from '~/components/ContactUs.vue'
 
 export default {
     components:{
         ProductImgList,
+        ContactUs,
     },
     asyncData({ store }) {
         return { newsData: store.state.news.newsData}
@@ -58,17 +61,37 @@ export default {
 }
 .right-con-wrap{
     min-height: 600px;
-    text-align: left;
     padding-top: 15px;
+    text-align: center;
     .currently-node{
         height: 25px;
+        text-align: left;
         background: url(~assets/images/11019918.gif) no-repeat 5px top;
         padding: 2px 0px 0px 20px;
         font-size: 14px;
         font-weight: bold;
         color: #004483;
     }
+    .currently-title{
+        height: 25px;
+        width:690px;
+        margin:0 auto;
+        border-bottom: 1px solid #A0A0A0;
+        padding-top: 15px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #004483;
+    }
+    .currently-time{
+        margin: 12px 0px;
+        font-size: 12px;
+        color: #808080;
+        text-align: center;
+    }
     .currently-text {
+        width:690px;
+        margin:0 auto;
+        text-align:left;
         padding: 20px;
         font-size: 14px;
         line-height: 150%;

pages/news/_id.vue

 <template>
     <div>
-        <div class="currently-node">{{name}}</div>
-        <div class="currently-text" v-html="detail"></div>
+        <div class="currently-node">新闻动态</div>
+        <div class="currently-title">{{title}}</div>
+        <div class="currently-time">发布时间：{{time}}</div>
+        <div class="currently-text" v-html="con"></div>
     </div>
 </template>
 <script>
 export default {
     asyncData({ params, store, error }) {
-        const item = store.state.newsData.find((item) => String(item.id) === params.id)
+        const item = store.state.news.newsData.find((item) => String(item.id) === params.id)
+        console.log(item)
         if (!item) {
             return error({ message: 'User not found', statusCode: 404 })
         }
@@ -15,7 +18,6 @@ export default {
     },
     head() {
         return {
-            title: this.name
         }
     }
 }

pages/news/index.vue

 <template>
-    <div>
+    <div class="currently-wrap">
         <div class="currently-node">新闻动态</div>
-        <div class="currently-text">
-            <div class="listItem" v-for="(item, index) in 20" :key="index">
-                <nuxt-link :to="'/announcements/' + index" class="itemTitle">以前有人说刹车油要两到三年更换，我在第四次保养时一并买了刹车以前有人说刹车油要两到三年更换，我在第四次保养时一并买了刹车</nuxt-link>
-                <div class="itemContent">
-                    <p class="contentText">以前有人说刹车油要两到三年更换，我在第四次保养时一并买了刹车油准备更换。然而保养时老板告诉然而保养时老板告诉然而保养时老板告诉然而保养时老板告诉然而保养时老板告诉</p>
-                    <span class="contentTime">2018-07-26</span>
-                </div>
-            </div>
+        <div class="currently-list">
+            <ul>
+                <li class="listItem" v-for="(item, index) in newData" :key="index">
+                    <nuxt-link :to="'/news/' + item.id" class="itemTitle">{{item.title}}</nuxt-link>
+                    <span class="contentTime">&nbsp;&nbsp;{{item.time}}</span>
+                </li>
+            </ul>
             <el-pagination
                 class="elPage"
                 background
@@ -16,7 +15,7 @@
                 prev-text="上一页"
                 next-text="下一页"
                 @current-change="handleCurrentChange"
-                :total="1000">
+                :total="newData.length">
             </el-pagination>
         </div>
     </div>
@@ -25,7 +24,8 @@
 export default {
     data(){
         return{
-            currentPage:5
+            newData:this.$store.state.news.newsData,
+            currentPage:1
         }
     },
     methods:{
@@ -35,3 +35,32 @@ export default {
     }
 }
 </script>
+<style lang="scss" scoped>
+.currently-list{
+    text-align:left;
+    width:690px;
+    margin:0 auto;
+    li{
+        height: 28px;
+        line-height: 28px;
+        font-size: 12px;
+        background: url(~/assets/images/11019922.gif) repeat-x left bottom;
+        padding-left:25px;
+        position: relative;
+        color:#000;
+        &:after{
+            content: "";
+            position: absolute;
+            left:5px;
+            top:-1px;
+            width:9px;
+            height:28px;
+            background: url(~/assets/images/11019911.gif) no-repeat center center;
+        }
+        a{
+            color: #004483;
+        }
+    }
+}
+</style>
+