diff --git a/config/config.js b/config/config.js index 052270b67dec3906159c0cdb73b28746e009d8ba..df248fb223ebe53fb01766978bf42b9212d14e23 100644 --- a/config/config.js +++ b/config/config.js @@ -10,7 +10,7 @@ export default defineConfig({ theme: { algorithm: theme.darkAlgorithm, token: { - colorPrimary: '#4ddaec', + colorPrimary: '#3878e4', }, }, }, diff --git a/public/._logo.png b/public/._logo.png deleted file mode 100644 index 06f6700cd75702033581f3b5ac4429815f1a4b9b..0000000000000000000000000000000000000000 Binary files a/public/._logo.png and /dev/null differ diff --git a/public/logo.png b/public/logo.png index d458906fb04cb102a74a561207e7607c48509379..ca235931d4c0500f5320b284c26eaed8bb120efe 100644 Binary files a/public/logo.png and b/public/logo.png differ diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/src/pages/login/index.jsx b/src/pages/login/index.jsx index 142b0e9f5dda6d3bb30537456a72c1cb3af97b4c..948a472583f63b5b9ac50b68dc9cf5a9036d9c09 100644 --- a/src/pages/login/index.jsx +++ b/src/pages/login/index.jsx @@ -13,7 +13,7 @@ import { ProFormText, ProConfigProvider, } from '@ant-design/pro-components'; -import { message, Space, Tabs } from 'antd'; +import { message, Space, Button } from 'antd'; import { useState } from 'react'; import './index.less'; import { history } from '@umijs/max'; @@ -33,6 +33,8 @@ const iconStyles = { export default () => { const [loginType, setLoginType] = useState('account'); + const [login, setlogin] = useState(false); + return ( <div className="bg"> <ul className="circles"> @@ -41,9 +43,158 @@ export default () => { ))} </ul> <div style={{ position: 'absolute', width: '100%', zIndex: 99999 }}> - <LoginForm - logo="./logo.png" - subTitle={ + {login ? ( + <LoginForm + logo="./logo.png" + subTitle={ + <> + <p style={{ fontSize: 17, marginBottom: 0 }}> + <b>江è‹å—高智能装备创新ä¸å¿ƒæœ‰é™å…¬å¸</b> + </p> + <p style={{ fontSize: 12, zoom: 0.8, margin: 0 }}> + Jiangsu Nangao Intelligent Equipment Innovation Center Co., + Ltd. + </p> + </> + } + onFinish={(values) => { + let timestamp = new Date().getTime() + 'acb'; + let newtimestamp = AES.encrypt( + timestamp, + Utf8.parse('NANGAODEAESKEY--'), + { + mode: ECB, + padding: Pkcs7, + }, + ).toString(); + let password = AES.encrypt( + values.password, + Utf8.parse(timestamp), + { + mode: ECB, + padding: Pkcs7, + }, + ).toString(); + const postdata = { + accountName: values.username, + password: password, + encryptKey: newtimestamp, + }; + doFetch({ + url: '/ngic-auth/sysAccount/login', + params: postdata, + }).then((res) => { + if (res.code === '0000') { + let token = res?.data?.token; + localStorage.setItem('TOKENES', token); + message.success('🎉 🎉 🎉 登录æˆåŠŸï¼'); + history.push('/'); + return; + } + }); + }} + > + {loginType === 'account' && ( + <> + <ProFormText + name="username" + fieldProps={{ + size: 'large', + prefix: <UserOutlined className={'prefixIcon'} />, + }} + placeholder={'用户å: admin or user'} + rules={[ + { + required: true, + message: '请输入用户å!', + }, + ]} + /> + <ProFormText.Password + name="password" + fieldProps={{ + size: 'large', + prefix: <LockOutlined className={'prefixIcon'} />, + }} + placeholder={'密ç : 123'} + rules={[ + { + required: true, + message: '请输入密ç ï¼', + }, + ]} + /> + <div + style={{ + marginBlockEnd: 24, + }} + > + <ProFormCheckbox noStyle name="autoLogin"> + 自动登录 + </ProFormCheckbox> + <a + style={{ + float: 'right', + }} + onClick={() => { + setLoginType('phone'); + }} + > + 忘记密ç + </a> + </div> + </> + )} + {loginType === 'phone' && ( + <> + <ArrowLeftOutlined + style={{ + fontSize: 20, + marginBottom: 12, + position: 'fixed', + left: 36, + top: 36, + zIndex: 99999, + }} + onClick={() => { + setLoginType('account'); + }} + /> + <ProFormText.Password + name="confirmpassword" + fieldProps={{ + size: 'large', + prefix: <LockOutlined className={'prefixIcon'} />, + }} + placeholder={'密ç '} + rules={[ + { + required: true, + message: '请输入密ç ï¼', + }, + ]} + /> + <ProFormText.Password + name="password" + fieldProps={{ + size: 'large', + prefix: <LockOutlined className={'prefixIcon'} />, + }} + placeholder={'确认密ç '} + rules={[ + { + required: true, + message: '请输入确认密ç ï¼', + }, + ]} + /> + </> + )} + </LoginForm> + ) : ( + <div className="nologin"> + <img src="./logo.png" alt="" /> + <h2>欢迎</h2> <> <p style={{ fontSize: 17, marginBottom: 0 }}> <b>江è‹å—高智能装备创新ä¸å¿ƒæœ‰é™å…¬å¸</b> @@ -52,137 +203,11 @@ export default () => { Jiangsu Nangao Intelligent Equipment Innovation Center Co., Ltd. </p> </> - } - onFinish={(values) => { - let timestamp = new Date().getTime() + 'acb'; - let newtimestamp = AES.encrypt( - timestamp, - Utf8.parse('NANGAODEAESKEY--'), - { - mode: ECB, - padding: Pkcs7, - }, - ).toString(); - let password = AES.encrypt(values.password, Utf8.parse(timestamp), { - mode: ECB, - padding: Pkcs7, - }).toString(); - const postdata = { - accountName: values.username, - password: password, - encryptKey: newtimestamp, - }; - doFetch({ - url: '/ngic-auth/sysAccount/login', - params: postdata, - }).then((res) => { - if (res.code === '0000') { - let token = res?.data?.token; - localStorage.setItem('TOKENES', token); - message.success('🎉 🎉 🎉 登录æˆåŠŸï¼'); - history.push('/'); - return; - } - }); - }} - > - {loginType === 'account' && ( - <> - <ProFormText - name="username" - fieldProps={{ - size: 'large', - prefix: <UserOutlined className={'prefixIcon'} />, - }} - placeholder={'用户å: admin or user'} - rules={[ - { - required: true, - message: '请输入用户å!', - }, - ]} - /> - <ProFormText.Password - name="password" - fieldProps={{ - size: 'large', - prefix: <LockOutlined className={'prefixIcon'} />, - }} - placeholder={'密ç : 123'} - rules={[ - { - required: true, - message: '请输入密ç ï¼', - }, - ]} - /> - <div - style={{ - marginBlockEnd: 24, - }} - > - <ProFormCheckbox noStyle name="autoLogin"> - 自动登录 - </ProFormCheckbox> - <a - style={{ - float: 'right', - }} - onClick={() => { - setLoginType('phone'); - }} - > - 忘记密ç - </a> - </div> - </> - )} - {loginType === 'phone' && ( - <> - <ArrowLeftOutlined - style={{ - fontSize: 20, - marginBottom: 12, - position: 'fixed', - left: 36, - top: 36, - zIndex: 99999, - }} - onClick={() => { - setLoginType('account'); - }} - /> - <ProFormText.Password - name="confirmpassword" - fieldProps={{ - size: 'large', - prefix: <LockOutlined className={'prefixIcon'} />, - }} - placeholder={'密ç '} - rules={[ - { - required: true, - message: '请输入密ç ï¼', - }, - ]} - /> - <ProFormText.Password - name="password" - fieldProps={{ - size: 'large', - prefix: <LockOutlined className={'prefixIcon'} />, - }} - placeholder={'确认密ç '} - rules={[ - { - required: true, - message: '请输入确认密ç ï¼', - }, - ]} - /> - </> - )} - </LoginForm> + <Button type="primary" style={{width:"278px",marginTop:36}} size='large' onClick={()=>{ + setlogin(true) + }}>登录</Button> + </div> + )} </div> </div> ); diff --git a/src/pages/login/index.less b/src/pages/login/index.less index 4254ce56033b05dde03c55ed9c5720a47dc7a6d7..9c699421e69c1cabd0cc4caefb3e71c4dcc624ac 100644 --- a/src/pages/login/index.less +++ b/src/pages/login/index.less @@ -1,24 +1,18 @@ .ant-pro-form-login-main { min-width: 100px !important; width: 100% !important; + max-width: 278px; } .ant-pro-form-login-container { - padding-top: 88px !important; + padding-top: 6vh !important; } .bg { height: 100%; overflow: hidden; position: relative; - background-image: linear-gradient( - 145deg, - #1e1373 0%, - #2a1448 50%, - #1e1373 100% - ); - background-size: 400% 400%; - animation: bgmove 20s linear 0s infinite alternate forwards; + background: linear-gradient(to bottom, #142f4d, #657b90) !important; .ant-pro-form-login-header { height: auto !important; @@ -79,7 +73,7 @@ list-style: none; width: 20px; height: 20px; - background: rgb(255 255 255 / 2%); + background: rgb(255 255 255 / 4%); animation: animate 25s linear infinite; bottom: -150px; } @@ -172,3 +166,18 @@ border-radius: 50%; } } +.nologin { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 60vh; + > img { + width: 116px; + height: 116px; + object-fit: cover; + } + h2{ + color: #fff + } +}