Former-commit-id: c7fe41b748c5af0afe4049b5db0f1f572a4613b4
This commit is contained in:
FairyEver
2019-08-17 17:56:09 +08:00
parent c2d6645ee7
commit e78edd0004
19 changed files with 10928 additions and 115 deletions
+89 -28
View File
@@ -13,10 +13,10 @@
<div class="page-login--layer">
<div
class="page-login--content"
flex="dir:top main:justify cross:center box:justify">
flex="dir:top main:justify cross:stretch box:justify">
<div class="page-login--content-header">
<p class="page-login--content-header-motto">
时间是一切财富中最宝贵的财富。 <span>—— 德奥弗拉斯多</span>
时间是一切财富中最宝贵的财富
</p>
</div>
<div
@@ -24,29 +24,48 @@
flex="dir:top main:center cross:center">
<!-- logo -->
<img class="page-login--logo" src="./image/logo@2x.png">
<!-- 表单 -->
<!-- form -->
<div class="page-login--form">
<el-card shadow="never">
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
<el-form
ref="loginForm"
label-position="top"
:rules="rules"
:model="formLogin"
size="default">
<el-form-item prop="username">
<el-input type="text" v-model="formLogin.username" placeholder="用户名">
<el-input
type="text"
v-model="formLogin.username"
placeholder="用户名">
<i slot="prepend" class="fa fa-user-circle-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="formLogin.password" placeholder="密码">
<el-input
type="password"
v-model="formLogin.password"
placeholder="密码">
<i slot="prepend" class="fa fa-keyboard-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" v-model="formLogin.code" placeholder="- - - -">
<template slot="prepend">验证码</template>
<el-input
type="text"
v-model="formLogin.code"
placeholder="验证码">
<template slot="append">
<img class="login-code" src="./image/login-code.png">
</template>
</el-input>
</el-form-item>
<el-button size="default" @click="submit" type="primary" class="button-login">登录</el-button>
<el-button
size="default"
@click="submit"
type="primary"
class="button-login">
登录
</el-button>
</el-form>
</el-card>
<p
@@ -55,21 +74,35 @@
<span><d2-icon name="question-circle"/> 忘记密码</span>
<span>注册用户</span>
</p>
<!-- 快速登录按钮 -->
<!-- quick login -->
<el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
快速选择用户(测试功能)
</el-button>
</div>
</div>
<div class="page-login--content-footer">
<p class="page-login--content-footer-locales">
<a
v-for="language in $languages"
:key="language.value"
:command="language.value"
@click="$i18n.locale = language.value">
{{ language.label }}
</a>
</p>
<p class="page-login--content-footer-copyright">
Copyright
<d2-icon name="copyright"/>
2018 D2 Projects 开源组织出品
<a href="https://github.com/FairyEver">
@FairyEver
</a>
</p>
<p class="page-login--content-footer-options">
<a href="#">帮助</a>
<a href="#">隐私</a>
<a href="#">条款</a>
</p>
<p class="page-login--content-footer-copyright">
Copyright <d2-icon name="copyright"/> 2018 D2 Projects 开源组织出品 <a href="https://github.com/FairyEver">@FairyEver</a>
</p>
</div>
</div>
</div>
@@ -101,17 +134,17 @@ export default {
dialogVisible: false,
users: [
{
name: '管理员',
name: 'Admin',
username: 'admin',
password: 'admin'
},
{
name: '编辑',
name: 'Editor',
username: 'editor',
password: 'editor'
},
{
name: '用户1',
name: 'User1',
username: 'user1',
password: 'user1'
}
@@ -122,16 +155,28 @@ export default {
password: 'admin',
code: 'v9am'
},
// 校验
// 表单校验
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
{
required: true,
message: '请输入用户名',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
]
}
}
@@ -180,7 +225,7 @@ export default {
})
} else {
// 登录表单校验失败
this.$message.error('表单校验失败')
this.$message.error('表单校验失败,请检查')
}
})
}
@@ -225,9 +270,6 @@ export default {
color: $color-text-normal;
text-align: center;
font-size: 12px;
span {
color: $color-text-sub;
}
}
}
// main
@@ -298,26 +340,45 @@ export default {
// footer
.page-login--content-footer {
padding: 1em 0;
.page-login--content-footer-options {
.page-login--content-footer-locales {
padding: 0px;
margin: 0px;
margin-bottom: 10px;
font-size: 14px;
margin-bottom: 15px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: $color-text-normal;
a {
color: $color-text-normal;
margin: 0 1em;
margin: 0 .5em;
&:hover {
color: $color-text-main;
}
}
}
.page-login--content-footer-copyright {
padding: 0px;
margin: 0px;
margin-bottom: 10px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: $color-text-normal;
a {
color: $color-text-normal;
}
}
.page-login--content-footer-options {
padding: 0px;
margin: 0px;
font-size: 12px;
line-height: 12px;
text-align: center;
a {
color: $color-text-normal;
margin: 0 1em;
}
}
}
// 背景
.circles {