attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 登录页

Browse Source
This commit is contained in:
wang_fan_w 2024-07-04 00:16:30 +08:00
parent b776821bf0
commit 85a75ea0b7
3 changed files with 251 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/bgc.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 MiB

209
src/views/login/login copy.vue Normal file
View File

@ -0,0 +1,209 @@
<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>

54
src/views/login/login.vue
View File

@ -1,11 +1,31 @@
<template>
<div class="container">
<div class="login">
<div class="banner_box"></div>
<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>
<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">
@ -51,6 +71,12 @@ 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",
@ -130,31 +156,35 @@ const onSubmit = ({ errors }: any) => {
.container {
height: 100vh;
position: relative;
overflow: hidden;
.login {
width: 1000px;
width: calc(100% - 160px);
height: 500px;
position: absolute;
left: 50%;
top: 50%;
position: absolute;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
box-shadow: 0 0 8px 1px $color-fill-2;
column-gap: 80px;
.banner_box {
width: 650px;
width: calc(100% - 530px);
height: 100%;
background: linear-gradient(45deg, #3d65f9, #ffffff);
border: 1px solid red;
}
.login_box {
width: 350px;
height: 100%;
box-sizing: border-box;
padding: 40px 30px 30px 30px;
position: relative;
box-sizing: border-box;
width: 450px;
height: 100%;
padding: 40px 60px 40px 60px;
box-shadow: 0 0 8px 1px $color-fill-2;
background: #fff;
.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;