过来一遍VUE基础于是想尝试先写一个登陆界面先做准备,为后面的学习开个头,UI组件选用的是elementUI。
- 组件代码:
<template>
<div class="login" style="display:flex;justify-content:center;">
<div class="login1" style="text-align:center;">
<div style="position:absolute;left:15%;top:2%;">
<div>
<p>
<img src="./img/6.png" height="180" width="250" style="z-index: 10"/>
</p>
<span
style="font-family:Hiragino Sans GB; font-size:50px;color:#F56C6C;font-weight:1000;z-index: 10"
>Slot</span>
</div>
<!-- login -->
<div>
<el-main style="text-align:center;">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>登录</span>
</div>
<el-input v-model="user" placeholder="请输入账号" style="margin-bottom:15px;width:80%"></el-input>
<el-input
placeholder="请输入密码"
v-model="pass"
show-password
style="margin-bottom:15px;width:80%"
></el-input>
<el-button type="info" round style="width:50%">登陆</el-button>
</el-card>
</el-main>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: "",
pass: ""
};
}
};
</script>
<style lang="scss" scoped>
.text {
font-size: 14px;
}
.item {
padding: 18px 0;
}
.box-card {
width: 480px;
}
.login {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(./img/3.jpg);
background-size: 100%;
}
.login1 {
position: absolute;
left: 25%;
height: 100%;
width: 50%;
background: rgba(255, 255, 255, 0.6);
}
.el-main {
opacity:0.85;
}
</style>
- 界面预览:
- 有待解决
界面布局需要再系统学习下,以及界面的随着浏览器大小而自适应功能的实现。