修改登录页

src/assets/styles/base.less

@@ -14,7 +14,7 @@ html {
 :root {
   // 文字颜色
   --themeColor: #002c15;
-  // 登录页文字颜色
+  // 登录页颜色
   --loginTxt: #fddb77;
   // 一个模块一个模块的背景色
   --boxBcaColor: #f8f8f8;

src/pages/Login/index.module.scss

@@ -18,7 +18,7 @@
     .mainRight {
       padding-bottom: 45px;
       position: absolute;
-      right: 4.5%;
+      right: 6%;
       top: 28%;
       border-radius: 6px;
       width: 400px;
@@ -26,8 +26,9 @@
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      background-color: #3a110a;
-      color: var(--loginTxt);
+      color: #fff;
+      background-color: rgba(255, 255, 255, 0.8);
+      backdrop-filter: blur(6px);
       border-radius: 10px;
       overflow: hidden;
 
@@ -38,7 +39,7 @@
         line-height: 75px;
         font-size: 22px;
         letter-spacing: 2px;
-        background-color: #002c15;
+        background-color: #24664b;
       }
 
       .inputBox {
@@ -67,10 +68,12 @@
         .inputBoxRow {
           width: 300px;
           margin: 30px auto;
-
-          .ant-input-suffix .ant-input-password-icon {
-            color: var(--loginTxt);
-            font-size: 22px;
+          position: relative;
+          .logIcon {
+            position: absolute;
+            top: 50%;
+            left: 3px;
+            transform: translateY(-50%);
           }
         }
 
@@ -85,20 +88,10 @@
             right: 10px;
             transform: translateY(-50%);
           }
-        }
-
-        .ant-input-prefix {
-          margin-right: 10px;
 
-          .anticon {
-            padding-right: 10px;
-            width: 36px;
-            height: 36px;
-
-            svg {
-              width: 100%;
-              height: 100%;
-            }
+          .ant-input {
+            background-color: transparent !important;
+            padding-left: 40px !important;
           }
         }
 
@@ -112,32 +105,34 @@
 
         input:-webkit-autofill {
           font-size: 18px !important;
-          -webkit-text-fill-color: var(--loginTxt) !important;
+          -webkit-text-fill-color: #24664b !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,
         .ant-input-affix-wrapper {
           background-color: transparent;
-          padding: 0 11px;
+          padding: 0 20px;
           width: 100%;
           height: 60px;
           border: none;
-          border-bottom: 1px solid var(--loginTxt);
+          border-bottom: 1px solid #24664b;
           border-radius: 0px;
-          color: var(--loginTxt);
+          color: #24664b;
 
           .ant-input {
             background-color: transparent;
 
             width: 100%;
             height: 60px;
-            color: var(--loginTxt);
+            color: #24664b;
           }
         }
 
+        .ant-input,
         .ant-input-affix-wrapper-focused {
           box-shadow: none;
         }
@@ -151,8 +146,8 @@
           display: flex;
           justify-content: center;
           align-items: center;
-          background-color: #1a0704;
-          color: var(--loginTxt);
+          background-color: #24664b;
+          color: #fff;
           transition: 'opacity' 0.3;
           & > img {
             display: block;

src/pages/Login/index.tsx

@@ -1,7 +1,6 @@
 import styles from './index.module.scss'
 
 import { Input } from 'antd'
-import { UserOutlined, LockOutlined, NumberOutlined } from '@ant-design/icons'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Base64 } from 'js-base64'
 import encodeStr from '@/utils/pass'
@@ -84,44 +83,41 @@ export default function Login() {
 
   return (
     <div className={styles.Login}>
-      {/* logg */}
-      <div className='LogoImg'>
-        <img src={require('@/assets/img/logo2.png')} alt='' />
-      </div>
-
       <div className='mainRight'>
         <h3>青岛啤酒博物馆藏品管理系统</h3>
 
         {/* 账号密码输入框 */}
         <div className='inputBox'>
-          <div className='inputBoxRow'>
+          <div className='inputBoxRow inputBoxRow2'>
+            <img className='logIcon' src={require('@/assets/img/loginInco1.png')} alt='' />
             <Input
               onKeyUp={e => keyUpEntFu(e)}
               value={userName}
               onChange={e => setUserName(e.target.value.trim())}
-              prefix={<UserOutlined rev={undefined} />}
               placeholder='请输入账号'
               maxLength={15}
             />
           </div>
           <div className='inputBoxRow'>
+            <img className='logIcon' src={require('@/assets/img/loginInco2.png')} alt='' />
+
             <Input.Password
               onKeyUp={e => keyUpEntFu(e)}
               value={passWord}
               onChange={e => setPassWord(e.target.value.trim())}
-              prefix={<LockOutlined rev={undefined} />}
               placeholder='请输入密码'
               maxLength={20}
             />
           </div>
           <div className='inputBoxRow inputBoxRow2'>
+            <img className='logIcon' src={require('@/assets/img/loginInco3.png')} alt='' />
+
             <Input
               onKeyUp={e => keyUpEntFu(e)}
               value={code}
               onChange={e => setCode(e.target.value.trim())}
-              prefix={<NumberOutlined rev={undefined} />}
               placeholder='请输入验证码'
-              maxLength={5}
+              maxLength={4}
             />
             {codeImg ? (
               <img onClick={LoginGetCodeFu} className='loginCode' src={codeImg} alt='' />