From 0f76f6d49b66fd8f74befda3ba463816871c6119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B7=8B=E9=9B=A8=E7=9A=84=E5=B0=8F=E4=B8=B8=E5=AD=90?=
 <chu1204505056@126.com>
Date: Tue, 20 Jun 2023 21:56:30 +0800
Subject: [PATCH] =?UTF-8?q?=E2=AC=86=20chore:=20version?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.en.md                                  |  15 ++-
 README.md                                     |   6 +-
 layouts/VabErrorLog/index.vue                 |   6 +-
 layouts/VabGithubCorner/index.vue             |  14 +--
 .../VabQueryForm/VabQueryFormBottomPanel.vue  |   6 +-
 .../VabQueryForm/VabQueryFormLeftPanel.vue    |   2 +-
 .../VabQueryForm/VabQueryFormRightPanel.vue   |   2 +-
 layouts/VabSideBar/components/VabMenuItem.vue |   2 +-
 .../VabSideBar/components/VabSideBarItem.vue  |   2 +-
 layouts/VabSideBar/index.vue                  |   9 +-
 layouts/VabTabsBar/index.vue                  |   4 +-
 layouts/VabTopBar/index.vue                   |  16 +--
 mock/utils/index.js                           |   1 +
 package.json                                  |   2 +-
 public/index.html                             |  14 +--
 src/components/SelectTree/index.vue           |   9 +-
 src/components/VabCharge/index.vue            |   2 +-
 src/components/VabProfile/index.vue           |   4 +-
 src/components/VabSnow/index.vue              |   2 +-
 src/components/VabUpload/index.vue            |  12 +-
 src/layouts/components/VabAd/index.vue        |   7 +-
 src/layouts/components/VabAppMain/index.vue   |   2 +
 src/layouts/components/VabAvatar/index.vue    |   2 +-
 src/layouts/components/VabLogo/index.vue      |   4 +-
 src/layouts/components/VabNavBar/index.vue    |   8 +-
 src/layouts/components/VabThemeBar/index.vue  |   7 +-
 src/layouts/index.vue                         |   9 +-
 src/plugins/support.js                        |   3 +-
 src/remixIcon/svg/qq-fill.svg                 |   6 +-
 src/remixIcon/svg/vuejs-fill.svg              |   5 +-
 src/styles/element-variables.scss             |  38 +++---
 src/styles/normalize.scss                     |  30 ++---
 src/styles/spinner/dots.css                   |  82 +++++--------
 src/styles/spinner/gauge.css                  |   4 +-
 src/styles/spinner/inner-circles.css          |   2 +-
 src/styles/spinner/plus.css                   |   4 +-
 src/styles/vab.scss                           |   5 +
 src/utils/request.js                          |   2 +-
 src/utils/validate.js                         |   4 +
 src/views/401.vue                             |   4 +-
 src/views/404.vue                             |   4 +-
 src/views/index/components/Plan.vue           |  11 +-
 .../index/components/VersionInformation.vue   |   4 +-
 src/views/index/index.vue                     |  59 +++++-----
 src/views/login/index.vue                     |  12 +-
 src/views/mall/goodsList/index.vue            |  12 +-
 src/views/mall/pay/components/Step2.vue       |   2 +-
 src/views/mall/pay/components/Step3.vue       |   4 +-
 src/views/mall/pay/index.vue                  |   9 +-
 .../menuManagement/index.vue                  |  46 ++++----
 .../roleManagement/index.vue                  |  18 +--
 .../components/UserManagementEdit.vue         |   2 +-
 .../userManagement/index.vue                  |  28 ++---
 src/views/register/index.vue                  |  33 +++---
 src/views/vab/element/index.vue               | 108 +++++++++---------
 src/views/vab/form/index.vue                  |   4 +-
 src/views/vab/icon/colorfulIcon.vue           |   8 +-
 src/views/vab/icon/index.vue                  |   8 +-
 src/views/vab/lodash/index.vue                |  32 +++---
 src/views/vab/map/index.vue                   |   1 +
 src/views/vab/more/index.vue                  |   6 +-
 src/views/vab/permissions/index.vue           |  36 +++---
 src/views/vab/smallComponents/index.vue       |  10 +-
 src/views/vab/table/index.vue                 |  25 ++--
 src/views/vab/tree/index.vue                  |   8 +-
 src/views/vab/upload/index.vue                |   4 +-
 src/views/vab/webSocket/index.vue             |   4 +-
 67 files changed, 427 insertions(+), 429 deletions(-)

diff --git a/README.en.md b/README.en.md
index e56c618..083653f 100644
--- a/README.en.md
+++ b/README.en.md
@@ -42,7 +42,8 @@
 
 - [🌐 Gitee Warehouse address](https://gitee.com/chu1204505056/vue-admin-better?_from=gitee_search)
 
-- Recently, the VAB official website has been frequently attacked by DDoS. We have taken relevant preventive measures. If the website cannot be accessed, please visit the backup address
+- Recently, the VAB official website has been frequently attacked by DDoS. We have taken relevant preventive measures.
+  If the website cannot be accessed, please visit the backup address
 
 ## 🌐 Backup address (support automatic update of HTTPS website)
 
@@ -73,7 +74,11 @@ npm run serve
 
 ## 🍻 Front end discussion QQ group
 
-- Let's have a cup of coffee, and then contact QQ 783963206 to invite you to the discussion group. Because of the large number of users, if you haven't passed a friend's request, please contact Alipay on the Alipay payment page, whether you invite or not, you can enjoy the open source code, thank you for your support and trust, and provide the vue-admin-beautifu basic version in the group. Automatic configuration tutorial of development tools and project development documents.
+- Let's have a cup of coffee, and then contact QQ 783963206 to invite you to the discussion group. Because of the large
+  number of users, if you haven't passed a friend's request, please contact Alipay on the Alipay payment page, whether
+  you invite or not, you can enjoy the open source code, thank you for your support and trust, and provide the
+  vue-admin-beautifu basic version in the group. Automatic configuration tutorial of development tools and project
+  development documents.
 
 <table>
 <tr>
@@ -107,7 +112,7 @@ npm run serve
 ## 🎨 Acknowledge
 
 | Project                                                          |
-| ---------------------------------------------------------------- |
+|------------------------------------------------------------------|
 | [vue](https://github.com/vuejs/vue)                              |
 | [element-ui](https://github.com/ElemeFE/element)                 |
 | [element-plus](https://github.com/element-plus/element-plus)     |
@@ -196,7 +201,9 @@ The following is a screenshot of the pro version:
 
 ## 📄 Commercial considerations
 
-This project can be used for commercial purposes free of charge. Please abide by the MIT agreement and keep the author's technical support statement. For customized source code copyright information, please contact customer service QQ 783963206.
+This project can be used for commercial purposes free of charge. Please abide by the MIT agreement and keep the author's
+technical support statement. For customized source code copyright information, please contact customer service QQ
+783963206.
 
 <!-- ## 严正声明
 
diff --git a/README.md b/README.md
index 4a2f842..f43e129 100644
--- a/README.md
+++ b/README.md
@@ -50,7 +50,9 @@
 
 ## 🍻 前端讨论 QQ 群
 
-- 请我们喝杯咖啡，打赏后联系 QQ 783963206 邀请您进入讨论群（由于用户数较多，如果您打赏后未通过好友请求，请联系商家），不管您请还是不请，您都可以享受到开源的代码，感谢您的支持和信任，群内提供 vue-admin-better 基础版本、开发工具自动配置教程及项目开发文档。
+- 请我们喝杯咖啡，打赏后联系 QQ 783963206 邀请您进入讨论群（由于用户数较多，如果您打赏后未通过好友请求，请联系商家），不管您请还是不请，您都可以享受到开源的代码，感谢您的支持和信任，群内提供
+  vue-admin-better 基础版本、开发工具自动配置教程及项目开发文档。
+
 <table>
 <tr>
 <td>
@@ -128,7 +130,7 @@ npm run serve
 ## 🎨 鸣谢
 
 | Project                                                          |
-| ---------------------------------------------------------------- |
+|------------------------------------------------------------------|
 | [vue](https://github.com/vuejs/vue)                              |
 | [element-ui](https://github.com/ElemeFE/element)                 |
 | [element-plus](https://github.com/element-plus/element-plus)     |
diff --git a/layouts/VabErrorLog/index.vue b/layouts/VabErrorLog/index.vue
index fd7170a..e2681ce 100644
--- a/layouts/VabErrorLog/index.vue
+++ b/layouts/VabErrorLog/index.vue
@@ -12,8 +12,8 @@
     <el-dialog
       :visible.sync="dialogTableVisible"
       append-to-body
+      title="vue-admin-better异常捕获(温馨提示：错误必须解决)"
       width="70%"
-      title="vue-admin-beautiful异常捕获(温馨提示：错误必须解决)"
     >
       <el-table :data="errorLogs">
         <el-table-column label="报错路由">
@@ -38,7 +38,7 @@
             </el-popover>
           </template>
         </el-table-column>
-        <el-table-column width="380" label="操作">
+        <el-table-column label="操作" width="380">
           <template slot-scope="{ row }">
             <a
               v-for="(item, index) in searchList"
@@ -56,7 +56,7 @@
       </el-table>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogTableVisible = false">取 消</el-button>
-        <el-button type="danger" icon="el-icon-delete" @click="clearAll">
+        <el-button icon="el-icon-delete" type="danger" @click="clearAll">
           暂不显示
         </el-button>
       </span>
diff --git a/layouts/VabGithubCorner/index.vue b/layouts/VabGithubCorner/index.vue
index 23341f3..853d313 100644
--- a/layouts/VabGithubCorner/index.vue
+++ b/layouts/VabGithubCorner/index.vue
@@ -1,28 +1,28 @@
 <template>
   <a
+    aria-label="View source on Github"
+    class="github-corner"
     href="https://github.com/chuzhixin/vue-admin-beautiful"
     target="_blank"
-    class="github-corner"
-    aria-label="View source on Github"
   >
     <svg
-      width="80"
+      aria-hidden="true"
+      class="github-color"
       height="80"
       viewBox="0 0 250 250"
-      class="github-color"
-      aria-hidden="true"
+      width="80"
     >
       <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
       <path
+        class="octo-arm"
         d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
         fill="currentColor"
         style="transform-origin: 130px 106px"
-        class="octo-arm"
       />
       <path
+        class="octo-body"
         d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
         fill="currentColor"
-        class="octo-body"
       />
     </svg>
   </a>
diff --git a/layouts/VabQueryForm/VabQueryFormBottomPanel.vue b/layouts/VabQueryForm/VabQueryFormBottomPanel.vue
index 53bd186..327dc83 100644
--- a/layouts/VabQueryForm/VabQueryFormBottomPanel.vue
+++ b/layouts/VabQueryForm/VabQueryFormBottomPanel.vue
@@ -8,13 +8,13 @@
 
 <script>
   export default {
-    name: "VabQueryFormBottomPanel",
+    name: 'VabQueryFormBottomPanel',
     props: {},
     data() {
-      return {};
+      return {}
     },
     created() {},
     mounted() {},
     methods: {},
-  };
+  }
 </script>
diff --git a/layouts/VabQueryForm/VabQueryFormLeftPanel.vue b/layouts/VabQueryForm/VabQueryFormLeftPanel.vue
index ee23a78..38795e4 100644
--- a/layouts/VabQueryForm/VabQueryFormLeftPanel.vue
+++ b/layouts/VabQueryForm/VabQueryFormLeftPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
     <div class="left-panel">
       <slot></slot>
     </div>
diff --git a/layouts/VabQueryForm/VabQueryFormRightPanel.vue b/layouts/VabQueryForm/VabQueryFormRightPanel.vue
index e74aa14..0e3c4e3 100644
--- a/layouts/VabQueryForm/VabQueryFormRightPanel.vue
+++ b/layouts/VabQueryForm/VabQueryFormRightPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-col :xs="24" :sm="24" :md="24" :lg="span" :xl="span">
+  <el-col :lg="span" :md="24" :sm="24" :xl="span" :xs="24">
     <div class="right-panel">
       <slot></slot>
     </div>
diff --git a/layouts/VabSideBar/components/VabMenuItem.vue b/layouts/VabSideBar/components/VabMenuItem.vue
index 3ed8d1b..fc34144 100644
--- a/layouts/VabSideBar/components/VabMenuItem.vue
+++ b/layouts/VabSideBar/components/VabMenuItem.vue
@@ -8,8 +8,8 @@
     <span>{{ routeChildren.meta.title }}</span>
     <el-tag
       v-if="routeChildren.meta && routeChildren.meta.badge"
-      type="danger"
       effect="dark"
+      type="danger"
     >
       {{ routeChildren.meta.badge }}
     </el-tag>
diff --git a/layouts/VabSideBar/components/VabSideBarItem.vue b/layouts/VabSideBar/components/VabSideBarItem.vue
index baaac70..ff4d242 100644
--- a/layouts/VabSideBar/components/VabSideBarItem.vue
+++ b/layouts/VabSideBar/components/VabSideBarItem.vue
@@ -2,8 +2,8 @@
   <component
     :is="menuComponent"
     v-if="!item.hidden"
-    :item="item"
     :full-path="fullPath"
+    :item="item"
     :route-children="routeChildren"
   >
     <template v-if="item.children && item.children.length">
diff --git a/layouts/VabSideBar/index.vue b/layouts/VabSideBar/index.vue
index 94cc573..b329661 100644
--- a/layouts/VabSideBar/index.vue
+++ b/layouts/VabSideBar/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <el-scrollbar class="side-bar-container" :class="{ 'is-collapse': collapse }">
+  <el-scrollbar :class="{ 'is-collapse': collapse }" class="side-bar-container">
     <vab-logo />
     <el-menu
-      :background-color="variables['menu-background']"
-      :text-color="variables['menu-color']"
       :active-text-color="variables['menu-color-active']"
-      :default-active="activeMenu"
+      :background-color="variables['menu-background']"
       :collapse="collapse"
       :collapse-transition="false"
+      :default-active="activeMenu"
       :default-openeds="defaultOpens"
+      :text-color="variables['menu-color']"
       :unique-opened="uniqueOpened"
       mode="vertical"
     >
@@ -100,6 +100,7 @@
             right: 10px;
             margin-top: -3px;
           }
+
           .el-menu-item,
           .el-submenu {
             text-align: center;
diff --git a/layouts/VabTabsBar/index.vue b/layouts/VabTabsBar/index.vue
index dfa2c1e..cf61a54 100644
--- a/layouts/VabTabsBar/index.vue
+++ b/layouts/VabTabsBar/index.vue
@@ -2,17 +2,17 @@
   <div id="tabs-bar-container" class="tabs-bar-container">
     <el-tabs
       v-model="tabActive"
-      type="card"
       class="tabs-content"
+      type="card"
       @tab-click="handleTabClick"
       @tab-remove="handleTabRemove"
     >
       <el-tab-pane
         v-for="item in visitedRoutes"
         :key="item.path"
+        :closable="!isAffix(item)"
         :label="item.meta.title"
         :name="item.path"
-        :closable="!isAffix(item)"
       ></el-tab-pane>
     </el-tabs>
 
diff --git a/layouts/VabTopBar/index.vue b/layouts/VabTopBar/index.vue
index 07602f6..bc14774 100644
--- a/layouts/VabTopBar/index.vue
+++ b/layouts/VabTopBar/index.vue
@@ -2,17 +2,17 @@
   <div class="top-bar-container">
     <div class="vab-main">
       <el-row>
-        <el-col :xl="7" :lg="7" :md="7" :sm="7" :xs="7">
+        <el-col :lg="7" :md="7" :sm="7" :xl="7" :xs="7">
           <vab-logo />
         </el-col>
-        <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
+        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
           <el-menu
-            :background-color="variables['menu-background']"
-            :text-color="variables['menu-color']"
             :active-text-color="variables['menu-color-active']"
+            :background-color="variables['menu-background']"
             :default-active="activeMenu"
-            mode="horizontal"
+            :text-color="variables['menu-color']"
             menu-trigger="hover"
+            mode="horizontal"
           >
             <template v-for="route in routes">
               <vab-side-bar-item
@@ -24,15 +24,15 @@
             </template>
           </el-menu>
         </el-col>
-        <el-col :xl="5" :lg="5" :md="5" :sm="5" :xs="5">
+        <el-col :lg="5" :md="5" :sm="5" :xl="5" :xs="5">
           <div class="right-panel">
             <vab-error-log />
             <vab-full-screen-bar @refresh="refreshRoute" />
             <vab-theme-bar class="hidden-md-and-down" />
             <vab-icon
-              title="重载路由"
-              :pulse="pulse"
               :icon="['fas', 'redo']"
+              :pulse="pulse"
+              title="重载路由"
               @click="refreshRoute"
             />
             <vab-avatar />
diff --git a/mock/utils/index.js b/mock/utils/index.js
index 11cf855..d4c6255 100644
--- a/mock/utils/index.js
+++ b/mock/utils/index.js
@@ -37,6 +37,7 @@ function handleMockArray() {
   getFiles('mock/controller')
   return mockArray
 }
+
 module.exports = {
   handleRandomImage,
   handleMockArray,
diff --git a/package.json b/package.json
index 68068d6..8881d7d 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "axios": "^1.4.0",
-    "caniuse-lite": "^1.0.30001504",
+    "caniuse-lite": "^1.0.30001505",
     "clipboard": "^2.0.11",
     "core-js": "^3.31.0",
     "dayjs": "^1.11.8",
diff --git a/public/index.html b/public/index.html
index 016f570..e576745 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,20 +2,20 @@
 <html lang="zh-cmn-Hans">
   <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" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <meta content="width=device-width,initial-scale=1.0" name="viewport" />
+    <link href="<%= BASE_URL %>favicon.ico" rel="icon" />
     <title>vue-admin-better官网、首页、文档和下载 - 前端开发框架</title>
     <meta
-      name="keywords"
       content="vab,vab官网,后台管理框架,vue后台管理框架,vue-admin-beautiful-pro源码分享,vue-admin-beautiful-pro源码,vue-admin-beautiful官网,vue-admin-beautiful文档,vue-element-admin,vue-element-admin官网,vue-element-admin文档,vue-admin,vue-admin官网,vue-admin文档"
+      name="keywords"
     />
     <meta
-      name="description"
       content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
+      name="description"
     />
-    <meta name="author" content="<%= VUE_APP_AUTHOR %>" />
-    <link rel="stylesheet" href="<%= BASE_URL %>static/css/loading.css" />
+    <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
+    <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
   </head>
   <body>
     <noscript>
diff --git a/src/components/SelectTree/index.vue b/src/components/SelectTree/index.vue
index bacc7dd..62b705b 100644
--- a/src/components/SelectTree/index.vue
+++ b/src/components/SelectTree/index.vue
@@ -191,11 +191,4 @@
     color: #606266;
   }
 </style>
-<style lang="scss">
-  /* .vab-tree-select{
-      .el-tag__close.el-icon-close{
-        width:0;
-        overflow:hidden;
-      }
-    } */
-</style>
+<style lang="scss"></style>
diff --git a/src/components/VabCharge/index.vue b/src/components/VabCharge/index.vue
index 39de737..c0f0d14 100644
--- a/src/components/VabCharge/index.vue
+++ b/src/components/VabCharge/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <div class="g-container" :style="styleObj">
+    <div :style="styleObj" class="g-container">
       <div class="g-number">
         {{ endVal }}
       </div>
diff --git a/src/components/VabProfile/index.vue b/src/components/VabProfile/index.vue
index 7f291dd..9fcbf9f 100644
--- a/src/components/VabProfile/index.vue
+++ b/src/components/VabProfile/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card" :style="styleObj">
+  <div :style="styleObj" class="card">
     <div class="card-borders">
       <div class="border-top"></div>
       <div class="border-right"></div>
@@ -13,8 +13,8 @@
         <a
           v-for="(item, index) in iconArray"
           :key="index"
-          class="social-icon"
           :href="item.url"
+          class="social-icon"
           target="_blank"
         >
           <vab-icon :icon="['fas', item.icon]" />
diff --git a/src/components/VabSnow/index.vue b/src/components/VabSnow/index.vue
index 5131d52..96f5be3 100644
--- a/src/components/VabSnow/index.vue
+++ b/src/components/VabSnow/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="content" :style="styleObj">
+  <div :style="styleObj" class="content">
     <div v-for="(item, index) in 200" :key="index" class="snow"></div>
   </div>
 </template>
diff --git a/src/components/VabUpload/index.vue b/src/components/VabUpload/index.vue
index 31d83a5..57a3c70 100644
--- a/src/components/VabUpload/index.vue
+++ b/src/components/VabUpload/index.vue
@@ -75,8 +75,6 @@
 </template>
 
 <script>
-  import { baseURL, tokenName } from '@/config'
-
   export default {
     name: 'VabUpload',
     props: {
@@ -207,12 +205,12 @@
         this.imgSuccessNum = 0
         this.imgErrorNum = 0
         /* if ("development" === process.env.NODE_ENV) {
-          this.api = process.env.VUE_APP_BASE_API;
-        } else {
-          this.api = `${window.location.protocol}//${window.location.host}`;
-        }
+        this.api = process.env.VUE_APP_BASE_API;
+      } else {
+        this.api = `${window.location.protocol}//${window.location.host}`;
+      }
 
-        this.action = this.api + this.url; */
+      this.action = this.api + this.url; */
         this.dialogFormVisible = false
       },
     },
diff --git a/src/layouts/components/VabAd/index.vue b/src/layouts/components/VabAd/index.vue
index 1184f65..5ec2551 100644
--- a/src/layouts/components/VabAd/index.vue
+++ b/src/layouts/components/VabAd/index.vue
@@ -2,21 +2,22 @@
   <div class="vab-ad">
     <el-carousel
       v-if="adList"
-      height="30px"
-      direction="vertical"
       :autoplay="true"
       :interval="3000"
+      direction="vertical"
+      height="30px"
       indicator-position="none"
     >
       <el-carousel-item v-for="(item, index) in adList" :key="index">
         <el-tag type="warning">Ad</el-tag>
-        <a target="_blank" :href="item.url">{{ item.title }}</a>
+        <a :href="item.url" target="_blank">{{ item.title }}</a>
       </el-carousel-item>
     </el-carousel>
   </div>
 </template>
 <script>
   import { getList } from '@/api/ad'
+
   export default {
     name: 'VabAd',
     data() {
diff --git a/src/layouts/components/VabAppMain/index.vue b/src/layouts/components/VabAppMain/index.vue
index 5bdc591..e6ef95f 100644
--- a/src/layouts/components/VabAppMain/index.vue
+++ b/src/layouts/components/VabAppMain/index.vue
@@ -80,9 +80,11 @@
     position: relative;
     width: 100%;
     overflow: hidden;
+
     .vab-keel {
       margin: $base-padding;
     }
+
     .app-main-height {
       min-height: $base-app-main-height;
     }
diff --git a/src/layouts/components/VabAvatar/index.vue b/src/layouts/components/VabAvatar/index.vue
index 6c1da71..2a68d17 100644
--- a/src/layouts/components/VabAvatar/index.vue
+++ b/src/layouts/components/VabAvatar/index.vue
@@ -2,7 +2,7 @@
   <el-dropdown @command="handleCommand">
     <span class="avatar-dropdown">
       <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
-      <img class="user-avatar" :src="avatar" alt="" />
+      <img :src="avatar" alt="" class="user-avatar" />
       <div class="user-name">
         {{ username }}
         <i class="el-icon-arrow-down el-icon--right"></i>
diff --git a/src/layouts/components/VabLogo/index.vue b/src/layouts/components/VabLogo/index.vue
index e4dd023..ec37b30 100644
--- a/src/layouts/components/VabLogo/index.vue
+++ b/src/layouts/components/VabLogo/index.vue
@@ -2,11 +2,11 @@
   <div :class="'logo-container-' + layout">
     <router-link to="/">
       <!-- 这里是logo变更的位置 -->
-      <vab-remix-icon v-if="logo" class="logo" :icon-class="logo" />
+      <vab-remix-icon v-if="logo" :icon-class="logo" class="logo" />
       <span
-        class="title"
         :class="{ 'hidden-xs-only': layout === 'horizontal' }"
         :title="title"
+        class="title"
       >
         {{ title }}
       </span>
diff --git a/src/layouts/components/VabNavBar/index.vue b/src/layouts/components/VabNavBar/index.vue
index 9a2a634..a48765d 100644
--- a/src/layouts/components/VabNavBar/index.vue
+++ b/src/layouts/components/VabNavBar/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="nav-bar-container">
     <el-row :gutter="15">
-      <el-col :xs="4" :sm="12" :md="12" :lg="12" :xl="12">
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="4">
         <div class="left-panel">
           <i
             :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
@@ -12,15 +12,15 @@
           <vab-breadcrumb class="hidden-xs-only" />
         </div>
       </el-col>
-      <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
+      <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="20">
         <div class="right-panel">
           <vab-error-log />
           <vab-full-screen-bar @refresh="refreshRoute" />
           <vab-theme-bar class="hidden-xs-only" />
           <vab-icon
-            title="重载所有路由"
-            :pulse="pulse"
             :icon="['fas', 'redo']"
+            :pulse="pulse"
+            title="重载所有路由"
             @click="refreshRoute"
           />
           <vab-avatar />
diff --git a/src/layouts/components/VabThemeBar/index.vue b/src/layouts/components/VabThemeBar/index.vue
index cdb693b..e2b32ca 100644
--- a/src/layouts/components/VabThemeBar/index.vue
+++ b/src/layouts/components/VabThemeBar/index.vue
@@ -1,8 +1,8 @@
 <template>
   <span v-if="themeBar">
     <vab-icon
-      title="主题配置"
       :icon="['fas', 'palette']"
+      title="主题配置"
       @click="handleOpenThemeBar"
     />
     <div class="theme-bar-setting">
@@ -17,11 +17,11 @@
     </div>
 
     <el-drawer
-      title="主题配置"
       :visible.sync="drawerVisible"
-      direction="rtl"
       append-to-body
+      direction="rtl"
       size="300px"
+      title="主题配置"
     >
       <el-scrollbar style="height: 80vh; overflow: hidden">
         <div class="el-drawer__body">
@@ -66,6 +66,7 @@
 <script>
   import { mapActions, mapGetters } from 'vuex'
   import { layout as defaultLayout } from '@/config'
+
   export default {
     name: 'VabThemeBar',
     data() {
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index ef5c932..5d0b3f0 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="vue-admin-beautiful-wrapper" :class="classObj">
+  <div :class="classObj" class="vue-admin-beautiful-wrapper">
     <div
       v-if="'horizontal' === layout"
-      class="layout-container-horizontal"
       :class="{
         fixed: header === 'fixed',
         'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
       }"
+      class="layout-container-horizontal"
     >
       <div :class="header === 'fixed' ? 'fixed-header' : ''">
         <vab-top-bar />
@@ -26,11 +26,11 @@
     </div>
     <div
       v-else
-      class="layout-container-vertical"
       :class="{
         fixed: header === 'fixed',
         'no-tabs-bar': tabsBar === 'false' || tabsBar === false,
       }"
+      class="layout-container-vertical"
     >
       <div
         v-if="device === 'mobile' && collapse === false"
@@ -38,7 +38,7 @@
         @click="handleFoldSideBar"
       />
       <vab-side-bar />
-      <div class="vab-main" :class="collapse ? 'is-collapse-main' : ''">
+      <div :class="collapse ? 'is-collapse-main' : ''" class="vab-main">
         <div :class="header === 'fixed' ? 'fixed-header' : ''">
           <vab-nav-bar />
           <vab-tabs-bar v-if="tabsBar === 'true' || tabsBar === true" />
@@ -54,6 +54,7 @@
 <script>
   import { mapActions, mapGetters } from 'vuex'
   import { tokenName } from '@/config'
+
   export default {
     name: 'Layout',
     data() {
diff --git a/src/plugins/support.js b/src/plugins/support.js
index de975ef..10469c3 100644
--- a/src/plugins/support.js
+++ b/src/plugins/support.js
@@ -1,6 +1,5 @@
 import { MessageBox } from 'element-ui'
-import { donation } from '@/config'
-import { dependencies, repository } from '../../package.json'
+import { dependencies } from '../../package.json'
 
 if (!!window.ActiveXObject || 'ActiveXObject' in window) {
   MessageBox({
diff --git a/src/remixIcon/svg/qq-fill.svg b/src/remixIcon/svg/qq-fill.svg
index 1f446b1..0824301 100644
--- a/src/remixIcon/svg/qq-fill.svg
+++ b/src/remixIcon/svg/qq-fill.svg
@@ -1 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19.913 14.529a31.977 31.977 0 00-.675-1.886l-.91-2.246c0-.026.012-.468.012-.696C18.34 5.86 16.507 2 12 2S5.66 5.86 5.66 9.7c0 .229.011.671.012.697l-.91 2.246a32.777 32.777 0 00-.675 1.886c-.86 2.737-.581 3.87-.369 3.895.455.054 1.771-2.06 1.771-2.06 0 1.224.637 2.822 2.016 3.976-.515.157-1.147.399-1.554.695-.365.267-.319.54-.253.65.289.481 4.955.307 6.303.157 1.347.15 6.014.324 6.302-.158.066-.11.112-.382-.253-.649-.407-.296-1.039-.538-1.555-.696 1.379-1.153 2.016-2.751 2.016-3.976 0 0 1.316 2.115 1.771 2.06.212-.025.49-1.157-.37-3.894"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path
+    d="M19.913 14.529a31.977 31.977 0 00-.675-1.886l-.91-2.246c0-.026.012-.468.012-.696C18.34 5.86 16.507 2 12 2S5.66 5.86 5.66 9.7c0 .229.011.671.012.697l-.91 2.246a32.777 32.777 0 00-.675 1.886c-.86 2.737-.581 3.87-.369 3.895.455.054 1.771-2.06 1.771-2.06 0 1.224.637 2.822 2.016 3.976-.515.157-1.147.399-1.554.695-.365.267-.319.54-.253.65.289.481 4.955.307 6.303.157 1.347.15 6.014.324 6.302-.158.066-.11.112-.382-.253-.649-.407-.296-1.039-.538-1.555-.696 1.379-1.153 2.016-2.751 2.016-3.976 0 0 1.316 2.115 1.771 2.06.212-.025.49-1.157-.37-3.894"/>
+</svg>
diff --git a/src/remixIcon/svg/vuejs-fill.svg b/src/remixIcon/svg/vuejs-fill.svg
index 1b1a137..0e6787a 100644
--- a/src/remixIcon/svg/vuejs-fill.svg
+++ b/src/remixIcon/svg/vuejs-fill.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1 3h4l7 12 7-12h4L12 22 1 3zm8.667 0L12 7l2.333-4h4.035L12 14 5.632 3h4.035z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M1 3h4l7 12 7-12h4L12 22 1 3zm8.667 0L12 7l2.333-4h4.035L12 14 5.632 3h4.035z"/>
+</svg>
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
index 8da98a7..3258a91 100644
--- a/src/styles/element-variables.scss
+++ b/src/styles/element-variables.scss
@@ -119,8 +119,8 @@ $--fill-base: $--color-white;
 
 /* Typography
 -------------------------- */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
-$--font-display: "auto";
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+$--font-display: 'auto';
 /// fontSize|1|Font Size|0
 $--font-size-extra-large: 20px;
 /// fontSize|1|Font Size|0
@@ -987,51 +987,51 @@ $--lg: 1200px;
 $--xl: 1920px;
 
 $--breakpoints: (
-  "xs": (
+  'xs': (
     max-width: $--sm - 1,
   ),
-  "sm": (
+  'sm': (
     min-width: $--sm,
   ),
-  "md": (
+  'md': (
     min-width: $--md,
   ),
-  "lg": (
+  'lg': (
     min-width: $--lg,
   ),
-  "xl": (
+  'xl': (
     min-width: $--xl,
   ),
 );
 
 $--breakpoints-spec: (
-  "xs-only": (
+  'xs-only': (
     max-width: $--sm - 1,
   ),
-  "sm-and-up": (
+  'sm-and-up': (
     min-width: $--sm,
   ),
-  "sm-only": "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
-  "sm-and-down": (
+  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
+  'sm-and-down': (
     max-width: $--md - 1,
   ),
-  "md-and-up": (
+  'md-and-up': (
     min-width: $--md,
   ),
-  "md-only": "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
-  "md-and-down": (
+  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
+  'md-and-down': (
     max-width: $--lg - 1,
   ),
-  "lg-and-up": (
+  'lg-and-up': (
     min-width: $--lg,
   ),
-  "lg-only": "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
-  "lg-and-down": (
+  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
+  'lg-and-down': (
     max-width: $--xl - 1,
   ),
-  "xl-only": (
+  'xl-only': (
     min-width: $--xl,
   ),
 );
 
-@import "~element-ui/packages/theme-chalk/src/index";
+@import '~element-ui/packages/theme-chalk/src/index';
diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss
index fe27fe8..8112c9b 100644
--- a/src/styles/normalize.scss
+++ b/src/styles/normalize.scss
@@ -197,9 +197,9 @@ select {
  */
 
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type='button'],
+[type='reset'],
+[type='submit'] {
   -webkit-appearance: button;
 }
 
@@ -208,9 +208,9 @@ button,
  */
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }
@@ -220,9 +220,9 @@ button::-moz-focus-inner,
  */
 
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 
@@ -271,8 +271,8 @@ textarea {
  * 2. Remove the padding in IE 10.
  */
 
-[type="checkbox"],
-[type="radio"] {
+[type='checkbox'],
+[type='radio'] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
@@ -281,8 +281,8 @@ textarea {
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
   height: auto;
 }
 
@@ -291,7 +291,7 @@ textarea {
  * 2. Correct the outline style in Safari.
  */
 
-[type="search"] {
+[type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
@@ -300,7 +300,7 @@ textarea {
  * Remove the inner padding in Chrome and Safari on macOS.
  */
 
-[type="search"]::-webkit-search-decoration {
+[type='search']::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
diff --git a/src/styles/spinner/dots.css b/src/styles/spinner/dots.css
index 33bef95..6a1820a 100644
--- a/src/styles/spinner/dots.css
+++ b/src/styles/spinner/dots.css
@@ -8,103 +8,75 @@
   text-indent: -9999px;
   background: transparent;
   border-radius: 100%;
-  box-shadow: #f86 -14px -14px 0 7px,
-    #fc6 14px -14px 0 7px,
-    #6d7 14px 14px 0 7px,
-    #4ae -14px 14px 0 7px;
+  box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px,
+    #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
   transform-origin: 50% 50%;
   animation: dots-loader 5s infinite ease-in-out;
 }
 
 @keyframes dots-loader {
   0% {
-    box-shadow: #f86 -14px -14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px 14px 0 7px,
-      #4ae -14px 14px 0 7px;
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
   }
 
   8.33% {
-    box-shadow: #f86 14px -14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px 14px 0 7px,
-      #4ae -14px 14px 0 7px;
+    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
   }
 
   16.67% {
-    box-shadow: #f86 14px 14px 0 7px,
-      #fc6 14px 14px 0 7px,
-      #6d7 14px 14px 0 7px,
+    box-shadow: #f86 14px 14px 0 7px, #fc6 14px 14px 0 7px, #6d7 14px 14px 0 7px,
       #4ae -14px 14px 0 7px;
   }
 
   25% {
-    box-shadow: #f86 -14px 14px 0 7px,
-      #fc6 -14px 14px 0 7px,
-      #6d7 -14px 14px 0 7px,
-      #4ae -14px 14px 0 7px;
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px,
+      #6d7 -14px 14px 0 7px, #4ae -14px 14px 0 7px;
   }
 
   33.33% {
-    box-shadow: #f86 -14px -14px 0 7px,
-      #fc6 -14px 14px 0 7px,
-      #6d7 -14px -14px 0 7px,
-      #4ae -14px -14px 0 7px;
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px 14px 0 7px,
+      #6d7 -14px -14px 0 7px, #4ae -14px -14px 0 7px;
   }
 
   41.67% {
-    box-shadow: #f86 14px -14px 0 7px,
-      #fc6 -14px 14px 0 7px,
-      #6d7 -14px -14px 0 7px,
-      #4ae 14px -14px 0 7px;
+    box-shadow: #f86 14px -14px 0 7px, #fc6 -14px 14px 0 7px,
+      #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
   }
 
   50% {
-    box-shadow: #f86 14px 14px 0 7px,
-      #fc6 -14px 14px 0 7px,
-      #6d7 -14px -14px 0 7px,
-      #4ae 14px -14px 0 7px;
+    box-shadow: #f86 14px 14px 0 7px, #fc6 -14px 14px 0 7px,
+      #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
   }
 
   58.33% {
-    box-shadow: #f86 -14px 14px 0 7px,
-      #fc6 -14px 14px 0 7px,
-      #6d7 -14px -14px 0 7px,
-      #4ae 14px -14px 0 7px;
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 -14px 14px 0 7px,
+      #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
   }
 
   66.67% {
-    box-shadow: #f86 -14px -14px 0 7px,
-      #fc6 -14px -14px 0 7px,
-      #6d7 -14px -14px 0 7px,
-      #4ae 14px -14px 0 7px;
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 -14px -14px 0 7px,
+      #6d7 -14px -14px 0 7px, #4ae 14px -14px 0 7px;
   }
 
   75% {
-    box-shadow: #f86 14px -14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px -14px 0 7px,
-      #4ae 14px -14px 0 7px;
+    box-shadow: #f86 14px -14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px -14px 0 7px, #4ae 14px -14px 0 7px;
   }
 
   83.33% {
-    box-shadow: #f86 14px 14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px 14px 0 7px,
-      #4ae 14px 14px 0 7px;
+    box-shadow: #f86 14px 14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px 14px 0 7px, #4ae 14px 14px 0 7px;
   }
 
   91.67% {
-    box-shadow: #f86 -14px 14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px 14px 0 7px,
-      #4ae -14px 14px 0 7px;
+    box-shadow: #f86 -14px 14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
   }
 
   100% {
-    box-shadow: #f86 -14px -14px 0 7px,
-      #fc6 14px -14px 0 7px,
-      #6d7 14px 14px 0 7px,
-      #4ae -14px 14px 0 7px;
+    box-shadow: #f86 -14px -14px 0 7px, #fc6 14px -14px 0 7px,
+      #6d7 14px 14px 0 7px, #4ae -14px 14px 0 7px;
   }
 }
diff --git a/src/styles/spinner/gauge.css b/src/styles/spinner/gauge.css
index 1b82a28..5457bf9 100644
--- a/src/styles/spinner/gauge.css
+++ b/src/styles/spinner/gauge.css
@@ -17,7 +17,7 @@
   left: 30px;
   width: 4px;
   height: 27px;
-  content: "";
+  content: '';
   background: white;
   border-radius: 2px;
   transform-origin: 50% 100%;
@@ -30,7 +30,7 @@
   left: 26px;
   width: 13px;
   height: 13px;
-  content: "";
+  content: '';
   background: white;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
diff --git a/src/styles/spinner/inner-circles.css b/src/styles/spinner/inner-circles.css
index 0144da2..a7955f5 100644
--- a/src/styles/spinner/inner-circles.css
+++ b/src/styles/spinner/inner-circles.css
@@ -18,7 +18,7 @@
   display: inline-block;
   width: 50px;
   height: 50px;
-  content: "";
+  content: '';
   border-radius: 50%;
 }
 
diff --git a/src/styles/spinner/plus.css b/src/styles/spinner/plus.css
index af4516f..2659c9c 100644
--- a/src/styles/spinner/plus.css
+++ b/src/styles/spinner/plus.css
@@ -29,7 +29,7 @@
   right: 50%;
   width: 50%;
   height: 100%;
-  content: "";
+  content: '';
   background: #f86;
   -moz-border-radius: 24px 0 0 24px;
   -webkit-border-radius: 24px;
@@ -49,7 +49,7 @@
   right: 50%;
   width: 50%;
   height: 100%;
-  content: "";
+  content: '';
   background: #fc6;
   -moz-border-radius: 24px 0 0 24px;
   -webkit-border-radius: 24px;
diff --git a/src/styles/vab.scss b/src/styles/vab.scss
index ba3a92a..682128d 100644
--- a/src/styles/vab.scss
+++ b/src/styles/vab.scss
@@ -8,6 +8,7 @@
 @import './normalize.scss';
 @import './transition.scss';
 @import './loading.scss';
+
 $base: '.vab';
 
 @mixin scrollbar {
@@ -70,8 +71,10 @@ a {
 * {
   transition: $base-transition;
 }
+
 svg {
   transition: none;
+
   * {
     transition: none;
   }
@@ -146,6 +149,7 @@ html {
           * {
             transition: none;
           }
+
           padding: $base-padding;
           background: $base-color-white;
         }
@@ -264,6 +268,7 @@ html {
     .el-submenu {
       margin: 7px !important;
       border-radius: 5px !important;
+
       &:hover {
         border-radius: 5px !important;
       }
diff --git a/src/utils/request.js b/src/utils/request.js
index c230116..f359ca6 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -5,11 +5,11 @@ import {
   contentType,
   debounce,
   invalidCode,
+  loginInterception,
   noPermissionCode,
   requestTimeout,
   successCode,
   tokenName,
-  loginInterception,
 } from '@/config'
 import store from '@/store'
 import qs from 'qs'
diff --git a/src/utils/validate.js b/src/utils/validate.js
index 2501f84..fe79949 100644
--- a/src/utils/validate.js
+++ b/src/utils/validate.js
@@ -7,6 +7,7 @@
 export function isExternal(path) {
   return /^(https?:|mailto:|tel:)/.test(path)
 }
+
 /**
  * @author https://vue-admin-beautiful.com （不想保留author可删除）
  * @description 校验密码是否小于6位
@@ -16,6 +17,7 @@ export function isExternal(path) {
 export function isPassword(str) {
   return str.length >= 6
 }
+
 /**
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @description 判断是否是字符串
@@ -25,6 +27,7 @@ export function isPassword(str) {
 export function isString(str) {
   return typeof str === 'string' || str instanceof String
 }
+
 /**
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @description 判断是否是数组
@@ -37,6 +40,7 @@ export function isArray(arg) {
   }
   return Array.isArray(arg)
 }
+
 /**
  * @author chuzhixin 1204505056@qq.com （不想保留author可删除）
  * @description 判断是否是手机号
diff --git a/src/views/401.vue b/src/views/401.vue
index b09711a..cf070fa 100644
--- a/src/views/401.vue
+++ b/src/views/401.vue
@@ -2,7 +2,7 @@
   <div class="error-container">
     <div class="error-content">
       <el-row :gutter="20">
-        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <div class="pic-error">
             <img
               alt="401"
@@ -27,7 +27,7 @@
           </div>
         </el-col>
 
-        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <div class="bullshit">
             <div class="bullshit-oops">{{ oops }}</div>
             <div class="bullshit-headline">{{ headline }}</div>
diff --git a/src/views/404.vue b/src/views/404.vue
index 9c261b6..5a28ce0 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -2,7 +2,7 @@
   <div class="error-container">
     <div class="error-content">
       <el-row :gutter="20">
-        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <div class="pic-error">
             <img
               alt="401"
@@ -27,7 +27,7 @@
           </div>
         </el-col>
 
-        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+        <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
           <div class="bullshit">
             <div class="bullshit-oops">{{ oops }}</div>
             <div class="bullshit-headline">{{ headline }}</div>
diff --git a/src/views/index/components/Plan.vue b/src/views/index/components/Plan.vue
index 6c27a16..253ff54 100644
--- a/src/views/index/components/Plan.vue
+++ b/src/views/index/components/Plan.vue
@@ -7,29 +7,30 @@
         祝用框架的小伙伴都能住上别墅，开上保时捷
       </el-tag>
     </template>
-    <el-table :data="tableData" row-key="title" height="283px">
+    <el-table :data="tableData" height="283px" row-key="title">
       <el-table-column align="center" label="拖拽" width="50px">
         <template #default="{}">
           <vab-icon
-            style="cursor: pointer"
             :icon="['fas', 'arrows-alt']"
+            style="cursor: pointer"
           ></vab-icon>
         </template>
       </el-table-column>
       <el-table-column width="20px" />
-      <el-table-column prop="title" label="目标" width="230px" />
+      <el-table-column label="目标" prop="title" width="230px" />
       <el-table-column label="进度" width="220px">
         <template #default="{ row }">
-          <el-progress :percentage="row.percentage" :color="row.color" />
+          <el-progress :color="row.color" :percentage="row.percentage" />
         </template>
       </el-table-column>
       <el-table-column width="50px" />
-      <el-table-column prop="endTIme" label="完成时间" />
+      <el-table-column label="完成时间" prop="endTIme" />
     </el-table>
   </el-card>
 </template>
 <script>
   import Sortable from 'sortablejs'
+
   export default {
     data() {
       return {
diff --git a/src/views/index/components/VersionInformation.vue b/src/views/index/components/VersionInformation.vue
index d2dda16..4c550f3 100644
--- a/src/views/index/components/VersionInformation.vue
+++ b/src/views/index/components/VersionInformation.vue
@@ -27,16 +27,16 @@
           <td>授权渠道</td>
           <td colspan="3">
             <a
-              target="_blank"
               href="https://vue-admin-beautiful.com/authorization"
+              target="_blank"
             >
               <el-button style="margin-left: 10px" type="primary">
                 PRO付费版本 购买源码 ￥699
               </el-button>
             </a>
             <a
-              target="_blank"
               href="https://vue-admin-beautiful.com/authorization"
+              target="_blank"
             >
               <el-button style="margin-left: 10px" type="primary">
                 Plus付费版本 购买源码 ￥799
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index abd53f8..9e5831d 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,30 +1,30 @@
 <template>
   <div class="index-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
         <el-alert v-if="noticeList[0]" :closable="noticeList[0].closable">
           <div
             style="display: flex; align-items: center; justify-content: center"
           >
             <a
-              target="_blank"
               href="https://github.com/chuzhixin/vue-admin-better"
+              target="_blank"
             >
               <img
-                style="margin-right: 10px"
                 src="https://img.shields.io/github/stars/chuzhixin/vue-admin-better?style=flat-square&label=Stars&logo=github"
+                style="margin-right: 10px"
               />
             </a>
             <p v-html="noticeList[0].title"></p>
           </div>
         </el-alert>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="never">
           <div slot="header">
             <span>访问量</span>
           </div>
-          <vab-chart autoresize :option="fwl" />
+          <vab-chart :option="fwl" autoresize />
           <div class="bottom">
             <span>
               日均访问量:
@@ -34,12 +34,12 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6">
+      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="never">
           <div slot="header">
             <span>授权数</span>
           </div>
-          <vab-chart autoresize :option="sqs" />
+          <vab-chart :option="sqs" autoresize />
           <div class="bottom">
             <span>
               总授权数:
@@ -52,31 +52,31 @@
       <el-col
         v-for="(item, index) in iconList"
         :key="index"
-        :xs="12"
-        :sm="6"
-        :md="3"
         :lg="3"
+        :md="3"
+        :sm="6"
         :xl="3"
+        :xs="12"
       >
         <router-link :to="item.link" target="_blank">
           <el-card class="icon-panel" shadow="never">
             <vab-icon
-              :style="{ color: item.color }"
               :icon="['fas', item.icon]"
+              :style="{ color: item.color }"
             ></vab-icon>
             <p>{{ item.title }}</p>
           </el-card>
         </router-link>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="24" :lg="11" :xl="11">
+      <el-col :lg="11" :md="24" :sm="24" :xl="11" :xs="24">
         <el-card class="card" shadow="never">
           <div slot="header">
             <span>依赖信息</span>
             <div style="float: right">部署时间:{{ updateTime }}</div>
           </div>
           <div class="bottom-btn">
-            <el-popover placement="top" width="250" trigger="hover">
+            <el-popover placement="top" trigger="hover" width="250">
               <p>
                 请我们喝杯咖啡，付款后联系qq
                 783963206，我们将邀请您加入我们的讨论群，谢谢您愿意支持开源，加群获取文档、及基础模板，群内大佬众多，希望能帮到大家（如情况不允许，请勿勉强）。
@@ -87,14 +87,14 @@
               </a>
             </el-popover>
             <a
-              target="_blank"
               href="https://github.com/chuzhixin/vue-admin-better"
+              target="_blank"
             >
               <el-button type="warning">github下载源码点star</el-button>
             </a>
             <a
-              target="_blank"
               href="https://gitee.com/chu1204505056/vue-admin-beautiful"
+              target="_blank"
             >
               <el-button type="warning">码云下载源码点star</el-button>
             </a>
@@ -147,15 +147,15 @@
             <span>其他信息</span>
           </div>
           <div style="text-align: center">
-            <vab-colorful-icon style="font-size: 140px" icon-class="vab" />
+            <vab-colorful-icon icon-class="vab" style="font-size: 140px" />
             <h1 style="font-size: 30px">vue-admin-better</h1>
           </div>
           <div v-for="(item, index) in noticeList" :key="index">
             <el-alert
               v-if="index !== 0"
+              :closable="item.closable"
               :title="item.title"
               :type="item.type"
-              :closable="item.closable"
             ></el-alert>
             <br />
           </div>
@@ -164,7 +164,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="13" :lg="13" :xl="13">
+      <el-col :lg="13" :md="13" :sm="24" :xl="13" :xs="24">
         <el-card class="card" shadow="never">
           <div slot="header">
             <span>更新日志</span>
@@ -173,8 +173,8 @@
             <el-timeline-item
               v-for="(activity, index) in activities"
               :key="index"
-              :timestamp="activity.timestamp"
               :color="activity.color"
+              :timestamp="activity.timestamp"
             >
               {{ activity.content }}
             </el-timeline-item>
@@ -192,7 +192,6 @@
   import { dependencies, devDependencies } from '../../../package.json'
   import { getList } from '@/api/changeLog'
   import { getNoticeList } from '@/api/notice'
-  import { getRepos, getStargazers } from '@/api/github'
   import Plan from './components/Plan'
   import VersionInformation from './components/VersionInformation'
 
@@ -576,18 +575,18 @@
         const res = await getNoticeList()
         this.noticeList = res.data
         /* getRepos({
+      token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
+    }).then((res) => {
+      const per_page = Math.ceil(res.data.stargazers_count / 100);
+      alert(per_page);
+      getStargazers({
         token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
+        page: 1,
+        per_page: res.per_page,
       }).then((res) => {
-        const per_page = Math.ceil(res.data.stargazers_count / 100);
-        alert(per_page);
-        getStargazers({
-          token: "1061286824f978ea3cf98b7b8ea26fe27ba7cea1",
-          page: 1,
-          per_page: res.per_page,
-        }).then((res) => {
-          alert(JSON.stringify(res));
-        });
-      }); */
+        alert(JSON.stringify(res));
+      });
+    }); */
       },
     },
   }
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dd99764..4f7671c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="login-container">
     <el-alert
-      title="beautiful boys and girls欢迎加入vue-admin-beautifulQQ群：972435319"
-      type="success"
       :closable="false"
       style="position: fixed"
+      title="beautiful boys and girls欢迎加入vue-admin-beautifulQQ群：972435319"
+      type="success"
     ></el-alert>
     <el-row>
-      <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
         <div style="color: transparent">占位符</div>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-form
           ref="form"
           :model="form"
@@ -20,7 +20,7 @@
         >
           <div class="title">hello !</div>
           <div class="title-tips">欢迎来到{{ title }}！</div>
-          <el-form-item style="margin-top: 40px" prop="username">
+          <el-form-item prop="username" style="margin-top: 40px">
             <span class="svg-container svg-container-admin">
               <vab-icon :icon="['fas', 'user']" />
             </span>
@@ -41,8 +41,8 @@
               ref="password"
               v-model.trim="form.password"
               :type="passwordType"
-              tabindex="2"
               placeholder="请输入密码"
+              tabindex="2"
               @keyup.enter.native="handleLogin"
             />
             <span
diff --git a/src/views/mall/goodsList/index.vue b/src/views/mall/goodsList/index.vue
index 824c62b..4cf8e8a 100644
--- a/src/views/mall/goodsList/index.vue
+++ b/src/views/mall/goodsList/index.vue
@@ -4,8 +4,8 @@
       <vab-query-form-right-panel :span="24">
         <el-form
           ref="form"
-          :model="queryForm"
           :inline="true"
+          :model="queryForm"
           @submit.native.prevent
         >
           <el-form-item>
@@ -14,8 +14,8 @@
           <el-form-item>
             <el-button
               icon="el-icon-search"
-              type="primary"
               native-type="submit"
+              type="primary"
               @click="handleQuery"
             >
               查询
@@ -28,11 +28,11 @@
       <el-col
         v-for="(item, index) in list"
         :key="index"
-        :xs="24"
-        :sm="8"
-        :md="8"
         :lg="8"
+        :md="8"
+        :sm="8"
         :xl="6"
+        :xs="24"
       >
         <el-card :body-style="{ padding: '0px' }" shadow="hover">
           <div class="goods-list-card-body">
@@ -53,11 +53,11 @@
       </el-col>
     </el-row>
     <el-pagination
-      background
       :current-page="queryForm.pageNo"
       :layout="layout"
       :page-size="queryForm.pageSize"
       :total="total"
+      background
       @current-change="handleCurrentChange"
       @size-change="handleSizeChange"
     ></el-pagination>
diff --git a/src/views/mall/pay/components/Step2.vue b/src/views/mall/pay/components/Step2.vue
index c64e5dd..ae5cd71 100644
--- a/src/views/mall/pay/components/Step2.vue
+++ b/src/views/mall/pay/components/Step2.vue
@@ -25,7 +25,7 @@
       </el-form-item>
     </el-form>
     <div class="pay-button-group">
-      <el-button type="primary" :loading="loading" @click="handleSubmit">
+      <el-button :loading="loading" type="primary" @click="handleSubmit">
         提交
       </el-button>
       <el-button @click="handlePrev">上一步</el-button>
diff --git a/src/views/mall/pay/components/Step3.vue b/src/views/mall/pay/components/Step3.vue
index a504a19..7770c62 100644
--- a/src/views/mall/pay/components/Step3.vue
+++ b/src/views/mall/pay/components/Step3.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <div class="pay-top-content">
-      <vab-icon class="pay-success" :icon="['fas', 'check-circle']"></vab-icon>
+      <vab-icon :icon="['fas', 'check-circle']" class="pay-success"></vab-icon>
       <p>支付成功</p>
     </div>
     <el-form
       ref="form"
       :model="form"
       :rules="rules"
-      label-width="120px"
       class="pay-bottom"
+      label-width="120px"
     >
       <el-form-item label="付款账户：">
         {{ infoData.payAccount }}
diff --git a/src/views/mall/pay/index.vue b/src/views/mall/pay/index.vue
index e054328..171200e 100644
--- a/src/views/mall/pay/index.vue
+++ b/src/views/mall/pay/index.vue
@@ -2,13 +2,13 @@
   <div class="pay-container">
     <el-row :gutter="20">
       <el-col
-        :xs="24"
-        :sm="{ span: 20, offset: 2 }"
-        :md="{ span: 20, offset: 2 }"
         :lg="{ span: 14, offset: 5 }"
+        :md="{ span: 20, offset: 2 }"
+        :sm="{ span: 20, offset: 2 }"
         :xl="{ span: 12, offset: 6 }"
+        :xs="24"
       >
-        <el-steps :space="200" :active="active" align-center class="steps">
+        <el-steps :active="active" :space="200" align-center class="steps">
           <el-step title="填写转账信息"></el-step>
           <el-step title="确认转账信息"></el-step>
           <el-step title="完成"></el-step>
@@ -33,6 +33,7 @@
   import Step1 from './components/Step1'
   import Step2 from './components/Step2'
   import Step3 from './components/Step3'
+
   export default {
     name: 'Pay',
     components: { Step1, Step2, Step3 },
diff --git a/src/views/personnelManagement/menuManagement/index.vue b/src/views/personnelManagement/menuManagement/index.vue
index 260ebc7..2111543 100644
--- a/src/views/personnelManagement/menuManagement/index.vue
+++ b/src/views/personnelManagement/menuManagement/index.vue
@@ -4,16 +4,16 @@
       演示环境仅做基础功能展示，若想实现不同角色的真实菜单配置，需将settings.js路由加载模式改为all模式，由后端全面接管路由渲染与权限控制
     </el-divider>
     <el-row>
-      <el-col :xs="24" :sm="24" :md="8" :lg="4" :xl="4">
+      <el-col :lg="4" :md="8" :sm="24" :xl="4" :xs="24">
         <el-tree
           :data="data"
+          :default-expanded-keys="['root']"
           :props="defaultProps"
           node-key="id"
-          :default-expanded-keys="['root']"
           @node-click="handleNodeClick"
         ></el-tree>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="16" :lg="20" :xl="20">
+      <el-col :lg="20" :md="16" :sm="24" :xl="20" :xs="24">
         <vab-query-form>
           <vab-query-form-top-panel :span="12">
             <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
@@ -25,29 +25,29 @@
           v-loading="listLoading"
           :data="list"
           :element-loading-text="elementLoadingText"
-          row-key="path"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           border
           default-expand-all
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          row-key="path"
         >
           <el-table-column
-            show-overflow-tooltip
-            prop="name"
             label="name"
+            prop="name"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="path"
             label="路径"
+            prop="path"
+            show-overflow-tooltip
           ></el-table-column>
-          <el-table-column show-overflow-tooltip label="是否隐藏">
+          <el-table-column label="是否隐藏" show-overflow-tooltip>
             <template #default="{ row }">
               <span>
                 {{ row.hidden ? '是' : '否' }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否一直显示当前节点">
+          <el-table-column label="是否一直显示当前节点" show-overflow-tooltip>
             <template #default="{ row }">
               <span>
                 {{ row.alwaysShow ? '是' : '否' }}
@@ -55,21 +55,21 @@
             </template>
           </el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="component"
             label="vue文件路径"
+            prop="component"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="redirect"
             label="重定向"
+            prop="redirect"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="meta.title"
             label="标题"
+            prop="meta.title"
+            show-overflow-tooltip
           ></el-table-column>
-          <el-table-column show-overflow-tooltip label="图标">
+          <el-table-column label="图标" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 <vab-icon
@@ -79,28 +79,28 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否固定">
+          <el-table-column label="是否固定" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.affix ? '是' : '否' }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否无缓存">
+          <el-table-column label="是否无缓存" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.noKeepAlive ? '是' : '否' }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="badge">
+          <el-table-column label="badge" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.badge }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="操作" width="200">
+          <el-table-column label="操作" show-overflow-tooltip width="200">
             <template #default="{ row }">
               <el-button type="text" @click="handleEdit(row)">编辑</el-button>
               <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -116,7 +116,7 @@
 
 <script>
   import { getRouterList as getList } from '@/api/router'
-  import { getTree, doDelete } from '@/api/menuManagement'
+  import { doDelete, getTree } from '@/api/menuManagement'
   import Edit from './components/MenuManagementEdit'
 
   export default {
diff --git a/src/views/personnelManagement/roleManagement/index.vue b/src/views/personnelManagement/roleManagement/index.vue
index 5fcf658..ea4eeb0 100644
--- a/src/views/personnelManagement/roleManagement/index.vue
+++ b/src/views/personnelManagement/roleManagement/index.vue
@@ -17,8 +17,8 @@
           <el-form-item>
             <el-input
               v-model.trim="queryForm.permission"
-              placeholder="请输入查询条件"
               clearable
+              placeholder="请输入查询条件"
             />
           </el-form-item>
           <el-form-item>
@@ -38,16 +38,16 @@
     >
       <el-table-column show-overflow-tooltip type="selection"></el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="id"
         label="id"
+        prop="id"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="permission"
         label="权限码"
+        prop="permission"
+        show-overflow-tooltip
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="操作" width="200">
+      <el-table-column label="操作" show-overflow-tooltip width="200">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -55,11 +55,11 @@
       </el-table-column>
     </el-table>
     <el-pagination
-      background
       :current-page="queryForm.pageNo"
-      :page-size="queryForm.pageSize"
       :layout="layout"
+      :page-size="queryForm.pageSize"
       :total="total"
+      background
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     ></el-pagination>
@@ -68,7 +68,7 @@
 </template>
 
 <script>
-  import { getList, doDelete } from '@/api/roleManagement'
+  import { doDelete, getList } from '@/api/roleManagement'
   import Edit from './components/RoleManagementEdit'
 
   export default {
diff --git a/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue b/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
index fe44872..4a54016 100644
--- a/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
+++ b/src/views/personnelManagement/userManagement/components/UserManagementEdit.vue
@@ -12,8 +12,8 @@
       <el-form-item label="密码" prop="password">
         <el-input
           v-model.trim="form.password"
-          type="password"
           autocomplete="off"
+          type="password"
         ></el-input>
       </el-form-item>
       <el-form-item label="邮箱" prop="email">
diff --git a/src/views/personnelManagement/userManagement/index.vue b/src/views/personnelManagement/userManagement/index.vue
index e44e687..1e42df7 100644
--- a/src/views/personnelManagement/userManagement/index.vue
+++ b/src/views/personnelManagement/userManagement/index.vue
@@ -14,8 +14,8 @@
           <el-form-item>
             <el-input
               v-model.trim="queryForm.username"
-              placeholder="请输入用户名"
               clearable
+              placeholder="请输入用户名"
             />
           </el-form-item>
           <el-form-item>
@@ -35,22 +35,22 @@
     >
       <el-table-column show-overflow-tooltip type="selection"></el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="id"
         label="id"
+        prop="id"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="username"
         label="用户名"
+        prop="username"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="email"
         label="邮箱"
+        prop="email"
+        show-overflow-tooltip
       ></el-table-column>
 
-      <el-table-column show-overflow-tooltip label="权限">
+      <el-table-column label="权限" show-overflow-tooltip>
         <template #default="{ row }">
           <el-tag v-for="(item, index) in row.permissions" :key="index">
             {{ item }}
@@ -59,11 +59,11 @@
       </el-table-column>
 
       <el-table-column
-        show-overflow-tooltip
-        prop="datatime"
         label="修改时间"
+        prop="datatime"
+        show-overflow-tooltip
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="操作" width="200">
+      <el-table-column label="操作" show-overflow-tooltip width="200">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -71,11 +71,11 @@
       </el-table-column>
     </el-table>
     <el-pagination
-      background
       :current-page="queryForm.pageNo"
-      :page-size="queryForm.pageSize"
       :layout="layout"
+      :page-size="queryForm.pageSize"
       :total="total"
+      background
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
     ></el-pagination>
@@ -84,7 +84,7 @@
 </template>
 
 <script>
-  import { getList, doDelete } from '@/api/userManagement'
+  import { doDelete, getList } from '@/api/userManagement'
   import Edit from './components/UserManagementEdit'
 
   export default {
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index 7cb514f..3bbb214 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -2,31 +2,31 @@
   <div class="register-container">
     <el-alert
       v-if="nodeEnv !== 'development'"
-      title="beautiful boys and girls欢迎加入vue-admin-beautifulQQ群：972435319"
-      type="success"
       :closable="false"
       style="position: fixed"
+      title="beautiful boys and girls欢迎加入vue-admin-beautifulQQ群：972435319"
+      type="success"
     ></el-alert>
     <el-row>
-      <el-col :xs="24" :sm="24" :md="12" :lg="16" :xl="16">
+      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
         <div style="color: transparent">占位符</div>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-form
           ref="registerForm"
           :model="form"
-          class="register-form"
           :rules="registerRules"
+          class="register-form"
           size="mini"
         >
           <el-form-item prop="username">
             <el-input
               v-model.trim="form.username"
               v-focus
+              auto-complete="off"
+              placeholder="请输入用户名"
               style="margin-top: 20px"
               type="text"
-              placeholder="请输入用户名"
-              auto-complete="off"
             >
               <vab-icon slot="prefix" :icon="['fas', 'user-alt']"></vab-icon>
             </el-input>
@@ -34,11 +34,11 @@
           <el-form-item prop="phone">
             <el-input
               v-model.trim="form.phone"
-              type="text"
-              placeholder="请输入手机号"
-              maxlength="11"
-              show-word-limit
               autocomplete="off"
+              maxlength="11"
+              placeholder="请输入手机号"
+              show-word-limit
+              type="text"
             >
               <vab-icon slot="prefix" :icon="['fas', 'mobile-alt']"></vab-icon>
             </el-input>
@@ -46,8 +46,8 @@
           <el-form-item prop="phoneCode" style="position: relative">
             <el-input
               v-model.trim="form.phoneCode"
-              type="text"
               placeholder="手机验证码"
+              type="text"
             >
               <vab-icon
                 slot="prefix"
@@ -55,9 +55,9 @@
               ></vab-icon>
             </el-input>
             <el-button
-              type="primary"
-              class="show-pwd phone-code"
               :disabled="isGetphone"
+              class="show-pwd phone-code"
+              type="primary"
               @click="getPhoneCode"
             >
               {{ phoneCode }}
@@ -66,9 +66,9 @@
           <el-form-item prop="password">
             <el-input
               v-model.trim="form.password"
-              type="password"
-              placeholder="设置密码"
               autocomplete="new-password"
+              placeholder="设置密码"
+              type="password"
             >
               <vab-icon slot="prefix" :icon="['fas', 'unlock']"></vab-icon>
             </el-input>
@@ -93,6 +93,7 @@
 <script>
   import { isPassword, isPhone } from '@/utils/validate'
   import { register } from '@/api/user'
+
   export default {
     username: 'Register',
     directives: {
diff --git a/src/views/vab/element/index.vue b/src/views/vab/element/index.vue
index 5d44c45..a9ceab9 100644
--- a/src/views/vab/element/index.vue
+++ b/src/views/vab/element/index.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="element-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+      <el-col :lg="18" :md="18" :sm="24" :xl="16" :xs="24">
         <el-button type="primary" @click="dialogVisible = !dialogVisible">
           element全部文档点这里
         </el-button>
         <el-dialog
           :fullscreen="true"
-          title="element文档"
           :visible.sync="dialogVisible"
+          title="element文档"
         >
           <iframe
             class="element-iframe"
-            src="https://element.eleme.cn/#/zh-CN/component/installation"
             frameborder="0"
+            src="https://element.eleme.cn/#/zh-CN/component/installation"
           ></iframe>
         </el-dialog>
         <el-divider content-position="left">
           Tag 标签
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/tag"
+            target="_blank"
           >
             文档
           </a>
@@ -39,8 +39,8 @@
         <el-divider content-position="left">
           进度条
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/progress"
+            target="_blank"
           >
             文档
           </a>
@@ -50,51 +50,51 @@
         <el-progress :percentage="100" status="warning"></el-progress>
         <el-progress :percentage="50" status="exception"></el-progress>
         <el-progress
-          :text-inside="true"
+          :percentage="70"
           :stroke-width="26"
-          :percentage="70"
+          :text-inside="true"
         ></el-progress>
         <el-progress
-          :text-inside="true"
+          :percentage="100"
           :stroke-width="24"
-          :percentage="100"
+          :text-inside="true"
           status="success"
         ></el-progress>
         <el-progress
-          :text-inside="true"
-          :stroke-width="22"
           :percentage="80"
+          :stroke-width="22"
+          :text-inside="true"
           status="warning"
         ></el-progress>
         <el-progress
-          :text-inside="true"
-          :stroke-width="20"
           :percentage="50"
+          :stroke-width="20"
+          :text-inside="true"
           status="exception"
         ></el-progress>
-        <el-progress type="circle" :percentage="0"></el-progress>
-        <el-progress type="circle" :percentage="25"></el-progress>
+        <el-progress :percentage="0" type="circle"></el-progress>
+        <el-progress :percentage="25" type="circle"></el-progress>
         <el-progress
-          type="circle"
           :percentage="100"
           status="success"
+          type="circle"
         ></el-progress>
         <el-progress
-          type="circle"
           :percentage="70"
           status="warning"
+          type="circle"
         ></el-progress>
         <el-progress
-          type="circle"
           :percentage="50"
           status="exception"
+          type="circle"
         ></el-progress>
 
         <el-divider content-position="left">
           按钮
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/button"
+            target="_blank"
           >
             文档
           </a>
@@ -106,44 +106,44 @@
         <el-button type="warning">警告按钮</el-button>
         <el-button type="danger">危险按钮</el-button>
         <el-button plain>朴素按钮</el-button>
-        <el-button type="primary" plain>主要按钮</el-button>
-        <el-button type="success" plain>成功按钮</el-button>
-        <el-button type="info" plain>信息按钮</el-button>
-        <el-button type="warning" plain>警告按钮</el-button>
-        <el-button type="danger" plain>危险按钮</el-button>
+        <el-button plain type="primary">主要按钮</el-button>
+        <el-button plain type="success">成功按钮</el-button>
+        <el-button plain type="info">信息按钮</el-button>
+        <el-button plain type="warning">警告按钮</el-button>
+        <el-button plain type="danger">危险按钮</el-button>
         <el-button round>圆角按钮</el-button>
-        <el-button type="primary" round>主要按钮</el-button>
-        <el-button type="success" round>成功按钮</el-button>
-        <el-button type="info" round>信息按钮</el-button>
-        <el-button type="warning" round>警告按钮</el-button>
-        <el-button type="danger" round>危险按钮</el-button>
-        <el-button icon="el-icon-search" circle></el-button>
-        <el-button type="primary" icon="el-icon-edit" circle></el-button>
-        <el-button type="success" icon="el-icon-check" circle></el-button>
-        <el-button type="info" icon="el-icon-message" circle></el-button>
-        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
-        <el-button type="danger" icon="el-icon-delete" circle></el-button>
+        <el-button round type="primary">主要按钮</el-button>
+        <el-button round type="success">成功按钮</el-button>
+        <el-button round type="info">信息按钮</el-button>
+        <el-button round type="warning">警告按钮</el-button>
+        <el-button round type="danger">危险按钮</el-button>
+        <el-button circle icon="el-icon-search"></el-button>
+        <el-button circle icon="el-icon-edit" type="primary"></el-button>
+        <el-button circle icon="el-icon-check" type="success"></el-button>
+        <el-button circle icon="el-icon-message" type="info"></el-button>
+        <el-button circle icon="el-icon-star-off" type="warning"></el-button>
+        <el-button circle icon="el-icon-delete" type="danger"></el-button>
         <el-button disabled>默认按钮</el-button>
-        <el-button type="primary" disabled>主要按钮</el-button>
-        <el-button type="success" disabled>成功按钮</el-button>
-        <el-button type="info" disabled>信息按钮</el-button>
-        <el-button type="warning" disabled>警告按钮</el-button>
-        <el-button type="danger" disabled>危险按钮</el-button>
-        <el-button type="primary" icon="el-icon-edit"></el-button>
-        <el-button type="primary" icon="el-icon-share"></el-button>
-        <el-button type="primary" icon="el-icon-delete"></el-button>
-        <el-button type="primary" icon="el-icon-search">搜索</el-button>
+        <el-button disabled type="primary">主要按钮</el-button>
+        <el-button disabled type="success">成功按钮</el-button>
+        <el-button disabled type="info">信息按钮</el-button>
+        <el-button disabled type="warning">警告按钮</el-button>
+        <el-button disabled type="danger">危险按钮</el-button>
+        <el-button icon="el-icon-edit" type="primary"></el-button>
+        <el-button icon="el-icon-share" type="primary"></el-button>
+        <el-button icon="el-icon-delete" type="primary"></el-button>
+        <el-button icon="el-icon-search" type="primary">搜索</el-button>
         <el-button type="primary">
           上传
           <i class="el-icon-upload el-icon--right"></i>
         </el-button>
-        <el-button type="primary" :loading="true">加载中</el-button>
+        <el-button :loading="true" type="primary">加载中</el-button>
 
         <el-divider content-position="left">
           文字链接
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/link"
+            target="_blank"
           >
             文档
           </a>
@@ -157,18 +157,18 @@
         <el-link type="danger">危险链接</el-link>
         <el-link type="info">信息链接</el-link>
         <el-link disabled>默认链接</el-link>
-        <el-link type="primary" disabled>主要链接</el-link>
-        <el-link type="success" disabled>成功链接</el-link>
-        <el-link type="warning" disabled>警告链接</el-link>
-        <el-link type="danger" disabled>危险链接</el-link>
-        <el-link type="info" disabled>信息链接</el-link>
+        <el-link disabled type="primary">主要链接</el-link>
+        <el-link disabled type="success">成功链接</el-link>
+        <el-link disabled type="warning">警告链接</el-link>
+        <el-link disabled type="danger">危险链接</el-link>
+        <el-link disabled type="info">信息链接</el-link>
         <el-link :underline="false">无下划线</el-link>
         <el-link>有下划线</el-link>
         <el-divider content-position="left">
           头像
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/avatar"
+            target="_blank"
           >
             文档
           </a>
@@ -177,8 +177,8 @@
         <el-divider content-position="left">
           页头
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/page-header"
+            target="_blank"
           >
             文档
           </a>
@@ -187,8 +187,8 @@
         <el-divider content-position="left">
           面包屑
           <a
-            target="_blank"
             href="https://element.eleme.cn/#/zh-CN/component/breadcrumb"
+            target="_blank"
           >
             文档
           </a>
diff --git a/src/views/vab/form/index.vue b/src/views/vab/form/index.vue
index 64d96d3..5996e7f 100644
--- a/src/views/vab/form/index.vue
+++ b/src/views/vab/form/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="form-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-form
           ref="ruleForm"
           :model="ruleForm"
           :rules="rules"
-          label-width="100px"
           class="demo-ruleForm"
+          label-width="100px"
         >
           <el-form-item label="活动名称" prop="name">
             <el-input v-model="ruleForm.name"></el-input>
diff --git a/src/views/vab/icon/colorfulIcon.vue b/src/views/vab/icon/colorfulIcon.vue
index 6da0180..23c47ba 100644
--- a/src/views/vab/icon/colorfulIcon.vue
+++ b/src/views/vab/icon/colorfulIcon.vue
@@ -26,11 +26,11 @@
       <el-col
         v-for="(item, index) in queryIcon"
         :key="index"
-        :xs="6"
-        :sm="8"
-        :md="3"
         :lg="2"
+        :md="3"
+        :sm="8"
         :xl="2"
+        :xs="6"
       >
         <el-card
           shadow="hover"
@@ -47,9 +47,9 @@
         <el-pagination
           :background="background"
           :current-page="queryForm.pageNo"
+          :layout="layout"
           :page-size="queryForm.pageSize"
           :page-sizes="[72, 144, 216, 288]"
-          :layout="layout"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
diff --git a/src/views/vab/icon/index.vue b/src/views/vab/icon/index.vue
index aad8cca..e6add65 100644
--- a/src/views/vab/icon/index.vue
+++ b/src/views/vab/icon/index.vue
@@ -20,11 +20,11 @@
       <el-col
         v-for="(item, index) in queryIcon"
         :key="index"
-        :xs="6"
-        :sm="8"
-        :md="3"
         :lg="2"
+        :md="3"
+        :sm="8"
         :xl="2"
+        :xs="6"
       >
         <el-card
           shadow="hover"
@@ -39,9 +39,9 @@
         <el-pagination
           :background="background"
           :current-page="queryForm.pageNo"
+          :layout="layout"
           :page-size="queryForm.pageSize"
           :page-sizes="[72, 144, 216, 288]"
-          :layout="layout"
           :total="total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
diff --git a/src/views/vab/lodash/index.vue b/src/views/vab/lodash/index.vue
index 8d326b5..3f3e0bb 100644
--- a/src/views/vab/lodash/index.vue
+++ b/src/views/vab/lodash/index.vue
@@ -4,16 +4,16 @@
       <el-col :span="24">
         <el-card shadow="hover">
           <el-link
-            type="primary"
             href="https://www.lodashjs.com/"
             target="_blank"
+            type="primary"
           >
             lodashjs官网
           </el-link>
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>去除数组array中的最后一个元素</span>
@@ -26,7 +26,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>返回数组 array的第一个元素</span>
@@ -39,7 +39,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>合并数组</span></div>
           <div class="lodash-content">
@@ -50,7 +50,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>左切片</span></div>
           <div class="lodash-content">
@@ -61,7 +61,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>右切片</span></div>
           <div class="lodash-content">
@@ -72,7 +72,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>修改拼接</span></div>
           <div class="lodash-content">
@@ -83,7 +83,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>获取数组最后一个元素</span></div>
           <div class="lodash-content">
@@ -94,7 +94,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>数组去重</span></div>
           <div class="lodash-content">
@@ -105,7 +105,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>获取数组的最大值</span></div>
           <div class="lodash-content">
@@ -116,7 +116,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>获取数组的最小值</span></div>
           <div class="lodash-content">
@@ -127,7 +127,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>四舍五入(保留任意位小数)</span>
@@ -140,7 +140,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>数组内数据相加</span></div>
           <div class="lodash-content">
@@ -151,7 +151,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>返回随机数</span></div>
           <div class="lodash-content">
@@ -162,7 +162,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>返回数组内的随机数</span></div>
           <div class="lodash-content">
@@ -173,7 +173,7 @@
         </el-card>
       </el-col>
 
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6">
+      <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24">
         <el-card shadow="hover">
           <div slot="header"><span>事件防抖动</span></div>
           <div class="lodash-content">
diff --git a/src/views/vab/map/index.vue b/src/views/vab/map/index.vue
index e8fb34c..4383e8d 100644
--- a/src/views/vab/map/index.vue
+++ b/src/views/vab/map/index.vue
@@ -7,6 +7,7 @@
 <script>
   import axios from 'axios'
   import * as mapv from 'mapv'
+
   export default {
     name: 'Map',
     components: {},
diff --git a/src/views/vab/more/index.vue b/src/views/vab/more/index.vue
index 2375577..2d4ec3e 100644
--- a/src/views/vab/more/index.vue
+++ b/src/views/vab/more/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="more-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
         <el-card>
           <div slot="header">
             开源版本
@@ -18,8 +18,8 @@
               <li>
                 开源地址
                 <a
-                  target="_blank"
                   href="https://github.com/chuzhixin/vue-admin-beautiful"
+                  target="_blank"
                 >
                   如果有幸帮到了你，麻烦给个star
                 </a>
@@ -29,7 +29,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+      <el-col :lg="8" :md="24" :sm="24" :xl="8" :xs="24">
         <el-card>
           <div slot="header">
             VIP群
diff --git a/src/views/vab/permissions/index.vue b/src/views/vab/permissions/index.vue
index 011a655..99d0b6b 100644
--- a/src/views/vab/permissions/index.vue
+++ b/src/views/vab/permissions/index.vue
@@ -4,7 +4,7 @@
       intelligence模式,前端根据permissions拦截路由(演示环境,默认使用此方案)
     </el-divider>
 
-    <el-form ref="form" :model="form" :inline="true">
+    <el-form ref="form" :inline="true" :model="form">
       <el-form-item label="切换账号">
         <el-radio-group v-model="form.account">
           <el-radio label="admin">admin</el-radio>
@@ -43,40 +43,40 @@
     </p>
     <br />
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
         <el-table
           :data="tableData"
-          row-key="path"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
           border
           default-expand-all
-          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+          row-key="path"
         >
           <el-table-column
-            show-overflow-tooltip
-            prop="name"
             label="name"
+            prop="name"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="path"
             label="path"
+            prop="path"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="component"
             label="component"
+            prop="component"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="redirect"
             label="redirect"
+            prop="redirect"
+            show-overflow-tooltip
           ></el-table-column>
           <el-table-column
-            show-overflow-tooltip
-            prop="meta.title"
             label="标题"
+            prop="meta.title"
+            show-overflow-tooltip
           ></el-table-column>
-          <el-table-column show-overflow-tooltip label="图标">
+          <el-table-column label="图标" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 <vab-icon
@@ -86,21 +86,21 @@
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否固定">
+          <el-table-column label="是否固定" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.affix }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否无缓存">
+          <el-table-column label="是否无缓存" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.noKeepAlive }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="badge">
+          <el-table-column label="badge" show-overflow-tooltip>
             <template #default="{ row }">
               <span v-if="row.meta">
                 {{ row.meta.badge }}
diff --git a/src/views/vab/smallComponents/index.vue b/src/views/vab/smallComponents/index.vue
index 95c7328..edd1c4b 100644
--- a/src/views/vab/smallComponents/index.vue
+++ b/src/views/vab/smallComponents/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="small-components-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
         <el-divider content-position="left">小组件</el-divider>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>snow</span>
@@ -12,7 +12,7 @@
           <vab-snow></vab-snow>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>profile</span>
@@ -31,12 +31,12 @@
           ></vab-profile>
         </el-card>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
         <el-card shadow="hover">
           <div slot="header">
             <span>charge</span>
           </div>
-          <vab-charge :start-val="startVal" :end-val="endVal"></vab-charge>
+          <vab-charge :end-val="endVal" :start-val="startVal"></vab-charge>
         </el-card>
       </el-col>
     </el-row>
diff --git a/src/views/vab/table/index.vue b/src/views/vab/table/index.vue
index f9186c6..c8f98e0 100644
--- a/src/views/vab/table/index.vue
+++ b/src/views/vab/table/index.vue
@@ -16,8 +16,8 @@
       <vab-query-form-right-panel>
         <el-form
           ref="form"
-          :model="queryForm"
           :inline="true"
+          :model="queryForm"
           @submit.native.prevent
         >
           <el-form-item>
@@ -26,8 +26,8 @@
           <el-form-item>
             <el-button
               icon="el-icon-search"
-              type="primary"
               native-type="submit"
+              type="primary"
               @click="handleQuery"
             >
               查询
@@ -51,22 +51,22 @@
         type="selection"
         width="55"
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="序号" width="95">
+      <el-table-column label="序号" show-overflow-tooltip width="95">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
       <el-table-column
-        show-overflow-tooltip
-        prop="title"
         label="标题"
+        prop="title"
+        show-overflow-tooltip
       ></el-table-column>
       <el-table-column
-        show-overflow-tooltip
         label="作者"
         prop="author"
+        show-overflow-tooltip
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="头像">
+      <el-table-column label="头像" show-overflow-tooltip>
         <template #default="{ row }">
           <el-image
             v-if="imgShow"
@@ -76,12 +76,12 @@
         </template>
       </el-table-column>
       <el-table-column
-        show-overflow-tooltip
         label="点击量"
         prop="pageViews"
+        show-overflow-tooltip
         sortable
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="状态">
+      <el-table-column label="状态" show-overflow-tooltip>
         <template #default="{ row }">
           <el-tooltip
             :content="row.status"
@@ -96,12 +96,12 @@
         </template>
       </el-table-column>
       <el-table-column
-        show-overflow-tooltip
         label="时间"
         prop="datetime"
+        show-overflow-tooltip
         width="200"
       ></el-table-column>
-      <el-table-column show-overflow-tooltip label="操作" width="180px">
+      <el-table-column label="操作" show-overflow-tooltip width="180px">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
@@ -122,8 +122,9 @@
 </template>
 
 <script>
-  import { getList, doDelete } from '@/api/table'
+  import { doDelete, getList } from '@/api/table'
   import TableEdit from './components/TableEdit'
+
   export default {
     name: 'ComprehensiveTable',
     components: {
diff --git a/src/views/vab/tree/index.vue b/src/views/vab/tree/index.vue
index d7c086f..9a735b2 100644
--- a/src/views/vab/tree/index.vue
+++ b/src/views/vab/tree/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tree-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
         <el-divider content-position="left">常规树</el-divider>
         <el-input v-model="filterText" placeholder="输入关键字过滤" />
         <el-tree
@@ -54,7 +54,7 @@
           </template>
         </el-tree>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
         <el-divider content-position="left">懒加载树</el-divider>
         <el-input
           v-model.lazy="keyW"
@@ -137,7 +137,7 @@
           </el-tree>
         </div>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
         <el-divider content-position="left">单选树</el-divider>
         <el-select
           ref="singleTree"
@@ -167,7 +167,7 @@
           </el-option>
         </el-select>
       </el-col>
-      <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6">
+      <el-col :lg="6" :md="24" :sm="24" :xl="6" :xs="24">
         <el-divider content-position="left">多选树</el-divider>
         <el-select
           v-model="multipleSelectTreeVal"
diff --git a/src/views/vab/upload/index.vue b/src/views/vab/upload/index.vue
index 9107183..1cf4502 100644
--- a/src/views/vab/upload/index.vue
+++ b/src/views/vab/upload/index.vue
@@ -3,10 +3,10 @@
     <el-divider content-position="left">演示环境可能无法模拟上传</el-divider>
     <vab-upload
       ref="vabUpload"
-      url="/upload"
-      name="file"
       :limit="50"
       :size="2"
+      name="file"
+      url="/upload"
     ></vab-upload>
     <el-button type="primary" @click="handleShow({ key: 'value' })">
       模拟上传
diff --git a/src/views/vab/webSocket/index.vue b/src/views/vab/webSocket/index.vue
index 84b867d..d90e4b3 100644
--- a/src/views/vab/webSocket/index.vue
+++ b/src/views/vab/webSocket/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="webSocket-container">
     <el-row :gutter="20">
-      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
-        <el-alert type="success" :closable="false">
+      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
+        <el-alert :closable="false" type="success">
           webSocket连接{{ status }}！
         </el-alert>
         <br />