公告, 模板库页面

src/router/index.js

@@ -14,6 +14,7 @@ import TempaltesAll from  '@/views/tempaltes/all.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempaltePreview from  '@/views/tempaltes/preview.vue'
 import TempalteDetail from  '@/views/tempaltes/detail.vue'
+import Notice from  '@/views/notice/index.vue'
 import Svg from  '@/views/svg-icons/index.vue'
 Vue.use(Router)
 
@@ -37,12 +38,13 @@ const router =  new Router({
       ]
     },
     {
+      path: '/notice',
+      name: 'Notice',
+      component: Notice
+    },
+    {
       path: '/svg-icon',
       name: 'svg-icon',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      // component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue')
       component: Svg
     },
     {

src/views/layout/navbar.vue

@@ -3,7 +3,7 @@
   @click-left="onClickLeft"
   @click-right="onClickRight">
     <div slot="right" >
-      <van-icon name="chat-o" size="25"  />
+      <van-icon v-show="showNotice" @click="goNotice" name="chat-o" size="25"  />
       <slot></slot>
     </div>
   </van-nav-bar>
@@ -14,19 +14,35 @@ export default {
   props: ['left-arrow', 'title'],
   data() {
     return {
-      left: false
+      left: false,
+      showNotice: true
     }
   },
   created() {
     this.left = this['left-arrow']
     console.log(this)
   },
+  watch: {
+    $route(route) {
+      console.log(route.path)
+      if(route.path.indexOf('/notice') !== -1) {
+        this.showNotice = false
+      } else {
+        this.showNotice = true
+      }
+    }
+  },
   methods:{
     onClickLeft() {
       this.$router.back()
     },
     onClickRight() {
 
+    },
+    goNotice() {
+      this.$router.push({
+        path: '/notice'
+      })
     }
   }
 }

src/views/notice/index.vue

+<template>
+  <div class="notice">
+    <NavBar title="小V" left-arrow></NavBar>
+    <div class="content-box">
+      <!-- <img src="../../../public/img/ps/noticebg.png" alt=""> -->
+      <div class="notice-item" v-for="(item, index) in list" :key="index">
+        <div class="left">
+          <img src="../../../public/img/ps/icon.png" alt class="icon">
+        </div>
+        <div class="right">
+          <div class="title">
+            {{ item.title}}
+            <div class="time">{{ item.time}}</div>
+          </div>
+          <div class="content">{{ item.content}}</div>
+          <div class="bottom-btn" v-if="item.type === 'news'"> 
+            <span>查看详情>></span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from "@/views/layout/navbar";
+export default {
+  name: "notice",
+  components: {
+    NavBar
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          title: "小V要出新版本了",
+          content:
+            "告诉大家一个好消息，小V给大家准备的100套新模版，就要在12月底入库啦！惊喜不要错过哦～",
+          time: "2018-06-12 14：22"
+        },
+        {
+          id: 2,
+          title: "您的ID12534设备已经绑定成功！",
+          content:
+            "告诉大家一个好消息，小V给大家准备的100套新模版，就要在12月底入库啦！惊喜不要错过哦～",
+          time: "2018-06-12 14：22"
+        },
+        {
+          id: 3,
+          title: "数字理想与哈工大达成战略合作",
+          content:
+            "数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作数字理想与哈工大达战作数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作数字理想与哈工大成合作数字理想与哈工大达成战略合作数字理想与哈工大达成战略合作～",
+          time: "2018-06-12 14：22",
+          type: 'news'
+        }
+      ]
+    };
+  },
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.notice {
+  .content-box {
+    padding-left: 209px;
+    padding-bottom: 35px;
+    text-align: center;
+    .notice-item {
+      padding-top: 56px;
+
+      display: flex;
+      .left {
+        .icon {
+          width: 63px;
+          height: 63px;
+        }
+        padding-right: 12px;
+      }
+      .right {
+        width: 893px;
+        // height: 167px;
+        padding-left: 20px;
+        padding-top: 30px;
+        padding-right: 36px;
+        padding-bottom: 36px;
+        text-align: left;
+        word-break: break-all;
+        box-sizing: border-box;
+        background: rgba(224, 199, 199, 0.12);
+        // opacity: 0.12;
+        color: #333333;
+        border-radius: 3px;
+        position: relative;
+        margin-left: 10px;
+        &::after {
+          content: "";
+          width: 0;
+          height: 0;
+          border-width: 10px 10px 10px 0;
+          border-style: solid;
+          border-color: transparent rgba(224, 199, 199, 0.12) transparent transparent; /*透明 灰 透明 透明 */
+          position: absolute;
+          left: -10px;
+          top: 30px;
+        }
+        .title {
+          font-size: 24px;
+          max-width: 600px;
+        }
+        .time {
+          position: absolute;
+          right: 36px;
+          top: 32px;
+          font-size: 20px;
+          color: rgba(51, 51, 51, 0.7);
+        }
+        .content {
+          padding-top: 24px;
+          line-height: 32px;
+          font-size: 21px;
+          text-align: justify;
+        }
+        .bottom-btn {
+          text-align: right;
+          color: #6E8CF9;
+          padding-top: 28px;
+          font-size:21px;
+        }
+      }
+    }
+    // img {
+    //   width: 50%;
+    // }
+  }
+}
+</style>
+