登录页面制作
1.页面效果
2.实现代码
<template>
<div class="logincontiner">
<el-form
:model="userForm"
ref="userForm"
:inline="false"
size="medium"
class="loginForm"
>
<el-form-item>
<div class="loginTitle">系统登录</div>
</el-form-item>
<el-form-item>
<el-input
placeholder="请输入用户名"
v-model="userForm.username"
></el-input>
</el-form-item>
<el-form-item>
<el-input
placeholder="请输入密码"
v-model="userForm.password"
></el-input>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="16">
<el-input
v-model="userForm.code"
placeholder="请输入验证码"
></el-input>
</el-col>
<el-col :span="8">
<!-- <img class="codeimg"> -->
<el-input placeholder="请输入验证码" readonly></el-input>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row :gutter="20">
<el-col :span="12">
<el-button type="primary" size="default" class="btn"
>登录</el-button
>
</el-col>
<el-col :span="12">
<el-button size="default" class="btn">登录</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
userForm: {
username: "",
password: "",
code: "",
},
};
},
};
</script>
<style lang="scss" scoped>
.logincontiner {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.loginForm {
height: 350px;
width: 400px;
border-radius: 10px;
box-shadow: 0 0 25px #cac6c6;
padding: 20px 35px;
.loginTitle {
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 24px;
}
.codeimg {
border: 1px solid #dcdfe6;
cursor: pointer;
}
.btn {
width: 100%;
}
}
}
</style>
3.安装vs code快捷插件
3.1安装 Vue VSCode Snippets
找到插件,点击install进行安装
3.2安装 Element UI Snippets
主要用于element ui 代码快速生成