From adb74c51618faf025fe1d46bf6b22db895c2608f Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期日, 12 二月 2023 11:16:14 +0800
Subject: [PATCH] 1.提交
---
src/views/login/index.vue | 192 +++++++++++++++++++++++++++++++++++++----------
1 files changed, 151 insertions(+), 41 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index ceeb1f2..094e3e5 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,24 +1,43 @@
<template>
<div class="login-container">
-
<div class="login-container-center">
-
<el-carousel
- :autoplay="false"
+ :autoplay="true"
indicator-position="outside"
height="580px"
:interval="3000"
style="width: 500px;margin-left: 20px"
>
- <el-carousel-item v-for="item in carouselArr" :key="item.title">
- <!-- <h3>{{ item }}</h3>-->
-
- <div :style="{ width:'200px',height:'300px' ,backgroundColor:item.color,margin:'95px 0px 35px 155px'}" />
+ <el-carousel-item>
+ <img src="@/assets/images/img1.png" style="margin-top: -30px">
<div class="itemLabel">
- <div class="title">{{ item.title }}</div>
- <div class="content">{{ item.content }}</div>
+ <p class="title" :style="{color:$store.state.settings.theme}">鏅烘収鐗╄仈</p>
+ <p class="content">鐢熶骇鐜板満鏁版嵁瀹炴椂閲囬泦銆� 浼犻�掋�佸缁村害鍙鍖栧憟鐜�</p>
</div>
</el-carousel-item>
+ <el-carousel-item>
+ <img src="@/assets/images/img2.png" style="margin-top: -30px">
+ <div class="itemLabel">
+ <p class="title" :style="{color:$store.state.settings.theme}">绮剧泭鎬濈淮</p>
+ <p class="content">杩愮敤绮剧泭鎬濇兂鍜孖T绯荤粺鎶� 鏈墦閫犲伐鍘傚埗閫犲崗鍚屽钩鍙�</p>
+ </div>
+ </el-carousel-item>
+ <el-carousel-item>
+ <img src="@/assets/images/img3.png" style="margin-top: -30px">
+ <div class="itemLabel">
+ <p class="title" :style="{color:$store.state.settings.theme}">琛屼笟缁勪欢</p>
+ <p class="content">鍩轰簬鍒堕�犳ā鍨嬪揩閫熺伒娲诲湴 閰嶇疆瀹㈡埛涓撳睘鐨勫簲鐢ㄥ満鏅�</p>
+ </div>
+ </el-carousel-item>
+ <!-- <el-carousel-item v-for="item in carouselArr" :key="item.title">-->
+ <!-- <div :style="{ width:'200px',height:'300px' ,margin:'95px 0px 35px 155px'}">-->
+ <!-- <img :src="item.url" alt="" style="width: 200px;height: 300px">-->
+ <!-- </div>-->
+ <!-- <div class="itemLabel">-->
+ <!-- <div class="title">{{ item.title }}</div>-->
+ <!-- <div class="content">{{ item.content }}</div>-->
+ <!-- </div>-->
+ <!-- </el-carousel-item>-->
</el-carousel>
<el-form
@@ -32,7 +51,7 @@
<div class="title-container">
<div class="title_img" />
- <h3 class="title">鏂板嚡杩埗閫犱簯骞冲彴</h3>
+ <!-- <h3 class="title">鏂板嚡杩埗閫犱簯骞冲彴</h3>-->
</div>
<el-form-item prop="username">
@@ -42,7 +61,7 @@
<el-input
ref="username"
v-model="loginForm.username"
- placeholder="璇疯緭鍏ョ敤鎴峰悕"
+ placeholder="璇疯緭鍏ョ敤鎴风紪鐮�"
name="username"
type="text"
tabindex="1"
@@ -65,7 +84,7 @@
ref="password"
v-model="loginForm.password"
:type="passwordType"
- placeholder="璇疯緭鍏ュ瘑鐮�"
+ placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"
name="password"
tabindex="2"
style="width: 100%;"
@@ -84,7 +103,7 @@
<el-button
:loading="loading"
type="primary"
- style="width:100%;margin-bottom:30px;"
+ style="width:100%;margin-top:20px;letter-spacing: 10px"
@click.native.prevent="handleLogin"
>鐧诲綍
</el-button>
@@ -97,11 +116,34 @@
</el-form>
</div>
+ <el-dialog
+ title="鎻愮ず"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ :show-close="false"
+ top="5vh"
+ class="dialogVisible"
+ >
+ <div style="font-size:18px;">
+ <!-- <i class="el-icon-warning-outline" style="color: #ffef00" />-->
+ 褰撳墠璐﹀彿宸茬櫥褰曪紝鏄惁寮哄埗涓嬬嚎!
+ </div>
+ <span slot="footer" class="dialog-footer">
+
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">鍚�</el-button>
+ <el-button type="primary" @click="dialogVisibleConfirm">鏄�</el-button>
+ </div>
+ </span>
+ </el-dialog>
</div>
</template>
<script>
import { validUsername } from '@/utils/validate'
+import { getCookie, removeCookie, setCookie } from '@/utils/auth'
+import { ForcedOffline } from '@/api/user'
export default {
name: 'Login',
@@ -112,41 +154,43 @@
// } else {
// callback()
// }
- const mPattern = /^\w+$/ // 姝ｅ垯 绛変环浜嶽A-Za-z0-9_]
- if (value.length < 5) {
- callback(new Error('璐﹀彿闀垮害涓嶅皯浜庝簲浣嶏紒'))
- } else if (!mPattern.test(value)) {
- callback(new Error('璐﹀彿涓嶇鍚堣鍒欙紝鍙緭鍏ュ瓧姣嶃�佹暟瀛楀強涓嬪垝绾�'))
+ // const mPattern = /^\w+$/ // 姝ｅ垯 绛変环浜嶽A-Za-z0-9_]
+
+ if (value.length < 1) {
+ callback(new Error('鐢ㄦ埛缂栫爜涓嶈兘涓虹┖锛�'))
} else {
callback()
}
+ // if (value.length < 1) {
+ // callback(new Error('璐﹀彿涓嶈兘涓虹┖锛�'))
+ // } else if (!mPattern.test(value)) {
+ // callback(new Error('璐﹀彿涓嶇鍚堣鍒欙紝鍙緭鍏ュ瓧姣嶃�佹暟瀛楀強涓嬪垝绾�'))
+ // } else {
+ // callback()
+ // }
}
const validatePassword = (rule, value, callback) => {
- if (value.length < 6) {
- callback(new Error('瀵嗙爜闀垮害涓嶅皯浜庡叚浣嶏紒'))
+ if (value.length < 1) {
+ callback(new Error('鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖锛�'))
} else {
callback()
}
}
return {
loginForm: {
- username: 'Admin',
- password: '123456'
+ username: '',
+ password: ''
},
loginRules: {
- username: [{ required: true, trigger: 'blur', validator: validateUsername }],
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
+ password: [{ required: true, trigger: ['blur', 'change'], validator: validatePassword }]
},
loading: false,
passwordType: 'password',
redirect: undefined,
- carouselArr: [
- { color: 'red', title: '鏅烘収鐗╄仈', content: '鐢熶骇鐜板満鏁版嵁瀹炴椂閲囬泦銆佷紶杈俱�佸缁村害鍙鍖栧憟鐜�' },
- { color: 'yellow', title: '鏅烘収鐗╄仈2', content: '鐢熶骇鐜板満鏁版嵁瀹炴椂閲囬泦銆佷紶杈俱�佸缁村害鍙鍖栧憟鐜�2' },
- { color: 'blue', title: '鏅烘収鐗╄仈3', content: '鐢熶骇鐜板満鏁版嵁瀹炴椂閲囬泦銆佷紶杈俱�佸缁村害鍙鍖栧憟鐜�3' }
- ],
focus1: false,
- focus2: false
+ focus2: false,
+ dialogVisible: false
}
},
watch: {
@@ -173,7 +217,12 @@
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
- this.$router.push({ path: this.redirect || '/' })
+ console.log(getCookie('code') === '302', 9999)
+ if (getCookie('code') === '302') {
+ this.dialogVisible = true
+ } else {
+ this.$router.push({ path: this.redirect || '/' })
+ }
this.loading = false
}).catch(() => {
this.loading = false
@@ -183,6 +232,36 @@
return false
}
})
+ },
+
+ dialogVisibleCancel() {
+ removeCookie('username')
+ removeCookie('admin')
+ removeCookie('navTabId')
+ removeCookie('usertype')
+ removeCookie('userid')
+ removeCookie('code')
+ this.dialogVisible = false
+ },
+ async dialogVisibleConfirm() {
+ const usercode = getCookie('navTabId')
+ const username = getCookie('admin')
+ const usertype = getCookie('usertype')
+ const userid = getCookie('userid')
+ const data = {
+ usercode,
+ username,
+ usertype,
+ userid,
+ rid: ''
+ }
+ const res = await ForcedOffline(data)
+ if (res.code === '200') {
+ this.$message.success('寮哄埗涓嬬嚎鎴愬姛锛�')
+ this.dialogVisible = false
+ // this.$router.push({ path: this.redirect || '/' })
+ await this.handleLogin()
+ }
}
}
}
@@ -240,19 +319,16 @@
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
-$main_color:#42b983;
+$main_color: #42b983;
.login-container {
min-height: 100%;
width: 100%;
- background-color: $bg;
+ //background-color: $bg;
overflow: hidden;
- background: url("../../assets/images/login_bg2.jpg") no-repeat;
+ background: url("../../assets/images/login_bg.png") no-repeat;
background-size: 100% 100%;
- opacity: 0.8;
- // ::v-deep input {
- // color: #000;
- //}
+ opacity: 1;
.login-container-center {
width: 1000px;
@@ -319,10 +395,11 @@
align-items: center;
.title_img {
- background: url("../../assets/images/xkd_logo.png");
- width: 200px;
- height: 100px;
+ background: url("../../assets/images/xkd_newlogo.png") no-repeat;
+ width: 300px;
+ height: 200px;
margin: -50px 0 20px;
+ background-size: 100% 100%;
}
.title {
@@ -375,4 +452,37 @@
-webkit-text-fill-color: #000 !important;
}
}
+::v-deep .el-dialog__title{
+ color: red;
+}
+
+::v-deep .el-dialog__body {
+ padding: 20px 20px !important;
+}
+
+::v-deep .el-dialog__footer {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.footerButton {
+ display: flex;
+ justify-content: end;
+}
+::v-deep .dialogVisible .el-button--primary {
+ background-color: #42b983 !important;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ //border: 1px solid $main_color;
+ border: none;
+ padding: 0 20px;
+}
+::v-deep .dialogVisible .el-button--default {
+ height: 30px;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+}
+
</style>
--
Gitblit v1.9.3