'admin-20.12.26:编写登录界面'
This commit is contained in:
lyt-Top
parent
2b91447270
commit
8d14803ad2
@ -3,6 +3,43 @@
|
|||||||
<div class="login-logo">
|
<div class="login-logo">
|
||||||
<img src="/@/assets/logo-web-element.svg" />
|
<img src="/@/assets/logo-web-element.svg" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="login-content">
|
||||||
|
<div class="login-content-main">
|
||||||
|
<h4 class="login-content-title">vue-admin-wonderful</h4>
|
||||||
|
<el-form class="login-content-form" ref="ruleForm">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input type="text" placeholder="用户名 admin 或 test" prefix-icon="el-icon-user" v-model="ruleForm.userName"
|
||||||
|
clearable autocomplete="off" ref="userName">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input type="password" placeholder="密码：123456" prefix-icon="el-icon-lock" v-model="ruleForm.password"
|
||||||
|
clearable autocomplete="off" ref="password">
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-row :gutter="15">
|
||||||
|
<el-col :span="16">
|
||||||
|
<el-input type="text" maxlength="4" placeholder="请输入验证码" prefix-icon="el-icon-position"
|
||||||
|
v-model="ruleForm.code" clearable autocomplete="off" ref="code"></el-input>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<div class="login-content-code">
|
||||||
|
<span class="login-content-code-img">1234</span>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" class="login-content-submit" round>
|
||||||
|
<span>登 录</span>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-button type="text" size="small">第三方登录</el-button>
|
||||||
|
<el-button type="text" size="small">友情链接</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="login-copyright">
|
<div class="login-copyright">
|
||||||
<div class="mb5">版权所有：深圳市xxx软件科技有限公司</div>
|
<div class="mb5">版权所有：深圳市xxx软件科技有限公司</div>
|
||||||
<div>Copyright: Shenzhen XXX Software Technology Co. Ltd 粤ICP备05010000号</div>
|
<div>Copyright: Shenzhen XXX Software Technology Co. Ltd 粤ICP备05010000号</div>
|
||||||
@ -11,8 +48,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { toRefs, reactive } from "vue";
|
||||||
export default {
|
export default {
|
||||||
name: "login",
|
name: "login",
|
||||||
|
setup() {
|
||||||
|
const state = reactive({
|
||||||
|
ruleForm: {
|
||||||
|
userName: "",
|
||||||
|
password: "",
|
||||||
|
code: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
};
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@ -26,6 +76,66 @@ export default {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
left: 30px;
|
left: 30px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.login-content {
|
||||||
|
width: 500px;
|
||||||
|
padding: 20px;
|
||||||
|
height: 410px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
background-color: rgba(255, 255, 255, 0.9);
|
||||||
|
box-shadow: 0 2px 12px 0 rgba(179, 202, 233, 1);
|
||||||
|
border-radius: 4px;
|
||||||
|
.login-content-main {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
.login-content-title {
|
||||||
|
color: #333;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 22px;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
margin: 15px 0 30px;
|
||||||
|
}
|
||||||
|
.login-content-form {
|
||||||
|
.login-content-code {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
.login-content-code-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background-color: #fdfdfd;
|
||||||
|
border: 1px solid rgb(220, 223, 230);
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-indent: 5px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all ease 0.2s;
|
||||||
|
border-radius: 4px;
|
||||||
|
&:hover {
|
||||||
|
border-color: #c0c4cc;
|
||||||
|
transition: all ease 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.login-content-submit {
|
||||||
|
width: 100%;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 300;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.login-copyright {
|
.login-copyright {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -1,32 +0,0 @@
|
|||||||
export const classicQuotationsList: Array<object> = [
|
|
||||||
{
|
|
||||||
name: '颜渊',
|
|
||||||
comeFrom: '论语',
|
|
||||||
content: '自己不喜欢的，就不要强加给别人。饥寒是自己不喜欢的，不要把它强加给别人；耻辱是自己不喜欢的，也不要把它强加给别人。将心比心，推己及人，从自己的利与害想到对别人的利与害，多替别人着想，这是终生应该奉行的原则。'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '荀子',
|
|
||||||
comeFrom: '劝学',
|
|
||||||
content: '木料经过木工用墨线（木工用具）划直线加工以后，就变直了；金属物品在磨刀石上磨砺后，就能锋利。人经过学习磨练，自我反省，就会变得聪慧明智，不犯错误，也越来越坚强。'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '里仁',
|
|
||||||
comeFrom: '论语',
|
|
||||||
content: '见到贤人，就应该想着向他学习；看见不贤的人，便应该自己反省，对不如自己的人喜欢讥笑、轻视，因而沾沾自喜；对比自己强的人喜欢贬低，甚至嫉妒、畏惧退缩，害怕与他们交往：这都是不正确的态度。'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '述而',
|
|
||||||
comeFrom: '论语',
|
|
||||||
content: '君子心地平坦宽广，小人却经常局促忧愁。君子襟怀坦白，安贫乐业，与人为善，知足常乐，所以能坦荡荡。小人欲念太多，患得患失，忧心忡忡，怨天尤人，局促不安，所以常心怀戚戚。'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '老子',
|
|
||||||
comeFrom: '第六十四章',
|
|
||||||
content: '千里遥远的路程是从脚下第一步开始的。任何事情的成功都是从头开始，从小到大逐渐积累的。万事开头难，没有个开头就不会有结果。任何事情都要从一点一滴的小事开始做起。'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '朱熹',
|
|
||||||
comeFrom: '训学斋规',
|
|
||||||
content: '读书有三到，谓心到，眼到，口到。心不在此，则眼看不仔细，心眼既不专一，却只漫浪诵读，决不能记，久也不能久也。三到之中，心到最急，心既到矣，眼口岂不到乎？'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
Loading…
Reference in New Issue
Block a user