feat:about account

web/src/assets/css/common.styl

@@ -1,3 +1,17 @@
+:root{
+  --sm-txt:rgba(163, 174, 208, 1);
+  --text-secondary: #8a939d;
+  --el-color-primary: rgba(67, 24, 255, 1);
+  --el-component-size: 48px;
+  --el-border-radius-base: 8px;
+  --el-color-primary-light-5:rgb(107, 85, 255);
+  --el-color-primary-light-3:rgb(78, 51, 254);
+  --theme-btn-color:rgba(117, 81, 255, 1)
+  --common-text-color:#6e4ef9
+
+  --text-fff:#fff
+}
+
 .btn-go{
   background:  var(--btnColor);
   color: #fff;
@@ -6,4 +20,39 @@
   &:hover{
     color: #fff;
   }
+}
+.btn-normal{
+  background:  var(--theme-btn-color);
+  color: #fff;
+  border-radius: 5px;
+  padding: 5px 10px;
+  &:hover{
+    color: #fff;
+  }
+}
+.flex{
+  display: flex;
+  align-items: center;
+  }
+.flex-center{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.flex-between{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.theme-color-primary{
+  color: var(--el-color-primary);
+}
+.text-color-primary{
+  color:var(--text-color-primary)
+}
+.w100{
+  width: 100%;
+}
+.el-input__wrapper{
+  background: var( --card-bg)
 }

web/src/assets/css/index.styl

@@ -1,4 +1,5 @@
 
+
 .index-page {
   margin: 0
   overflow hidden
@@ -6,7 +7,11 @@
   display flex
   justify-content center
   align-items baseline
-  padding-top 150px
+  padding-top 158px
+  min-height: 75vh
+  background: var(--theme-bg) !important
+
+ 
 
   .color-bg {
     position absolute

web/src/assets/css/login.styl

@@ -1,117 +1,56 @@
-.bg {
-  position fixed
-  left 0
-  right 0
-  top 0
-  bottom 0
-  background-color #313237
-  background-image url("~@/assets/img/login-bg.jpg")
-  background-size cover
-  background-position center
-  background-repeat repeat-y
-  //filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
+
+.loginPage{
+  background: var(--card-bg) !important
+  background-color: var(---card-bg) !important
+
+.form-title{
+  color:var( --text-theme-color)
+}
 }
 
-.main {
-  .contain {
-    position fixed
-    left 50%
-    top 40%
-    width 90%
-    max-width 400px;
-    transform translate(-50%, -50%)
-    padding 20px 10px;
-    color #ffffff
-    border-radius 10px;
+.left{
+  width: 50%;
+ 
+  .login-box{
+    width: 410px;
+    margin: 0 auto;
+    min-height: calc(100vh - 48px);
+   
+  }
+ 
+  .wechatLog{
+    width: 410px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center
+    background: var( --sign-bg)
+    a{
+      color: var(--text-theme-color)
 
-    .logo {
-      text-align center
-
-      .el-image {
-        width 120px;
-        cursor pointer
-        border-radius 50%
-      }
     }
-
-    .header {
-      width 100%
-      margin-bottom 24px
-      font-size 24px
-      color $white_v1
-      letter-space 2px
-      text-align center
-      padding-top 10px
-    }
-
-    .content {
-      width 100%
-      height: auto
-      border-radius 3px
-
-      .block {
-        margin-bottom 16px
-
-        .el-input__inner {
-          border 1px solid $gray-v6 !important
-
-          .el-icon-user, .el-icon-lock {
-            font-size 20px
-          }
-        }
-      }
-
-      .btn-row {
-        padding-top 10px;
-
-        .login-btn {
-          width 100%
-          font-size 16px
-          letter-spacing 2px
-        }
-      }
-
-      .text-line {
-        justify-content center
-        padding-top 10px;
-        font-size 14px;
-      }
-
-      .opt {
-        padding 15px
-        .el-col {
-          text-align center
-        }
-      }
-
-      .divider {
-        border-top: 2px solid #c1c1c1;
-      }
-
-      .clogin {
-        padding 15px
-        display flex
-        justify-content center
-
-        .iconfont {
-          font-size 20px
-          background: #E9F1F6;
-          padding: 8px;
-          border-radius: 50%
-          cursor pointer
-        }
-        .iconfont.icon-wechat {
-          color #0bc15f
-        }
-      }
+    font-size: 14px;
+    margin-bottom: 26px
+    border-radius: 16px;
+    .icon-wechat{
+      color: #0bc15f
+      margin-right: 9px
+      font-size: 20px;
     }
   }
-
-  .footer {
-    color #ffffff;
-
-    .container {
-      padding 20px;
-    }
+ 
+  .text-color-primary{
+    cursor :pointer
+  }
+  
+
+  
+}
+.login-btn {
+  width :100%
+  height: 40px;
+  border-radius: 16px;
+}
+ .code-input{
+    width: 306px;
+    margin-right: 9px;
   }
-}

web/src/assets/css/theme-dark.styl

@@ -12,10 +12,19 @@
   body,
   #app,
   .wrapper {
-   background-color: rgb(13, 20, 53) !important;
+    background: rgb(13, 20, 53) 
+    background-color: rgb(13, 20, 53) 
     font-family: $font-regular;
   }
   --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
   --card-bg: rgba(17, 28, 68, 1);
+  --theme-bg:rgb(13, 20, 53);
+   --sign-bg: rgba(27, 37, 75, 1);
+   --text-theme-color: #fff;
+  --text-color-primary: #d1c7ff;
+  --el-text-color-regular: rgba(163, 174, 208, 1)
+  --el-border-color:rgb(79, 80, 85)
+  --el-text-color-primary: #fff;
+
 
 }

web/src/assets/css/theme-light.styl

@@ -13,13 +13,22 @@
   body,
   #app,
   .wrapper {
-      background: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
-    //  background:  linear-gradient(180deg, #fff, #fff4fa 40%, #fbd9fd 55%, #e2d5ff 70%);
+    // background: var(--theme-bg)
+    // background-color: var(--theme-bg)
+
+      // background: linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
+    
     font-family: $font-regular;
-  }
+  }//#6b61f6
 
   --btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
+  --code-btnColor: linear-gradient(88deg, #af61f0 1.44%, #5b62ce);
   --card-bg:#fff;
+  --theme-bg:linear-gradient(88deg, #fff3f3 1.44%, #e7e8ff);
+  --sign-bg: rgba(244, 247, 254, 1);
+   --text-theme-color: rgba(43, 54, 116, 1)
+  --text-color-primary: rgba(67, 24, 255, 1);
+
 
 }