From 0d626ae57149d5ed40a32bd8b808ca6069aa6d5e Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期日, 14 一月 2024 16:35:08 +0800
Subject: [PATCH] update
---
src/views/login/index.vue | 187 ++++++++++++++++++++++++++++++++++++++--------
1 files changed, 153 insertions(+), 34 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index b82c3ac..6a7938d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,37 +1,94 @@
<template>
- <div class="login-container">
- <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
- <h3 class="title">鑸槦MDC灞曠ず绯荤粺</h3>
- <el-form-item prop="username">
+ <Home>
+ <template slot="test"><span style="color: red">123</span></template>
+ <template slot="content">
+ <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+ <el-form-item prop="username" class="username">
<span class="svg-container svg-container_login">
<svg-icon icon-class="user" />
</span>
- <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="鐢ㄦ埛鍚�" />
+ <el-input class="home-input" name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="璇疯緭鍏ョ敤鎴峰悕" />
</el-form-item>
- <el-form-item prop="password">
+ <el-form-item prop="password" class="username">
+ <span class="svg-container">
+ <svg-icon icon-class="password"></svg-icon>
+ </span>
+ <el-input class="home-input" name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"
+ placeholder="璇疯緭鍏ュ瘑鐮�"></el-input>
+ <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>
+ </el-form-item>
+ <el-form-item style="text-align: center;margin-top: 30px">
+ <div class="btn" :loading="loading" @click="handleLogin">
+ 鐧诲綍
+ </div>
+ </el-form-item>
+ </el-form>
+ <p class="compName">鍗冩枃绉戞妧</p><el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+ <el-form-item prop="username" class="username">
+ <span class="svg-container svg-container_login">
+ <svg-icon icon-class="user" />
+ </span>
+ <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="璇疯緭鍏ョ敤鎴峰悕" />
+ </el-form-item>
+ <el-form-item prop="password" class="username">
<span class="svg-container">
<svg-icon icon-class="password"></svg-icon>
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"
- placeholder="瀵嗙爜"></el-input>
+ placeholder="璇疯緭鍏ュ瘑鐮�"></el-input>
<span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>
</el-form-item>
- <el-form-item>
- <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+ <el-form-item style="text-align: center;margin-top: 30px">
+ <div class="btn" :loading="loading" @click="handleLogin">
鐧诲綍
- </el-button>
+ </div>
</el-form-item>
</el-form>
- <p class="copy-right"><span>鑸槦鍥介檯鑷姩鎺у埗宸ョ▼鏈夐檺鍏徃</span></p>
- </div>
+ <p class="compName">鍗冩枃绉戞妧</p>
+ </template>
+ </Home>
+ <!-- <div class="login-container">
+ <div class="header">
+ <img src="~@/assets/img/login/logo.png" alt="">
+ </div>
+ <div class="content">
+ <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+ <el-form-item prop="username" class="username">
+ <span class="svg-container svg-container_login">
+ <svg-icon icon-class="user" />
+ </span>
+ <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="璇疯緭鍏ョ敤鎴峰悕" />
+ </el-form-item>
+ <el-form-item prop="password" class="username">
+ <span class="svg-container">
+ <svg-icon icon-class="password"></svg-icon>
+ </span>
+ <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="off"
+ placeholder="璇疯緭鍏ュ瘑鐮�"></el-input>
+ <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" v-show="pwdType==='password'"/><svg-icon icon-class="eyeopen" v-show="pwdType!=='password'"/></span>
+ </el-form-item>
+ <el-form-item style="text-align: center;margin-top: 30px">
+ <div class="btn" :loading="loading" @click="handleLogin">
+ 鐧诲綍
+ </div>
+ </el-form-item>
+ </el-form>
+ <p class="compName">鍗冩枃绉戞妧</p>
+ </div>
+ <div class="footer">
+ </div>
+ </div> -->
</template>
<script>
import { isvalidUsername } from '@/utils/validate'
import { Message } from 'element-ui'
-
+import Home from '@/components/home/index'
export default {
name: 'login',
+ components: {
+ Home
+ },
data() {
const validateUsername = (rule, value, callback) => {
if (!isvalidUsername(value)) {
@@ -51,8 +108,8 @@
}
return {
loginForm: {
- username: '',
- password: ''
+ username: 'admin',
+ password: 'password'
},
loginRules: {
username: [
@@ -82,9 +139,10 @@
this.loading = true
this.$store.dispatch('Login', this.loginForm).then((ret) => {
this.loading = false
- if (ret.code === 1) {
+ console.log('------')
+ if (ret.result === 'SUCCESS') {
// this.$router.push({ path: `/room/${this.$store.getters.workshopList[0].roomId}` })
- this.$router.push({ path: `/dashboard` })
+ this.$router.push({ path: `/home/index` })
} else {
Message({
message: ret.msg,
@@ -110,32 +168,25 @@
$light_gray:#eee;
/* reset element-ui css */
-.login-container {
- .el-input {
+ .login-form .el-input {
display: inline-block;
- height: 47px;
+ // height: 47px;
width: calc(100% - 40px);
input {
background: transparent;
border: 0px;
-webkit-appearance: none;
border-radius: 0px;
- padding: 12px 5px 12px 15px;
+ // padding: 12px 5px 12px 15px;
color: $light_gray;
- height: 47px;
+ // height: 47px;
&:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
-webkit-text-fill-color: #fff !important;
}
}
}
- .el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
- background: rgba(0, 0, 0, 0.1);
- border-radius: 5px;
- color: #454545;
- }
-}
+
</style>
@@ -149,10 +200,79 @@
width: 100%;
background-color: $bg;
overflow: auto;
- .login-form {
- max-width: 520px;
- padding: 35px 35px 15px 35px;
- margin: 120px auto 0;
+ display: flex;
+ flex-direction: column;
+ .header {
+ padding-left: 30px;
+ height: 94px;
+ flex: 0 0 auto;
+ background: url('~@/assets/img/login/top.png') 100% 100% no-repeat;
+ // background-size: cover;
+ img {
+ display: inline-block;
+ width: 500px;
+ max-height: 91px;
+ }
+ }
+ .content {
+ flex: 1 1 auto;
+ background-image: url('~@/assets/img/login/bg.png');
+ background-size: cover;
+ background-repeat: no-repeat;
+ position: relative;
+ .compName {
+ font-size: 23px;
+ color: #FFFFFF;
+ line-height: 33px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ text-align: center;
+ bottom: 30px;
+ }
+ }
+ .footer {
+ height: 46px;
+ background-image: url('~@/assets/img/login/footer.png');
+ background-size: cover;
+ background-repeat: no-repeat;
+ flex: 0 0 auto;
+ }
+}
+.login-form {
+ position: absolute;
+ left: 50%;
+ top: 20%;
+ transform: translate(-50%,0);
+ width: 668px;
+ height: 340px;
+ background-image: url('~@/assets/img/login/logo_bg.png');
+ background-size: contain;
+ background-repeat: no-repeat;
+ padding: 60px 26px;
+ // margin: 120px auto 0;
+ // background: #161A19;
+ .username {
+ background: linear-gradient(90deg, rgba(83,198,255,0) 0%, rgba(83,198,255,0.23) 26%, rgba(83,198,255,0) 100%);
+border: 1px solid;
+border-image: linear-gradient(90deg, rgba(83, 198, 255, 0), rgba(83, 198, 255, 1), rgba(83, 198, 255, 0)) 1 1;
+ }
+ .username ~ .username {
+ margin-top: 30px;
+ }
+ }
+ .btn {
+ display: inline-block;
+ width: 293px;
+ height: 57px;
+ text-align: center;
+ line-height: 57px;
+ background-image: url('~@/assets/img/login/btn_bg.png');
+ background-size: contain;
+ background-repeat: no-repeat;
+ font-size: 19px;
+ color: #379BC7;
+ cursor: pointer;
}
.svg-container {
padding: 6px 5px 6px 15px;
@@ -191,5 +311,4 @@
text-align: center;
font-size: 70%;
}
-}
</style>
--
Gitblit v1.9.3