添加Login背景特效-- 修改主题颜色

package.json

@@ -34,6 +34,7 @@
     "lodash": "^4.17.20",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
+    "particles.js": "^2.0.0",
     "path-to-regexp": "2.4.0",
     "pinyin": "2.9.0",
     "screenfull": "4.2.0",

public/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 30,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#FFF"
+      },
+      "polygon": {
+        "nb_sides": 1
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 2,
+        "height":2
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 5,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 20,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 300,
+      "color": "#FFF",
+      "opacity": 0.2,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 12,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 800,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 500,
+        "size": 80,
+        "duration": 2,
+        "opacity": 0.8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

src/components/ActionButton/index.vue

@@ -4,18 +4,41 @@
     <div class="top-action-button-left">
       <!-- 刷新按钮 -->
       <el-button v-if="openRefresh" type="primary" icon="el-icon-refresh-right" :size="btnSize" @click="handleRefresh" />
-      <!-- 添加按钮 -->
-      <el-button v-if="openAdd" :size="btnSize" :type="addBtnType" @click="handleAdd">
-        <i v-if="!addBtnSvg" :class="addBtnIcon" />
-        <svg-icon v-else :icon-class="addBtnIcon" style="margin-right: 5px;" />
-        <span v-if="addBtnText.length > 0">{{ addBtnText }}</span>
+
+      <!-- 按钮1 -->
+      <el-button v-if="openBtn1" :disabled="disabledBtn1" :size="btnSize" :type="typeBtn1" :plain="plainBtn1" @click="handleButton1">
+        <i v-if="!isSvgBtn1" :class="iconBtn1" />
+        <svg-icon v-else :icon-class="iconBtn1" style="margin-right: 6px;" />
+        <span v-if="textBtn1.length > 0">{{ textBtn1 }}</span>
+      </el-button>
+
+      <!-- 按钮2 -->
+      <el-button v-if="openBtn2" :disabled="disabledBtn2" :size="btnSize" :type="typeBtn2" :plain="plainBtn2" @click="handleButton2">
+        <i v-if="!isSvgBtn2" :class="iconBtn2" />
+        <svg-icon v-else :icon-class="iconBtn2" style="margin-right: 6px;" />
+        <span v-if="textBtn2.length > 0">{{ textBtn2 }}</span>
       </el-button>
-      <!-- 删除按钮 -->
-      <el-button v-if="openDelete" :size="btnSize" :type="deleteBtnType" @click="handleDelete">
-        <i v-if="!deleteBtnSvg" :class="deleteBtnIcon" />
-        <svg-icon v-else :icon-class="deleteBtnIcon" style="margin-right: 5px;" />
-        <span v-if="deleteBtnText.length > 0">{{ deleteBtnText }}</span>
+
+      <!-- 按钮3 -->
+      <el-button v-if="openBtn3" :disabled="disabledBtn3" :size="btnSize" :type="typeBtn3" :plain="plainBtn3" @click="handleButton3">
+        <i v-if="!isSvgBtn3" :class="iconBtn3" />
+        <svg-icon v-else :icon-class="iconBtn3" style="margin-right: 6px;" />
+        <span v-if="textBtn3.length > 0">{{ textBtn3 }}</span>
       </el-button>
+
+      <!-- 按钮4 -->
+      <el-button v-if="openBtn4" :disabled="disabledBtn4" :size="btnSize" :type="typeBtn4" :plain="plainBtn4" @click="handleButton4">
+        <i v-if="!isSvgBtn4" :class="iconBtn4" />
+        <svg-icon v-else :icon-class="iconBtn4" style="margin-right: 6px;" />
+        <span v-if="textBtn4.length > 0">{{ textBtn4 }}</span>
+      </el-button>
+
+      <el-button v-if="openBtn5" :disabled="disabledBtn5" :size="btnSize" :type="typeBtn5" :plain="plainBtn5" @click="handleButton5">
+        <i v-if="!isSvgBtn5" :class="iconBtn5" />
+        <svg-icon v-else :icon-class="iconBtn5" style="margin-right: 6px;" />
+        <span v-if="textBtn5.length > 0">{{ textBtn5 }}</span>
+      </el-button>
+
     </div>
 
     <!-- 右边 -->
@@ -55,6 +78,7 @@
  */
 export default {
   props: {
+    // 基础设置
     openSearch: {
       type: Boolean,
       default: true
@@ -67,61 +91,173 @@ export default {
       type: String,
       default: 'mini'
     },
-    // 添加按钮
-    openAdd: {
+    // 按钮1
+    openBtn1: {
       type: Boolean,
-      default: true
+      default: false
     },
-    addBtnSvg: {
+    isSvgBtn1: {
       type: Boolean,
       default: false
     },
-    addBtnType: {
+    typeBtn1: {
       type: String,
       default: 'primary'
     },
-    addBtnIcon: {
+    iconBtn1: {
       type: String,
       default: 'el-icon-plus'
     },
-    addBtnText: {
+    textBtn1: {
       type: String,
       default: ''
     },
-    // 删除按钮
-    openDelete: {
+    disabledBtn1: {
       type: Boolean,
-      default: true
+      default: false
     },
-    deleteBtnSvg: {
+    plainBtn1: {
       type: Boolean,
       default: false
     },
-    deleteBtnType: {
+    // 按钮2
+    openBtn2: {
+      type: Boolean,
+      default: false
+    },
+    isSvgBtn2: {
+      type: Boolean,
+      default: false
+    },
+    typeBtn2: {
       type: String,
-      default: 'danger'
+      default: 'primary'
     },
-    deleteBtnIcon: {
+    iconBtn2: {
       type: String,
-      default: 'el-icon-delete'
+      default: 'el-icon-plus'
     },
-    deleteBtnText: {
+    textBtn2: {
       type: String,
       default: ''
+    },
+    disabledBtn2: {
+      type: Boolean,
+      default: false
+    },
+    plainBtn2: {
+      type: Boolean,
+      default: false
+    },
+    // 按钮3
+    openBtn3: {
+      type: Boolean,
+      default: false
+    },
+    isSvgBtn3: {
+      type: Boolean,
+      default: false
+    },
+    typeBtn3: {
+      type: String,
+      default: 'primary'
+    },
+    iconBtn3: {
+      type: String,
+      default: 'el-icon-plus'
+    },
+    textBtn3: {
+      type: String,
+      default: ''
+    },
+    disabledBtn3: {
+      type: Boolean,
+      default: false
+    },
+    plainBtn3: {
+      type: Boolean,
+      default: false
+    },
+    // 按钮4
+    openBtn4: {
+      type: Boolean,
+      default: false
+    },
+    isSvgBtn4: {
+      type: Boolean,
+      default: false
+    },
+    typeBtn4: {
+      type: String,
+      default: 'primary'
+    },
+    iconBtn4: {
+      type: String,
+      default: 'el-icon-plus'
+    },
+    textBtn4: {
+      type: String,
+      default: ''
+    },
+    disabledBtn4: {
+      type: Boolean,
+      default: false
+    },
+    plainBtn4: {
+      type: Boolean,
+      default: false
+    },
+    // 按钮5
+    openBtn5: {
+      type: Boolean,
+      default: false
+    },
+    isSvgBtn5: {
+      type: Boolean,
+      default: false
+    },
+    typeBtn5: {
+      type: String,
+      default: 'primary'
+    },
+    iconBtn5: {
+      type: String,
+      default: 'el-icon-plus'
+    },
+    textBtn5: {
+      type: String,
+      default: ''
+    },
+    disabledBtn5: {
+      type: Boolean,
+      default: false
+    },
+    plainBtn5: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
     handleRefresh() {
       this.$emit('handle-refresh')
     },
-    handleAdd() {
-      this.$emit('handle-add')
-    },
-    handleDelete() {
-      this.$emit('handle-delete')
-    },
     handleSearch() {
       this.$emit('handle-search')
+    },
+    handleButton1() {
+      this.$emit('handle-button1')
+    },
+    handleButton2() {
+      this.$emit('handle-button2')
+    },
+    handleButton3() {
+      this.$emit('handle-button3')
+    },
+    handleButton4() {
+      this.$emit('handle-button4')
+    },
+    handleButton5() {
+      this.$emit('handle-button5')
     }
   }
 }

src/layout/components/Navbar.vue

@@ -107,7 +107,7 @@ export default {
   overflow: hidden;
   position: relative;
   //@include linearGradient(-90deg, #3660a5, #234c90);
-  @include linearGradient(-90deg, #409EFF, #005DFB);
+  @include linearGradient(90deg, #3660A5 0%, #234C90 100%);
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
 
   .hamburger-container {

src/layout/components/Sidebar/Logo.vue

@@ -61,7 +61,7 @@ export default {
   width: 100%;
   height: 64px;
   line-height: 64px;
-  background: #005DFB;
+  background: #1F488B;
   /*background: #1f488b;*/
   text-align: center;
   overflow: hidden;

src/styles/element-ui.scss

@@ -69,7 +69,7 @@
 // dropdown
 .el-dropdown-menu {
   a {
-    display: block
+    display: block;
   }
 }
 
@@ -82,3 +82,14 @@
 .el-range-separator {
   box-sizing: content-box;
 }
+
+.head-box {
+  .el-input__inner {
+    width: 250px;
+  }
+}
+
+.particles-js-canvas-el {
+  position: fixed;
+  top: 0;
+}

src/styles/variables.scss

@@ -46,12 +46,11 @@ $menuActiveText: #a0d1ff;
 $subMenuActiveText: #a0d1ff; // https://github.com/ElemeFE/element/issues/12951
 
 
-$menuBg: #005DFB;
+$menuBg: #1F488B;
+$menuHover: #1F488B;
 
-$menuHover: #1890FF;
-
-$subMenuBg: #0350D7;
-$subMenuHover: #1890ff;
+$subMenuBg: #365FA4;
+$subMenuHover: #1890FF;
 
 //$menuBg: #365fa4;
 //

src/views/login/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="login-container">
+  <div id="particles" class="login-container">
     <div class="title-container">
       <img src="/pic/login/logo.png" alt="" />
     </div>
-    <div class="main-container" style="margin-left:0px;">
+    
       <div class="login-center">
         <el-form
           ref="loginForm"
@@ -42,9 +42,7 @@
               @keyup.enter.native="handleLogin"
             />
             <span class="show-pwd" @click="showPwd">
-              <svg-icon
-                :icon-class="passwordType === 'password' ? 'eye-1' : 'eye-2'"
-              />
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye-1' : 'eye-2'" />
             </span>
           </el-form-item>
 
@@ -63,24 +61,24 @@
               @keyup.enter.native="handleLogin"
             />
             <span class="show-pwd button-code">
-              <a style="color:#1890FF;font-size:14px" @click="handleSendCode">{{
+              <a style="color: #1890ff; font-size: 14px" @click="handleSendCode">{{
                 reSend
               }}</a>
             </span>
           </el-form-item>
 
           <div class="no-bg">
-            <div class="more-select" style="float:right">
-              <div style="margin-bottom: 20px; margin-top:10px;">
+            <div class="more-select" style="float: right">
+              <div style="margin-bottom: 20px; margin-top: 10px">
                 <a
                   v-if="loginByPassword"
-                  style="color:#1890FF;font-size:14px;"
+                  style="color: #1890ff; font-size: 14px"
                   @click="loginByPassword = false"
                   >验证码登录</a
                 >
                 <a
                   v-else
-                  style="color:#1890FF;font-size:14px;"
+                  style="color: #1890ff; font-size: 14px"
                   @click="loginByPassword = true"
                   >账号密码登录</a
                 >
@@ -92,49 +90,47 @@
             type="primary"
             @click.native.prevent="handleLogin"
           >
-            {{ $t('login.logIn') }}
+            {{ $t("login.logIn") }}
           </el-button>
         </el-form>
       </div>
-    </div>
+ 
 
     <div class="footer-box">
       <div class="inner">
         <div class="text">
-          <p>
-            Copyright © 2013-2020 广东智莺科技有限公司 版权所有
-            粤ICP备13020798号
-          </p>
+          <p>Copyright © 2013-2020 广东智莺科技有限公司 版权所有 粤ICP备13020798号</p>
         </div>
       </div>
     </div>
 
     <el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
-      {{ $t('login.thirdpartyTips') }}
+      {{ $t("login.thirdpartyTips") }}
       <social-sign />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import SocialSign from './components/SocialSignin'
+import SocialSign from "./components/SocialSignin";
+import particles from "particles.js";
 
 export default {
-  name: 'Login',
+  name: "Login",
   components: { SocialSign },
   data() {
     return {
       loginByPassword: true,
       needSendCode: false,
       isDisabled: false,
-      reSend: '发送验证码',
-      count: '',
+      reSend: "发送验证码",
+      count: "",
       timer: null,
       loginForm: {
-        phone: '',
-        password: '',
-        code: '',
-        checked: true
+        phone: "",
+        password: "",
+        code: "",
+        checked: true,
       },
       // loginRules: {
       //   phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
@@ -142,37 +138,40 @@ export default {
       //     { required: true, trigger: 'blur', validator: validatePassword }
       //   ]
       // },
-      passwordType: 'password',
+      passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
-      otherQuery: {}
-    }
+      otherQuery: {},
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
-        const query = route.query
+      handler: function (route) {
+        const query = route.query;
         if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+          this.redirect = query.redirect;
+          this.otherQuery = this.getOtherQuery(query);
         }
       },
-      immediate: true
+      immediate: true,
+    },
+    loginByPassword: function (newQuestion, oldQuestion) {
+      this.loginForm.password = "";
     },
-    loginByPassword: function(newQuestion, oldQuestion) {
-      this.loginForm.password = ''
-    }
   },
   created() {
     // window.addEventListener('storage', this.afterQRScan)
   },
   mounted() {
-    if (this.loginForm.phone === '') {
-      this.$refs.phone.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
+    particlesJS.load("particles", "/particles.json", function () {
+      console.log("callback - particles.js config loaded");
+    });
+    if (this.loginForm.phone === "") {
+      this.$refs.phone.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
     }
   },
   destroyed() {
@@ -180,93 +179,90 @@ export default {
   },
   methods: {
     checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
     },
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
+      if (this.passwordType === "password") {
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     handleSendCode() {
-      console.log(this.loginForm)
+      console.log(this.loginForm);
       if (this.isDisabled) {
-        return
+        return;
       }
       this.$store
-        .dispatch('user/sendCode', this.loginForm)
+        .dispatch("user/sendCode", this.loginForm)
         .then(() => {
-          this.countDown()
-          this.$message.success('验证码已发送')
+          this.countDown();
+          this.$message.success("验证码已发送");
         })
-        .catch(() => {})
+        .catch(() => {});
     },
     handleLogin() {
-
-      
-      this.loginForm.type = this.loginByPassword ? 'pwd' : 'code'
-      this.$refs.loginForm.validate(valid => {
+      this.loginForm.type = this.loginByPassword ? "pwd" : "code";
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+          this.loading = true;
           this.$store
-            .dispatch('user/login', this.loginForm)
-            .then(code => {
- 
+            .dispatch("user/login", this.loginForm)
+            .then((code) => {
               if (code === 401) {
-                this.needSendCode = true
-                this.$message.warning('为了您的账户安全，请输入手机验证码校验')
+                this.needSendCode = true;
+                this.$message.warning("为了您的账户安全，请输入手机验证码校验");
               } else {
                 this.$router.push({
-                  path: this.redirect || '/',
-                  query: this.otherQuery
-                })
+                  path: this.redirect || "/",
+                  query: this.otherQuery,
+                });
               }
 
-              this.loading = false
+              this.loading = false;
             })
             .catch(() => {
-              this.loading = false
-            })
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
         }
-        return acc
-      }, {})
+        return acc;
+      }, {});
     },
 
     countDown() {
-      const TIME_COUNT = 60
+      const TIME_COUNT = 60;
       if (!this.timer) {
-        this.count = TIME_COUNT
-        this.isDisabled = true
+        this.count = TIME_COUNT;
+        this.isDisabled = true;
         this.timer = setInterval(() => {
           if (this.count > 0 && this.count <= TIME_COUNT) {
-            this.count--
-            this.reSend = '剩余' + this.count + '秒'
+            this.count--;
+            this.reSend = "剩余" + this.count + "秒";
           } else {
-            this.isDisabled = false
-            clearInterval(this.timer)
-            this.timer = null
-            this.reSend = '重新发送'
+            this.isDisabled = false;
+            clearInterval(this.timer);
+            this.timer = null;
+            this.reSend = "重新发送";
           }
-        }, 1000)
+        }, 1000);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -284,6 +280,9 @@ $cursor: #3a3a3a;
 
 /* reset element-ui css */
 .login-container {
+  // width: 100vw;
+  // height: 100vh;
+  // overflow: hidden;
   .el-input {
     display: inline-block;
     height: 44px;
@@ -350,7 +349,7 @@ $cursor: #3a3a3a;
 </style>
 
 <style lang="scss" scoped>
-@import '~@/styles/variables.scss';
+@import "~@/styles/variables.scss";
 
 $bg: #2d3a4b;
 $dark_gray: #889aa4;
@@ -361,12 +360,13 @@ $light_gray: #eee;
 
   height: 100%;
   width: 100%;
-  background: url('/pic/login/login_bg.png') no-repeat top center;
+  background: url("/pic/login/login_bg.png") no-repeat top center;
   background-size: cover;
   overflow: hidden;
 
   .main-container {
-    width: 100%;
+ 
+    z-index: 99;
   }
 
   .login-center {
@@ -375,6 +375,10 @@ $light_gray: #eee;
     min-width: 400px;
     max-width: 500px;
     margin: 5% auto;
+    position: fixed;
+    z-index: 999;
+    left: 0;
+    right: 0;
   }
 
   .login-form {
@@ -494,4 +498,6 @@ $light_gray: #eee;
     }
   }
 }
+
+ 
 </style>

src/views/member-management/index.vue

@@ -1,14 +1,145 @@
 <template>
-    <el-container>
-      <el-main>首页</el-main>
-    </el-container>
+  <el-container>
+    <el-main>
+      <el-form
+        v-if="isSearchVisible"
+        size="mini"
+        label-position="right"
+        label-width="100px"
+        :inline="true"
+        :model="formData"
+        style="margin-bottom: 30px"
+      >
+        <div class="head-box">
+          <el-form-item label="会员ID">
+            <el-input v-model="formData.uid"></el-input>
+          </el-form-item>
+          <el-form-item label="会员昵称">
+            <el-input v-model="formData.name"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="formData.comment"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary">搜索</el-button>
+            <el-button type="info">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <ActionButton
+        @handle-refresh="refreshData"
+        @handle-search="isSearchVisible = !isSearchVisible"
+      />
+
+      <div>
+        <el-table :data="[{}]">
+          <el-table-column type="index" label="序号" align="center"></el-table-column>
+          <el-table-column label="头像" align="center"></el-table-column>
+          <el-table-column label="会员id" align="center"></el-table-column>
+          <el-table-column label="会员昵称" align="center"></el-table-column>
+          <el-table-column label="手机号" align="center"></el-table-column>
+          <el-table-column label="会员等级" align="center"></el-table-column>
+          <el-table-column label="备注" align="center"></el-table-column>
+          <el-table-column prop="address" label="操作" align="center" min-width="200px">
+            <template slot-scope="scope">
+              <CustomButton
+                tip-text="查看明细"
+                type="primary"
+                icon="el-icon-tickets"
+              ></CustomButton>
+              <CustomButton
+                tip-text="删除"
+                type="danger"
+                icon="delete"
+                is-svg
+                @onClick="handleDelete(scope.$index)"
+              ></CustomButton>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-footer>
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 15, 20, 30]"
+            :page-size="limit"
+            layout="total, prev, pager, next, sizes, jumper"
+            :total="totalCount"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+          </el-pagination>
+        </el-footer>
+      </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+import ActionButton from "@/components/ActionButton/index";
+import CustomButton from "@/components/CustomButton/index";
+
 export default {
-}
+  components: {
+    ActionButton,
+    CustomButton,
+  },
+  data() {
+    return {
+      formData: {},
+      isSearchVisible: false,
+
+      // 分页数据
+      totalCount: 0,
+      currentPage: 1,
+      limit: 20,
+      // 返回的数据
+      tableData: [],
+    };
+  },
+  methods: {
+    refreshData() {
+      console.log("刷新");
+    },
+
+    handleDelete(index) {
+      console.log(index, "删除");
+    },
+
+    // limit 改变
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.limit = val;
+      this._fetchData();
+    },
+    // 当前页面改变
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.currentPage = val;
+      this._fetchData();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.head-box {
+  border-bottom: #f2f2f2 1px solid;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 50px 0 0px;
+  box-sizing: border-box;
+  .el-input__inner {
+    width: 250px;
+  }
+}
 
+  .el-footer {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 </style>

src/views/sort-management/index.vue

@@ -1,14 +1,148 @@
 <template>
-    <el-container>
-      <el-main>分类管理</el-main>
-    </el-container>
+  <el-container>
+    <el-main>
+      <el-form
+        v-if="isSearchVisible"
+        size="mini"
+        label-position="right"
+        label-width="100px"
+        :inline="true"
+        :model="formData"
+        style="margin-bottom: 30px"
+      >
+        <div class="head-box">
+          <el-form-item label="会员ID">
+            <el-input v-model="formData.uid"></el-input>
+          </el-form-item>
+          <el-form-item label="会员昵称">
+            <el-input v-model="formData.name"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="formData.comment"></el-input>
+          </el-form-item>
+
+          <el-form-item>
+            <el-button type="primary">搜索</el-button>
+            <el-button type="info">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
+
+      <ActionButton
+        @handle-refresh="refreshData"
+        @handle-search="isSearchVisible = !isSearchVisible"
+      />
+
+      <div>
+        <el-table :data="[{}]">
+          <el-table-column type="index" label="序号" align="center"></el-table-column>
+          <el-table-column label="分类" align="center"></el-table-column>
+          <el-table-column label="书源" align="center"></el-table-column>
+          <el-table-column label="采集书籍数量" align="center"></el-table-column>
+          <el-table-column prop="address" label="操作" align="center">
+            <template slot-scope="scope">
+              <CustomButton
+                tip-text="查看明细"
+                type="warning"
+                icon="el-icon-tickets"
+              ></CustomButton>
+              <CustomButton
+                tip-text="编辑"
+                type="primary"
+                icon="edit"
+                is-svg
+              ></CustomButton>
+              <CustomButton
+                tip-text="删除"
+                type="danger"
+                icon="delete"
+                is-svg
+                @onClick="handleDelete(scope.$index)"
+              ></CustomButton>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-footer>
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[5, 10, 15, 20, 30]"
+            :page-size="limit"
+            layout="total, prev, pager, next, sizes, jumper"
+            :total="totalCount"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          >
+          </el-pagination>
+        </el-footer>
+      </div>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+import ActionButton from "@/components/ActionButton/index";
+import CustomButton from "@/components/CustomButton/index";
+
 export default {
-}
+  components: {
+    ActionButton,
+    CustomButton,
+  },
+  data() {
+    return {
+      formData: {},
+      isSearchVisible: false,
+
+      // 分页数据
+      totalCount: 0,
+      currentPage: 1,
+      limit: 20,
+      // 返回的数据
+      tableData: [],
+    };
+  },
+  methods: {
+    refreshData() {
+      console.log("刷新");
+    },
+
+    handleDelete(index) {
+      console.log(index, "删除");
+    },
+
+    // limit 改变
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+      this.limit = val;
+      this._fetchData();
+    },
+    // 当前页面改变
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+      this.currentPage = val;
+      this._fetchData();
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.head-box {
+  border-bottom: #f2f2f2 1px solid;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 50px 0 0px;
+  box-sizing: border-box;
+  .el-input__inner {
+    width: 250px;
+  }
+}
 
+.el-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>