From 91f61aa4bab9cfead8ff7e172f5ea47889f83a3e Mon Sep 17 00:00:00 2001
From: 祖安之光 <11848914+light-of-zuan@user.noreply.gitee.com>
Date: 星期五, 22 八月 2025 15:29:07 +0800
Subject: [PATCH] 修改新增
---
src/views/homePage.vue | 66 ++++++++++++++++++++++++++++++--
1 files changed, 61 insertions(+), 5 deletions(-)
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index a9a1484..fdb7074 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -1,9 +1,10 @@
<template>
<el-row class="login-panel">
- <el-col :sm="24" :md="10" class="login-img">
+ <el-col :sm="24" :md="13" class="login-img">
</el-col>
- <el-col :sm="24" :md="14" class="login-box">
+ <el-col :sm="24" :md="11" class="login-box">
+ <div class="glass-bg"></div>
<div class="login-title">多体系<br/>建设信息化系统</div>
<div class="login-card">
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
@@ -200,10 +201,36 @@
font-style: normal;
font-weight: normal;
}
+
+@keyframes move {
+ 0% {
+ -webkit-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ }
+
+ 100% {
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes show {
+ 100% {
+ -webkit-transform: translateY(0);
+ -ms-transform: translateY(0);
+ transform: translateY(0);
+ -webkit-opacity: 1;
+ -ms-opacity: 1;
+ opacity: 1
+ }
+}
+
.login-panel{
width: 100%;
height: 100%;
- background: url("@/assets/images/bg5.jpg") no-repeat center;
+ background: url("@/assets/images/bg6.jpg") no-repeat center;
background-size: cover;
justify-content: center;
align-items: center;
@@ -223,19 +250,41 @@
text-shadow: -10px 10px 20px rgba(0,0,0,.4);
}
.login-box{
+ position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- transform: translateY(-40px);
+ height: 100%;
+ overflow: hidden;
+ .glass-bg{
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 0;
+ background: (255,255,255,.8);
+ backdrop-filter: blur(4px);
+ -webkit-backdrop-filter: blur(4px);
+ border-left: 2px solid rgba(255,255,255,.4);
+ animation: move 0.6s ease-in-out forwards;
+ }
.login-title{
font-family: 'AliMa';
color: #2563eb;
font-size: clamp(3rem, 1.286rem + 2.68vw, 4.5rem);
line-height: 1.2;
text-shadow: 0 5px 10px rgba(37,99,235,.3);
- margin-bottom: 30px;
+ margin-bottom: 40px;
+ transform: translateY(20px);
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ opacity: 0;
+ -webkit-opacity: 0;
+ -ms-opacity: 0;
+ animation: show 0.5s 0.7s ease-in-out forwards;
}
.login-card{
width: 500px;
@@ -248,6 +297,13 @@
max-width: 100%;
box-sizing: border-box;
box-shadow: 0 10px 20px rgba(0,0,0,.05);
+ transform: translateY(20px);
+ -webkit-transform: translateY(20px);
+ -ms-transform: translateY(20px);
+ opacity: 0;
+ -webkit-opacity: 0;
+ -ms-opacity: 0;
+ animation: show 0.5s 0.7s ease-in-out forwards;
}
.login-form {
width: 100%;
--
Gitblit v1.9.2