834 lines
25 KiB
Vue
834 lines
25 KiB
Vue
<template>
|
||
<div class="register">
|
||
<div class="main">
|
||
<div class="container a-container">
|
||
<el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="form" id="a-form">
|
||
<h2 class="form_title title">{{ $t('register.974236-0') }}</h2>
|
||
<el-form-item prop="username">
|
||
<div class="username">
|
||
<i class="el-icon-user icon"></i>
|
||
<input class="form__input" v-model="registerForm.username" auto-complete="off" type="text" :placeholder="$t('login.989807-4')" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="phonenumber" :class="{ 'is-null': isacount }">
|
||
<div class="telphone">
|
||
<svg-icon icon-class="phone" class="icon" />
|
||
<input v-model="registerForm.phonenumber" class="form__input" type="text" auto-complete="off" :placeholder="$t('register.974236-2')" />
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="password" :class="{ 'is-null': isphone }">
|
||
<div class="password">
|
||
<svg-icon icon-class="password" class="icon left" />
|
||
<input class="form__input" v-model="registerForm.password" auto-complete="off" :type="pwdtype" :placeholder="$t('login.989807-5')" @@keyup.enter="handleRegister" />
|
||
<span class="el-icon-view icon right" @click="changepwdtype()"></span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item prop="confirmPassword" :class="{ 'is-null': ispwd }">
|
||
<div class="password">
|
||
<svg-icon icon-class="password" class="icon left" />
|
||
<input class="form__input" v-model="registerForm.confirmPassword" auto-complete="off" :type="cpwdtype" :placeholder="$t('register.974236-3')" @@keyup.enter="handleRegister" />
|
||
<span class="el-icon-view icon right" @click="changecpwdtype()"></span>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item v-if="captchaOnOff" prop="code" :class="{ 'is-null': iscomfirmpwd }">
|
||
<div style="width: 350px" class="check">
|
||
<svg-icon icon-class="auth-code" class="icon" />
|
||
<input v-model="registerForm.code" auto-complete="off" class="form__input__code" type="text" :placeholder="$t('login.989807-6')" />
|
||
<div class="login-code">
|
||
<img :src="codeUrl" @click="getCode" style="float: right" />
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item :class="{ 'is-null': true }">
|
||
<div style="display: flex; text-align: center; justify-content: center">
|
||
<el-link style="float: left; color: #a0a5a8; font-weight: normal" href="https://fastbee.cn/" :underline="false" target="_blank">{{ $t('register.974236-7') }}</el-link>
|
||
<!-- 隐藏查看文档入口 -->
|
||
<!-- <el-link style="float: left; color: #a0a5a8; font-weight: normal; margin-left: 20px" href="https://fastbee.cn/doc" :underline="false" target="_blank">{{ $t('register.974236-8') }}</el-link> -->
|
||
<router-link style="float: left; color: #a0a5a8; font-weight: normal; margin-left: 20px" :to="{ path: '/login', query: this.$route.query }">{{ $t('register.974236-9') }}</router-link>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-button class="form__button button submit" v-if="!bindAccount" :loading="loading" type="primary" @click.native.prevent="handleRegister">
|
||
<span v-if="!loading">{{ $t('register.974236-4') }}</span>
|
||
<span v-else>{{ $t('register.974236-5') }}</span>
|
||
</el-button>
|
||
<el-button v-else :loading="loading" class="form__button button" @click.native.prevent="handleRegister">
|
||
<span v-if="!loading">{{ $t('register.974236-6') }}</span>
|
||
<span v-else>{{ $t('register.974236-10') }}</span>
|
||
</el-button>
|
||
</el-form>
|
||
</div>
|
||
|
||
<div class="switch" id="switch-cnt">
|
||
<div :class="{ switch__circle: true }"></div>
|
||
<div class="switch__container" id="switch-c1">
|
||
<div style="display: flex; align-items: center">
|
||
<img src="../assets/logo/yack.png" alt="logo" style="width: 60px" />
|
||
<h2 class="switch__title title" style="margin-left: 10px">{{ $t('register.974236-1') }}</h2>
|
||
</div>
|
||
<p class="switch__description description">{{ $t('register.974236-11') }}</p>
|
||
<img src="../assets/images/login3.jpeg" alt="logo" style="width: 220px; height: 220px" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 底部 -->
|
||
<div class="el-register-footer">
|
||
<span>
|
||
Copyright © 2023
|
||
<a target="_blank" href="http://fastbee.cn">FastBee</a>
|
||
All Rights Reserved.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import 'element-ui/lib/theme-chalk/display.css';
|
||
import logo from '@/assets/logo/yack.png';
|
||
import { getCodeImg, checkBindId, bindRegister } from '@/api/login';
|
||
import { register } from '@/api/iot/tool';
|
||
|
||
export default {
|
||
name: 'Register',
|
||
data() {
|
||
const equalToPassword = (rule, value, callback) => {
|
||
if (this.registerForm.password !== value) {
|
||
callback(new Error(this.$t('register.974236-12')));
|
||
} else {
|
||
callback();
|
||
}
|
||
};
|
||
return {
|
||
isacount: false,
|
||
ispwd: false,
|
||
isphone: false,
|
||
iscode: false,
|
||
iscomfirmpwd: false,
|
||
//控制密码可见
|
||
pwdtype: 'password',
|
||
//控制确认密码可见
|
||
cpwdtype: 'password',
|
||
|
||
logo,
|
||
codeUrl: '',
|
||
registerForm: {
|
||
username: '',
|
||
phonenumber: '',
|
||
password: '',
|
||
confirmPassword: '',
|
||
code: '',
|
||
uuid: '',
|
||
bindId: '',
|
||
sourceType: 1,
|
||
},
|
||
registerRules: {
|
||
username: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: this.$t('login.989807-20'),
|
||
},
|
||
{
|
||
min: 2,
|
||
max: 20,
|
||
message: this.$t('register.974236-13'),
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
phonenumber: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: this.$t('register.974236-14'),
|
||
},
|
||
{
|
||
min: 11,
|
||
max: 11,
|
||
message: this.$t('register.974236-15'),
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
password: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: this.$t('login.989807-21'),
|
||
},
|
||
{
|
||
min: 5,
|
||
max: 20,
|
||
message: this.$t('register.974236-16'),
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
trigger: 'blur',
|
||
validator: (rule, value, callback) => {
|
||
// 两种及以上
|
||
var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/;
|
||
if (!passwordreg.test(value)) {
|
||
callback(new Error(this.$t('system.dept.780956-30')));
|
||
}
|
||
// 四种
|
||
// var passwordreg = /(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])/
|
||
// if (!passwordreg.test(value)) {
|
||
// callback(new Error('密码必须包含大写字母、小写字母、数字、特殊符号'))
|
||
// }
|
||
else {
|
||
callback();
|
||
}
|
||
},
|
||
},
|
||
],
|
||
confirmPassword: [
|
||
{
|
||
required: true,
|
||
trigger: 'blur',
|
||
message: this.$t('register.974236-17'),
|
||
},
|
||
{
|
||
required: true,
|
||
validator: equalToPassword,
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
code: [
|
||
{
|
||
required: true,
|
||
trigger: 'change',
|
||
message: this.$t('login.989807-22'),
|
||
},
|
||
],
|
||
},
|
||
loading: false,
|
||
captchaOnOff: true,
|
||
bindAccount: false,
|
||
};
|
||
},
|
||
created() {
|
||
this.checkBind();
|
||
this.getCode();
|
||
},
|
||
methods: {
|
||
changepwdtype() {
|
||
this.pwdtype == 'password' ? (this.pwdtype = 'text') : (this.pwdtype = 'password');
|
||
},
|
||
changecpwdtype() {
|
||
this.cpwdtype == 'password' ? (this.cpwdtype = 'text') : (this.cpwdtype = 'password');
|
||
},
|
||
checkBind() {
|
||
const query = this.$route.query;
|
||
const bindId = query.bindId;
|
||
if (bindId === undefined || bindId === null) {
|
||
this.bindAccount = false;
|
||
} else {
|
||
this.bindAccount = true;
|
||
checkBindId(bindId).then((res) => {
|
||
this.bindAccount = res.bindAccount === undefined ? true : res.bindAccount;
|
||
if (this.bindAccount) {
|
||
this.registerForm.bindId = bindId;
|
||
} else {
|
||
this.registerForm.bindId = '';
|
||
this.$router.push({
|
||
query: {},
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
getCode() {
|
||
getCodeImg().then((res) => {
|
||
this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
||
if (this.captchaOnOff) {
|
||
this.codeUrl = 'data:image/gif;base64,' + res.img;
|
||
this.registerForm.uuid = res.uuid;
|
||
}
|
||
});
|
||
},
|
||
qqLogin() {
|
||
window.location.href = 'http://localhost:8080/auth/render/qq';
|
||
},
|
||
authLogin() {
|
||
this.$alert('第三方登录正在集成中...', '提示消息', {
|
||
confirmButtonText: '确定',
|
||
callback: (action) => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: `action: ${action}`,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
handleRegister() {
|
||
// 校验用户名：是否符合长度要求（2-20字符）
|
||
this.isacount = !(this.registerRules.username[0].required && this.registerForm.username.length >= 2 && this.registerForm.username.length <= 20);
|
||
|
||
// 校验电话号码：是否符合长度要求（11位）
|
||
this.isphone = !(this.registerRules.phonenumber[0].required && this.registerForm.phonenumber.length === 11);
|
||
|
||
// 校验密码：是否符合长度要求（5-20字符）
|
||
this.ispwd = !(this.registerRules.password.required && this.registerForm.password.length >= 5 && this.registerForm.password.length <= 20);
|
||
// 校验确认密码：是否与密码相等
|
||
this.iscomfirmpwd = !(this.registerRules.confirmPassword[0].required && this.registerForm.confirmPassword !== '' && this.registerForm.confirmPassword === this.registerForm.password);
|
||
this.$refs.registerForm.validate((valid) => {
|
||
if (valid) {
|
||
this.loading = true;
|
||
if (this.bindAccount) {
|
||
bindRegister(this.registerForm)
|
||
.then((res) => {
|
||
this.innerRegister(res);
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
if (this.captchaOnOff) {
|
||
this.getCode();
|
||
}
|
||
});
|
||
} else {
|
||
register(this.registerForm)
|
||
.then((res) => {
|
||
this.innerRegister(res);
|
||
})
|
||
.catch(() => {
|
||
this.loading = false;
|
||
if (this.captchaOnOff) {
|
||
this.getCode();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
},
|
||
innerRegister(res) {
|
||
const username = this.registerForm.username;
|
||
this.$alert("<font color='red'> " + this.$t('register.974236-18') + username + this.$t('register.974236-19') + ' </font>', this.$t('register.974236-20'), {
|
||
dangerouslyUseHTMLString: true,
|
||
type: 'success',
|
||
})
|
||
.then(() => {
|
||
this.$router.push('/login');
|
||
})
|
||
.catch(() => {});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
*,
|
||
*::after,
|
||
*::before {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
}
|
||
|
||
.register {
|
||
height: 100%;
|
||
overflow: auto;
|
||
width: 100%;
|
||
// height: 100vh;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-family: 'Montserrat', sans-serif;
|
||
font-size: 12px;
|
||
background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/bg.png');
|
||
color: #a0a5a8;
|
||
|
||
.main {
|
||
position: relative;
|
||
width: 1100px;
|
||
// min-width: 1100px;
|
||
// min-height: 600px;
|
||
height: 600px;
|
||
padding: 25px;
|
||
background-color: #fff;
|
||
box-shadow: 10px 0 10px #d0d5dd;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 600px;
|
||
height: 100%;
|
||
padding: 25px;
|
||
background-color: #fff;
|
||
transition: 1.25s;
|
||
}
|
||
|
||
.form {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.username {
|
||
position: relative;
|
||
|
||
// margin-bottom: 1.5rem;
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0.5rem;
|
||
transform: translateY(-50%);
|
||
color: #888;
|
||
}
|
||
|
||
.form__input {
|
||
padding-left: 2rem;
|
||
/* 确保输入框内文本不会被图标遮挡 */
|
||
}
|
||
}
|
||
|
||
.is-null {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.password {
|
||
position: relative;
|
||
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
color: #888;
|
||
}
|
||
|
||
.icon.left {
|
||
left: 0.5rem;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.icon.right {
|
||
right: 0.5rem;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.form__input {
|
||
padding-left: 2rem;
|
||
/* 确保输入框内文本不会被左侧图标遮挡 */
|
||
padding-right: 2.5rem;
|
||
/* 确保输入框内文本不会被右侧图标遮挡 */
|
||
}
|
||
}
|
||
|
||
.check {
|
||
position: relative;
|
||
display: flex;
|
||
text-align: center;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
// margin-bottom: 1.5rem;
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0.5rem;
|
||
transform: translateY(-50%);
|
||
color: #888;
|
||
}
|
||
|
||
.form__input__code {
|
||
padding-left: 2rem;
|
||
/* 确保输入框内文本不会被图标遮挡 */
|
||
}
|
||
}
|
||
|
||
.remember {
|
||
width: 350px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.telphone {
|
||
position: relative;
|
||
|
||
// margin-bottom: 1.5rem;
|
||
.icon {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0.5rem;
|
||
transform: translateY(-50%);
|
||
color: #888;
|
||
}
|
||
|
||
.form__input {
|
||
padding-left: 2rem;
|
||
/* 确保输入框内文本不会被图标遮挡 */
|
||
}
|
||
}
|
||
|
||
.form__icon {
|
||
object-fit: contain;
|
||
width: 30px;
|
||
margin: 0 5px;
|
||
opacity: 0.5;
|
||
transition: 0.15s;
|
||
}
|
||
|
||
.form__icon:hover {
|
||
opacity: 1;
|
||
transition: 0.15s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form__input {
|
||
width: 350px;
|
||
height: 40px;
|
||
margin: 4px 0;
|
||
padding-left: 25px;
|
||
font-size: 13px;
|
||
letter-spacing: 0.15px;
|
||
border: none;
|
||
outline: none;
|
||
font-family: 'Montserrat', sans-serif;
|
||
background-color: #fff;
|
||
transition: 0.25s ease;
|
||
border-radius: 8px;
|
||
box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
|
||
}
|
||
|
||
.form__input__code {
|
||
width: 66%;
|
||
height: 40px;
|
||
margin: 4px 0;
|
||
padding-left: 25px;
|
||
font-size: 13px;
|
||
letter-spacing: 0.15px;
|
||
border: none;
|
||
outline: none;
|
||
font-family: 'Montserrat', sans-serif;
|
||
background-color: #fff;
|
||
transition: 0.25s ease;
|
||
border-radius: 8px;
|
||
box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
|
||
}
|
||
|
||
.form__input:focus {
|
||
box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
|
||
}
|
||
|
||
.form__input__code:focus {
|
||
box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
|
||
}
|
||
|
||
.form__span {
|
||
font-size: 15px;
|
||
margin-top: 5px;
|
||
margin-bottom: 12px;
|
||
color: #0f73ee9e;
|
||
}
|
||
|
||
.form__link {
|
||
display: none;
|
||
color: #181818;
|
||
font-size: 15px;
|
||
margin-top: 25px;
|
||
border-bottom: 1px solid #a0a5a8;
|
||
line-height: 2;
|
||
}
|
||
|
||
.title {
|
||
font-size: 34px;
|
||
font-weight: 700;
|
||
line-height: 3;
|
||
color: #181818;
|
||
}
|
||
|
||
.description {
|
||
font-size: 14px;
|
||
letter-spacing: 0.25px;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.button {
|
||
width: 180px;
|
||
height: 50px;
|
||
border-radius: 25px;
|
||
margin-top: 20px;
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
letter-spacing: 1.15px;
|
||
background-color: #0f73ee;
|
||
color: #f9f9f9;
|
||
box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
|
||
border: none;
|
||
outline: none;
|
||
}
|
||
|
||
/**/
|
||
.a-container {
|
||
z-index: 100;
|
||
left: calc(100% - 600px);
|
||
}
|
||
|
||
.switch {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 500px;
|
||
padding: 50px;
|
||
z-index: 200;
|
||
transition: 1.25s;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.switch__circle {
|
||
position: absolute;
|
||
width: 450px;
|
||
height: 450px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
box-shadow: inset 8px 8px 12px #dde6f4, inset -8px -8px 12px #f9f9f9;
|
||
bottom: -60%;
|
||
left: -60%;
|
||
transition: 1.25s;
|
||
}
|
||
|
||
.switch__circle--t {
|
||
top: -30%;
|
||
left: 60%;
|
||
width: 300px;
|
||
height: 300px;
|
||
}
|
||
|
||
.switch__container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
width: 400px;
|
||
padding: 50px 55px;
|
||
transition: 1.25s;
|
||
}
|
||
|
||
/**/
|
||
|
||
.tabs {
|
||
width: 400px;
|
||
border-bottom: none;
|
||
// border: solid white 1px;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.tabs ::v-deep .el-tabs__nav {
|
||
background-color: white;
|
||
box-shadow: none !important;
|
||
text-decoration: none;
|
||
/* 设置导航栏背景颜色 */
|
||
}
|
||
|
||
/*去掉切换时el-tab-pane底部的蓝色下划线*/
|
||
::v-deep .el-tabs__active-bar {
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
/*去掉tabs底部的下划线*/
|
||
::v-deep .el-tabs__nav-wrap::after {
|
||
position: static !important;
|
||
}
|
||
|
||
.tabs ::v-deep .el-tabs__item {
|
||
font-size: 20px;
|
||
/* 设置字体大小 */
|
||
border: none;
|
||
/* 去除默认边框 */
|
||
}
|
||
|
||
.bindAccountTitle {
|
||
margin: 0px auto 30px auto;
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.tabs-login {
|
||
margin: 20px auto 0 auto;
|
||
z-index: 1000;
|
||
max-width: 350px;
|
||
}
|
||
|
||
.login-form {
|
||
margin: 10px 0 0 0;
|
||
z-index: 1000;
|
||
max-width: 350px;
|
||
|
||
input {
|
||
height: 38px;
|
||
background-color: #f1f1f1;
|
||
color: #666;
|
||
}
|
||
|
||
.input-icon {
|
||
height: 39px;
|
||
width: 14px;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.login-code {
|
||
width: 34%;
|
||
float: right;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
vertical-align: middle;
|
||
border-radius: 3px;
|
||
height: 38px;
|
||
}
|
||
}
|
||
|
||
.el-register-footer {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
color: #333;
|
||
font-family: Arial;
|
||
font-size: 12px;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.alert-box-wrap {
|
||
border: 1px solid #f78e21;
|
||
|
||
.alert-message-wrap {
|
||
font-size: 14px;
|
||
font-family: '微软雅黑';
|
||
color: rgba(197, 41, 41, 0.856);
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.main {
|
||
transform: scale(0.9);
|
||
|
||
.switch {
|
||
width: 40%;
|
||
}
|
||
|
||
.container {
|
||
width: 60%;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1000px) {
|
||
.main {
|
||
transform: scale(0.8);
|
||
|
||
.switch {
|
||
width: 40%;
|
||
}
|
||
|
||
.container {
|
||
width: 60%;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.main {
|
||
transform: scale(0.9);
|
||
display: flex;
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
height: 100vh;
|
||
/* 设置容器高度为视口高度，实现垂直居中 */
|
||
width: 600px;
|
||
|
||
.a-container {
|
||
position: absolute;
|
||
z-index: 100;
|
||
left: 50%;
|
||
/* 将元素的左边缘移动到父容器的水平中心 */
|
||
transform: translateX(-50%);
|
||
/* 通过向左平移自身宽度的一半来实现水平居中 */
|
||
}
|
||
|
||
.switch {
|
||
display: none;
|
||
}
|
||
|
||
.form__link {
|
||
display: block;
|
||
color: #181818;
|
||
font-size: 15px;
|
||
margin-top: 25px;
|
||
border-bottom: 1px solid #a0a5a8;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.register {
|
||
background: repeating-linear-gradient(to bottom right, #cee3fc 20%, #a8c7ed87 50%, #ffffffe7 50%, #ffffffc2 80%), url('../assets/images/login.png');
|
||
|
||
.main {
|
||
transform: scale(0.9);
|
||
display: flex;
|
||
justify-content: center;
|
||
/* 水平居中 */
|
||
align-items: center;
|
||
/* 垂直居中 */
|
||
height: 75vh;
|
||
width: 100vh;
|
||
box-shadow: 10px 0 10px #5c7aaa;
|
||
|
||
.a-container {
|
||
//background: linear-gradient(to bottom, #0f73ee 25%, #ffffff 25%);
|
||
position: absolute;
|
||
width: 100%;
|
||
z-index: 100;
|
||
left: 50%;
|
||
/* 将元素的左边缘移动到父容器的水平中心 */
|
||
transform: translateX(-50%);
|
||
/* 通过向左平移自身宽度的一半来实现水平居中 */
|
||
}
|
||
|
||
.switch {
|
||
display: none;
|
||
}
|
||
|
||
.form__link {
|
||
display: block;
|
||
color: #181818;
|
||
font-size: 15px;
|
||
margin-top: 25px;
|
||
border-bottom: 1px solid #a0a5a8;
|
||
line-height: 2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|