简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk membuang kawasan putih misteri dalam aplikasi vue?
P粉738821035
P粉738821035 2023-09-11 21:04:01
0
1
517

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粉738821035
P粉738821035

membalas semua(1)
P粉286046715
P粉2860467152023-09-12 14:34:13 Tingkat 1

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!

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！