yangchunjin/SoonWorkerD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化代码

Browse Source
This commit is contained in:
24kycj
2025-11-28 03:15:24 +08:00
parent ba25ad48f0
commit f0a3b92dd3
3 changed files with 278 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/login/index.vue
+58 -17
View File
@@ -2,21 +2,23 @@
<div class="login-container">
<img class="login_bg" src="@/assets/images/login_bg.jpg" />
<div class="flex_box form_box">
<el-form class="flex_box flex_col flex_row_center login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
<el-form class="flex_box flex_col flex_row_center login-form" autoComplete="on" :model="loginForm"
:rules="loginRules" ref="loginForm" label-position="left">
<img class="login_logo" src="@/assets/images/logo.png" />
<div class="login_box">
<div class="login_title">用户登录</div>
<div class="login_label">用户名</div>
<el-form-item prop="username">
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on"
placeholder="username" />
</el-form-item>
<div class="login_label">密码</div>
<el-form-item prop="password">
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
placeholder="password"></el-input>
<span class="show-pwd" @click="showPwd">
</span>
<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
autoComplete="on" placeholder="password"></el-input>
<span class="show-pwd" @click="showPwd">
</span>
</el-form-item>
<el-form-item>
<div class="login_check">
@@ -24,11 +26,28 @@
</div>
</el-form-item>
<el-form-item>
<el-button class="login_btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">{{ $t('login.logIn') }}</el-button>
<el-button class="login_btn" type="primary" :loading="loading" @click.native.prevent="handleLogin">{{
$t('login.logIn') }}</el-button>
</el-form-item>
</div>
</el-form>
</div>
<el-popover v-if="guideStep" :placement="guideStep[0].placement" width="250" trigger="manual"
v-model="guideStep[0].show">
<div class="guide_box">
<div class="guide_title">新手引导<span>（{{ parseInt(currentStep) + 1 }}/{{ guideStep.length }}）</span>
</div>
<div class="guide_desc">{{ guideStep[0].step }}</div>
<div class="guide_btns">
<el-button @click="exitGuide" class="guide_btn1" size="mini" type="text">跳过引导</el-button>
<el-button v-if="parseInt(currentStep) > 0" @click="prevStep" class="guide_btn1" size="mini">上一步</el-button>
<el-button @click="nextStep" class="guide_btn2" size="mini" type="primary">{{ currentStep ==
guideStep.length
- 1 ? '完成引导' : '下一步' }}</el-button>
</div>
</div>
</el-popover>
</div>
</template>
@@ -81,10 +100,10 @@ export default {
this.loading = true
setToken('data.token')
if (localStorage.getItem('setForm')) {
this.$store.dispatch('setDatas', {name: 'setForm', data: localStorage.getItem('setForm')})
this.$store.dispatch('setDatas', { name: 'setForm', data: localStorage.getItem('setForm') })
}
this.$store.dispatch('setDatas', {name: 'token', data: 'data.token'})
this.$store.dispatch('setDatas', {name: 'oneLogin', data: true})
this.$store.dispatch('setDatas', { name: 'token', data: 'data.token' })
this.$store.dispatch('setDatas', { name: 'oneLogin', data: true })
setTimeout(() => {
this.loading = false
this.$router.push({ path: '/' })
@@ -106,8 +125,8 @@ export default {
</script>
<style rel="stylesheet/scss" lang="scss">
$bg:#F1F1F1;
$light_gray:#000000;
$bg: #F1F1F1;
$light_gray: #000000;
/* reset element-ui css */
.login-container {
@@ -119,6 +138,7 @@ $light_gray:#000000;
background: #F1F1F1;
border-radius: 30px;
color: #000;
input {
background: transparent;
border: 0px;
@@ -128,6 +148,7 @@ $light_gray:#000000;
height: 60px;
font-size: 24px;
border-radius: 30px;
&:-webkit-autofill {
border-radius: 30px;
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
@@ -136,23 +157,25 @@ $light_gray:#000000;
}
}
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#F1F1F1;
$dark_gray:#889aa4;
$light_gray:#eee;
$bg: #F1F1F1;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
position: fixed;
height: 100%;
width: 100%;
.login_bg {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
.form_box {
position: absolute;
left: 0;
@@ -162,18 +185,22 @@ $light_gray:#eee;
height: 100%;
padding: 0 0 0 120px;
}
.login-form {
height: 100%;
.login_logo {
width: 844px;
height: 158px;
margin-bottom: 48px;
}
.login_box {
width: 450px;
background-color: #fff;
border-radius: 24px;
padding: 48px;
.login_title {
font-weight: 500;
font-size: 30px;
@@ -182,40 +209,48 @@ $light_gray:#eee;
text-align: center;
margin-bottom: 48px;
}
.login_label {
font-size: 24px;
color: #B2B2B2;
line-height: 36px;
margin-bottom: 24px;
}
.login_check {
::v-deep {
.el-checkbox {
display: flex;
align-items: center;
}
.el-checkbox__inner {
width: 24px;
height: 24px;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: #00C325;
border-color: #00C325;
}
.el-checkbox__inner::after {
width: 6px;
height: 14px;
left: 8px;
}
.el-checkbox__label {
font-size: 24px;
line-height: 24px;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
color: #00C325;
}
}
}
.login_btn {
width: 100%;
height: 60px;
@@ -227,26 +262,31 @@ $light_gray:#eee;
}
}
}
.tips {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
span {
&:first-of-type {
margin-right: 16px;
}
}
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
&_login {
font-size: 20px;
}
}
.title {
font-size: 26px;
font-weight: 400;
@@ -255,6 +295,7 @@ $light_gray:#eee;
text-align: center;
font-weight: bold;
}
.show-pwd {
position: absolute;
right: 10px;