|
|
@@ -1,21 +1,26 @@
|
|
|
<template>
|
|
|
<div class="login_bg">
|
|
|
- <main class="login-main">
|
|
|
- <section class="login-form">
|
|
|
- <div class="form-container">
|
|
|
- <div class="login-for">
|
|
|
- <div class="tab-menu">
|
|
|
- <div :class="tabMenu==1?'tab-item active':'tab-item'" @click="menuType(1)">{{ $t('login.accountLogin') }}</div>
|
|
|
+ <div class="login-banner"></div>
|
|
|
+ <div class="login-header"></div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="login-main">
|
|
|
+ <div class="flex-1" style="height: 600px;">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="login-form">
|
|
|
+ <div class="form-container">
|
|
|
+ <div class="login-for">
|
|
|
+ <div class="tab-menu">
|
|
|
+ <div :class="tabMenu==1?'tab-item active':'tab-item'" @click="menuType(1)">欢迎登录{{ baseData.title?baseData.title:$CONFIG.APP_NAME }}</div>
|
|
|
+ </div>
|
|
|
+ <phoneForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==2"></phoneForm>
|
|
|
+ <passwordForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==1"></passwordForm>
|
|
|
</div>
|
|
|
- <phoneForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==2"></phoneForm>
|
|
|
- <passwordForm :baseData="baseData" :captcha="captcha" @success="handleSuccess" @upCaptcha="getService" v-if="tabMenu==1"></passwordForm>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </section>
|
|
|
- </main>
|
|
|
- <footer class="login-footer">
|
|
|
- {{ baseData.copyright }} <span v-html="baseData.miitbeian"></span> <span v-html="baseData.beian"></span>
|
|
|
- </footer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="login-footer">{{ baseData.copyright }} <span v-html="baseData.miitbeian"></span> <span v-html="baseData.beian"></span></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -67,7 +72,7 @@ export default {
|
|
|
this.islogin = true;
|
|
|
},
|
|
|
async getService() {
|
|
|
- var resp = await this.$API.service.data.get();
|
|
|
+ var resp = await this.$API.auth.data.get();
|
|
|
if (resp.code == 0) {
|
|
|
return this.$message.warning(resp.msg)
|
|
|
}
|
|
|
@@ -80,239 +85,45 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.privacy {
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-.tab-menu{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 20px;
|
|
|
- font-weight: 400;
|
|
|
- color: #b6babf;
|
|
|
- margin-bottom: 30px;
|
|
|
-}
|
|
|
-.tab-menu .line{width: 1px;background-color: #b6babf;margin: 0 15px;height: 20px;}
|
|
|
-.tab-menu .tab-item {cursor: pointer;}
|
|
|
-.tab-menu .tab-item.active{color: #000;font-weight: bold;}
|
|
|
-.showPrivacy {
|
|
|
- max-height: 500px;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: scroll;
|
|
|
- line-height: 1.5;
|
|
|
-}
|
|
|
-.privacy span {
|
|
|
- color: #f00;
|
|
|
-}
|
|
|
-
|
|
|
-.right-tips {
|
|
|
- width: 143px;
|
|
|
- height: 37px;
|
|
|
- position: absolute;
|
|
|
- top: -42px;
|
|
|
- right: 0;
|
|
|
- background-repeat: no-repeat;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #2475FC;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.right-tips img {
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 5px;
|
|
|
- width: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.login-header-tips {
|
|
|
- margin-bottom: 30px;
|
|
|
- font-family: var(--font-family);
|
|
|
-}
|
|
|
-
|
|
|
-.login-header-tips h3 {
|
|
|
- font-size: 28px;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.login-header-tips p {
|
|
|
- font-size: 14px;
|
|
|
- color: #959595;
|
|
|
- line-height: 32px;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-box {
|
|
|
- display: flex;
|
|
|
- height: 230px;
|
|
|
-}
|
|
|
-
|
|
|
-.login-forgot {
|
|
|
- text-align: right;
|
|
|
-}
|
|
|
-
|
|
|
-.oauth-logo {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid var(--el-color-primary-light-2);
|
|
|
- border-radius: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 auto;
|
|
|
-}
|
|
|
-
|
|
|
-.oauth-text {
|
|
|
- margin: 20px auto;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- color: var(--el-color-primary-light-3);
|
|
|
-}
|
|
|
-
|
|
|
-.el-button--large {
|
|
|
- --el-button-size: 50px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.login-footer {
|
|
|
- text-align: center;
|
|
|
- color: #9598a6;
|
|
|
- font-size: 12px;
|
|
|
- line-height: 60px;
|
|
|
-}
|
|
|
-
|
|
|
-.right-qrcode-bg {
|
|
|
- position: absolute;
|
|
|
- right: -1px;
|
|
|
- top: -1px;
|
|
|
- width: 90px;
|
|
|
- height: 90px;
|
|
|
- border-radius: 0 10px 0 0;
|
|
|
- border-color: #f2f7ff #f2f7ff #fff #fff;
|
|
|
- border-style: solid;
|
|
|
- border-width: 50px;
|
|
|
- -webkit-box-sizing: border-box;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.right-qrcode-user:hover {
|
|
|
- background-image: url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_hover2.png);
|
|
|
-}
|
|
|
-
|
|
|
-.right-qrcode-user {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 101px;
|
|
|
- height: 101px;
|
|
|
- display: block;
|
|
|
- background: url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_2.png) no-repeat 50%;
|
|
|
- background-size: 90px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-
|
|
|
-.right-qrcode:hover {
|
|
|
- background-image: url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode_hover2.png);
|
|
|
-}
|
|
|
-
|
|
|
-.right-qrcode {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 101px;
|
|
|
- height: 101px;
|
|
|
- display: block;
|
|
|
- background: url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode2.png) no-repeat 50%;
|
|
|
- background-size: 90px;
|
|
|
- cursor: pointer;
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
-
|
|
|
-.el-form-item__label {
|
|
|
- color: #1e2226 !important;
|
|
|
- font-weight: 600 !important;
|
|
|
-}
|
|
|
-
|
|
|
-.login-main {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form {
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- justify-content: center;
|
|
|
- flex: 1;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.login-form .logo {
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- font-family: var(--font-family);
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form .logo img {
|
|
|
- height: 60px;
|
|
|
- margin: 0 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form .logo label {
|
|
|
- font-size: 26px;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form h3 {
|
|
|
- line-height: 28px;
|
|
|
- margin-top: 12px;
|
|
|
- font-size: 20px;
|
|
|
- color: #1e2226;
|
|
|
- cursor: pointer;
|
|
|
- font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.login-form .form-container {
|
|
|
- width: 420px;
|
|
|
- box-shadow: 0 20px 30px 0 rgb(63 63 65 / 6%);
|
|
|
- border-radius: 10px;
|
|
|
- border: 1px solid #fff;
|
|
|
- box-sizing: border-box;
|
|
|
- padding: 40px 40px 30px;
|
|
|
- background: #fff;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-
|
|
|
-.login_bg {
|
|
|
- background: url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/bg.png) 0 0 no-repeat;
|
|
|
- background-size: cover;
|
|
|
- min-height: 680px;
|
|
|
- height: 100vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
-}
|
|
|
-
|
|
|
-.login-header {
|
|
|
- background: hsla(0, 0%, 100%, .3);
|
|
|
- box-shadow: 0 2px 20px 0 rgba(140, 147, 161, .07);
|
|
|
- height: 50px;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-
|
|
|
-.login-header img {
|
|
|
- height: 28px;
|
|
|
- margin: 0 20px;
|
|
|
-}
|
|
|
-
|
|
|
-.login-header label {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
+.login_bg{position:relative;background-color: rgb(242, 246, 255);display: flex;flex-direction: column;overflow: hidden;height: 100vh;}
|
|
|
+.login-banner{position:absolute;top:50%;left:50%;width:1440px;z-index:1;transform:translate(-50%,-50%);background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/login-broadcast-1.webp);background-position:center center;background-size:cover;background-repeat:no-repeat;opacity:1;height: 900px;}
|
|
|
+.flex-1{flex: 1 1;}
|
|
|
+.login-main{display: flex;max-width: 1200px;min-height: 700px;height: calc(-150px + 100vh);margin: 0 auto;position: relative;z-index: 99;}
|
|
|
+
|
|
|
+.privacy{color:#333}
|
|
|
+.tab-menu{display:flex;align-items:center;font-size:20px;font-weight:400;color:#b6babf;margin-bottom:30px}
|
|
|
+.tab-menu .line{width:1px;background-color:#b6babf;margin:0 15px;height:20px}
|
|
|
+.tab-menu .tab-item{cursor:pointer}
|
|
|
+.tab-menu .tab-item.active{color:#000;font-weight:bold}
|
|
|
+.showPrivacy{max-height:500px;overflow:hidden;overflow-y:scroll;line-height:1.5}
|
|
|
+.privacy span{color:#f00}
|
|
|
+.right-tips{width:143px;height:37px;position:absolute;top:-42px;right:0;background-repeat:no-repeat;font-size:14px;font-weight:400;color:#2475FC;line-height:30px;padding-left:14px}
|
|
|
+.right-tips img{vertical-align:middle;margin-right:5px;width:20px}
|
|
|
+.login-header-tips{margin-bottom:30px;font-family:var(--font-family)}
|
|
|
+.login-header-tips h3{font-size:28px;color:#333}
|
|
|
+.login-header-tips p{font-size:14px;color:#959595;line-height:32px}
|
|
|
+.loading-box{display:flex;height:230px}
|
|
|
+.login-forgot{text-align:right}
|
|
|
+.oauth-logo{width:100px;height:100px;text-align:center;border:1px solid var(--el-color-primary-light-2);border-radius:100%;display:flex;align-items:center;justify-content:center;margin:0 auto}
|
|
|
+.oauth-text{margin:20px auto;text-align:center;font-size:14px;color:var(--el-color-primary-light-3)}
|
|
|
+.el-button--large{--el-button-size:50px;font-size:16px;font-weight:600}
|
|
|
+.login-footer{text-align:center;color:#9598a6;font-size:12px;line-height:60px}
|
|
|
+.right-qrcode-bg{position:absolute;right:-1px;top:-1px;width:90px;height:90px;border-radius:0 10px 0 0;border-color:#f2f7ff #f2f7ff #fff #fff;border-style:solid;border-width:50px;-webkit-box-sizing:border-box;box-sizing:border-box}
|
|
|
+.right-qrcode-user:hover{background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_hover2.png)}
|
|
|
+.right-qrcode-user{position:absolute;top:0;right:0;width:101px;height:101px;display:block;background:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/account_2.png) no-repeat 50%;background-size:90px;cursor:pointer;z-index:9}
|
|
|
+.right-qrcode:hover{background-image:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode_hover2.png)}
|
|
|
+.right-qrcode{position:absolute;top:0;right:0;width:101px;height:101px;display:block;background:url(https://blue-order.oss-cn-guangzhou.aliyuncs.com/qrcode2.png) no-repeat 50%;background-size:90px;cursor:pointer;z-index:9}
|
|
|
+.el-form-item__label{color:#1e2226!important;font-weight:600!important}
|
|
|
+
|
|
|
+.login-form{display:flex;position:relative;justify-content:center;flex:1;flex-direction:column;align-items:center}
|
|
|
+.login-form .logo{align-items:center;display:flex;font-family:var(--font-family);margin-bottom:20px}
|
|
|
+.login-form .logo img{height:60px;margin:0 20px}
|
|
|
+.login-form .logo label{font-size:26px;color:#333}
|
|
|
+.login-form h3{line-height:28px;margin-top:12px;font-size:20px;color:#1e2226;cursor:pointer;font-weight:600}
|
|
|
+.login-form .form-container{width:420px;box-shadow:0 20px 30px 0 rgb(63 63 65 / 6%);border-radius:10px;border:1px solid #fff;box-sizing:border-box;padding:40px 40px 30px;background:#fff;position:relative}
|
|
|
+.login-header{background:hsla(0,0%,100%,.3);box-shadow:0 2px 20px 0 rgba(140,147,161,.07);height:50px;align-items:center;display:flex}
|
|
|
+.login-header img{height:28px;margin:0 20px}
|
|
|
+.login-header label{font-size:16px;color:#333}
|
|
|
.login-form:deep(.login-msg-yzm) {display: flex;width: 100%;}
|
|
|
.login-form:deep(.login-msg-yzm) .el-button {margin-left: 10px;--el-button-size:42px;}
|
|
|
@media only screen and (max-width: 800px) {
|