我们来直接仿造 微信网页版 的登录界面
首先我们在renderer目录下创建assets文件夹，在assets文件夹下放入login-bg.jpg
- views/Login.vue
<template>
<div id="login">
<div id="card">
<div id="code-img">
<img src="">
</div>
<p id="msg">使用手机微信扫码登录</p>
</div>
</div>
</template>
<style scoped>
#login {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: url(../assets/login-bg.jpg) no-repeat 50%;
background-size: cover;
}
#card {
width: 300px;
height: 400px;
display: flex;
flex-direction: column;
background-color: white;
}
#code-img {
width: 270px;
height: 270px;
margin: 20px auto 10px;
}
#code-img img {
width: 270px;
height: 270px;
}
#msg {
text-align: center;
}
</style>
- renderer/App.vue
...
</template>
// 添加 css
<style>
html, body, div {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
</style>
<style scoped>
#app {
height: 100%;
}
</style>
上一节 Electron开发实战之07-vue-router
目录
下一节 Electron开发实战之09-Chat.vue
