💄 update ui

This commit is contained in:
LittleBoy 2025-01-13 11:53:41 +08:00
parent 88a9d3f7db
commit 8ee0a24e12
2 changed files with 15 additions and 10 deletions

View File

@ -38,7 +38,7 @@ const handleSubmit = () => {
<template> <template>
<div class="mask"></div> <div class="mask"></div>
<div class="login-wrapper layout-center"> <div class="login-wrapper layout-center">
<div class="login-container"> <div class="login-container drop-shadow-lg bg-white">
<div class="left-panel"> <div class="left-panel">
<h1 class="app-name">{{ AppConfig.appName }}</h1> <h1 class="app-name">{{ AppConfig.appName }}</h1>
<p class="app-desc">{{ AppConfig.appDescription }}</p> <p class="app-desc">{{ AppConfig.appDescription }}</p>
@ -76,18 +76,17 @@ const handleSubmit = () => {
} }
.login-container { .login-container {
width: 800px; width: 860px;
max-width: 90%; max-width: 90%;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
border-radius: var(--primary-border-radius); border-radius: var(--primary-border-radius);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
} }
.left-panel { .left-panel {
background: var(--primary-color-1); background: var(--primary-color-1);
color: white; color: white;
width: 50%; width: 48%;
padding: 50px 0px; padding: 50px 0px;
text-align: center; text-align: center;
@ -98,23 +97,23 @@ const handleSubmit = () => {
} }
.app-desc { .app-desc {
margin-top: 10px; margin-top: 2px;
} }
.login-form-wrapper { .login-form-wrapper {
background: white; background: white;
width: 50%; flex: 1;
transition: all 0.2s; transition: all 0.2s;
} }
.submit{ .submit{
margin-top: 20px; margin-top: 20px;
} }
.form-container { .form-container {
width: 75%; width: 74%;
} }
.form-title { .form-title {
font-size: 16px; font-size: 18px;
font-weight: bold; font-weight: bold;
&:after { &:after {
@ -176,6 +175,12 @@ const handleSubmit = () => {
//} //}
// //
} }
.app-name{
font-size: 30px;
}
.app-desc{
font-size: 16px;
}
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
.login-form-wrapper { .login-form-wrapper {

View File

@ -109,7 +109,7 @@ function handleHideModal() {
</Dropdown> </Dropdown>
</div> </div>
</div> </div>
<div class="app-content"> <div class="app-content" v-if="store.userInfo">
<router-view /> <router-view />
</div> </div>
</div> </div>
@ -222,7 +222,7 @@ function handleHideModal() {
.app-name{ .app-name{
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color:#3f3f3f; color:#444;
} }
} }
} }