From be7474ac7783b0f0a26f2a66fad8465afd35248c Mon Sep 17 00:00:00 2001 From: donghao Date: Tue, 14 May 2024 17:02:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=95=B4=E4=BD=93=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/pools/businessProjectData.ts | 9 +- mock/pools/modelData.ts | 76 ++++----- src/base.css | 76 ++++++++- src/base.less | 87 +++++++++- src/components/CategorizeUpdate/index.tsx | 8 +- src/global.css | 11 +- src/global.less | 11 +- src/locales/zh-CN/businessProject.ts | 7 +- src/locales/zh-CN/model.ts | 8 +- .../components/detailDeviceState.tsx | 2 +- .../components/detailServerState.tsx | 2 +- .../DeviceGroup/components/baseInfo.tsx | 2 +- .../components/modelDeployConfig.tsx | 2 +- src/pages/Model/ModelDetail/index.tsx | 158 ++++++++++-------- .../BusinessInfo/components/baseInfo.tsx | 29 +++- src/pages/User/Login/index.tsx | 17 +- src/pages/User/Login/login.css | 40 ++--- src/pages/User/Login/login.less | 72 +++++--- 18 files changed, 396 insertions(+), 221 deletions(-) diff --git a/mock/pools/businessProjectData.ts b/mock/pools/businessProjectData.ts index dd6edb9..3f3951d 100644 --- a/mock/pools/businessProjectData.ts +++ b/mock/pools/businessProjectData.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-04-19 17:10:21 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-04-24 17:03:58 + * @LastEditTime: 2024-05-14 09:46:12 * @FilePath: \general-ai-platform-web\mock\pools\businessProjectData.ts * @Description: 企业项目 */ @@ -29,6 +29,7 @@ export const mockGetBusinessProjectData = { deviceCount: 1, // 设备数量 create_time: '2024-01-22T10:59:37', update_time: '2024-04-01T17:53:40', + validity_period: '2012-01-01 ~ 2042-12-31', }, { id: '2', @@ -39,6 +40,7 @@ export const mockGetBusinessProjectData = { deviceCount: 3, create_time: '2024-01-22T10:59:37', update_time: '2024-04-01T17:53:54', + validity_period: '2022-01-01 ~ 2030-12-31', }, { id: '3', @@ -54,6 +56,7 @@ export const mockGetBusinessProjectData = { address: '雨花台区软件大道新华汇B4栋4楼', // 公司地址 contacts: '张三', // 联系人 contactWay: '17755551234', // 联系方式 + validity_period: '2016-01-01 ~ 2099-12-31', remark: '南京苏胜天信息科技有限公司成立于2016，年拥有专业计算机视觉和深度学习方面的技术团队，助力制造业工业检测实现智能化，实现企业降本增效。公司核心技术是机器视觉算法，致力于自动化成套视觉检测设备。 ', }, @@ -66,6 +69,7 @@ export const mockGetBusinessProjectData = { deviceCount: 1, // 设备数量 create_time: '2024-01-22T10:59:37', update_time: '2024-04-01T17:53:40', + validity_period: '2018-01-01 ~ 2099-12-31', }, { id: '5', @@ -76,6 +80,7 @@ export const mockGetBusinessProjectData = { deviceCount: 3, create_time: '2024-01-22T10:59:37', update_time: '2024-04-01T17:53:54', + validity_period: '2016-01-01 ~ 2049-12-31', }, { id: '6', @@ -86,6 +91,7 @@ export const mockGetBusinessProjectData = { deviceCount: 1, create_time: '2024-01-22T10:58:57', update_time: '2024-04-01T17:54:01', + validity_period: '2018-01-01 ~ 2039-12-31', }, { id: '7', @@ -96,6 +102,7 @@ export const mockGetBusinessProjectData = { deviceCount: 3, create_time: '2024-01-22T10:59:37', update_time: '2024-04-01T17:53:54', + validity_period: '2021-01-01 ~ 2035-12-31', }, ], }, diff --git a/mock/pools/modelData.ts b/mock/pools/modelData.ts index a1acbca..81a6d1c 100644 --- a/mock/pools/modelData.ts +++ b/mock/pools/modelData.ts @@ -1,6 +1,33 @@ import { generateRandomString } from '../utils/mockHash'; import { generateRandomDateTimeByYear } from '../utils/mockMoment'; +const generatrModelRuntimeLib = () => { + const currList: Record[] = []; + const count = 31; + const nameArr = [ + '玻璃表面缺陷检测', + '管材表面缺陷检测', + '锂电池底壳焊工位检测', + '气泡检测', + '明火烟雾识别', + ]; + for (let i = 0; i < count; i++) { + currList.push({ + id: i + '1', + createTime: generateRandomDateTimeByYear(2022), + updateTime: generateRandomDateTimeByYear(2023), + name: nameArr[i % 5], // 设备名称 + path: '192.168.10.60:5000/ubuntu:v1', + startCode: '', + remark: '', + }); + } + return { + count, + results: currList, + }; +}; + // 模型列表 export const mockGetModelListData = { data: { @@ -3150,54 +3177,7 @@ export const mockGetModelListData = { // 模型运行库列表 export const mockGetModelRuntimeLibListData = { data: { - count: 5, - results: [ - { - id: 1, - createTime: '2023-12-28T10:53:15.871746+08:00', - updateTime: '2023-12-28T16:17:04.871746+08:00', - name: '玻璃表面缺陷检测', - path: '192.168.10.60:5000/ubuntu:v1', - startCode: '', - remark: '', - }, - { - id: 2, - createTime: '2024-03-02T11:05:31.871746+08:00', - updateTime: '2024-03-02T12:37:08.871746+08:00', - name: '管材表面缺陷检测', - path: '192.168.10.60:5000/ubuntu:v1', - startCode: '', - remark: '', - }, - { - id: 3, - createTime: '2024-03-06T17:25:31.871746+08:00', - updateTime: '2024-04-01T09:13:44.871746+08:00', - name: '锂电池底壳焊工位检测', - path: '192.168.10.60:5000/ubuntu:v1', - startCode: '', - remark: '', - }, - { - id: 4, - createTime: '2024-03-14T13:07:31.871746+08:00', - updateTime: '2024-04-12T09:51:02.871746+08:00', - name: '气泡检测', - path: '192.168.10.60:5000/ubuntu:v1', - startCode: '', - remark: '', - }, - { - id: 5, - createTime: '2024-04-10T12:39:10.871746+08:00', - updateTime: '2024-04-14T14:03:55.871746+08:00', - name: '明火烟雾识别', - path: '192.168.10.60:5000/ubuntu:v1', - startCode: '', - remark: '', - }, - ], + ...generatrModelRuntimeLib(), }, }; diff --git a/src/base.css b/src/base.css index 6c7c4bd..0fd12ce 100644 --- a/src/base.css +++ b/src/base.css @@ -157,7 +157,22 @@ color: #cccccc; } .ant-form-item .anticon { - color: #cccccc !important; + color: #cccccc; +} +.ant-modal .ant-modal-title { + color: #333333; +} +.ant-modal .ant-modal-close { + color: #666666; +} +.ant-modal .ant-tag { + color: #333333; +} +.ant-modal .ant-tag-close-icon { + color: #666666; +} +.ant-modal .anticon-plus { + color: #154ddd; } /* 自定义组件 */ .gn_list_card_title { @@ -230,3 +245,62 @@ border-radius: 2px; } /* 灰屏效果 */ +/* 分类更新 */ +.gn_categorize_update .ant-form-item-label { + margin-top: 4px; +} +/* Descriptions 描述展示 */ +.gn_descriptions { + padding: 16px 16px 0; + background: #ffffff; + border: 1px solid rgba(21, 77, 221, 0.1); + border-radius: 4px; +} +.gn_descriptions .ant-descriptions-item-label { + color: #333333; + font-weight: bold; +} +.gn_descriptions .ant-descriptions-item-content { + color: #333333; +} +.gn_active_descriptions { + background: #ebf3ff; +} +.gn_active_descriptions .ant-descriptions-item-label { + color: #666666; + font-weight: normal; +} +.gn_active_descriptions .ant-descriptions-item-content { + color: #333333; +} +/* 表单组件 */ +.gn_form .ant-radio-button-wrapper { + margin-right: 12px; + border-radius: 4px; + border-inline-start-width: 1px; + color: #666666; + height: 28px; + line-height: 26px; +} +.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before { + background-color: transparent; +} +.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { + color: #ffffff; + background: transparent; + border-color: transparent; +} +.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before { + background-color: transparent; +} +.gn_form .ant-radio-button-wrapper:not(:first-child)::before { + background-color: transparent; +} +.gn_form .ant-radio-button-checked { + border-radius: 4px; + color: #ffffff; + background: #154ddd; +} +.gn_form .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { + color: #ffffff; +} diff --git a/src/base.less b/src/base.less index 60535d6..fef132c 100644 --- a/src/base.less +++ b/src/base.less @@ -179,7 +179,25 @@ color: @gray_color_1; } .anticon { - color: @gray_color_1 !important; + color: @gray_color_1; + } +} +// 通用弹窗 +.ant-modal { + .ant-modal-title { + color: @text_color_1; + } + .ant-modal-close { + color: @text_color_2; + } + .ant-tag { + color: @text_color_1; + } + .ant-tag-close-icon { + color: @text_color_2; + } + .anticon-plus { + color: @primary_color; } } @@ -276,3 +294,70 @@ filter: gray; filter: progid:dximagetransform.microsoft.basicimage(grayscale=1); } + +/* 分类更新 */ +.gn_categorize_update { + .ant-form-item-label { + margin-top: 4px; + } +} + +/* Descriptions 描述展示 */ +.gn_descriptions { + padding: 16px 16px 0; + background: #ffffff; + border: 1px solid rgba(21, 77, 221, 0.1); + border-radius: 4px; + .ant-descriptions-item-label { + color: @text_color_1; + font-weight: bold; + } + .ant-descriptions-item-content { + color: @text_color_1; + } +} + +.gn_active_descriptions { + background: #ebf3ff; + .ant-descriptions-item-label { + color: @text_color_2; + font-weight: normal; + } + .ant-descriptions-item-content { + color: @text_color_1; + } +} + +/* 表单组件 */ +.gn_form { + .ant-radio-button-wrapper { + height: 28px; + margin-right: 12px; + color: @text_color_2; + line-height: 26px; + border-radius: 4px; + border-inline-start-width: 1px; + } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before { + background-color: transparent; + } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover { + color: #ffffff; + background: transparent; + border-color: transparent; + } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before { + background-color: transparent; + } + .ant-radio-button-wrapper:not(:first-child)::before { + background-color: transparent; + } + .ant-radio-button-checked { + color: #ffffff; + background: @primary_color; + border-radius: 4px; + } + .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) { + color: #ffffff; + } +} diff --git a/src/components/CategorizeUpdate/index.tsx b/src/components/CategorizeUpdate/index.tsx index 4f52c72..f88934a 100644 --- a/src/components/CategorizeUpdate/index.tsx +++ b/src/components/CategorizeUpdate/index.tsx @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-04-07 14:02:00 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-04-30 14:57:45 + * @LastEditTime: 2024-05-14 15:31:03 * @FilePath: \general-ai-manage\src\components\CategorizeUpdate\index.tsx * @Description: 分类更新弹窗 * @交互说明 @@ -107,12 +107,12 @@ const CategorizeUpdate: React.FC = (props) => { background: '#FFFFFF', border: '1px solid #154DDD', color: '#154DDD', - borderStyle: 'dashed', + // borderStyle: 'dashed', }; return ( > - className="gn_form" + className="gn_form gn_categorize_update" width={proFormSmallModelWidth} {...props?.modalFormProps?.categorizeModelProps} open={props.visible} @@ -130,7 +130,7 @@ const CategorizeUpdate: React.FC = (props) => { }} > - + {tags.map((tag, index) => { if (editInputIndex === index) { return ( diff --git a/src/global.css b/src/global.css index cb0dc52..f297e1d 100644 --- a/src/global.css +++ b/src/global.css @@ -73,7 +73,7 @@ ol { padding: 16px 16px 0; } .gn_head_card { - padding: 0 20px; + padding: 0 24px; overflow: hidden; border-radius: 8px; } @@ -183,13 +183,6 @@ ol { background: url('../public/home/business_arrow.svg') no-repeat; background-size: cover; } -/* Descriptions */ -.gn_active_descriptions { - padding: 16px 16px 0; - background: #ffffff; - border: 1px solid rgba(21, 77, 221, 0.1); - border-radius: 8px; -} /* ProTable ProList */ .gn_pro_table .ant-table-wrapper .ant-table-thead > tr > th, .gn_pro_table .ant-table-wrapper .ant-table-thead > tr > td { @@ -209,8 +202,8 @@ ol { padding: 0; } .gn_pro_list .ant-pro-checkcard { - border: none !important; background: transparent; + border: none !important; } .gn_pro_list .ant-pro-checkcard-content { padding-inline: 0; diff --git a/src/global.less b/src/global.less index 80ad8e1..4965d4d 100644 --- a/src/global.less +++ b/src/global.less @@ -91,7 +91,7 @@ ol { } } .gn_head_card { - padding: 0 20px; + padding: 0 24px; overflow: hidden; border-radius: 8px; border-radius: 8px; @@ -226,15 +226,6 @@ ol { } } -/* Descriptions */ -// 描述展示 -.gn_active_descriptions { - padding: 16px 16px 0; - background: #ffffff; - border: 1px solid rgba(21, 77, 221, 0.1); - border-radius: 8px; -} - /* ProTable ProList */ .gn_pro_table { .ant-table-wrapper .ant-table-thead > tr > th, diff --git a/src/locales/zh-CN/businessProject.ts b/src/locales/zh-CN/businessProject.ts index 0bb2d5b..799fb2f 100644 --- a/src/locales/zh-CN/businessProject.ts +++ b/src/locales/zh-CN/businessProject.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-04-09 15:08:13 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-05-13 15:20:28 + * @LastEditTime: 2024-05-14 10:08:24 * @FilePath: \general-ai-manage\src\locales\zh-CN\businessProject.ts * @Description: 企业项目国际化中文 */ @@ -23,10 +23,11 @@ export const business_list: { [key: string]: string } = { 'business.list.table.form.rule.required.contacts': '请填写联系人', 'business.list.table.form.contactWay': '联系方式', 'business.list.table.form.rule.required.contactWay': '请填写联系方式', - 'business.list.table.form.remark': '简介', - 'business.list.table.form.rule.required.remark': '请填写简介', + 'business.list.table.form.remark': '公司简介', + 'business.list.table.form.rule.required.remark': '请填写公司简介', 'business.list.table.form.logo': '企业logo', 'business.list.table.form.rule.required.logo': '请上传企业logo', + 'business.list.table.form.validity_period': '服务有效期', 'business.list.table.action.edit': '资料编辑', 'business.list.table.action.destroy': '删除项目', diff --git a/src/locales/zh-CN/model.ts b/src/locales/zh-CN/model.ts index b4ceca5..ef4bb97 100644 --- a/src/locales/zh-CN/model.ts +++ b/src/locales/zh-CN/model.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-04-10 17:21:34 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-05-10 17:18:57 + * @LastEditTime: 2024-05-14 16:40:35 * @FilePath: \general-ai-manage\src\locales\zh-CN\model.ts * @Description: 模型管理 */ @@ -33,6 +33,8 @@ export const model_index: { [key: string]: string } = { 'model_index.create.form.rule.required.industry': '请选择行业分类', 'model_index.create.form.remark': '备注', 'model_index.create.form.rule.required.remark': '请填写备注', + + // 'model_detail.version.table.list.action.defaultVersion': '设为默认' }; // 模型运行库 export const model_runtimeLib: { [key: string]: string } = { @@ -75,6 +77,10 @@ export const model_version: { [key: string]: string } = { 'model_detail.version.form.required.name': '请填写版本号', 'model_detail.version.form.remark': '备注', 'model_detail.version.list.table.form.rule.required.name': '请填写版本号', + + 'model_detail.version.table.list.tag.defaultVersion': '默认版本', + 'model_detail.version.table.list.title': '版本列表', + 'model_detail.version.table.list.action.add': '新建版本信息', }; // 业务模型 diff --git a/src/pages/Business/BusinessState/components/detailDeviceState.tsx b/src/pages/Business/BusinessState/components/detailDeviceState.tsx index 36113d5..d9e108e 100644 --- a/src/pages/Business/BusinessState/components/detailDeviceState.tsx +++ b/src/pages/Business/BusinessState/components/detailDeviceState.tsx @@ -271,7 +271,7 @@ const DetailDeviceState: React.FC = ({ info, detailOpen, defaultMessage="设备参数" />

-
+
= ({ info, detailOpen, defaultMessage="服务器参数" />

-
+
= ({ info }) => { }, ]; return ( -
+
); diff --git a/src/pages/Business/DeviceGroup/components/modelDeployConfig.tsx b/src/pages/Business/DeviceGroup/components/modelDeployConfig.tsx index 4d4cc5b..19db610 100644 --- a/src/pages/Business/DeviceGroup/components/modelDeployConfig.tsx +++ b/src/pages/Business/DeviceGroup/components/modelDeployConfig.tsx @@ -128,7 +128,7 @@ const ModelDeployConfig: React.FC = ({ info, detailOpen, cancelText={} > -
+
diff --git a/src/pages/Model/ModelDetail/index.tsx b/src/pages/Model/ModelDetail/index.tsx index c252107..9e296d7 100644 --- a/src/pages/Model/ModelDetail/index.tsx +++ b/src/pages/Model/ModelDetail/index.tsx @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-04-08 10:36:06 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-05-13 10:44:32 + * @LastEditTime: 2024-05-14 17:02:41 * @FilePath: \general-ai-manage\src\pages\Model\ModelDetail\index.tsx * @Description: 模型详情（基础信息展示、模型版本列表） * @交互说明 @@ -11,13 +11,14 @@ * 3、编辑模型基本信息 */ import InnerPageBack from '@/components/Back/innerPageBack'; +import { CommButton } from '@/components/Button'; import TableActionCard from '@/components/TableActionCard'; import IsDelete from '@/components/TableActionCard/isDelete'; import { getModelDetail, getModelVersionList } from '@/services/testApi/model'; -import { PlusOutlined } from '@ant-design/icons'; + import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components'; -import { Access, FormattedMessage, history, useAccess, useParams } from '@umijs/max'; +import { FormattedMessage, useParams } from '@umijs/max'; import { Button } from 'antd'; import { useRef, useState } from 'react'; import { proTableCommonOptions, proTablePaginationOptions } from '../../../../config/defaultTable'; @@ -25,7 +26,7 @@ import CreateForm from './components/createForm'; const ModelDetail: React.FC = () => { const routeParams = useParams(); // 路由参数读取 - const access = useAccess(); + // const access = useAccess(); // const intl = useIntl(); const actionRef = useRef(); @@ -102,7 +103,10 @@ const ModelDetail: React.FC = () => { }} className="default_version_tag" > - 默认版本 + )} @@ -149,7 +153,9 @@ const ModelDetail: React.FC = () => { { key: 'setDefault', renderDom: record.isEnable ? ( - 设为默认 + + + ) : ( -
- , - ]} - search={false} - scroll={{ y: proTableCommonOptions.commscrollY, x: proTableCommonOptions.commscrollX }} - options={{ fullScreen: false, setting: false, density: false, reload: false }} - actionRef={actionRef} - rowKey="id" - onDataSourceChange={(data) => { - console.log(data, 'onDataSourceChange_data'); - // let CategoryFkIdIds: any = data.map((v) => { - // return v.categoryFkId; - // }); - // setCategoryFkIdIds(CategoryFkIdIds); - }} - pagination={{ - ...proTablePaginationOptions, - pageSize: currentPageSize, - onChange: (page, pageSize) => setCurrentPageSize(pageSize), - }} - columnsState={{ - persistenceKey: 'algorithm_model_list', - persistenceType: 'localStorage', - }} - request={async (params = {}) => { - const { current, ...rest } = params; - const reqParams = { - page: current, - ...rest, - }; - let resp = await getModelVersionList({ ...reqParams }); - console.log(resp, 'getModelVersionList_resp'); - return { - data: resp.data?.results, - success: resp.success, - total: resp.data.count, - current: current, - pageSize: currentPageSize, - }; - }} - columns={columns} - /> +
+ + + + } + extra={ + + } + onClick={() => { + handleCreateModal(); + }} + > + } + > + { + console.log(data, 'onDataSourceChange_data'); + // let CategoryFkIdIds: any = data.map((v) => { + // return v.categoryFkId; + // }); + // setCategoryFkIdIds(CategoryFkIdIds); + }} + pagination={{ + ...proTablePaginationOptions, + pageSize: currentPageSize, + onChange: (page, pageSize) => setCurrentPageSize(pageSize), + }} + columnsState={{ + persistenceKey: 'algorithm_model_list', + persistenceType: 'localStorage', + }} + request={async (params = {}) => { + const { current, ...rest } = params; + const reqParams = { + page: current, + ...rest, + }; + let resp = await getModelVersionList({ ...reqParams }); + console.log(resp, 'getModelVersionList_resp'); + return { + data: resp.data?.results, + success: resp.success, + total: resp.data.count, + current: current, + pageSize: currentPageSize, + }; + }} + columns={columns} + /> + +
= ({ info }) => { // 模型基本信息 const ModelDetailColumns = [ - { - title: , - dataIndex: 'address', - render: (_, record) => { - return record?.province + record?.city + record.address; - }, - }, { title: , dataIndex: 'industryName', @@ -39,13 +32,31 @@ const BaseInfo: React.FC = ({ info }) => { ), dataIndex: 'contactWay', }, + { + title: ( + + ), + dataIndex: 'validity_period', + }, + { + title: , + dataIndex: 'address', + render: (_, record) => { + return record?.province + record?.city + record.address; + }, + span: 4, + }, { title: , dataIndex: 'remark', + span: 4, }, ]; return ( -
+
); diff --git a/src/pages/User/Login/index.tsx b/src/pages/User/Login/index.tsx index 0d7b849..338cdb3 100644 --- a/src/pages/User/Login/index.tsx +++ b/src/pages/User/Login/index.tsx @@ -8,7 +8,7 @@ import { innerMenuRoutes } from '../../../../config/routes'; import { LockOutlined, UserOutlined } from '@ant-design/icons'; import { - LoginForm, + LoginFormPage, ProConfigProvider, ProFormCheckbox, ProFormText, @@ -37,7 +37,6 @@ import './login.less'; // }, // }; // }); - // return ( // <> // @@ -101,8 +100,8 @@ const Login: React.FC = () => { flexDirection: 'column', height: '100vh', overflow: 'auto', - backgroundImage: - "url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr')", + // backgroundImage: + // "url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr')", backgroundSize: '100% 100%', }; }); @@ -219,13 +218,13 @@ const Login: React.FC = () => { className="loginFrom" >
-
- {/*
*/} + {/*
-
+
*/}
- { 忘记密码
- +
diff --git a/src/pages/User/Login/login.css b/src/pages/User/Login/login.css index 284f731..050c8fa 100644 --- a/src/pages/User/Login/login.css +++ b/src/pages/User/Login/login.css @@ -4,38 +4,28 @@ justify-content: space-between; width: 100%; height: 100%; - background-image: url('../../../../public/login/login_bg@2x.png'); - background-repeat: no-repeat; - background-size: 100% 100%; -} -.loginFrom .loginLeft { - width: 56.67vw; - height: 100%; - padding-top: 72px; - padding-left: 120px; -} -.loginFrom .loginLeft .loginLogo { - width: 362px; - height: 70px; - background-image: url('../../../../public/login/login_logo@2x.png'); - background-repeat: no-repeat; - background-size: 100% 100%; -} -.loginFrom .loginLeft .loginBanner { - width: 35.36vw; - height: 39.5vw; - margin-top: 63px; - background-image: url('../../../../public/login/login_banner@2x.png'); + background: url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr'); background-repeat: no-repeat; background-size: 100% 100%; } .loginFrom .loginRight { - width: 43.33vw; - height: 100%; display: flex; align-items: center; justify-content: center; - background: white; + width: 100%; + height: 100%; +} +.loginFrom .loginRight .ant-pro-form-login-page-container { + position: fixed; + top: 50%; + left: 50%; + margin-left: -248px; + margin-top: -283px; + border-radius: 16px; + background-color: rgba(255, 255, 255, 0.6); +} +.loginFrom .loginRight .ant-pro-form-login-page-title { + padding-bottom: 32px; } .loginFrom .ant-pro-form-login-container .ant-pro-form-login-title { padding-bottom: 32px; diff --git a/src/pages/User/Login/login.less b/src/pages/User/Login/login.less index 251b175..157df20 100644 --- a/src/pages/User/Login/login.less +++ b/src/pages/User/Login/login.less @@ -5,43 +5,61 @@ justify-content: space-between; width: 100%; height: 100%; - background-image: url('../../../../public/login/login_bg@2x.png'); + background: url('https://gw.alipayobjects.com/v/huamei_gcee1x/afts/video/jXRBRK_VAwoAAAAAAAAAAAAAK4eUAQBr'); background-repeat: no-repeat; background-size: 100% 100%; } - .loginLeft { - // background-image: url('../../../../public/login/login_banner@2x.png'); - // background-repeat: no-repeat; - width: 56.67vw; - height: 100%; + // .loginLeft { + // // background-image: url('../../../../public/login/login_banner@2x.png'); + // // background-repeat: no-repeat; + // width: 56.67vw; + // height: 100%; - padding-top: 72px; - padding-left: 120px; - // background-size: 100% 100%; - .loginLogo { - width: 362px; - height: 70px; - background-image: url('../../../../public/login/login_logo@2x.png'); - background-repeat: no-repeat; - background-size: 100% 100%; - } - .loginBanner { - width: 35.36vw; - height: 39.5vw; - margin-top: 63px; - background-image: url('../../../../public/login/login_banner@2x.png'); - background-repeat: no-repeat; - background-size: 100% 100%; - } - } + // padding-top: 72px; + // padding-left: 120px; + // // background-size: 100% 100%; + // .loginLogo { + // width: 362px; + // height: 70px; + // // background-image: url('../../../../public/login/login_logo@2x.png'); + // background-repeat: no-repeat; + // background-size: 100% 100%; + // } + // .loginBanner { + // width: 35.36vw; + // height: 39.5vw; + + // margin-top: 63px; + // // background-image: url('../../../../public/login/login_banner@2x.png'); + // background-repeat: no-repeat; + // background-size: 100% 100%; + // } + // } .loginRight { display: flex; align-items: center; justify-content: center; - width: 43.33vw; + width: 100%; height: 100%; - background: white; + .ant-pro-form-login-page-container { + position: fixed; + top: 50%; + left: 50%; + margin-top: -283px; + margin-left: -248px; + background-color: rgba(255, 255, 255, 0.6); + border-radius: 16px; + } + .ant-pro-form-login-page-title { + padding-bottom: 32px; + } + // width: 31.2vw; + // border-radius: 8px; + // margin-right: 10vw; + // width: 43.33vw; + // height: 100%; + // background: red; } .ant-pro-form-login-container { // background: red !important;