vue头部左右滑动导航

<template>
  <div class="about">
    <div class="idd">
        <ul>
          <li :class="{'active':indexTap == index}" v-for="(item,index) in list" :key="index" @click="indexTap = index">
            {{item}}
          </li>
        </ul>
 <div class="table" v-if="indexTap == 3">
 <div class="tableone">
   <p class="top"><span>办公用品领用申请</span><span>未审批</span></p>
   <div class="cont">
     <p>申请人：韩梅梅</p>
     <p>领用物品：惠普（HR）暗影精灵4代</p>
   </div>
   <p class="bot">2018-09-08
     <span style="float:right">
     <span>
       <img class="rightimg" src="../../img/lajitong.png" />
       删除</span>
     <span>
       <img class="rightimg" src="../../img/gantanhao.png" />
       详情</span>
     </span>
   </p>
 </div>
 </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'about',
  data() {
    return {
      indexTap:0,
      list:['日志','周志','请假','调休','加班','办公用品',]
    }
  }
}
</script>

<style lang="scss" scoped>
ul::-webkit-scrollbar {
        display: none;
}
.active{
  color: #7cbffc; 
 border-bottom: 1px solid #7cbffc;
}
 /* .idd{
   width: 100%;
   overflow: hidden; */
   ul{
     display: flex;
     align-items: center;
     overflow:auto;
     padding-left: 0;
     list-style: none;
     background: #fff;
   }
     li{
    font-size: 14px;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding: 10px;
       margin: 0 12px;
        color: #b1b1b1;
     }
   /* } */

 /* } */

p {
  margin: 0;
  padding: 0;
}
*{
  margin: 0;
  padding: 0;
}
.about {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background-color: #f7fbff;
}


a{
  text-decoration: none;
  color: #b3b3b3;
}


.table{
  width: 95%;
  margin: auto;
  background: #fff;
}
.top{
border-bottom: 1px dashed #dadada;
line-height: 40px;
}
.tableone{
  margin: 10px 20px 0 20px;
}
.top span:nth-child(2){
  float: right;
  color: #7cbffc;
}
.cont{
  line-height: 30px;
    margin: 5px 0;
    color: #b3b3b3;
}
.bot{
border-top: 1px dashed #dadada;
line-height: 40px;
color:#b3b3b3 ;
}
.rightimg{
  width: 17px;
    height: 17px;
    vertical-align: text-bottom;
    margin: 0 5px  0 15px;
}
</style>