Python全系列 教程
3567个小节阅读:5931.5k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
修改src/views/LoginView.vue
文件
xxxxxxxxxx
<template>
<!--要显示主体内容-->
<div class="main">
<div class="login">
<div class="logo">
<img src="../assets/logo1.png" alt="">
</div>
<el-form :model="user" class="user_form">
<el-form-item>
<el-input v-model="user.name" placeholder="用户名" :prefix-icon="User"/>
</el-form-item>
<el-form-item>
<el-input v-model="user.pwd" placeholder="密码" :prefix-icon="Lock"/>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="success">重置密码</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
// do not use same name with ref
const user = reactive({
name:'',
pwd:''
})
</script>
<style scoped>
.main {
width: 100%;
height: 100%;
background-color:rgb(233, 188, 8);
display: flex;
justify-content: center;
align-items: center;
}
.login{
width: 450px;
height: 300px;
background-color: white;
border-radius: 5px;
}
.logo{
width:200px;
border: 1px solid #eee;
margin: 0 auto;
margin-top: -65px;
padding: 5px;
border-radius: 5px;
box-shadow: 0 0 10px #ddd;
}
img{
width: 100%;
height: 100%;
}
.user_form{
padding: 50px;
}
.btns{
display: flex;
justify-content: space-between;
}
.btns button{
flex: 1;
}
</style>