Add i18n
Former-commit-id: c7fe41b748c5af0afe4049b5db0f1f572a4613b4
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user