yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

修改样式

pull/480/head
liting 2024-04-14 19:00:00 +08:00
parent b054a9651d
commit df3519eb9b
5 changed files with 63 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/imgs/icon_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

10
src/styles/index.scss
View File

@ -61,3 +61,13 @@ legend {
.el-form-item__label{
color:#1f2225;
}
.login-form .el-input__wrapper{
border-radius: 10px;
line-height: 50px;
height: 50px;
}
.line{
background: #1e4dad;
height: 8px;
width: 52px;
}

30
src/views/Login/Login.vue
View File

@ -5,13 +5,13 @@
>
<div class="relative mx-auto h-full flex">
<div
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
:class="` flex-1 bg-opacity-20 relative p-30px lt-xl:hidden`"
>
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<!-- <div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
</div> -->
<!-- 左边的背景图 + 欢迎语 -->
<div class="h-[calc(100%-60px)] flex items-center justify-center">
<TransitionGroup
@ -20,10 +20,10 @@
tag="div"
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<!-- <div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
{{ t('login.message') }}
</div>
</div> -->
</TransitionGroup>
</div>
</div>
@ -32,10 +32,10 @@
<div
class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
>
<div class="flex items-center at-2xl:hidden at-xl:hidden">
<!-- <div class="flex items-center at-2xl:hidden at-xl:hidden">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
</div> -->
<div class="flex items-center justify-end space-x-10px">
<ThemeSwitch />
<LocaleDropdown class="dark:text-white lt-xl:text-white" />
@ -94,11 +94,19 @@ $prefix-cls: #{$namespace}-login;
z-index: -1;
width: 100%;
height: 100%;
background-image: url('@/assets/svgs/login-bg.svg');
background-position: center;
background-repeat: no-repeat;
content: '';
// background-image: url('@/assets/svgs/login-bg.svg');
// background-position: center;
// background-repeat: no-repeat;
// content: '';
}
}
}
.v-login{
overflow: hidden;
background-image: url('@/assets/imgs/icon_bg.png');
background-size: cover;
width: 100%;
height: 100vh;
justify-content: center;
}
</style>

77
src/views/Login/components/LoginForm.vue
View File

@ -1,14 +1,6 @@
<template>
<el-form
v-show="getShow"
ref="formLogin"
:model="loginData.loginForm"
:rules="LoginRules"
class="login-form"
label-position="top"
label-width="120px"
size="large"
>
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
label-position="top" label-width="120px" size="large">
<el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
@ -17,40 +9,23 @@
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input
v-model="loginData.loginForm.tenantName"
:placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse"
link
type="primary"
/>
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse" link type="primary" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username">
<el-input
v-model="loginData.loginForm.username"
:placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar"
/>
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password">
<el-input
v-model="loginData.loginForm.password"
:placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock"
show-password
type="password"
@keyup.enter="getCode()"
/>
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" />
</el-form-item>
</el-col>
<el-col
:span="24"
style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"
>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
<el-form-item>
<el-row justify="space-between" style="width: 100%">
<el-col :span="6">
@ -64,25 +39,14 @@
</el-row>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px;">
<el-form-item>
<XButton
:loading="loginLoading"
:title="t('login.login')"
class="w-[100%]"
type="primary"
@click="getCode()"
/>
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" @click="getCode()" style="height:50px;;line-height:50px; border-radius: 10px;"/>
</el-form-item>
</el-col>
<Verify
ref="verify"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
mode="pop"
@success="handleLogin"
/>
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<Verify ref="verify" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }" mode="pop"
@success="handleLogin" />
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<el-row :gutter="5" justify="space-between" style="width: 100%">
<el-col :span="8">
@ -109,7 +73,7 @@
</el-row>
</el-form-item>
</el-col>-->
<!-- <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
<!-- <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<div class="w-[100%] flex justify-between">
@ -125,7 +89,7 @@
</div>
</el-form-item>
</el-col>-->
<!-- <el-divider content-position="center">萌新必读</el-divider>
<!-- <el-divider content-position="center">萌新必读</el-divider>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<div class="w-[100%] flex justify-between">
@ -345,4 +309,13 @@ onMounted(() => {
cursor: pointer;
}
}
.login-form {
background: #fffeff;
box-shadow: 0 0 20px #5f82e726;
border-radius: 10px;
padding: 40px;
}
</style>

12
src/views/Login/components/LoginFormTitle.vue
View File

@ -1,7 +1,13 @@
<template>
<h2 class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
{{ getFormTitle }}
</h2>
<div style=" display: flex;
flex-direction: column;
align-items: center;">
<div class="enter-x mb-3 text-center text-2xl font-bold xl:text-center xl:text-3xl">
科研管理系统
<!-- {{ getFormTitle }} -->
</div>
<!-- <div class="line"></div> -->
</div>
</template>
<script lang="ts" setup>
import { LoginStateEnum, useLoginState } from './useLogin'