Browse Source

登录回填账号密码样式问题

shaogen1995 2 năm trước cách đây
mục cha
commit
1396cbf9f6
1 tập tin đã thay đổi với 38 bổ sung15 xóa
  1. 38 15
      src/pages/Login/index.module.scss

+ 38 - 15
src/pages/Login/index.module.scss

@@ -1,64 +1,87 @@
-.Login{
+.Login {
   width: 100%;
   height: 100%;
   background-image: url('../../assets/img/login/bg.jpg');
   background-size: cover;
   position: relative;
-  :global{
-    .main{
+
+  :global {
+    .main {
       padding-top: 20px;
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 100%;
       height: 380px;
-      background-color: rgba(255,255,255,.8);
+      background-color: rgba(255, 255, 255, .8);
       backdrop-filter: blur(4px);
       text-align: center;
-      &>h1{
+
+      &>h1 {
         font-size: 44px;
         color: var(--themeColor);
       }
-      &>p{
+
+      &>p {
         margin: 10px 0 40px;
         font-size: 18px;
       }
-      .inputBox{
+
+      .inputBox {
         width: 1000px;
         margin: 0 auto;
         display: flex;
         justify-content: space-between;
-        .ant-input-prefix{
+
+        .ant-input-prefix {
           margin-right: 10px;
+
           .anticon {
             width: 24px;
             height: 24px;
-            svg{
+
+            svg {
               width: 100%;
               height: 100%;
             }
           }
         }
-        .ant-input{
+
+        .ant-input {
           font-size: 18px;
           width: 45%;
           height: 60px;
           line-height: 60px;
+          background-clip: content-box;
         }
-        .ant-input-affix-wrapper{
-          padding:0 11px;
+
+        input:-webkit-autofill {
+          // color: #666 !important;
+          // -webkit-text-fill-color: #666 !important; //文字颜色
+          background-image: none;
+          -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; //填充阴影,可以用来遮住背景色
+          background-color: transparent;
+          transition: background-color 50000s ease-in-out 0s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
+
+        }
+
+        .ant-input-affix-wrapper {
+          padding: 0 11px;
           width: 45%;
           height: 60px;
-          .ant-input{
+
+          .ant-input {
             background-color: transparent;
             width: 100%;
             height: 60px;
           }
         }
       }
-      .loginBtn{
+
+      .loginBtn {
         margin-top: 50px;
-        .ant-btn{
+
+        .ant-btn {
           width: 400px;
           height: 60px;
         }