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;
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Menggunakan kelas bootstrap
容器Membalut kandungan halaman akan menyebabkan lebar maksimum menjadi lebih kecil daripada lebar skrin penuh. Dokumentasimenunjukkan nilai lebar maksimum untuk setiap titik putus. Bukan itu sahaja, bekas but juga dihuni.Jika anda ingin mengalih keluar ruang kosong anda hendaklah menetapkan lebar bekas kepada 100% atau gunakan nama kelas
container-fluid，它可以做同样的事情，并且还可以删除你可以用类做的填充p-0BTW, saya perasan anda menggunakan kedua-dua Element Plus dan Bootstrap, yang merupakan rangka kerja CSS/komponen yang besar. Melangkah ke hadapan, anda mungkin akan menghadapi banyak konflik yang mengecewakan antara kedua-dua rangka kerja dan gaya CSS yang bersaing. Saya cadangkan menggunakan hanya satu daripada rangka kerja ini!