From fdf0f9d0ae6659d4110aee59bcf9216f9e0fac7f Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期一, 02 十二月 2024 15:25:19 +0800
Subject: [PATCH] 1.登录页样式替换
---
src/assets/images/bg3.webp | 0
src/views/login/index.vue | 71 ++----
src/views/login/index_back.vue | 507 ++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 532 insertions(+), 46 deletions(-)
diff --git a/src/assets/images/bg3.webp b/src/assets/images/bg3.webp
new file mode 100644
index 0000000..4df6cdf
--- /dev/null
+++ b/src/assets/images/bg3.webp
Binary files differ
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 0398046..395054e 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,44 +1,7 @@
<template>
<div class="login-container">
+ <div class="bg" />
<div class="login-container-center">
- <el-carousel
- :autoplay="true"
- indicator-position="outside"
- height="580px"
- :interval="3000"
- style="width: 500px;margin-left: 20px"
- >
- <el-carousel-item>
- <img src="@/assets/images/img1.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>
- <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
ref="loginForm"
@@ -105,7 +68,8 @@
<el-button
:loading="loading"
type="primary"
- style="width:100%;margin-top:30px;letter-spacing: 10px;height: 40px;"
+ style="width:100%;margin-top:30px;letter-spacing: 10px;height: 40px;
+ background: #6e67fe !important;"
@click.native.prevent="handleLogin"
>鐧诲綍
</el-button>
@@ -341,23 +305,38 @@
min-height: 100%;
width: 100%;
//background-color: $bg;
+ background-color: #6e67fe;
overflow: hidden;
- background: url("../../assets/images/login_bg.png") no-repeat;
- background-size: 100% 100%;
- opacity: 1;
+ //background: url("../../assets/images/login_bg.png") no-repeat;
+ //background: url("../../assets/images/bg3.webp") no-repeat;
+ //background-size: 100% 100%;
+ //opacity: 1;
+
+ .bg{
+ background: url("../../assets/images/bg3.webp") no-repeat;
+ background-size: 100% 100%;
+ width: 60vw;
+ height: 100vh;
+ //margin-top: 10vh;
+
+ }
.login-container-center {
- width: 1000px;
+ //width: 1000px;
+ width: 546px;
height: 600px;
background-color: #fff;
border-radius: 10px;
z-index: 0.5;
//浣跨洅瀛愬眳涓�
position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
+ right: 5vw;
+ top: calc(50vh - 300px);
+ //left: 50%;
+ //top: 50%;
+ //transform: translate(-50%, -50%);
+ //transform: scale(0.9);
.itemLabel {
display: flex;
justify-content: center;
diff --git a/src/views/login/index_back.vue b/src/views/login/index_back.vue
new file mode 100644
index 0000000..0398046
--- /dev/null
+++ b/src/views/login/index_back.vue
@@ -0,0 +1,507 @@
+<template>
+ <div class="login-container">
+ <div class="login-container-center">
+ <el-carousel
+ :autoplay="true"
+ indicator-position="outside"
+ height="580px"
+ :interval="3000"
+ style="width: 500px;margin-left: 20px"
+ >
+ <el-carousel-item>
+ <img src="@/assets/images/img1.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>
+ <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
+ ref="loginForm"
+ :model="loginForm"
+ :rules="loginRules"
+ class="login-form"
+ auto-complete="on"
+ label-position="left"
+ >
+
+ <div class="title-container">
+ <div class="title_img" />
+ <!-- <h3 class="title">鏂板嚡杩埗閫犱簯骞冲彴</h3>-->
+ </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"
+ class="username"
+ style="width: 100%;"
+ auto-complete="on"
+ @blur="focus1=false"
+ @focus="focus1=true"
+ >
+ <i slot="prefix" :style="{color:focus1?'lightseagreen':'#C0C4CC'}" class="el-input__icon el-icon-user" />
+ </el-input>
+ </el-form-item>
+
+ <el-form-item prop="password" class="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"
+ style="width: 100%;"
+ auto-complete="on"
+ @keyup.enter.native="handleLogin"
+ @blur="focus2=false"
+ @focus="focus2=true"
+ >
+ <i slot="prefix" :style="{color:focus2?'lightseagreen':'#C0C4CC'}" class="el-input__icon el-icon-lock" />
+ </el-input>
+ <span class="show-pwd" @click="showPwd">
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ </span>
+ </el-form-item>
+
+ <el-checkbox v-model="checkedPassword">璁颁綇瀵嗙爜</el-checkbox>
+
+ <el-button
+ :loading="loading"
+ type="primary"
+ style="width:100%;margin-top:30px;letter-spacing: 10px;height: 40px;"
+ @click.native.prevent="handleLogin"
+ >鐧诲綍
+ </el-button>
+
+ <!-- <div class="tips">-->
+ <!-- <span style="margin-right:20px;">username: admin</span>-->
+ <!-- <span> password: any</span>-->
+ <!-- </div>-->
+
+ </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, UserTorgData } from '@/api/user'
+import { ButtonData } from '@/api/basicSettings'
+import Vue from 'vue'
+
+export default {
+ name: 'Login',
+ data() {
+ const validateUsername = (rule, value, callback) => {
+ // if (!validUsername(value)) {
+ // callback(new Error('璇疯緭鍏ユ纭殑鐢ㄦ埛鍚嶏紒'))
+ // } else {
+ // callback()
+ // }
+ // 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 < 1) {
+ callback(new Error('鐢ㄦ埛瀵嗙爜涓嶈兘涓虹┖锛�'))
+ } else {
+ callback()
+ }
+ }
+ return {
+ loginForm: {
+ username: '',
+ password: ''
+ },
+ loginRules: {
+ username: [{ required: true, trigger: ['blur', 'change'], validator: validateUsername }],
+ password: [{ required: true, trigger: ['blur', 'change'], validator: validatePassword }]
+ },
+ loading: false,
+ passwordType: 'password',
+ checkedPassword: false,
+ redirect: undefined,
+ focus1: false,
+ focus2: false,
+ dialogVisible: false
+ }
+ },
+ watch: {
+ $route: {
+ handler: function(route) {
+ this.redirect = route.query && route.query.redirect
+ },
+ immediate: true
+ }
+ },
+ mounted() {
+ const account = localStorage.getItem('account')
+ if (account) {
+ this.loginForm.username = localStorage.getItem('account')
+ this.loginForm.password = localStorage.getItem('password')
+ this.checkedPassword = true
+ }
+ },
+ methods: {
+ showPwd() {
+ if (this.passwordType === 'password') {
+ this.passwordType = ''
+ } else {
+ this.passwordType = 'password'
+ }
+ this.$nextTick(() => {
+ this.$refs.password.focus()
+ })
+ },
+ handleLogin() {
+ this.$refs.loginForm.validate(valid => {
+ if (valid) {
+ this.loading = true
+ this.$store.dispatch('user/login', this.loginForm).then(() => {
+ if (getCookie('code') === '302') {
+ this.dialogVisible = true
+ } else {
+ if (this.checkedPassword) {
+ localStorage.setItem('account', this.loginForm.username)
+ localStorage.setItem('password', this.loginForm.password)
+ } else {
+ localStorage.removeItem('account')
+ localStorage.removeItem('password')
+ }
+
+ this.$router.push({ path: this.redirect || '/' })
+ // ButtonData().then(res => {
+ // localStorage.setItem('ButtonData', JSON.stringify(res.data))
+ // })
+ // UserTorgData({ usercode: getCookie('usercode') }).then(res => {
+ // setCookie('username', res.data.user)
+ // // sessionStorage.setItem('username', res.data.user)
+ // sessionStorage.setItem('torg', JSON.stringify(res.data.torg))
+ // })
+ }
+ this.loading = false
+ }).catch(() => {
+ this.loading = false
+ })
+ } else {
+ console.log('error submit!!')
+ return false
+ }
+ })
+ },
+
+ dialogVisibleCancel() {
+ // localStorage.removeItem('token')
+ this.dialogVisible = false
+ },
+ async dialogVisibleConfirm() {
+ const data = {
+ token: localStorage.getItem('token'),
+ rid: ''
+ }
+ const res = await ForcedOffline(data)
+ if (res.code === '200') {
+ this.$notify.success('寮哄埗涓嬬嚎鎴愬姛锛�')
+ this.dialogVisible = false
+ this.$router.push({ path: this.redirect || '/' })
+ // await this.handleLogin()
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #000;
+$cursor: #000;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+ .login-container .el-input input {
+ color: $cursor;
+ }
+}
+
+/* reset element-ui css */
+.login-container {
+ .el-input {
+ display: inline-block;
+ height: 47px;
+ width: 85%;
+
+ input {
+ background: transparent;
+ border: 0px;
+ -webkit-appearance: none;
+ border-radius: 0px;
+ //padding: 12px 5px 12px 15px;
+ color: #000;;
+ height: 47px;
+ caret-color: $cursor; //鏀瑰彉鍏夋爣棰滆壊
+
+ &:-webkit-autofill {
+ box-shadow: 0 0 0px 1000px $bg inset !important;
+ -webkit-text-fill-color: $cursor !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>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+$main_color: #42b983;
+
+.login-container {
+ min-height: 100%;
+ width: 100%;
+ //background-color: $bg;
+ overflow: hidden;
+ background: url("../../assets/images/login_bg.png") no-repeat;
+ background-size: 100% 100%;
+ opacity: 1;
+
+ .login-container-center {
+ width: 1000px;
+ height: 600px;
+ background-color: #fff;
+ border-radius: 10px;
+ z-index: 0.5;
+ //浣跨洅瀛愬眳涓�
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+
+ .itemLabel {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+
+ .title {
+ font-size: 20px;
+ color: lightseagreen;
+ margin-bottom: 10px;
+ }
+
+ .content {
+ width: 180px;
+ }
+
+ .login-form {
+ position: absolute;
+ width: 400px;
+ top: 134px;
+ right: 72px;
+ }
+
+ }
+
+ .tips {
+ font-size: 14px;
+ color: #000;
+ margin-bottom: 10px;
+
+ span {
+ &:first-of-type {
+ margin-right: 16px;
+ }
+ }
+ }
+
+ .svg-container {
+ padding: 6px 5px 6px 15px;
+ color: $dark_gray;
+ vertical-align: middle;
+ width: 30px;
+ display: inline-block;
+ }
+
+ .title-container {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .title_img {
+ background: url("../../assets/images/xkd_newlogo.png") no-repeat;
+ width: 300px;
+ height: 200px;
+ margin: -50px 0 20px;
+ background-size: 100% 100%;
+ }
+
+ .title {
+ font-size: 26px;
+ color: #000000;
+ margin: 0px auto 40px auto;
+ text-align: center;
+ //font-weight: lighter;
+
+ }
+ }
+
+ .show-pwd {
+ position: absolute;
+ right: 10px;
+ top: 7px;
+ font-size: 16px;
+ color: $dark_gray;
+ cursor: pointer;
+ user-select: none;
+ }
+
+ //.username{
+ // border: 1px solid red;
+ //}
+
+ ::v-deep .el-input__inner {
+ border-radius: 5px;
+ background: #ffffff;
+ padding-left: 35px;
+ line-height: 40px;
+ border: 1px solid #eee;
+ }
+
+ ::v-deep .el-input__icon {
+ color: #000;
+ }
+
+ ::v-deep .el-input__inner:focus {
+ border: 1px solid $main_color;
+ }
+
+ ::v-deep .el-input__icon:focus {
+ color: $main_color;
+ }
+
+ ::v-deep .el-input input:-webkit-autofill {
+ -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
+ box-shadow: 0 0 0px 1000px #fff inset !important;
+ -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