设置的水平滑动，为什么两个slide会上下出现？另外app.vue上设置了背景图，显示时上面的那个空白该如何消掉呢？body的margin和padding都设为了0

<template>
    <swiper :options="swiperOption">
        <swiper-slide>
            <div>
            <h3 align="center" style="color:#FFFFFF"><   本周收入(金币)   ></h3>
            <output class="mytotal">350</output>
            <myschart></myschart>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div>
            <h3 align="center" style="color:#FFFFFF"><   本周提问(道)   ></h3>
            <output class="mytotal">300</output>
            <myschart></myschart>
            </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>


<script>
import Vue from 'vue'
import {swiper,swiperSlide} from 'vue-awesome-swiper'

import myschart from './my-Schart.vue';

export default {
    name: 'carrousel',
    data() {
        return {
            swiperOption: {
                autoplay: 3000,
                direction: 'horizontal',
                pagination: '.swiper-pagination',
                observeParent: true
            }
        }
    },
  components: { myschart, swiper, swiperSlide }
}
</script>

<style>
    .mytotal {
        margin-left: auto;
        margin-right: auto;
        width:100%;
        color: white;
        font-size: 0.1rem;
    }
</style>
\n```