From c5558ae0a6152b56b2b487b94f3c616648104edd Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 30 Oct 2024 18:10:32 +0800
Subject: [PATCH] 页面登录，请求拦截，响应拦截，持久化存储，路由拦截等处理
---
src/page/login.vue | 146 ++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 133 insertions(+), 13 deletions(-)
diff --git a/src/page/login.vue b/src/page/login.vue
index daca173..aa7b179 100644
--- a/src/page/login.vue
+++ b/src/page/login.vue
@@ -1,21 +1,141 @@
-<!--
- * @Author: shuishen 1109946754@qq.com
- * @Date: 2024-10-25 16:35:51
- * @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-10-25 16:36:07
- * @FilePath: \bigScreen\src\page\login.vue
- * @Description:
- *
- * Copyright (c) 2024 by shuishen, All Rights Reserved.
--->
<template>
- <div>
-
+ <div class="box">
+ <div class="login">
+ <div class="logintitle">
+ 吉水化工园区“一园一策一图”VR平台
+ </div>
+ <div class="getingo">
+ <p class="title">用户登录</p>
+ <el-input type="text" class="input username" v-model="loginForm.username" />
+ <el-input type="password" class="input password" v-model="loginForm.password" />
+ <el-button class="loginto" type="primary" @click="login">登录</el-button>
+ </div>
+ </div>
</div>
</template>
<script setup>
+import { useRouter, useRoute } from 'vue-router'
+let router = useRouter()
+import { ElLoading } from 'element-plus'
+import { useLogin } from 'store/login'
+const store = useLogin()
+const loginForm = reactive({
+ //租户ID
+ tenantId: '000000',
+ //部门ID
+ deptId: '',
+ //角色ID
+ roleId: '',
+ //用户名
+ username: '',
+ //密码
+ password: '',
+ //账号类型
+ type: 'account',
+ //验证码的值
+ code: '',
+ //验证码的索引
+ key: '',
+ //预加载白色背景
+ image:
+ 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+ flag: 1,
+})
+
+const login = () => {
+ const loading = ElLoading.service({
+ lock: true,
+ text: '登录中,请稍后。。。',
+ background: 'rgba(0, 0, 0, 0.7)',
+ })
+
+ store.LoginByUsername(loginForm).then(res => {
+ console.log(res, 66666)
+ router.push('/layout')
+ loading.close()
+ }).catch(() => {
+ loading.close()
+ })
+}
</script>
-<style lang="scss" scoped></style>
\ No newline at end of file
+<style lang="scss" scoped>
+.box {
+ width: 100vw;
+ height: 100vh;
+ box-sizing: border-box;
+
+ .login {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/images/login-bg.png');
+ background-size: 100% 100%;
+ position: relative;
+
+ .logintitle {
+ position: absolute;
+ top: 18%;
+ right: 25%;
+ transform: translateX(50%);
+ font-size: 40px;
+ color: #00afe9;
+ }
+
+ .getingo {
+ width: 500px;
+ position: absolute;
+ text-align: center;
+ top: 45%;
+ right: 25%;
+ transform: translateY(-40%) translateX(50%);
+ color: #ffffff;
+ padding: 30px;
+ background: url('../assets/images/login-content-bg.png'),
+ url('../assets/images/left-top.png') no-repeat left top,
+ url('../assets/images/left-bottom.png') no-repeat left bottom,
+ url('../assets/images/right-top.png') no-repeat right top,
+ url('../assets/images/right-bottom.png') no-repeat right bottom;
+ background-repeat: no-repeat;
+ background-size: 100% 100%, 25px, 25px, 25px, 25px;
+
+ .title {
+ font-size: 20px;
+ }
+
+ :deep().el-input__inner {
+ padding: 0px;
+ }
+
+ .input {
+ margin: 30px 0;
+ width: 300px;
+ padding: 10px 0px;
+ background-color: rgba(0, 0, 0, 0);
+ color: #ffffff;
+ padding-left: 40px;
+ border-width: 0px;
+ font-size: 18px;
+ }
+
+ .username {
+ background: url('../assets/images/login-input.png') no-repeat,
+ url('../assets/images/user-icon.png') no-repeat 10px center;
+ background-size: 100% 100%, 20px;
+ }
+
+ .password {
+ background: url('../assets/images/login-input.png') no-repeat,
+ url('../assets/images/password-icon.png') no-repeat 10px center;
+ background-size: 100% 100%, 20px;
+ }
+
+ .loginto {
+ width: 300px;
+ margin: 30px 0;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3