Skip to content

I
Iot_mobile
Commit 31f3612d authored by wuhao's avatar wuhao 🎯
Browse files
Options

logo update

parent 381d714f
Hide whitespace changes
Inline Side-by-side
Showing with 180 additions and 146 deletions
config/config.js
View file @ 31f3612d
...@@ -10,7 +10,7 @@ export default defineConfig({ ...@@ -10,7 +10,7 @@ export default defineConfig({
theme: { theme: {
algorithm: theme.darkAlgorithm, algorithm: theme.darkAlgorithm,
token: { token: {
colorPrimary: '#4ddaec', colorPrimary: '#3878e4',
}, },
}, },
}, },
......
public/logo.png
View replaced file @ 381d714f View file @ 31f3612d
public/logo.png

98.1 KB | W: | H:

public/logo.png

17.1 KB | W: | H:

public/logo.png
public/logo.png
public/logo.png
public/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/pages/login/index.jsx
View file @ 31f3612d
...@@ -13,7 +13,7 @@ import { ...@@ -13,7 +13,7 @@ import {
ProFormText, ProFormText,
ProConfigProvider, ProConfigProvider,
} from '@ant-design/pro-components'; } from '@ant-design/pro-components';
import { message, Space, Tabs } from 'antd'; import { message, Space, Button } from 'antd';
import { useState } from 'react'; import { useState } from 'react';
import './index.less'; import './index.less';
import { history } from '@umijs/max'; import { history } from '@umijs/max';
...@@ -33,6 +33,8 @@ const iconStyles = { ...@@ -33,6 +33,8 @@ const iconStyles = {
export default () => { export default () => {
const [loginType, setLoginType] = useState('account'); const [loginType, setLoginType] = useState('account');
const [login, setlogin] = useState(false);
return ( return (
<div className="bg"> <div className="bg">
<ul className="circles"> <ul className="circles">
...@@ -41,9 +43,158 @@ export default () => { ...@@ -41,9 +43,158 @@ export default () => {
))} ))}
</ul> </ul>
<div style={{ position: 'absolute', width: '100%', zIndex: 99999 }}> <div style={{ position: 'absolute', width: '100%', zIndex: 99999 }}>
<LoginForm {login ? (
logo="./logo.png" <LoginForm
subTitle={ 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 }}> <p style={{ fontSize: 17, marginBottom: 0 }}>
<b>江苏南高智能装备创新中心有限公司</b> <b>江苏南高智能装备创新中心有限公司</b>
...@@ -52,137 +203,11 @@ export default () => { ...@@ -52,137 +203,11 @@ export default () => {
Jiangsu Nangao Intelligent Equipment Innovation Center Co., Ltd. Jiangsu Nangao Intelligent Equipment Innovation Center Co., Ltd.
</p> </p>
</> </>
} <Button type="primary" style={{width:"278px",marginTop:36}} size='large' onClick={()=>{
onFinish={(values) => { setlogin(true)
let timestamp = new Date().getTime() + 'acb'; }}>登录</Button>
let newtimestamp = AES.encrypt( </div>
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> </div>
</div> </div>
); );
......
src/pages/login/index.less
View file @ 31f3612d
.ant-pro-form-login-main { .ant-pro-form-login-main {
min-width: 100px !important; min-width: 100px !important;
width: 100% !important; width: 100% !important;
max-width: 278px;
} }
.ant-pro-form-login-container { .ant-pro-form-login-container {
padding-top: 88px !important; padding-top: 6vh !important;
} }
.bg { .bg {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-image: linear-gradient( background: linear-gradient(to bottom, #142f4d, #657b90) !important;
145deg,
#1e1373 0%,
#2a1448 50%,
#1e1373 100%
);
background-size: 400% 400%;
animation: bgmove 20s linear 0s infinite alternate forwards;
.ant-pro-form-login-header { .ant-pro-form-login-header {
height: auto !important; height: auto !important;
...@@ -79,7 +73,7 @@ ...@@ -79,7 +73,7 @@
list-style: none; list-style: none;
width: 20px; width: 20px;
height: 20px; height: 20px;
background: rgb(255 255 255 / 2%); background: rgb(255 255 255 / 4%);
animation: animate 25s linear infinite; animation: animate 25s linear infinite;
bottom: -150px; bottom: -150px;
} }
...@@ -172,3 +166,18 @@ ...@@ -172,3 +166,18 @@
border-radius: 50%; 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
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment