Skip to content

C
CivWeb
Commit fcdf862c authored by 周宏民's avatar 周宏民
Browse files
Options

fix: 确山登录页修改

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