How to remove mysterious white areas in vue application?
P粉738821035
P粉738821035 2023-09-11 21:04:01
0
1
536

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;

P粉738821035
P粉738821035

reply all(1)
P粉286046715

Use bootstrap classContainerWrapping the page content will cause the maximum width to be smaller than the full screen width. DocumentationDisplays the maximum width value for each breakpoint. Not only that, the boot container is also populated.

If you want to remove the empty space you should set the container width to 100% or use the class name container-fluid which can do the same thing and also remove what you can do with a class Fillp-0

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

BTW, I noticed you used both Element Plus and Bootstrap, which are both large CSS/component frameworks. Moving forward, you're likely to encounter many frustrating conflicts between the two frameworks and their competing CSS styles. I recommend using only one of these frameworks!

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!