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

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

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

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

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

Write Preview
Loading…
Cancel
Save