refactor: ♻️ 登录页样式优化
This commit is contained in:
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 191 KiB |
@@ -16,13 +16,30 @@
|
|||||||
|
|
||||||
<!-- 登录页内容 -->
|
<!-- 登录页内容 -->
|
||||||
<div class="login-content">
|
<div class="login-content">
|
||||||
<div class="login-img">
|
<div class="login-carousel">
|
||||||
<el-image :src="loginImage" style="width: 210px" />
|
<div class="project-info">
|
||||||
|
<div class="title-container">
|
||||||
|
<h2>{{ defaultSettings.title }}</h2>
|
||||||
|
<el-tag type="success" size="small">
|
||||||
|
{{ defaultSettings.version }}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
<p class="description">
|
||||||
|
基于 Vue3 + Vite6 + TypeScript + Element-Plus 构建的中后台管理模板
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<el-carousel style="width: 100%" indicator-position="none">
|
||||||
|
<el-carousel-item>
|
||||||
|
<div class="flex-center h-full">
|
||||||
|
<el-image :src="loginImage" alt="login" style="width: 60%; height: 60%" />
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
</div>
|
</div>
|
||||||
<div class="login-form">
|
<div class="login-form">
|
||||||
<el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
|
<el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
|
||||||
<div class="form-title">
|
<div class="form-title">
|
||||||
<h2>{{ defaultSettings.title }}</h2>
|
<h3>登录</h3>
|
||||||
<el-dropdown style="position: absolute; right: 0">
|
<el-dropdown style="position: absolute; right: 0">
|
||||||
<div class="cursor-pointer">
|
<div class="cursor-pointer">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
@@ -31,13 +48,6 @@
|
|||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item>
|
|
||||||
版本号:
|
|
||||||
<el-tag type="success">
|
|
||||||
{{ defaultSettings.version }}
|
|
||||||
</el-tag>
|
|
||||||
</el-dropdown-item>
|
|
||||||
|
|
||||||
<el-dropdown-item @click="setLoginCredentials('root', '123456')">
|
<el-dropdown-item @click="setLoginCredentials('root', '123456')">
|
||||||
超级管理员:root/123456
|
超级管理员:root/123456
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
@@ -157,6 +167,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { LocationQuery, useRoute } from "vue-router";
|
import { LocationQuery, useRoute } from "vue-router";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
import AuthAPI, { type LoginData } from "@/api/auth";
|
import AuthAPI, { type LoginData } from "@/api/auth";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
@@ -351,9 +362,10 @@ onMounted(() => {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-img {
|
.login-carousel {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 3;
|
flex: 3;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: linear-gradient(60deg, #165dff, #6aa1ff);
|
background: linear-gradient(60deg, #165dff, #6aa1ff);
|
||||||
@@ -361,6 +373,29 @@ onMounted(() => {
|
|||||||
@media (width <= 768px) {
|
@media (width <= 768px) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.project-info {
|
||||||
|
position: relative;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.title-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
|
|||||||
Reference in New Issue
Block a user