feat: 使用scope样式错乱的问题

src/main.js

@@ -9,7 +9,7 @@ import './plugins/element.js'
 import './plugins/qrcode.js'
 import "./assets/css/main.scss"
 import "./assets/css/layout.scss"
-// import "./assets/css/element-variables.scss"
+import "./assets/css/element-variables.scss"
 // 公共样式、布局样式
 
 // 主题色调修改在assets/_style.scss  修改里面的变量即可

src/router/index.js

@@ -12,6 +12,10 @@ VueRouter.prototype.push = function push(to) {
 
 const routes = [
     {
+        path: "/",
+        redirect: "/login"
+    },
+    {
         path: "/Home",
         name: "Home",
         component: main,
@@ -77,19 +81,6 @@ const routes = [
             }
         ]
     },
-    // {
-    //     path: "/",
-    //     redirect: "/login"
-    // },
-    {
-        path: "*",
-        redirect: "/404"
-    },
-    {
-        path: "/404",
-        name: "404",
-        component: () => import("@/views/User/404")
-    },
     {
         path: "/login",
         name: "login",
@@ -105,6 +96,15 @@ const routes = [
         name: "reset-pass",
         component: () => import("@/views/User/index"),
     },
+    {
+        path: "/404",
+        name: "404",
+        component: () => import("@/views/User/404")
+    },
+    {
+        path: "*",
+        redirect: "/404"
+    },
 ]
 
 const router = new VueRouter({

src/views/User/entry-card.vue

@@ -18,7 +18,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .entry-card {
   display: inline-block;
   background: #FFFFFF;
@@ -32,6 +32,7 @@ export default {
     font-size: 22px;
     font-weight: 500;
     color: $theme-color1;
+    padding: 0;
     line-height: 24px;
     text-align: center;
     margin-bottom: 50px;

src/views/User/index.vue

@@ -49,7 +49,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .gs-entry {
   display: flex;
   min-height: 100%;
@@ -100,20 +100,21 @@ export default {
       }
     }
   }
-}
 
-::v-deep .el-tabs {
 
-  .el-tabs__item {
-    color: rgba(0, 0, 0, 0.4);
+  .el-tabs {
+
+    .el-tabs__item {
+      color: rgba(0, 0, 0, 0.4);
 
-    &.is-active, &:hover {
-      color: $theme-color1;
+      &.is-active, &:hover {
+        color: $theme-color1;
+      }
     }
-  }
 
-  .el-tabs__content {
-    padding-top: 19px;
+    .el-tabs__content {
+      padding-top: 19px;
+    }
   }
 }
 

src/views/User/login.vue

@@ -121,11 +121,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .login {
   width: 360px;
 
-  ::v-deep .el-form {
+  .el-form {
 
     .validate-append .el-input-group__append {
       padding: 0;

src/views/User/register.vue

@@ -176,13 +176,13 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .register {
   width: 520px;
   margin-right: 60px;
   margin-left: 40px;
 
-  ::v-deep .el-form {
+  .el-form {
     .el-input-group__append {
       border-color: transparent;
       border: none;

src/views/User/reset-pass.vue

@@ -158,11 +158,11 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .reset-pass {
   width: 360px;
 
-  ::v-deep .el-form {
+  .el-form {
 
     .el-input-group__append {
       border-color: transparent;