Browse Source

在登录页面添加模拟品牌图像

dengdx 2 months ago
parent
commit
fc2150226d
2 changed files with 18 additions and 8 deletions
  1. BIN
      src/assets/imgs/login-brand.jpeg
  2. 18 8
      src/pages/security/Login.tsx

BIN
src/assets/imgs/login-brand.jpeg


+ 18 - 8
src/pages/security/Login.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import React from 'react';
-import { Row, Col, Form, Input, Button, Card, message } from 'antd';
+import { Row, Col, Form, Input, Button, Card, message, Image } from 'antd';
+import loginBrand from 'src/assets/imgs/login-brand.jpeg';
 import { useDispatch } from 'react-redux';
 import { useDispatch } from 'react-redux';
 import { login as loginApi } from '../../API/security/userActions';
 import { login as loginApi } from '../../API/security/userActions';
 import { setUserInfo, type UserInfoState } from '../../states/user_info'; // 同时导入 setUserInfo 和类型 UserInfoState
 import { setUserInfo, type UserInfoState } from '../../states/user_info'; // 同时导入 setUserInfo 和类型 UserInfoState
@@ -53,9 +54,9 @@ const Login: React.FC = () => {
       <Col
       <Col
         xs={24}
         xs={24}
         sm={24}
         sm={24}
-        md={20}
-        lg={18}
-        xl={18}
+        md={14}
+        lg={12}
+        xl={12}
         className="flex items-center justify-center h-full"
         className="flex items-center justify-center h-full"
       >
       >
         <Card className="max-w-md shadow-lg w-[480px] max-auto">
         <Card className="max-w-md shadow-lg w-[480px] max-auto">
@@ -92,11 +93,20 @@ const Login: React.FC = () => {
           </Form>
           </Form>
         </Card>
         </Card>
       </Col>
       </Col>
-      <Col xs={0} sm={0} md={4} lg={6} xl={6} className="h-full">
+      <Col
+        xs={0}
+        sm={0}
+        md={10}
+        lg={12}
+        xl={12}
+        className="h-full flex items-center justify-center"
+      >
         {/* 右侧区域可用于展示插画或品牌信息,当前留空 */}
         {/* 右侧区域可用于展示插画或品牌信息,当前留空 */}
-        <div className="h-full flex items-center justify-center">
-          <h2 className="text-gray-500">欢迎使用</h2>
-        </div>
+        <Image
+          src={loginBrand}
+          alt="Brand Logo"
+          className="max-w-full h-auto"
+        />
       </Col>
       </Col>
     </Row>
     </Row>
   );
   );