From 7d9cfe6dae6f3bc1016cdacb497e4724e22ca3db Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期一, 28 八月 2023 14:30:37 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.110.209:9001/r/lims-before
---
src/views/login/2.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/src/views/login/2.vue b/src/views/login/2.vue
new file mode 100644
index 0000000..0b3aaf1
--- /dev/null
+++ b/src/views/login/2.vue
@@ -0,0 +1,214 @@
+<template>
+ <div class="login-container">
+ <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left">
+ <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> -->
+ <!-- form 琛ㄥ崟鏍￠獙 -->
+ <div class="title-container">
+ <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="Username" name="username" type="text"
+ tabindex="1" auto-complete="on" />
+ </el-form-item>
+
+ <el-form-item prop="password">
+ <span class="svg-container">
+ <svg-icon icon-class="password" />
+ </span>
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+ placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+ <span class="show-pwd" @click="showPwd">
+ <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+ </span>
+ </el-form-item>
+
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+ @click.native.prevent="handleLogin">Login</el-button>
+ <!-- <div class="tips">
+ <span style="margin-right:20px;">username: admin</span>
+ <span> password: any</span>
+ </div> -->
+ </el-form>
+ </div>
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
+import { get } from "@/api/util/requestUtil.js"
+export default {
+ name: 'Login',
+ data() {
+ const validateUsername = (rule, value, callback) => {
+ if (!validUsername(value)) {
+ callback(new Error('Please enter the correct user name'))
+ } else {
+ callback()
+ }
+ }
+ const validatePassword = (rule, value, callback) => {
+ if (value.length < 6) {
+ callback(new Error('The password can not be less than 6 digits'))
+ } else {
+ callback()
+ }
+ }
+ return {
+ loginForm: {
+ username: '123456',
+ password: '123456'
+ },
+ loginRules: {
+ username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+ password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ },
+ loading: false,
+ passwordType: 'password',
+ redirect: undefined
+ }
+ },
+ watch: {
+ $route: {
+ handler: function (route) {
+ this.redirect = route.query && route.query.redirect
+ },
+ immediate: true
+ }
+ },
+ methods: {
+ showPwd() {
+ if (this.passwordType === 'password') {
+ this.passwordType = ''
+ } else {
+ this.passwordType = 'password'
+ }
+ this.$nextTick(() => {
+ this.$refs.password.focus()
+ })
+ },
+ handleLogin() {
+
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+$bg: #283443;
+$light_gray: #fff;
+$cursor: #fff;
+
+@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: $light_gray;
+ 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;
+
+.login-container {
+ min-height: 100%;
+ width: 100%;
+ background: url('../../assets/404_images/backgroud.png') no-repeat;
+ background-size: 100vw 100vh;
+ overflow: hidden;
+
+ .login-form {
+ position: relative;
+ width: 520px;
+ max-width: 100%;
+ padding: 0 35px;
+ margin: 0 auto;
+ overflow: hidden;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+
+ }
+
+ .tips {
+ font-size: 14px;
+ color: #fff;
+ 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;
+
+ .title {
+ font-size: 26px;
+ color: $light_gray;
+ margin: 0px auto 40px auto;
+ text-align: center;
+ font-weight: bold;
+ }
+ }
+
+ .show-pwd {
+ position: absolute;
+ right: 10px;
+ top: 7px;
+ font-size: 16px;
+ color: $dark_gray;
+ cursor: pointer;
+ user-select: none;
+ }
+}
+</style>
--
Gitblit v1.9.3