update Login page

.gitignore

@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# lock
+package-lock.json

src/views/main-footer.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="footerbar">
+    © 中建材智能自动化研究院有限公司
+    <!-- © {{ 'copyright.company' | i18nFilter }} -->
+  </div>
+</template>
+
+<style lang="scss">
+.footerbar{
+  width: 100%;
+  height: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: #C7C7C7;
+  margin: 5px 0;
+}
+</style>

src/views/main.vue

@@ -1,102 +1,121 @@
 <template>
-  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
+	<div
+		v-loading.fullscreen.lock="loading"
+		:element-loading-text="$t('loading')"
+		:class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]"
+	>
 		<template v-if="!loading">
 			<main-navbar />
 			<main-sidebar />
 			<div class="aui-content__wrapper">
 				<main-content v-if="!$store.state.contentIsNeedRefresh" />
+				<main-footer />
 			</div>
 		</template>
 	</div>
 </template>
 
 <script>
-import MainNavbar from './main-navbar'
-import MainSidebar from './main-sidebar'
-import MainContent from './main-content'
-import debounce from 'lodash/debounce'
+import MainNavbar from "./main-navbar";
+import MainSidebar from "./main-sidebar";
+import MainContent from "./main-content";
+import MainFooter from "./main-footer";
+import debounce from "lodash/debounce";
 export default {
-  provide () {
+	provide() {
 		return {
 			// 刷新
-      refresh () {
-        this.$store.state.contentIsNeedRefresh = true
+			refresh() {
+				this.$store.state.contentIsNeedRefresh = true;
 				this.$nextTick(() => {
-          this.$store.state.contentIsNeedRefresh = false
-        })
-      }
-    }
+					this.$store.state.contentIsNeedRefresh = false;
+				});
 			},
-  data () {
+		};
+	},
+	data() {
 		return {
-      loading: true
-    }
+			loading: true,
+		};
 	},
 	components: {
 		MainNavbar,
 		MainSidebar,
-    MainContent
+		MainFooter,
+		MainContent,
 	},
 	watch: {
-    $route: 'routeHandle'
+		$route: "routeHandle",
 	},
-  created () {
-    this.windowResizeHandle()
-    this.routeHandle(this.$route)
-    Promise.all([
-      this.getUserInfo(),
-      this.getPermissions()
-    ]).then(() => {
-      this.loading = false
-    })
+	created() {
+		this.windowResizeHandle();
+		this.routeHandle(this.$route);
+		Promise.all([this.getUserInfo(), this.getPermissions()]).then(() => {
+			this.loading = false;
+		});
 	},
 	methods: {
 		// 窗口改变大小
-    windowResizeHandle () {
-      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
-      window.addEventListener('resize', debounce(() => {
-        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
-      }, 150))
+		windowResizeHandle() {
+			this.$store.state.sidebarFold =
+				document.documentElement["clientWidth"] <= 992 || false;
+			window.addEventListener(
+				"resize",
+				debounce(() => {
+					this.$store.state.sidebarFold =
+						document.documentElement["clientWidth"] <= 992 || false;
+				}, 150)
+			);
 		},
 		// 路由, 监听
-    routeHandle (route) {
+		routeHandle(route) {
 			if (!route.meta.isTab) {
-        return false
+				return false;
 			}
-      var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)[0]
+			var tab = this.$store.state.contentTabs.filter(
+				(item) => item.name === route.name
+			)[0];
 			if (!tab) {
 				tab = {
-          ...window.SITE_CONFIG['contentTabDefault'],
+					...window.SITE_CONFIG["contentTabDefault"],
 					...route.meta,
-          'name': route.name,
-          'params': { ...route.params },
-          'query': { ...route.query }
+					name: route.name,
+					params: { ...route.params },
+					query: { ...route.query },
+				};
+				this.$store.state.contentTabs = this.$store.state.contentTabs.concat(
+					tab
+				);
 			}
-        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
-      }
-      this.$store.state.sidebarMenuActiveName = tab.menuId
-      this.$store.state.contentTabsActiveName = tab.name
+			this.$store.state.sidebarMenuActiveName = tab.menuId;
+			this.$store.state.contentTabsActiveName = tab.name;
 		},
 		// 获取当前管理员信息
-    getUserInfo () {
-      return this.$http.get('/sys/user/info').then(({ data: res }) => {
+		getUserInfo() {
+			return this.$http
+				.get("/sys/user/info")
+				.then(({ data: res }) => {
 					if (res.code !== 0) {
-          return this.$message.error(res.msg)
+						return this.$message.error(res.msg);
 					}
-        this.$store.state.user.id = res.data.id
-        this.$store.state.user.name = res.data.username
-        this.$store.state.user.superAdmin = res.data.superAdmin
-      }).catch(() => {})
+					this.$store.state.user.id = res.data.id;
+					this.$store.state.user.name = res.data.username;
+					this.$store.state.user.superAdmin = res.data.superAdmin;
+				})
+				.catch(() => {});
 		},
 		// 获取权限
-    getPermissions () {
-      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
+		getPermissions() {
+			return this.$http
+				.get("/sys/menu/permissions")
+				.then(({ data: res }) => {
 					if (res.code !== 0) {
-          return this.$message.error(res.msg)
+						return this.$message.error(res.msg);
 					}
-        window.SITE_CONFIG['permissions'] = res.data
-      }).catch(() => {})
-    }
-  }
-}
+					window.SITE_CONFIG["permissions"] = res.data;
+				})
+				.catch(() => {});
+		},
+	},
+};
 </script>

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="aui-content__wrapper">
-      <main class="aui-content">
-        <div class="login-header">
-          <h2 class="login-brand">{{ $t('brand.lg') }}</h2>
+	<div class="login-container">
+		<div
+			class="login-background"
+			:style="{
+				backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')',
+				backgroundSize: '100% 100%',
+				backgroundRepeat: 'no-repeat',
+			}"
+		>
+			<div class="login-background-container">
+				<div class="back-title">
+					Wel<span>come</span>
+					<p>
+						<span class="back-title-point" />&gt;&gt;&gt;项目名称&lt;&lt;&lt;
+					</p>
 				</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>
+				<img
+					:src="require('../../assets/img/login.gif')"
+					style="width: 90%; margin-left: 5%"
+					alt=""
+				/>
+			</div>
+		</div>
+		<el-form
+			ref="dataForm"
+			:model="dataForm"
+			:rules="dataRule"
+			class="login-form"
+			autocomplete="on"
+			label-position="left"
+		>
+			<div class="title-container">
+				<h3 class="title" :title="'标题'">
+					<img
+						src="../../assets/img/cnbm.png"
+						style="width: 1em; height: 1em; position: relative; top: .15em; margin-right: 12px"
+						alt=""
+					/>
+					<!-- {{ "title" | i18nFilter }} -->
+					中建材智能自动化院
+				</h3>
+			</div>
+
+			<el-form-item prop="username" style="margin: 0px 8.3%">
+				<el-input
+					ref="username"
+					v-model="dataForm.username"
+					:placeholder="'请输入用户名'"
+					name="username"
+					type="text"
+					tabindex="1"
+					autocomplete="on"
+				/>
 			</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>
+
+			<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-input>
 				</el-form-item>
-            <el-form-item prop="captcha">
+			</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
+							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()">
+						<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>
+			<!-- <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>
-        <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'
+import Cookies from "js-cookie";
+import debounce from "lodash/debounce";
+import { getUUID } from "@/utils";
+
 export default {
-  data () {
+	name: "Login",
+	data() {
 		return {
-      captchaPath: '',
+			baseImg: require("../../assets/img/login-back.png"),
+			coverImgUrl: "",
 			dataForm: {
-        username: 'admin',
-        password: 'admin',
-        uuid: 'string',
-        captcha: ''
-      }
-    }
+				username: "admin",
+				password: "admin",
+				uuid: "string",
+				captcha: "",
+			},
+			captchaPath: "",
+			passwordType: "password",
+			capsTooltip: false,
+			loading: false,
+			redirect: undefined,
+			otherQuery: {},
+		};
 	},
 	computed: {
-    dataRule () {
+		language() {
+			return "zh";
+		},
+		dataRule() {
 			return {
 				username: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+					{
+						required: true,
+						message: this.$t("validate.required"),
+						trigger: "blur",
+					},
 				],
 				password: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+					{
+						required: true,
+						message: this.$t("validate.required"),
+						trigger: "blur",
+					},
 				],
 				captcha: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
-        ]
-      }
-    }
+					{
+						required: true,
+						message: this.$t("validate.required"),
+						trigger: "blur",
 					},
-  created () {
-    this.getCaptcha()
+				],
+			};
 		},
+	},
+
+	created() {
+		this.getCaptcha();
+	},
+
 	methods: {
+		// 检查大写
+		checkCapslock() {},
+		// 显示密码
+		showPwd() {},
+		// 改变语言环境
+		changeLanguage(lang) {},
 		// 获取验证码
-    getCaptcha () {
-      this.dataForm.uuid = getUUID()
-      this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
+		getCaptcha() {
+			this.dataForm.uuid = getUUID();
+			this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
 		},
 		// 表单提交
-    dataFormSubmitHandle: debounce(function () {
-      this.$refs['dataForm'].validate((valid) => {
+		dataFormSubmitHandle: debounce(
+			function() {
+				this.$refs["dataForm"].validate((valid) => {
 					if (!valid) {
-          return false
+						return false;
 					}
-        this.$http.post('/login', this.dataForm).then(({ data: res }) => {
+					this.$http
+						.post("/login", this.dataForm)
+						.then(({ data: res }) => {
 							if (res.code !== 0) {
-            this.getCaptcha()
-            return this.$message.error(res.msg)
+								this.getCaptcha();
+								return this.$message.error(res.msg);
 							}
-          Cookies.set('token', res.data.token)
-          this.$router.replace({ name: 'home' })
-        }).catch(() => {})
+							Cookies.set("token", res.data.token);
+							this.$router.replace({ name: "home" });
 						})
-    }, 1000, { 'leading': true, 'trailing': false })
+						.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;
 	}
 }
-</script>
+
+/* 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>