|
|
@@ -1,18 +1,18 @@
|
|
|
<template>
|
|
|
- <div class="login-container pull-height" @keyup.enter.native="handleLogin">
|
|
|
- <div class="login-weaper">
|
|
|
- <div class="login-left animated fadeInLeft">
|
|
|
- <div class="login-info">
|
|
|
- <h2 class="login-info-title">{{website.info.title}}</h2>
|
|
|
- <ul class="login-info-list">
|
|
|
- <li class="login-info-item" v-for="(item,index) in website.info.list" :key="index">
|
|
|
- <i class="el-icon-check"></i>
|
|
|
- {{item}}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ <div class="login-container"
|
|
|
+ @keyup.enter.native="handleLogin">
|
|
|
+
|
|
|
+ <div class="login-weaper animated bounceInDown">
|
|
|
+ <div class="login-left">
|
|
|
+ <div class="login-time">
|
|
|
+ {{time}}
|
|
|
</div>
|
|
|
+ <img class="img"
|
|
|
+ src="/img/logo.png"
|
|
|
+ alt="">
|
|
|
+ <p class="title">{{website.infoTitle}}</p>
|
|
|
</div>
|
|
|
- <div class="login-border animated fadeInRight">
|
|
|
+ <div class="login-border">
|
|
|
<div class="login-main">
|
|
|
<h4 class="login-title">
|
|
|
<el-select
|
|
|
@@ -28,131 +28,155 @@
|
|
|
<userLogin v-if="activeName==='user'"></userLogin>
|
|
|
<codeLogin v-else-if="activeName==='code'"></codeLogin>
|
|
|
<thirdLogin v-else-if="activeName==='third'"></thirdLogin>
|
|
|
+ <div class="login-menu">
|
|
|
+ <a href="#"
|
|
|
+ @click.stop="activeName='user'">账号密码</a>
|
|
|
+ <a href="#"
|
|
|
+ @click.stop="activeName='code'">手机号登录</a>
|
|
|
+ <a href="#"
|
|
|
+ @click.stop="activeName='third'">第三方登录</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="login-menu">
|
|
|
- <a href="#" @click.stop="activeName='user'">账号密码</a>
|
|
|
- <a href="#" @click.stop="activeName='code'">手机号登录</a>
|
|
|
- <a href="#" @click.stop="activeName='third'">第三方登录</a>
|
|
|
- </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import userLogin from "./userlogin";
|
|
|
-import codeLogin from "./codelogin";
|
|
|
-import thirdLogin from "./thirdlogin";
|
|
|
-import topColor from "../index/top/top-color";
|
|
|
-import color from "@/mixins/color";
|
|
|
-import { setStore, getStore } from "@/util/store";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import { validatenull } from "@/util/validate";
|
|
|
-export default {
|
|
|
- name: "login",
|
|
|
- mixins: [color()],
|
|
|
- components: {
|
|
|
- topColor,
|
|
|
- userLogin,
|
|
|
- codeLogin,
|
|
|
- thirdLogin
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- active: "",
|
|
|
- activeName: "user"
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route() {
|
|
|
- const params = this.$route.query;
|
|
|
- this.socialForm.state = params.state;
|
|
|
- this.socialForm.code = params.code;
|
|
|
- if (!validatenull(this.socialForm.state)) {
|
|
|
- const loading = this.$loading({
|
|
|
- lock: true,
|
|
|
- text: `登录中,请稍后。。。`,
|
|
|
- spinner: "el-icon-loading"
|
|
|
- });
|
|
|
- setTimeout(() => {
|
|
|
- loading.close();
|
|
|
- }, 2000);
|
|
|
- this.handleSocialLogin();
|
|
|
+ import userLogin from "./userlogin";
|
|
|
+ import codeLogin from "./codelogin";
|
|
|
+ import thirdLogin from "./thirdlogin";
|
|
|
+ import { mapGetters } from "vuex";
|
|
|
+ import { setStore, getStore } from "@/util/store";
|
|
|
+ import { dateFormat } from "@/util/date";
|
|
|
+ import { validatenull } from "@/util/validate";
|
|
|
+ export default {
|
|
|
+ name: "login",
|
|
|
+ components: {
|
|
|
+ userLogin,
|
|
|
+ codeLogin,
|
|
|
+ thirdLogin
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: "",
|
|
|
+ active: "",
|
|
|
+ activeName: "user"
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route() {
|
|
|
+ const params = this.$route.query;
|
|
|
+ this.socialForm.state = params.state;
|
|
|
+ this.socialForm.code = params.code;
|
|
|
+ if (!validatenull(this.socialForm.state)) {
|
|
|
+ const loading = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: `${
|
|
|
+ this.socialForm.state === "WX" ? "微信" : "QQ"
|
|
|
+ }登录中,请稍后。。。`,
|
|
|
+ spinner: "el-icon-loading"
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.close();
|
|
|
+ }, 2000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getTime();
|
|
|
+ setInterval(() => {
|
|
|
+ this.getTime();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["website"])
|
|
|
+ },
|
|
|
+ props: [],
|
|
|
+ methods: {
|
|
|
+ handleCommand(command) {
|
|
|
+ setStore({ name: "tenantId", content: command });
|
|
|
+ },
|
|
|
+ getTime() {
|
|
|
+ this.time = dateFormat(new Date());
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.active = getStore({ name: "tenantId" });
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- computed: {
|
|
|
- ...mapGetters(["website"])
|
|
|
- },
|
|
|
- props: [],
|
|
|
- methods: {
|
|
|
- handleCommand(command) {
|
|
|
- setStore({ name: "tenantId", content: command });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.login-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
margin: 0 auto;
|
|
|
+ background: url("http://www.17sucai.com/preview/242158/2015-01-10/%E7%99%BB%E5%BD%95/images/cloud.jpg")
|
|
|
+ 0 bottom repeat-x #049ec4;
|
|
|
+ animation: animate-cloud 20s linear infinite;
|
|
|
}
|
|
|
.login-weaper {
|
|
|
- position: absolute;
|
|
|
- top: 22%;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 1000px;
|
|
|
+ box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.4);
|
|
|
}
|
|
|
- .login-container::before {
|
|
|
- z-index: -1024;
|
|
|
- content: "";
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-image: url("/img/login.png");
|
|
|
- background-size: cover;
|
|
|
+
|
|
|
+ .login-left,
|
|
|
+ .login-border {
|
|
|
+ position: relative;
|
|
|
+ min-height: 500px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
.login-left {
|
|
|
+ border-top-left-radius: 5px;
|
|
|
+ border-bottom-left-radius: 5px;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
float: left;
|
|
|
width: 50%;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .login-logo {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- padding-top: 50px;
|
|
|
- font-size: 24px;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
- .login-info {
|
|
|
- padding-left: 140px;
|
|
|
+ .login-left .img {
|
|
|
+ width: 140px;
|
|
|
}
|
|
|
- .login-info-title {
|
|
|
- line-height: 90px;
|
|
|
- color: rgb(52, 58, 64);
|
|
|
+ .login-time {
|
|
|
+ position: absolute;
|
|
|
+ left: 25px;
|
|
|
+ top: 25px;
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 200;
|
|
|
+ opacity: 0.9;
|
|
|
+ font-size: 18px;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
- .login-info-item {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 2.5;
|
|
|
- color: rgb(33, 37, 41);
|
|
|
+ .login-left .title {
|
|
|
+ margin-top: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 300;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-size: 25px;
|
|
|
}
|
|
|
+
|
|
|
.login-border {
|
|
|
+ border-left: none;
|
|
|
+ border-top-right-radius: 5px;
|
|
|
+ border-bottom-right-radius: 5px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #fff;
|
|
|
width: 50%;
|
|
|
float: left;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.login-main {
|
|
|
margin: 0 auto;
|
|
|
- width: 50%;
|
|
|
+ width: 65%;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
.login-main > h3 {
|
|
|
@@ -162,9 +186,7 @@ export default {
|
|
|
color: #76838f;
|
|
|
}
|
|
|
.login-title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ color: #333;
|
|
|
margin-bottom: 40px;
|
|
|
font-weight: 500;
|
|
|
font-size: 22px;
|
|
|
@@ -181,40 +203,33 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.login-menu {
|
|
|
+ margin-top: 40px;
|
|
|
width: 100%;
|
|
|
text-align: center;
|
|
|
a {
|
|
|
- color: rgb(153, 153, 153);
|
|
|
+ color: #999;
|
|
|
font-size: 12px;
|
|
|
margin: 0px 8px;
|
|
|
}
|
|
|
}
|
|
|
- .login-index {
|
|
|
- margin-top: 40px !important;
|
|
|
- width: 180px;
|
|
|
- height: 48px;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50px !important;
|
|
|
- background: transparent !important;
|
|
|
- color: #333 !important;
|
|
|
- font-size: 16px !important;
|
|
|
- border: 1px solid rgb(152, 22, 244);
|
|
|
- }
|
|
|
.login-submit {
|
|
|
- display: block !important;
|
|
|
- margin: 40px auto 10px auto !important;
|
|
|
- width: 200px;
|
|
|
- height: 48px;
|
|
|
- font-size: 14px !important;
|
|
|
- text-align: center;
|
|
|
- border-radius: 50px !important;
|
|
|
- border: 0px;
|
|
|
- box-shadow: rgba(152, 22, 244, 0.19) 0px 5px 10px 2px;
|
|
|
+ width: 100%;
|
|
|
+ height: 45px;
|
|
|
+ border: 1px solid #409eff;
|
|
|
+ background: none;
|
|
|
+ font-size: 18px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: 300;
|
|
|
+ color: #409eff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-top: 30px;
|
|
|
+ font-family: "neo";
|
|
|
+ transition: 0.25s;
|
|
|
}
|
|
|
.login-form {
|
|
|
margin: 10px 0;
|
|
|
i {
|
|
|
- color: #999;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
.el-form-item__content {
|
|
|
width: 100%;
|
|
|
@@ -261,4 +276,3 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
</style>
|
|
|
-
|
lishangbu
