diff --git a/web/src/style/basics.scss b/web/src/style/basics.scss
new file mode 100644
index 00000000..6b30b120
--- /dev/null
+++ b/web/src/style/basics.scss
@@ -0,0 +1,24 @@
+// basice
+$font-size: 14px;
+$icon-size:17px;
+$active-color:#1890ff;
+$bg-main:#f0f2f5;
+$border-color: #f4f4f4;
+
+// aside
+$color-aside:rgba(255, 255, 255,.9);
+$icon-arrow-size-aside:12px;
+$width-submenu-aside:55px;
+// header
+$height-header: 60px;
+// nav-scroll
+$height-nav-scroll:40px;
+$bg-nav-scroll:#191a23;
+$active-bg-tabs-item-nav-scroll:#409eff;
+$bg-tabs-item-nav-scroll:#ddd;
+// table
+$bg-color-table-thead:#fafafa;
+$border-color-table:#ededed;
+$height-table-cell:45px;
+$color-table-tbody:#595959;
+$color-table-thead:#262626;
diff --git a/web/src/style/login.scss b/web/src/style/login.scss
new file mode 100644
index 00000000..bae1f123
--- /dev/null
+++ b/web/src/style/login.scss
@@ -0,0 +1,134 @@
+.login-register-box {
+    height: 100vh;
+    .login-box {
+      width: 40vw;
+      position: absolute;
+      left: 50%;
+      margin-left: -22vw;
+      top: 5vh;
+      .logo {
+        height: 35vh;
+        width: 35vh;
+      }
+    }
+  }
+  
+  .link-icon {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    border-radius: 10px;
+  }
+  
+  .vPic {
+    width: 33%;
+    height: 38px;
+    float: right !important;
+    background: #ccc;
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+  
+  .logo_login {
+    width: 100px;
+  }
+  
+  #userLayout.user-layout-wrapper {
+    height: 100%;
+    position: relative;
+    &.mobile {
+      .container {
+        .main {
+          max-width: 368px;
+          width: 98%;
+        }
+      }
+    }
+  
+    .container {
+      position: relative;
+      overflow: auto;
+      width: 100%;
+      min-height: 100%;
+      background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
+      background-size: 100%;
+      padding: 110px 0 144px;
+      a {
+        text-decoration: none;
+      }
+  
+      .top {
+        text-align: center;
+        margin-top: -40px;
+        .header {
+          height: 44px;
+          line-height: 44px;
+          margin-bottom: 30px;
+          .badge {
+            position: absolute;
+            display: inline-block;
+            line-height: 1;
+            vertical-align: middle;
+            margin-left: -12px;
+            margin-top: -10px;
+            opacity: 0.8;
+          }
+  
+          .logo {
+            height: 44px;
+            vertical-align: top;
+            margin-right: 16px;
+            border-style: none;
+          }
+  
+          .title {
+            font-size: 33px;
+            color: rgba(0, 0, 0, 0.85);
+            font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
+            font-weight: 600;
+            position: relative;
+            top: 2px;
+          }
+        }
+        .desc {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.45);
+          margin-top: 12px;
+        }
+      }
+  
+      .main {
+        min-width: 260px;
+        width: 368px;
+        margin: 0 auto;
+      }
+  
+      .footer {
+        position: relative;
+        width: 100%;
+        padding: 0 20px;
+        margin: 40px 0 10px;
+        text-align: center;
+        .links {
+          margin-bottom: 8px;
+          font-size: 14px;
+          width: 330px;
+          display: inline-flex;
+          flex-direction: row;
+          justify-content: space-between;
+          padding-right: 40px;
+          a {
+            color: rgba(0, 0, 0, 0.45);
+            transition: all 0.3s;
+          }
+        }
+        .copyright {
+          color: rgba(0, 0, 0, 0.45);
+          font-size: 14px;
+          padding-right: 40px;
+        }
+      }
+    }
+  }
\ No newline at end of file
diff --git a/web/src/view/login/login.vue b/web/src/view/login/login.vue
index 42f395cc..3fa4be85 100644
--- a/web/src/view/login/login.vue
+++ b/web/src/view/login/login.vue
@@ -167,138 +167,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.login-register-box {
-  height: 100vh;
-  .login-box {
-    width: 40vw;
-    position: absolute;
-    left: 50%;
-    margin-left: -22vw;
-    top: 5vh;
-    .logo {
-      height: 35vh;
-      width: 35vh;
-    }
-  }
-}
+@import '@/style/login.scss';
 
-.link-icon {
-  width: 20px;
-  min-width: 20px;
-  height: 20px;
-  border-radius: 10px;
-}
-
-.vPic {
-  width: 33%;
-  height: 38px;
-  float: right !important;
-  background: #ccc;
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-
-.logo_login {
-  width: 100px;
-}
-
-#userLayout.user-layout-wrapper {
-  height: 100%;
-  position: relative;
-  &.mobile {
-    .container {
-      .main {
-        max-width: 368px;
-        width: 98%;
-      }
-    }
-  }
-
-  .container {
-    position: relative;
-    overflow: auto;
-    width: 100%;
-    min-height: 100%;
-    background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
-    background-size: 100%;
-    padding: 110px 0 144px;
-    a {
-      text-decoration: none;
-    }
-
-    .top {
-      text-align: center;
-      margin-top: -40px;
-      .header {
-        height: 44px;
-        line-height: 44px;
-        margin-bottom: 30px;
-        .badge {
-          position: absolute;
-          display: inline-block;
-          line-height: 1;
-          vertical-align: middle;
-          margin-left: -12px;
-          margin-top: -10px;
-          opacity: 0.8;
-        }
-
-        .logo {
-          height: 44px;
-          vertical-align: top;
-          margin-right: 16px;
-          border-style: none;
-        }
-
-        .title {
-          font-size: 33px;
-          color: rgba(0, 0, 0, 0.85);
-          font-family: Avenir, "Helvetica Neue", Arial, Helvetica, sans-serif;
-          font-weight: 600;
-          position: relative;
-          top: 2px;
-        }
-      }
-      .desc {
-        font-size: 14px;
-        color: rgba(0, 0, 0, 0.45);
-        margin-top: 12px;
-      }
-    }
-
-    .main {
-      min-width: 260px;
-      width: 368px;
-      margin: 0 auto;
-    }
-
-    .footer {
-      position: relative;
-      width: 100%;
-      padding: 0 20px;
-      margin: 40px 0 10px;
-      text-align: center;
-      .links {
-        margin-bottom: 8px;
-        font-size: 14px;
-        width: 330px;
-        display: inline-flex;
-        flex-direction: row;
-        justify-content: space-between;
-        padding-right: 40px;
-        a {
-          color: rgba(0, 0, 0, 0.45);
-          transition: all 0.3s;
-        }
-      }
-      .copyright {
-        color: rgba(0, 0, 0, 0.45);
-        font-size: 14px;
-        padding-right: 40px;
-      }
-    }
-  }
-}
 </style>