更新页面

src/assets/style/initial.css

@@ -1,12 +1,11 @@
-.router-link-active {
-  color: #fff;
-}
+
 ul li {
   list-style: none;
 }
 body {
   color:#a5acb3 ;
   background-color:#f0f2f5;
+  overflow: hidden;
 }
 * {
   margin: 0;

src/router/index.js

@@ -22,21 +22,45 @@ const router = new VueRouter({
       path: '/layout',
       component: () => import('@/views/layout/index.vue'),
       redirect: { name: 'home' },
-      // 添加子路由
+      // 首页添加子路由
       children: [
         {
           name: 'home',
-          // 注意，这里不加/(有参数的情况)。没有参数可以加/，表示在根路径下匹配，那么下面的router-link的to='/home'
           path: 'home',
+          meta: { myInd: 0 },
           component: () => import('@/views/home/index.vue')
         },
         {
           name: 'homeNews',
-          // 注意，这里不加/(有参数的情况)。没有参数可以加/，表示在根路径下匹配，那么下面的router-link的to='/home'
           path: 'homeNews/:id',
+          meta: { myInd: 0 },
           component: () => import('@/views/home/News.vue')
+        },
+        // 馆藏子路由
+        {
+          name: 'holding0',
+          path: 'holding0',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding0.vue')
+        },
+        {
+          name: 'holding1',
+          path: 'holding1',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding1.vue')
+        },
+        {
+          name: 'holding2',
+          path: 'holding2',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding2.vue')
+        },
+        {
+          name: 'holding3',
+          path: 'holding3',
+          meta: { myInd: 1 },
+          component: () => import('@/views/holding/holding3.vue')
         }
-
       ]
     }
   ]

src/views/holding/holding0.vue

@@ -0,0 +1,230 @@
+<!--  -->
+<template>
+  <div class="holding">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item>藏品登记</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>藏品来源：</span>
+            <el-select v-model="sourceVal" placeholder="请选择">
+              <el-option
+                v-for="item in source"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+
+            <span>单位或个人：</span>
+            <el-input
+              v-model="type"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+            <span>创建日期：</span>
+                <el-date-picker
+      v-model="time"
+      type="daterange"
+      range-separator="-"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
+            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button type="primary">新增</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column prop="date" label="登记编号" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="藏品来源" width="150">
+              </el-table-column>
+              <el-table-column prop="address" label="单位或个人">
+              </el-table-column>
+              <el-table-column prop="name" label="登记人员" width="110">
+              </el-table-column>
+              <el-table-column prop="name" label="创建日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="完成日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="状态" width="130">
+              </el-table-column>
+              <el-table-column label="操作" width="150">
+                <template #default>
+                  <el-button type="text">编辑</el-button>
+                  <el-button type="text">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="100"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Holding0',
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      sourceVal: '',
+      type: '',
+      time: '',
+      source: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.tabInd = this.INtabInd
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.holding {
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .right {
+    width: 100%;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+    .conten {
+      padding: 20px 20px 60px;
+      width: 100%;
+      height: 850px;
+      .middle {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .select {
+          color: black;
+          padding: 30px 0 0 0;
+          & > span {
+            margin-left: 30px;
+          }
+        }
+        .table {
+          max-height: 640px;
+          overflow: auto;
+          padding: 24px;
+        }
+        .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/holding/holding1.vue

@@ -0,0 +1,208 @@
+<!--  -->
+<template>
+  <div class="holding">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item>入库管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>登记人：</span>
+            <el-input
+              v-model="type"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+            <span>创建日期：</span>
+            <el-date-picker
+              v-model="time"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button type="primary">申请入库</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column prop="date" label="入库编号" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="登记人" width="150">
+              </el-table-column>
+              <el-table-column prop="address" label="入库说明">
+              </el-table-column>
+              <el-table-column prop="name" label="创建日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="完成日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="状态" width="130">
+              </el-table-column>
+              <el-table-column label="操作" width="195">
+                <template #default>
+                  <el-button type="text">查看</el-button>
+                  <el-button type="text">确定</el-button>
+                  <el-button type="text">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="100"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Holding0',
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      type: '',
+      time: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.tabInd = this.INtabInd
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.holding {
+  display: flex;
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 100vh;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(2) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .right {
+    width: 100%;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+    .conten {
+      padding: 20px 20px 60px;
+      width: 100%;
+      height: 850px;
+      .middle {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .select {
+          color: black;
+          padding: 30px 0 0 0;
+          & > span {
+            margin-left: 30px;
+          }
+        }
+        .table {
+          max-height: 640px;
+          overflow: auto;
+          padding: 24px;
+        }
+        .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/holding/holding2.vue

@@ -0,0 +1,210 @@
+<!--  -->
+<template>
+  <div class="holding">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to=""
+            >馆藏管理</el-breadcrumb-item
+          >
+          <el-breadcrumb-item>出库管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>登记人：</span>
+            <el-input
+              v-model="type"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+            <span>日期范围：</span>
+            <el-date-picker
+              v-model="time"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button type="primary">申请出库</el-button>
+          </div>
+          <!--表格 -->
+          <div class="table">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column prop="date" label="出库单号" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="登记人" width="150">
+              </el-table-column>
+              <el-table-column prop="address" label="出库类型">
+              </el-table-column>
+              <el-table-column prop="name" label="登记日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="出库日期" width="130">
+              </el-table-column>
+              <el-table-column prop="name" label="状态" width="130">
+              </el-table-column>
+              <el-table-column label="操作" width="195">
+                <template #default>
+                  <el-button type="text">查看</el-button>
+                  <el-button type="text">确定</el-button>
+                  <el-button type="text">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="100"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Holding0',
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      type: '',
+      time: '',
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`)
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.tabInd = this.INtabInd
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.holding {
+  display: flex;
+  .left {
+    width: 220px;
+    height: 100vh;
+    min-width: 130px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(3) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .right {
+    width: 100%;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+    .conten {
+      padding: 20px 20px 60px;
+      width: 100%;
+      height: 850px;
+      .middle {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .select {
+          color: black;
+          padding: 30px 0 0 0;
+          & > span {
+            margin-left: 30px;
+          }
+        }
+        .table {
+          max-height: 640px;
+          overflow: auto;
+          padding: 24px;
+        }
+        .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/holding/holding3.vue

@@ -0,0 +1,329 @@
+<!--  -->
+<template>
+  <div class="holding">
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+    <div class="right">
+      <div class="top">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+          <el-breadcrumb-item to="">馆藏管理</el-breadcrumb-item>
+          <el-breadcrumb-item>藏品总帐</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="conten">
+        <div class="middle">
+          <div class="select">
+            <span>藏品类型：</span>
+            <el-select v-model="sourceVal" placeholder="请选择">
+              <el-option
+                v-for="item in source"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <span>藏品年代：</span>
+            <el-select v-model="age" placeholder="请选择">
+              <el-option
+                v-for="item in source2"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+            <span>藏品名称：</span>
+            <el-input
+              v-model="type"
+              placeholder="请输入"
+              style="width: 217px"
+            ></el-input>
+            <el-button style="margin-left: 20px">查询</el-button>
+            <el-button>导出</el-button>
+            <div class="pattern">
+              <div :class="{ active: change === 0 }" @click="pattern(0)">
+                <i class="el-icon-menu"></i>
+              </div>
+              <div :class="{ active: change === 1 }" @click="pattern(1)">
+                <i class="el-icon-s-unfold"></i>
+              </div>
+            </div>
+          </div>
+          <!--表格 -->
+          <div class="table" v-if="change">
+            <el-table
+              :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
+              :data="tableData"
+              border
+              style="width: 100%"
+            >
+              <el-table-column label="缩略图" width="80">
+                <template #default>
+                  <div class="smimg">
+                    <img src="../../assets/img/user.png" alt="" />
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                sortable
+                label="总登记号"
+                width="235"
+              >
+              </el-table-column>
+              <el-table-column prop="address" sortable label="藏品名称">
+              </el-table-column>
+              <el-table-column prop="name" sortable label="年代" width="130">
+              </el-table-column>
+              <el-table-column prop="name" sortable label="质地" width="220">
+              </el-table-column>
+              <el-table-column prop="name" label="状态" width="130">
+              </el-table-column>
+              <el-table-column label="操作" width="130">
+                <template #default>
+                  <el-button type="text">查看</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+          <!-- 图片显示 -->
+          <div class="imgInfo" v-else>
+            <div class="imgInfo_single" v-for="i in 28" :key="i">
+              <img src="../../assets/img/user.png" alt="" />
+              <span>文物名称</span>
+            </div>
+          </div>
+          <!-- 分页器 -->
+          <div class="paging">
+            <el-pagination
+              background
+              layout="prev, pager, next,sizes,jumper"
+              :total="100"
+            >
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Holding0',
+  data () {
+    return {
+      // 控制显示表格还是图片
+      change: 0,
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ],
+      type: '',
+      sourceVal: '',
+      age: '',
+      source: [
+        {
+          value: '选项1',
+          label: '黄金糕'
+        },
+        {
+          value: '选项2',
+          label: '双皮奶'
+        }
+      ],
+      source2: [
+        {
+          value: '选项11',
+          label: '黄金糕11'
+        },
+        {
+          value: '选项22',
+          label: '双皮奶22'
+        }
+      ],
+      // 表格数据
+      tableData: [
+        {
+          date: '2016-05-03',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        },
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          address: '上海市普陀区金沙江路 1518 弄'
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`)
+    },
+    // 控制显示表格还是图片
+    pattern (index) {
+      this.change = index
+    }
+  },
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    this.tabInd = this.INtabInd
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.holding {
+  display: flex;
+  .left {
+    width: 220px;
+    height: 100vh;
+    min-width: 130px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(4) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }
+  .right {
+    width: 100%;
+    .top {
+      padding-left: 35px;
+      display: flex;
+      align-items: center;
+      box-shadow: 1px 1px 10px 1px;
+      margin-left: 2px;
+      height: 40px;
+      background-color: #fff;
+    }
+    .conten {
+      padding: 20px 20px 60px;
+      width: 100%;
+      height: 850px;
+      .middle {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-color: #fff;
+        .select {
+          align-items: center;
+          display: flex;
+          .pattern {
+            display: flex;
+            margin-left: 22px;
+            width: 130px;
+            height: 40px;
+            .active {
+              background-color: #3aa1ed;
+              color: #fff;
+            }
+            div {
+              cursor: pointer;
+              width: 65px;
+              height: 40px;
+              border-radius: 12px;
+              border: 1px solid #ccc;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #666;
+              i {
+                font-size: 20px;
+              }
+            }
+          }
+          color: black;
+          padding: 30px 0 0 0;
+          & > span {
+            margin-left: 30px;
+          }
+        }
+        .table {
+          max-height: 640px;
+          overflow: auto;
+          padding: 24px;
+          .smimg {
+            width: 80px;
+            height: 60px;
+            img {
+              margin: 5px 0 0 5px;
+              width: 50px;
+              height: 50px;
+            }
+          }
+        }
+        .imgInfo {
+          max-height: 635px;
+          overflow: auto;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          flex-wrap: wrap;
+          padding: 10px 75px 40px 75px;
+          .imgInfo_single {
+            margin: 30px 45px 0 45px;
+            text-align: center;
+            width: 140px;
+            height: 165px;
+            border: 1px solid #ccc;
+            img {
+              width: 140px;
+              height: 120px;
+              margin-bottom: 8px;
+              border: 5px solid #ccc;
+            }
+            span {
+              color: black;
+            }
+          }
+        }
+        .paging {
+          position: absolute;
+          bottom: 15px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/home/News.vue

@@ -25,13 +25,22 @@
           >
         </div>
         <ul>
-          <li v-for="i in 10" :key="i">
+          <li v-for="i in 11" :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 class="paging">
+          <el-pagination
+            background
+            layout="prev, pager, next,sizes,jumper"
+            :total="100"
+          >
+          </el-pagination>
+        </div>
       </div>
     </div>
   </div>
@@ -121,6 +130,13 @@ export default {
       }
     }
     .right {
+      width: 100%;
+      .paging {
+        margin-top: 25px;
+        width: 100%;
+        height: 60px;
+        padding-right: 58px;
+      }
       padding: 30px 0 0 58px;
       .title {
         margin-left: 20px;
@@ -136,6 +152,8 @@ export default {
         margin: 0 15px;
       }
       ul {
+        overflow: auto;
+        height: 526px;
         .time {
           color: #999;
         }

src/views/home/index.vue

@@ -18,14 +18,13 @@
             <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">
+                  <li v-for="item in info1" :key="item.imgUrl" @click="$router.push(item.push)">
                     <div class="ico">
                       <img src="../../assets/img/object01.png" alt="" />
                     </div>
@@ -35,7 +34,7 @@
               </el-carousel-item>
               <el-carousel-item>
                 <ul class="info">
-                  <li v-for="item in info2" :key="item.imgUrl">
+                  <li v-for="item in info2" :key="item.imgUrl" @click="$router.push(item.push)">
                     <div class="ico">
                       <img src="../../assets/img/object01.png" alt="" />
                     </div>
@@ -105,12 +104,12 @@ export default {
     return {
       info1: [
         { name: '藏品征集', imgUrl: '01', push: 'collect' },
-        { name: '藏品登记', imgUrl: '02', push: 'register' },
+        { name: '藏品登记', imgUrl: '1', push: '/layout/holding0' },
         { name: '藏品入藏', imgUrl: '03', push: 'enter' },
         { name: '藏品提用', imgUrl: '04', push: 'drawings' }
       ],
       info2: [
-        { name: '藏品总账', imgUrl: '05', push: 'ledger' },
+        { name: '藏品总账', imgUrl: '05', push: '/layout/holding3' },
         { name: '藏品注销', imgUrl: '06', push: 'logout' },
         { name: '入库管理', imgUrl: '07', push: 'manage' },
         { name: '藏品盘核', imgUrl: '08', push: 'check' }
@@ -144,7 +143,9 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {},
+  methods: {
+
+  },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
@@ -268,7 +269,7 @@ export default {
     .letf {
       position: relative;
       overflow: hidden;
-      overflow-y: scroll;
+      overflow: auto;
       .txt {
         .time {
           color: #999;

src/views/layout/index.vue

@@ -5,8 +5,9 @@
       <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/home" :class='{active:$route.meta.myInd===0}'>首页</router-link>
+        <router-link to="/layout/holding0" :class='{active:$route.meta.myInd===1}'>馆藏管理</router-link>
         <router-link to="/layout/home2">征集品管理</router-link>
         <router-link to="/layout/home3">馆藏统计</router-link>
         <router-link to="/layout/home4">系统管理</router-link>
@@ -39,14 +40,13 @@ export default {
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+  },
   // 方法集合
   methods: {
-
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
-
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
@@ -72,6 +72,9 @@ export default {
     background-color: #001529;
   }
   .left {
+    .active {
+      color: #fff;
+    }
     display: flex;
     align-items: center;
     &>img {
@@ -81,7 +84,11 @@ export default {
       color: #fff;
       margin-right:30px;
     }
+  .active {
+    color: #fff;
+  }
     &>a {
+      cursor: pointer;
       margin: 0 30px;
     }
     &>a:hover {