Skip to content

C
CivWeb
Commit 91abc7fb authored by 王万里's avatar 王万里
Browse files
Options

feat: 二连浩特登录

parent efa8f04b
Hide whitespace changes
Inline Side-by-side
Showing with 359 additions and 344 deletions
src/pages/user/login/template/project/erlianhaote/index.js
View file @ 91abc7fb
......@@ -153,7 +153,7 @@ const Login = forwardRef((props, _ref) => {
<title>{props.global.title || defaultSetting.title}</title>
<meta name="description" content={props.global.title || defaultSetting.title} />
</Helmet>
<div className={styles.login}>
<div classnames={(styles.erlianhaotelogin, "erlianhaote")}>
<div className={styles['inner-wrapper']}>
<div className={styles['left-imgbox']}></div>
<div className={styles['inner-center']}>
......
src/pages/user/login/template/project/erlianhaote/index.less
View file @ 91abc7fb
.login {
width: 100%;
height: 100%;
background: url('./images/乐山登录背景.png') no-repeat center;
background-size: 100% 100%;
background-clip: border-box;
position: relative;
min-height: 7.0rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.login .inner-bg {
// width: 78%;
width: 100%;
margin: 16% 11% 25% 11%;
&>div {
width: 70%;
margin: 0 auto;
}
}
.inner-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 1100px;
height: 646px;
margin-left: -550px;
margin-top: -298px;
background: url('./images/二连浩特登陆框.png') no-repeat top;
background-size: 100% 100%;
display: flex;
align-items: flex-end;
}
.left-imgbox {
width: 682px;
height: 596px;
background: url('./images/二连浩特登陆界面配图-动态.gif') no-repeat center;
background-size: 100% 100%;
background-clip: border-box;
}
.img-wrapper {
width: 388px;
height: 134px;
background: url('./images/1.png') no-repeat center;
background-size: 100% 100%;
margin-bottom: 48px;
}
.login .inner-bg img[role="logo"] {
height: 40px;
}
.login .inner-bg .title {
font-size: 27px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
@keyframes waving {
from {
......@@ -85,130 +20,197 @@
}
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.inner-center {
width: 418px;
height: 596px;
border-radius: 0px 0px 15px 15px;
display: flex;
flex-flow: column;
align-items: center;
}
.welcome-title{
.erlianhaotelogin {
width: 100%;
height: 178px;
height: 100%;
background: url('./images/乐山登录背景.png') no-repeat center;
background-size: 100% 100%;
background-clip: border-box;
position: relative;
min-height: 7.0rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: flex-end;
}
.formgroup2 {
display: flex;
align-items: center;
display: flex;
margin: 0px 5.5%;
margin-bottom: 10%;
align-items: center;
margin-bottom: 40px;
}
.APPcodeBox {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
position: relative;
}
.APPCtext {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30px;
opacity: 0.75;
}
.APPCimg {
width: 138px;
height: 150px;
background: url('./images/3.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: none;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 23px 11px 12px;
span {
font-size: 12px;
opacity: 0.75;
.inner-bg {
// width: 78%;
width: 100%;
margin: 16% 11% 25% 11%;
&>div {
width: 70%;
margin: 0 auto;
}
}
.inner-wrapper {
position: absolute;
top: 50%;
left: 50%;
width: 1100px;
height: 646px;
margin-left: -550px;
margin-top: -298px;
background: url('./images/二连浩特登陆框.png') no-repeat top;
background-size: 100% 100%;
display: flex;
align-items: flex-end;
}
.left-imgbox {
width: 682px;
height: 596px;
background: url('./images/二连浩特登陆界面配图-动态.gif') no-repeat center;
background-size: 100% 100%;
background-clip: border-box;
}
.img-wrapper {
width: 388px;
height: 134px;
background: url('./images/1.png') no-repeat center;
background-size: 100% 100%;
margin-bottom: 48px;
}
}
.APPcodeBox:hover .APPCtext {
color: #1685FF;
}
.APPcodeBox:hover .APPCimg {
display: flex;
}
.APPCimg .codeCase {
text-align: center;
padding-top: 32px;
}
.login-header{
width: 100%;
position: absolute;
top: 20px;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
.inner-bg img[role="logo"] {
height: 40px;
}
.inner-bg .title {
font-size: 27px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.left-title{
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.inner-center {
width: 418px;
height: 596px;
border-radius: 0px 0px 15px 15px;
display: flex;
flex-flow: column;
align-items: center;
}
.right-timebox{
.welcome-title{
width: 100%;
height: 178px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.formgroup2 {
display: flex;
align-items: center;
display: flex;
margin: 0px 5.5%;
margin-bottom: 10%;
align-items: center;
margin-bottom: 40px;
}
.APPcodeBox {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
height: 60px;
.curr-time{
width: 140px;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #FFFFFF;
cursor: pointer;
position: relative;
}
.APPCtext {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30px;
opacity: 0.75;
}
.APPCimg {
width: 138px;
height: 150px;
background: url('./images/3.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: none;
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 23px 11px 12px;
span {
font-size: 12px;
opacity: 0.75;
}
.curr-week-date{
margin-left: 10px;
.curr-week{
font-size: 16px;
}
.APPcodeBox:hover .APPCtext {
color: #1685FF;
}
.APPcodeBox:hover .APPCimg {
display: flex;
}
.APPCimg .codeCase {
text-align: center;
padding-top: 32px;
}
.login-header{
width: 100%;
position: absolute;
top: 20px;
padding: 0 32px;
display: flex;
justify-content: space-between;
align-items: center;
.left-title{
}
.right-timebox{
display: flex;
justify-content: center;
align-items: center;
height: 60px;
.curr-time{
width: 140px;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 400;
font-weight: 300;
color: #FFFFFF;
}
.curr-date{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
.curr-week-date{
margin-left: 10px;
.curr-week{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.curr-date{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
:global{
......@@ -254,8 +256,10 @@
border-color: #00BDA0 !important;
}
}
}
src/pages/user/login/template/project/xingan/index.js
View file @ 91abc7fb
......@@ -152,7 +152,7 @@ const Login = forwardRef((props, _ref) => {
<title>{props.global.title || defaultSetting.title}</title>
<meta name="description" content={props.global.title || defaultSetting.title} />
</Helmet>
<div className={styles.login}>
<div className={styles.xinganlogin}>
<div className={styles['inner-wrapper']}>
{/* <div className={styles['left-imgbox']}></div> */}
<div className={styles['inner-center']}>
......
src/pages/user/login/template/project/xingan/index.less
View file @ 91abc7fb
......@@ -3,7 +3,7 @@
src: url('@/assets/fonts/PingFang.ttf');
}
.login {
.xinganlogin {
width: 100%;
height: 100%;
background: url('./images/6.png') no-repeat;
......@@ -15,40 +15,193 @@
display: flex;
justify-content: center;
align-items: center;
}
.login .inner-bg {
width: 100%;
height: 100%;
.inner-bg {
width: 100%;
height: 100%;
&>div {
width: 70%;
margin: 0 auto;
}
}
.inner-wrapper {
// width: 800px;
// height: 400px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
position: absolute;
bottom: 20%;
// top: 46%;
// right: 0;
// transform: translateY(-50%);
}
.inner-bg .title {
font-size: 27px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.inner-center {
position: relative;
width: 482px;
height: 316px;
background: rgba(255,255,255,0.3);
border: 1px solid #FFFFFF;
box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
border-radius: 15px;
}
.welcome-title{
width: 100%;
height: 68px;
line-height: 68px;
font-size: 24px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
opacity: 0.85;
text-align: center;
}
.formgroup2 {
display: flex;
align-items: center;
display: flex;
margin: 0px 5.5%;
margin-bottom: 10%;
align-items: center;
margin-bottom: 40px;
}
&>div {
width: 70%;
.APPcodeBox {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
position: relative;
}
.APPCtext {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30px;
opacity: 0.75;
}
.login-header{
width: 100%;
position: absolute;
top: 4%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
.left-title{
display: flex;
justify-content: center;
align-items: center;
.cn-title{
font-size: 48px;
font-family: PingFang SC;
font-weight: bold;
color: #A6D1FF;
background: linear-gradient(180deg, #00B3FF 0%, #0173B7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 25px;
}
.logo-png{
width: 107px;
height: 111px;
}
}
.right-timebox{
display: flex;
justify-content: center;
align-items: center;
height: 60px;
.curr-time{
width: 140px;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #FFFFFF;
}
.curr-week-date{
margin-left: 10px;
.curr-week{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.curr-date{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.copyright{
position: absolute;
bottom: 7%;
width: 100%;
margin: 0 auto;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #F1F6FD;
text-align: center;
}
.qrcode-box{
position: absolute;
bottom: 0;
right: -35px;
width: 35px;
height: 35px;
background: #FFFFFF;
opacity: 0.8;
cursor: pointer;
}
:global{
.@{ant-prefix}-popover-inner-content{
display: flex;
justify-content: center;
align-items: center;
}
.@{ant-prefix}-popover-title{
display: flex;
justify-content: center;
align-items: center;
}
}
}
.inner-wrapper {
// width: 800px;
// height: 400px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
position: absolute;
bottom: 20%;
// top: 46%;
// right: 0;
// transform: translateY(-50%);
}
.login .inner-bg .title {
font-size: 27px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
@keyframes waving {
from {
......@@ -70,151 +223,10 @@
}
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.inner-center {
position: relative;
width: 482px;
height: 316px;
background: rgba(255,255,255,0.3);
border: 1px solid #FFFFFF;
box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
border-radius: 15px;
}
.welcome-title{
width: 100%;
height: 68px;
line-height: 68px;
font-size: 24px;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
opacity: 0.85;
text-align: center;
}
.formgroup2 {
display: flex;
align-items: center;
display: flex;
margin: 0px 5.5%;
margin-bottom: 10%;
align-items: center;
margin-bottom: 40px;
}
.APPcodeBox {
width: 100%;
display: flex;
flex-flow: column;
align-items: center;
cursor: pointer;
position: relative;
}
.APPCtext {
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #000000;
line-height: 30px;
opacity: 0.75;
}
.login-header{
width: 100%;
position: absolute;
top: 4%;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
.left-title{
display: flex;
justify-content: center;
align-items: center;
.cn-title{
font-size: 48px;
font-family: PingFang SC;
font-weight: bold;
color: #A6D1FF;
background: linear-gradient(180deg, #00B3FF 0%, #0173B7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 25px;
}
.logo-png{
width: 107px;
height: 111px;
}
}
.right-timebox{
display: flex;
justify-content: center;
align-items: center;
height: 60px;
.curr-time{
width: 140px;
font-size: 36px;
font-family: Microsoft YaHei;
font-weight: 300;
color: #FFFFFF;
}
.curr-week-date{
margin-left: 10px;
.curr-week{
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
.curr-date{
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
.copyright{
position: absolute;
bottom: 7%;
width: 100%;
margin: 0 auto;
font-size: 12px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #F1F6FD;
text-align: center;
}
.qrcode-box{
position: absolute;
bottom: 0;
right: -35px;
width: 35px;
height: 35px;
background: #FFFFFF;
opacity: 0.8;
cursor: pointer;
}
:global{
.@{ant-prefix}-popover-inner-content{
display: flex;
justify-content: center;
align-items: center;
}
.@{ant-prefix}-popover-title{
display: flex;
justify-content: center;
align-items: center;
}
}
\ 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