|
@@ -0,0 +1,205 @@
|
|
|
+<template>
|
|
|
+ <div style="margin-top: 30%">
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="form-control" action autocomplete="on">
|
|
|
+ <img class="title" src="../../assets/images/logo.png" />
|
|
|
+ <div class="input-field">
|
|
|
+ <input ref="account" v-model="loginForm.account" class="input" type="text" />
|
|
|
+ <label class="label" for="input">工号/姓名</label>
|
|
|
+ </div>
|
|
|
+ <div class="input-field">
|
|
|
+ <input ref="pwd" v-model="loginForm.pwd" class="input" type="password" autocomplete="false" />
|
|
|
+ <label class="label" for="input">密码</label>
|
|
|
+ </div>
|
|
|
+ <button class="submit-btn" @click.prevent="handleLogin()">进入</button>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { login } from '@/api/user';
|
|
|
+import { setToken, getToken } from '@/utils/auth';
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请输入账号'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请输入密码'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ loadings: false,
|
|
|
+ showboj: true,
|
|
|
+ activeName: 'first',
|
|
|
+ loginForm: {
|
|
|
+ account: '',
|
|
|
+ pwd: '',
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ account: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: validateUsername,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pwd: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: validatePassword,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ capsTooltip: false,
|
|
|
+ loading: false,
|
|
|
+ showDialog: false,
|
|
|
+ redirect: undefined,
|
|
|
+ otherQuery: {},
|
|
|
+ sysCfg: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ const that = this;
|
|
|
+ let tok = new RegExp('(^|&)token=([^&]*)(&|$)', 'i');
|
|
|
+ let t = window.location.search.substr(1).match(tok);
|
|
|
+ if (t != null) {
|
|
|
+ let token = decodeURIComponent(t[2]);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ if (this.loginForm.account === '') {
|
|
|
+ this.$refs.account.focus();
|
|
|
+ } else if (this.loginForm.pwd === '') {
|
|
|
+ this.$refs.pwd.focus();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ methods: {
|
|
|
+ // 登录
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ login(this.loginForm).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ setToken(res.data.token);
|
|
|
+ // 登录成功,重新跳转到主页
|
|
|
+ this.$router.push(`/index`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.logo {
|
|
|
+ height: 100%;
|
|
|
+ margin-top: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes text-shadow-drop-top {
|
|
|
+ 0% {
|
|
|
+ text-shadow: 0 0 0 transparent;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ text-shadow: 0 -6px 8px rgba(0, 0, 0, 0.35);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes focus-in-expand {
|
|
|
+ 0% {
|
|
|
+ letter-spacing: -0.5em;
|
|
|
+ filter: blur(12px);
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ filter: blur(0);
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-control {
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 25px;
|
|
|
+}
|
|
|
+.title {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+.input-field {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.input {
|
|
|
+ margin-top: 22px;
|
|
|
+ width: 100%;
|
|
|
+ outline: none;
|
|
|
+ border-radius: 8px;
|
|
|
+ height: 45px;
|
|
|
+ border: 1.5px solid #ecedec;
|
|
|
+ background: transparent;
|
|
|
+}
|
|
|
+.input:focus {
|
|
|
+ border: 1.5px solid #1989FA;
|
|
|
+}
|
|
|
+.input-field .label {
|
|
|
+ position: absolute;
|
|
|
+ top: 25px;
|
|
|
+ left: 15px;
|
|
|
+ color: #ccc;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 3;
|
|
|
+}
|
|
|
+.input-field .input:focus ~ .label,
|
|
|
+.input-field .input:valid ~ .label {
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1989FA;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+}
|
|
|
+.submit-btn {
|
|
|
+ margin-top: 30px;
|
|
|
+ height: 55px;
|
|
|
+ background: #f2f2f2;
|
|
|
+ border-radius: 11px;
|
|
|
+ border: 0;
|
|
|
+ outline: none;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: linear-gradient(180deg, #363636 0%, #1b1b1b 50%, #000000 100%);
|
|
|
+ box-shadow: 0px 0px 0px 0px #ffffff, 0px 0px 0px 0px #000000;
|
|
|
+ transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.submit-btn:hover {
|
|
|
+ box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 4px #0000003a;
|
|
|
+}
|
|
|
+</style>
|