Bagaimana untuk membuang kawasan putih misteri dalam aplikasi vue?
Saya cuba membina tapak web menggunakan vue 3 dan menetapkan imej latar belakang untuknya. Tetapi ada kawasan putih misteri yang tidak boleh dibuang. Saya pasti ia bukan margin atau padding kerana saya telah menetapkan semua margin dan padding kepada 0 dan mengalih keluar semua kelas ml ,pl. Saya menetapkan warna latar belakang hitam komponen aplikasi kepada hitam, tetapi kawasan itu masih putih. Alat pemeriksa Chrome mengatakan ini ialah elemen html, tolong bantu saya. (Saya meletakkan imej kumpulan belakang dalam bahagian gaya Login.vue.)
Maklumat daripada penyemak pelayar:
Semak dengan racun perosak:
<!-- 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>
Saya meletakkan imej kumpulan belakang dalam bahagian gaya 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;
