refactor: ♻️ 登录页样式优化
This commit is contained in:
Ray.Hao committed
1 parent
c25a8d50aa
commit
957814af7b
2 files changed
+47
-12
No files matched your search
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="596.91213" height="505.57464" viewBox="0 0 596.91213 505.57464" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M575.42701,413.69586H21.48512c-11.84669,0-21.48512-9.63791-21.48512-21.48512v-66.67087H596.91213v66.67087c0,11.84721-9.63791,21.48512-21.48512,21.48512Z" fill="#e6e6e6"/><rect x="228.88706" y="402.54358" width="141.262" height="100.90143" fill="#e6e6e6"/><rect x="220.3901" y="490.69956" width="158.25592" height="12.74544" fill="#e6e6e6"/><path d="M596.38107,353.68606H0V14.74418C0,6.6144,6.6144,0,14.74418,0H581.63689c8.12978,0,14.74418,6.6144,14.74418,14.74418V353.68606Z" fill="#3f3d56"/><rect x="13.8077" y="15.40073" width="568.23436" height="319.69821" fill="#fff"/></g><g><path id="uuid-25324785-d0f2-4f1c-ad19-f4bb5410ff47-828" d="M123.85295,205.94936c4.34915-3.59367,9.72872-4.26258,12.0153-1.49438,2.28658,2.7682,.6142,7.92447-3.73698,11.51883-1.71842,1.45964-3.76141,2.48653-5.95805,2.99474l-18.6198,14.99379-6.8499-8.8877,19.08307-13.83763c.91372-2.06202,2.30808-3.87516,4.06637-5.28765Z" fill="#ffb6b6"/><path d="M16.2326,239.77936c-.00944-.66307-.00322-6.44713,4.27885-10.10294,4.91893-4.1995,11.85979-2.49972,14.29424-1.90355,5.62362,1.37718,6.08483,3.78959,11.36601,6.2683,9.8805,4.63743-2.4994,2.26379,3.3798,.77675,2.03505-.51473,31.31216-2.54515,38.59979-7.03056,14.17354-8.72353,23.83086-14.01349,23.83086-14.01349l6.31321,12.62642s-9.1289,12.69357-21.97706,22.09716c-13.17929,9.64592-19.76894,14.46893-29.78342,16.33239-.8624,.16048-22.07229,3.78187-39.15515-8.98085-3.89654-2.91112-11.03588-8.24498-11.14714-16.06965Z" fill="#6c63ff"/><circle cx="35.81649" cy="185.67486" r="21.99265" fill="#ffb6b6"/><g><polygon points="208.05472 333.43009 185.4053 310.24577 173.7135 322.44168 190.58814 344.67132 207.32613 346.58567 208.05472 333.43009" fill="#ffb6b6"/><path d="M78.72568,289.95422c1.32477,.11007,5.53464,.95349,9.55849-1.26037,2.74614-1.51087,4.15455-3.75738,4.63022-4.4718,5.90139-8.86325,28.55224-22.68449,48.88084-23.53504,4.60357-.1926,7.63375,.34082,10.38795,1.77648,3.90537,2.03574,5.46449,4.95183,10.4203,11.78292,2.71086,3.73663,5.7104,7.25691,8.45393,10.96962,16.06194,21.7362,22.15102,23.44259,21.52868,30.41109-.6905,7.73164-9.02898,15.06697-14.5711,14.22018-2.26965-.34678-3.14862-1.92498-6.18099-5.1199-8.89113-9.36767-12.56963-7.63699-18.89978-14.81212-7.39056-8.37709-6.42307-15.32303-10.27892-15.59132-3.57571-.24879-5.09524,5.67668-12.72906,13.54826-3.49306,3.60187-5.98049,5.25419-13.55853,10.51141-29.51063,20.4729-29.98163,21.91164-35.9372,23.54443-2.60568,.71437-21.09954,5.78468-27.68759-2.28408-10.30952-12.6267,14.04589-50.68156,25.98276-49.68978Z" fill="#2f2e41"/><path d="M201.13025,338.66919c1.66577-.74799,3.61352-1.62258,4.24018-3.63382,.42403-1.3609,.17985-3.03892-.69661-4.19845-1.01127-1.33788-2.50808-1.51421-2.44753-1.75092,.09221-.36043,3.6317-.21954,7.51717,1.15395,.73321,.25919,4.0549,1.47292,8.28021,4.7716,3.38533,2.64291,2.92976,3.17274,5.0526,4.69665,6.51637,4.67782,12.62816,.99108,16.15421,5.37796,1.36082,1.69307,1.94121,4.09684,1.36853,6.04048-1.15007,3.90324-6.74285,5.24648-9.7995,5.93997-7.3615,1.67019-12.93347,.30673-18.75163-.67366-19.78659-3.33419-30.90389-.29752-32.39188-4.8815-.28162-.86758,.1759-.7937,1.70153-7.16035,1.50577-6.2838,1.45637-8.0095,2.7388-8.5127,1.9304-.75745,3.22657,2.68803,8.08945,3.86718,4.30931,1.04492,7.86513-.55173,8.94448-1.03639Z" fill="#2f2e41"/></g><g><polygon points="167.78776 409.27485 162.06533 377.37247 145.54248 380.8986 147.02265 408.7683 159.79754 419.75133 167.78776 409.27485" fill="#ffb6b6"/><path d="M85.1876,300.67759c1.03437,.83499,4.04422,3.89687,8.61693,4.32456,3.1207,.29189,5.5476-.77612,6.34237-1.10016,9.86016-4.02006,36.36378-2.73717,53.66232,7.97432,3.91739,2.42571,6.12517,4.56865,7.59796,7.30318,2.08836,3.87748,1.74096,7.16592,2.00574,15.60118,.14485,4.61413,.65006,9.21134,.83536,13.82403,1.08478,27.00503,5.165,31.83623,.73697,37.25285-4.91296,6.00981-15.93171,7.39707-20.04204,3.58429-1.6833-1.56144-1.52438-3.36089-2.23945-7.70732-2.09668-12.74399-6.1123-13.37756-7.3211-22.86924-1.41128-11.08171,3.28968-16.28586,.2498-18.67306-2.81902-2.21375-7.40373,1.83601-18.14054,4.06268-4.91292,1.01889-7.89899,.98932-17.12157,1.08406-35.91491,.369-37.11255,1.29501-42.95736-.69821-2.55722-.87208-20.70715-7.06164-21.62754-17.43758-1.44026-16.23716,40.08188-34.04923,49.40214-26.52558Z" fill="#2f2e41"/><path d="M159.11615,409.72161c1.79837,.31647,3.90115,.68652,5.54907-.62579,1.11506-.88797,1.85529-2.41356,1.78117-3.86518-.08551-1.6749-1.22503-2.66132-1.042-2.82318,.2787-.24646,3.12834,1.85768,5.57211,5.17601,.46116,.62619,2.52813,3.49574,4.17204,8.59791,1.3171,4.08786,.64262,4.27045,1.54344,6.72347,2.76521,7.52985,9.89266,7.91126,10.3469,13.52119,.17529,2.16508-.69427,4.48-2.25957,5.76669-3.14344,2.58393-8.52547,.55484-11.44413-.58775-7.02916-2.75176-10.87405-7.00882-15.13778-11.08716-14.50016-13.86979-25.4044-17.59987-24.06156-22.22846,.25415-.87602,.59124-.55798,5.42874-4.96936,4.77454Line truncated
|
||||
<svg height="8887" node-id="1" sillyvg="true" template-height="8887" template-width="11927" version="1.1" viewBox="0 0 11927 8887" width="11927" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="176"></defs><path d="M 11926.20 7809.20 L 0.00 7809.20 L 0.00 7815.20 L 11926.20 7815.20 L 11926.20 7809.20 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="178" stroke="none" target-height="6" target-width="11926.2" target-x="0" target-y="7809.2"/><path d="M 2977.20 8170.10 L 2187.30 8170.10 L 2187.30 8176.10 L 2977.20 8176.10 L 2977.20 8170.10 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="180" stroke="none" target-height="6" target-width="789.8999" target-x="2187.3" target-y="8170.1"/><path d="M 1937.30 8170.10 L 1479.60 8170.10 L 1479.60 8176.10 L 1937.30 8176.10 L 1937.30 8170.10 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="182" stroke="none" target-height="6" target-width="457.70007" target-x="1479.6" target-y="8170.1"/><path d="M 5022.10 8257.90 L 4564.40 8257.90 L 4564.40 8263.90 L 5022.10 8263.90 L 5022.10 8257.90 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="184" stroke="none" target-height="6" target-width="457.7002" target-x="4564.4" target-y="8257.9"/><path d="M 7408.80 8391.00 L 6378.60 8391.00 L 6378.60 8397.00 L 7408.80 8397.00 L 7408.80 8391.00 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="186" stroke="none" target-height="6" target-width="1030.1997" target-x="6378.6" target-y="8391"/><path d="M 6166.30 8391.00 L 6015.30 8391.00 L 6015.30 8397.00 L 6166.30 8397.00 L 6166.30 8391.00 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="188" stroke="none" target-height="6" target-width="151" target-x="6015.3" target-y="8391"/><path d="M 10813.40 8257.90 L 8579.00 8257.90 L 8579.00 8263.90 L 10813.40 8263.90 L 10813.40 8257.90 Z" fill="#e6e6e6" fill-rule="nonzero" node-id="190" stroke="none" target-height="6" target-width="2234.4004" target-x="8579" target-y="8257.9"/><path d="M 5653.00 6745.40 L 1047.40 6745.40 L 1038.30 6745.10 L 1029.40 6744.20 L 1020.70 6742.80 L 1012.10 6740.70 L 1003.60 6738.10 L 995.30 6735.00 L 987.30 6731.30 L 979.40 6727.20 L 971.90 6722.50 L 964.70 6717.30 L 957.80 6711.60 L 951.20 6705.50 L 945.00 6698.90 L 939.40 6691.90 L 934.20 6684.70 L 929.60 6677.20 L 925.40 6669.30 L 921.70 6661.30 L 918.60 6653.00 L 916.10 6644.50 L 914.00 6635.90 L 912.60 6627.20 L 911.70 6618.30 L 911.40 6609.20 L 911.40 135.00 L 911.80 126.00 L 912.70 117.20 L 914.20 108.50 L 916.30 99.90 L 918.90 91.50 L 922.10 83.30 L 925.70 75.30 L 929.90 67.60 L 934.60 60.10 L 939.80 52.90 L 945.50 46.10 L 951.60 39.60 L 958.20 33.40 L 965.10 27.80 L 972.30 22.70 L 979.80 18.10 L 987.60 13.90 L 995.60 10.30 L 1003.80 7.20 L 1012.20 4.70 L 1020.80 2.60 L 1029.50 1.20 L 1038.40 0.30 L 1047.40 0.00 L 5653.00 0.00 L 5662.00 0.30 L 5670.90 1.20 L 5679.70 2.60 L 5688.30 4.70 L 5696.80 7.30 L 5705.10 10.40 L 5713.20 14.00 L 5721.00 18.20 L 5728.60 22.90 L 5735.80 28.00 L 5742.70 33.70 L 5749.30 39.90 L 5755.50 46.50 L 5761.10 53.40 L 5766.30 60.60 L 5771.00 68.20 L 5775.20 76.00 L 5778.80 84.10 L 5781.90 92.30 L 5784.50 100.90 L 5786.60 109.50 L 5788.00 118.30 L 5788.90 127.20 L 5789.20 136.20 L 5789.20 6609.20 L 5788.90 6618.30 L 5786.60 6635.90 L 5784.50 6644.60 L 5778.80 6661.40 L 5775.20 6669.40 L 5771.00 6677.20 L 5766.30 6684.80 L 5761.10 6692.00 L 5755.50 6698.90 L 5749.30 6705.50 L 5742.70 6711.70 L 5735.80 6717.40 L 5728.60 6722.60 L 5721.00 6727.20 L 5713.20 6731.40 L 5705.10 6735.10 L 5688.30 6740.80 L 5679.70 6742.80 L 5670.90 6744.20 L 5662.00 6745.10 L 5653.00 6745.40 Z M 1047.40 4.80 L 1038.70 5.10 L 1030.20 5.90 L 1021.90 7.30 L 1013.60 9.30 L 1005.50 11.80 L 997.60 14.80 L 989.90 18.20 L 982.40 22.30 L 975.20 26.70 L 968.30 31.70 L 961.70 37.10 L 955.40 43.00 L 949.50 49.30 L 944.10 55.90 L 939.20 62.80 L 934.70 70.00 L 930.70 77.50 L 927.30 85.20 L 924.30 93.10 L 921.80 101.20 L 919.90 109.50 L 918.50 117.90 L 917.70 126.40 L 917.40 135.00 L 917.40 6609.20 L 917.70 6617.90 L 918.50 6626.40 L 919.90 6634.70 L 921.80 6643.00 L 924.30 6651.10 L 927.30 6659.00 L 930.70 6666.70 L 934.70 6674.20 L 939.20 6681.40 L 944.10 6688.30 L 949.50 6694.90 L 955.40 6701.20 L 961.70 6707.20 L 968.30 6712.60 L 975.20 6717.50 L 982.40 6722.00 L 989.90 6726.00 L 997.60 6729.50 L 1005.50 6732.50 L 1013.60 6735.00 L 1021.90 6736.90 L 1030.20 6738.30 L 1038.70 6739.20 L 1047.40 6739.50 L 5653.00 6739.50 L 5661.60 6739.20 L 5670.10 6738.30 L 5678.50 6736.90 L 5686.80 6735.00 L 5694.90 6732.50 L 5702.80 6729.50 L 5710.50 6726.00 L 5718.00 6722.00 L 5725.20 6717.50 L 5738.70 6707.20 L 5745.00 6701.30 L 5750.90 6694.90 L 5756.30 6688.30 L 5761.30 6681.40 L 5765.80 6674.20 L 5769.80 6666.70 L 5773.30 6659.00 L 5776.20 6651.10 L 5778.70 6643.00 L 5780.70 6634.70 L 5782.10 6626.40 L 5782.90 6617.90 L 5783.20 6609.20 L 5783.20 135.00 L 5782.90 126.40 L 5782.10 117.90 L 5780.70 109.50 L 5778.70 101.20 L 5776.20 93.10 L 5773.30 85.20 L 5769.80 77.50 L 5765.80 70.00 L 5761.30 62.80 L 5756.30 55Line truncated
|
||||
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 191 KiB |
+46
-11
@@ -16,13 +16,30 @@
|
||||
|
||||
<!-- 登录页内容 -->
|
||||
<div class="login-content">
|
||||
<div class="login-img">
|
||||
<el-image :src="loginImage" style="width: 210px" />
|
||||
<div class="login-carousel">
|
||||
<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 class="login-form">
|
||||
<el-form ref="loginFormRef" :model="loginData" :rules="loginRules">
|
||||
<div class="form-title">
|
||||
<h2>{{ defaultSettings.title }}</h2>
|
||||
<h3>登录</h3>
|
||||
<el-dropdown style="position: absolute; right: 0">
|
||||
<div class="cursor-pointer">
|
||||
<el-icon>
|
||||
@@ -31,13 +48,6 @@
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>
|
||||
版本号：
|
||||
<el-tag type="success">
|
||||
{{ defaultSettings.version }}
|
||||
</el-tag>
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item @click="setLoginCredentials('root', '123456')">
|
||||
超级管理员：root/123456
|
||||
</el-dropdown-item>
|
||||
@@ -157,6 +167,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LocationQuery, useRoute } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
import AuthAPI, { type LoginData } from "@/api/auth";
|
||||
import router from "@/router";
|
||||
@@ -351,9 +362,10 @@ onMounted(() => {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.login-img {
|
||||
.login-carousel {
|
||||
display: flex;
|
||||
flex: 3;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(60deg, #165dff, #6aa1ff);
|
||||
@@ -361,6 +373,29 @@ onMounted(() => {
|
||||
@media (width <= 768px) {
|
||||
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 {
|
||||
|
||||
Reference in new issue
Block a user