更新首页

src/assets/style/initial.css

@@ -17,3 +17,7 @@ a {
   text-decoration:none ;
   color: #a5acb3;
 }
+.ww{
+  width: 1142px;
+  margin: 0 auto;
+}

src/router/index.js

@@ -29,7 +29,14 @@ const router = new VueRouter({
           // 注意，这里不加/(有参数的情况)。没有参数可以加/，表示在根路径下匹配，那么下面的router-link的to='/home'
           path: 'home',
           component: () => import('@/views/home/index.vue')
+        },
+        {
+          name: 'homeNews',
+          // 注意，这里不加/(有参数的情况)。没有参数可以加/，表示在根路径下匹配，那么下面的router-link的to='/home'
+          path: 'homeNews/:id',
+          component: () => import('@/views/home/News.vue')
         }
+
       ]
     }
   ]

src/views/home/News.vue

@@ -0,0 +1,162 @@
+<!--  -->
+<template>
+  <div class="News">
+    <div class="top">
+      <div class="ww">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item>消息中心</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+    </div>
+    <div class="conten ww">
+      <ul class="left">
+        <li :class="{ active: num }" @click="num = true">最新动态</li>
+        <li :class="{ active: !num }" @click="num = false">代办事项</li>
+      </ul>
+      <div class="right">
+        <div class="title">
+          <span
+            @click="changeTime(index)"
+            v-for="(item, index) in listTi"
+            :key="index"
+            :class="{ active: timeInd == index ? true : '' }"
+            >{{ item }}</span
+          >
+        </div>
+        <ul>
+          <li v-for="i in 10" :key="i">
+            <span class="time">8月10日 18：01</span>
+            <div class="dian" v-if="1"></div>
+            <div class="dianX" v-else></div>
+            <span>Admin1 保存了 入藏管理 待办事项</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: 'News',
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+      timeInd: 0,
+      num: true,
+      listTi: ['全部', '今日', '本月']
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    // 判断是动态还是事项
+    judge () {
+      if (this.$route.params.id === '1') this.num = true
+      else this.num = false
+    },
+    // 选择时间
+    changeTime (index) {
+      this.timeInd = index
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.judge()
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.News {
+  .top {
+    width: 100%;
+    height: 40px;
+    background-color: #fff;
+    .ww {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+  }
+  .conten {
+    display: flex;
+    margin-top: 25px;
+    height: 680px;
+    background-color: #fff;
+    .left {
+      .active {
+        background-color: #e6f7ff;
+        border-right: 2px solid #1890ff;
+        color: #1890ff;
+      }
+      padding-top: 20px;
+      width: 230px;
+      height: 100%;
+      border-right: 1px solid #ccc;
+      li {
+        cursor: pointer;
+        padding-left: 58px;
+        color: black;
+        height: 45px;
+        line-height: 45px;
+      }
+    }
+    .right {
+      padding: 30px 0 0 58px;
+      .title {
+        margin-left: 20px;
+      }
+      .active {
+        text-decoration: underline;
+        font-weight: 700;
+        color: #1890ff;
+      }
+      span {
+        color: black;
+        font-size: 18px;
+        margin: 0 15px;
+      }
+      ul {
+        .time {
+          color: #999;
+        }
+        li {
+          align-items: center;
+          display: flex;
+          color: black;
+          margin: 26px 0 26px 0;
+          div {
+            margin: 0 10px 0 18px;
+            border: 3px solid #1890ff;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+          }
+          .dianX {
+            border: 3px solid #ccc;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <!--  -->
 <template>
-  <div class="home">
+  <div class="home ww">
     <div class="top">
       <div class="user">
         <div class="box">
@@ -52,12 +52,12 @@
       <div class="letf">
         <div class="title">
           <h3>最新动态</h3>
-          <el-button>查看更多</el-button>
+          <el-button @click="$router.push('homeNews/1')">查看更多</el-button>
         </div>
        <div class="none" v-if="0">暂无数据</div>
         <ul class="txt" v-else>
           <li v-for="i in 20" :key="i">
-            <span>8月10日 18：01</span>
+            <span class="time">8月10日 18：01</span>
             <div class="dian" v-if="1"></div>
             <div class="dianX" v-else></div>
             <span>Admin1 保存了 入藏管理 待办事项</span>
@@ -67,7 +67,7 @@
       <div class="right">
         <div class="title">
           <h3>待办事项</h3>
-          <el-button>查看更多</el-button>
+          <el-button @click="$router.push('homeNews/2')">查看更多</el-button>
         </div>
         <div class="none" v-if="0">暂无数据</div>
         <div class="table" v-else>
@@ -270,6 +270,9 @@ export default {
       overflow: hidden;
       overflow-y: scroll;
       .txt {
+        .time {
+          color: #999;
+        }
         li {
           align-items: center;
           display: flex;

src/views/layout/index.vue

@@ -18,9 +18,7 @@
           <span>Admin</span>
       </div>
   </div>
-  <div class="conten">
   <Router-view />
-  </div>
 </div>
 </template>
 
@@ -30,6 +28,7 @@
 
 export default {
   name: 'Layout',
+
   // import引入的组件需要注入到对象中才能使用
   components: {},
   data () {
@@ -64,10 +63,6 @@ export default {
 </script>
 <style lang='less' scoped>
 .layout{
-  .conten{
-    width: 1142px;
-    margin: 0 auto;
-  }
   .top {
     min-width: 1142px;
     display: flex;