diff --git a/package-lock.json b/package-lock.json
index 0e24eab9a..374d03a14 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "dayjs": "^1.10.6",
         "dotenv": "^8.2.0",
         "echarts": "^5.1.2",
-        "element-plus": "^1.1.0-beta.7",
+        "element-plus": "^1.1.0-beta.8",
         "font-awesome": "^4.7.0",
         "lodash-es": "^4.17.21",
         "mitt": "^2.1.0",
@@ -59,7 +59,7 @@
         "cross-env": "^7.0.3",
         "eslint": "^7.30.0",
         "eslint-plugin-prettier": "^3.4.0",
-        "eslint-plugin-vue": "^7.12.1",
+        "eslint-plugin-vue": "^7.17.0",
         "husky": "^6.0.0",
         "lint-staged": "^11.0.0",
         "postcss": "^8.2.6",
@@ -69,12 +69,12 @@
         "sass": "^1.38.0",
         "sass-loader": "^12.1.0",
         "typescript": "^4.2.4",
-        "vite": "^2.5.1",
-        "vite-plugin-element-plus": "^0.0.11",
+        "vite": "^2.5.3",
+        "vite-plugin-element-plus": "^0.0.12",
         "vite-plugin-mock": "^2.9.6",
         "vite-plugin-style-import": "^1.2.1",
         "vite-svg-loader": "^2.2.0",
-        "vue-eslint-parser": "^7.7.2"
+        "vue-eslint-parser": "^7.10.0"
       }
     },
     "node_modules/@amap/amap-jsapi-loader": {
@@ -2167,9 +2167,9 @@
       "dev": true
     },
     "node_modules/element-plus": {
-      "version": "1.1.0-beta.7",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.1.0-beta.7.tgz",
-      "integrity": "sha512-+HcIwJsd0/kXl5roqgPhWhpbxL+s8cWMVD6+Lg0HS1gI9dnBZ3dN238UMYmerk+fCpN7l4V0ShuqM1gq1a7nNw==",
+      "version": "1.1.0-beta.8",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.1.0-beta.8.tgz",
+      "integrity": "sha512-L0z4UoaazLgvimU+Eb8KHwBdX6ND2sSOO/ja70FMJl7Y3T+PxP95OZAkpr1sNiBzMaVVdMef4lQLBwPqTO6PKw==",
       "dependencies": {
         "@element-plus/icons": "^0.0.11",
         "@popperjs/core": "^2.4.4",
@@ -2385,18 +2385,21 @@
       }
     },
     "node_modules/eslint-plugin-vue": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.12.1.tgz",
-      "integrity": "sha512-xHf/wCt88qmzqQerjaSteUFGASj7fPreglKD4ijnvoKRkoSJ3/H3kuJE8QFFtc+2wjw6hRDs834HH7vpuTJQzg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.17.0.tgz",
+      "integrity": "sha512-Rq5R2QetDCgC+kBFQw1+aJ5B93tQ4xqZvoCUxuIzwTonngNArsdP8ChM8PowIzsJvRtWl4ltGh/bZcN3xhFWSw==",
       "dev": true,
       "dependencies": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
-        "semver": "^7.3.2",
-        "vue-eslint-parser": "^7.6.0"
+        "semver": "^6.3.0",
+        "vue-eslint-parser": "^7.10.0"
       },
       "engines": {
         "node": ">=8.10"
+      },
+      "peerDependencies": {
+        "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0-0"
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/eslint-utils": {
@@ -2409,6 +2412,9 @@
       },
       "engines": {
         "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
       }
     },
     "node_modules/eslint-plugin-vue/node_modules/eslint-visitor-keys": {
@@ -2420,39 +2426,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/eslint-plugin-vue/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-vue/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/eslint-plugin-vue/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -5120,9 +5093,9 @@
       "dev": true
     },
     "node_modules/vite": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.1.tgz",
-      "integrity": "sha512-FwmLbbz8MB1pBs9dKoRDgpiqoijif8hSK1+NNUYc12/cnf+pM2UFhhQ1rcpXgbMhm/5c2USZdVAf0FSkSxaFDA==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.3.tgz",
+      "integrity": "sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.12.17",
@@ -5141,9 +5114,9 @@
       }
     },
     "node_modules/vite-plugin-element-plus": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/vite-plugin-element-plus/-/vite-plugin-element-plus-0.0.11.tgz",
-      "integrity": "sha512-1+g4aM8gVtiJuXpXCpBNNcva7UN00Oo3edHvVIAxegLM77H2TkVl7P8lmLZd6Iac68Oi/L8Zs9VpMQi9oAzcfQ==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/vite-plugin-element-plus/-/vite-plugin-element-plus-0.0.12.tgz",
+      "integrity": "sha512-Y4OoM8dsFKLa2FTSKqb6L0rkLnFXXJLpXbsPmSmmwGwtQoikajjvW6hrxG1wzxJtEp+dXTVQn7InIxdcBq2ICw==",
       "dev": true,
       "dependencies": {
         "@rollup/pluginutils": "^4.1.0",
@@ -5328,9 +5301,9 @@
       }
     },
     "node_modules/vue-eslint-parser": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.7.2.tgz",
-      "integrity": "sha512-zkfxSttpwBW9SQEa+rLR+j6sFHGGhanVH3VuzHQwybCQWJsg/Yi1W619gXOW01U/zekN4D+J4/S4Zufd1sClZg==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz",
+      "integrity": "sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==",
       "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
@@ -5343,6 +5316,12 @@
       },
       "engines": {
         "node": ">=8.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5.0.0"
       }
     },
     "node_modules/vue-eslint-parser/node_modules/eslint-visitor-keys": {
@@ -7227,9 +7206,9 @@
       "dev": true
     },
     "element-plus": {
-      "version": "1.1.0-beta.7",
-      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.1.0-beta.7.tgz",
-      "integrity": "sha512-+HcIwJsd0/kXl5roqgPhWhpbxL+s8cWMVD6+Lg0HS1gI9dnBZ3dN238UMYmerk+fCpN7l4V0ShuqM1gq1a7nNw==",
+      "version": "1.1.0-beta.8",
+      "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-1.1.0-beta.8.tgz",
+      "integrity": "sha512-L0z4UoaazLgvimU+Eb8KHwBdX6ND2sSOO/ja70FMJl7Y3T+PxP95OZAkpr1sNiBzMaVVdMef4lQLBwPqTO6PKw==",
       "requires": {
         "@element-plus/icons": "^0.0.11",
         "@popperjs/core": "^2.4.4",
@@ -7549,15 +7528,15 @@
       }
     },
     "eslint-plugin-vue": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.12.1.tgz",
-      "integrity": "sha512-xHf/wCt88qmzqQerjaSteUFGASj7fPreglKD4ijnvoKRkoSJ3/H3kuJE8QFFtc+2wjw6hRDs834HH7vpuTJQzg==",
+      "version": "7.17.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.17.0.tgz",
+      "integrity": "sha512-Rq5R2QetDCgC+kBFQw1+aJ5B93tQ4xqZvoCUxuIzwTonngNArsdP8ChM8PowIzsJvRtWl4ltGh/bZcN3xhFWSw==",
       "dev": true,
       "requires": {
         "eslint-utils": "^2.1.0",
         "natural-compare": "^1.4.0",
-        "semver": "^7.3.2",
-        "vue-eslint-parser": "^7.6.0"
+        "semver": "^6.3.0",
+        "vue-eslint-parser": "^7.10.0"
       },
       "dependencies": {
         "eslint-utils": {
@@ -7574,30 +7553,6 @@
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
           "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
           "dev": true
-        },
-        "lru-cache": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "dev": true,
-          "requires": {
-            "yallist": "^4.0.0"
-          }
-        },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
-        "yallist": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
         }
       }
     },
@@ -9604,9 +9559,9 @@
       "dev": true
     },
     "vite": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.1.tgz",
-      "integrity": "sha512-FwmLbbz8MB1pBs9dKoRDgpiqoijif8hSK1+NNUYc12/cnf+pM2UFhhQ1rcpXgbMhm/5c2USZdVAf0FSkSxaFDA==",
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.5.3.tgz",
+      "integrity": "sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ==",
       "dev": true,
       "requires": {
         "esbuild": "^0.12.17",
@@ -9625,9 +9580,9 @@
       }
     },
     "vite-plugin-element-plus": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/vite-plugin-element-plus/-/vite-plugin-element-plus-0.0.11.tgz",
-      "integrity": "sha512-1+g4aM8gVtiJuXpXCpBNNcva7UN00Oo3edHvVIAxegLM77H2TkVl7P8lmLZd6Iac68Oi/L8Zs9VpMQi9oAzcfQ==",
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/vite-plugin-element-plus/-/vite-plugin-element-plus-0.0.12.tgz",
+      "integrity": "sha512-Y4OoM8dsFKLa2FTSKqb6L0rkLnFXXJLpXbsPmSmmwGwtQoikajjvW6hrxG1wzxJtEp+dXTVQn7InIxdcBq2ICw==",
       "dev": true,
       "requires": {
         "@rollup/pluginutils": "^4.1.0",
@@ -9766,9 +9721,9 @@
       }
     },
     "vue-eslint-parser": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.7.2.tgz",
-      "integrity": "sha512-zkfxSttpwBW9SQEa+rLR+j6sFHGGhanVH3VuzHQwybCQWJsg/Yi1W619gXOW01U/zekN4D+J4/S4Zufd1sClZg==",
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.10.0.tgz",
+      "integrity": "sha512-7tc/ewS9Vq9Bn741pvpg8op2fWJPH3k32aL+jcIcWGCTzh/zXSdh7pZ5FV3W2aJancP9+ftPAv292zY5T5IPCg==",
       "dev": true,
       "requires": {
         "debug": "^4.1.1",
diff --git a/package.json b/package.json
index 1991b64a5..0c9407d4e 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "dayjs": "^1.10.6",
     "dotenv": "^8.2.0",
     "echarts": "^5.1.2",
-    "element-plus": "^1.1.0-beta.7",
+    "element-plus": "^1.1.0-beta.8",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mitt": "^2.1.0",
@@ -70,7 +70,7 @@
     "cross-env": "^7.0.3",
     "eslint": "^7.30.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.12.1",
+    "eslint-plugin-vue": "^7.17.0",
     "husky": "^6.0.0",
     "lint-staged": "^11.0.0",
     "postcss": "^8.2.6",
@@ -80,12 +80,12 @@
     "sass": "^1.38.0",
     "sass-loader": "^12.1.0",
     "typescript": "^4.2.4",
-    "vite": "^2.5.1",
-    "vite-plugin-element-plus": "^0.0.11",
+    "vite": "^2.5.3",
+    "vite-plugin-element-plus": "^0.0.12",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
     "vite-svg-loader": "^2.2.0",
-    "vue-eslint-parser": "^7.7.2"
+    "vue-eslint-parser": "^7.10.0"
   },
   "lint-staged": {
     "*.{js,jsx,vue,ts,tsx}": [
diff --git a/src/components/ReInfo/index.vue b/src/components/ReInfo/index.vue
index ab4e3185c..776b774ae 100644
--- a/src/components/ReInfo/index.vue
+++ b/src/components/ReInfo/index.vue
@@ -83,7 +83,7 @@ export default defineComponent({
   },
   emits: ["onBehavior", "refreshVerify"],
   setup(props, ctx) {
-    let vm: any;
+    const instance = getCurrentInstance();
 
     const model = toRef(props, "ruleForm");
     let tips = ref("注册");
@@ -117,7 +117,7 @@ export default defineComponent({
 
     // 点击登录或注册
     const onBehavior = (evt: Object): void => {
-      vm.refs.ruleForm.validate((valid: boolean) => {
+      instance.refs.ruleForm.validate((valid: boolean) => {
         if (valid) {
           ctx.emit("onBehavior", evt);
         } else {
@@ -133,7 +133,7 @@ export default defineComponent({
 
     // 表单重置
     const resetForm = (): void => {
-      vm.refs.ruleForm.resetFields();
+      instance.refs.ruleForm.resetFields();
     };
 
     // 登录、注册页面切换
@@ -150,10 +150,6 @@ export default defineComponent({
       router.push("/");
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-    });
-
     return {
       model,
       rules,
diff --git a/src/components/ReMap/src/Amap.vue b/src/components/ReMap/src/Amap.vue
index e2bce760d..27a157ef5 100644
--- a/src/components/ReMap/src/Amap.vue
+++ b/src/components/ReMap/src/Amap.vue
@@ -50,7 +50,7 @@ export interface mapInter {
 export default defineComponent({
   name: "Amap",
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let map: MapConfigureInter;
 
     const mapSet: mapInter = reactive({
@@ -74,9 +74,9 @@ export default defineComponent({
     };
 
     onBeforeMount(() => {
-      vm = getCurrentInstance(); //获取组件实例
-      if (!vm) return;
-      let { MapConfigure } = vm.appContext.config.globalProperties.$config;
+      if (!instance) return;
+      let { MapConfigure } =
+        instance.appContext.config.globalProperties.$config;
       let { options } = MapConfigure;
 
       AMapLoader.load({
@@ -86,7 +86,7 @@ export default defineComponent({
       })
         .then(AMap => {
           // 创建地图实例
-          map = new AMap.Map(vm.refs.mapview, options);
+          map = new AMap.Map(instance.refs.mapview, options);
 
           //地图中添加地图操作ToolBar插件
           map.plugin(["AMap.ToolBar", "AMap.MapType"], () => {
diff --git a/src/components/ReSelector/src/index.tsx b/src/components/ReSelector/src/index.tsx
index b9f6de97a..32f5dd78b 100644
--- a/src/components/ReSelector/src/index.tsx
+++ b/src/components/ReSelector/src/index.tsx
@@ -52,7 +52,7 @@ export default defineComponent({
   },
   emits: ["selectedVal"],
   setup(props, { emit }) {
-    let vm: any;
+    const instance = getCurrentInstance();
     // eslint-disable-next-line vue/no-setup-props-destructure
     const currentValue = props.value;
 
@@ -252,29 +252,28 @@ export default defineComponent({
       });
 
       addClass(
-        vm.refs["hsdiv" + props.HsKey + item[0]],
+        instance.refs["hsdiv" + props.HsKey + item[0]],
         activeClass,
         stayClass
       );
 
-      addClass(vm.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
+      addClass(instance.refs["hstd" + props.HsKey + item[0]], bothLeftSides);
 
       addClass(
-        vm.refs["hsdiv" + props.HsKey + item[1]],
+        instance.refs["hsdiv" + props.HsKey + item[1]],
         activeClass,
         stayClass
       );
 
-      addClass(vm.refs["hstd" + props.HsKey + item[1]], bothRightSides);
+      addClass(instance.refs["hstd" + props.HsKey + item[1]], bothRightSides);
 
       while (item[1] >= item[0]) {
-        addClass(vm.refs["hstd" + props.HsKey + item[0]], inRange);
+        addClass(instance.refs["hstd" + props.HsKey + item[0]], inRange);
         item[0]++;
       }
     };
 
     onBeforeMount(() => {
-      vm = getCurrentInstance();
       nextTick(() => {
         echoView(props.echo);
       });
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index e694c468f..ac2510f48 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -17,6 +17,7 @@
 import { ref, unref, computed, defineComponent, getCurrentInstance } from "vue";
 import { useRoute } from "vue-router";
 import { useSettingStoreHook } from "/@/store/modules/settings";
+
 export default defineComponent({
   name: "appMain",
   setup() {
diff --git a/src/layout/components/screenfull/index.vue b/src/layout/components/screenfull/index.vue
index 1319f6004..05d55309c 100644
--- a/src/layout/components/screenfull/index.vue
+++ b/src/layout/components/screenfull/index.vue
@@ -18,6 +18,7 @@
 <script>
 import { useFullscreen } from "@vueuse/core";
 import { defineComponent } from "vue";
+
 export default defineComponent({
   name: "screenfull",
   setup() {
diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue
index 8116458bd..f446fdcc8 100644
--- a/src/layout/components/setting/index.vue
+++ b/src/layout/components/setting/index.vue
@@ -9,7 +9,7 @@
         placement="bottom"
       >
         <li
-          :class="dataTheme === 'dark' ? 'is-select' : ''"
+          :class="dataTheme === 'dark' ? $style.isSelect : ''"
           ref="firstTheme"
           @click="onDark"
         >
@@ -25,7 +25,7 @@
         placement="bottom"
       >
         <li
-          :class="dataTheme === 'light' ? 'is-select' : ''"
+          :class="dataTheme === 'light' ? $style.isSelect : ''"
           ref="secondTheme"
           @click="onLight"
         >
@@ -98,18 +98,18 @@
 
 <script lang="ts">
 import panel from "../panel/index.vue";
-import { reactive, toRefs, ref, unref } from "vue";
+import { reactive, toRefs, ref, unref, useCssModule } from "vue";
 import { storageLocal, storageSession } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
 import { useRouter } from "vue-router";
 import { templateRef } from "@vueuse/core";
-let isSelect = "is-select";
 
 export default {
   name: "setting",
   components: { panel },
   setup() {
     const router = useRouter();
+    const { isSelect } = useCssModule();
 
     // 默认灵动模式
     const markValue = ref(storageLocal.getItem("showModel") || "smart");
@@ -237,6 +237,12 @@ export default {
 };
 </script>
 
+<style scoped module>
+.isSelect {
+  border: 2px solid #0960bd;
+}
+</style>
+
 <style lang="scss" scoped>
 .setting {
   width: 100%;
@@ -308,7 +314,4 @@ export default {
     }
   }
 }
-.is-select {
-  border: 2px solid #0960bd;
-}
 </style>
diff --git a/src/layout/components/sidebar/Logo.vue b/src/layout/components/sidebar/Logo.vue
index d3ab09289..de6e80464 100644
--- a/src/layout/components/sidebar/Logo.vue
+++ b/src/layout/components/sidebar/Logo.vue
@@ -28,6 +28,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import settings from "/@/settings";
+
 export default defineComponent({
   props: {
     collapse: {
diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue
index 2a0eb8ee5..d26f30abe 100644
--- a/src/layout/components/tag/index.vue
+++ b/src/layout/components/tag/index.vue
@@ -101,15 +101,15 @@ import { storageLocal } from "/@/utils/storage";
 import { emitter } from "/@/utils/mitt";
 import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
-let refreshButton = "refresh-button";
-
 import closeOther from "/@/assets/svg/close_other.svg";
 import closeLeft from "/@/assets/svg/close_left.svg";
 import closeRight from "/@/assets/svg/close_right.svg";
 import close from "/@/assets/svg/close.svg";
 import refresh from "/@/assets/svg/refresh.svg";
 import closeAll from "/@/assets/svg/close_all.svg";
-let routerArrays = [
+
+let refreshButton = "refresh-button";
+let routerArrays: Array<object> = [
   {
     path: "/welcome",
     meta: {
@@ -120,6 +120,7 @@ let routerArrays = [
     }
   }
 ];
+
 export default {
   name: "tag",
   components: {
@@ -144,7 +145,7 @@ export default {
     }
   },
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let st: any;
     const route = useRoute();
     const router = useRouter();
@@ -474,13 +475,14 @@ export default {
     function onMouseenter(item, index) {
       if (index) activeIndex.value = index;
       if (unref(showModel) === "smart") {
-        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
-        toggleClass(true, "schedule-in", vm.refs["schedule" + index]);
-        toggleClass(false, "schedule-out", vm.refs["schedule" + index]);
+        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+          return;
+        toggleClass(true, "schedule-in", instance.refs["schedule" + index]);
+        toggleClass(false, "schedule-out", instance.refs["schedule" + index]);
       } else {
-        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
-        toggleClass(true, "card-in", vm.refs["dynamic" + index]);
-        toggleClass(false, "card-out", vm.refs["dynamic" + index]);
+        if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
+        toggleClass(true, "card-in", instance.refs["dynamic" + index]);
+        toggleClass(false, "card-out", instance.refs["dynamic" + index]);
       }
     }
 
@@ -488,13 +490,14 @@ export default {
     function onMouseleave(item, index) {
       activeIndex.value = -1;
       if (unref(showModel) === "smart") {
-        if (hasClass(vm.refs["schedule" + index], "schedule-active")) return;
-        toggleClass(false, "schedule-in", vm.refs["schedule" + index]);
-        toggleClass(true, "schedule-out", vm.refs["schedule" + index]);
+        if (hasClass(instance.refs["schedule" + index], "schedule-active"))
+          return;
+        toggleClass(false, "schedule-in", instance.refs["schedule" + index]);
+        toggleClass(true, "schedule-out", instance.refs["schedule" + index]);
       } else {
-        if (hasClass(vm.refs["dynamic" + index], "card-active")) return;
-        toggleClass(false, "card-in", vm.refs["dynamic" + index]);
-        toggleClass(true, "card-out", vm.refs["dynamic" + index]);
+        if (hasClass(instance.refs["dynamic" + index], "card-active")) return;
+        toggleClass(false, "card-in", instance.refs["dynamic" + index]);
+        toggleClass(true, "card-out", instance.refs["dynamic" + index]);
       }
     }
 
@@ -510,8 +513,8 @@ export default {
     );
 
     onBeforeMount(() => {
-      vm = getCurrentInstance();
-      st = vm.appContext.app.config.globalProperties.$storage;
+      if (!instance) return;
+      st = instance.appContext.app.config.globalProperties.$storage;
       routerArrays = st.routesInStorage ?? routerArrays;
 
       // 根据当前路由初始化操作标签页的禁用状态
@@ -782,10 +785,6 @@ export default {
 }
 // 刷新按钮动画效果
 .refresh-button {
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-duration: 600ms;
-  -moz-transition-property: -moz-transform;
-  -moz-transition-duration: 600ms;
   -webkit-animation: rotate 600ms linear infinite;
   -moz-animation: rotate 600ms linear infinite;
   -o-animation: rotate 600ms linear infinite;
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 5c1f53c16..a79aeb05a 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -37,17 +37,17 @@ import {
   toRefs,
   watchEffect,
   onMounted,
-  onBeforeMount
+  onBeforeMount,
+  useCssModule
 } from "vue";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useSettingStoreHook } from "/@/store/modules/settings";
 import { useEventListener } from "@vueuse/core";
 import { toggleClass } from "/@/utils/operate";
-let hiddenMainContainer = "hidden-main-container";
 import options from "/@/settings";
-
 import fullScreen from "/@/assets/svg/full_screen.svg";
 import exitScreen from "/@/assets/svg/exit_screen.svg";
+
 interface setInter {
   sidebar: any;
   device: string;
@@ -69,9 +69,7 @@ export default {
   setup() {
     const pureApp = useAppStoreHook();
     const pureSetting = useSettingStoreHook();
-
-    // const router = useRouter();
-    // const route = useRoute();
+    const { hiddenMainContainer } = useCssModule();
 
     const WIDTH = ref(992);
 
@@ -170,6 +168,12 @@ export default {
 };
 </script>
 
+<style scoped module>
+.hiddenMainContainer {
+  margin-left: 0 !important;
+}
+</style>
+
 <style lang="scss" scoped>
 @mixin clearfix {
   &:after {
@@ -217,10 +221,6 @@ $sideBarWidth: 210px;
   width: 100%;
 }
 
-.hidden-main-container {
-  margin-left: 0 !important;
-}
-
 .re-screen {
   margin-top: 12px;
 }
diff --git a/src/views/components/cropping/index.vue b/src/views/components/cropping/index.vue
index cebda9a44..d5f30a37f 100644
--- a/src/views/components/cropping/index.vue
+++ b/src/views/components/cropping/index.vue
@@ -20,27 +20,23 @@ export default {
     Cropper
   },
   setup() {
-    let vm: any;
+    const instance = getCurrentInstance();
     let info = ref("");
     let cropperImg = ref("");
 
     const onCropper = (): void => {
       nextTick(() => {
-        vm.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
+        instance.refs.refCropper.cropper.getCroppedCanvas().toBlob(blob => {
           let fileReader: FileReader = new FileReader();
           fileReader.onloadend = (e: any) => {
             cropperImg.value = e.target.result;
-            info.value = vm.refs.refCropper.cropper.getData();
+            info.value = instance.refs.refCropper.cropper.getData();
           };
           fileReader.readAsDataURL(blob);
         }, "image/jpeg");
       });
     };
 
-    onBeforeMount(() => {
-      vm = getCurrentInstance();
-    });
-
     return {
       img,
       info,