为什么头部没有撑开侧边栏呢？热卖推荐跑到头部底下去这是怎么回事？

<template>
 <me-scroll：scrollbar =“ false”>
   <ul class =“ tab”>
     <li class =“ tab-item”
         ：class =“ {'tab-item-active'：item.id === curId}“项目中的
         v-for =”（item，index）“
         ：key =” index“
         @ click =” switchTab（item.id）“
     >
       {{item.name}}
     </ li>
   </ ul>
 < / me-scroll>
</ template>

<script>
 从'base / scroll'导入MeScroll //约会滚动条组件

 导出默认{
   名称：“ CategoryTab”，
   组件：{
     MeScroll //滚动条组件
   }，
   data（）{
     返回{
       项目：[
         {
           'name'：'热门推荐'，
           'id'：'WQR2006'
         }，
         {
           'name'：'慕淘超市'，
           'id'：'WQ1968'
         }，
         {
           'name'：'国际名牌'，
           'id '：'WQ1969'
         }，
         {
           'name'：'奢侈品'，
           'id'：'WQ1970'
         }，
         {
           'name'：'全球购'，
           'id'：'WQ1971'
         }，
         {
           'name'： '男装'，
           'id'：'WQ1972'
         }，
         {
           'name'：'女装'，
           'id'：'WQ1973'
         }，
         {
           'name'：'男鞋'，
           'id'：'WQ1974'
         }，
         {
           'name'：'女鞋'，
           'id'：'WQ1975'
         }，
         {
           'name'：'内衣配饰'，
           'id'：'WQ1976'
         }，
         {
           'name'：'箱包手袋'，
           'id'：'WQ1977'
         }，
         {
           'name'：'美妆个护'，
           'id'：'WQ1978'
         }，
         {
           '名称'： '钟表珠宝'，
           'id'：'WQ1979'
         }，
         {
           'name'：'手机数码'，
           'id'：'WQ1980'
         }，
         {
           'name'：'电脑办公'，
           'id'：'WQ1981'
         }，
         {
           'name'：'家用电器'，
           'id'：'WQ1982'
         }，
         {
           'name '：'食品生鲜'，
           'id'：'WQ1983'
         }，
         {
           'name'：'酒水饮料'，
           'id'：'WQ1984'
         }，
         {
           'name'：'母婴童鞋'，
           'id' ：'WQ1985'
         }，
         {
           'name'：'玩具乐器'，
           'id'：'WQ1986'
         }，
         {
           'name'：'医药保健'，
           'id'：'WQ1987'
         }，
         {
           'name'：'计生情趣'，
           'id'：'WQ1988'
         }，
         {
           'name'：'运动户外'，
           'id' ：'WQ1989'
         }，
         {
           'name'：'汽车用品'，
           'id'：'WQ1990'
         }，
         {
           'name'：'家居厨具'，
           'id'：'WQ1991'
         }，
         {
           'name'：'家具家装'，
           'id'：'WQ1992'
         }，
         {
           'name'：'礼品鲜花'，
           'id'：'WQ1993'
         }，
         {
           'name'：'宠物生活'，
           'id'：'WQ1994'
         }，
         {
           'name'：'生活旅行'，
           'id'：'WQ1995'
         }，
         {
           'name'：'图书音像'，
           'id'：'WQ1996'
         }，
         {
           'name'：'邮币'，
           'id'：'WQ1997'
         }，
         {
           'name'：'农资绿植'，
           'id'：'WQ1998'
         }，
         {
           '名称'： '特产馆”，
           'id'：'WQ1999'
         }，
         {
           'name'：'慕淘金融'，
           'id'：'WQ2000'
         }，
         {
           'name'：'
           拍卖'，'id'：'WQ2001'
         }，
         {
           'name'：'房产'，
           'id'：'WQ2008'
         }，
         {
           'name'： '二手商品'，
           'id'：'WQ2002'
         }
       ]，
       curId：''
     };
   }，
   方法：{
     switchTab（id）{
       if（this.curId === id）{
         return;
       }
       this.curId = id;
       this.emit（'



     this.switchTab（this.items [0] .id）
   }
 }
</ script>

<style lang =“ scss” scoped>
 .tab {
   width：100％;
 }

 .tab-item {
   height：46px;
   行高：46px；
   背景颜色：#fff;
   右边框：1px实心＃e5e5e5;
   border-bottom：1px实心＃e5e5e5;
   颜色：＃080808;
   font-size：14px;
   font-weight：粗体;
   文本对齐：居中；
   溢出：隐藏；
   文字溢出：省略号；/ *超过显示省略号* /
   white-space：nowrap; / *不换行* /
 }

 .tab-item.tab-item-active {
   color：＃f23030;
   背景：无；
   右边框：无；
 }
</ style>

<template>
 <div class =“ category”>
   <header class =“ g-header-container”>
     <category-header> </ category-header>
   </ header>
   <div class =“ g-content-container”>
     <div class =“ slidebar”>
       <category-tab> </ category-tab>
     </ div>
     <div class =“ main”>

     </ div>
   </ div>
 </ div>
</ template>

<script>
 从'./header'导入CategoryHeader // //从'./tab'
 导入CategoryTab // //从'./content'
 导入CategoryContent//

 导出默认组件， 导出默认{
   名称：“类别”，
   组件：{
     CategoryHeader，//头部组件
     CategoryTab，//左侧导航栏组件
     CategoryContent //右侧内容组件
   }
 }

</ SCRIPT>

<风格郎= “SCSS”作用域>
 .category {
   溢出：隐藏;
   宽度：100％;
   高度：100％;
   背景颜色：＃f5f5f5;
 }

 .g-content-container {
   display：flex;
   高度：100％;
 }

 .slidebar {
   宽度：80px;
   高度：100％;
 }

 .main {
   flex：1;
   高度：100％;
 }
</ style>

<template>
 <div class =“ mine-navbar”>
   <div class =“ mine-navbar-left”>
     <slot name =“ left”> </ slot>
   </ div>
   <！--- $ slots.center获取插槽称为中心的插槽--->
   <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>
 导出默认值{
   名称：“ MeNavbar”，
   道具：{
     标题：{
       类型：字符串，
       默认值：“”
     }
   }
 };
</ script>

<style lang =“ scss”范围>
 / * @ import“〜assets / scss / mixins”; * /

 .mine-navbar {
   display：flex;
   证明内容：间隔；
   align-items：居中;
   高度：50px；
   背景颜色：#fff;
 }

 .mine-navbar-left {
   margin-left：10px;
 }

 .mine-navbar-center {
   flex：1;
   边距：0 10px;
 }

 .mine-navbar-right {
   margin-right：10px;
 }

 .mine-navbar-title {
   位置：绝对；
   最高：0;
   底部：0
   左：20％；
   正确：20％；
   显示：flex;
   证明内容：中心；
   align-items：居中;
   文本对齐：居中；
 }

 .mine-navbar-text {
   宽度：100％;
   行高：1.5；
   font-size：18px;
   溢出：隐藏；
   文字溢出：省略号；//溢出显示省略号
   white-space：nowrap;
 }
</ style>