up

houtai/package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "element-ui": "2.15.2",
+        "js-base64": "^3.7.2",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0"
       },
@@ -3112,6 +3114,14 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "node_modules/async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "dependencies": {
+        "babel-runtime": "6.x"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -3163,6 +3173,11 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "node_modules/babel-loader": {
       "version": "8.2.5",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz",
@@ -3230,6 +3245,27 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -5182,7 +5218,6 @@
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
       "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5663,6 +5698,22 @@
       "integrity": "sha512-OpEjTADzGoXABjqobGhpy0D2YsTncAax7IkER68ycc4adaq0dqEG9//9aenKPy7BGA90bqQdLac0dPp6uMkcSg==",
       "dev": true
     },
+    "node_modules/element-ui": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.2.tgz",
+      "integrity": "sha512-S66VvOt1AR698uzxAnJeajnIPI1eIzlkKXHx2F2v94PAs/8JuyRcLOUGy100mJHIIaSkRlxVOtI+As2XTB8Oew==",
+      "dependencies": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^2.5.17"
+      }
+    },
     "node_modules/elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
@@ -8051,6 +8102,11 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "node_modules/js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -9021,6 +9077,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -10938,6 +10999,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -12476,6 +12542,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -16103,7 +16177,8 @@
       "version": "4.5.19",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.19.tgz",
       "integrity": "sha512-DUmfdkG3pCdkP7Iznd87RfE9Qm42mgp2hcrNcYQYSru1W1gX2dG/JcW8bxmeGSa06lsxi9LEIc/QD1yPajSCZw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "4.5.19",
@@ -16261,7 +16336,8 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -16500,13 +16576,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "alphanum-sort": {
       "version": "1.0.2",
@@ -16725,6 +16803,14 @@
       "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
@@ -16764,6 +16850,11 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmmirror.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-loader": {
       "version": "8.2.5",
       "resolved": "https://registry.npmmirror.com/babel-loader/-/babel-loader-8.2.5.tgz",
@@ -16815,6 +16906,27 @@
         "@babel/helper-define-polyfill-provider": "^0.3.1"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -18471,8 +18583,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npmmirror.com/deepmerge/-/deepmerge-1.5.2.tgz",
-      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==",
-      "dev": true
+      "integrity": "sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ=="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -18868,6 +18979,19 @@
       "integrity": "sha512-OpEjTADzGoXABjqobGhpy0D2YsTncAax7IkER68ycc4adaq0dqEG9//9aenKPy7BGA90bqQdLac0dPp6uMkcSg==",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.2",
+      "resolved": "https://registry.npmmirror.com/element-ui/-/element-ui-2.15.2.tgz",
+      "integrity": "sha512-S66VvOt1AR698uzxAnJeajnIPI1eIzlkKXHx2F2v94PAs/8JuyRcLOUGy100mJHIIaSkRlxVOtI+As2XTB8Oew==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmmirror.com/elliptic/-/elliptic-6.5.4.tgz",
@@ -20807,6 +20931,11 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "js-base64": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.2.tgz",
+      "integrity": "sha512-NnRs6dsyqUXejqk/yv2aiXlAvOs56sLkX6nUdeaNezI5LFFLlsZjOThmwnrcwh5ZZRwZlCMnVAY3CvhIhoVEKQ=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -21619,6 +21748,11 @@
         "sort-keys": "^1.0.0"
       }
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
@@ -23242,6 +23376,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmmirror.com/resolve/-/resolve-1.22.1.tgz",
@@ -24543,6 +24682,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",

houtai/package.json

@@ -8,6 +8,8 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-ui": "2.15.2",
+    "js-base64": "^3.7.2",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"
   },

houtai/src/App.vue

@@ -1,32 +1,14 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <Router-view/>
   </div>
 </template>
 
 <style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+#app{
+  width: 100vw;
+  height: 100vh;
+  min-width: 1800px;
+  min-height: 900px;
 }
 </style>

houtai/src/assets/base.css

@@ -0,0 +1,38 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+ul li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* element 按钮 */
+.el-button--primary {
+  background-color: #6F774E;
+  border-color: #6F774E;
+}
+
+.el-button--primary:focus,
+.el-button--primary:hover {
+  background: #86964a;
+  border-color: #86964a;
+}
+
+.el-button--text {
+  color: #DB5858;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled):hover {
+  color: #BD9D6C;
+}
+
+.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background-color: #BD9D6C;
+  color: #fff;
+}

houtai/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

houtai/src/main.js

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
 Vue.config.productionTip = false
-
+import './assets/base.css'
 new Vue({
   router,
   render: h => h(App)

houtai/src/router/index.js

@@ -1,22 +1,33 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-
+import { Message } from 'element-ui'
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'Login',
+    component: () => import('../views/Login.vue')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/Layout',
+    name: 'Layout',
+    component: () => import('../views/Layout.vue'),
+    children: [
+      {
+        path: 'tab1',
+        name: 'tab1',
+        meta: { myInd: 1, myBac: 'tab1Bac' },
+        component: () => import('../views/tab1/index.vue')
+      },
+      {
+        path: 'tab2',
+        name: 'tab2',
+        meta: { myInd: 2, myBac: 'tab2Bac' },
+        component: () => import('../views/tab2/index.vue')
+      }
+
+    ]
   }
 ]
 
@@ -24,4 +35,18 @@ const router = new VueRouter({
   routes
 })
 
+// router.beforeEach((to, from, next) => {
+//   // 如果是去登录页，不需要验证，直接下一步
+//   if (to.name === 'login') next()
+//   // 否则要有token值才能下一步，不然就返回登录页
+//   else {
+//     const token = localStorage.getItem('JMYZU_token')
+//     if (token) next()
+//     else {
+//       Message.warning('登录失效，请重新登录')
+//       next({ name: 'login' })
+//     }
+//   }
+// })
+
 export default router

houtai/src/utils/pass.js

@@ -0,0 +1,106 @@
+/* eslint-disable */
+function NoToChinese (num) {
+  num = String(num)
+  var chnNumChar = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']
+  if (num == 0) {
+    return chnNumChar[0]
+  }
+  let tmp = ''
+  for (let i = 0; i < num.length; i++) {
+    const ele = num.charAt(i)
+    tmp += chnNumChar[ele]
+  }
+
+  return tmp
+}
+
+function randomWord (randomFlag, min, max) {
+  let str = ''
+  let range = min
+  const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+  // 随机产生
+  if (randomFlag) {
+    range = Math.round(Math.random() * (max - min)) + min
+  }
+  for (var i = 0; i < range; i++) {
+    const pos = Math.round(Math.random() * (arr.length - 1))
+    str += arr[pos]
+  }
+  return str
+}
+
+module.exports = {
+  formatDate: function (time) {
+    var weekArr = ['日', '一', '二', '三', '四', '五', '六']
+    var date = new Date(time)
+    var year = date.getFullYear()
+    var month = date.getMonth() + 1
+    var day = date.getDate()
+    var week = '星期' + weekArr[date.getDay()]
+    if (window.innerWidth < 1700) {
+      return (
+        year +
+        '年' +
+        (String(month).length > 1 ? month : '0' + month) +
+        '月' +
+        (String(day).length > 1 ? day : '0' + day) +
+        '日' +
+        '<br/>' +
+        week
+      )
+    }
+    return (
+      year +
+      '年' +
+      (String(month).length > 1 ? month : '0' + month) +
+      '月' +
+      (String(day).length > 1 ? day : '0' + day) +
+      '日' +
+      ' ' +
+      week
+    )
+  },
+  smoothscrollpos: function (domName) {
+    if (domName == '/') {
+      return window.scrollTo(0, 0)
+    }
+    const smoothscroll = () => {
+      const dom = document.getElementById(domName)
+      // window.scrollTo({
+      //   top:dom.offsetTop - 100,
+      //   left:0,
+      //   behavior: "smooth"
+      // })
+      dom && window.scrollTo(0, dom.offsetTop - 120)
+    }
+    smoothscroll()
+  },
+
+  formatTime: function (time, fan = false) {
+    let t1 = time.split(' ')[0].split('-')
+    if (fan) {
+      t1 = t1.map((item) => {
+        const t = NoToChinese(item)
+        return t
+      })
+    }
+    return t1
+  },
+  encodeStr: function (str, strv = '') {
+    const NUM = 2
+    const front = randomWord(false, 8)
+    const middle = randomWord(false, 8)
+    const end = randomWord(false, 8)
+
+    const str1 = str.substring(0, NUM)
+    const str2 = str.substring(NUM)
+
+    if (strv) {
+      const strv1 = strv.substring(0, NUM)
+      const strv2 = strv.substring(NUM)
+      return [front + str2 + middle + str1 + end, front + strv2 + middle + strv1 + end]
+    }
+
+    return front + str2 + middle + str1 + end
+  }
+}

houtai/src/utils/request.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+const service = axios.create({
+  // baseURL: 'http://192.168.0.135:8017', // 本地调试
+  // baseURL: 'http://project.4dage.com:8017', // 线上调试
+  baseURL: '', // build
+  timeout: 5000
+})
+// 请求拦截器
+service.interceptors.request.use(function (config) {
+  // console.log('触发拦截器')
+  // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+  const token = localStorage.getItem('WLBWG_token')
+  if (token) { // 判断是否有token,有，则
+    // config.headers['Authorization'] = token
+    config.headers.token = token
+  }
+
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+// 添加响应拦截器
+service.interceptors.response.use(function (response) {
+  // console.log('触发相应拦截器', response)
+  // 对响应数据做点什么--response就是发送每个请求的返回值
+  if (response.data.code === 5001 || response.data.code === 5002) {
+    // Toast.fail('未登录，请先登录')
+    localStorage.removeItem('WLBWG_token')
+  }
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export default service

houtai/src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

houtai/src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

houtai/src/views/Layout.vue

@@ -0,0 +1,334 @@
+<!--  -->
+<template>
+  <div class="Layout" :style="`background: url('/data/${$route.meta.myBac}.png');background-size: 100% 100%;`">
+    <div class="top">
+      <div class="topL">温岭社教活动管理后台</div>
+      <div class="topR" @mouseenter="cut = true" @mouseleave="cut = false">
+        <div class="user">
+          <span>admin</span>
+          <!-- 下箭头 -->
+          <div class="pull_down" v-if="cut"></div>
+          <div class="pull_up" v-else></div>
+        </div>
+        <!-- 点击箭头出来的ul -->
+        <ul class="user_handle" v-show="cut">
+          <li @click="isShow = true">修改密码</li>
+          <li @click="outLogin">退出登录</li>
+        </ul>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="main">
+      <div class="logo">
+        <img src="../assets/img/logo.png" alt="" />
+      </div>
+
+      <div class="mainL">
+        <div class="mainLBox">
+          <div class="tit">内部管理</div>
+          <div
+            class="pathUrl"
+            :class="{ active: $route.meta.myInd === 1 }"
+            @click="push('/layout/tab1')"
+          >
+            社教活动管理
+          </div>
+        </div>
+        <div class="mainLBox">
+          <div class="tit tit2">系统管理</div>
+          <div
+            class="pathUrl"
+            :class="{ active: $route.meta.myInd === 2 }"
+            @click="push('/layout/tab2')"
+          >
+            操作日志
+          </div>
+        </div>
+      </div>
+      <!-- 主要内容 -->
+      <div class="mainR">
+        <Router-view />
+      </div>
+    </div>
+    <!-- 点击修改密码出现弹窗 -->
+    <el-dialog title="修改密码" :visible.sync="isShow" @close="btnX()">
+      <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
+        <el-form-item label="旧密码：" prop="oldPassword">
+          <el-input
+            v-model="form.oldPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="新密码：" prop="newPassword">
+          <el-input
+            v-model="form.newPassword"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="确定新密码：" prop="checkPass">
+          <el-input
+            v-model="form.checkPass"
+            placeholder="请输入"
+            show-password
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="btnX">取 消</el-button>
+        <el-button type="primary" @click="btnOk">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { encodeStr } from '../../utils/pass'
+// import { Base64 } from 'js-base64'
+// import { updatePwd } from '@/apis/login'
+
+export default {
+  name: "Layout",
+  components: {},
+  data() {
+    // 这里存放数据
+    const validatePass2 = (rule, value, callback) => {
+      if (value !== this.form.newPassword) {
+        callback(new Error("两次输入密码不一致!"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      // 修改密码
+      form: {
+        oldPassword: "",
+        newPassword: "",
+        checkPass: "",
+      },
+      rules: {
+        checkPass: [{ validator: validatePass2, trigger: "blur" }],
+        oldPassword: [{ required: true, message: "不能为空", trigger: "blur" }],
+        newPassword: [
+          { required: true, message: "不能为空", trigger: "blur" },
+          { max: 15, message: "不能超过15个字", trigger: "blur" },
+        ],
+      },
+      userName: "",
+      cut: false,
+      isShow: false,
+      tab1: [
+        { name: "场景管理", id: 1, url: "/layout/tab1" },
+        { name: "典藏管理", id: 2, url: "/layout/tab2" },
+      ],
+      tab2: [{ name: "操作日志", id: 3, url: "/layout/tab3" }],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 修改密码点击取消
+    btnX() {
+      this.$refs.ruleForm.resetFields();
+      this.cut = false;
+      this.isShow = false;
+      this.form = {
+        oldPassword: "",
+        newPassword: "",
+        checkPass: "",
+      };
+    },
+    // 修改密码点击确定
+    async btnOk() {
+      // await this.$refs.ruleForm.validate();
+      // try {
+      //   const data = {
+      //     oldPassword: encodeStr(Base64.encode(this.form.oldPassword)),
+      //     newPassword: encodeStr(Base64.encode(this.form.newPassword)),
+      //   };
+      //   const res = await updatePwd(data);
+      //   if (res.code === 0) {
+      //     this.$message.success("修改成功");
+      //     localStorage.clear("WLBWG_token");
+      //     localStorage.clear("WLBWG_userInfo");
+      //     this.$router.push("/");
+      //   } else this.$message.error(res.msg);
+      // } catch (error) {
+      //   console.log(error);
+      // }
+    },
+    // 点击退出登录
+    outLogin() {
+      this.cut = false;
+      this.$confirm("确定退出吗?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          localStorage.clear("WLBWG_token");
+          localStorage.clear("WLBWG_userName");
+          this.$router.push("/");
+          this.$message.success("退出成功!");
+        })
+        .catch(() => {
+          this.$message.info("已取消");
+        });
+    },
+    push(url) {
+      this.$router.push(url).catch(() => {});
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Layout {
+  width: 100%;
+  height: 100%;
+  .top {
+    box-shadow: 1px 1px 6px 3px;
+    height: 60px;
+    background-color: #6f774e;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 45px;
+    .topL {
+      letter-spacing: 5px;
+      font-size: 24px;
+      color: #fff;
+    }
+    .topR {
+      position: relative;
+      width: 150px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .user {
+        color: #fff;
+        cursor: pointer;
+        position: relative;
+        display: flex;
+        align-items: center;
+        font-weight: 700;
+        img {
+          margin-right: 15px;
+          width: 34px;
+          height: 34px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+        .pull_down {
+          position: absolute;
+          right: -25px;
+          bottom: 4px;
+          display: inline-block;
+          width: 0;
+          height: 0;
+          border-left: 8px solid transparent;
+          border-right: 8px solid transparent;
+          border-bottom: 8px solid #fff;
+        }
+        .pull_up {
+          cursor: pointer;
+          position: absolute;
+          right: -25px;
+          bottom: 4px;
+          display: inline-block;
+          width: 0;
+          height: 0;
+          border-left: 8px solid transparent;
+          border-right: 8px solid transparent;
+          border-top: 8px solid #fff;
+        }
+      }
+      .user_handle {
+        z-index: 999;
+        padding: 10px 40px;
+        position: absolute;
+        right: 0;
+        bottom: -90px;
+        background-color: #6f774e;
+        li {
+          color: #fff;
+          cursor: pointer;
+          margin: 10px 0;
+        }
+        li:hover {
+          color: orange;
+        }
+      }
+    }
+  }
+  .main {
+    margin-top: 20px;
+    width: 100%;
+    height: calc(100% - 80px);
+    padding: 180px 24px 20px;
+    display: flex;
+    position: relative;
+    .logo {
+      position: absolute;
+      top: 38px;
+      left: 198px;
+    }
+    .mainL {
+      box-shadow: 1px 1px 6px 0px;
+      background-color: #fff;
+      width: 210px;
+      height: 100%;
+      margin-right: 20px;
+      .mainLBox {
+        width: 100%;
+        height: 50%;
+        padding-top: 5px;
+        .tit {
+          width: 95%;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          color: #fff;
+          letter-spacing: 3px;
+          box-shadow: 1px 1px 6px 0px black;
+          border-radius: 0 20px 20px 0;
+          background-color: #6f774e;
+        }
+        .tit2 {
+          background-color: #bd9d6c;
+        }
+        .pathUrl {
+          padding-top: 40px;
+          width: 100%;
+          text-align: center;
+          cursor: pointer;
+          &:hover {
+            color: orange;
+          }
+        }
+        .active {
+          color: orange;
+        }
+      }
+    }
+    .mainR {
+      flex: 1;
+    }
+  }
+}
+</style>

houtai/src/views/Login.vue

@@ -0,0 +1,196 @@
+<!--  -->
+<template>
+  <div class="Login">
+    <div class="top">温岭社教活动管理后台</div>
+    <div class="main">
+      <!-- logo -->
+      <div class="logo">
+        <img src="../assets/img/logo.png" alt="">
+      </div>
+      <div class="mainCon">
+        <div class="mainConL">
+          <p>温岭社教活动</p>
+          <p>管理后台</p>
+        </div>
+        <div class="mainConR">
+          <div class="tit">欢迎登录</div>
+          <p>请输入账号密码登录系统</p>
+          <div class="input">
+            <el-form
+              :model="ruleForm"
+              :rules="rules"
+              ref="ruleForm"
+              class="demo-ruleForm"
+            >
+              <el-form-item prop="userName">
+                <el-input
+                  prefix-icon="el-icon-user"
+                  v-model="ruleForm.userName"
+                  placeholder="账号"
+                ></el-input>
+              </el-form-item>
+              <el-form-item prop="passWord">
+                <el-input
+                  prefix-icon="el-icon-unlock"
+                  show-password
+                  v-model="ruleForm.passWord"
+                  placeholder="密码"
+                ></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+          <!-- 登录按钮 -->
+          <div class="loginBtn" @click="login">登 录</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { encodeStr } from "../utils/pass";
+// import { Base64 } from "js-base64";
+// import { userLogin } from '@/apis/login'
+export default {
+  name: "Login",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      ruleForm: {
+        userName: "",
+        passWord: "",
+      },
+      rules: {
+        userName: [{ required: true, message: "不能为空", trigger: "blur" }],
+        passWord: [{ required: true, message: "不能为空", trigger: "blur" }],
+      },
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    async login() {
+      this.$router.push("/layout/tab1");
+      this.$message.success("登录成功");
+
+      // try {
+      //   await this.$refs.ruleForm.validate();
+      //   const data = {
+      //     userName: this.ruleForm.userName,
+      //     passWord: encodeStr(Base64.encode(this.ruleForm.passWord)),
+      //   };
+      //   const res = await userLogin(data);
+      //   if (res.code === 0) {
+      //     localStorage.setItem("WLBWG_token", res.data.token);
+      //     localStorage.setItem("WLBWG_userName", res.data.user.userName);
+      //     this.$router.push("/layout/tab1");
+      //     this.$message.success("登录成功");
+      //   } else this.$message.warning(res.msg);
+      // } catch (error) {
+      //   console.log(error);
+      // }
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Login {
+  width: 100%;
+  height: 100%;
+  background: url("../assets/img/logoBAC.png");
+  background-size: 100% 100%;
+  .top {
+    color: #fff;
+    box-shadow: 1px 1px 6px 3px black;
+    letter-spacing: 5px;
+    width: 100%;
+    height: 60px;
+    line-height: 60px;
+    margin-bottom: 20px;
+    background-color: #6f774e;
+    font-size: 24px;
+    padding-left: 60px;
+  }
+  .main {
+    width: 100%;
+    height: calc(100% - 80px);
+    position: relative;
+    .logo{
+      position: absolute;
+      top: 38px;
+      left: 198px;
+    }
+    .mainCon {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 780px;
+      height: 430px;
+      box-shadow: 1px 1px 6px 0px;
+      .mainConL {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 300px;
+        height: 100%;
+        background-color: #6f774e;
+        & > p {
+          letter-spacing: 2px;
+          text-align: center;
+          font-size: 24px;
+          font-weight: 700;
+          color: #fff;
+          margin-bottom: 30px;
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+      .mainConR {
+        padding: 100px 120px 0;
+        background-color: #fff;
+        width: 480px;
+        height: 100%;
+        color: black;
+        .tit {
+          letter-spacing: 2px;
+          font-size: 24px;
+          font-weight: 700;
+        }
+        & > p {
+          margin: 10px 0 30px;
+          font-size: 12px;
+        }
+      }
+      .loginBtn {
+        cursor: pointer;
+        border-radius: 5px;
+        text-align: center;
+        height: 40px;
+        background-color: #6f774e;
+        line-height: 40px;
+        font-weight: 700;
+        color: #fff;
+      }
+    }
+  }
+}
+</style>

houtai/src/views/tab1/index.vue

@@ -0,0 +1,295 @@
+<!--  -->
+<template>
+  <div class="tab1">
+    <div class="top">
+      <div class="tit"></div>
+      活动列表
+      <div class="btn"></div>
+    </div>
+    <div class="main">
+      <!-- 顶部状态栏 -->
+      <div class="mainTop">
+        <div
+          @click="cutTop(item.id)"
+          v-for="item in mainTop"
+          :key="item.id"
+          :class="{ active: mainTopInd === item.id }"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+      <!-- 搜索 -->
+      <div class="mainSear">
+        <div>
+          <span>发 布 时 间：</span>
+          <el-date-picker
+            value-format="yyyy-MM-dd"
+            v-model="time"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <div>
+          <span>关 键 字：</span>
+          <el-input
+            style="width: 300px"
+            type="text"
+            placeholder="请输入标题、内容简介关键词"
+            v-model="formData.searchKey"
+            maxlength="20"
+          >
+          </el-input>
+        </div>
+        <div class="btnn">
+          <el-button type="primary">查 询</el-button>&emsp;
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%" height="370">
+          <el-table-column label="编号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="name" label="标题"></el-table-column>
+          <el-table-column prop="address" label="活动地点"> </el-table-column>
+          <el-table-column prop="address" label="浏览量"> </el-table-column>
+          <el-table-column prop="address" label="活动主持人"> </el-table-column>
+          <el-table-column prop="address" label="活动时间"> </el-table-column>
+          <el-table-column prop="address" label="发布时间"> </el-table-column>
+          <el-table-column prop="address" label="状态"> </el-table-column>
+          <el-table-column label="操作" width="280">
+            <template #default="{ row }">
+              <el-button type="text">预约名单导出</el-button>
+              <el-button type="text">发布</el-button>
+              <el-button type="text">编辑{{ row.name }}</el-button>
+              <el-button type="text">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="paging">
+        <span>共 {{ total }} 条</span>
+        <el-pagination
+          background
+          layout="sizes,prev, pager, next"
+          :total="total"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tab1",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 100,
+      time: "",
+      mainTopInd: 1,
+      mainTop: [
+        { id: 1, name: "全部" },
+        { id: 2, name: "草稿中" },
+        { id: 3, name: "活动中" },
+        { id: 4, name: "未开始" },
+        { id: 5, name: "已介绍" },
+      ],
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+        startTime: "",
+        endTime: "",
+      },
+      tableData: [
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    time(val) {
+      if (!val) this.formData.startTime = this.formData.endTime = "";
+      else {
+        this.formData.startTime = val[0];
+        this.formData.endTime = val[1];
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    cutTop(id) {
+      this.mainTopInd = id;
+    },
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+      this.goodsList(this.formData);
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.goodsList(this.formData);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab1 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .top {
+    position: relative;
+    padding: 0 30px;
+    width: 100%;
+    height: 50px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px black;
+    color: #b7b7b7;
+    font-size: 14px;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: center;
+    .tit {
+      margin-right: 5px;
+      width: 3px;
+      height: 20px;
+      background-color: #6f774e;
+    }
+    .btn {
+      cursor: pointer;
+      position: absolute;
+      right: 30px;
+      top: 5px;
+      width: 110px;
+      height: 40px;
+      background: url("../../assets/img/add.png");
+      background-size: 100% 100%;
+    }
+  }
+  .main {
+    padding: 10px 35px 24px;
+    margin-top: 15px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px;
+    width: 100%;
+    height: calc(100% - 65px);
+    .mainTop {
+      display: flex;
+      color: #3a3a3a;
+      & > div {
+        font-weight: 700;
+        cursor: pointer;
+        letter-spacing: 2px;
+        padding: 0 15px;
+        margin-right: 20px;
+      }
+      .active {
+        position: relative;
+        pointer-events: none;
+        color: #6f774e;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 11px;
+          height: 17px;
+          top: 2px;
+          left: 0px;
+          background: url("../../assets/img/left.png");
+          background-size: 100% 100%;
+        }
+        &::before {
+          content: "";
+          position: absolute;
+          width: 11px;
+          height: 17px;
+          top: 2px;
+          right: 0px;
+          background: url("../../assets/img/right.png");
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .mainSear {
+      position: relative;
+      margin-top: 22px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      & > div {
+        margin-right: 60px;
+        & > span {
+          font-weight: 700;
+        }
+      }
+      .btnn{
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
+    }
+    .table {
+      margin-top: 30px;
+    }
+    .paging {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 15px;
+      right: 50px;
+      & > span {
+        margin-right: 15px;
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>

houtai/src/views/tab2/index.vue

@@ -0,0 +1,244 @@
+<!--  -->
+<template>
+  <div class="tab2">
+    <div class="top">
+      <div class="tit"></div>
+      操作日志
+    </div>
+    <div class="main">
+      <!-- 搜索 -->
+      <div class="mainSear">
+        <div>
+          <span>操 作 日 期：</span>
+          <el-date-picker
+            value-format="yyyy-MM-dd"
+            v-model="time"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <div>
+          <el-button type="primary">查 询</el-button>&emsp;
+          <el-button>重 置</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%" height="370">
+          <el-table-column label="编号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="address" label="操作者"> </el-table-column>
+          <el-table-column prop="address" label="操作日期"> </el-table-column>
+          <el-table-column prop="address" label="IP地址"> </el-table-column>
+          <el-table-column prop="address" label="操作记录"> </el-table-column>
+        </el-table>
+      </div>
+      <!-- 分页 -->
+      <div class="paging">
+        <span>共 {{ total }} 条</span>
+        <el-pagination
+          background
+          layout="sizes,prev, pager, next"
+          :total="total"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "tab2",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 100,
+      time: "",
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        startTime: "",
+        endTime: "",
+      },
+      tableData: [
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+        { name: 1 },
+      ],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    time(val) {
+      if (!val) this.formData.startTime = this.formData.endTime = "";
+      else {
+        this.formData.startTime = val[0];
+        this.formData.endTime = val[1];
+      }
+    },
+  },
+  //方法集合
+  methods: {
+    // 分页器方法
+    currentChange(val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val;
+      this.goodsList(this.formData);
+    },
+    sizeChange(val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1;
+      this.formData.pageSize = val;
+      this.goodsList(this.formData);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.tab2 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .top {
+    position: relative;
+    padding: 0 30px;
+    width: 100%;
+    height: 50px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px black;
+    color: #b7b7b7;
+    font-size: 14px;
+    letter-spacing: 2px;
+    display: flex;
+    align-items: center;
+    .tit {
+      margin-right: 5px;
+      width: 3px;
+      height: 20px;
+      background-color: #6f774e;
+    }
+    .btn {
+      cursor: pointer;
+      position: absolute;
+      right: 30px;
+      top: 5px;
+      width: 110px;
+      height: 40px;
+      background: url("../../assets/img/add.png");
+      background-size: 100% 100%;
+    }
+  }
+  .main {
+    padding: 10px 35px 24px;
+    margin-top: 15px;
+    background-color: #fff;
+    box-shadow: 1px 1px 6px 0px;
+    width: 100%;
+    height: calc(100% - 65px);
+    .mainTop {
+      display: flex;
+      color: #3a3a3a;
+      & > div {
+        font-weight: 700;
+        cursor: pointer;
+        letter-spacing: 2px;
+        padding: 0 15px;
+        margin-right: 20px;
+      }
+      .active {
+        position: relative;
+        pointer-events: none;
+        color: #6f774e;
+        &::after {
+          content: "";
+          position: absolute;
+          width: 11px;
+          height: 17px;
+          top: 2px;
+          left: 0px;
+          background: url("../../assets/img/left.png");
+          background-size: 100% 100%;
+        }
+        &::before {
+          content: "";
+          position: absolute;
+          width: 11px;
+          height: 17px;
+          top: 2px;
+          right: 0px;
+          background: url("../../assets/img/right.png");
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .mainSear {
+      margin-top: 22px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      & > div {
+        margin-right: 60px;
+        & > span {
+          font-weight: 700;
+        }
+      }
+    }
+    .table {
+      margin-top: 30px;
+    }
+    .paging {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      bottom: 15px;
+      right: 50px;
+      & > span {
+        margin-right: 15px;
+        font-size: 13px;
+      }
+    }
+  }
+}
+</style>