před 4 roky · aa23f140c7
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,5 @@
 
				+[*.{js,jsx,ts,tsx,vue}]
			
 
				+indent_style = space
			
 
				+indent_size = 2
			
 
				+trim_trailing_whitespace = true
			
 
				+insert_final_newline = true
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# houtai
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,63 @@
 
				+{
			
 
				+  "name": "houtai",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "default-passive-events": "^2.0.0",
			
 
				+    "element-ui": "^2.15.6",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-plugin-router": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "@vue/eslint-config-standard": "^5.1.2",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-import": "^2.20.2",
			
 
				+    "eslint-plugin-node": "^11.1.0",
			
 
				+    "eslint-plugin-promise": "^4.2.1",
			
 
				+    "eslint-plugin-standard": "^4.0.0",
			
 
				+    "eslint-plugin-vue": "^6.2.2",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "lint-staged": "^9.5.0",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  },
			
 
				+  "eslintConfig": {
			
 
				+    "root": true,
			
 
				+    "env": {
			
 
				+      "node": true
			
 
				+    },
			
 
				+    "extends": [
			
 
				+      "plugin:vue/essential",
			
 
				+      "@vue/standard"
			
 
				+    ],
			
 
				+    "parserOptions": {
			
 
				+      "parser": "babel-eslint"
			
 
				+    },
			
 
				+    "rules": {}
			
 
				+  },
			
 
				+  "browserslist": [
			
 
				+    "> 1%",
			
 
				+    "last 2 versions",
			
 
				+    "not dead"
			
 
				+  ],
			
 
				+  "gitHooks": {
			
 
				+    "pre-commit": "lint-staged"
			
 
				+  },
			
 
				+  "lint-staged": {
			
 
				+    "*.{js,jsx,vue}": [
			
 
				+      "vue-cli-service lint",
			
 
				+      "git add"
			
 
				+    ]
			
 
				+  }
			
 
				+}
			
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,9 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <Router-view/>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<style lang="less">
			
 
				+
			
 
				+</style>
			
--- a/src/assets/img/loginBac.jpg
+++ b/src/assets/img/loginBac.jpg
--- a/src/assets/img/logo.png
+++ b/src/assets/img/logo.png
--- a/src/assets/img/logo22.png
+++ b/src/assets/img/logo22.png
--- a/src/assets/img/user.jpg
+++ b/src/assets/img/user.jpg
--- a/src/assets/style/initial.css
+++ b/src/assets/style/initial.css
@@ -0,0 +1,25 @@
 
				+
			
 
				+ul li {
			
 
				+  list-style: none;
			
 
				+}
			
 
				+body {
			
 
				+  color:#333333 ;
			
 
				+  background-color:#eff3f8;
			
 
				+  /* overflow: hidden; */
			
 
				+}
			
 
				+* {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+a {
			
 
				+  text-decoration:none ;
			
 
				+  color: #333333;
			
 
				+}
			
 
				+.ww{
			
 
				+  width: 1142px;
			
 
				+  margin: 0 auto;
			
 
				+}
			
 
				+.el-button--text{
			
 
				+  color: #E97B86 !important;
			
 
				+}
			
--- a/src/components/conTop.vue
+++ b/src/components/conTop.vue
@@ -0,0 +1,61 @@
 
				+
			
 
				+<template>
			
 
				+<div class='ConTop'>
			
 
				+  <div class="wire"></div>
			
 
				+  <slot/>
			
 
				+</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+// 例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+  name: 'ConTop',
			
 
				+  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>
			
 
				+.ConTop{
			
 
				+  display: flex;
			
 
				+  align-items: center;
			
 
				+  height: 58px;
			
 
				+  width: 100%;
			
 
				+  background-color: #fff;
			
 
				+  .wire{
			
 
				+    width: 5px;
			
 
				+    height: 30px;
			
 
				+    background-color: #b9412e;
			
 
				+    margin: 0 15px;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,14 @@
 
				+import Vue from 'vue'
			
 
				+import ElementUI from 'element-ui'
			
 
				+import 'element-ui/lib/theme-chalk/index.css'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import './assets/style/initial.css'
			
 
				+import 'default-passive-events'
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+Vue.use(ElementUI)
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,58 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'login',
			
 
				+    component: () => import('@/views/login.vue')
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/layout',
			
 
				+    name: 'layout',
			
 
				+    component: () => import('@/views/layout/index.vue'),
			
 
				+    children: [
			
 
				+      // 项目资料
			
 
				+      {
			
 
				+        path: 'tab1',
			
 
				+        name: 'tab1',
			
 
				+        component: () => import('@/views/tab1/index.vue')
			
 
				+      },
			
 
				+      // 文物案例
			
 
				+      {
			
 
				+        path: 'tab2',
			
 
				+        name: 'tab2',
			
 
				+        component: () => import('@/views/tab2/index.vue')
			
 
				+      },
			
 
				+      // 场景案例
			
 
				+      {
			
 
				+        path: 'tab3',
			
 
				+        name: 'tab3',
			
 
				+        component: () => import('@/views/tab3/index.vue')
			
 
				+      },
			
 
				+      // 用户管理
			
 
				+      {
			
 
				+        path: 'tab4',
			
 
				+        name: 'tab4',
			
 
				+        component: () => import('@/views/tab4/index.vue')
			
 
				+      },
			
 
				+      // 操作日志
			
 
				+      {
			
 
				+        path: 'tab5',
			
 
				+        name: 'tab5',
			
 
				+        component: () => import('@/views/tab5/index.vue')
			
 
				+      }
			
 
				+    ]
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  mode: 'history',
			
 
				+  base: process.env.BASE_URL,
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -0,0 +1,153 @@
 
				+<template>
			
 
				+  <div class="layout">
			
 
				+    <div class="top">
			
 
				+      <div class="logo">
			
 
				+        <img src="@/assets/img/logo.png" alt="" />
			
 
				+      </div>
			
 
				+      <div class="right">
			
 
				+        <div class="txt">项目资料管理系统</div>
			
 
				+        <div class="user">
			
 
				+          <span>用户名</span>
			
 
				+          <img src="@/assets/img/user.jpg" alt="" />
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+    <div class="leftTab">
			
 
				+      <div class="title">数据管理</div>
			
 
				+      <ul>
			
 
				+        <li v-for="item in tabList1" :key="item.id" :class="{active:index===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
			
 
				+      </ul>
			
 
				+      <div class="title">系统管理</div>
			
 
				+      <ul>
			
 
				+        <li v-for="item in tabList2" :key="item.id"  :class="{active:index===item.id}" @click="skip(item.id,item.path)">{{item.name}}</li>
			
 
				+      </ul>
			
 
				+    </div>
			
 
				+    <!-- 右侧内容 -->
			
 
				+      <Router-view style="width: 1630px;"/>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+// 例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+  // import引入的组件需要注入到对象中才能使用
			
 
				+  components: {},
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      index: 1,
			
 
				+      tabList1: [
			
 
				+        { id: 1, name: '项目资料', path: '/layout/tab1' },
			
 
				+        { id: 2, name: '文物案例', path: '/layout/tab2' },
			
 
				+        { id: 3, name: '场景案例', path: '/layout/tab3' }
			
 
				+      ],
			
 
				+      tabList2: [
			
 
				+        { id: 4, name: '用户管理', path: '/layout/tab4' },
			
 
				+        { id: 5, name: '操作日志', path: '/layout/tab5' }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {
			
 
				+    skip (id, url) {
			
 
				+      this.index = id
			
 
				+      this.$router.push(url).catch(() => {})
			
 
				+    }
			
 
				+  },
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.layout {
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    padding: 10px 0;
			
 
				+    height: 60px;
			
 
				+    background-color: #f6f8f9;
			
 
				+  }
			
 
				+  .logo {
			
 
				+    width: 290px;
			
 
				+    border-right: 3px dashed #343a40;
			
 
				+    text-align: center;
			
 
				+  }
			
 
				+  .right {
			
 
				+    flex: 1;
			
 
				+    padding: 0 60px;
			
 
				+    height: 100%;
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: space-between;
			
 
				+    .txt {
			
 
				+      font-size: 24px;
			
 
				+      font-weight: 700;
			
 
				+    }
			
 
				+    .user {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+      img {
			
 
				+        margin-left: 15px;
			
 
				+        width: 34px;
			
 
				+        height: 34px;
			
 
				+        border-radius: 50%;
			
 
				+        overflow: hidden;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .leftTab {
			
 
				+    font-size: 24px;
			
 
				+    color: #fff;
			
 
				+    padding: 30px 25px;
			
 
				+    width: 290px;
			
 
				+    height: calc(100vh - 60px);
			
 
				+    min-height: 870px;
			
 
				+    background-color: rgba(0, 0, 0, 0.8);
			
 
				+    .title {
			
 
				+      margin-top: 30px;
			
 
				+      width: 230px;
			
 
				+      height: 60px;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      background-color: #dc3545;
			
 
				+    }
			
 
				+    ul {
			
 
				+      margin-top: 15px;
			
 
				+      li {
			
 
				+        cursor: pointer;
			
 
				+        width: 230px;
			
 
				+        height: 60px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+      }
			
 
				+      li:hover{
			
 
				+        background-color:rgba(220, 53, 69, .6) ;
			
 
				+      }
			
 
				+      .active {
			
 
				+        background-color:rgba(220, 53, 69, .6) ;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten{
			
 
				+    display: flex;
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -0,0 +1,127 @@
 
				+<!--  -->
			
 
				+<template>
			
 
				+<div class='login'>
			
 
				+  <div class="left"></div>
			
 
				+  <div class="right">
			
 
				+  <div class="from">
			
 
				+    <div class="titile">项目资料管理系统</div>
			
 
				+    <div class="from-input">
			
 
				+    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
			
 
				+        <el-form-item label="用户名" prop="userName">
			
 
				+          <el-input v-model="ruleForm.userName" placeholder="请输入用户账号"></el-input>
			
 
				+        </el-form-item>
			
 
				+        <el-form-item label="密码" prop="passWorg">
			
 
				+          <el-input v-model="ruleForm.passWorg" placeholder="请输入登录密码" show-password></el-input>
			
 
				+        </el-form-item>
			
 
				+    </el-form>
			
 
				+    </div>
			
 
				+    <div class="btn" @click="login">登 录</div>
			
 
				+  </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
			
 
				+// 例如：import 《组件名称》 from '《组件路径》';
			
 
				+
			
 
				+export default {
			
 
				+// import引入的组件需要注入到对象中才能使用
			
 
				+  components: {},
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      ruleForm: {
			
 
				+        userName: '',
			
 
				+        passWorg: ''
			
 
				+      },
			
 
				+      rules: {
			
 
				+        userName: [
			
 
				+          { required: true, message: '不能为空', trigger: 'blur' }
			
 
				+        ],
			
 
				+        passWorg: [
			
 
				+          { required: true, message: '不能为空', trigger: 'blur' }
			
 
				+        ]
			
 
				+
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {
			
 
				+    // 点击登录
			
 
				+    async login () {
			
 
				+      try {
			
 
				+        await this.$refs.ruleForm.validate()
			
 
				+        this.$router.push('/layout/tab1')
			
 
				+        this.$message.success('登录成功')
			
 
				+      } catch (error) {
			
 
				+        console.log(error)
			
 
				+      }
			
 
				+    }
			
 
				+  },
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {
			
 
				+
			
 
				+  },
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {
			
 
				+
			
 
				+  },
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.login{
			
 
				+  display: flex;
			
 
				+  height: 100vh;
			
 
				+  min-height: 900px;
			
 
				+  .left{
			
 
				+    width: 50%;
			
 
				+    height: 100%;
			
 
				+    background: url('../assets/img/loginBac.jpg');
			
 
				+    background-size: 100% 100%;
			
 
				+  }
			
 
				+  .right{
			
 
				+    position: relative;
			
 
				+    width: 50%;
			
 
				+    height: 100%;
			
 
				+      .from{
			
 
				+        padding: 50px;
			
 
				+        position: absolute;
			
 
				+        left: 50%;
			
 
				+        top: 50%;
			
 
				+        transform: translate(-50%,-50%);
			
 
				+        width: 50%;
			
 
				+        height: 50%;
			
 
				+        background-color: #fff;
			
 
				+    .titile{
			
 
				+      font-size: 20px;
			
 
				+      color: #707070;
			
 
				+      text-align: center;
			
 
				+      margin-bottom: 40px;
			
 
				+    }
			
 
				+
			
 
				+    .btn{
			
 
				+      margin-top: 40px;
			
 
				+      color: #fff;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      width: 130px;
			
 
				+      height: 40px;
			
 
				+      background-color: #dc3545;
			
 
				+    }
			
 
				+  }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/tab1/index.vue
+++ b/src/views/tab1/index.vue
@@ -0,0 +1,227 @@
 
				+<template>
			
 
				+  <div class="template">
			
 
				+    <div class="top">
			
 
				+      <div class="location">数据管理 / <span>项目资料</span></div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="search">
			
 
				+        <div class="txt">筛选查询</div>
			
 
				+        <div class="row">
			
 
				+          <span>输入搜索：</span>
			
 
				+          <el-input v-model="form.name" placeholder="请输入"></el-input>
			
 
				+          <span>项目分类：</span>
			
 
				+          <el-select v-model="form.fenlei" placeholder="请选择">
			
 
				+            <el-option label="区域一" value="shanghai"></el-option>
			
 
				+            <el-option label="区域二" value="beijing"></el-option>
			
 
				+          </el-select>
			
 
				+          <span>应用技术：</span>
			
 
				+          <el-select v-model="form.fenlei" placeholder="请选择">
			
 
				+            <el-option label="区域一" value="shanghai"></el-option>
			
 
				+            <el-option label="区域二" value="beijing"></el-option>
			
 
				+          </el-select>
			
 
				+        </div>
			
 
				+        <div class="btn">搜 索</div>
			
 
				+      </div>
			
 
				+      <!-- 表格 -->
			
 
				+      <div class="table">
			
 
				+        <div class="title">
			
 
				+          <div class="txt">数据列表</div>
			
 
				+          <div class="addBtn">+ 新增</div>
			
 
				+        </div>
			
 
				+        <el-table
			
 
				+          :header-cell-style="{ background: '#d8dadc' }"
			
 
				+          :data="tableData"
			
 
				+          stripe
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+          <el-table-column label="序号" width="80">
			
 
				+            <template slot-scope="scope">
			
 
				+              {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column prop="name1" label="场景名称"></el-table-column>
			
 
				+          <el-table-column prop="name2" label="项目分类"></el-table-column>
			
 
				+          <el-table-column prop="name3" label="应用技术"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="展示形式"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="项目时间"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="保密级别"> </el-table-column>
			
 
				+          <el-table-column label="操作">
			
 
				+            <template>
			
 
				+              <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 layout="prev, pager, next,jumper" :total="50">
			
 
				+        </el-pagination>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'tab1',
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      form: {
			
 
				+        pageNum: 1,
			
 
				+        pageSize: 10,
			
 
				+        name: '',
			
 
				+        fenlei: '',
			
 
				+        jishu: ''
			
 
				+      },
			
 
				+      tableData: [
			
 
				+        {
			
 
				+          name1: '111',
			
 
				+          name2: '111',
			
 
				+          name3: '111',
			
 
				+          name4: '111',
			
 
				+          name5: '111',
			
 
				+          name6: '111'
			
 
				+        },
			
 
				+        {
			
 
				+          name1: '222',
			
 
				+          name2: '222',
			
 
				+          name3: '222',
			
 
				+          name4: '222',
			
 
				+          name5: '222',
			
 
				+          name6: '222'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {},
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.template {
			
 
				+  /deep/.el-table__body-wrapper {
			
 
				+    max-height: 450px;
			
 
				+    overflow-y: auto;
			
 
				+  }
			
 
				+  /deep/.cell {
			
 
				+    padding-left: 20px !important;
			
 
				+  }
			
 
				+  /deep/.el-table__row .el-table__cell {
			
 
				+    padding: 0 !important;
			
 
				+  }
			
 
				+  /deep/.el-pager li {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-prev {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-next {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  padding: 0px 30px;
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    height: 58px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .location {
			
 
				+      font-size: 22px;
			
 
				+      color: #999;
			
 
				+      & > span {
			
 
				+        color: black;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 780px;
			
 
				+    .txt {
			
 
				+      font-weight: 700;
			
 
				+      height: 40px;
			
 
				+      border-bottom: 2px dashed #999;
			
 
				+    }
			
 
				+    .search {
			
 
				+      position: relative;
			
 
				+      padding: 15px 20px 0;
			
 
				+      border-radius: 5px;
			
 
				+      box-shadow: 0px 0px 5px 0px;
			
 
				+      height: 130px;
			
 
				+      background-color: #d8dadc;
			
 
				+      .row {
			
 
				+        width: 100%;
			
 
				+        margin-top: 20px;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        & > div {
			
 
				+          margin-right: 50px;
			
 
				+          width: 20%;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .btn {
			
 
				+        border-radius: 5px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        width: 170px;
			
 
				+        height: 40px;
			
 
				+        background-color: #dc3545;
			
 
				+        position: absolute;
			
 
				+        right: 50px;
			
 
				+        top: 75px;
			
 
				+      }
			
 
				+    }
			
 
				+    .table {
			
 
				+      margin-top: 25px;
			
 
				+      .title {
			
 
				+        position: relative;
			
 
				+        padding: 15px 20px 0;
			
 
				+        background-color: #d8dadc;
			
 
				+        .addBtn {
			
 
				+          cursor: pointer;
			
 
				+          display: flex;
			
 
				+          justify-content: center;
			
 
				+          align-items: center;
			
 
				+          color: #fff;
			
 
				+          width: 80px;
			
 
				+          height: 30px;
			
 
				+          background-color: #dc3545;
			
 
				+          border-radius: 12px;
			
 
				+          z-index: 999;
			
 
				+          position: absolute;
			
 
				+          right: 56px;
			
 
				+          top: 62px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .paging {
			
 
				+      position: absolute;
			
 
				+      bottom: 15px;
			
 
				+      right: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/tab2/index.vue
+++ b/src/views/tab2/index.vue
@@ -0,0 +1,224 @@
 
				+<template>
			
 
				+  <div class="template">
			
 
				+    <div class="top">
			
 
				+      <div class="location">数据管理 / <span>文物案例</span></div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="search">
			
 
				+        <div class="txt">筛选查询</div>
			
 
				+        <div class="row">
			
 
				+          <span>输入搜索：</span>
			
 
				+          <el-input v-model="form.name" placeholder="请输入"></el-input>
			
 
				+          <span>项目分类：</span>
			
 
				+          <el-select v-model="form.fenlei" placeholder="请选择">
			
 
				+            <el-option label="区域一" value="shanghai"></el-option>
			
 
				+            <el-option label="区域二" value="beijing"></el-option>
			
 
				+          </el-select>
			
 
				+          <span>文物类别：</span>
			
 
				+          <el-select v-model="form.fenlei" placeholder="请选择">
			
 
				+            <el-option label="区域一" value="shanghai"></el-option>
			
 
				+            <el-option label="区域二" value="beijing"></el-option>
			
 
				+          </el-select>
			
 
				+        </div>
			
 
				+        <div class="btn">搜 索</div>
			
 
				+      </div>
			
 
				+      <!-- 表格 -->
			
 
				+      <div class="table">
			
 
				+        <div class="title">
			
 
				+          <div class="txt">数据列表</div>
			
 
				+        </div>
			
 
				+        <el-table
			
 
				+          :header-cell-style="{background:'#d8dadc'}"
			
 
				+          :data="tableData"
			
 
				+          stripe
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+          <el-table-column label="序号" width="80">
			
 
				+            <template slot-scope="scope">
			
 
				+              {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column label="图片">
			
 
				+            <template>
			
 
				+              <div class="tabImg">
			
 
				+              <img src="../../assets/img/logo22.png" alt="">
			
 
				+              </div>
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column prop="name1" label="文物名称"></el-table-column>
			
 
				+          <el-table-column prop="name2" label="文物类别"></el-table-column>
			
 
				+          <el-table-column prop="name3" label="所属项目"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="所属项目分类"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="链接"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="保密级别"> </el-table-column>
			
 
				+        </el-table>
			
 
				+      </div>
			
 
				+      <!-- 分页 -->
			
 
				+      <div class="paging">
			
 
				+      <el-pagination layout="prev, pager, next,jumper" :total="50"> </el-pagination>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'tab2',
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      form: {
			
 
				+        pageNum: 1,
			
 
				+        pageSize: 10,
			
 
				+        name: '',
			
 
				+        fenlei: '',
			
 
				+        jishu: ''
			
 
				+      },
			
 
				+      tableData: [
			
 
				+        {
			
 
				+          name1: '111',
			
 
				+          name2: '111',
			
 
				+          name3: '111',
			
 
				+          name4: '111',
			
 
				+          name5: '111',
			
 
				+          name6: '111'
			
 
				+        },
			
 
				+        {
			
 
				+          name1: '222',
			
 
				+          name2: '222',
			
 
				+          name3: '222',
			
 
				+          name4: '222',
			
 
				+          name5: '222',
			
 
				+          name6: '222'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {},
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.template {
			
 
				+  /deep/.el-table__row td:nth-of-type(5) {
			
 
				+    color: #E97B86;
			
 
				+  }
			
 
				+  /deep/.el-table__row td:nth-of-type(7) {
			
 
				+    color: #E97B86;
			
 
				+  }
			
 
				+  /deep/.el-table__body-wrapper{
			
 
				+    max-height: 450px;
			
 
				+    overflow-y: auto;
			
 
				+  }
			
 
				+  /deep/.cell {
			
 
				+    padding-left: 20px !important;
			
 
				+  }
			
 
				+  /deep/.el-table__row .el-table__cell{
			
 
				+    padding: 10px 0 !important;
			
 
				+  }
			
 
				+  /deep/.el-pager li{
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-prev{
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-next{
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  padding: 0px 30px;
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    height: 58px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .location {
			
 
				+      font-size: 22px;
			
 
				+      color: #999;
			
 
				+      & > span {
			
 
				+        color: black;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 780px;
			
 
				+    .txt {
			
 
				+      font-weight: 700;
			
 
				+      height: 40px;
			
 
				+      border-bottom: 2px dashed #999;
			
 
				+    }
			
 
				+    .search {
			
 
				+      position: relative;
			
 
				+      padding: 15px 20px 0;
			
 
				+      border-radius: 5px;
			
 
				+      box-shadow: 0px 0px 5px 0px;
			
 
				+      height: 130px;
			
 
				+      background-color: #d8dadc;
			
 
				+      .row {
			
 
				+        width: 100%;
			
 
				+        margin-top: 20px;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        & > div {
			
 
				+          margin-right: 50px;
			
 
				+          width: 20%;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .btn {
			
 
				+        border-radius: 5px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        width: 170px;
			
 
				+        height: 40px;
			
 
				+        background-color: #dc3545;
			
 
				+        position: absolute;
			
 
				+        right: 50px;
			
 
				+        top: 75px;
			
 
				+      }
			
 
				+    }
			
 
				+    .table {
			
 
				+      margin-top: 25px;
			
 
				+      .title {
			
 
				+        padding: 15px 20px 0;
			
 
				+        background-color: #d8dadc;
			
 
				+      }
			
 
				+      .tabImg{
			
 
				+        width: 80px;
			
 
				+        height: 80px;
			
 
				+        img {
			
 
				+          width: 100%;
			
 
				+          height: 100%;
			
 
				+          object-fit: contain;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .paging{
			
 
				+      position: absolute;
			
 
				+      bottom: 15px;
			
 
				+      right: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/tab3/index.vue
+++ b/src/views/tab3/index.vue
@@ -0,0 +1,204 @@
 
				+<template>
			
 
				+  <div class="template">
			
 
				+    <div class="top">
			
 
				+      <div class="location">数据管理 / <span>场景案例</span></div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="search">
			
 
				+        <div class="txt">筛选查询</div>
			
 
				+        <div class="row">
			
 
				+          <span>输入搜索：</span>
			
 
				+          <el-input v-model="form.name" placeholder="请输入"></el-input>
			
 
				+          <span>项目分类：</span>
			
 
				+          <el-select v-model="form.fenlei" placeholder="请选择">
			
 
				+            <el-option label="区域一" value="shanghai"></el-option>
			
 
				+            <el-option label="区域二" value="beijing"></el-option>
			
 
				+          </el-select>
			
 
				+        </div>
			
 
				+        <div class="btn">搜 索</div>
			
 
				+      </div>
			
 
				+      <!-- 表格 -->
			
 
				+      <div class="table">
			
 
				+        <div class="title">
			
 
				+          <div class="txt">数据列表</div>
			
 
				+        </div>
			
 
				+        <el-table
			
 
				+          :header-cell-style="{ background: '#d8dadc' }"
			
 
				+          :data="tableData"
			
 
				+          stripe
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+          <el-table-column label="序号" width="80">
			
 
				+            <template slot-scope="scope">
			
 
				+              {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column prop="name1" label="场景名称"></el-table-column>
			
 
				+          <el-table-column prop="name2" label="所属项目"></el-table-column>
			
 
				+          <el-table-column prop="name3" label="项目时间"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="链接"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="保密级别"> </el-table-column>
			
 
				+        </el-table>
			
 
				+      </div>
			
 
				+      <!-- 分页 -->
			
 
				+      <div class="paging">
			
 
				+        <el-pagination layout="prev, pager, next,jumper" :total="50">
			
 
				+        </el-pagination>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'tab3',
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      form: {
			
 
				+        pageNum: 1,
			
 
				+        pageSize: 10,
			
 
				+        name: '',
			
 
				+        fenlei: '',
			
 
				+        jishu: ''
			
 
				+      },
			
 
				+      tableData: [
			
 
				+        {
			
 
				+          name1: '111',
			
 
				+          name2: '111',
			
 
				+          name3: '111',
			
 
				+          name4: '111',
			
 
				+          name5: '111',
			
 
				+          name6: '111'
			
 
				+        },
			
 
				+        {
			
 
				+          name1: '222',
			
 
				+          name2: '222',
			
 
				+          name3: '222',
			
 
				+          name4: '222',
			
 
				+          name5: '222',
			
 
				+          name6: '222'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {},
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.template {
			
 
				+  /deep/.el-table__row td:nth-of-type(2) {
			
 
				+    color: #E97B86;
			
 
				+  }
			
 
				+  /deep/.el-table__row td:nth-of-type(5) {
			
 
				+    color: #E97B86;
			
 
				+  }
			
 
				+  /deep/.el-table__body-wrapper {
			
 
				+    max-height: 450px;
			
 
				+    overflow-y: auto;
			
 
				+  }
			
 
				+  /deep/.cell {
			
 
				+    padding-left: 20px !important;
			
 
				+  }
			
 
				+  /deep/.el-table__row .el-table__cell {
			
 
				+    padding: 8px 0 !important;
			
 
				+  }
			
 
				+  /deep/.el-pager li {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-prev {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-next {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  padding: 0px 30px;
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    height: 58px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .location {
			
 
				+      font-size: 22px;
			
 
				+      color: #999;
			
 
				+      & > span {
			
 
				+        color: black;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 780px;
			
 
				+    .txt {
			
 
				+      font-weight: 700;
			
 
				+      height: 40px;
			
 
				+      border-bottom: 2px dashed #999;
			
 
				+    }
			
 
				+    .search {
			
 
				+      position: relative;
			
 
				+      padding: 15px 20px 0;
			
 
				+      border-radius: 5px;
			
 
				+      box-shadow: 0px 0px 5px 0px;
			
 
				+      height: 130px;
			
 
				+      background-color: #d8dadc;
			
 
				+      .row {
			
 
				+        width: 100%;
			
 
				+        margin-top: 20px;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        & > div {
			
 
				+          margin-right: 50px;
			
 
				+          width: 20%;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .btn {
			
 
				+        border-radius: 5px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        width: 170px;
			
 
				+        height: 40px;
			
 
				+        background-color: #dc3545;
			
 
				+        position: absolute;
			
 
				+        right: 50px;
			
 
				+        top: 75px;
			
 
				+      }
			
 
				+    }
			
 
				+    .table {
			
 
				+      margin-top: 25px;
			
 
				+      .title {
			
 
				+        position: relative;
			
 
				+        padding: 15px 20px 0;
			
 
				+        background-color: #d8dadc;
			
 
				+      }
			
 
				+    }
			
 
				+    .paging {
			
 
				+      position: absolute;
			
 
				+      bottom: 15px;
			
 
				+      right: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/tab4/index.vue
+++ b/src/views/tab4/index.vue
@@ -0,0 +1,215 @@
 
				+<template>
			
 
				+  <div class="template">
			
 
				+    <div class="top">
			
 
				+      <div class="location">数据管理 / <span>用户管理</span></div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="search">
			
 
				+        <div class="txt">筛选查询</div>
			
 
				+        <div class="row">
			
 
				+          <span>用户名：</span>
			
 
				+          <el-input v-model="form.name" placeholder="请输入"></el-input>
			
 
				+        </div>
			
 
				+        <div class="btn">搜 索</div>
			
 
				+      </div>
			
 
				+      <!-- 表格 -->
			
 
				+      <div class="table">
			
 
				+        <div class="title">
			
 
				+          <div class="txt">数据列表</div>
			
 
				+          <div class="addBtn">+ 新增</div>
			
 
				+        </div>
			
 
				+        <el-table
			
 
				+          :header-cell-style="{ background: '#d8dadc' }"
			
 
				+          :data="tableData"
			
 
				+          stripe
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+          <el-table-column label="序号" width="80">
			
 
				+            <template slot-scope="scope">
			
 
				+              {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column prop="name1" label="用户名"></el-table-column>
			
 
				+          <el-table-column prop="name2" label="用户角色"></el-table-column>
			
 
				+          <el-table-column prop="name3" label="部门"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="创建时间"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="备注"> </el-table-column>
			
 
				+          <el-table-column label="操作">
			
 
				+            <template>
			
 
				+              <el-button type="text">编 辑</el-button>
			
 
				+              <el-button type="text">删 除</el-button>
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+        </el-table>
			
 
				+      </div>
			
 
				+      <!-- 分页 -->
			
 
				+      <div class="paging">
			
 
				+        <el-pagination layout="prev, pager, next,jumper" :total="50">
			
 
				+        </el-pagination>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'tab3',
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      form: {
			
 
				+        pageNum: 1,
			
 
				+        pageSize: 10,
			
 
				+        name: '',
			
 
				+        fenlei: '',
			
 
				+        jishu: ''
			
 
				+      },
			
 
				+      tableData: [
			
 
				+        {
			
 
				+          name1: '111',
			
 
				+          name2: '111',
			
 
				+          name3: '111',
			
 
				+          name4: '111',
			
 
				+          name5: '111',
			
 
				+          name6: '111'
			
 
				+        },
			
 
				+        {
			
 
				+          name1: '222',
			
 
				+          name2: '222',
			
 
				+          name3: '222',
			
 
				+          name4: '222',
			
 
				+          name5: '222',
			
 
				+          name6: '222'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {},
			
 
				+  // 方法集合
			
 
				+  methods: {},
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.template {
			
 
				+  /deep/.el-table__body-wrapper {
			
 
				+    max-height: 450px;
			
 
				+    overflow-y: auto;
			
 
				+  }
			
 
				+  /deep/.cell {
			
 
				+    padding-left: 20px !important;
			
 
				+  }
			
 
				+  /deep/.el-table__row .el-table__cell {
			
 
				+    padding:  0 !important;
			
 
				+  }
			
 
				+  /deep/.el-pager li {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-prev {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-next {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  padding: 0px 30px;
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    height: 58px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .location {
			
 
				+      font-size: 22px;
			
 
				+      color: #999;
			
 
				+      & > span {
			
 
				+        color: black;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 780px;
			
 
				+    .txt {
			
 
				+      font-weight: 700;
			
 
				+      height: 40px;
			
 
				+      border-bottom: 2px dashed #999;
			
 
				+    }
			
 
				+    .search {
			
 
				+      position: relative;
			
 
				+      padding: 15px 20px 0;
			
 
				+      border-radius: 5px;
			
 
				+      box-shadow: 0px 0px 5px 0px;
			
 
				+      height: 130px;
			
 
				+      background-color: #d8dadc;
			
 
				+      .row {
			
 
				+        width: 100%;
			
 
				+        margin-top: 20px;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        & > div {
			
 
				+          margin-right: 50px;
			
 
				+          width: 20%;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .btn {
			
 
				+        border-radius: 5px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        width: 170px;
			
 
				+        height: 40px;
			
 
				+        background-color: #dc3545;
			
 
				+        position: absolute;
			
 
				+        right: 50px;
			
 
				+        top: 75px;
			
 
				+      }
			
 
				+    }
			
 
				+    .table {
			
 
				+      margin-top: 25px;
			
 
				+      .title {
			
 
				+        position: relative;
			
 
				+        padding: 15px 20px 0;
			
 
				+        background-color: #d8dadc;
			
 
				+        .addBtn {
			
 
				+          cursor: pointer;
			
 
				+          display: flex;
			
 
				+          justify-content: center;
			
 
				+          align-items: center;
			
 
				+          color: #fff;
			
 
				+          width: 80px;
			
 
				+          height: 30px;
			
 
				+          background-color: #dc3545;
			
 
				+          border-radius: 12px;
			
 
				+          z-index: 999;
			
 
				+          position: absolute;
			
 
				+          right: 56px;
			
 
				+          top: 62px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .paging {
			
 
				+      position: absolute;
			
 
				+      bottom: 15px;
			
 
				+      right: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/tab5/index.vue
+++ b/src/views/tab5/index.vue
@@ -0,0 +1,241 @@
 
				+<template>
			
 
				+  <div class="template">
			
 
				+    <div class="top">
			
 
				+      <div class="location">数据管理 / <span>操作日志</span></div>
			
 
				+    </div>
			
 
				+    <div class="conten">
			
 
				+      <div class="search">
			
 
				+        <div class="txt">筛选查询</div>
			
 
				+        <div class="row">
			
 
				+          <span>操作日期：</span>
			
 
				+          <el-date-picker
			
 
				+            v-model="time"
			
 
				+            type="daterange"
			
 
				+            range-separator="-"
			
 
				+            start-placeholder="开始日期"
			
 
				+            end-placeholder="结束日期"
			
 
				+          >
			
 
				+          </el-date-picker>
			
 
				+
			
 
				+          <span>输入搜索：</span>
			
 
				+          <el-input v-model="form.name" placeholder="请输入"></el-input>
			
 
				+        </div>
			
 
				+        <div class="btn">搜 索</div>
			
 
				+      </div>
			
 
				+      <!-- 表格 -->
			
 
				+      <div class="table">
			
 
				+        <div class="title">
			
 
				+          <div class="txt">数据列表</div>
			
 
				+        </div>
			
 
				+        <el-table
			
 
				+          :header-cell-style="{ background: '#d8dadc' }"
			
 
				+          :data="tableData"
			
 
				+          stripe
			
 
				+          style="width: 100%"
			
 
				+        >
			
 
				+          <el-table-column label="序号" width="80">
			
 
				+            <template slot-scope="scope">
			
 
				+              {{ scope.$index + (form.pageNum - 1) * form.pageSize + 1 }}
			
 
				+            </template>
			
 
				+          </el-table-column>
			
 
				+          <el-table-column prop="name1" label="操作者"></el-table-column>
			
 
				+          <el-table-column prop="name2" label="操作时间"></el-table-column>
			
 
				+          <el-table-column prop="name3" label="ip地址"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="操作类型"> </el-table-column>
			
 
				+          <el-table-column prop="name3" label="操作记录"> </el-table-column>
			
 
				+        </el-table>
			
 
				+      </div>
			
 
				+      <!-- 分页 -->
			
 
				+      <div class="paging">
			
 
				+        <el-pagination layout="prev, pager, next,jumper" :total="50">
			
 
				+        </el-pagination>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  name: 'tab3',
			
 
				+  data () {
			
 
				+    // 这里存放数据
			
 
				+    return {
			
 
				+      time: '',
			
 
				+      form: {
			
 
				+        startTime: '',
			
 
				+        endTime: '',
			
 
				+        pageNum: 1,
			
 
				+        pageSize: 10,
			
 
				+        name: '',
			
 
				+        fenlei: '',
			
 
				+        jishu: ''
			
 
				+      },
			
 
				+      tableData: [
			
 
				+        {
			
 
				+          name1: '111',
			
 
				+          name2: '111',
			
 
				+          name3: '111',
			
 
				+          name4: '111',
			
 
				+          name5: '111',
			
 
				+          name6: '111'
			
 
				+        },
			
 
				+        {
			
 
				+          name1: '222',
			
 
				+          name2: '222',
			
 
				+          name3: '222',
			
 
				+          name4: '222',
			
 
				+          name5: '222',
			
 
				+          name6: '222'
			
 
				+        }
			
 
				+      ]
			
 
				+    }
			
 
				+  },
			
 
				+  // 监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  // 监控data中的数据变化
			
 
				+  watch: {
			
 
				+    time (val) {
			
 
				+      this.handleSelect(val)
			
 
				+    }
			
 
				+  },
			
 
				+  // 方法集合
			
 
				+  methods: {
			
 
				+    // 时间处理----------------
			
 
				+    handleSelect (e) {
			
 
				+      const date = []
			
 
				+      for (const i in e) {
			
 
				+        date.push(this.gettime(e[i]))
			
 
				+      }
			
 
				+      this.form.startTime = date[0]
			
 
				+      if (date[1]) this.form.endTime = date[1].replace('00:00:00', '23:59:59')
			
 
				+    },
			
 
				+    gettime (data) {
			
 
				+      const value =
			
 
				+        data.getFullYear() +
			
 
				+        '-' +
			
 
				+        this.checkTime(data.getMonth() + 1) +
			
 
				+        '-' +
			
 
				+        this.checkTime(data.getDate()) +
			
 
				+        ' ' +
			
 
				+        this.checkTime(data.getHours()) +
			
 
				+        ':' +
			
 
				+        this.checkTime(data.getMinutes()) +
			
 
				+        ':' +
			
 
				+        this.checkTime(data.getSeconds())
			
 
				+      return value
			
 
				+    },
			
 
				+    checkTime (i) {
			
 
				+      if (i < 10) {
			
 
				+        i = '0' + i
			
 
				+      }
			
 
				+      return i
			
 
				+    }
			
 
				+  },
			
 
				+  // 生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created () {},
			
 
				+  // 生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted () {},
			
 
				+  beforeCreate () {}, // 生命周期 - 创建之前
			
 
				+  beforeMount () {}, // 生命周期 - 挂载之前
			
 
				+  beforeUpdate () {}, // 生命周期 - 更新之前
			
 
				+  updated () {}, // 生命周期 - 更新之后
			
 
				+  beforeDestroy () {}, // 生命周期 - 销毁之前
			
 
				+  destroyed () {}, // 生命周期 - 销毁完成
			
 
				+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+}
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.template {
			
 
				+  /deep/.el-table__body-wrapper {
			
 
				+    max-height: 450px;
			
 
				+    overflow-y: auto;
			
 
				+  }
			
 
				+  /deep/.cell {
			
 
				+    padding-left: 20px !important;
			
 
				+  }
			
 
				+  /deep/.el-table__row .el-table__cell {
			
 
				+    padding: 8px 0 !important;
			
 
				+  }
			
 
				+  /deep/.el-pager li {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-prev {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  /deep/.btn-next {
			
 
				+    background: transparent !important;
			
 
				+  }
			
 
				+  padding: 0px 30px;
			
 
				+  .top {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    height: 58px;
			
 
				+    width: 100%;
			
 
				+
			
 
				+    .location {
			
 
				+      font-size: 22px;
			
 
				+      color: #999;
			
 
				+      & > span {
			
 
				+        color: black;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .conten {
			
 
				+    position: relative;
			
 
				+    width: 100%;
			
 
				+    height: 780px;
			
 
				+    .txt {
			
 
				+      font-weight: 700;
			
 
				+      height: 40px;
			
 
				+      border-bottom: 2px dashed #999;
			
 
				+    }
			
 
				+    .search {
			
 
				+      position: relative;
			
 
				+      padding: 15px 20px 0;
			
 
				+      border-radius: 5px;
			
 
				+      box-shadow: 0px 0px 5px 0px;
			
 
				+      height: 130px;
			
 
				+      background-color: #d8dadc;
			
 
				+      .row {
			
 
				+        width: 100%;
			
 
				+        margin-top: 20px;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+        & > div {
			
 
				+          margin-right: 50px;
			
 
				+          width: 20%;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .btn {
			
 
				+        border-radius: 5px;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+        color: #fff;
			
 
				+        cursor: pointer;
			
 
				+        width: 170px;
			
 
				+        height: 40px;
			
 
				+        background-color: #dc3545;
			
 
				+        position: absolute;
			
 
				+        right: 50px;
			
 
				+        top: 75px;
			
 
				+      }
			
 
				+    }
			
 
				+    .table {
			
 
				+      margin-top: 25px;
			
 
				+      .title {
			
 
				+        position: relative;
			
 
				+        padding: 15px 20px 0;
			
 
				+        background-color: #d8dadc;
			
 
				+      }
			
 
				+    }
			
 
				+    .paging {
			
 
				+      position: absolute;
			
 
				+      bottom: 15px;
			
 
				+      right: 50px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>