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 {
width: 100%;
flex: 1;
height: 2.625rem;
height: 40px;
font-family: "Pingfang SC", "Microsoft YaHei", "Monospaced Number",
"Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial,

2
src/router/index.js
View File

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

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

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