更新页面

src/assets/style/initial.css

@@ -1,5 +1,19 @@
+.router-link-active {
+  color: #fff;
+}
+ul li {
+  list-style: none;
+}
+body {
+  color:#a5acb3 ;
+  background-color:#f0f2f5;
+}
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-}
+}
+a {
+  text-decoration:none ;
+  color: #a5acb3;
+}

src/router/index.js

@@ -5,26 +5,32 @@ Vue.use(VueRouter)
 
 // 2.创建路由对象
 const router = new VueRouter({
-  // 不要#号mode:'history',
-  // 3.添加具体的路由配置
   routes: [
-    // 设置路径为/时显示index
     {
       name: 'default',
       path: '/',
-      redirect: { name: 'home' }
+      redirect: { name: 'layout' }
     },
     // 4.配置单个路由
     {
-      name: 'home',
-      path: '/home',
-      // 延迟加载组件，要用到这个组件才会加载，节省性能
-      component: () => import('../views/home/index.vue')
-    },
-    {
       name: 'login',
       path: '/login',
-      component: () => import('../views/login/index.vue')
+      component: () => import('@/views/login/index.vue')
+    },
+    {
+      name: 'layout',
+      path: '/layout',
+      component: () => import('@/views/layout/index.vue'),
+      redirect: { name: 'home' },
+      // 添加子路由
+      children: [
+        {
+          name: 'home',
+          // 注意，这里不加/(有参数的情况)。没有参数可以加/，表示在根路径下匹配，那么下面的router-link的to='/home'
+          path: 'home',
+          component: () => import('@/views/home/index.vue')
+        }
+      ]
     }
   ]
 })

src/views/home/index.vue

@@ -1,22 +1,142 @@
 <!--  -->
 <template>
-<div class='home'>
-  <h1>home</h1>
-</div>
+  <div class="home">
+    <div class="top">
+      <div class="user">
+        <div class="box">
+          <img src="@/assets/img/user.png" alt="" />
+        </div>
+        <div class="txt">
+          <h3>Admin</h3>
+          <p><i class="el-icon-user-solid"></i>系统管理员</p>
+        </div>
+      </div>
+      <div class="fast">
+        <h3>快捷入口</h3>
+        <div class="object">
+          <div class="block">
+            <el-carousel
+              trigger="click"
+              height="105px"
+              :loop="false"
+              :autoplay="false"
+              arrow="always"
+              indicator-position="none"
+            >
+              <el-carousel-item>
+                <ul class="info">
+                  <li v-for="item in info1" :key="item.imgUrl">
+                    <div class="ico">
+                      <img src="../../assets/img/object01.png" alt="" />
+                    </div>
+                    <p>{{ item.name }}</p>
+                  </li>
+                </ul>
+              </el-carousel-item>
+              <el-carousel-item>
+                <ul class="info">
+                  <li v-for="item in info2" :key="item.imgUrl">
+                    <div class="ico">
+                      <img src="../../assets/img/object01.png" alt="" />
+                    </div>
+                    <p>{{ item.name }}</p>
+                  </li>
+                </ul>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="conten">
+      <div class="letf">
+        <div class="title">
+          <h3>最新动态</h3>
+          <el-button>查看更多</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>
+            <div class="dian" v-if="1"></div>
+            <div class="dianX" v-else></div>
+            <span>Admin1 保存了 入藏管理 待办事项</span>
+          </li>
+        </ul>
+      </div>
+      <div class="right">
+        <div class="title">
+          <h3>待办事项</h3>
+          <el-button>查看更多</el-button>
+        </div>
+        <div class="none" v-if="0">暂无数据</div>
+        <div class="table" v-else>
+          <el-table
+            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+            :data="tableData"
+            border
+            style="width: 100%"
+          >
+            <el-table-column prop="date" label="事项" width="135">
+            </el-table-column>
+            <el-table-column prop="name" label="状态" width="135">
+            </el-table-column>
+            <el-table-column label="操作">
+              <template #default>
+                <span class="examine"> 查看 </span>
+              </template>
+            </el-table-column>
+          </el-table>
+        <div class="paging">
+          <el-pagination background layout="prev, pager, next" :total="50">
+          </el-pagination>
+        </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
 export default {
   name: 'Home',
-  // import引入的组件需要注入到对象中才能使用
   components: {},
   data () {
-    // 这里存放数据
     return {
-
+      info1: [
+        { name: '藏品征集', imgUrl: '01', push: 'collect' },
+        { name: '藏品登记', imgUrl: '02', push: 'register' },
+        { name: '藏品入藏', imgUrl: '03', push: 'enter' },
+        { name: '藏品提用', imgUrl: '04', push: 'drawings' }
+      ],
+      info2: [
+        { name: '藏品总账', imgUrl: '05', push: 'ledger' },
+        { name: '藏品注销', imgUrl: '06', push: 'logout' },
+        { name: '入库管理', imgUrl: '07', push: 'manage' },
+        { name: '藏品盘核', imgUrl: '08', push: 'check' }
+      ],
+      tableData: [
+        {
+          date: '藏品征集',
+          name: '待审核'
+        },
+        {
+          date: '藏品征集',
+          name: '待审核'
+        },
+        {
+          date: '藏品征集',
+          name: '待审核'
+        },
+        {
+          date: '藏品征集',
+          name: '待审核'
+        },
+        {
+          date: '藏品征集',
+          name: '待审核'
+        }
+      ]
     }
   },
   // 监听属性 类似于data概念
@@ -24,17 +144,11 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {
-
-  },
+  methods: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {
-
-  },
+  created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -46,5 +160,150 @@ export default {
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
-
+.home {
+  .top {
+    width: 100%;
+    height: 190px;
+    background-color: #fff;
+    margin: 30px 0 40px;
+    display: flex;
+    align-items: center;
+    .user {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 390px;
+      height: 110px;
+      border-right: 1px solid #666;
+      .box {
+        width: 80px;
+        height: 80px;
+        border-radius: 50%;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .txt {
+        color: black;
+        height: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-left: 24px;
+      }
+    }
+    .fast {
+      flex: 1;
+      height: 124px;
+      padding-left: 50px;
+      h3 {
+        color: black;
+      }
+      .object {
+        width: 640px;
+        height: 95px;
+        /deep/.el-carousel__arrow {
+          background-color: transparent;
+          i {
+            font-size: 30px;
+            color: #aaaaaa;
+          }
+        }
+        .info {
+          padding: 15px 30px 0px 33px;
+          display: flex;
+          justify-content: space-around;
+          li {
+            cursor: pointer;
+            p {
+              color: black;
+              text-align: center;
+              margin-top: 10px;
+            }
+            .ico {
+              width: 78px;
+              height: 56px;
+              border: 1px solid #666;
+              border-radius: 5px;
+              img {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .conten {
+    .none {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%,-50%);
+      color: black;
+      font-size: 30px;
+    }
+    display: flex;
+    height: 500px;
+    justify-content: space-between;
+    & > div {
+      background-color: #fff;
+      height: 100%;
+      width: 48.5%;
+      padding: 0 30px;
+      .title {
+        padding: 0 20px;
+        height: 90px;
+        border-bottom: 1px solid #666;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        h3 {
+          color: black;
+        }
+      }
+    }
+    .letf {
+      position: relative;
+      overflow: hidden;
+      overflow-y: scroll;
+      .txt {
+        li {
+          align-items: center;
+          display: flex;
+          color: black;
+          margin: 28px;
+          div {
+            margin: 0 10px 0 18px;
+            border: 3px solid #1890ff;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+          }
+          .dianX {
+            border: 3px solid #ccc;
+          }
+        }
+      }
+    }
+    .right {
+      position: relative;
+      .table {
+        margin-top: 30px;
+      }
+      .examine {
+        color: #1890ff;
+        cursor: pointer;
+      }
+      .paging {
+        margin-top: 20px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}
 </style>

src/views/layout/index.vue

@@ -0,0 +1,116 @@
+<!--  -->
+<template>
+<div class='layout'>
+  <div class="top">
+      <div class="left">
+            <img src="@/assets/img/logo.png" alt="">
+            <h2>馆藏管理系统</h2>
+        <router-link to="/layout/home">首页</router-link>
+        <router-link to="/layout/home1">馆藏管理</router-link>
+        <router-link to="/layout/home2">征集品管理</router-link>
+        <router-link to="/layout/home3">馆藏统计</router-link>
+        <router-link to="/layout/home4">系统管理</router-link>
+      </div>
+      <div class="right">
+        <div class="img">
+          <img src="@/assets/img/user.png" alt="">
+        </div>
+          <span>Admin</span>
+      </div>
+  </div>
+  <div class="conten">
+  <Router-view />
+  </div>
+</div>
+</template>
+
+<script>
+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+// 例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  name: 'Layout',
+  // import引入的组件需要注入到对象中才能使用
+  components: {},
+  data () {
+    // 这里存放数据
+    return {
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
+
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.layout{
+  .conten{
+    width: 1142px;
+    margin: 0 auto;
+  }
+  .top {
+    min-width: 1142px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 68px;
+    background-color: #001529;
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    &>img {
+      margin-left: 15px;
+    }
+    h2 {
+      color: #fff;
+      margin-right:30px;
+    }
+    &>a {
+      margin: 0 30px;
+    }
+    &>a:hover {
+      color: #fff;
+    }
+  }
+  .right{
+    display: flex;
+    align-items: center;
+    margin-right: 50px;
+    .img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    &>span {
+      margin-left: 15px;
+    }
+  }
+}
+
+</style>

src/views/login/index.vue

@@ -53,27 +53,12 @@ export default {
       }
     }
   },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
   methods: {
+    // 点击登录
     login () {
-      this.$router.push('/home')
+      this.$router.push('/layout/home')
     }
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created () {},
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
-  beforeCreate () {}, // 生命周期 - 创建之前
-  beforeMount () {}, // 生命周期 - 挂载之前
-  beforeUpdate () {}, // 生命周期 - 更新之前
-  updated () {}, // 生命周期 - 更新之后
-  beforeDestroy () {}, // 生命周期 - 销毁之前
-  destroyed () {}, // 生命周期 - 销毁完成
-  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+  }
 }
 </script>
 <style lang='less' scoped>
@@ -81,7 +66,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100vh;
-  background-color: aquamarine;
+  background-color: #f0f2f5;
   .input {
     position: absolute;
     left: 50%;