// 应急报修
<template>
  <div class="box">
    <div class="title">
      应急报修
      <div>
        <p :class="`${active=='M'?'active':''}`" @click="changeRank('M')">月排行</p>
        <p :class="`${active=='Y'?'active':''}`" @click="changeRank('Y')">年排行</p>
        <p :class="`${active=='A'?'active':''}`" @click="changeRank('A')">总排行</p>
        <p @click="toMore">···</p>
      </div>
    </div>
    <div class="content">
      <div class="list" v-for="(item,index) in list" :key="index">
        <div class="left">
          <span :style="`background:${index>2?'rgb(229,230,231)':'#000'};color:${index>2?'rgb(96,97,98)':'#FFF'};`">{{++index}}</span>
          <span>{{item.name}}</span>
        </div>
        <div>10 件</div>
      </div>
    </div>
  </div>
</template>
 
<script >
export default {
  data(){
    return{
      active: 'M',
      list: [
      ]
    }
  },
  methods: {
    changeRank(item){
      // console.log(item)
      this.active = item
      this.list = []
 
    },
    toMore(){},
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
}
.box .title{
  height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
}
.box .title >div{
  position: absolute;
  display: flex;
  top: 0;
  right:12px;
  height: 50px;
}
.box .title >div p{
  margin-right: 1rem;
  color: #818283;
  cursor: pointer;
}
.box .title >div .active{
  color: rgb(68,136,245);
}
.box .title >div p:last-child{
  color: rgb(68,136,245);
  font-weight: 800;
  font-size: 2rem;
  margin: 0;
} 
.box .content{
  padding:1rem 2rem;
  flex:1;
  display: flex;
  flex-direction: column;
}
.box .content .list{
  display: flex;
  justify-content: space-between;
  height: 22%;
  cursor: pointer;
  color: rgb(96,97,98);
}
.box .content .list .left span:first-child{
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  text-align: center;
  margin-right: 1rem;
  font-weight: 500;
}

</style>