18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

登陆页样式修改

Browse Source 
雨滴效果自适应
master
toesbieya 6 years ago
parent f19e4de97e
commit 9845a140ef
4 changed files with 135 additions and 129 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 106
      vue/src/assets/styles/login.scss
  2. 3
      vue/src/plugin/rain/index.js
  3. 97
      vue/src/views/app/login.vue
  4. 58
      vue/src/views/app/register.vue

106
vue/src/assets/styles/login.scss
Unescape View File

@ -9,10 +9,11 @@ $cursor: #fff;
}
}
.login-container {
height: 100%;
width: 100%;
overflow: hidden;
.login-page {
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
canvas {
position: absolute;
@ -22,68 +23,67 @@ $cursor: #fff;
background: #2d3a4b;
}
.login-form {
width: 520px;
padding: 0 35px;
margin: 160px auto;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.title-container {
position: relative;
.login-container {
flex: 1;
padding: 32px 0;
text-align: center;
width: 384px;
margin: 0 auto;
.title {
padding-top: 120px;
margin-bottom: 40px;
cursor: pointer;
font-size: 26px;
color: #eee;
margin: 0 auto 40px auto;
text-align: center;
font-weight: bold;
position: relative;
}
}
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
.svg-container {
padding: 6px 5px 6px 15px;
color: $dark_gray;
vertical-align: middle;
width: 30px;
display: inline-block;
}
.el-input {
display: inline-block;
height: 47px;
width: 85%;
.show-pwd {
position: absolute;
right: 10px;
top: 7px;
font-size: 16px;
color: $dark_gray;
cursor: pointer;
user-select: none;
}
input {
background: transparent;
border: 0;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: $light_gray;
.el-input {
display: inline-block;
height: 47px;
caret-color: $cursor;
width: 85%;
&:-webkit-autofill {
box-shadow: 0 0 0 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important;
input {
background: transparent;
border: 0;
-webkit-appearance: none;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-webkit-autofill {
box-shadow: 0 0 0 1000px $bg inset !important;
-webkit-text-fill-color: $cursor !important;
}
}
}
}
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
border-radius: 5px;
color: #454545;
.el-form-item {
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
}
}

3
vue/src/plugin/rain/index.js
Unescape View File

@ -9,6 +9,7 @@ export default class Rain {
this.stopSign = false
this.canvas = canvas
this.ctx = canvas.getContext('2d')
this.resize = this.resize.bind(this)
this.start()
}
@ -49,11 +50,13 @@ export default class Rain {
}
start() {
window.addEventListener('resize', this.resize)
this.resize()
this.loop()
}
stop() {
window.removeEventListener('resize', this.resize)
this.stopSign = true
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
}

97
vue/src/views/app/login.vue
Unescape View File

@ -1,56 +1,56 @@
<template>
<div class="login-container">
<div class="login-page">
<canvas id="login-background"/>
<el-form ref="form" :model="form" :rules="rules" autocomplete="on" class="login-form" label-position="left">
<div class="title-container">
<h3 class="title">进销存管理系统</h3>
</div>
<el-form-item prop="username">
<div class="login-container">
<div class="title">进销存管理系统</div>
<el-form ref="form" :model="form" :rules="rules" autocomplete="on" label-position="left">
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon="user"/>
</span>
<el-input
ref="username"
v-model="form.username"
:maxlength="20"
autocomplete="on"
name="username"
placeholder="请输入用户名"
type="text"
/>
</el-form-item>
<el-form-item prop="password">
<el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
<el-input
ref="username"
v-model="form.username"
:maxlength="20"
autocomplete="on"
name="username"
placeholder="请输入用户名"
type="text"
/>
</el-form-item>
<el-form-item prop="password">
<el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
<span class="svg-container">
<svg-icon icon="password"/>
</span>
</el-tooltip>
<el-input
ref="password"
v-model="form.password"
:key="passwordType"
:type="passwordType"
:maxlength="20"
autocomplete="on"
name="password"
placeholder="请输入密码"
@keyup.enter.native="login"
/>
<span @click="showPwd" class="show-pwd">
</el-tooltip>
<el-input
ref="password"
v-model="form.password"
:key="passwordType"
:type="passwordType"
:maxlength="20"
autocomplete="on"
name="password"
placeholder="请输入密码"
@keyup.enter.native="login"
/>
<span @click="showPwd" class="show-pwd">
<svg-icon :icon="passwordType === 'password' ? 'eye' : 'eye-open'"/>
</span>
</el-form-item>
<el-button :loading="loading" style="width: 100%" type="primary" @click="login">登录</el-button>
<div class="flex" style="margin-top: 20px">
<p class="other-ways">
其他方式登录
<span v-for="i in otherWays" :key="i" @click="$message.info('假装可以第三方登录')">
</el-form-item>
<el-button :loading="loading" style="width: 100%" type="primary" @click="login">登录</el-button>
<div class="flex" style="margin-top: 20px">
<p class="other-ways">
其他方式登录
<span v-for="i in otherWays" :key="i" @click="$message.info('假装可以第三方登录')">
<svg-icon :icon="i"/>
</span>
</p>
<el-button type="text" @click="!loading&&$router.push('/register')">注册账户</el-button>
</div>
</el-form>
</p>
<el-button type="text" @click="!loading&&$router.push('/register')">注册账户</el-button>
</div>
</el-form>
</div>
</div>
</template>
@ -100,7 +100,8 @@
success() {
elSuccess('登陆成功')
let redirect = this.$route.query.redirect || '/'
window.location.href = '/#' + redirect
//由于清除消息时会造成卡顿，所以延迟0.5s跳转
setTimeout(() => window.location.href = '/#' + redirect, 500)
},
capsLockTip({keyCode}) {
if (keyCode === 20) this.capsTooltip = !this.capsTooltip
@ -116,11 +117,13 @@
if (loginBackgroundAnimate) {
import('@/plugin/rain')
.then(_ => {
this.rain = new _.default({
rainDropCount: 500,
rainColor: 'rgba(150,180,255,0.8)',
backgroundColor: '#2d3a4b'
}, document.getElementById('login-background'))
this.rain = new _.default(
{
rainDropCount: 500,
rainColor: 'rgba(150,180,255,0.8)',
backgroundColor: '#2d3a4b'
},
document.getElementById('login-background'))
})
}
this.addCapsLockEvent()

58
vue/src/views/app/register.vue
Unescape View File

@ -1,42 +1,42 @@
<template>
<div class="login-container">
<canvas/>
<el-form ref="form" :model="form" :rules="rules" class="login-form" label-position="left">
<div class="title-container">
<h3 class="title">用户注册</h3>
</div>
<el-form-item prop="username">
<div class="login-page">
<canvas id="login-background"/>
<div class="login-container">
<div class="title">用户注册</div>
<el-form ref="form" :model="form" :rules="rules" label-position="left">
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon="user"/>
</span>
<el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="pwd">
<el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
<el-input ref="username" v-model="form.username" :maxlength="20" placeholder="请输入用户名"/>
</el-form-item>
<el-form-item prop="pwd">
<el-tooltip v-model="capsTooltip" :tabindex="-1" content="大写锁定已打开" manual placement="left">
<span class="svg-container">
<svg-icon icon="password"/>
</span>
</el-tooltip>
<el-input v-model="form.pwd" placeholder="请输入密码" type="password" :maxlength="20"/>
</el-form-item>
<el-form-item prop="repwd">
</el-tooltip>
<el-input v-model="form.pwd" placeholder="请输入密码" type="password" :maxlength="20"/>
</el-form-item>
<el-form-item prop="repwd">
<span class="svg-container">
<svg-icon icon="password"/>
</span>
<el-input
v-model="form.repwd"
placeholder="请确认密码"
type="password"
:maxlength="20"
@keyup.enter.native="register"
/>
</el-form-item>
<el-button :loading="loading" style="width: 100%" type="primary" @click="register">注册</el-button>
<div class="flex" style="margin-top: 20px">
<p/>
<el-button type="text" @click="!loading&&$router.push('/login')">已有账户登陆</el-button>
</div>
</el-form>
<el-input
v-model="form.repwd"
placeholder="请确认密码"
type="password"
:maxlength="20"
@keyup.enter.native="register"
/>
</el-form-item>
<el-button :loading="loading" style="width: 100%" type="primary" @click="register">注册</el-button>
<div class="flex" style="margin-top: 20px">
<p/>
<el-button type="text" @click="!loading&&$router.push('/login')">已有账户登陆</el-button>
</div>
</el-form>
</div>
</div>
</template>

Write Preview
Loading…
Cancel
Save