From 2036e7bd0c3b9744688ca9dcf08d2bf874bc5e8e Mon Sep 17 00:00:00 2001
From: Flex <q1406482700@163.com>
Date: 星期一, 09 六月 2025 16:32:01 +0800
Subject: [PATCH] 修改登录页样式
---
easegen-front/src/views/Login/Login.vue | 182 +++++++++++++++++++++++----------------------
1 files changed, 92 insertions(+), 90 deletions(-)
diff --git a/easegen-front/src/views/Login/Login.vue b/easegen-front/src/views/Login/Login.vue
index de1db09..19bdc65 100644
--- a/easegen-front/src/views/Login/Login.vue
+++ b/easegen-front/src/views/Login/Login.vue
@@ -1,28 +1,28 @@
<template>
<div class="bei">
- <div class="BeiArea">
- <!-- 宸︿晶鍥剧墖 -->
- <div class="Left-img">
- <div class="TitleText" >
- <text> 鏁板瓧浜� </text>鏅鸿兘浜や簰骞冲彴
- </div>
- </div>
- <!-- 鍙宠竟鐨勭櫥褰曠晫闈� -->
- <Transition appear enter-active-class="animate__animated animate__bounceInRight">
- <div class="form-box">
- <!-- 璐﹀彿鐧诲綍 -->
- <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
- <!-- 鎵嬫満鐧诲綍 -->
- <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
- <!-- 浜岀淮鐮佺櫥褰� -->
- <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
- <!-- 娉ㄥ唽 -->
- <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
- <!-- 涓夋柟鐧诲綍 -->
- <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
- </div>
- </Transition>
+ <div class="BeiArea">
+ <!-- 宸︿晶鍥剧墖 -->
+ <div class="Left-Area">
+ <div class="TitleText">
+ <h1>鏁板瓧浜烘櫤鑳戒氦浜掑钩鍙�</h1>
+ </div>
</div>
+ <!-- 鍙宠竟鐨勭櫥褰曠晫闈� -->
+ <Transition appear enter-active-class="animate__animated animate__bounceInRight">
+ <div class="form-box">
+ <!-- 璐﹀彿鐧诲綍 -->
+ <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
+ <!-- 鎵嬫満鐧诲綍 -->
+ <MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
+ <!-- 浜岀淮鐮佺櫥褰� -->
+ <QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
+ <!-- 娉ㄥ唽 -->
+ <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
+ <!-- 涓夋柟鐧诲綍 -->
+ <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white) bai" />
+ </div>
+ </Transition>
+ </div>
</div>
</template>
<script lang="ts" setup>
@@ -33,7 +33,7 @@
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
-import * as ConfigApi from "@/api/infra/config";
+import * as ConfigApi from '@/api/infra/config'
defineOptions({ name: 'Login' })
@@ -43,98 +43,100 @@
const prefixCls = getPrefixCls('login')
const passwordLoginSwitch = ref(undefined)
-
-onMounted(async ()=>{
- const data = await ConfigApi.getConfigKey('password-login-switch')
- if (data && data.length > 0) {
- passwordLoginSwitch.value = data
- }
+onMounted(async () => {
+ const data = await ConfigApi.getConfigKey('password-login-switch')
+ if (data && data.length > 0) {
+ passwordLoginSwitch.value = data
+ }
})
</script>
-<style scoped>
-*{
+
+<style>
+.bei .BeiArea .form-box > .el-form {
+ height: 100%;
+}
+.bei .BeiArea .form-box > .el-form > div {
+ height: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+</style>
+
+<style scoped>
+* {
margin: 0;
padding: 0;
}
-.bei{
+
+.bei {
width: 100%;
min-height: 100%;
- background-color: #000;
display: flex;
justify-content: center;
align-items: center;
- overflow-y: scroll;
}
-.bei .BeiArea{
- width: 100%;
- height: 100vh;
+
+.bei .BeiArea {
+ width: auto;
+ max-width: 100%;
+ height: auto;
display: flex;
justify-content: center;
align-items: center;
- background-color: #000a25;
+ border-radius: 8px;
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+ overflow: hidden;
}
-.bei .BeiArea .form-box{
- /* width: 25%; */
- width: 400px;
- margin-top: -36px;
- padding: 70px 30px;
+
+.bei .BeiArea .Left-Area {
+ width: calc(650px + (100vw - 1700px) * 0.5);
+ height: calc(650px + (100vh - 900px) * 0.5);
+ display: flex;
+ justify-content: center;
+ align-content: center;
+ background: linear-gradient(to bottom right, #1b6ac2, #57b5f2);
+}
+
+.bei .BeiArea .Left-Area .TitleText {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.bei .BeiArea .Left-Area .TitleText h1 {
+ color: #fff;
+}
+
+.bei .BeiArea .form-box {
box-sizing: border-box;
background: #fff;
- margin-left: 300px;
- box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
-}
-.bei .BeiArea .Left-img{
- width: 729px;
- height: 655px;
- margin-top: 138px;
- margin-left: -74px;
- background-image:url( "@/assets/imgs/bei3-1.png" );
- /* background-size: 100%; */
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center center;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.bei .BeiArea .Left-img .TitleText{
- margin-top: calc( -85% );
- margin-left: -60px;
- color: #fff;
- width: 100%;
- text-align: left;
- font-size: 48px;
- padding-left: 10%;
- box-sizing: border-box;
-}
-.bei .BeiArea .Left-img .TitleText text{
- color: #2d84fa;
+ width: calc(650px + (100vw - 1700px) * 0.5);
+ height: calc(650px + (100vh - 900px) * 0.5);
+ padding: 40px 80px;
}
-@media screen and ( max-width: 1300px ) {
- .form-box{
- width: 50% !important;
- margin: 0 auto !important;
+@media ( max-width:1200px ) and (min-width:1000px) {
+ .bei .BeiArea .form-box{
+ width: 45%;
+ height: 90vh;
}
-
- .Left-img{
- display: none !important;
- }
-
-}
-
-@media (max-width:1650px) and ( min-width: 1300px ) {
- .bei .BeiArea .Left-img{
- margin-left: 0;
+ .bei .BeiArea .Left-Area{
+ width: 45%;
+ height: 90vh;
}
}
-@media (max-height:500px){
- .bei .BeiArea{
- align-items: flex-start;
+@media ( max-width:1000px ){
+ .bei .BeiArea .form-box{
+ width: 50%;
+ height: 100vh;
+ }
+ .bei .BeiArea .Left-Area{
+ width: 50%;
+ height: 100vh;
}
}
-
</style>
--
Gitblit v1.9.3