|
|
<template>
|
|
|
<div class="login-container">
|
|
|
<div class="centerbox">
|
|
|
<div class="contentleft">
|
|
|
<div class="slogan">
|
|
|
<i class="iconfont icon-yigezhuanmenfuwudailidepingtai2"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="contentright">
|
|
|
<div class="contentbox">
|
|
|
<router-view></router-view>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
// import { loginApi, getPhoneCodeApi } from "../api/login";
|
|
|
export default {
|
|
|
// 组件名称
|
|
|
name: "login",
|
|
|
// 局部注册的组件
|
|
|
components: {},
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
props: {},
|
|
|
// 组件状态值
|
|
|
data() {
|
|
|
return {
|
|
|
loginway: 1,
|
|
|
islogoshow: true, // 控制logo是否显示
|
|
|
form: this.$form.createForm(this),
|
|
|
form1: this.$form.createForm(this),
|
|
|
isfinish: true,
|
|
|
deadline: 60,
|
|
|
path: this.$route.fullPath,
|
|
|
};
|
|
|
},
|
|
|
// 计算属性
|
|
|
computed: {},
|
|
|
// 侦听器
|
|
|
watch: {
|
|
|
path() {
|
|
|
this.getpathinfo();
|
|
|
console.log(this.path);
|
|
|
},
|
|
|
},
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
/**
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
*/
|
|
|
created() {
|
|
|
// this.getpathinfo();
|
|
|
},
|
|
|
/**
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
*/
|
|
|
mounted() {},
|
|
|
// 组件方法
|
|
|
methods: {
|
|
|
getpathinfo() {
|
|
|
this.path = this.$route.fullPath;
|
|
|
if (this.path.indexOf("updatepsw") > -1) {
|
|
|
this.islogoshow = false;
|
|
|
} else {
|
|
|
this.islogoshow = true;
|
|
|
}
|
|
|
console.log(this.path);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.login-container {
|
|
|
height: calc(100% - 230px);
|
|
|
width: 100%;
|
|
|
position: relative;
|
|
|
// background: url("../assets/Bg.png") no-repeat center;
|
|
|
// background-size: 100% 100%;
|
|
|
// box-shadow: 5px 5px 10px gray;
|
|
|
.centerbox {
|
|
|
position: absolute;
|
|
|
width: 640px;
|
|
|
height: 400px;
|
|
|
// background-color: pink;
|
|
|
left: 50%;
|
|
|
top: 50%;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
margin: auto;
|
|
|
border-radius: 16px;
|
|
|
overflow: hidden;
|
|
|
.contentleft {
|
|
|
width: 320px;
|
|
|
height: 100%;
|
|
|
float: left;
|
|
|
position: relative;
|
|
|
background-color: #ff6a00;
|
|
|
.slogan {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
// margin: auto;
|
|
|
transform: translateX(-50%) translateY(-50%);
|
|
|
// background-color: skyblue;
|
|
|
// img {
|
|
|
// width: 100%;
|
|
|
// height: 100%;
|
|
|
// }
|
|
|
i {
|
|
|
font-size: 91px;
|
|
|
color: #fff;
|
|
|
line-height: 91px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.contentright {
|
|
|
width: 320px;
|
|
|
height: 100%;
|
|
|
float: left;
|
|
|
// padding: 40px 55px;
|
|
|
box-sizing: border-box;
|
|
|
background-color: #fff;
|
|
|
|
|
|
.contentbox {
|
|
|
width: 290px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
// .content;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|