Skip to content

C
CivWeb
Commit 25083383 authored by 徐乐's avatar 徐乐
Browse files
Options

fix: 修改榆林登录页

parent b8a6e7e6
Show whitespace changes
Inline Side-by-side
Showing with 531 additions and 0 deletions
src/assets/images/login/榆林/d-我的.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/ls-showpwd.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/密码.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/小程序@2x.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/左图.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/标题.png 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/assets/images/login/榆林/背景.jpg 0 → 100644
View file @ 25083383
This diff was suppressed by a .gitattributes entry.
src/pages/user/login/index.js
View file @ 25083383
......@@ -3,6 +3,7 @@ import React from 'react';
import BaseLogin from './template/baseLogin';
import NewYear from './template/newYear';
import InfoLogin from './template/infoLogin';
import Yulin from './template/yulin';
/* eslint-disable */
export default () => {
const loginTemplate = window.globalConfig && window.globalConfig.loginTemplate;
......@@ -14,6 +15,8 @@ export default () => {
return <BaseLogin/>
case '信息化.html':
return <InfoLogin />
case '项目 - 榆林.html':
return <Yulin />
default:
return <BaseLogin/>;
}
......
src/pages/user/login/template/style/yulin.less 0 → 100644
View file @ 25083383
.InfoBg{
width: 100%;
height: 100%;
background-image: url('../../../../../assets/images/login/榆林/背景.jpg');
background-size: cover;
background-repeat: no-repeat;
position: relative;
.loginBg{
position: absolute;
top: 50%;
left: 50%;
margin-left: -385px;
margin-top: -226px;
width: 770px;
height: 452px;
.IBcenter{
width: 100%;
height: 89.5%;
.IBCleft{
width: 50%;
height: 100%;
background-image: url('../../../../../assets/images/login/榆林/左图.png');
background-size: 100% 100%;
background-repeat: no-repeat;
float: left;
}
.IBCright{
width: 50%;
height: 100%;
float: left;
background: rgba(255,255,255,0.8);
}
}
.IBtitle{
width: 100%;
height: 10.5%;
text-align: center;
img{
width: 70%;
height: 100%;
}
}
.title{
font-family: SourceHanSansCN-Medium;
font-weight: bold;
color: #43484D;
position: absolute;
top: 21px;
right: 50%;
margin-right: -285px;
line-height: 1;
width: 570px;
text-align: center;
overflow-wrap: break-word;
font-size: 24px;
img{
margin-right: 14px;
}
}
.ddCode{
position: absolute;
top: 50px;
right: -9px;
cursor: pointer;
}
.titleImg {
position: absolute;
top: 132px;
right: 133px;
}
.loginForm{
width: 280px;
margin: 9% auto 25%;
.formgroup{
position: relative;
line-height: 1;
display: flex;
align-items: center;
.IBCRimg{
top: 33px;
}
img{
position: absolute;
left: 10px;
top: 50%;
}
.eyes{
left: 89%;
margin-top: 10px;
cursor: pointer;
}
input[type="checkbox"] {
width: 12px;
height: 12px;
}
input {
font-size: 16px;
outline: 0;
}
span {
position: relative;
top: 0px;
}
.formControl{
display: block;
width: 100%;
}
.inputLg{
padding-left: 42px;
color: #2D3033;
border: none;
box-shadow: none;
border-radius: 0;
padding: 10px 50px;
line-height: 1.3333333;
margin-top: 21px;
}
}
.submitBtn {
width: 100%;
background-color: #0599F4 !important;
border: none !important;
color: #fff !important;
outline: none !important;
border-color: transparent !important;
height: 40px;
line-height: 40px;
font-size: 18px;
text-align: center;
margin-top: 25px;
cursor: pointer;
}
}
.login_container {
position: absolute;
top: 59%;
left: 52%;
margin-left: 150px;
margin-top: -219px;
width: 400px;
height: 500px;
}
.wxlogin_container{
position: absolute;
top: 60%;
left: 55%;
margin-left: 150px;
margin-top: -219px;
width: 300px;
height: 300px;
background: #fff;
}
.changeCode {
position: absolute;
top: 80%;
left: 75%;
align-items: center;
font-size: 14px;
display: flex;
}
}
.IBCRnamec{
margin-top: 15%;
height: 22px;
font-size: 22px;
letter-spacing: 1px;
font-family: PingFang SC;
font-weight: bold;
color: #0599F4;
line-height: 37px;
text-align: center;
margin-bottom: 0;
}
.IBCRnameE{
height: 9px;
font-size: 1px;
color: #0599F4;
line-height: 32px;
text-align: center;
}
.rmpwdInput{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #0599F4;
position: relative;
cursor: pointer;
span{
font-size: 12px;
color: #fff;
visibility: hidden;
position: absolute;
top: 3px;
left: -7px;
}
}
.active{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #0599F4;
position: relative;
cursor: pointer;
background-color: #0599F4;
span{
visibility: visible;
color: #fff;
font-size: 15px;
color: #fff;
position: absolute;
top: 3px;
left: 1px;
font-weight: bold;
}
}
.codeBox{
width: 34px;
height: 34px;
position: absolute;
right: -34px;
bottom: 0px;
background: rgba(255, 255, 255, 0.7);
padding: 6px;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.codeImg{
width: 23px;
}
.codeBig{
width: 128px;
height: 150px;
position: absolute;
bottom: 0;
left: 0px;
background: rgba(255, 255, 255, 0.7);
padding: 6px;
display: none;
justify-content: space-around;
span{
font-size: 12px;
font-weight: 100;
}
}
.codeBox:hover .codeBig{
display: block;
}
.codeBox:hover .codeImg{
display: none;
}
.codeText{
font-size: 14px;
font-family: PingFang SC;
font-weight: bold;
color: #121F2B;
text-align: center;
line-height: 24px;
}
.codeBox:hover .codeBig {
display: flex;
}
.IBtimeBox{
}
.IBTtime{
position: absolute;
width: 88px;
height: 26px;
font-size: 32px;
font-family: Microsoft YaHei UI;
font-weight: 400;
color: #FFFFFF;
line-height: 34px;
top: 34px;
right: 130px;
}
.IBTweek{
position: absolute;
top: 25px;
right: 69px;
height: 15px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 200;
color: #FFFFFF;
line-height: 30px;
}
.IBTdate{
position: absolute;
top: 46px;
right: 36px;
width: 80px;
height: 13px;
font-size: 14px;
font-family: Microsoft YaHei UI;
font-weight: 300;
color: #FFFFFF;
line-height: 30px;
}
}
\ No newline at end of file
src/pages/user/login/template/yulin.js 0 → 100644
View file @ 25083383
/* eslint-disable */
/*
* @Author: xule;
* @Date: 2021-11-22
* @Description:榆林登录页;
*/
import React from 'react';
import styles from './style/yulin.less'
import classNames from 'classnames';
import { connect } from 'react-redux';
import { CheckOutlined } from '@ant-design/icons';
import { withRouter } from '@wisdom-utils/runtime';
import Logo from '@/assets/images/login/榆林/标题.png'
import Code from '@/assets/images/login/榆林/小程序@2x.png'
import MyHead from '@/assets/images/login/榆林/d-我的.png'
import PassWord from '@/assets/images/login/榆林/密码.png'
import Close from '@/assets/oa/login/close.png'
import Open from '@/assets/oa/login/open.png'
import LoginAction from '../login';
import { actionCreators } from '@/containers/App/store';
import Cookies from 'js-cookie';
import QRCode from 'qrcode.react';
const Logger = logger('login');
// 、登录页
class InfoLogin extends React.Component {
state = {
loginStyle: false, //true 账号密码登录 false 扫码登录
isOpen: false, //查看密码
isRember: false, //记住密码
ddOrWeixin: '',
qrcode: '',//二维码
codeLenth: 1,
time: '',
week: '',
date: ''
}
componentDidMount() {
let action = new LoginAction(this.props, false, true)
this.loginEvent(action);
this.renderQRcode();
this.renderTime();
}
renderQRcode() {
var me = this;
var list = globalConfig.qrcode ? globalConfig.qrcode.split("|") : [];
let str = [];
if (list.length) {
list.forEach(function (val, index) {
if (val && val.replace(/ /g, "").length > 0) {
str.push(me.creatCodeHtml(val, index));
}
})
} else {
str.push(<span>手持APP下载未配置</span>);
}
this.setState({
qrcode: str,
codeLenth: list.length
})
}
renderTime() {
let me = this;
setInterval(() => {
const date = new Date();
const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
const time = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
}:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()}`;
me.setState({
time,
week: weekday[date.getDay()],
date: date.pattern('yyyy/MM/dd'),
})
}, 1000);
}
creatCodeHtml(val, index) {
return (
<div className={('codeCase codeCase' + index)}>
<QRCode value={val.replace(/{ip}/ig, globalConfig.ip).split('=')[0]} />
<div className={styles.codeText}>{val.replace(/{ip}/ig, globalConfig.ip).split('=')[0]}</div>
</div>);
}
// 切换登录方式
changeloginStyle = () => {
const { ddOrWeixin } = this.state
this.setState({
loginStyle: !this.state.loginStyle,
ddOrWeixin: ddOrWeixin ? '' : 'dingding'
}, () => {
Cookies.set('loginMode', `${this.state.ddOrWeixin ? 'dingding' : 'pdw'}`, {
path: '/',
});
if (this.state.ddOrWeixin === 'dingding') {
let action = new LoginAction(this.props, false, true)
action.loginByDD()
}
})
}
// 查看密码
seePassWord = (e) => {
this.setState({
isOpen: !this.state.isOpen
})
}
// 记住密码
remberWord = () => {
this.setState({
isRember: !this.state.isRember
})
}
// 输入框变化
handleForm = (e) => {
const target = e.target
// 判断事件类型，如果是checkbox返回checked值，不是返回文本框的value值
const value = target.type == 'checkbox' ? target.checked : target.value;
// 获取文本框的name值
const name = target.name
this.setState({
[name]: value
})
}
// 登录
loginToWeb5 = () => {
const { loginName, passWord, isRember } = this.state
let action = new LoginAction(this.props, false, true)
action.loginHandler(loginName, passWord, null, isRember, false)
this.loginEvent(action)
}
// 登录成功事件
loginEvent(action) {
action.globalConfig = this.props.global;
this.props.updateCurrentIndex && this.props.updateCurrentIndex(-1);
action && action.events.on('loginSuccess', event => {
this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
this.props.history.push(`/?client=${this.props.global.client}`);
window.share.event.emit('triggerMicro', this.props.global);
});
action && action.events.on('loginError', event => {
});
action && action.events.on('loginVisible', status => {
});
}
render() {
const { loginStyle, isOpen, isRember, loginName, passWord, qrcode, codeLenth, time, week, date } = this.state
return (
<div className={styles.InfoBg}>
<div className={styles.IBtimeBox}>
<span className={styles.IBTtime}>{time}</span>
<span className={styles.IBTweek}>{week}</span>
<span className={styles.IBTdate}>{date}</span>
</div>
<div className={styles.loginBg}>
{/* 标题 */}
<div className={styles.IBtitle}>
<img src={Logo} alt="" />
</div>
<div className={styles.IBcenter}>
<div className={styles.IBCleft}></div>
<div className={styles.IBCright}>
<p className={styles.IBCRnamec}>榆林清水工业园智慧水务平台</p>
<p className={styles.IBCRnameE}>Smart Water Platform of Yulin Qingshui Industrial Park</p>
{/* 登录主题 */}
<form className={styles.loginForm} style={{ display: loginStyle ? 'none' : '' }}>
<div className={styles.formgroup}>
<img className={styles.IBCRimg} src={MyHead} alt="" />
<input type="text" className={styles.inputLg} id='loginName' name='loginName' value={loginName} onChange={this.handleForm} placeholder="请输入你的用户名" />
</div>
<div className={styles.formgroup}>
<img className={styles.IBCRimg} src={PassWord} alt="" />
<input type={isOpen ? 'text' : "password"} className={styles.inputLg} id='passWord' name='passWord' value={passWord} onChange={this.handleForm} placeholder="请输入你的密码" />
<img className={styles.eyes} src={isOpen ? Open : Close} alt="" onMouseDown={(e) => this.seePassWord(e)} onMouseUp={(e) => this.seePassWord(e)} />
</div>
<div className={styles.formgroup} style={{ position: 'relative', marginTop: '20px' }}>
<label className={classNames(isRember ? (styles.rmpwdInput, styles.active) : styles.rmpwdInput)} onClick={() => this.remberWord()}>
<CheckOutlined style={{ display: isRember ? '' : 'none' }} />
</label>
<span style={{ color: '#9FA8B3', marginLeft: '10px', fontSize: '14px' }}>记住密码</span>
</div>
<div className={styles.submitBtn} onClick={this.loginToWeb5}>登录</div>
</form>
</div>
<div className={styles.codeBox}>
<img className={styles.codeImg} src={Code} alt="" />
<div className={styles.codeBig} style={{ width: codeLenth * 148 + 'px' }}>
{qrcode}
</div>
</div>
</div>
</div>
</div>
)
}
}
const mapStateToProps = state => ({
global: state.getIn(['global', 'globalConfig']),
loginMode: state.getIn(['global', 'loginMode']),
});
const mapDispatchToProps = dispatch => ({
updateConfig(config) {
dispatch(actionCreators.getConfig(config));
},
createContext(data) {
dispatch(actionCreators.createContext(data));
},
updateLoginMode(mode) {
dispatch(actionCreators.changeLoginMode(mode));
},
updateCurrentIndex(index) {
dispatch(actionCreators.updateCurrentIndex(index));
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(withRouter(InfoLogin));
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