简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment supprimer les zones blanches mystérieuses dans l'application vue ?
P粉738821035
P粉738821035 2023-09-11 21:04:01
0
1
521

J'essaie de créer un site Web en utilisant vue 3 et de définir une image d'arrière-plan pour celui-ci. Mais il existe une mystérieuse zone blanche qui ne peut pas être supprimée. Je suis sûr que ce ne sont pas les marges ou le remplissage, car j'ai défini toutes les marges et le remplissage sur 0 et supprimé toutes les classes ml, pl. J'ai défini la couleur de fond noir du composant d'application sur noir, mais la zone est toujours blanche. L'outil d'inspection de Chrome indique qu'il s'agit d'un élément HTML, aidez-moi s'il vous plaît. (J'ai mis l'image du backgroup dans la section style de Login.vue.)

Informations du vérificateur de navigateur :

Vérifiez avec les 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>

J'ai mis l'image du backgroup dans la section style de 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;

P粉738821035
P粉738821035

répondre à tous(1)
P粉286046715
P粉2860467152023-09-12 14:34:13 1 plancher

Utilisation de classes bootstrap容器L'enroulement du contenu de la page entraînera une largeur maximale inférieure à la largeur plein écran. Documentationaffiche la valeur de largeur maximale pour chaque point d'arrêt. De plus, le conteneur de démarrage est également rempli.

Si vous souhaitez supprimer l'espace vide, vous devez définir la largeur du conteneur à 100 % ou utiliser le nom de la classe container-fluid ，它可以做同样的事情，并且还可以删除你可以用类做的填充p-0

<div class="container-fluid p-0">
  <router-view />
</div>

BTW, j'ai remarqué que vous utilisiez à la fois Element Plus et Bootstrap, qui sont tous deux de grands frameworks CSS/composants. À l'avenir, vous risquez de rencontrer de nombreux conflits frustrants entre les deux frameworks et leurs styles CSS concurrents. Je recommande d'utiliser un seul de ces frameworks !

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！