Commit fcdf862c authored by 周宏民's avatar 周宏民

fix: 确山登录页修改

parent d06e4b62
......@@ -8,12 +8,13 @@ import { actionCreators } from '@/containers/App/store';
import QRCode from 'qrcode.react';
import classnames from 'classnames';
import moment from 'moment';
import QueueAnim from 'rc-queue-anim';
import defaultSetting from '../../../../../../../config/defaultSetting';
import LoginAction from '../../../login';
import styles from './index.less';
import Account from '../../../js/useAccount';
import { defaultApp } from '../../../../../../micro';
import logoPng from './images/12.png';
import logoPng from './images/qeushan_12.png';
import qrcodePng from './images/10.png';
const PopOvercontent = () => {
......@@ -101,50 +102,49 @@ const Login = forwardRef((props, _ref) => {
};
/* eslint-disable */
const handleWeek =() => {
const handleWeek = () => {
const weekOfDay = Number(moment().format('E'));
let weekDayName = ''
switch(weekOfDay){
let weekDayName = '';
switch (weekOfDay) {
case 1:
weekDayName = '周一'
break
weekDayName = '周一';
break;
case 2:
weekDayName = '周二'
break
weekDayName = '周二';
break;
case 3:
weekDayName = '周三'
break
weekDayName = '周三';
break;
case 4:
weekDayName = '周四'
break
weekDayName = '周四';
break;
case 5:
weekDayName = '周五'
break
weekDayName = '周五';
break;
case 6:
weekDayName = '周六'
break
weekDayName = '周六';
break;
case 0:
weekDayName = '周日'
break
weekDayName = '周日';
break;
default:
weekDayName = ''
}
return weekDayName
weekDayName = '';
}
return weekDayName;
};
useEffect(()=>{
useEffect(() => {
const timer = setInterval(() => {
setDateObj({
curTime: moment().format('HH:mm:ss'),
week: handleWeek(),
date: moment().format('YYYY/MM/DD')
date: moment().format('YYYY/MM/DD'),
});
}, 1000);
return () => {
clearInterval(timer);
};
}, [])
}, []);
return (
<HelmetProvider>
......@@ -152,20 +152,23 @@ const Login = forwardRef((props, _ref) => {
<title>{props.global.title || defaultSetting.title}</title>
<meta name="description" content={props.global.title || defaultSetting.title} />
</Helmet>
<div className={classnames(styles.queshanlogin, "queshan")}>
<div className={styles['inner-wrapper']}>
<div className={classnames(styles.queshanlogin, 'queshan')}>
<QueueAnim type="scale" duration={1000}>
<div className={styles['inner-wrapper']} key={'innerwrapper'}>
<div className={styles['inner-center']}>
<div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
<div className={classnames(styles['inner-bg'], styles['login-part'], 'queshanLogin')} ref={loginFormRef}>
{renderPlatform()}
</div>
</div>
</div>
</QueueAnim>
<div className={styles['login-header']}>
<QueueAnim type="left" key="logintitle">
<div className={styles['left-title']}>
<img src={logoPng} alt='logo' className={styles['logo-png']}/>
{/* <div className={styles['cn-title']}>南宁市二次供水管理平台</div> */}
<img src={logoPng} alt="logo" className={styles['logo-png']} />
</div>
</QueueAnim>
<QueueAnim type="right" key="logintime">
<div className={styles['right-timebox']}>
<div className={styles['curr-time']}>{dateObj.curTime}</div>
<div className={styles['curr-week-date']}>
......@@ -173,12 +176,13 @@ const Login = forwardRef((props, _ref) => {
<div className={styles['curr-date']}>{dateObj.date}</div>
</div>
</div>
</QueueAnim>
</div>
<div className={styles['copyright']}>
<div className={styles['copyrightName']}>Copyright © 2023 熊猫智慧水务 All Rights Reserved.</div>
<div className={styles['line-tree']}></div>
<div className={styles['line-tree']} />
<Popover content={PopOvercontent} title="扫码下载APP" trigger="click" overlayClassName={'popover-style'}>
<img src={qrcodePng} alt="APP" className={styles['qrcode-box']}/>
<img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
</Popover>
</div>
<Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
......
.queshanlogin {
width: 100%;
height: 100%;
background: url('./images/5.png') no-repeat;
background: url('./images/queshan_bg.png') no-repeat center center;
background-size: 100% 100%;
background-clip: border-box;
position: relative;
......@@ -36,8 +35,8 @@
// margin-bottom: 100px;
}
.title-image{
background: url('./images/3.png') no-repeat;
.title-image {
background: url('./images/queshan_3.png') no-repeat;
width: 466px;
height: 42px;
background-size: 100% 100%;
......@@ -63,14 +62,14 @@
position: relative;
width: 543px;
height: 615px;
background: rgba(255,255,255, 1);
background: rgba(255, 255, 255, 1);
// border: 1px solid #FFFFFF;
// box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
border-radius: 10px;
background: url(./images/6.png) no-repeat;
background: url(./images/queshan_6.png) no-repeat;
}
.welcome-title{
.welcome-title {
width: 100%;
height: 100px;
background: linear-gradient(0deg, rgba(9, 128, 238, 1) 0%, rgba(0, 182, 251, 1) 100%);
......@@ -82,7 +81,7 @@
margin-bottom: 40px;
}
.welcome-bg{
.welcome-bg {
background: url('./images/4.png') no-repeat;
width: 358px;
height: 35px;
......@@ -117,7 +116,7 @@
opacity: 0.75;
}
.login-header{
.login-header {
width: 100%;
position: absolute;
top: 0;
......@@ -127,26 +126,31 @@
justify-content: space-between;
align-items: center;
box-shadow: 0px 1px 3px 0px rgba(0, 73, 188, 0.24);
.left-title{
.left-title {
display: flex;
justify-content: center;
align-items: center;
.cn-title{
.cn-title {
font-size: 28px;
font-weight: 400;
color: #FFFFFF;
}
.logo-png{
.logo-png {
width: 372px;
margin-right: 20px;
}
}
.right-timebox{
.right-timebox {
display: flex;
justify-content: center;
align-items: center;
height: 60px;
.curr-time{
.curr-time {
width: 160px;
font-size: 40px;
font-family: Microsoft YaHei;
......@@ -154,15 +158,18 @@
color: #FFFFFF;
text-align: center;
}
.curr-week-date{
.curr-week-date {
margin-left: 10px;
.curr-week{
.curr-week {
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.curr-date{
.curr-date {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
......@@ -171,7 +178,8 @@
}
}
}
.copyright{
.copyright {
position: absolute;
bottom: 50px;
width: 100%;
......@@ -185,29 +193,45 @@
justify-content: center;
align-items: center;
}
.qrcode-box{
.qrcode-box {
width: 19px;
height: 19px;
cursor: pointer;
}
.copyrightName{
.copyrightName {
font-size: 14px;
color: rgba(105,164,252,1);
color: rgba(105, 164, 252, 1);
font-weight: 500;
}
.line-tree{
.line-tree {
width: 1px;
height: 14px;
background: rgba(105,164,252,1);
background: rgba(105, 164, 252, 1);
margin: 0 10px;
}
}
:global{
.queshan{
:global {
.queshanLogin {
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
-webkit-text-fill-color: #807c7c !important;
transition: background-color 5000s ease-out 0.5s;
}
.panda-console-base-input-password-icon.anticon {
color: #fff!important;
}
}
.queshan {
.@{ant-prefix}-input-affix-wrapper-lg {
background-color: transparent;
......@@ -218,7 +242,7 @@
border-bottom: 1px solid #076aca;
}
.@{ant-prefix}-input-affix-wrapper > input.@{ant-prefix}-input {
.@{ant-prefix}-input-affix-wrapper>input.@{ant-prefix}-input {
background: transparent;
color: #FFFFFF;
padding-left: 20px;
......@@ -229,28 +253,32 @@
border-bottom: 1px solid #076aca;
}
.@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-focused {
.@{ant-prefix}-input-affix-wrapper:focus,
.@{ant-prefix}-input-affix-wrapper-focused {
border: none;
border-bottom: 1px solid #076aca;
}
.@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-focused {
.@{ant-prefix}-input-affix-wrapper:focus,
.@{ant-prefix}-input-affix-wrapper-focused {
box-shadow: none;
}
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper, .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:hover{
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper,
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:hover {
background: transparent;
}
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:focus, .@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper-focused {
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper:focus,
.@{ant-prefix}-input-affix-wrapper-status-error:not(.@{ant-prefix}-input-affix-wrapper-disabled):not(.@{ant-prefix}-input-affix-wrapper-borderless).@{ant-prefix}-input-affix-wrapper-focused {
box-shadow: none;
}
.@{ant-prefix}-checkbox + span {
.@{ant-prefix}-checkbox+span {
color: #FFFFFF;
}
.@{ant-prefix}src-pages-user-login-components-login-index-login .@{ant-prefix}src-pages-user-login-components-login-index-prefixIcon{
.@{ant-prefix}src-pages-user-login-components-login-index-login .@{ant-prefix}src-pages-user-login-components-login-index-prefixIcon {
color: #FFFFFF;
}
......@@ -259,13 +287,15 @@
}
}
.popover-style{
.@{ant-prefix}-popover-inner-content{
.popover-style {
.@{ant-prefix}-popover-inner-content {
display: flex;
justify-content: center;
align-items: center;
}
.@{ant-prefix}-popover-title{
.@{ant-prefix}-popover-title {
display: flex;
justify-content: center;
align-items: center;
......@@ -293,11 +323,3 @@
left: -9999px;
}
}
\ No newline at end of file
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