Главная Обзор Помощь
Регистрация Вход
shaogen1995
/
GShoutai
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

commit

shaogen1995 4 лет назад
Сommit
aa23f140c7
24 измененных файлов с 15068 добавлено и 0 удалено
Единый вид Показать статистику Diff
  1. 5 0
      .editorconfig
  2. 23 0
      .gitignore
  3. 24 0
      README.md
  4. 5 0
      babel.config.js
  5. 13373 0
      package-lock.json
  6. 63 0
      package.json
  7. BIN
      public/favicon.ico
  8. 17 0
      public/index.html
  9. 9 0
      src/App.vue
  10. BIN
      src/assets/img/loginBac.jpg
  11. BIN
      src/assets/img/logo.png
  12. BIN
      src/assets/img/logo22.png
  13. BIN
      src/assets/img/user.jpg
  14. 25 0
      src/assets/style/initial.css
  15. 61 0
      src/components/conTop.vue
  16. 14 0
      src/main.js
  17. 58 0
      src/router/index.js
  18. 153 0
      src/views/layout/index.vue
  19. 127 0
      src/views/login.vue
  20. 227 0
      src/views/tab1/index.vue
  21. 224 0
      src/views/tab2/index.vue
  22. 204 0
      src/views/tab3/index.vue
  23. 215 0
      src/views/tab4/index.vue
  24. 241 0
      src/views/tab5/index.vue

+ 5 - 0
.editorconfig
Просмотреть файл 

@@ -0,0 +1,5 @@
 
+[*.{js,jsx,ts,tsx,vue}]
 
+indent_style = space
 
+indent_size = 2
 
+trim_trailing_whitespace = true
 
+insert_final_newline = true

+ 23 - 0
.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?

+ 24 - 0
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/).

+ 5 - 0
babel.config.js
Просмотреть файл 

@@ -0,0 +1,5 @@
 
+module.exports = {
 
+  presets: [
 
+    '@vue/cli-plugin-babel/preset'
 
+  ]
 
+}

Разница между файлами не показана из-за своего большого размера
+ 13373 - 0
package-lock.json


+ 63 - 0
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"
 
+    ]
 
+  }
 
+}

BIN
public/favicon.ico
Просмотреть файл


+ 17 - 0
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>

+ 9 - 0
src/App.vue
Просмотреть файл 

@@ -0,0 +1,9 @@
 
+<template>
 
+  <div id="app">
 
+    <Router-view/>
 
+  </div>
 
+</template>
 
+
 
+<style lang="less">
 
+
 
+</style>

BIN
src/assets/img/loginBac.jpg
Просмотреть файл


BIN
src/assets/img/logo.png
Просмотреть файл


BIN
src/assets/img/logo22.png
Просмотреть файл


BIN
src/assets/img/user.jpg
Просмотреть файл


+ 25 - 0
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;
 
+}

+ 61 - 0
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>

+ 14 - 0
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')

+ 58 - 0
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

+ 153 - 0
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>

+ 127 - 0
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>

+ 227 - 0
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>

+ 224 - 0
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>

+ 204 - 0
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>

+ 215 - 0
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>

+ 241 - 0
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>