style: 能力中心登录页面样式优化

src/layouts/styles/UserLayouts.less

@@ -3,13 +3,18 @@
 // global
 .@{prefix}-user-layout {
   width: 100%;
+  height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .@{prefix}-user-bg {
   width: 100%;
-  min-height: calc(100vh - 64px);
+  flex: 1;
   background: #F7F8FA;
+  display: flex;
+  flex-direction: column;
 }
 
 .@{prefix}-logo-wrap {
@@ -56,4 +61,4 @@
     bottom: 48px;
     left: 0;
   }
-}
\ No newline at end of file
+}

src/locales/en-US/common.ts

@@ -112,7 +112,7 @@
   'common.zhengzaiqiehuanjuese': 'Switching roles...',
   'common.zhaohuimima': 'Retrieve password',
   'common.huanyingzhuce': 'Welcome to register',
-  'common.huanyingdenglu': 'Welcome to login',
+  'common.huanyingdenglu': 'Login',
   'common.bitian': 'This field is required',
   'common.ruku': 'Warehousing',
   'common.caigourukudan': 'Purchase receipt',

src/locales/zh-CN/common.ts

@@ -113,7 +113,7 @@ export default {
   'common.zhengzaiqiehuanjuese': '正在切换角色...',
   'common.zhaohuimima': '找回密码',
   'common.huanyingzhuce': '欢迎注册',
-  'common.huanyingdenglu': '欢迎登录',
+  'common.huanyingdenglu': '登录',
   'common.bitian': '该字段是必填字段',
   'common.ruku': '入库',
   'common.caigourukudan': '采购入库单',

src/pages/user/components/LoginWrap.tsx

@@ -12,6 +12,7 @@ import { encryptedByAES, Base64 } from '@/utils/cryptoAes';
 import { setUserCookie } from '@/utils/siteCookie';
 import { omit } from '@/utils';
 import defaultHomePath from '@/utils/defaultHomePath';
+import styles from './index.less'
 
 const intl = getIntl();
 const LoginWrap: React.FC = () => {
@@ -80,7 +81,7 @@ const LoginWrap: React.FC = () => {
                 ]
               }
             >
-              <Input prefix={<UserOutlined />} placeholder={intl.formatMessage({ id: 'user.yonghumingshoujihao' })} size='large' />
+              <Input className={styles.loginInput} prefix={<UserOutlined />} placeholder={intl.formatMessage({ id: 'user.yonghumingshoujihao' })} size='large' />
             </Form.Item>
             <Form.Item
               name='password'
@@ -93,7 +94,7 @@ const LoginWrap: React.FC = () => {
                 ]
               }
             >
-              <Input.Password prefix={<LockOutlined />} placeholder={intl.formatMessage({ id: 'user.qingshurumima' })} size='large' />
+              <Input.Password className={styles.loginInput} prefix={<LockOutlined />} placeholder={intl.formatMessage({ id: 'user.qingshurumima' })} size='large' />
             </Form.Item>
             {validButton && (<Form.Item
               className={'loginVerBtn'}

src/pages/user/components/index.less

-.passwordInputTip {
-  color: #909399;
-  padding: 8px 6px;
-  // width: 320px;
-
-  .tipItem {
-    margin-bottom: 4px;
-
-    span {
-      font-size: 14px;
-    }
-
-    .tiptext {
-      padding-left: 8px;
-      font-size: 12px;
-    }
-  }
-}
-
-.customInput {
-  position: relative;
-  :global {
-    .ant-form-item-explain {
-      position: absolute;
-      top: 40px;
-    }
-  }
-}
+.passwordInputTip {
+  color: #909399;
+  padding: 8px 6px;
+  // width: 320px;
+
+  .tipItem {
+    margin-bottom: 4px;
+
+    span {
+      font-size: 14px;
+    }
+
+    .tiptext {
+      padding-left: 8px;
+      font-size: 12px;
+    }
+  }
+}
+
+.customInput {
+  position: relative;
+  :global {
+    .ant-form-item-explain {
+      position: absolute;
+      top: 40px;
+    }
+  }
+}
+
+
+.loginInput {
+  border: none;
+  outline: none;
+  box-shadow: none;
+  color: #C8CACD;
+  border-radius: 4px;
+
+  &:hover, &:active {
+    box-shadow: none;
+    border: none;
+  }
+}

src/pages/user/index.less

@@ -3,18 +3,20 @@
 #root {
 
   .loginItem {
-    flex: 1;
-    width: 0;
+    height: 560px;
+    width: 512px;
   }
 
   .loginCtl {
     position: relative;
-    background: @white;
+    // background: @white;
   }
 
   .loginWrap {
-    padding: 141px 0 102px;
-    min-height: 560px;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    align-items: center;
   }
 
   .readyLogin {
@@ -27,6 +29,8 @@
     background: @white;
     padding: 64px 56px 0;
     color: #909399;
+    height: 560px;
+    border-radius: 8px;
 
     &>h2 {
       font-size: 32px;
@@ -35,6 +39,13 @@
       font-weight: 400;
     }
 
+    .link {
+      color: #91959B!important;
+      &:hover {
+        color: #00A98F!important;
+      }
+    }
+
     .clickUsernameLogin {
       .ab-position(right, top, 8, 8);
       font-size: 12px;
@@ -44,14 +55,29 @@
     .clickScanLogin {
       // .center-text();
       .ab-position(right, top, 8, 8);
-      width: 32px;
-      height: 32px;
-      background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
-      background-size: cover;
+      cursor: pointer;
+      width: 40px;
+      height: 40px;
+      background-color: #F5F6F7;
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+      justify-content: center;
 
       &:hover {
-        background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
+        opacity: .8;
+      }
+
+      &>img {
+        width: 24px;
+        height: 24px;
       }
+      // background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
+      // background-size: cover;
+
+      // &:hover {
+      //   background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
+      // }
     }
 
     .scanTips {
@@ -73,6 +99,8 @@
     .adBox {
       color: @white;
       .make-center(text);
+      border-radius: 8px;
+      overflow: hidden;
 
       & h2 {
         margin-top: 20px;

src/pages/user/index.tsx

@@ -16,6 +16,8 @@ import wechat from '../../../mockStatic/Wechat.png'
 import qq from '../../../mockStatic/QQ.png'
 import alipay from '../../../mockStatic/Alipay.png'
 import LoginWrap from './components/LoginWrap'
+import qrCode from '@/assets/imgs/QR_Code.png'
+
 const intl = getIntl();
 const User: React.FC = () => {
   const [isScanQrCode, setIsScanQrCode] = useState(false)
@@ -65,17 +67,21 @@ const User: React.FC = () => {
       <Helmet>
         <title>{intl.formatMessage({id: 'user.yonghudenglu'})}</title>
       </Helmet>
-      <Row className={cx('loginWrap', globalStyles.lingxiBusinessContent1024)}>
-        <Col className={cx('loginItem', 'loginDesc')}>
-          <div className={'adBox'}>
-            <Carousel autoplay>
-              {
-                sceneList && sceneList.map(item => <ImageBox key={item.id} direction={"column"} width={512} height={550} imgUrl={item.imageUrl} />)
-              }
-            </Carousel>
-          </div>
-        </Col>
-        <Col className={cx('loginItem', 'loginCtl')}>
+      <div className={cx('loginWrap', globalStyles.lingxiBusinessContent1024)}>
+        {
+          (sceneList && sceneList.length > 0) && (
+            <div className={cx('loginItem', 'loginDesc')}>
+              <div className={'adBox'}>
+                <Carousel autoplay>
+                  {
+                    sceneList && sceneList.map(item => <ImageBox key={item.id} direction={"column"} width={512} height={560} imgUrl={item.imageUrl} />)
+                  }
+                </Carousel>
+              </div>
+            </div>
+          )
+        }
+        <div className={cx('loginItem', 'loginCtl')}>
           <div className={'loginMain'}>
             {isScanQrCode ? (
               <>
@@ -88,13 +94,15 @@ const User: React.FC = () => {
               </>
             ) : (
                 <>
-                  <a onClick={() => handleGuideLogin(true)} className={'clickScanLogin'} />
+                  <div className='clickScanLogin' onClick={() => handleGuideLogin(true)} >
+                    <img src={qrCode} />
+                  </div>
                   <h2>{intl.formatMessage({id: 'user.huanyingnin'})}</h2>
                   <LoginWrap />
                   <Row justify='end' style={{ marginTop: 16 }}>
                     <Space size={32}>
-                      <TextLink><Link to={getRegisterUrl()} style={{ color: '#909399' }}>{intl.formatMessage({id: 'user.mianfeizhuce'})}</Link></TextLink>
-                      <TextLink><a onClick={forgetPassword} style={{ color: '#909399' }}>{intl.formatMessage({id: 'user.wangjimima'})}</a></TextLink>
+                      <TextLink><Link to={getRegisterUrl()} className='link'>{intl.formatMessage({id: 'user.mianfeizhuce'})}</Link></TextLink>
+                      <TextLink><a onClick={forgetPassword} className='link'>{intl.formatMessage({id: 'user.wangjimima'})}</a></TextLink>
                     </Space>
                   </Row>
                 </>
@@ -108,8 +116,8 @@ const User: React.FC = () => {
               <a title="支付宝登录"><img src={alipay} alt="支付宝登录" /></a>
             </Col>
           </Row> */}
-        </Col>
-      </Row>
+        </div>
+      </div>
     </Fragment>
   )
 }