From 79f08099c190a78beb676c6895804530739c2a0b Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期五, 29 十一月 2024 14:48:35 +0800
Subject: [PATCH] 修改首页
---
src/views/homePage.vue | 141 ++++++++++++++++++++++++++++++++++-------------
1 files changed, 102 insertions(+), 39 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 078084f..48450d3 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,18 +1,20 @@
<template>
<div class="login">
<div class="title">
- <div class="logo">
- <img class="pics2" :src="logoPng">
- <span style="font-size: 40px;color: black">国科鸿宇</span>
- <div style="width: 2px;height: 40px;background-color: #1C68A7;margin-top: 5px;margin-left: 15px;margin-right: 15px"></div>
- <span style="font-size: 28px;color: white">安全在线教育平台</span>
- </div>
+<!-- <div class="logo">-->
+<!-- <img class="pics2" :src="logoPng">-->
+<!-- <span style="font-size: 40px;color: black">国泰新华</span>-->
+<!-- <div style="width: 2px;height: 40px;background-color: #1C68A7;margin-top: 5px;margin-left: 15px;margin-right: 15px"></div>-->
+<!-- <span style="font-size: 28px;color: white">在线教育平台</span>-->
+<!-- </div>-->
<div class="content">
<div class="imgBox">
- <div class="imG"></div>
+ <div class="imG">
+ <img :src="back">
+ </div>
</div>
<div class="formBox">
- <div class="loginTitle">账号登录</div>
+ <div class="loginTitle"><span>国泰新华</span><br/>安全教育平台</div>
<div style="padding: 20px 0;">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
<el-form-item>
@@ -68,7 +70,7 @@
:loading="loading"
size="large"
type="primary"
- style="width:100%;"
+ style="width:100%;height: 50px"
@click.prevent="handleLogin"
>
<span v-if="!loading">登 录</span>
@@ -81,6 +83,10 @@
</div>
</div>
+ </div>
+ <!-- 底部 -->
+ <div class="el-login-footer">
+ <span>Copyright ©2024-{{nowYear}} All Rights Reserved.</span>
</div>
<!-- <img class="pics1" :src="dataPng">-->
<!-- <img class="pics2" :src="searchPng">-->
@@ -155,12 +161,22 @@
import menu from "@/layout/components/Sidebar/menu";
import dataPng from "@/assets/images/login-data.png"
import searchPng from "@/assets/images/login-search.png"
-import logoPng from "@/assets/logo/logo1.png"
-
+import back from "@/assets/images/logo22.png"
const userStore = useUserStore()
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
+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 loginForm = ref({
username: "",
@@ -185,7 +201,8 @@
const redirect = ref(undefined);
onMounted(()=>{
-
+ const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
+ nowYear.value = curTime.slice(0, 4);
})
const openRegist = ()=>{
@@ -295,6 +312,9 @@
//background-repeat: no-repeat;
background-size: cover;
height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
:deep(.el-form-item__content .el-form-item) {
display: block;
}
@@ -316,49 +336,93 @@
}
.pics2{
width:60px;
+ margin-right: 10px;
//top: 20px;
//left: 20px;
}
.content{
+ display: flex;
+ min-width: 1200px;
+ min-height: 560px;
+ border-radius: 80px 40px 80px 40px;
+ border: 2px solid #fff;
+ background: url("../assets/images/logbox.jpg") no-repeat center;
+ background-size: cover;
+ box-shadow: 0 10px 20px rgba(0,0,0,.15);
+ transform: translateY(-50px);
position: relative;
}
+@keyframes float {
+ 100% {
+ transform: translateX(0);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
.imgBox {
- width: 560px;
- height: 560px;
- margin-top: 80px;
- float: left;
- position: relative;
+ width: 50%;
+ min-height: 560px;
+ opacity: 0;
+ -webkit-opacity: 0;
+ transform: translateX(50px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ animation: float ease 0.6s 0.6s forwards;
+ .imG{
+ width: 90%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-repeat: no-repeat;
+ }
}
.fromRow{
width: 100%;
margin: 25px 0;
}
-.imG{
- width: 500px;
- height: 500px;
- background-image: url(../assets/images/ad.png) ;
- background-repeat: no-repeat;
- position: absolute;
- left: 30px;
- top: 30px;
+
+@keyframes showForm {
+ 100% {
+ transform: translateY(0);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
}
.formBox{
- width: 370px;
- height: 400px;
- border-radius: 5px;
- background: rgba(25,25,25,0.6);
- margin-top: 130px;
- padding: 20px;
- float: right;
+ width: 50%;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ transform: translateY(30px);
+ opacity: 0;
+ -webkit-opacity: 0;
+ min-height: 560px;
+ border-radius: 16px;
+ padding: 20px 30px 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ z-index: 999;
+ animation: showForm ease-in-out 0.6s forwards;
}
.loginTitle{
width: 100%;
text-align: center;
- font-size: 16px;
- color: #FFF;
- line-height: 50px;
- border-bottom: 1px solid #FFF;
+ font-size: 56px;
+ color: #2563eb;
+ line-height: 1.2;
+ font-weight: bolder;
+ letter-spacing: 12px;
+ text-shadow: 0 5px 10px rgba(0,0,0,.1);
+
+ span{
+ font-size: 32px;
+ font-weight: normal;
+ }
}
.title {
width: 90%;
@@ -436,13 +500,12 @@
letter-spacing: 1px;
}
.login-code-img {
- margin-top: 5px;
width: 90px;
- height: 40px;
+ height: 50px;
padding-left: 7px;
}
-@media screen and (max-width: 980px) {
+@media screen and (max-width: 1050px) {
.imG {
display: none;
}
--
Gitblit v1.9.2