|
@@ -1,103 +1,200 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <el-form
|
|
|
- ref="loginForm"
|
|
|
- :model="loginForm"
|
|
|
- :rules="loginRules"
|
|
|
- class="login-form"
|
|
|
- auto-complete="on"
|
|
|
- label-position="left"
|
|
|
- >
|
|
|
- <!-- <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="logo">-->
|
|
|
- <!-- <img src="@/assets/login/logo.png" alt="">-->
|
|
|
- <!-- </div>-->
|
|
|
-
|
|
|
- <el-form-item prop="username">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="user" />
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- ref="username"
|
|
|
- v-model="loginForm.username"
|
|
|
- placeholder="请输入用户名"
|
|
|
- name="username"
|
|
|
- type="text"
|
|
|
- tabindex="1"
|
|
|
- auto-complete="on"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="password">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- ref="password"
|
|
|
- v-model="loginForm.password"
|
|
|
- :type="passwordType"
|
|
|
- placeholder="请输入密码"
|
|
|
- name="password"
|
|
|
- tabindex="2"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
- <span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon
|
|
|
- :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
- />
|
|
|
- </span>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="codeValue">
|
|
|
- <span class="svg-container">
|
|
|
- <svg-icon icon-class="password" />
|
|
|
- </span>
|
|
|
- <el-input
|
|
|
- ref="codeValue"
|
|
|
- v-model="loginForm.codeValue"
|
|
|
- placeholder="请输入验证码"
|
|
|
- name="codeValue"
|
|
|
- type="text"
|
|
|
- tabindex="3"
|
|
|
- auto-complete="off"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- />
|
|
|
- <div class="code" @click="getCode">
|
|
|
- <img :src="'data:image/jpeg;base64,' + codeImage" alt="" />
|
|
|
+ <div class="flexBox">
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ auto-complete="on"
|
|
|
+ label-position="left"
|
|
|
+ @submit.native.prevent="handleLogin"
|
|
|
+ >
|
|
|
+ <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 banner" :key="item.id">
|
|
|
+ <el-image :z-index="1" :src="item.imgCarouselUrl"></el-image>
|
|
|
+ </el-carousel-item>
|
|
|
+ </el-carousel>
|
|
|
+ </div>
|
|
|
+ <div class="right-container">
|
|
|
+ <div class="empty-height" />
|
|
|
+ <div class="form-container">
|
|
|
+ <div class="flex title">
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="acitve == 'pas' ? 'acitve' : ''"
|
|
|
+ @click="hanleTabs('pas')"
|
|
|
+ >
|
|
|
+ 密码登录
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="title-item"
|
|
|
+ :class="acitve == 'wei' ? 'acitve' : ''"
|
|
|
+ @click="hanleTabs('wei')"
|
|
|
+ >
|
|
|
+ 微信登录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="acitve == 'pas'">
|
|
|
+ <el-form-item prop="username" class="input-box">
|
|
|
+ <span class="svg-container">
|
|
|
+ <el-image
|
|
|
+ style="width: 20px; height: 20px"
|
|
|
+ :src="require('@/assets/login/icon_001.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image>
|
|
|
+ </span>
|
|
|
+ <el-input
|
|
|
+ ref="username"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ placeholder="请输入用户名"
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ tabindex="1"
|
|
|
+ auto-complete="on"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item prop="password" class="input-box">
|
|
|
+ <span class="svg-container">
|
|
|
+ <el-image
|
|
|
+ style="width: 20px; height: 20px"
|
|
|
+ :src="require('@/assets/login/icon_002.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image>
|
|
|
+ </span>
|
|
|
+ <el-input
|
|
|
+ :key="passwordType"
|
|
|
+ ref="password"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ :type="passwordType"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ name="password"
|
|
|
+ tabindex="2"
|
|
|
+ auto-complete="off"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ />
|
|
|
+ <span class="show-pwd" @click="showPwd">
|
|
|
+ <svg-icon
|
|
|
+ :icon-class="
|
|
|
+ passwordType === 'password' ? 'eye' : 'eye-open'
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <div class="input-box">
|
|
|
+ <el-form-item prop="codeValue">
|
|
|
+ <span class="svg-container">
|
|
|
+ <el-image
|
|
|
+ style="width: 20px; height: 20px"
|
|
|
+ :src="require('@/assets/login/icon_003.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image>
|
|
|
+ </span>
|
|
|
+ <el-input
|
|
|
+ ref="codeValue"
|
|
|
+ v-model="loginForm.codeValue"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ name="codeValue"
|
|
|
+ type="text"
|
|
|
+ tabindex="3"
|
|
|
+ auto-complete="off"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="code" @click.stop="getCode">
|
|
|
+ <img
|
|
|
+ :src="'data:image/jpeg;base64,' + codeImage"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="checkbox">
|
|
|
+ <div class="check-yes">
|
|
|
+ <el-image
|
|
|
+ style="width: 16px; height: 16px"
|
|
|
+ :src="require('@/assets/login/icon_004.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image>
|
|
|
+ <el-image
|
|
|
+ v-if="isRemenberPw"
|
|
|
+ class="yes"
|
|
|
+ style="width: 11px; height: 11px"
|
|
|
+ :src="require('@/assets/login/icon_005.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image>
|
|
|
+ </div>
|
|
|
+ <el-checkbox v-model="isRemenberPw"
|
|
|
+ >记住账号密码</el-checkbox
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="button-container">
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="wei">
|
|
|
+ <div style="width: 250px; height: 250px">
|
|
|
+ <!-- <el-image
|
|
|
+ style="width: 250px; height: 250px"
|
|
|
+ :src="require('@/assets/login/icon_001.png')"
|
|
|
+ fit="contain "
|
|
|
+ ></el-image> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="wei-item-tip">使用手机微信扫码登录</div>
|
|
|
+ <div class="wei-item-text">网页版微信需要配合手机使用</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-checkbox v-model="isRemenberPw">记住密码</el-checkbox>
|
|
|
-
|
|
|
- <div class="button-container">
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- type="primary"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- >登录</el-button
|
|
|
- >
|
|
|
</div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="info-item">
|
|
|
+ <a :href="companyList[0].icpRecordLink">{{
|
|
|
+ companyList[0].icpRecord
|
|
|
+ }}</a>
|
|
|
+ <div style="margin: 0 20px">|</div>
|
|
|
+ <a :href="companyList[0].pubSecurityRecordLink">
|
|
|
+ <el-image
|
|
|
+ style="width: 14px; height: 16px;"
|
|
|
+ :src="require('@/assets/login/icon_0001.png')"
|
|
|
+ ></el-image>
|
|
|
+ {{
|
|
|
+ companyList[0].pubSecurityRecord
|
|
|
+ }}</a>
|
|
|
</div>
|
|
|
+ <div>{{ companyList[0].companyName }}</div>
|
|
|
</div>
|
|
|
- </el-form>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { validUsername } from "@/utils/validate";
|
|
|
import Cookies from "js-cookie";
|
|
|
-import { getCode } from "@/api/user";
|
|
|
+import { getCode, getCompanyList, getList } from "@/api/user";
|
|
|
|
|
|
export default {
|
|
|
name: "Login",
|
|
@@ -146,6 +243,9 @@ export default {
|
|
|
redirect: undefined,
|
|
|
isRemenberPw: false,
|
|
|
codeImage: "",
|
|
|
+ acitve: "pas",
|
|
|
+ banner: [],
|
|
|
+ companyList: [],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
@@ -168,6 +268,8 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.getCode();
|
|
|
+ this.getList();
|
|
|
+ this.getCompanyList();
|
|
|
},
|
|
|
methods: {
|
|
|
// 获取验证码
|
|
@@ -178,7 +280,21 @@ export default {
|
|
|
this.codeImage = res.data.pic;
|
|
|
});
|
|
|
},
|
|
|
+ getCompanyList() {
|
|
|
+ getCompanyList().then((res) => {
|
|
|
+ this.companyList = res.data;
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ getList().then((res) => {
|
|
|
+ this.banner = res.data;
|
|
|
|
|
|
+ });
|
|
|
+ },
|
|
|
+ hanleTabs(val) {
|
|
|
+ this.acitve = val;
|
|
|
+ },
|
|
|
// 显示隐藏密码
|
|
|
showPwd() {
|
|
|
if (this.passwordType === "password") {
|
|
@@ -193,7 +309,7 @@ export default {
|
|
|
|
|
|
// 登录
|
|
|
handleLogin() {
|
|
|
- console.log(this.loginForm);
|
|
|
+ console.log(this.loginForm,'lll');
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
this.loading = true;
|
|
@@ -201,11 +317,8 @@ 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(() => {
|
|
@@ -309,14 +422,22 @@ $back: #333;
|
|
|
color: $back;
|
|
|
height: 47px;
|
|
|
caret-color: $back;
|
|
|
- border-bottom: 1px solid #eaeaea;
|
|
|
+ // border-bottom: 1px solid #eaeaea;
|
|
|
&:-webkit-autofill {
|
|
|
box-shadow: 0 0 0px 1000px $cursor inset !important;
|
|
|
-webkit-text-fill-color: $back !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ .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);
|
|
@@ -325,14 +446,71 @@ $back: #333;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
- .el-checkbox {
|
|
|
- margin-top: 10px;
|
|
|
- margin-left: 6px;
|
|
|
+ .el-checkbox__input {
|
|
|
+ display: none;
|
|
|
}
|
|
|
-
|
|
|
.el-form-item__error {
|
|
|
left: 30px;
|
|
|
}
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+ .show-pwd {
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #4684f4db;
|
|
|
+ }
|
|
|
+ .checkbox {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 1px;
|
|
|
+ .check-yes {
|
|
|
+ position: relative;
|
|
|
+ line-height: 0;
|
|
|
+ }
|
|
|
+ .yes {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /* 可以设置不同的进入和离开动画 */
|
|
|
+ /* 设置持续时间和动画函数 */
|
|
|
+ .slide-fade-enter-active {
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ }
|
|
|
+ .slide-fade-leave-active {
|
|
|
+ transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
|
|
|
+ }
|
|
|
+ .slide-fade-enter, .slide-fade-leave-to
|
|
|
+/* .slide-fade-leave-active for below version 2.1.8 */ {
|
|
|
+ transform: translateX(10px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .wei {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 35px;
|
|
|
+ text-align: center;
|
|
|
+ text-align-last: center;
|
|
|
+ &-item-tip {
|
|
|
+ height: 19px;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 17px;
|
|
|
+ }
|
|
|
+ &-item-text {
|
|
|
+ height: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-top: 17px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
@@ -340,7 +518,83 @@ $back: #333;
|
|
|
$bg: #2d3a4b;
|
|
|
$dark_gray: #889aa4;
|
|
|
$light_gray: #eee;
|
|
|
+.info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 1080px;
|
|
|
+ margin-top: 50px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ text-align-last: center;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.title-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #666666;
|
|
|
+}
|
|
|
+.acitve {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #4684f4;
|
|
|
+}
|
|
|
+.acitve::after {
|
|
|
+ display: block;
|
|
|
+ content: "";
|
|
|
+ margin-top: 7.5px;
|
|
|
+ width: 115px;
|
|
|
+ height: 3px;
|
|
|
+ background-color: #4684f4;
|
|
|
+}
|
|
|
+.flexBox {
|
|
|
+ display: flex;
|
|
|
+ padding-top: calc(50vh - 230px);
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.input-box {
|
|
|
+ position: relative;
|
|
|
+ width: 360px;
|
|
|
+ height: 50px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #e6e6e6;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.input-box:last-child {
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.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%;
|
|
@@ -349,39 +603,35 @@ $light_gray: #eee;
|
|
|
|
|
|
.login-form {
|
|
|
position: relative;
|
|
|
- width: 1070px;
|
|
|
+ width: 1920px;
|
|
|
max-width: 100%;
|
|
|
- padding: 0 35px 0;
|
|
|
- padding-top: calc(50vh - 230px);
|
|
|
- margin: 0 auto;
|
|
|
- overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
.image-container {
|
|
|
- img {
|
|
|
- width: 560px;
|
|
|
- height: 460px;
|
|
|
- }
|
|
|
+ width: 700px;
|
|
|
+ height: 516px;
|
|
|
+ // overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.right-container {
|
|
|
width: 440px;
|
|
|
- height: 460px;
|
|
|
- .empty-height {
|
|
|
- height: 77px;
|
|
|
- }
|
|
|
+ height: 516px;
|
|
|
.form-container {
|
|
|
+ height: 440px;
|
|
|
padding: 20px 30px 27px 40px;
|
|
|
background: #fff;
|
|
|
border-radius: 0 15px 15px 0;
|
|
|
.title {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
+ justify-content: center;
|
|
|
letter-spacing: 4px;
|
|
|
text-align: center;
|
|
|
- padding: 10px 0 13px;
|
|
|
- color: #3a8ee6;
|
|
|
+ margin-bottom: 35px;
|
|
|
+ padding: 10px 0 0 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -399,7 +649,8 @@ $light_gray: #eee;
|
|
|
}
|
|
|
|
|
|
.svg-container {
|
|
|
- padding: 6px 5px 6px 5px;
|
|
|
+ margin: 0 0 0 14px;
|
|
|
+ // padding: 6px 5px 6px 5px;
|
|
|
color: #33aef7;
|
|
|
vertical-align: middle;
|
|
|
width: 30px;
|
|
@@ -429,6 +680,7 @@ $light_gray: #eee;
|
|
|
position: absolute;
|
|
|
right: 30px;
|
|
|
top: 7px;
|
|
|
+ z-index: 99;
|
|
|
cursor: pointer;
|
|
|
img {
|
|
|
height: 30px;
|
|
@@ -442,9 +694,9 @@ $light_gray: #eee;
|
|
|
font-size: 16px;
|
|
|
width: 100%;
|
|
|
height: 45px;
|
|
|
- border-radius: 45px;
|
|
|
- background: #33aef7;
|
|
|
- box-shadow: 2px 3px 8px 0px rgba(5, 155, 245, 0.75);
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #4684f4;
|
|
|
+ box-shadow: 2px 3px 8px 0px #4684f46b;
|
|
|
}
|
|
|
}
|
|
|
}
|