From 27a476e32c30c0d3a6319ff20c1e8586ad47d804 Mon Sep 17 00:00:00 2001
From: zhouwx <1175765986@qq.com>
Date: 星期五, 12 十二月 2025 09:41:42 +0800
Subject: [PATCH] 修改
---
src/views/homePage.vue | 302 +++++++++----------------------------------------
1 files changed, 58 insertions(+), 244 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 115fc56..cb4614f 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,274 +1,93 @@
<template>
<div class="login">
- <img class="pics1" src="src/assets/images/login-data.png">
- <img class="pics2" src="src/assets/images/login-search.png">
- <div class="login-panel">
- <div class="login-img">
- <img src="src/assets/images/loginImg.png">
- </div>
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">智慧安评</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- size="large"
- auto-complete="off"
- placeholder="账号"
- >
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
- </el-form-item>
- <div style="display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px">
- <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
- <div v-if="isRegister">
- <el-button link type="primary" @click="openRegist">立即注册</el-button>
- </div>
- </div>
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width:100%;"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- </el-form-item>
- </el-form>
- </div>
+ <login-form ref="loginRef"/>
<!-- 底部 -->
-<!-- <div class="el-login-footer">-->
-<!-- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
-<!-- </div>-->
+ <div class="el-login-footer">
+ <span>Copyright ©2023-{{nowYear}} All Rights Reserved.</span>
+ </div>
</div>
- <register ref="regRef"/>
</template>
<script setup>
-import {onMounted, ref, watch, defineAsyncComponent, nextTick} from "vue"
-import { getCodeImg } from "@/api/login";
-import Cookies from "js-cookie";
-import { encrypt, decrypt } from "@/utils/jsencrypt";
+import {onMounted, ref, reactive, watch, defineAsyncComponent, nextTick, onUnmounted} from "vue"
import useUserStore from '@/store/modules/user'
-import { Register } from "@/layout/components";
+import LoginForm from './components/loginForm'
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
+const nowYear = ref();
+// 时间格式化
+const timeForm = {
+ hour12: false,
+ year: 'numeric',
+ month: '2-digit',
+ day: '2-digit',
+ hour: '2-digit',
+ minute: '2-digit',
+ second: '2-digit'
+}
-const userStore = useUserStore()
-const route = useRoute();
-const router = useRouter();
-const { proxy } = getCurrentInstance();
+const noticeRef = ref(null)
-const loginForm = ref({
- username: "admin",
- password: "Admin@123.com",
- rememberMe: false,
- code: "",
- uuid: ""
-});
+const state = reactive({
+ activeMenu: 1,
+ date: '',
+ weekDay: '',
+ dayTime: '',
+ checkDetails: false
+})
-const loginRules = {
- username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
- password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
- code: [{ required: true, trigger: "change", message: "请输入验证码" }]
+// 当前时间
+const getDateTime = () => {
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ state.date = curTime.slice(0, 10);
+ nowYear.value = curTime.slice(0, 4);
+ let week = ['日', '一', '二', '三', '四', '五', '六'];
+ let day = new Date().getDay();
+ state.weekDay = '星期' + week[day];
+ let curHour = Number(curTime.slice(10, 13));
+ if (curHour >= 5 && curHour <= 10) {
+ state.dayTime = '上午';
+ }
+ if (curHour > 10 && curHour <= 12) {
+ state.dayTime = '中午';
+ }
+ if (curHour > 12 && curHour <= 18) {
+ state.dayTime = '下午';
+ }
+ if (curHour > 18 && curHour <= 22) {
+ state.dayTime = '晚上';
+ }
+ if (curHour > 22) {
+ state.dayTime = '午夜';
+ }
};
-const codeUrl = ref("");
-const loading = ref(false);
-const regRef = ref(null)
-// 验证码开关
-const captchaEnabled = ref(true);
-// 注册开关
-const isRegister = ref(true);
+
const redirect = ref(undefined);
onMounted(()=>{
-
+ getDateTime();
})
-const openRegist = ()=>{
- regRef.value.dialogVisible = true
-}
+onUnmounted(()=>{
+
+})
watch(route, (newRoute) => {
redirect.value = newRoute.query && newRoute.query.redirect;
}, { immediate: true });
-function handleLogin() {
- proxy.$refs.loginRef.validate(valid => {
- if (valid) {
- loading.value = true;
- // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
- if (loginForm.value.rememberMe) {
- Cookies.set("username", loginForm.value.username, { expires: 30 });
- Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
- Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
- } else {
- // 否则移除
- Cookies.remove("username");
- Cookies.remove("password");
- Cookies.remove("rememberMe");
- }
- // 调用action的登录方法
- userStore.login(loginForm.value).then(() => {
- const query = route.query;
- const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
- if (cur !== "redirect") {
- acc[cur] = query[cur];
- }
- return acc;
- }, {});
- router.push({ path: redirect.value || "/", query: otherQueryParams });
- }).catch(() => {
- loading.value = false;
- // 重新获取验证码
- if (captchaEnabled.value) {
- getCode();
- }
- });
- }
- });
-}
-
-function getCode() {
- getCodeImg().then(res => {
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
- if (captchaEnabled.value) {
- codeUrl.value = "data:image/gif;base64," + res.img;
- loginForm.value.uuid = res.uuid;
- }
- });
-}
-
-function getCookie() {
- const username = Cookies.get("username");
- const password = Cookies.get("password");
- const rememberMe = Cookies.get("rememberMe");
- loginForm.value = {
- username: username === undefined ? loginForm.value.username : username,
- password: password === undefined ? loginForm.value.password : decrypt(password),
- rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
- };
-}
-
-getCode();
-getCookie();
</script>
<style lang='scss' scoped>
.login {
+ width: 100%;
display: flex;
- position: relative;
justify-content: center;
- align-items: center;
height: 100%;
- background-image: url("../assets/images/login-bg.jpg");
-}
-.pics1{
- position: absolute;
- width: 500px;
- bottom: 0;
- right: 0;
- opacity: 0.5;
-}
-.pics2{
- position: absolute;
- width: 500px;
- top: 20px;
- left: 20px;
- opacity: 0.5;
-}
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #333;
- font-size: 1.4rem;
-}
-.login-panel{
- border-radius: 1.2rem;
- background: #ffffff;
- width: 800px;
- display: flex;
- justify-content: center;
- align-items: center;
- transform: translateY(-20%);
- box-shadow: 15px 15px 30px rgba(0,0,0,.1);
-}
-.login-img{
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- img{
- width: 80%;
- }
-}
-.login-form {
- flex: 1;
- padding: 25px;
- .el-input {
- height: 44px;
- input {
- height: 44px;
- }
- }
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
- }
-}
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-.login-code {
- width: 33%;
- height: 40px;
- float: right;
- img {
- cursor: pointer;
- vertical-align: middle;
- }
}
-.el-form-item--default{
- margin-bottom: 24px;
-}
-
-::v-deep(.el-form-item__content){
- display: flex;
- justify-content: space-between;
-}
.el-login-footer {
height: 40px;
line-height: 40px;
@@ -277,12 +96,7 @@
width: 100%;
text-align: center;
color: #fff;
- font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
-}
-.login-code-img {
- height: 40px;
- padding-left: 12px;
}
</style>
--
Gitblit v1.9.2