cari

Rumah  >  Soal Jawab  >  teks badan

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;

P粉738821035P粉738821035472 hari yang lalu609

membalas semua(1)saya akan balas

  • P粉286046715

    P粉2860467152023-09-12 14:34:13

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

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

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

    balas
    0
  • Batalbalas