572 lines
11 KiB
SCSS
572 lines
11 KiB
SCSS
/* ===== PC DESIGN ===== */
|
|
$W: 1080;
|
|
$H: 1920;
|
|
// $picW: 438;
|
|
// $picH: 560;
|
|
$picW: 1080;
|
|
$picH: 1118;
|
|
$formW: 420;
|
|
$tabW: $formW / 2;
|
|
// $rowH: 56;
|
|
$rowH: 56;
|
|
$buttonH: 50;
|
|
|
|
// container
|
|
$containerBgColor: #e6ebf2;
|
|
$containerBgImage: '../assets/images/bg.png';
|
|
// container-logo
|
|
$logoWidth: 417px;
|
|
$logoHeight: 64px;
|
|
$logoImage: '../assets/logo/login-logo.png';
|
|
$cnbmLogo: '../assets/logo/cnbm.png';
|
|
// container-content
|
|
$contentWidth: round($W / $H * 100) * 1vw;
|
|
$contentHeight: round($picH / $W * 100) / 100 * $contentWidth;
|
|
$contentBgColor: #ffffff;
|
|
// container-content-pic
|
|
$picWidth: round($picW / $H * 100) * 1vw;
|
|
$picHeight: inherit;
|
|
// $picImage: '../assets/images/pic.png';
|
|
$picImage: '../assets/images/login-bg.png';
|
|
// container-content-field
|
|
$fieldWidth: $contentWidth - $picWidth;
|
|
$fieldHeight: inherit;
|
|
// container-content-field-form
|
|
$formWidth: $formW * 1px;
|
|
$tabWidth: $tabW * 1px;
|
|
$rowHeight: $rowH * 1px;
|
|
$buttonHeight: $buttonH * 1px;
|
|
|
|
// 1080px 高度为基准的 1px
|
|
$base1px: 0.15vh; // 1px / 1080px;
|
|
|
|
// - - - - - 页面基础设置
|
|
.container {
|
|
.login-code {
|
|
width: 33%;
|
|
height: 38px;
|
|
float: right;
|
|
img {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
max-width: 100px;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
// 元素
|
|
width: inherit;
|
|
height: inherit;
|
|
min-width: 1080px;
|
|
min-height: 620px;
|
|
background-color: $containerBgColor;
|
|
// background-image: url($containerBgImage);
|
|
background-size: cover;
|
|
// 定位
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// 文字
|
|
font-size: 14px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: 400;
|
|
.logo {
|
|
// 元素
|
|
width: $logoWidth;
|
|
height: $logoHeight;
|
|
// background-image: url($logoImage);
|
|
// background-size: contain;
|
|
// 定位
|
|
position: absolute;
|
|
top: 50px;
|
|
left: 50%;
|
|
margin-left: -$logoWidth/2;
|
|
}
|
|
.content {
|
|
// 元素
|
|
// width: $contentWidth;
|
|
// height: $contentHeight;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #ffffff;
|
|
// box-shadow: 0px calc(16 * 0.12vh) 40px rgba(0, 0, 0, 0.07);
|
|
// border-radius: 20px;
|
|
// 定位
|
|
position: relative;
|
|
display: flex;
|
|
|
|
.pic {
|
|
flex: 3;
|
|
width: 1px;
|
|
min-width: 800px;
|
|
// 元素
|
|
// width: $picWidth;
|
|
height: $picHeight;
|
|
// height: 10vh;
|
|
background-image: url($picImage);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 0 0;
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
// background: #f003;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.field {
|
|
position: relative;
|
|
margin-top: 14vh;
|
|
flex: 2;
|
|
// width: 800px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.pc-title {
|
|
width: 100%;
|
|
text-align: center;
|
|
clear: both;
|
|
position: relative;
|
|
top: calc(-32 * $base1px);
|
|
height: calc(128 * $base1px);
|
|
|
|
.title {
|
|
margin: 0;
|
|
margin-left: calc(28 * 0.12vh);
|
|
font-weight: 400;
|
|
user-select: none;
|
|
color: #000;
|
|
font-size: calc(28 * 0.12vh);
|
|
line-height: calc(40 * 0.12vh);
|
|
letter-spacing: calc(2 * 0.12vh);
|
|
|
|
.cnbm_logo {
|
|
height: calc(144 * 0.12vh);
|
|
width: calc(160 * 0.12vh);
|
|
position: relative;
|
|
top: calc(8 * 0.12vh);
|
|
right: calc(8 * 0.12vh);
|
|
}
|
|
}
|
|
|
|
.sub-title {
|
|
margin: 0;
|
|
margin-left: calc(28 * 0.12vh);
|
|
font-weight: 400;
|
|
user-select: none;
|
|
color: #000;
|
|
font-size: calc(28 * 0.12vh);
|
|
line-height: calc(48 * 0.12vh);
|
|
letter-spacing: 2px;
|
|
}
|
|
}
|
|
|
|
.mobile-title,
|
|
.mobile-switch {
|
|
display: none;
|
|
}
|
|
|
|
.form-cont {
|
|
// height: 560px;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.footer {
|
|
user-select: none;
|
|
// 元素
|
|
margin: calc(12 * 0.12vh) 0;
|
|
height: calc(16 * 0.12vh);
|
|
line-height: calc(16 * 0.12vh);
|
|
font-size: calc(12 * 0.12vh);
|
|
color: #8c8c8c;
|
|
|
|
a,
|
|
a:hover,
|
|
a:active {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
margin-top: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
|
|
:deep(.el-tabs__content) {
|
|
padding: 20px 0 0;
|
|
}
|
|
:deep(.el-tabs__item) {
|
|
user-select: none;
|
|
// 元素
|
|
width: $tabWidth;
|
|
// height: $rowHeight;
|
|
height: calc(54 * 0.12vh);
|
|
padding: 0;
|
|
// 文字
|
|
line-height: $rowHeight;
|
|
color: #666666;
|
|
font-size: calc(14 * 0.12vh);
|
|
font-weight: 400;
|
|
text-align: center;
|
|
}
|
|
:deep(.el-tabs__item.is-active) {
|
|
font-weight: 500;
|
|
color: #2f53eb;
|
|
}
|
|
:deep(.el-tabs__active-bar) {
|
|
height: 3px;
|
|
border-radius: 2px;
|
|
}
|
|
// - - - input
|
|
:deep(.el-input__inner) {
|
|
// 元素
|
|
width: 100%;
|
|
// height: $rowHeight;
|
|
height: calc(72 * 0.12vh);
|
|
background: #f5f5f5;
|
|
border: 0;
|
|
border-radius: 28px;
|
|
// 文字
|
|
text-align: center;
|
|
line-height: 19px;
|
|
color: #262626;
|
|
}
|
|
.code:deep(.el-input__inner) {
|
|
padding: 0 24px;
|
|
// 文字
|
|
text-align: left;
|
|
}
|
|
:deep(.el-input__inner::-webkit-input-placeholder) {
|
|
/* WebKit browsers */
|
|
font-weight: 400;
|
|
color: #8c8c8c;
|
|
}
|
|
:deep(.el-input__inner:-moz-placeholder) {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
font-weight: 400;
|
|
color: #8c8c8c;
|
|
}
|
|
:deep(.el-input__inner::-moz-placeholder) {
|
|
/* Mozilla Firefox 19+ */
|
|
font-weight: 400;
|
|
color: #8c8c8c;
|
|
opacity: 1;
|
|
}
|
|
:deep(.el-input__inner:-ms-input-placeholder) {
|
|
/* Internet Explorer 10+ */
|
|
font-weight: 400;
|
|
color: #8c8c8c !important;
|
|
}
|
|
:deep(.el-form-item) {
|
|
position: relative;
|
|
.button-code {
|
|
// 元素
|
|
height: $rowHeight;
|
|
box-sizing: border-box;
|
|
// 定位
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20px;
|
|
z-index: 1;
|
|
// 文字
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #2f53eb;
|
|
span {
|
|
padding-left: 15px;
|
|
border-left: 2px solid #d9d9d9;
|
|
}
|
|
}
|
|
}
|
|
:deep(.el-form-item__error) {
|
|
padding-left: 24px;
|
|
}
|
|
.button {
|
|
width: 100%;
|
|
height: $buttonHeight;
|
|
background: rgba(24, 144, 255, 0.2);
|
|
border: 0;
|
|
border-radius: 24px;
|
|
margin-bottom: 20px;
|
|
// 文字
|
|
line-height: 26px;
|
|
font-size: calc(18 * 0.12vh);
|
|
color: #ffffff;
|
|
}
|
|
.button-active {
|
|
background: #2f53eb;
|
|
box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.login-form {
|
|
* {
|
|
user-select: none;
|
|
}
|
|
// - - - input
|
|
:deep(.el-input__inner) {
|
|
// 元素
|
|
width: 420px;
|
|
height: calc(52 * 0.12vh);
|
|
// height: 66px;
|
|
color: #262626;
|
|
font-size: calc(14 * 0.12vh);
|
|
}
|
|
:deep(.el-checkbox__label) {
|
|
font-size: calc(14 * 0.12vh);
|
|
line-height: calc(12 * 0.12vh);
|
|
}
|
|
}
|
|
}
|
|
|
|
// - - - - - PC 最小尺寸设置
|
|
@media screen and (min-width: 1920px) {
|
|
.container {
|
|
.content {
|
|
.field {
|
|
flex: initial;
|
|
// width: 800px;
|
|
width: 40vw;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-height: 1024px) {
|
|
.container {
|
|
.content {
|
|
.field {
|
|
margin-top: 16vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 1024px) {
|
|
.container {
|
|
.content {
|
|
.field {
|
|
margin-top: 8vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 599px) and (max-width: 1366px) {
|
|
.container {
|
|
// min-width: 599px;
|
|
min-width: 42vw;
|
|
|
|
.content {
|
|
// width: 710px;
|
|
// height: 397px;
|
|
width: 100%;
|
|
height: 100%;
|
|
.pic {
|
|
// width: 314px;
|
|
display: none;
|
|
}
|
|
.field {
|
|
// margin-top: 6vh;
|
|
// width: calc(710px - 314px);
|
|
// left: 314px;
|
|
// justify-content: center;
|
|
width: 100%;
|
|
|
|
.pc-title {
|
|
h3 {
|
|
font-size: 2.4rem !important;
|
|
}
|
|
}
|
|
|
|
.form {
|
|
// width: 320px;
|
|
:deep(.el-input__inner) {
|
|
width: 320px;
|
|
height: 56px;
|
|
}
|
|
.button {
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// @media screen and (max-height: 1080px) {
|
|
// .container {
|
|
// .field {
|
|
// transform: scale(0.74);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
/* ===== MOBILE DESIGN ===== */
|
|
$mobileW: 375;
|
|
$mobileH: 812;
|
|
$mobileContentW: 327;
|
|
$mobileContentH: 376;
|
|
$mobileFormW: 280;
|
|
$mobileRowH: 48;
|
|
$mobileButtonH: 48;
|
|
|
|
// container
|
|
$mobileContainerBgImage: '../assets/images/bg-mobile.png';
|
|
// container-content
|
|
$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
|
|
$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 *
|
|
$mobileContentWidth;
|
|
// container-content-field-form
|
|
$mobileFormWidth: round($mobileFormW / $mobileW * 100) * 1vw;
|
|
$mobileRowHeight: $mobileRowH * 1px;
|
|
$mobileButtonHeight: $mobileButtonH * 1px;
|
|
$iconBgImage: '../assets/images/icon.png';
|
|
|
|
// - - - - - 移动端设置
|
|
@media screen and (max-width: 599px) {
|
|
.container {
|
|
// 元素
|
|
background-image: url($mobileContainerBgImage);
|
|
min-width: 280px;
|
|
min-height: 568px;
|
|
// 文字
|
|
font-size: 14px;
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
.logo {
|
|
display: none;
|
|
}
|
|
|
|
.pc-title {
|
|
display: none;
|
|
}
|
|
|
|
.content {
|
|
// 元素
|
|
width: $mobileContentWidth;
|
|
height: $mobileContentHeight;
|
|
min-width: 250px;
|
|
min-height: 340px;
|
|
// 定位
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.pic {
|
|
display: none;
|
|
}
|
|
.field {
|
|
padding: 0;
|
|
// 元素
|
|
width: inherit;
|
|
min-height: inherit;
|
|
// 定位
|
|
left: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.mobile-title {
|
|
// 元素
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
|
|
.form {
|
|
margin: 0;
|
|
width: $mobileFormWidth;
|
|
// - - - tab
|
|
:deep(.el-tabs__header) {
|
|
display: none;
|
|
}
|
|
:deep(.el-tabs__content) {
|
|
padding: 0;
|
|
}
|
|
// - - - input
|
|
:deep(.el-input__inner) {
|
|
height: $mobileRowHeight;
|
|
line-height: 24px;
|
|
// 文字
|
|
text-align: center;
|
|
color: #262626;
|
|
}
|
|
:deep(.el-form-item) {
|
|
.button-code {
|
|
// 元素
|
|
height: $mobileRowHeight;
|
|
}
|
|
}
|
|
.button {
|
|
height: $mobileButtonHeight;
|
|
line-height: 24px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.login-form {
|
|
:deep(.el-input__inner) {
|
|
height: $mobileRowHeight;
|
|
line-height: 24px;
|
|
// 文字
|
|
text-align: center;
|
|
color: #262626;
|
|
}
|
|
|
|
:deep(#button-form-item) {
|
|
margin: 0 !important;
|
|
button {
|
|
// 元素
|
|
height: $mobileRowHeight;
|
|
}
|
|
}
|
|
}
|
|
.mobile-switch {
|
|
display: block;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #595959;
|
|
margin: 0;
|
|
.icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
display: inline-block;
|
|
background-image: url($iconBgImage);
|
|
background-size: cover;
|
|
}
|
|
}
|
|
.mobile-switch:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footer {
|
|
// 元素
|
|
font-size: calc(12 * 0.12vh);
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 17px;
|
|
color: #333333;
|
|
opacity: 0.6;
|
|
// 定位
|
|
// position: absolute;
|
|
bottom: -calc(32 * 0.12vh);
|
|
}
|
|
}
|
|
}
|