|
|
|
|
@ -1,119 +1,120 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="login-container">
|
|
|
|
|
<div class="textTitle">
|
|
|
|
|
<!-- <h3 class="toptitle">平潭协和医院</h3>-->
|
|
|
|
|
<h3 class="toptitle">{{ title }}</h3>
|
|
|
|
|
<!--<h3 class="topSubtitle">{{ subTitle }}</h3>-->
|
|
|
|
|
<h3 class="topSubtitle">{{ webVersionName }}</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form
|
|
|
|
|
class="card-box login-form"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
:model="ruleForm"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="ruleForm"
|
|
|
|
|
label-position="left"
|
|
|
|
|
@submit.native.prevent
|
|
|
|
|
>
|
|
|
|
|
<el-card class="box-card">
|
|
|
|
|
<div style="text-align: center; margin-top: 10px">
|
|
|
|
|
<div v-if="webLogo == ''">
|
|
|
|
|
<img alt="element-logo" src="@/assets/logo/wyLogo.png" width="120" height="60">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<img alt="element-logo" :src="webLogo">
|
|
|
|
|
<div class="split-layout">
|
|
|
|
|
<!-- Left side: Empty/Decorative -->
|
|
|
|
|
<div class="left-panel">
|
|
|
|
|
<!-- Left side is now empty, just for visual design -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Right side: Logo, Title and Login Form together -->
|
|
|
|
|
<div class="right-panel">
|
|
|
|
|
<div class="login-panel">
|
|
|
|
|
<div class="header-section">
|
|
|
|
|
<div class="logo-section">
|
|
|
|
|
<div v-if="webLogo == ''">
|
|
|
|
|
<img alt="logo" src="@/assets/logo/wyLogo.png" class="logo-image">
|
|
|
|
|
</div>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<img alt="logo" :src="webLogo" class="logo-image">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="title-section">
|
|
|
|
|
<h1 class="system-title">{{ title }}</h1>
|
|
|
|
|
<!-- <h2 class="system-subtitle">{{ webVersionName }}</h2> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="title" style="margin-top: 20px">用户登录</h3>
|
|
|
|
|
<el-form-item prop="username" class="item" style="margin-top: -20px">
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="账号"
|
|
|
|
|
name="username"
|
|
|
|
|
|
|
|
|
|
<!-- <h3 class="login-heading">用户登录</h3> -->
|
|
|
|
|
|
|
|
|
|
<el-form
|
|
|
|
|
class="login-form"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
readonly
|
|
|
|
|
onfocus="this.removeAttribute('readonly');"
|
|
|
|
|
v-model="loginForm.username"
|
|
|
|
|
:model="ruleForm"
|
|
|
|
|
:rules="rules"
|
|
|
|
|
ref="ruleForm"
|
|
|
|
|
label-position="left"
|
|
|
|
|
@submit.native.prevent
|
|
|
|
|
>
|
|
|
|
|
<i slot="prefix" class="el-input__icon">
|
|
|
|
|
<icon-svg icon-class="user"/>
|
|
|
|
|
</i>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="password" class="item">
|
|
|
|
|
<el-input
|
|
|
|
|
prefix-icon="el-icon-lock"
|
|
|
|
|
v-model="pwdCover"
|
|
|
|
|
type="text"
|
|
|
|
|
name="pwd"
|
|
|
|
|
id="pwd"
|
|
|
|
|
placeholder="密码"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
@input="setPassword"
|
|
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
|
|
>
|
|
|
|
|
<i
|
|
|
|
|
slot="suffix"
|
|
|
|
|
style="margin-top: 10px; margin-right: 10px; font-size: 18px"
|
|
|
|
|
@click="hidePassword"
|
|
|
|
|
<el-form-item prop="username" class="form-item">
|
|
|
|
|
<el-input
|
|
|
|
|
placeholder="账号"
|
|
|
|
|
name="username"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
readonly
|
|
|
|
|
onfocus="this.removeAttribute('readonly');"
|
|
|
|
|
v-model="loginForm.username"
|
|
|
|
|
prefix-icon="el-icon-user"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item prop="password" class="form-item">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="pwdCover"
|
|
|
|
|
type="text"
|
|
|
|
|
name="pwd"
|
|
|
|
|
id="pwd"
|
|
|
|
|
placeholder="密码"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
@input="setPassword"
|
|
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
|
|
prefix-icon="el-icon-lock"
|
|
|
|
|
>
|
|
|
|
|
<i
|
|
|
|
|
slot="suffix"
|
|
|
|
|
class="password-eye"
|
|
|
|
|
@click="hidePassword"
|
|
|
|
|
>
|
|
|
|
|
<svg-icon icon-class="eye-open" v-if="this.isShowPassword" />
|
|
|
|
|
<svg-icon icon-class="eye" v-else />
|
|
|
|
|
</i>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="verificationCode"
|
|
|
|
|
class="form-item verify-section"
|
|
|
|
|
>
|
|
|
|
|
<svg-icon icon-class="eye-open" v-if="this.isShowPassword" />
|
|
|
|
|
<svg-icon icon-class="eye" v-else />
|
|
|
|
|
</i>
|
|
|
|
|
|
|
|
|
|
</el-input>
|
|
|
|
|
<!-- <el-input-->
|
|
|
|
|
<!-- placeholder="密码"-->
|
|
|
|
|
<!-- name="password"-->
|
|
|
|
|
<!-- :type="isShowPwd ? 'text' : 'password'"-->
|
|
|
|
|
<!-- @keyup.enter.native="handleLogin"-->
|
|
|
|
|
<!-- v-model="loginForm.password"-->
|
|
|
|
|
<!-- autocomplete="on"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <i slot="prefix" class="el-input__icon">-->
|
|
|
|
|
<!-- <icon-svg icon-class="pwd"/>-->
|
|
|
|
|
<!-- </i>-->
|
|
|
|
|
<!-- <i-->
|
|
|
|
|
<!-- slot="suffix"-->
|
|
|
|
|
<!-- class="el-input__icon"-->
|
|
|
|
|
<!-- @click="isShowPwd = !isShowPwd"-->
|
|
|
|
|
<!-- >-->
|
|
|
|
|
<!-- <icon-svg icon-class="eye"/>-->
|
|
|
|
|
<!-- </i>-->
|
|
|
|
|
<!-- </el-input>-->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item
|
|
|
|
|
prop="verificationCode"
|
|
|
|
|
class="item"
|
|
|
|
|
style="background-color: white"
|
|
|
|
|
>
|
|
|
|
|
<Verify
|
|
|
|
|
ref="checkV"
|
|
|
|
|
:showButton="false"
|
|
|
|
|
:barSize="{ width: '305px', height: '37px' }"
|
|
|
|
|
:vOffset="5"
|
|
|
|
|
@success="verifyAlert('success')"
|
|
|
|
|
@error="verifyAlert('error')"
|
|
|
|
|
:type="3"
|
|
|
|
|
></Verify>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div style="text-align: center; margin-top: 15px">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="width: 60%; margin-bottom: 30px"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@click.native="handleLogin()"
|
|
|
|
|
>登录
|
|
|
|
|
</el-button>
|
|
|
|
|
<div style="width: 100%;">
|
|
|
|
|
<Verify
|
|
|
|
|
ref="checkV"
|
|
|
|
|
:showButton="false"
|
|
|
|
|
:barSize="{ width: '100%', height: '50px' }"
|
|
|
|
|
:vOffset="5"
|
|
|
|
|
@success="verifyAlert('success')"
|
|
|
|
|
@error="verifyAlert('error')"
|
|
|
|
|
:type="3"
|
|
|
|
|
class="verify-component"
|
|
|
|
|
style="width: 100% !important;"
|
|
|
|
|
></Verify>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<div class="login-button-container">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
class="login-button"
|
|
|
|
|
:loading="loading"
|
|
|
|
|
@click.native="handleLogin()"
|
|
|
|
|
>登录
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="85%" top="5vh"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:show-close="false"
|
|
|
|
|
:close-on-press-escape="false">
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="修改密码"
|
|
|
|
|
:visible.sync="passwordFormVisible"
|
|
|
|
|
width="400px"
|
|
|
|
|
top="20vh"
|
|
|
|
|
:close-on-click-modal="false"
|
|
|
|
|
:show-close="false"
|
|
|
|
|
:close-on-press-escape="false"
|
|
|
|
|
class="password-dialog"
|
|
|
|
|
>
|
|
|
|
|
<el-form :model="passwordFormData" :rules="passwordFormDataRules" ref="passwordFormData">
|
|
|
|
|
<el-form-item label="原始密码" prop="old_password">
|
|
|
|
|
<el-input type="password" v-model="passwordFormData.oldPassword" auto-complete="off"></el-input>
|
|
|
|
|
@ -126,22 +127,12 @@
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<!-- <el-button @click.native="passwordFormVisible = !passwordFormVisible">取消</el-button> -->
|
|
|
|
|
<el-button type="primary" @click.native="passwdSubmit()" :loading="passwordLoading">提交
|
|
|
|
|
</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
style="
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 50%;
|
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
color: white;
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div class="footer-info">
|
|
|
|
|
开发单位：厦门维衍科技有限公司 技术支持：17705920868
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -463,128 +454,365 @@ export default {
|
|
|
|
|
<style type="text/scss" lang="scss">
|
|
|
|
|
@import "../assets/styles/mixin";
|
|
|
|
|
|
|
|
|
|
$bg: #2d3a4b;
|
|
|
|
|
$dark_gray: #889aa4;
|
|
|
|
|
$light_gray: #eee;
|
|
|
|
|
// Color variables
|
|
|
|
|
$primary-color: #3c85ee;
|
|
|
|
|
$text-dark: #2c3e50;
|
|
|
|
|
$text-light: #f5f5f5;
|
|
|
|
|
$card-background: rgba(255, 255, 255, 0.9);
|
|
|
|
|
$card-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
|
|
|
|
|
$accent-color: #4cd3c2;
|
|
|
|
|
$error-color: #f56c6c;
|
|
|
|
|
$success-color: #67c23a;
|
|
|
|
|
|
|
|
|
|
.login-container {
|
|
|
|
|
@include relative;
|
|
|
|
|
background-color: white;
|
|
|
|
|
background-image: url("../assets/login.jpg");
|
|
|
|
|
background-size: 100vw 100vh;
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
input:-webkit-autofill,
|
|
|
|
|
input:-webkit-autofill:hover,
|
|
|
|
|
input:-webkit-autofill:focus,
|
|
|
|
|
input:-webkit-autofill:active {
|
|
|
|
|
-webkit-transition-delay: 99999s;
|
|
|
|
|
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
|
|
|
|
|
background-image: url("../assets/login.png");
|
|
|
|
|
background-size: cover;
|
|
|
|
|
background-position: center;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
|
|
&::before {
|
|
|
|
|
content: '';
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
background: linear-gradient(15deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 100%);
|
|
|
|
|
z-index: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.split-layout {
|
|
|
|
|
position: relative;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
display: flex;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
|
|
.left-panel {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-panel {
|
|
|
|
|
width: 30%;
|
|
|
|
|
min-width: 420px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
|
|
|
backdrop-filter: blur(10px);
|
|
|
|
|
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
|
|
|
|
|
|
|
|
|
|
.login-panel {
|
|
|
|
|
width: 85%;
|
|
|
|
|
padding: 50px 0;
|
|
|
|
|
animation: slideInRight 0.8s ease-out;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header-section {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
.logo-section {
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
|
|
.logo-image {
|
|
|
|
|
width: 120px;
|
|
|
|
|
height: auto;
|
|
|
|
|
object-fit: contain;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title-section {
|
|
|
|
|
.system-title {
|
|
|
|
|
font-size: 28px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.system-subtitle {
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-heading {
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
color: white;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
width: 20em;
|
|
|
|
|
margin-left: 5em;
|
|
|
|
|
@keyframes slideInRight {
|
|
|
|
|
from {
|
|
|
|
|
opacity: 0;
|
|
|
|
|
transform: translateX(40px);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
transform: translateX(0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.form-item {
|
|
|
|
|
margin-bottom: 25px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-flow: row;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__inner {
|
|
|
|
|
height: 45px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
padding-left: 45px;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.15);
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
|
|
&::placeholder {
|
|
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
|
border-color: $primary-color;
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.25);
|
|
|
|
|
box-shadow: 0 0 0 2px rgba($primary-color, 0.2);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input__icon {
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
input {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: 0;
|
|
|
|
|
-webkit-appearance: none;
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
padding: 0.46rem 0.0666rem 0.16rem 0.2rem;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
height: 100%;
|
|
|
|
|
.verify-section {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
margin-bottom: 30px;
|
|
|
|
|
|
|
|
|
|
.el-form-item__content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: block !important;
|
|
|
|
|
|
|
|
|
|
/* Override verify component styles to fix compression */
|
|
|
|
|
.verify-component {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-input {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tips {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin-bottom: 0.13333rem;
|
|
|
|
|
.login-container .verify-subblock,
|
|
|
|
|
.login-container .right-panel .verify-subblock {
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.svg-container {
|
|
|
|
|
padding: 0.08rem 0.0666rem 0.08rem 0.2rem;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
|
|
&_login {
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
.password-eye {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
color: rgba(255, 255, 255, 0.7);
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
line-height: 45px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
color: #2d3a4b;
|
|
|
|
|
margin: 0 auto 0.5333rem auto;
|
|
|
|
|
text-align: center;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
margin-bottom: 50px;
|
|
|
|
|
.login-button-container {
|
|
|
|
|
margin-top: 35px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.textTitle {
|
|
|
|
|
width: 50%;
|
|
|
|
|
font-size: 45px;
|
|
|
|
|
.login-button {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 45px;
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
background: $primary-color;
|
|
|
|
|
border: none;
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
|
|
|
|
&:hover, &:focus {
|
|
|
|
|
background: #2a70d8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.toptitle {
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
.footer-info {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 20px;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-top: 132px;
|
|
|
|
|
margin-bottom: -10px;
|
|
|
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.topSubtitle {
|
|
|
|
|
color: #fcd38b;
|
|
|
|
|
text-align: center;
|
|
|
|
|
// Password dialog styles
|
|
|
|
|
.password-dialog {
|
|
|
|
|
.el-dialog {
|
|
|
|
|
border-radius: 12px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.login-form {
|
|
|
|
|
//@include fxied-center;
|
|
|
|
|
margin: 0px 100px auto auto;
|
|
|
|
|
width: 50em;
|
|
|
|
|
/*background-color: silver;*/
|
|
|
|
|
/*background: #fff;*/
|
|
|
|
|
padding: 10em 10em 15em 10em;
|
|
|
|
|
|
|
|
|
|
.el-dialog__header {
|
|
|
|
|
background-color: $primary-color;
|
|
|
|
|
padding: 15px 20px;
|
|
|
|
|
|
|
|
|
|
.el-dialog__title {
|
|
|
|
|
color: white;
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-dialog__body {
|
|
|
|
|
padding: 30px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item__label {
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-button--primary {
|
|
|
|
|
background-color: $primary-color;
|
|
|
|
|
border-color: $primary-color;
|
|
|
|
|
width: 120px;
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
background-color: #2a70d8;
|
|
|
|
|
border-color: #2a70d8;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Fix for Element UI components
|
|
|
|
|
.el-form-item.is-error .el-input__inner {
|
|
|
|
|
border-color: $error-color;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-form-item {
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
|
|
background: rgba(0, 0, 0, 0.1);
|
|
|
|
|
border-radius: 0.0666rem;
|
|
|
|
|
color: #454545;
|
|
|
|
|
// Responsive adjustments
|
|
|
|
|
@media (max-width: 1400px) {
|
|
|
|
|
.login-container {
|
|
|
|
|
.split-layout {
|
|
|
|
|
.right-panel {
|
|
|
|
|
width: 35%;
|
|
|
|
|
min-width: 400px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.show-pwd {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 0.1333rem;
|
|
|
|
|
top: 0.09333rem;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
color: $dark_gray;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
.login-container {
|
|
|
|
|
.split-layout {
|
|
|
|
|
.right-panel {
|
|
|
|
|
width: 40%;
|
|
|
|
|
min-width: 380px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.thirdparty-button {
|
|
|
|
|
/*position: absolute;*/
|
|
|
|
|
/*right: .4666rem;*/
|
|
|
|
|
/*bottom: .37333rem;*/
|
|
|
|
|
@media (max-width: 992px) {
|
|
|
|
|
.login-container {
|
|
|
|
|
.split-layout {
|
|
|
|
|
.right-panel {
|
|
|
|
|
width: 45%;
|
|
|
|
|
min-width: 360px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-card {
|
|
|
|
|
margin-top: -20px;
|
|
|
|
|
height: 550px;
|
|
|
|
|
width: 490px;
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.login-container {
|
|
|
|
|
.split-layout {
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
.left-panel {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.right-panel {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
min-width: auto;
|
|
|
|
|
|
|
|
|
|
.login-panel {
|
|
|
|
|
width: 90%;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
padding: 40px 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.verify-section ::v-deep .verify-slider {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-section ::v-deep .verify-bar-area {
|
|
|
|
|
width: 100% !important;
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
line-height: 50px !important;
|
|
|
|
|
background: rgba(245, 236, 236, 0.15) !important;
|
|
|
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
|
|
|
border-radius: 8px !important;
|
|
|
|
|
color: rgba(255, 255, 255, 0.8) !important;
|
|
|
|
|
transition: all 0.3s ease !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-section ::v-deep .verify-left-bar {
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
background: rgba(226, 234, 245, 0.3) !important;
|
|
|
|
|
border-radius: 8px 0 0 8px !important;
|
|
|
|
|
transition: all 0.3s ease !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-section ::v-deep .verify-move-block {
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
line-height: 50px !important;
|
|
|
|
|
background: #e6edf7 !important;
|
|
|
|
|
box-shadow: 0 0 15px rgba(60, 133, 238, 0.3) !important;
|
|
|
|
|
border-radius: 8px !important;
|
|
|
|
|
color: white !important;
|
|
|
|
|
transition: all 0.3s ease !important;
|
|
|
|
|
cursor: pointer !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-section ::v-deep .verify-move-block:hover {
|
|
|
|
|
background: #2a70d8 !important;
|
|
|
|
|
box-shadow: 0 0 20px rgba(60, 133, 238, 0.4) !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.verify-section ::v-deep .verify-subblock {
|
|
|
|
|
height: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
yewj
6 days ago