docking
/
docking-vue
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录页面样式调整，增加跳转api

dev
dengjia 2025-08-28 16:35:01 +08:00
parent 896bddbb5b
commit 958d65455c
5 changed files with 56 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/login/bg3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/images/login/logo3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

2
src/components/verification/index.vue
View File

@ -78,7 +78,7 @@ const verificationSuccess = () => {
.mi-captcha { .mi-captcha {
width: 100%; width: 100%;
flex: 1; flex: 1;
height: 2.625rem; height: 40px;
font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number", font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number",
"Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial,

2
src/router/index.js
View File

@ -56,7 +56,7 @@ const routes = [
{ {
path: "/api", path: "/api",
name: "/api", name: "/api",
meta: { title: "api", isBreadcrumb: false, isMenu: false }, meta: { title: "api", isBreadcrumb: false, isMenu: false, isLogin: false },
component: () => import("@/views/api/index"), component: () => import("@/views/api/index"),
}, },
{ {

110
src/views/login/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div class="login login-container"> <div class="login login-container">
<!-- <div class="logo"> --> <div class="logo">
<!-- <img src="/src/assets/images/login/logo.png" alt="" width="500" /> --> <img src="/src/assets/images/login/logo3.png" alt="" />
<!-- </div> --> <div>
<div class="btn"> <span class="btn" @click="router.push({ path: '/api' })">查看API</span>
<el-button class="mr-10 mt-5">跳转API</el-button> </div>
</div> </div>
<div class="form"> <div class="form">
@ -16,34 +16,26 @@
@submit.prevent="fnLogin" @submit.prevent="fnLogin"
> >
<el-form-item prop="username"> <el-form-item prop="username">
<div class="mb-5 form-item">用户名</div>
<el-input <el-input
v-model="form.username" v-model="form.username"
placeholder="请输入用户名" placeholder="请输入用户名"
tabindex="1" tabindex="1"
> >
<template #prepend>
<icon-people theme="filled" size="16" fill="#909399" />
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password" class="mt-20">
<div class="mb-5 form-item">密码</div>
<el-input <el-input
v-model="form.password" v-model="form.password"
type="password" type="password"
placeholder="请输入密码" placeholder="请输入密码"
tabindex="2" tabindex="2"
show-password
> >
<template #prepend>
<icon-lock
theme="filled"
size="16"
fill="#909399"
:stroke-width="3"
/>
</template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item class="mt-30">
<verification v-model:verification-pass="verificationPass" /> <verification v-model:verification-pass="verificationPass" />
</el-form-item> </el-form-item>
<el-form-item class="button"> <el-form-item class="button">
@ -134,66 +126,69 @@ const fnSubmitLogin = async () => {
overflow: hidden; overflow: hidden;
background-image: url(../../assets/images/login/bg3.png); background-image: url(../../assets/images/login/bg3.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: cover;
} }
.login { .login {
width: 100%; width: 100%;
max-width: 1920px;
margin: 0 auto; margin: 0 auto;
height: 100vh; height: 100vh;
position: relative; position: relative;
background-color: #fff; background-color: #fff;
.logo { .logo {
margin-top: 20px; display: flex;
margin-left: 20px; justify-content: space-between;
width: 100%; align-items: center;
pointer-events: none; padding: 30px 80px 0 20px;
} }
.btn { .btn {
display: flex; border-radius: 4px;
justify-content: end; border: 1px solid #3a83fc;
color: #3a83fc;
padding: 5px 8px;
cursor: pointer;
} }
.form { .form {
border-radius: 5px; border-radius: 20px;
box-shadow: 0 0 20px rgb(109 109 109 / 40%); box-shadow: 0px 5px 20px 0px rgba(137, 149, 174, 0.2);
position: absolute; position: absolute;
right: 230px; right: 270px;
top: 50%; top: 55%;
transform: translateY(-50%); transform: translateY(-50%);
width: 400px; width: 506px;
height: 490px; height: 590px;
// height: 675px;
padding: 4px 30px; padding: 4px 30px;
background-color: #fff; background-color: #fff;
z-index: 1; z-index: 1;
&:after { // &:after {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 40px; // top: 40px;
left: -30px; // left: -30px;
width: calc(100% + 60px); // width: calc(100% + 60px);
height: calc(100% - 80px); // height: calc(100% - 80px);
border-radius: 10px; // border-radius: 10px;
background-color: rgba(255, 255, 255, 0.3); // background-color: rgba(255, 255, 255, 0.3);
z-index: -1; // z-index: -1;
} // }
&:before { // &:before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 20px; // top: 20px;
left: -15px; // left: -15px;
width: calc(100% + 30px); // width: calc(100% + 30px);
height: calc(100% - 40px); // height: calc(100% - 40px);
border-radius: 10px; // border-radius: 10px;
background-color: rgba(255, 255, 255, 0.5); // background-color: rgba(255, 255, 255, 0.5);
z-index: -2; // z-index: -2;
// }
.form-item {
font-size: 20px;
} }
.title { .title {
font-size: 24px; font-size: 30px;
color: #3b4f70; color: #3b4f70;
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 60px;
@ -206,6 +201,9 @@ const fnSubmitLogin = async () => {
} }
.button { .button {
position: absolute;
bottom: 30px;
width: 445px;
.el-button { .el-button {
background: #0a7dfe; background: #0a7dfe;
height: 45px; height: 45px;