简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Wie entferne ich mysteriöse weiße Bereiche bei der Vue-Anwendung?
P粉738821035
P粉738821035 2023-09-11 21:04:01
0
1
518

Ich versuche, mit Vue 3 eine Website zu erstellen und ein Hintergrundbild dafür festzulegen. Aber es gibt einen mysteriösen weißen Bereich, der nicht entfernt werden kann. Ich bin mir sicher, dass es nicht an den Rändern oder der Auffüllung liegt, da ich alle Ränder und Auffüllungen auf 0 gesetzt und alle ml- und pl-Klassen entfernt habe. Ich habe die schwarze Hintergrundfarbe der Anwendungskomponente auf Schwarz gesetzt, aber der Bereich ist immer noch weiß. Das Inspektionstool von Chrome sagt, dass es sich um ein HTML-Element handelt. Bitte helfen Sie mir. (Ich habe das Backgroup-Bild in den Style-Bereich von Login.vue eingefügt.)

Informationen vom Browser-Checker:

Prüfen Sie mit Pestiziden:

<!-- 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>

Ich habe das Backgroup-Bild in den Style-Bereich von Login.vue eingefügt. 

<!-- 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

Antworte allen(1)
P粉286046715
P粉2860467152023-09-12 14:34:13 1 Etage

使用引导类容器包装页面内容会导致最大宽度小于全屏宽度。 文档显示每个断点的最大宽度值。不仅如此，引导容器也有填充。

如果你想删除空白空间，你应该将容器宽度设置为 100% 或使用类名 container-fluid ，它可以做同样的事情，并且还可以删除你可以用类做的填充p-0

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

顺便说一句，我注意到您同时使用了 Element Plus 和 Bootstrap，它们都是大型 CSS/组件框架。继续前进，您很可能会遇到两个框架及其竞争的 CSS 样式之间的许多令人沮丧的冲突。我建议仅使用其中一个框架！

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！