💄 update ui
This commit is contained in:
parent
88a9d3f7db
commit
8ee0a24e12
@ -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 {
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user