How to remove mysterious white areas in vue application?
I'm trying to build a website using vue 3 and set a background image for it. But there is a mysterious white area that cannot be removed. I'm sure it's not the margins or padding because I've set all margins and padding to 0 and removed all ml ,pl classes. I set the black background color of the application component to black, but the area is still white. Chrome's inspect tool says this is an html element, please help me. (I put the backgroup image in the style section of Login.vue.)
Information from browser checking tools:
Check with pesticides:
<!-- index.html -->
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<!-- app.vue --!>
<template>
<div id="app">
<div class="container">
<router-view />
</div>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
#app {
padding: 0;
margin: 0px;
background-color: black;
}
</style>
I put the backgroup image in the style section of Login.vue.
<!-- Login.vue --!>
<template>
<div class="body" id="poster">
<el-form class="login-container">
<el-card>
<h4 class="login-title mb-2">Log in</h4>
<el-form-item>
<input type="text" class="form-control" id="username"
v-model="loginForm.username" placeholder="username"
/>
</el-form-item>
<el-form-item>
<input type="text" class="form-control" id="password"
v-model="loginForm.password" placeholder="password"
/>
</el-form-item>
<el-form-item>
<el-button @click="login" type="primary"
style="width: 100%">Submit</el-button>
</el-form-item>
</el-card>
</el-form>
</div>
</template>
<script>
import http from '../http'
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'login',
data() {
return {
loginForm: {
username: '',
password: ''
},
responseResult: [],
}
},
methods: {
login() {
const data = {
username: this.loginForm.username,
password: this.loginForm.password
}
http.post('/login', data)
.then(response => {
console.log(data);
if (response.data.code === 200) {
this.$router.push('/index')
}
})
.catch(e => {
console.log(e);
})
}
}
}
</script>
<style scoped>
.login-title {
text-align: center;
}
body {
}
#poster {
background: url("../assets/backgroud.jpg") no-repeat center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
</style>
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router";
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
// router.js
import { createWebHistory, createRouter } from "vue-router";
const routes = [
{
path: '/',
alias: '/login',
component: () => import('@/components/Login.vue')
},
{
path: '/index',
component: () => import('@/components/AppIndex.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router;
