视频是这样的我的是这样的是什么问题

home > index.vue

<template>
  <div class = "home">
    <div class="g-header-container">
        <home-header/>
    </div>
    <div>
      <home-slider></home-slider>
    </div>
    <div class="g-backtop-container"></div>
    <router-view></router-view>
  </div>
</template>
<script>
import HomeHeader from './header';
import HomeSlider from './slider';
export default {
  name:'Home',
  components:{
    HomeHeader,
    HomeSlider
  }
}
</script>
<style lang="scss" scope="">

  
</style>

home > header.vue

<template>
    
        <me-navbar class = "header" >
            <i class="iconfont icon-scan" slot='left'></i>
            <div slot="center">搜索框</div> 
            <i class="iconfont icon-msg" slot='right'></i>
        </me-navbar>
    
</template>

<script>
import MeNavbar from '@/base/navbar';
export default {
    name:"HomeHeader",
    components:{
        MeNavbar
    }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/scss/mixins";
    .header{
        
        &.mine-navbar{
            background-color: transparent;
        }
        .iconfont{
            color:$icon-color-default;
            font-size: $icon-font-size;
        }
    }
</style>

base>navbar > index.vue

<template>
    <div class = "mine-navbar">
        <div class="mine-navbar-left" v-if="$slots.left">
            <slot name = 'left'></slot>
        </div>
        <div class="mine-navbar-center" v-if="$slots.center">
            <slot name = 'center'></slot>
        </div>
        <div class="mine-navbar-right" v-if="$slots.right">
            <slot name = 'right'></slot>
        </div>
        <h1 class = "mine-navbar-title" v-if="title" ><span class="mine-navbar-text"  v-text="title"></span></h1>
    </div>
</template>
<script>
export default {
    name :'MeNavbar',
    props:{
        title:{
            type:String,
            default:''
        }
    }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/sass/mixins";
    .mine-navbar{
        @include flex-between();
        position: relative;
        height:50px;
        background-color: #fff;
        &-left{
            margin-left: 10px;
            ~ .mine-navbar-right{
                position:static;
            }
        }
        &-center{
            flex:1;
            margin: 1 10px ;
            ~ .mine-navbar-right{
                position:static;
            }
        }

        &-right{
            margin-right: 10px;
            position:absolute;
            right:0;
            @include flex-center();
            height: 100%;

        }
        &-title{
            position:absolute;
            bottom:0;
            top: 0;
            left:20%;
            right: 20%;
            @include flex-center();
            text-align: center;
        }
        &-text{
            width:100%;
            line-height:1.5;
            font-size:18px;
            @include ellipsis();
        }
    }
</style>