diff --git a/src/assets/login/111.png b/src/assets/login/111.png new file mode 100644 index 0000000..dc967fe Binary files /dev/null and b/src/assets/login/111.png differ diff --git a/src/assets/login/back1.png b/src/assets/login/back1.png new file mode 100644 index 0000000..43a148e Binary files /dev/null and b/src/assets/login/back1.png differ diff --git a/src/assets/login/下载 (1).png b/src/assets/login/下载 (1).png new file mode 100644 index 0000000..5f605a1 Binary files /dev/null and b/src/assets/login/下载 (1).png differ diff --git a/src/assets/login/切片 1.png b/src/assets/login/切片 1.png new file mode 100644 index 0000000..13d9795 Binary files /dev/null and b/src/assets/login/切片 1.png differ diff --git a/src/layout/Header.js b/src/layout/Header.js index baeb7bd..bc78797 100644 --- a/src/layout/Header.js +++ b/src/layout/Header.js @@ -277,7 +277,7 @@ const NavOpton = (props) => { {/* */} +
矿山安全生产标准化系统 - （SPS） + （SMS） {baseConfig.SYS_NAME}{" "} )} diff --git a/src/layout/header.less b/src/layout/header.less index 4c2dd72..064cf6e 100644 --- a/src/layout/header.less +++ b/src/layout/header.less @@ -1,66 +1,69 @@ :global { - @main-bg : #ffffff;//#033C67 #f5f5f5 - @opacity-bg : rgba(72, 133, 255, 0.2); + @main-bg: #f4f7ff; //#033C67 #f5f5f5 + @opacity-bg: rgba(72, 133, 255, 0.2); @header-prefix: header; .headerModal { - - .ant-modal-footer { - display: none; - } + .ant-modal-footer { + display: none; + } .ant-modal-body { max-height: 90vh; } - } .ant-modal { padding-bottom: 0; } - .@{header-prefix} { - width : 100%; - height : 100%; - padding : 0 24px; - background-color: @main-bg; - box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25) - transition : background-color .2s ease; + // width: 100%; + height: 100%; + padding: 0 24px; + margin: 0px 10px; + // background-color: @main-bg; + // box-shadow : 0 0 10px rgba(0, 0, 0, 0.25);//rgba(250, 246, 246, 0.25) + transition: background-color 0.2s ease; &.login { - background-color: @opacity-bg; + // background-color: @opacity-bg; + } + &.nologin { + // background-color: @opacity-bg; + background-color: @main-bg; + // box-shadow: 0 0 10px rgba(0, 0, 0, 0.25); //rgba(250, 246, 246, 0.25) } &__left, &__right { - height : 100%; - display : flex; - flex-direction : row; + height: 100%; + display: flex; + flex-direction: row; justify-content: flex-start; - align-items : center; + align-items: center; } &__left { float: left; &-logo { - width : auto; - height : 52px; + width: auto; + height: 52px; margin-right: 16px; } &-slogan { - font-size : 16px; + font-size: 16px; font-weight: bolder; - color : #333333;//#f3eded + color: #606266; //#f3eded } &-sloganLogin { - font-size : 16px; + font-size: 16px; font-weight: bolder; - color : #ffffffdc;//#f3eded + color: #ffffffdc; //#f3eded } &-slogan-mobile { - font-size : 11px; + font-size: 11px; font-weight: bolder; - color : #333333; + color: #333333; } } @@ -69,20 +72,20 @@ &-icon { font-size: 22px !important; - color : #333333 !important;//f3eded - cursor : pointer; + color: #606266 !important; //f3eded + cursor: pointer; } &-datav { - font-size : 0; + font-size: 0; margin-right: 36px; } &-user { - font-size : 0; - margin-left : 36px; + font-size: 0; + margin-left: 36px; margin-right: 26; } } } -} \ No newline at end of file +} diff --git a/src/routes/Login.js b/src/routes/Login.js index 815feeb..feff056 100644 --- a/src/routes/Login.js +++ b/src/routes/Login.js @@ -1,415 +1,497 @@ // 核心库 -import React from 'react' -import { connect } from 'dva' +import React from "react"; +import { connect } from "dva"; // 组件库 -import { Button, Checkbox, Form, Icon, Input, TreeSelect, message, notification } from 'antd' +import { + Button, + Checkbox, + Form, + Icon, + Input, + TreeSelect, + message, + notification, + Divider, +} from "antd"; // 工具库 -import MD5 from 'md5' -import storage from '../utils/storage' -import { guid } from '../utils/common' -import config from '../config' +import MD5 from "md5"; +import storage from "../utils/storage"; +import { guid } from "../utils/common"; +import config from "../config"; // 样式 -import './login.less' +import "./login.less"; -const openNotificationPass = placement => { +const openNotificationPass = (placement) => { notification.info({ duration: null, message: `密码修改提示：`, - description: - '您的登录密码过于简单，请尽快修改您的登录密码！', + description: "您的登录密码过于简单，请尽快修改您的登录密码！", placement, }); }; -const openNotificationMobile = placement => { +const openNotificationMobile = (placement) => { notification.info({ //duration: null, message: `浏览友情提示：`, - description: - '您当前用的是手机在访问，为更好使用体验，建议用电脑访问！', + description: "您当前用的是手机在访问，为更好使用体验，建议用电脑访问！", placement, }); }; class LoginPage extends React.Component { constructor(props) { - super(props) + super(props); this.state = { treeData: [], tokenData: {}, formData: { orgId: undefined, - username: '', - password: '', - verifyCode: '', - phoneCode: '' + username: "", + password: "", + verifyCode: "", + phoneCode: "", }, verify: { - orgId: '', - username: '', - password: '', - verifyCode: '', - phoneCode: '' + orgId: "", + username: "", + password: "", + verifyCode: "", + phoneCode: "", }, // 图片验证码 - verifyCodeApi: config.serviceHost('api/UT/VerificationCode/Number'), + verifyCodeApi: config.serviceHost("api/UT/VerificationCode/Number"), verifyRandomCode: guid(), // 手机验证码 - hasCheckPhoneCode: storage('lacal').getItem('verifyPhoneCode').val, + hasCheckPhoneCode: storage("lacal").getItem("verifyPhoneCode").val, isCheckPhoneCode: null, // 重发验证码倒计时 checkTime: 60, // 登陆错误提示 - loginError: '' - } - this.timer = -1 + loginError: "", + }; + this.timer = -1; } componentDidMount() { if (window.navigator.userAgent.indexOf("Windows") < 1) { - window.location.replace(config.guideH5Host) + window.location.replace(config.guideH5Host); //alert('手机'); - } + } // if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('bottomRight'); - this.removeRequestKey() - this.getOrgList() + this.removeRequestKey(); + this.getOrgList(); } componentWillUnmount() { - clearInterval(this.timer) + clearInterval(this.timer); } removeRequestKey = () => { - const { localStorage } = window + const { localStorage } = window; for (let i = 0; i < localStorage.length; i++) { - const key = localStorage.key(i) - key.indexOf('_requestKey') > -1 && localStorage.removeItem(key) + const key = localStorage.key(i); + key.indexOf("_requestKey") > -1 && localStorage.removeItem(key); } - } + }; recurseData = (data) => { - data.forEach(item => { - const { Node = item, Children } = item - item.title = `${Node.NAME}(${Node.CODE})` - item.key = Node.ID - item.value = Node.ID - Children && Children.length && this.recurseData(Children) - }) - } + data.forEach((item) => { + const { Node = item, Children } = item; + item.title = `${Node.NAME}(${Node.CODE})`; + item.key = Node.ID; + item.value = Node.ID; + Children && Children.length && this.recurseData(Children); + }); + }; getOrgList = () => { - this.props.dispatch({ - type: 'login/getOrg', - payload: { - Sort: 'CODE', - Order: 0, - Parameter10: window.location.host, - Parameter11: '0' - } - }).then(res => { - if (res && res.Data) { - this.recurseData(res.Data) - this.setState({ - treeData: res.Data, - formData: { - ...this.state.formData, - orgId: storage('lacal').getItem('webOrgId').val ? storage('lacal').getItem('webOrgId').val : res.Data[0].Node.ORG_ID, - } - }) - } - }) - } + this.props + .dispatch({ + type: "login/getOrg", + payload: { + Sort: "CODE", + Order: 0, + Parameter10: window.location.host, + Parameter11: "0", + }, + }) + .then((res) => { + if (res && res.Data) { + this.recurseData(res.Data); + this.setState({ + treeData: res.Data, + formData: { + ...this.state.formData, + orgId: storage("lacal").getItem("webOrgId").val + ? storage("lacal").getItem("webOrgId").val + : res.Data[0].Node.ORG_ID, + }, + }); + } + }); + }; handleFormChange = (type, val) => { this.setState({ formData: { ...this.state.formData, - [type]: val + [type]: val, }, verify: { ...this.state.verify, - [type]: val ? '' : 'error' - } - }) - } + [type]: val ? "" : "error", + }, + }); + }; startCountDown = () => { this.timer = setInterval(() => { - const { checkTime } = this.state + const { checkTime } = this.state; if (checkTime > 0) { - this.setState({ checkTime: checkTime - 1 }) + this.setState({ checkTime: checkTime - 1 }); } else { - clearInterval(this.timer) + clearInterval(this.timer); } - }, 1000) - } + }, 1000); + }; getPhoneCode = () => { - const { tokenData, formData } = this.state - this.props.dispatch({ - type: 'app/getDataByGet', - url: 'PF/VerifyPhone/PhoneVerifyCode', - payload: { - uid: tokenData.userid, - orgId: formData.orgId - }, - onlyData: false - }).then(res => { - if (res) { - if (!res.IsSuccessful) { - message.error(res.ErrorMessage) - this.setState({ isCheckPhoneCode: null }) - return + const { tokenData, formData } = this.state; + this.props + .dispatch({ + type: "app/getDataByGet", + url: "PF/VerifyPhone/PhoneVerifyCode", + payload: { + uid: tokenData.userid, + orgId: formData.orgId, + }, + onlyData: false, + }) + .then((res) => { + if (res) { + if (!res.IsSuccessful) { + message.error(res.ErrorMessage); + this.setState({ isCheckPhoneCode: null }); + return; + } + this.setState({ checkTime: tokenData.second }, this.startCountDown); } - this.setState({ checkTime: tokenData.second }, this.startCountDown) - } - }) - } + }); + }; toLogin = (requestCode = false) => { - const { tokenData, formData } = this.state - const { orgId, username, password, phoneCode } = formData + const { tokenData, formData } = this.state; + const { orgId, username, password, phoneCode } = formData; this.props.dispatch({ - type: 'app/getDataByPost', - url: 'BI/BIController/getVersion', + type: "app/getDataByPost", + url: "BI/BIController/getVersion", onComplete: (ret) => { if (ret > config.version) { - window.localStorage.clear() - message.success('清除成功，即将重新加载页面', 2, () => { - setTimeout(() => window.location.reload(true), 500) - }) + window.localStorage.clear(); + message.success("清除成功，即将重新加载页面", 2, () => { + setTimeout(() => window.location.reload(true), 500); + }); } else { - this.props.dispatch({ - type: 'login/toLogin', - payload: { - Parameter1: username, - Parameter2: MD5(password), - Parameter4: orgId, - Parameter5: storage('lacal').getItem('formConfigVersion').val, - Parameter6: requestCode, - Parameter7: phoneCode - }, - loginPayload: { - username: username, - password: MD5(password), - accessToken: tokenData.access_token, - refreshToken: tokenData.refreshToken, - expiresIn: tokenData.expiresIn, - userid: tokenData.userid - } - }).then(validRes => { - if (validRes) { - storage('lacal').setItem('verifyPhoneCode', tokenData.userid) - this.props.dispatch({ - type: 'app/getAllEnum', - }) - //if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('topRight'); - //暂时先取消 - //if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight'); - if (window.navigator.userAgent.indexOf("Windows") < 1) { - // window.location.replace('http://localhost:8000/#/HomeMobileTask') - window.location.replace(config.guideH5Host) - // this.props.history.push({ pathname: '/HomeMobileNew' }) - } else { - this.props.history.push({ pathname: '/home' }) + this.props + .dispatch({ + type: "login/toLogin", + payload: { + Parameter1: username, + Parameter2: MD5(password), + Parameter4: orgId, + Parameter5: storage("lacal").getItem("formConfigVersion").val, + Parameter6: requestCode, + Parameter7: phoneCode, + }, + loginPayload: { + username: username, + password: MD5(password), + accessToken: tokenData.access_token, + refreshToken: tokenData.refreshToken, + expiresIn: tokenData.expiresIn, + userid: tokenData.userid, + }, + }) + .then((validRes) => { + if (validRes) { + storage("lacal").setItem("verifyPhoneCode", tokenData.userid); + this.props.dispatch({ + type: "app/getAllEnum", + }); + //if (window.navigator.userAgent.indexOf("Windows") < 1) openNotificationMobile('topRight'); + //暂时先取消 + //if(password == '123456' || password == '1234' || password == '123' || password == '111111' || password == '12345678' || password == '888888') openNotificationPass('topRight'); + if (window.navigator.userAgent.indexOf("Windows") < 1) { + // window.location.replace('http://localhost:8000/#/HomeMobileTask') + window.location.replace(config.guideH5Host); + // this.props.history.push({ pathname: '/HomeMobileNew' }) + } else { + this.props.history.push({ pathname: "/home" }); + } } - } - }) + }); } - } - }) - } + }, + }); + }; preLogin = () => { - const { formData, verifyRandomCode } = this.state - const { orgId, username, password, verifyCode } = formData - this.props.dispatch({ - type: 'login/getToken', - payload: { - orgId, - username, - password: MD5(password), - grant_type: 0, - random: verifyRandomCode, - verificationCode: verifyCode - } - }).then(res => { - // this.setState({ - // formData: { - // ...this.state.formData, - // orgId: res.orgId, - // } - // }) - if (res) { - if (res.error) { - this.setState({ loginError: res.error_description }) - return + const { formData, verifyRandomCode } = this.state; + const { orgId, username, password, verifyCode } = formData; + this.props + .dispatch({ + type: "login/getToken", + payload: { + orgId, + username, + password: MD5(password), + grant_type: 0, + random: verifyRandomCode, + verificationCode: verifyCode, + }, + }) + .then((res) => { + // this.setState({ + // formData: { + // ...this.state.formData, + // orgId: res.orgId, + // } + // }) + if (res) { + if (res.error) { + this.setState({ loginError: res.error_description }); + return; + } + const { isCheckPhoneCode, userid } = res; + const { hasCheckPhoneCode } = this.state; + if ( + isCheckPhoneCode && + (!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1) + ) { + // 需要进行验证码验证 + this.setState( + { + isCheckPhoneCode: true, + tokenData: res, + }, + this.getPhoneCode + ); + } else { + // 不需要进行验证码验证，则直接登录 + this.setState({ tokenData: res }, this.toLogin); + } } - const { isCheckPhoneCode, userid } = res - const { hasCheckPhoneCode } = this.state - if (isCheckPhoneCode && (!hasCheckPhoneCode || hasCheckPhoneCode.indexOf(userid) === -1)) { - // 需要进行验证码验证 - this.setState({ - isCheckPhoneCode: true, - tokenData: res - }, this.getPhoneCode) - } else { - // 不需要进行验证码验证，则直接登录 - this.setState({ tokenData: res }, this.toLogin) - } - } - }) - } + }); + }; formFieldInvalid = () => { - const { formData, isCheckPhoneCode } = this.state - const { orgId, username, password, verifyCode, phoneCode } = formData - const phoneCodeVerify = !isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode) + const { formData, isCheckPhoneCode } = this.state; + const { orgId, username, password, verifyCode, phoneCode } = formData; + const phoneCodeVerify = + !isCheckPhoneCode || (isCheckPhoneCode === true && phoneCode); this.setState({ verify: { //orgId: orgId ? '' : 'error', - username: username ? '' : 'error', - password: password ? '' : 'error', - verifyCode: verifyCode ? '' : 'error', - phoneCode: phoneCodeVerify ? '' : 'error' - } - }) + username: username ? "" : "error", + password: password ? "" : "error", + verifyCode: verifyCode ? "" : "error", + phoneCode: phoneCodeVerify ? "" : "error", + }, + }); //return !orgId || !username || !password || !verifyCode || !phoneCodeVerify - return !username || !password || !verifyCode || !phoneCodeVerify - - } + return !username || !password || !verifyCode || !phoneCodeVerify; + }; handleLogin = () => { - if (this.formFieldInvalid()) return + if (this.formFieldInvalid()) return; - const { isCheckPhoneCode } = this.state - !isCheckPhoneCode ? this.preLogin() : this.toLogin(true) - } + const { isCheckPhoneCode } = this.state; + !isCheckPhoneCode ? this.preLogin() : this.toLogin(true); + }; render() { - const { loading } = this.props - const { tokenData, formData, treeData, verify, verifyCodeApi, verifyRandomCode, isCheckPhoneCode, checkTime, loginError } = this.state - const { orgId, username, password, verifyCode, phoneCode } = verify + const { loading } = this.props; + const { + tokenData, + formData, + treeData, + verify, + verifyCodeApi, + verifyRandomCode, + isCheckPhoneCode, + checkTime, + loginError, + } = this.state; + const { orgId, username, password, verifyCode, phoneCode } = verify; return ( -
-
-
+
+
+
{/*

人人讲安全

安全为人人

product */}
-
-

用户登录

+
+

欢迎登录SMS

+

WELCOME!

{/* LOGIN */} -
-
-
- +
+
+ + this.handleFormChange('orgId', val)} - dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} - placeholder='请选择组织' + onChange={(val) => this.handleFormChange("orgId", val)} + dropdownStyle={{ maxHeight: 400, overflow: "auto" }} + placeholder="请选择组织" /> - + this.handleFormChange('username', evt.target.value)} + onChange={(evt) => + this.handleFormChange("username", evt.target.value) + } onPressEnter={this.handleLogin} - prefix={} + prefix={ +
+ + +
+ } placeholder="请输入用户名" - className='login-page__login-input' + className="login-page__login-input" /> this.handleFormChange('password', evt.target.value)} + type="password" + onChange={(evt) => + this.handleFormChange("password", evt.target.value) + } onPressEnter={this.handleLogin} - prefix={} - placeholder='请输入密码' - className='login-page__login-input' + prefix={ +
+ + +
+ } + placeholder="请输入密码" + className="login-page__login-input" /> -
+
记住密码 {/* 忘记密码？ */}
- + this.handleFormChange('verifyCode', evt.target.value)} + onChange={(evt) => + this.handleFormChange("verifyCode", evt.target.value) + } onPressEnter={this.handleLogin} - prefix={} + prefix={ +
+ + +
+ } suffix={ 验证码 this.setState({ verifyRandomCode: guid() })} - className='login-page__login-verifyCode' + alt="验证码" + onClick={() => + this.setState({ verifyRandomCode: guid() }) + } + className="login-page__login-verifyCode" /> } - placeholder='验证码' - className='login-page__login-input' + placeholder="验证码" + className="login-page__login-input" /> -
+ } - className='login-page__login-input' + prefix={} + className="login-page__login-input" /> this.handleFormChange('phoneCode', evt.target.value)} + onChange={(evt) => + this.handleFormChange("phoneCode", evt.target.value) + } onPressEnter={this.handleLogin} - prefix={} + prefix={} suffix={ + className="login-page__login-verifyCode" + >{`${ + checkTime > 0 ? checkTime + "s后" : "" + }再次发送`} } - placeholder='请输入短信验证码' - className='login-page__login-input' + placeholder="请输入短信验证码" + className="login-page__login-input" />
- {loginError ?
{loginError}
: null} + > + 立即登录 + + {loginError ? ( +
{loginError}
+ ) : null}
-
+
{/* OPT */} -
+

Copyright ©2022-2023 厦门鸣鹤管理咨询股份有限公司

-
+
{/* 二维码

访问移动端

*/}
- ) + ); } } -export default connect(({ login, loading }) => ({ login, loading }))(LoginPage) +export default connect(({ login, loading }) => ({ login, loading }))(LoginPage); diff --git a/src/routes/login.less b/src/routes/login.less index 352f3f5..ffe252e 100644 --- a/src/routes/login.less +++ b/src/routes/login.less @@ -2,36 +2,37 @@ @login-page: login-page; .@{login-page} { - position : relative; - width : 100%; - height : 100%; - display : flex; - flex-direction : column; - justify-content : center; - align-items : center; - background : url('../assets/login/bg.png') center no-repeat; + position: relative; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: end; + background: url("../assets/login/111.png") no-repeat; background-color: #d8ebff; - background-size : cover; - overflow : hidden; - padding-bottom : 80px; + background-size: cover; + overflow: hidden; + // padding-bottom: 80px; //padding-right : 80px; &__main { - width : 100%; - display : flex; - flex-direction : row; + width: 40%; + // margin-right: 5%; + display: flex; + flex-direction: row; justify-content: center; - align-items : center; + align-items: center; } &__slogan { - margin-right: 1%; //登录背景框的 + margin-right: 1%; //登录背景框的 p { - margin : 0 0 0 34px; - font-size : 30px; + margin: 0 0 0 34px; + font-size: 30px; line-height: 38px; - color : #1458BD; + color: #1458bd; &:nth-child(2) { margin-left: 68px; @@ -39,49 +40,57 @@ } img { - width : 460px; - height : auto; + width: 460px; + height: auto; margin-top: 18px; } } &__login { - width : 403px; - height : 450px; - padding : 0 58px; - background : url('../assets/login/login_box.png') center no-repeat; - background-size: contain; - background-position: -4px; - display : flex; - flex-direction : column; + width: 403px; + height: 450px; + padding: 0 58px; + display: flex; + flex-direction: column; justify-content: flex-start; - align-items : center; + align-items: center; + background-color: #fff; + border-radius: 25px; + box-shadow: 0px 0px 50px 0px #8bacff; &-cn { - font-size : 20px; + font-size: 22px; line-height: 1; - margin : 32px 0 16px 0; - color : #1458BD; + margin: 32px 0 16px 0; + color: #02112b; + font-weight: bold; + } + &-cne { + font-size: 12px; + line-height: 1; + // margin: 32px 0 16px 0; + color: #02112b; + font-weight: bold; } &-en { - font-size : 12px; - line-height : 1; + font-size: 12px; + line-height: 1; margin-bottom: 16px; - color : #9EADC5; - display : inline-block; + color: #9eadc5; + display: inline-block; } &-box { - width : 100%; + width: 100%; overflow: hidden; } &-formWrap { - display : flex; - width : 200%; - overflow : hidden; - transition: all .2s ease; + display: flex; + width: 200%; + overflow: hidden; + transition: all 0.2s ease; &.showPhoneCode { transform: translateX(-50%); @@ -102,23 +111,33 @@ } &-input { + ::placeholder { + color: #98a0b8 !important; + } + .ant-input { - padding-left: 36px !important; + padding-left: 46px !important; + background-color: #f5f9fe !important; + border: 1px solid #b3d2fb !important; + color: #677ada; + } + .ant-input:focus { + box-shadow: 0 0 0 2px #b3d2fb; } .ant-input-suffix { height: 80%; - right : 4px; + right: 4px; } } &-pwd { - display : flex; - flex-direction : row; + display: flex; + flex-direction: row; justify-content: space-between; - align-items : center; - font-size : 14px; - margin-bottom : 18px; + align-items: center; + font-size: 14px; + margin-bottom: 18px; } &-verifyCode { @@ -127,49 +146,58 @@ } &-btn { - width : 100%; - height : 42px; + width: 100%; + height: 42px; line-height: 42px; - font-size : 16px; - margin-top : 18px; + font-size: 16px; + margin-top: 18px; + background-color: #2a82e4; } &-error { - width : 100%; - color : #f04134; - font-size : 12px; - padding-top : 6px; - text-align : center; - overflow : hidden; + width: 100%; + color: #f04134; + font-size: 12px; + padding-top: 6px; + text-align: center; + overflow: hidden; text-overflow: ellipsis; - white-space : nowrap; + white-space: nowrap; } } &__footer { - position : absolute; - bottom : 8px; - display : flex; - flex-direction : row; - justify-content: center; - align-items : center; + position: absolute; + bottom: 8px; + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + width: 100%; img { - width : auto; - height : 50px; + width: auto; + height: 50px; margin-right: 12px; } &-copyright { - height : 50px; - line-height : 25px; - padding-left: 12px; - margin-right: 24px; - border-left : 1px solid #1446aa; + // height: 50px; + width: 40%; + line-height: 25px; + display: flex; + justify-content: center; + // padding-right: 50%; + // padding-left: 12px; + // margin-right: 24px; + // border-left: 1px solid #1446aa; p { - margin-top: 30px; - color : #fff; + // margin-top: 30px; + padding: 10px 20px; + color: #fff; + background-color: rgba(72, 133, 255, 0.2); + border-radius: 10px; &:first-child { font-size: 12px; @@ -177,23 +205,23 @@ &:last-child { font-size: 14px; - color : #fff; + color: #fff; } } } &-qrcode { img { - width : 60px; - height : auto; + width: 60px; + height: auto; margin-bottom: 4px; } p { - font-size : 12px; - color : #FFFFFF; + font-size: 12px; + color: #ffffff; line-height: 1; - margin : 0; + margin: 0; } } }