update Login page

src/views/pages/login copy.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="aui-wrapper aui-page__login">
+    <div class="aui-content__wrapper">
+      <main class="aui-content">
+        <div class="login-header">
+          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+        </div>
+        <div class="login-body">
+          <h3 class="login-title">{{ $t('login.title') }}</h3>
+          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
+            <el-form-item prop="username">
+              <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+                </span>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
+                <span slot="prefix" class="el-input__icon">
+                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
+                </span>
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="captcha">
+              <el-row :gutter="20">
+                <el-col :span="14">
+                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
+                    <span slot="prefix" class="el-input__icon">
+                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
+                    </span>
+                  </el-input>
+                </el-col>
+                <el-col :span="10" class="login-captcha">
+                  <img :src="captchaPath" @click="getCaptcha()">
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <div class="login-footer">
+          <p>{{ $t('login.copyright') }}</p>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import { getUUID } from '@/utils'
+export default {
+  data () {
+    return {
+      captchaPath: '',
+      dataForm: {
+        username: 'admin',
+        password: 'admin',
+        uuid: 'string',
+        captcha: ''
+      }
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        username: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        password: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        captcha: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created () {
+    this.getCaptcha()
+  },
+  methods: {
+    // 获取验证码
+    getCaptcha () {
+      this.dataForm.uuid = getUUID()
+      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            this.getCaptcha()
+            return this.$message.error(res.msg)
+          }
+          Cookies.set('token', res.data.token)
+          this.$router.replace({ name: 'home' })
+        }).catch(() => {})
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>

src/views/pages/login.vue

@@ -1,110 +1,441 @@
 <template>
-  <div class="aui-wrapper aui-page__login">
+	<div class="login-container">
-    <div class="aui-content__wrapper">
+		<div
-      <main class="aui-content">
+			class="login-background"
-        <div class="login-header">
+			:style="{
-          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+				backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')',
-        </div>
+				backgroundSize: '100% 100%',
-        <div class="login-body">
+				backgroundRepeat: 'no-repeat',
-          <h3 class="login-title">{{ $t('login.title') }}</h3>
+			}"
-          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
+		>
-            <el-form-item prop="username">
+			<div class="login-background-container">
-              <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
+				<div class="back-title">
-                <span slot="prefix" class="el-input__icon">
+					Wel<span>come</span>
-                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
+					<p>
-                </span>
+						<span class="back-title-point" />&gt;&gt;&gt;项目名称&lt;&lt;&lt;
-              </el-input>
+					</p>
-            </el-form-item>
+				</div>
-            <el-form-item prop="password">
+				<img
-              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
+					:src="require('../../assets/img/login.gif')"
-                <span slot="prefix" class="el-input__icon">
+					style="width: 90%; margin-left: 5%"
-                  <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
+					alt=""
-                </span>
+				/>
-              </el-input>
+			</div>
-            </el-form-item>
+		</div>
-            <el-form-item prop="captcha">
+		<el-form
-              <el-row :gutter="20">
+			ref="dataForm"
-                <el-col :span="14">
+			:model="dataForm"
-                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
+			:rules="dataRule"
-                    <span slot="prefix" class="el-input__icon">
+			class="login-form"
-                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
+			autocomplete="on"
-                    </span>
+			label-position="left"
-                  </el-input>
+		>
-                </el-col>
+			<div class="title-container">
-                <el-col :span="10" class="login-captcha">
+				<h3 class="title" :title="'标题'">
-                  <img :src="captchaPath" @click="getCaptcha()">
+					<img
-                </el-col>
+						src="../../assets/img/cnbm.png"
-              </el-row>
+						style="width: 1em; height: 1em; position: relative; top: .15em; margin-right: 12px"
-            </el-form-item>
+						alt=""
-            <el-form-item>
+					/>
-              <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
+					<!-- {{ "title" | i18nFilter }} -->
-            </el-form-item>
+					中建材智能自动化院
-          </el-form>
+				</h3>
-        </div>
+			</div>
-        <div class="login-footer">
+
-          <p>{{ $t('login.copyright') }}</p>
+			<el-form-item prop="username" style="margin: 0px 8.3%">
-        </div>
+				<el-input
-      </main>
+					ref="username"
-    </div>
+					v-model="dataForm.username"
-  </div>
+					:placeholder="'请输入用户名'"
+					name="username"
+					type="text"
+					tabindex="1"
+					autocomplete="on"
+				/>
+			</el-form-item>
+
+			<el-tooltip
+				v-model="capsTooltip"
+				content="Caps lock is On"
+				placement="right"
+				manual
+			>
+				<el-form-item prop="password" style="margin: 8px 8.3%">
+					<el-input
+						:key="passwordType"
+						ref="password"
+						v-model="dataForm.password"
+						:type="passwordType"
+						:placeholder="'请输入密码'"
+						name="password"
+						tabindex="2"
+						autocomplete="on"
+						@keyup.native="checkCapslock"
+						@blur="capsTooltip = false"
+						@keyup.enter.native="dataFormSubmitHandle"
+					/>
+					<span class="show-pwd" @click="showPwd">
+						<!-- <svg-icon
+							:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
+						/> -->
+					</span>
+				</el-form-item>
+			</el-tooltip>
+
+			<el-form-item prop="captcha" style="margin: 0px 8.3%">
+				<el-row :gutter="20">
+					<el-col :span="14">
+						<el-input
+							v-model="dataForm.captcha"
+							:placeholder="$t('login.captcha')"
+						>
+							<!-- <span slot="prefix" class="el-input__icon">
+								<svg class="icon-svg" aria-hidden="true">
+									<use xlink:href="#icon-safetycertificate"></use>
+								</svg>
+							</span> -->
+						</el-input>
+					</el-col>
+					<el-col :span="10" class="login-captcha">
+						<img :src="captchaPath" @click="getCaptcha()" />
+					</el-col>
+				</el-row>
+			</el-form-item>
+			<!-- <lang-select class="login-language" /> -->
+
+			<el-button
+				:loading="loading"
+				type="primary"
+				style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh"
+				@click.native.prevent="dataFormSubmitHandle"
+			>
+				<!-- {{ "login.logIn" | i18nFilter }} -->
+				登录
+			</el-button>
+			<el-row class="login-footer">
+				<el-row class="login-language">
+					<el-col
+						:span="2"
+						:offset="8"
+						:class="['login-language-box', language === 'zh' ? 'isActive' : '']"
+						@click.native="changeLanguage('zh')"
+					>
+						中文
+					</el-col>
+					<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col>
+					<el-col
+						:span="2"
+						:offset="1"
+						:class="['login-language-box', language === 'en' ? 'isActive' : '']"
+						@click.native="changeLanguage('en')"
+					>
+						English
+					</el-col>
+				</el-row>
+				<el-row class="login-copyright">
+					<!-- {{ "copyright.copyright" | i18nFilter }}：{{
+						"copyright.company" | i18nFilter
+					}}&nbsp;&nbsp;&nbsp;&nbsp;{{ "copyright.version" | i18nFilter }}：1.0 -->
+					版权所有: &copy;中建材智能自动化研究院有限公司 2023 v1.0
+				</el-row>
+			</el-row>
+		</el-form>
+	</div>
 </template>
 
 <script>
-import Cookies from 'js-cookie'
+import Cookies from "js-cookie";
-import debounce from 'lodash/debounce'
+import debounce from "lodash/debounce";
-import { getUUID } from '@/utils'
+import { getUUID } from "@/utils";
+
 export default {
-  data () {
+	name: "Login",
-    return {
+	data() {
-      captchaPath: '',
+		return {
-      dataForm: {
+			baseImg: require("../../assets/img/login-back.png"),
-        username: 'admin',
+			coverImgUrl: "",
-        password: 'admin',
+			dataForm: {
-        uuid: 'string',
+				username: "admin",
-        captcha: ''
+				password: "admin",
-      }
+				uuid: "string",
-    }
+				captcha: "",
-  },
+			},
-  computed: {
+			captchaPath: "",
-    dataRule () {
+			passwordType: "password",
-      return {
+			capsTooltip: false,
-        username: [
+			loading: false,
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+			redirect: undefined,
-        ],
+			otherQuery: {},
-        password: [
+		};
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+	},
-        ],
+	computed: {
-        captcha: [
+		language() {
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+			return "zh";
-        ]
+		},
-      }
+		dataRule() {
-    }
+			return {
-  },
+				username: [
-  created () {
+					{
-    this.getCaptcha()
+						required: true,
-  },
+						message: this.$t("validate.required"),
-  methods: {
+						trigger: "blur",
-    // 获取验证码
+					},
-    getCaptcha () {
+				],
-      this.dataForm.uuid = getUUID()
+				password: [
-      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
+					{
-    },
+						required: true,
-    // 表单提交
+						message: this.$t("validate.required"),
-    dataFormSubmitHandle: debounce(function () {
+						trigger: "blur",
-      this.$refs['dataForm'].validate((valid) => {
+					},
-        if (!valid) {
+				],
-          return false
+				captcha: [
-        }
+					{
-        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
+						required: true,
-          if (res.code !== 0) {
+						message: this.$t("validate.required"),
-            this.getCaptcha()
+						trigger: "blur",
-            return this.$message.error(res.msg)
+					},
-          }
+				],
-          Cookies.set('token', res.data.token)
+			};
-          this.$router.replace({ name: 'home' })
+		},
-        }).catch(() => {})
+	},
-      })
+
-    }, 1000, { 'leading': true, 'trailing': false })
+	created() {
-  }
+		this.getCaptcha();
-}
+	},
+
+	methods: {
+		// 检查大写
+		checkCapslock() {},
+		// 显示密码
+		showPwd() {},
+		// 改变语言环境
+		changeLanguage(lang) {},
+		// 获取验证码
+		getCaptcha() {
+			this.dataForm.uuid = getUUID();
+			this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
+		},
+		// 表单提交
+		dataFormSubmitHandle: debounce(
+			function() {
+				this.$refs["dataForm"].validate((valid) => {
+					if (!valid) {
+						return false;
+					}
+					this.$http
+						.post("/login", this.dataForm)
+						.then(({ data: res }) => {
+							if (res.code !== 0) {
+								this.getCaptcha();
+								return this.$message.error(res.msg);
+							}
+							Cookies.set("token", res.data.token);
+							this.$router.replace({ name: "home" });
+						})
+						.catch(() => {});
+				});
+			},
+			1000,
+			{ leading: true, trailing: false }
+		),
+	},
+};
 </script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+// $bg:#283443;
+$light_gray: #fff;
+$cursor: #161616;
+
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+	.login-container .el-input input {
+		color: $cursor;
+		height: 6vh !important;
+	}
+}
+
+/* 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;
+		}
+	}
+
+	.el-form-item {
+		border: 1px solid #d7d8d9;
+		border-radius: 5px;
+		color: #454545;
+		height: 6vh;
+		.el-form-item__content {
+			height: calc(6vh - 2px);
+			line-height: 6vh;
+			.el-input {
+				height: calc(6vh - 2px);
+			}
+		}
+	}
+}
+</style>
+
+<style lang="scss" scoped>
+// $bg:#2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #eee;
+$cursor: #161616;
+
+.login-container {
+	min-height: 100%;
+	width: 100%;
+	background-size: cover;
+	// background-color: $bg;
+	overflow: hidden;
+	.login-background {
+		position: absolute;
+		width: 60%;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.login-background-container {
+			width: 95%;
+			.back-title {
+				color: #26b9de;
+				font-size: 88px;
+				margin-left: 17%;
+				span {
+					color: #fff;
+				}
+				p {
+					font-size: 22px;
+					letter-spacing: 1px;
+					.back-title-point {
+						display: inline-block;
+						width: 16px;
+						height: 16px;
+						border-radius: 8px;
+						background-color: #26b9de;
+						margin-right: 14px;
+					}
+				}
+			}
+		}
+	}
+
+	.login-form {
+		position: absolute;
+		width: 40%;
+		max-width: 100%;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		padding: 0 6.67%;
+		margin: 0 auto;
+		overflow: hidden;
+		background: rgba($color: #fff, $alpha: 1);
+		backdrop-filter: blur(10px);
+		box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1);
+		.login-footer {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			left: 0;
+			margin-bottom: 5vh;
+		}
+		.login-language {
+			font-size: 15px;
+			text-align: center;
+			color: $cursor;
+			margin-bottom: 12px;
+			.login-language-box {
+				cursor: pointer;
+			}
+			.isActive {
+				color: #0b58ff;
+				cursor: auto;
+			}
+		}
+		.login-copyright {
+			text-align: center;
+			color: #c7c7c7;
+			font-size: 15px;
+			line-height: 28px;
+			padding: 0 16%;
+		}
+	}
+
+	.tips {
+		font-size: 14px;
+		color: #fff;
+		margin-bottom: 10px;
+
+		span {
+			&:first-of-type {
+				margin-right: 16px;
+			}
+		}
+	}
+
+	.svg-container {
+		padding: 6px 5px 6px 15px;
+		color: #000;
+		vertical-align: middle;
+		width: 30px;
+		display: inline-block;
+	}
+
+	.title-container {
+		position: relative;
+		margin-top: 18vh;
+
+		.title {
+			font-size: 34px;
+			line-height: 6vh;
+			margin: 0px auto 40px auto;
+			text-align: center;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			word-break: break-all;
+			display: -webkit-box;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
+			letter-spacing: 2px;
+		}
+	}
+
+	.show-pwd {
+		position: absolute;
+		right: 10px;
+		top: 0;
+		font-size: 16px;
+		color: $dark_gray;
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.thirdparty-button {
+		position: absolute;
+		right: 0;
+		bottom: 6px;
+	}
+
+	@media only screen and (max-width: 470px) {
+		.thirdparty-button {
+			display: none;
+		}
+	}
+}
+</style>