|
|
@@ -8,23 +8,65 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-box">
|
|
|
- <p class="form-title-p">短信登录</p>
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
+ <div class="form-title-box">
|
|
|
+ <p class="form-title-null"></p>
|
|
|
+ <p class="form-title-p" :class="loginType==1?'form-title-p-color':''" @click="loginTypeClick(1)">密码登录</p>
|
|
|
+ <p class="form-title-p" :class="loginType==2?'form-title-p-color':''" @click="loginTypeClick(2)">短信登录</p>
|
|
|
+ <p class="form-title-null"></p>
|
|
|
+ </div>
|
|
|
+ <el-form ref="loginForm"v-show="loginType == 1"
|
|
|
+ :model="loginForm" :rules="loginRules" class="login-form-one">
|
|
|
+ <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
|
|
|
+ <img src="@/assets/ZDimages/login/icon_dl_zh.png" alt="">
|
|
|
+ <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin(1)">
|
|
|
+ </div>
|
|
|
+ <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
|
|
|
+ <img src="@/assets/ZDimages/login/icon_dl_mm.png" alt="">
|
|
|
+ <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin">
|
|
|
+ </div>
|
|
|
+ <p class="text-p">{{text}}</p>
|
|
|
+ <div class="code-input-box">
|
|
|
+ <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
|
|
|
+ <img src="@/assets/ZDimages/login/icon_dl_yzm.png" alt="">
|
|
|
+ <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin(1)">
|
|
|
+ </div>
|
|
|
+ <div class="login-code">
|
|
|
+ <img :src="codeUrl" @click="getCodeOne" class="login-code-img"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ class="form-button-p"
|
|
|
+ :loading="loading"
|
|
|
+ size="medium"
|
|
|
+ height="50"
|
|
|
+ @click.native.prevent="handleLogin(1)"
|
|
|
+ >
|
|
|
+ <span v-if="!loading">登 录</span>
|
|
|
+ <span v-else>登 录 中...</span>
|
|
|
+ </el-button>
|
|
|
+ <div style="float: right;" v-if="register">
|
|
|
+ <router-link class="link-type" :to="'/register'">立即注册</router-link>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <el-form ref="loginFormTwo" v-show="loginType == 2"
|
|
|
+ :model="loginFormTwo" :rules="loginRulesTwo" class="login-form-two">
|
|
|
<div class="username-input-box">
|
|
|
<img src="@/assets/ZDimages/medicUniversity-3_1/user.png" alt="">
|
|
|
<p>
|
|
|
<span>+86</span>
|
|
|
<span>丨</span>
|
|
|
</p>
|
|
|
- <input type="text" v-model="loginForm.username" placeholder="请输入联系方式"
|
|
|
+ <input type="text" v-model="loginFormTwo.username" placeholder="请输入联系方式"
|
|
|
onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
|
|
|
maxlength="11">
|
|
|
</div>
|
|
|
- <p class="text-p">{{text}}</p>
|
|
|
+ <p class="text-p">{{textTwo}}</p>
|
|
|
<div class="code-input-box">
|
|
|
<div class="code-input-left-box">
|
|
|
<img src="@/assets/ZDimages/medicUniversity-3_1/code.png" alt="">
|
|
|
- <input type="text" v-model="loginForm.password" placeholder="请输入验证码"
|
|
|
+ <input type="text" v-model="loginFormTwo.password" placeholder="请输入验证码"
|
|
|
onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
|
|
|
maxlength="6">
|
|
|
</div>
|
|
|
@@ -39,7 +81,7 @@
|
|
|
:loading="loading"
|
|
|
size="medium"
|
|
|
height="50"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
+ @click.native.prevent="handleLogin(2)"
|
|
|
>
|
|
|
<span v-if="!loading">登 录</span>
|
|
|
<span v-else>登 录 中...</span>
|
|
|
@@ -52,6 +94,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import Cookies from "js-cookie";
|
|
|
+ import { encrypt, decrypt } from '@/utils/jsencrypt'
|
|
|
+ import store from '@/store'
|
|
|
import { getCodeImg,initPage,sendCode,phoneLogin } from "@/api/login";
|
|
|
import { getLogoInfo } from "@/api/system/publicConfig";
|
|
|
export default {
|
|
|
@@ -59,13 +104,38 @@
|
|
|
data() {
|
|
|
return {
|
|
|
loading:false,
|
|
|
- loginForm:{
|
|
|
+ loginType:1,
|
|
|
+ //账号登录
|
|
|
+ loginForm: {
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ rememberMe: false,
|
|
|
+ code: "",
|
|
|
+ uuid: "",
|
|
|
+ },
|
|
|
+ text:"",
|
|
|
+ userTypeCode:"",
|
|
|
+ codeUrl: "",
|
|
|
+ captchaOnOff: true,
|
|
|
+ register: false,
|
|
|
+ redirect: undefined,
|
|
|
+ loginRules: {
|
|
|
+ // username: [
|
|
|
+ // { required: true, trigger: "blur", message: "请输入您的账号" }
|
|
|
+ // ],
|
|
|
+ // password: [
|
|
|
+ // { required: true, trigger: "blur", message: "请输入您的密码" }
|
|
|
+ // ],
|
|
|
+ // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
|
|
|
+ },
|
|
|
+ //手机登录
|
|
|
+ loginFormTwo:{
|
|
|
username:"",
|
|
|
password:"",
|
|
|
},
|
|
|
- text:"",
|
|
|
+ textTwo:"",
|
|
|
rectangleLogo:localStorage.getItem('rectangleLogo'),
|
|
|
- loginRules:{
|
|
|
+ loginRulesTwo:{
|
|
|
username: [
|
|
|
{ required: true, message: "请输入手机号码", trigger: "blur" },
|
|
|
{ required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
|
|
|
@@ -80,25 +150,61 @@
|
|
|
codeNum:"",
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function(route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
created(){
|
|
|
-
|
|
|
+ localStorage.setItem('windowHref',window.location.href)
|
|
|
+ this.getCodeOne();
|
|
|
+ this.getCookie();
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getLogoInfo();
|
|
|
this.initPage();
|
|
|
},
|
|
|
methods: {
|
|
|
+ /***************************************账号登录部分***************************************/
|
|
|
+ getCodeOne() {
|
|
|
+ getCodeImg().then(res => {
|
|
|
+ this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
|
|
|
+ if (this.captchaOnOff) {
|
|
|
+ this.codeUrl = "data:image/gif;base64," + res.img;
|
|
|
+ this.loginForm.uuid = res.uuid;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCookie() {
|
|
|
+ const username = Cookies.get("username");
|
|
|
+ const password = Cookies.get("password");
|
|
|
+ const rememberMe = Cookies.get('rememberMe')
|
|
|
+ this.loginForm = {
|
|
|
+ username: username === undefined ? this.loginForm.username : username,
|
|
|
+ password: password === undefined ? this.loginForm.password : decrypt(password),
|
|
|
+ rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
|
|
|
+ };
|
|
|
+ },
|
|
|
+ /***************************************手机号登录部分***************************************/
|
|
|
+ loginTypeClick(type){
|
|
|
+ if(type!=this.loginType){
|
|
|
+ this.loginType = type;
|
|
|
+ }
|
|
|
+ },
|
|
|
getCode(){
|
|
|
- if(this.checkPhone(this.loginForm.username)){
|
|
|
+ if(this.checkPhone(this.loginFormTwo.username)){
|
|
|
if(this.codeButtonType){
|
|
|
- sendCode(this.loginForm.username).then(response => {
|
|
|
+ sendCode(this.loginFormTwo.username).then(response => {
|
|
|
if(response.code != 200){
|
|
|
- this.text = "*"+response.msg;
|
|
|
+ this.textTwo = "*"+response.msg;
|
|
|
if(response.code == 530){
|
|
|
- this.text = "*"+response.msg;
|
|
|
+ this.textTwo = "*"+response.msg;
|
|
|
}
|
|
|
}else {
|
|
|
- this.text = "";
|
|
|
+ this.textTwo = "";
|
|
|
// this.msgSuccess('发送成功');
|
|
|
this.codeButtonType = false;
|
|
|
this.time();
|
|
|
@@ -127,63 +233,84 @@
|
|
|
//手机号验证
|
|
|
checkPhone(value) {
|
|
|
if (!value) {
|
|
|
- this.text = '*手机号不能为空哦~';
|
|
|
+ this.textTwo = '*手机号不能为空哦~';
|
|
|
return false
|
|
|
} else {
|
|
|
const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
|
|
|
if (reg.test(value)) {
|
|
|
- this.text = '';
|
|
|
+ this.textTwo = '';
|
|
|
console.log("*0")
|
|
|
return true
|
|
|
} else {
|
|
|
- this.text = '*请输入正确的手机号码';
|
|
|
+ this.textTwo = '*请输入正确的手机号码';
|
|
|
return false
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
//登录
|
|
|
- handleLogin(){
|
|
|
+ handleLogin(type){
|
|
|
let self = this;
|
|
|
- if(this.checkPhone(this.loginForm.username)){
|
|
|
- if(!this.loginForm.password){
|
|
|
- this.text = '*请输入正确的验证码';
|
|
|
+ if(type == 1){
|
|
|
+ if(this.loginForm.username.length<1){
|
|
|
+ this.text = "*请输入账号";
|
|
|
+ this.userTypeCode = "1";
|
|
|
+ return
|
|
|
+ }else if(this.loginForm.password.length<1){
|
|
|
+ this.text = "*请输入密码";
|
|
|
+ this.userTypeCode = "2";
|
|
|
+ return
|
|
|
+ }else if(!this.loginForm.code||this.loginForm.code.length<1){
|
|
|
+ this.text = "*请输入验证码";
|
|
|
+ this.userTypeCode = "3";
|
|
|
return
|
|
|
}
|
|
|
this.text = "";
|
|
|
+ this.userTypeCode = "";
|
|
|
this.$refs.loginForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
this.loading = true;
|
|
|
- this.loginForm.authType = 'mobile'
|
|
|
- this.$store.dispatch("LoginPhone", this.loginForm).then((res) => {
|
|
|
+ if (this.loginForm.rememberMe) {
|
|
|
+ Cookies.set("username", this.loginForm.username, { expires: 30 });
|
|
|
+ Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
|
|
|
+ Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
|
|
|
+ } else {
|
|
|
+ Cookies.remove("username");
|
|
|
+ Cookies.remove("password");
|
|
|
+ Cookies.remove('rememberMe');
|
|
|
+ }
|
|
|
+ this.$store.dispatch("Login", this.loginForm).then((res) => {
|
|
|
if(res.code != 200){
|
|
|
this.text = "*"+res.msg;
|
|
|
if(res.code == 530){
|
|
|
- this.text = "*"+res.msg;
|
|
|
+ this.userTypeCode = "4";
|
|
|
}else if(res.code == 503){
|
|
|
- this.text = "*"+res.msg;
|
|
|
+ this.userTypeCode = "5";
|
|
|
}
|
|
|
this.loading = false;
|
|
|
+ this.getCodeOne();
|
|
|
return
|
|
|
}
|
|
|
- // if(res.data.reset_password){
|
|
|
- // this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
|
|
|
- // confirmButtonText: "确定",
|
|
|
- // cancelButtonText: "取消",
|
|
|
- // type: "warning"
|
|
|
- // }).then(function() {
|
|
|
- // let routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
- // for(let i=0;i<routeData.length;i++){
|
|
|
- // if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
|
|
|
- // store.dispatch('settings/setPageName', routeData[i].meta.title)
|
|
|
- // self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
|
|
|
- // self.$router.push({ path: '/comprehensive/system/mine' });
|
|
|
- // break
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }).then(() => {
|
|
|
- // }).catch(() => {
|
|
|
- // });
|
|
|
- // }
|
|
|
+ if(res.data.reset_password){
|
|
|
+ this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ let routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
+ for(let i=0;i<routeData.length;i++){
|
|
|
+ if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
|
|
|
+ store.dispatch('settings/setPageName', routeData[i].meta.title)
|
|
|
+ self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
|
|
|
+ // self.$router.push({ path: '/mine' });
|
|
|
+ self.$router.push({ path: '/comprehensive/system/mine' });
|
|
|
+ // self.$router.push({ path: '/user/profile' });
|
|
|
+ break
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).then(() => {
|
|
|
+ }).catch(() => {
|
|
|
+ });
|
|
|
+ }
|
|
|
if(res.data.type){
|
|
|
localStorage.setItem('userType',res.data.type)
|
|
|
localStorage.setItem('userId',res.data.user_id)
|
|
|
@@ -191,47 +318,106 @@
|
|
|
localStorage.setItem('identityType',res.data.screen_type);
|
|
|
}
|
|
|
this.fullScreen();
|
|
|
- if(res.data.type == 22){
|
|
|
- this.$router.push({ path: this.redirect || "/comprehensive/system/mine" }).catch(()=>{});
|
|
|
- // let routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
- // for(let i=0;i<routeData.length;i++){
|
|
|
- // if(!routeData[i].alwaysShow&&!routeData[i].hidden){
|
|
|
- // let urlText = routeData[i].path;
|
|
|
- // this.$router.push({ path: urlText });
|
|
|
- // console.log("urlText1",urlText)
|
|
|
- // return
|
|
|
- // }else if (routeData[i].children){
|
|
|
- // for(let o=0;o<routeData[i].children.length;o++){
|
|
|
- // if(!routeData[i].children[o].alwaysShow&&!routeData[i].children[o].hidden){
|
|
|
- // let urlText = routeData[i].path + '/' + routeData[i].children[o].path;
|
|
|
- // this.$router.push({ path: urlText });
|
|
|
- // console.log("urlText2",urlText)
|
|
|
- // return
|
|
|
- // }else{
|
|
|
- // if(routeData[i].children[o].children){
|
|
|
- // for(let x=0;x<routeData[i].children[o].children.length;x++){
|
|
|
- // if(!routeData[i].children[o].children[x].alwaysShow&&!routeData[i].children[o].children[x].hidden){
|
|
|
- // let urlText = routeData[i].path + '/' + routeData[i].children[o].path + '/' + routeData[i].children[o].children[x].path;
|
|
|
- // this.$router.push({ path: urlText });
|
|
|
- // console.log("urlText3",urlText)
|
|
|
- // return
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- } else {
|
|
|
- this.$router.push({ path: this.redirect || "/chemicalLibrary/medicUniversityHome" }).catch(()=>{});
|
|
|
- }
|
|
|
+ this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
|
|
|
}).catch(() => {
|
|
|
this.loading = false;
|
|
|
+ if (this.captchaOnOff) {
|
|
|
+ this.getCode();
|
|
|
+ }
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+ }else if(type == 2){
|
|
|
+ if(this.checkPhone(this.loginFormTwo.username)){
|
|
|
+ if(!this.loginFormTwo.password){
|
|
|
+ this.textTwo = '*请输入正确的验证码';
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.textTwo = "";
|
|
|
+ this.$refs.loginFormTwo.validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ this.loginFormTwo.authType = 'mobile'
|
|
|
+ this.$store.dispatch("LoginPhone", this.loginFormTwo).then((res) => {
|
|
|
+ if(res.code != 200){
|
|
|
+ this.textTwo = "*"+res.msg;
|
|
|
+ if(res.code == 530){
|
|
|
+ this.textTwo = "*"+res.msg;
|
|
|
+ }else if(res.code == 503){
|
|
|
+ this.textTwo = "*"+res.msg;
|
|
|
+ }
|
|
|
+ this.loading = false;
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // if(res.data.reset_password){
|
|
|
+ // this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
|
|
|
+ // confirmButtonText: "确定",
|
|
|
+ // cancelButtonText: "取消",
|
|
|
+ // type: "warning"
|
|
|
+ // }).then(function() {
|
|
|
+ // let routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
+ // for(let i=0;i<routeData.length;i++){
|
|
|
+ // if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
|
|
|
+ // store.dispatch('settings/setPageName', routeData[i].meta.title)
|
|
|
+ // self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
|
|
|
+ // self.$router.push({ path: '/comprehensive/system/mine' });
|
|
|
+ // break
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }).then(() => {
|
|
|
+ // }).catch(() => {
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ if(res.data.type){
|
|
|
+ localStorage.setItem('userType',res.data.type)
|
|
|
+ localStorage.setItem('userId',res.data.user_id)
|
|
|
+ localStorage.setItem('identity',res.data.screen_token);
|
|
|
+ localStorage.setItem('identityType',res.data.screen_type);
|
|
|
+ }
|
|
|
+ this.fullScreen();
|
|
|
+ if(res.data.type == 22){
|
|
|
+ this.$router.push({ path: this.redirect || "/comprehensive/system/mine" }).catch(()=>{});
|
|
|
+ // let routeData = JSON.parse(localStorage.getItem("routeData"))
|
|
|
+ // for(let i=0;i<routeData.length;i++){
|
|
|
+ // if(!routeData[i].alwaysShow&&!routeData[i].hidden){
|
|
|
+ // let urlText = routeData[i].path;
|
|
|
+ // this.$router.push({ path: urlText });
|
|
|
+ // console.log("urlText1",urlText)
|
|
|
+ // return
|
|
|
+ // }else if (routeData[i].children){
|
|
|
+ // for(let o=0;o<routeData[i].children.length;o++){
|
|
|
+ // if(!routeData[i].children[o].alwaysShow&&!routeData[i].children[o].hidden){
|
|
|
+ // let urlText = routeData[i].path + '/' + routeData[i].children[o].path;
|
|
|
+ // this.$router.push({ path: urlText });
|
|
|
+ // console.log("urlText2",urlText)
|
|
|
+ // return
|
|
|
+ // }else{
|
|
|
+ // if(routeData[i].children[o].children){
|
|
|
+ // for(let x=0;x<routeData[i].children[o].children.length;x++){
|
|
|
+ // if(!routeData[i].children[o].children[x].alwaysShow&&!routeData[i].children[o].children[x].hidden){
|
|
|
+ // let urlText = routeData[i].path + '/' + routeData[i].children[o].path + '/' + routeData[i].children[o].children[x].path;
|
|
|
+ // this.$router.push({ path: urlText });
|
|
|
+ // console.log("urlText3",urlText)
|
|
|
+ // return
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ this.$router.push({ path: this.redirect || "/chemicalLibrary/medicUniversityHome" }).catch(()=>{});
|
|
|
+ }
|
|
|
+ }).catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
+ /***************************************公共部分***************************************/
|
|
|
//获取首页配置
|
|
|
initPage(){
|
|
|
initPage().then(response => {
|
|
|
@@ -341,87 +527,197 @@
|
|
|
.form-box{
|
|
|
width:680px;
|
|
|
height:520px;
|
|
|
- background-image: url("../assets/ZDimages/login/img_dlk_bg.png");
|
|
|
+ background-image: url("../assets/ZDimages/login/img_dlk_bg_one.png");
|
|
|
position: absolute;
|
|
|
top:290px;
|
|
|
left:50%;
|
|
|
margin-left:-340px;
|
|
|
- .form-title-p{
|
|
|
- line-height:52px;
|
|
|
- font-size:20px;
|
|
|
- text-align: center;
|
|
|
- color:#fff;
|
|
|
- font-weight:700;
|
|
|
- }
|
|
|
- .username-input-box:hover{
|
|
|
- box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
- }
|
|
|
- .username-input-box{
|
|
|
- width:480px;
|
|
|
- height:70px;
|
|
|
- border: 1px solid #00FFFC;
|
|
|
- border-radius: 10px;
|
|
|
- background: rgba(0, 13, 41, 0.2);
|
|
|
- margin: 70px auto 0;
|
|
|
+ .form-title-box{
|
|
|
+ height:52px;
|
|
|
display: flex;
|
|
|
- overflow: hidden;
|
|
|
- img{
|
|
|
- height:20px;
|
|
|
- width:20px;
|
|
|
- margin:25px 30px 25px 20px;
|
|
|
+ .form-title-null{
|
|
|
+ flex:1;
|
|
|
}
|
|
|
- p{
|
|
|
- color: #999999;
|
|
|
- line-height:70px;
|
|
|
- span:nth-child(1){
|
|
|
-
|
|
|
+ .form-title-p{
|
|
|
+ padding:0 30px;
|
|
|
+ line-height:52px;
|
|
|
+ font-size:20px;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-weight:700;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .form-title-p-color{
|
|
|
+ color:#00ffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-form-one {
|
|
|
+ .form-title-p{
|
|
|
+ line-height:52px;
|
|
|
+ font-size:24px;
|
|
|
+ text-align: center;
|
|
|
+ color:#fff;
|
|
|
+ font-weight:700;
|
|
|
+ }
|
|
|
+ .username-input-box-code:hover{
|
|
|
+ box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
|
|
|
+ }
|
|
|
+ .username-input-box-code{
|
|
|
+ border: 1px solid #FF6A6A!important;
|
|
|
+ }
|
|
|
+ .username-input-box:hover{
|
|
|
+ box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
+ }
|
|
|
+ .username-input-box{
|
|
|
+ width:480px;
|
|
|
+ height:60px;
|
|
|
+ border: 1px solid #00FFFC;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(0, 13, 41, 0.2);
|
|
|
+ margin: 40px auto 32px;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ height:20px;
|
|
|
+ width:20px;
|
|
|
+ margin:20px;
|
|
|
}
|
|
|
- span:nth-child(2){
|
|
|
- margin:0 10px;
|
|
|
+ input:-webkit-autofill {
|
|
|
+ //input 背景色 #0C2034根据自己需要替换
|
|
|
+ -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
+ //input字体颜色 颜色根据自己要求替换
|
|
|
+ -webkit-text-fill-color: #FFFFFF !important;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ flex:1;
|
|
|
+ border:none;
|
|
|
+ outline:none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #dedede;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ ::placeholder{
|
|
|
+ color:#999999 ;
|
|
|
+ font-size:16px;
|
|
|
}
|
|
|
}
|
|
|
- input:-webkit-autofill {
|
|
|
- //input 背景色 #0C2034根据自己需要替换
|
|
|
- -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
- //input字体颜色 颜色根据自己要求替换
|
|
|
- -webkit-text-fill-color: #FFFFFF !important;
|
|
|
+ .password-input-box:hover{
|
|
|
+ box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
}
|
|
|
- input{
|
|
|
- flex:1;
|
|
|
- border:none;
|
|
|
- outline:none;
|
|
|
- background-color: transparent !important;
|
|
|
- color: #dedede;
|
|
|
- font-size:16px;
|
|
|
+ .password-input-box{
|
|
|
+ width:480px;
|
|
|
+ height:60px;
|
|
|
+ border: 1px solid #00FFFC;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(0, 13, 41, 0.2);
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ height:20px;
|
|
|
+ width:20px;
|
|
|
+ margin:20px;
|
|
|
+ }
|
|
|
+ input:-webkit-autofill {
|
|
|
+ //input 背景色 #0C2034根据自己需要替换
|
|
|
+ -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
+ //input字体颜色 颜色根据自己要求替换
|
|
|
+ -webkit-text-fill-color: #FFFFFF !important;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ flex:1;
|
|
|
+ border:none;
|
|
|
+ outline:none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #dedede;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ ::placeholder{
|
|
|
+ color:#999999 ;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
}
|
|
|
- ::placeholder{
|
|
|
- color:#999999 ;
|
|
|
+ .text-p{
|
|
|
+ width:480px;
|
|
|
+ height:59px;
|
|
|
+ line-height: 59px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ color: #DC1616;
|
|
|
+ }
|
|
|
+ .code-input-box{
|
|
|
+ width:480px;
|
|
|
+ height:60px;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ .code-input-left-box:hover{
|
|
|
+ box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
+ }
|
|
|
+ .code-input-left-box{
|
|
|
+ width:330px;
|
|
|
+ height:60px;
|
|
|
+ border: 1px solid #00FFFC;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(0, 13, 41, 0.2);
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ height:20px;
|
|
|
+ width:20px;
|
|
|
+ margin:20px;
|
|
|
+ }
|
|
|
+ input:-webkit-autofill {
|
|
|
+ -webkit-box-shadow: 0 0 0 1000px white inset !important;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ flex:1;
|
|
|
+ border:none;
|
|
|
+ outline:none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #dedede;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ ::placeholder{
|
|
|
+ color:#999999 ;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-code{
|
|
|
+ width:124px;
|
|
|
+ height:50px;
|
|
|
+ margin:6px 0 0 25px;
|
|
|
+ img {
|
|
|
+ width:124px;
|
|
|
+ height:50px;
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-button-p{
|
|
|
font-size:16px;
|
|
|
+ display: block;
|
|
|
+ width:480px;
|
|
|
+ height: 60px;
|
|
|
+ background: #0045AF;
|
|
|
+ color:#fff;
|
|
|
+ border:none;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin:34px auto 0;
|
|
|
}
|
|
|
}
|
|
|
- .text-p{
|
|
|
- width:480px;
|
|
|
- height:59px;
|
|
|
- line-height: 59px;
|
|
|
- margin: 0 auto;
|
|
|
- font-size: 14px;
|
|
|
- font-family: Microsoft YaHei;
|
|
|
- color: #DC1616;
|
|
|
- }
|
|
|
- .code-input-box{
|
|
|
- width:480px;
|
|
|
- height:70px;
|
|
|
- display: flex;
|
|
|
- margin: 0 auto;
|
|
|
- .code-input-left-box:hover{
|
|
|
+ .login-form-two{
|
|
|
+ .username-input-box:hover{
|
|
|
box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
}
|
|
|
- .code-input-left-box{
|
|
|
- width:300px;
|
|
|
- height:70px;
|
|
|
+ .username-input-box{
|
|
|
+ width:480px;
|
|
|
+ height:60px;
|
|
|
border: 1px solid #00FFFC;
|
|
|
border-radius: 10px;
|
|
|
background: rgba(0, 13, 41, 0.2);
|
|
|
+ margin: 70px auto 0;
|
|
|
display: flex;
|
|
|
overflow: hidden;
|
|
|
img{
|
|
|
@@ -429,8 +725,21 @@
|
|
|
width:20px;
|
|
|
margin:25px 30px 25px 20px;
|
|
|
}
|
|
|
+ p{
|
|
|
+ color: #999999;
|
|
|
+ line-height:60px;
|
|
|
+ span:nth-child(1){
|
|
|
+
|
|
|
+ }
|
|
|
+ span:nth-child(2){
|
|
|
+ margin:0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
input:-webkit-autofill {
|
|
|
- -webkit-box-shadow: 0 0 0 1000px white inset !important;
|
|
|
+ //input 背景色 #0C2034根据自己需要替换
|
|
|
+ -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
|
|
|
+ //input字体颜色 颜色根据自己要求替换
|
|
|
+ -webkit-text-fill-color: #FFFFFF !important;
|
|
|
}
|
|
|
input{
|
|
|
flex:1;
|
|
|
@@ -445,35 +754,82 @@
|
|
|
font-size:16px;
|
|
|
}
|
|
|
}
|
|
|
- .login-code-one{
|
|
|
- background: #999;
|
|
|
- color:#fff;
|
|
|
+ .text-p{
|
|
|
+ width:480px;
|
|
|
+ height:59px;
|
|
|
+ line-height: 59px;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Microsoft YaHei;
|
|
|
+ color: #DC1616;
|
|
|
+ }
|
|
|
+ .code-input-box{
|
|
|
+ width:480px;
|
|
|
+ height:60px;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ .code-input-left-box:hover{
|
|
|
+ box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
|
|
|
+ }
|
|
|
+ .code-input-left-box{
|
|
|
+ width:300px;
|
|
|
+ height:60px;
|
|
|
+ border: 1px solid #00FFFC;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgba(0, 13, 41, 0.2);
|
|
|
+ display: flex;
|
|
|
+ overflow: hidden;
|
|
|
+ img{
|
|
|
+ height:20px;
|
|
|
+ width:20px;
|
|
|
+ margin:25px 30px 25px 20px;
|
|
|
+ }
|
|
|
+ input:-webkit-autofill {
|
|
|
+ -webkit-box-shadow: 0 0 0 1000px white inset !important;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ flex:1;
|
|
|
+ border:none;
|
|
|
+ outline:none;
|
|
|
+ background-color: transparent !important;
|
|
|
+ color: #dedede;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ ::placeholder{
|
|
|
+ color:#999999 ;
|
|
|
+ font-size:16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .login-code-one{
|
|
|
+ background: #999;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .login-code-two{
|
|
|
+ background: #0045AF;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+ .login-code{
|
|
|
+ width:160px;
|
|
|
+ height:60px;
|
|
|
+ line-height:60px;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left:20px;
|
|
|
+ border-radius:10px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|
|
|
- .login-code-two{
|
|
|
+ .form-button-p{
|
|
|
+ font-size:16px;
|
|
|
+ display: block;
|
|
|
+ width:480px;
|
|
|
+ height: 60px;
|
|
|
background: #0045AF;
|
|
|
color:#fff;
|
|
|
+ border:none;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin:50px auto 0;
|
|
|
}
|
|
|
- .login-code{
|
|
|
- width:160px;
|
|
|
- height:70px;
|
|
|
- line-height:70px;
|
|
|
- cursor: pointer;
|
|
|
- margin-left:20px;
|
|
|
- border-radius:10px;
|
|
|
- font-size:14px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
- .form-button-p{
|
|
|
- font-size:16px;
|
|
|
- display: block;
|
|
|
- width:480px;
|
|
|
- height: 60px;
|
|
|
- background: #0045AF;
|
|
|
- color:#fff;
|
|
|
- border:none;
|
|
|
- border-radius: 10px;
|
|
|
- margin:50px auto 0;
|
|
|
}
|
|
|
}
|
|
|
.introduction-p{
|
dedsudiyu
