|
|
@@ -1,9 +1,6 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <div class="flexBox">
|
|
|
- <div>
|
|
|
-
|
|
|
- <el-form
|
|
|
+ <el-form
|
|
|
ref="loginForm"
|
|
|
:model="loginForm"
|
|
|
:rules="loginRules"
|
|
|
@@ -11,30 +8,21 @@
|
|
|
auto-complete="on"
|
|
|
label-position="left"
|
|
|
>
|
|
|
- <div class="flex">
|
|
|
- <div class="image-container">
|
|
|
- <div class="empty-height" >
|
|
|
- <img class="logo" src="@/assets/login/logo.png" alt="">
|
|
|
- </div>
|
|
|
- <el-carousel :interval="5000" arrow="always" height="440px" class="carousel">
|
|
|
- <el-carousel-item v-for="item in 4" :key="item">
|
|
|
- <h3>{{ item }}</h3>
|
|
|
- </el-carousel-item>
|
|
|
- </el-carousel>
|
|
|
+ <!-- <div class="title-container">
|
|
|
+ <img src="@/assets/login/title.png" alt="">
|
|
|
+ </div> -->
|
|
|
+ <div class="image-container">
|
|
|
+ <img src="@/assets/login/image.png" alt="" />
|
|
|
</div>
|
|
|
<div class="right-container">
|
|
|
<div class="empty-height" />
|
|
|
<div class="form-container">
|
|
|
- <!-- <div class="title">供应链管理系统</div> -->
|
|
|
+ <div class="title">供应链管理系统</div>
|
|
|
<!-- <div class="logo">-->
|
|
|
<!-- <img src="@/assets/login/logo.png" alt="">-->
|
|
|
<!-- </div>-->
|
|
|
- <div class="flex title">
|
|
|
- <div style="margin-right: 80px;">密码登录</div>
|
|
|
- <div>微信登录</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <el-form-item prop="username">
|
|
|
+
|
|
|
+ <el-form-item prop="username">
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="user" />
|
|
|
</span>
|
|
|
@@ -100,21 +88,9 @@
|
|
|
>登录</el-button
|
|
|
>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
-
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="info">
|
|
|
- <div>粤ICP备2020090308号 | 粤公网安备44010602008477号</div>
|
|
|
- <div>本站由广州众炬科技有限公司提供技术支持服务</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -225,8 +201,11 @@ export default {
|
|
|
.dispatch("user/login", this.loginForm)
|
|
|
.then(() => {
|
|
|
console.log(this.redirect);
|
|
|
+
|
|
|
this.$router.push({ path: this.redirect || "/" });
|
|
|
+ this.$store.commit("user/showMessage", "yes");
|
|
|
this.saveUnAndPw();
|
|
|
+
|
|
|
this.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -337,14 +316,7 @@ $back: #333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .el-carousel__arrow--left,.el-carousel__arrow--right{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .carousel{
|
|
|
- border-top-left-radius: 15px;
|
|
|
- border-bottom-left-radius: 15px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+
|
|
|
.el-form-item {
|
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
// background: rgba(0, 0, 0, 0.1);
|
|
|
@@ -368,39 +340,7 @@ $back: #333;
|
|
|
$bg: #2d3a4b;
|
|
|
$dark_gray: #889aa4;
|
|
|
$light_gray: #eee;
|
|
|
-.info{
|
|
|
- margin-top: 50px;
|
|
|
- line-height: 30px;
|
|
|
- text-align: center;
|
|
|
- text-align-last: center;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.flexBox{
|
|
|
- display: flex;
|
|
|
- padding-top: calc(50vh - 230px);
|
|
|
- justify-content: space-between;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center
|
|
|
-}
|
|
|
-.flex{
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
-}
|
|
|
-.empty-height{
|
|
|
- height: 46px;
|
|
|
- margin: 15px 0;
|
|
|
-}
|
|
|
-.logo{
|
|
|
- height:46px;
|
|
|
- width:460px ;
|
|
|
-}
|
|
|
-.el-carousel__item:nth-child(2n) {
|
|
|
- background-color: #99a9bf;
|
|
|
-}
|
|
|
|
|
|
-.el-carousel__item:nth-child(2n + 1) {
|
|
|
- background-color: #d3dce6;
|
|
|
-}
|
|
|
.login-container {
|
|
|
min-height: 100%;
|
|
|
width: 100%;
|
|
|
@@ -408,34 +348,35 @@ $light_gray: #eee;
|
|
|
overflow: hidden;
|
|
|
|
|
|
.login-form {
|
|
|
- // position: relative;
|
|
|
- // width: 1920px;
|
|
|
- // max-width: 100%;
|
|
|
- // height: 100%;
|
|
|
-
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // align-items: center;
|
|
|
-
|
|
|
+ position: relative;
|
|
|
+ width: 1070px;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 0 35px 0;
|
|
|
+ padding-top: calc(50vh - 230px);
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
}
|
|
|
|
|
|
.image-container {
|
|
|
- width: 700px;
|
|
|
- height: 516px;
|
|
|
- // overflow: hidden;
|
|
|
+ img {
|
|
|
+ width: 560px;
|
|
|
+ height: 460px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.right-container {
|
|
|
width: 440px;
|
|
|
- height: 516px;
|
|
|
+ height: 460px;
|
|
|
+ .empty-height {
|
|
|
+ height: 77px;
|
|
|
+ }
|
|
|
.form-container {
|
|
|
- height: 440px;
|
|
|
padding: 20px 30px 27px 40px;
|
|
|
background: #fff;
|
|
|
border-radius: 0 15px 15px 0;
|
|
|
.title {
|
|
|
-
|
|
|
- justify-content: center;
|
|
|
+ font-size: 24px;
|
|
|
font-weight: bold;
|
|
|
letter-spacing: 4px;
|
|
|
text-align: center;
|
|
|
@@ -517,4 +458,3 @@ $light_gray: #eee;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-
|
howie