feat: 登录页样式

This commit is contained in:
wang_fan_w 2024-07-06 18:22:28 +08:00
parent 9f4ac72ebd
commit 61311eae26
6 changed files with 39 additions and 254 deletions

View File

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712398314069" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1658" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.07619 0h399.84762c109.714286 0 148.72381 12.190476 187.733333 31.695238 39.009524 21.942857 70.704762 53.638095 92.647619 92.647619S1024 204.8 1024 312.07619v399.84762c0 109.714286-12.190476 148.72381-31.695238 187.733333-21.942857 39.009524-53.638095 70.704762-92.647619 92.647619-39.009524 21.942857-78.019048 31.695238-187.733333 31.695238H312.07619c-109.714286 0-148.72381-12.190476-187.733333-31.695238s-70.704762-53.638095-92.647619-92.647619C12.190476 860.647619 0 819.2 0 711.92381V312.07619c0-109.714286 12.190476-148.72381 31.695238-187.733333s53.638095-70.704762 92.647619-92.647619S204.8 0 312.07619 0z" fill="#C71D23" p-id="1659"></path><path d="M755.809524 458.361905H482.742857c-12.190476 0-24.380952 9.752381-24.380952 24.380952v58.514286c0 12.190476 9.752381 24.380952 24.380952 24.380952h165.790476c12.190476 0 24.380952 9.752381 24.380953 24.380953v12.190476c0 39.009524-31.695238 70.704762-70.704762 70.704762h-226.742857c-12.190476 0-24.380952-9.752381-24.380953-24.380953v-226.742857c0-39.009524 31.695238-70.704762 70.704762-70.704762H755.809524c12.190476 0 24.380952-9.752381 24.380952-24.380952V268.190476c0-12.190476-9.752381-24.380952-24.380952-24.380952H421.790476c-97.52381 0-177.980952 80.457143-177.980952 177.980952V755.809524c0 12.190476 9.752381 24.380952 24.380952 24.380952h351.085714c87.771429 0 160.914286-73.142857 160.914286-160.914286v-136.533333c0-14.628571-9.752381-24.380952-24.380952-24.380952z" fill="#FFFFFF" p-id="1660"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720260890051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="907" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M312.07619 0h399.84762c109.714286 0 148.72381 12.190476 187.733333 31.695238 39.009524 21.942857 70.704762 53.638095 92.647619 92.647619S1024 204.8 1024 312.07619v399.84762c0 109.714286-12.190476 148.72381-31.695238 187.733333-21.942857 39.009524-53.638095 70.704762-92.647619 92.647619-39.009524 21.942857-78.019048 31.695238-187.733333 31.695238H312.07619c-109.714286 0-148.72381-12.190476-187.733333-31.695238s-70.704762-53.638095-92.647619-92.647619C12.190476 860.647619 0 819.2 0 711.92381V312.07619c0-109.714286 12.190476-148.72381 31.695238-187.733333s53.638095-70.704762 92.647619-92.647619S204.8 0 312.07619 0z" fill="#C71D23" p-id="908"></path><path d="M755.809524 458.361905H482.742857c-12.190476 0-24.380952 9.752381-24.380952 24.380952v58.514286c0 12.190476 9.752381 24.380952 24.380952 24.380952h165.790476c12.190476 0 24.380952 9.752381 24.380953 24.380953v12.190476c0 39.009524-31.695238 70.704762-70.704762 70.704762h-226.742857c-12.190476 0-24.380952-9.752381-24.380953-24.380953v-226.742857c0-39.009524 31.695238-70.704762 70.704762-70.704762H755.809524c12.190476 0 24.380952-9.752381 24.380952-24.380952V268.190476c0-12.190476-9.752381-24.380952-24.380952-24.380952H421.790476c-97.52381 0-177.980952 80.457143-177.980952 177.980952V755.809524c0 12.190476 9.752381 24.380952 24.380952 24.380952h351.085714c87.771429 0 160.914286-73.142857 160.914286-160.914286v-136.533333c0-14.628571-9.752381-24.380952-24.380952-24.380952z" fill="#FFFFFF" p-id="909"></path></svg>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1713020459632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11989" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512.416 15.072C229.056 15.072 0 242.848 0 524.608 0 749.856 146.784 940.512 350.368 1008c25.44 5.056 34.784-10.976 34.784-24.48 0-11.808-0.864-52.288-0.864-94.496-142.528 30.368-172.224-60.736-172.224-60.736-22.912-59.04-56.832-74.24-56.832-74.24-46.656-31.2 3.392-31.2 3.392-31.2 51.744 3.36 78.912 52.288 78.912 52.288 45.824 77.6 119.616 55.68 149.312 42.176 4.256-32.896 17.824-55.68 32.224-68.32-113.696-11.808-233.312-55.68-233.312-251.392 0-55.68 20.352-101.248 52.608-136.672-5.088-12.64-22.912-64.96 5.088-134.976 0 0 43.264-13.504 140.832 52.32 40.736-10.976 84.832-16.864 128.096-16.864s87.392 5.92 128.096 16.864c97.568-65.792 140.832-52.32 140.832-52.32 28 70.016 10.176 122.336 5.088 134.976 33.088 35.424 52.608 80.992 52.608 136.672 0 195.712-119.616 238.752-234.144 251.392 18.656 16.032 34.784 46.4 34.784 94.496 0 68.32-0.832 123.168-0.832 140.032 0 13.504 9.344 29.536 34.784 24.48 203.616-67.488 350.368-258.144 350.368-483.392C1024.8 242.848 794.912 15.072 512.384 15.072z" fill="#00b42a" p-id="11990"></path><path d="M192.64 746.656c-0.768 2.624-4.576 3.488-7.648 1.76s-5.344-5.248-3.808-7.84c0.768-2.624 4.576-3.488 7.648-1.76s4.576 5.248 3.808 7.84z m18.304 23.552c-2.304 2.624-6.88 0.864-9.152-2.624-3.04-3.488-3.808-8.736-1.536-11.36s6.112-0.864 9.152 2.624c3.04 4.352 3.808 9.6 1.536 11.36z m18.336 30.56c-3.04 2.624-7.648 0-9.92-4.352-3.04-4.352-3.04-10.464 0-12.224 3.04-2.624 7.648 0 9.92 4.352 3.04 4.352 3.04 9.6 0 12.224z m25.184 29.664c-2.304 3.488-7.648 2.624-12.224-1.76-3.808-4.352-5.344-10.464-2.304-13.088 2.304-3.488 7.648-2.624 12.224 1.76 3.808 3.488 4.576 9.6 2.304 13.088z m34.336 16.576c-0.768 4.352-6.112 6.112-11.456 4.352s-8.384-6.976-7.648-10.464c0.768-4.352 6.112-6.112 11.456-4.352s8.384 6.112 7.648 10.464z m37.408 3.488c0 4.352-4.576 7.84-9.92 7.84s-9.92-3.488-9.92-7.84 4.576-7.84 9.92-7.84 9.92 3.488 9.92 7.84z m35.104-6.976c0.768 4.352-3.04 8.736-8.384 9.6s-9.92-1.76-10.688-6.112c-0.768-4.352 3.04-8.736 8.384-9.6s9.92 1.76 10.688 6.112z" fill="#00b42a" p-id="11991"></path></svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1720260253447" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5236" xmlns:xlink="http://www.w3.org/1999/xlink" width="204.8828125" height="200"><path d="M524.979332 0C234.676191 0 0 234.676191 0 524.979332c0 232.068678 150.366597 428.501342 358.967656 498.035028 26.075132 5.215026 35.636014-11.299224 35.636014-25.205961 0-12.168395-0.869171-53.888607-0.869171-97.347161-146.020741 31.290159-176.441729-62.580318-176.441729-62.580318-23.467619-60.841976-58.234462-76.487055-58.234463-76.487055-47.804409-32.15933 3.476684-32.15933 3.476685-32.15933 53.019436 3.476684 80.83291 53.888607 80.83291 53.888607 46.935238 79.963739 122.553122 57.365291 152.97411 43.458554 4.345855-33.897672 18.252593-57.365291 33.028501-70.402857-116.468925-12.168395-239.022047-57.365291-239.022047-259.012982 0-57.365291 20.860106-104.300529 53.888607-140.805715-5.215026-13.037566-23.467619-66.926173 5.215027-139.067372 0 0 44.327725-13.906737 144.282399 53.888607 41.720212-11.299224 86.917108-17.383422 131.244833-17.383422s89.524621 6.084198 131.244833 17.383422C756.178839 203.386032 800.506564 217.29277 800.506564 217.29277c28.682646 72.1412 10.430053 126.029806 5.215026 139.067372 33.897672 36.505185 53.888607 83.440424 53.888607 140.805715 0 201.64769-122.553122 245.975415-239.891218 259.012982 19.121764 16.514251 35.636014 47.804409 35.636015 97.347161 0 70.402857-0.869171 126.898978-0.869172 144.282399 0 13.906737 9.560882 30.420988 35.636015 25.205961 208.601059-69.533686 358.967656-265.96635 358.967655-498.035028C1049.958663 234.676191 814.413301 0 524.979332 0z" fill="#191717" p-id="5237"></path><path d="M199.040177 753.571326c-0.869171 2.607513-5.215026 3.476684-8.691711 1.738342s-6.084198-5.215026-4.345855-7.82254c0.869171-2.607513 5.215026-3.476684 8.691711-1.738342s5.215026 5.215026 4.345855 7.82254z m-6.953369-4.345856M219.900283 777.038945c-2.607513 2.607513-7.82254 0.869171-10.430053-2.607514-3.476684-3.476684-4.345855-8.691711-1.738342-11.299224 2.607513-2.607513 6.953369-0.869171 10.430053 2.607514 3.476684 4.345855 4.345855 9.560882 1.738342 11.299224z m-5.215026-5.215027M240.760389 807.459932c-3.476684 2.607513-8.691711 0-11.299224-4.345855-3.476684-4.345855-3.476684-10.430053 0-12.168395 3.476684-2.607513 8.691711 0 11.299224 4.345855 3.476684 4.345855 3.476684 9.560882 0 12.168395z m0 0M269.443034 837.011749c-2.607513 3.476684-8.691711 2.607513-13.906737-1.738342-4.345855-4.345855-6.084198-10.430053-2.607513-13.037566 2.607513-3.476684 8.691711-2.607513 13.906737 1.738342 4.345855 3.476684 5.215026 9.560882 2.607513 13.037566z m0 0M308.555733 853.526c-0.869171 4.345855-6.953369 6.084198-13.037566 4.345855-6.084198-1.738342-9.560882-6.953369-8.691711-10.430053 0.869171-4.345855 6.953369-6.084198 13.037566-4.345855 6.084198 1.738342 9.560882 6.084198 8.691711 10.430053z m0 0M351.145116 857.002684c0 4.345855-5.215026 7.82254-11.299224 7.82254-6.084198 0-11.299224-3.476684-11.299224-7.82254s5.215026-7.82254 11.299224-7.82254c6.084198 0 11.299224 3.476684 11.299224 7.82254z m0 0M391.126986 850.049315c0.869171 4.345855-3.476684 8.691711-9.560882 9.560882-6.084198 0.869171-11.299224-1.738342-12.168395-6.084197-0.869171-4.345855 3.476684-8.691711 9.560881-9.560882 6.084198-0.869171 11.299224 1.738342 12.168396 6.084197z m0 0" fill="#191717" p-id="5238"></path></svg>

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 8.8 KiB

View File

@ -18,7 +18,7 @@
</a-tabs>
<div class="tabs_setting">
<a-dropdown trigger="hover" :popup-max-height="false">
<div class="setting"><icon-loop :size="18" /></div>
<div class="setting"><icon-apps :size="18" /></div>
<template #content>
<a-doption @click="refresh">
<template #icon><icon-refresh /></template>

View File

@ -1,209 +0,0 @@
<template>
<div class="container">
<div class="login">
<div class="banner_box"></div>
<div class="login_box">
<div class="login_title">DC Admin</div>
<div class="login_title_desc">国际化路由配置状态管理应有尽有</div>
<div class="login_title_desc">丰富的的页面模板覆盖大多数典型业务场景</div>
<div class="login_form_box">
<a-form :rules="rules" :model="form" layout="vertical" @submit="onSubmit">
<a-form-item field="username" :hide-asterisk="true">
<a-input v-model="form.username" allow-clear placeholder="请输入账号">
<template #prefix>
<icon-user />
</template>
</a-input>
</a-form-item>
<a-form-item field="password" :hide-asterisk="true">
<a-input-password v-model="form.password" allow-clear placeholder="请输入密码">
<template #prefix>
<icon-lock />
</template>
</a-input-password>
</a-form-item>
<a-form-item field="verifyCode" :hide-asterisk="true">
<div class="verifyCode">
<a-input style="width: 160px" v-model="form.verifyCode" allow-clear placeholder="请输入验证码" />
<VerifyCode :content-height="30" :content-width="100" @verify-code-change="verifyCodeChange" />
</div>
</a-form-item>
<a-form-item field="remember">
<div class="remember">
<a-checkbox v-model="form.remember">记住密码</a-checkbox>
<div class="forgot-password">忘记密码</div>
</div>
</a-form-item>
<a-form-item>
<a-button long type="primary" html-type="submit">登录</a-button>
</a-form-item>
</a-form>
</div>
<div class="register">注册账号</div>
<div class="desc">DC-Admin by 兔子先森</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/store/modules/user-info";
const router = useRouter();
const form = ref({
username: "admin",
password: "123456",
verifyCode: null,
remember: false
});
const rules = ref({
username: [
{
required: true,
message: "请输入账号"
},
{
validator: (value: string, cb: any) => {
if (value !== verify.value.username) {
cb("请输入正确的账号");
} else {
cb();
}
}
}
],
password: [
{
required: true,
message: "请输入密码"
},
{
validator: (value: string, cb: any) => {
if (value !== verify.value.password) {
cb("请输入正确的密码");
} else {
cb();
}
}
}
],
verifyCode: [
{
required: true,
message: "请输入验证码"
},
{
validator: (value: string, cb: any) => {
if (value !== verify.value.verifyCode) {
cb("请输入正确的验证码");
} else {
cb();
}
}
}
]
});
const verify = ref({
username: "admin",
password: "123456",
verifyCode: ""
});
const verifyCodeChange = (code: string) => (verify.value.verifyCode = code);
const onSubmit = ({ errors }: any) => {
if (errors) return;
//
let stores = useUserInfoStore();
let account = {
username: form.value.username,
roles: ["admin"]
};
stores.setAccount(account);
stores.setToken("DC-Admin");
Message.success("登录成功");
router.replace("/home");
};
</script>
<style lang="scss" scoped>
.container {
height: 100vh;
position: relative;
border: 1px solid red;
overflow: hidden;
&::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
border: 40px solid $color-success;
border-radius: 50%;
left: -70px;
bottom: -70px;
}
.login {
width: 1000px;
height: 500px;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
box-shadow: 0 0 8px 1px $color-fill-2;
.banner_box {
width: 650px;
height: 100%;
background: linear-gradient(45deg, #3d65f9, #ffffff);
}
.login_box {
width: 350px;
height: 100%;
box-sizing: border-box;
padding: 40px 30px 30px 30px;
position: relative;
.login_title {
font-size: $font-size-title-2;
color: $color-text-1;
margin-bottom: $margin-text;
}
.login_title_desc {
font-size: $font-size-body-1;
color: $color-text-3;
}
.login_form_box {
margin-top: 28px;
.verifyCode {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.remember {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.forgot-password {
color: $color-primary;
cursor: pointer;
}
}
}
.register {
text-align: center;
color: $color-text-3;
font-size: $font-size-body-1;
cursor: pointer;
}
.desc {
color: $color-text-4;
font-size: $font-size-body-1;
position: absolute;
bottom: 30px;
}
}
}
}
</style>

View File

@ -2,30 +2,18 @@
<div class="container">
<div class="login">
<div class="banner_box">
<a-carousel
:style="{
width: '100%',
height: '100%'
}"
:auto-play="true"
show-arrow="never"
animation-name="fade"
indicator-type="dot"
indicator-position="bottom"
>
<a-carousel-item v-for="(image, index) in images" :key="index">
<img
:src="image"
:style="{
width: '100%',
height: '100%'
}"
/>
</a-carousel-item>
</a-carousel>
<div class="banner_title">
<SvgIcon name="snow" size="25" />
DC-Admin
</div>
<div class="banner_img">
<SvgIcon name="数据时代" size="100%" />
</div>
</div>
<div class="login_box">
<div class="login_title">DC Admin</div>
<div class="login_title">Welcome Back</div>
<div class="login_title_desc">国际化路由配置状态管理应有尽有</div>
<div class="login_title_desc">丰富的的页面模板覆盖大多数典型业务场景</div>
<div class="login_form_box">
<a-form :rules="rules" :model="form" layout="vertical" @submit="onSubmit">
<a-form-item field="username" :hide-asterisk="true">
@ -60,7 +48,7 @@
</a-form>
</div>
<div class="register">注册账号</div>
<div class="desc">DC-Admin by 兔子先森</div>
<div class="author">by 兔子先森</div>
</div>
</div>
</div>
@ -71,12 +59,6 @@ import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "@/store/modules/user-info";
const router = useRouter();
const images = [
"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp",
"https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
];
const form = ref({
username: "admin",
password: "123456",
@ -158,33 +140,44 @@ const onSubmit = ({ errors }: any) => {
position: relative;
overflow: hidden;
.login {
width: calc(100% - 160px);
width: 1000px;
height: 500px;
position: absolute;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
column-gap: 80px;
box-shadow: 0 0 8px 1px $color-fill-2;
.banner_box {
width: calc(100% - 530px);
width: 650px;
height: 100%;
border: 1px solid red;
box-sizing: border-box;
padding: $padding;
display: flex;
flex-direction: column;
.banner_title {
display: flex;
align-items: center;
column-gap: $margin-text;
font-size: $font-size-title-1;
color: $color-primary;
font-weight: bold;
}
.banner_img {
flex: 1;
}
}
.login_box {
position: relative;
box-sizing: border-box;
width: 450px;
width: 350px;
height: 100%;
padding: 40px 60px 40px 60px;
box-shadow: 0 0 8px 1px $color-fill-2;
background: #fff;
box-sizing: border-box;
padding: 40px 30px 30px 30px;
position: relative;
.login_title {
font-size: $font-size-title-2;
color: $color-text-1;
margin-bottom: $margin-text;
text-align: center;
}
.login_title_desc {
font-size: $font-size-body-1;
@ -215,7 +208,7 @@ const onSubmit = ({ errors }: any) => {
font-size: $font-size-body-1;
cursor: pointer;
}
.desc {
.author {
color: $color-text-4;
font-size: $font-size-body-1;
position: absolute;