<template>
  <div class="content">
    <div class="tab-box">
      <div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in  tabs"
           :key="index">
        {{ item.name }}
      </div>
    </div>
    <div class="top-box">
      <div class="crad-box" id="d1">
        <div class="number_">会员人数</div>
        <div class="title_">888888</div>
      </div>
      <div class="crad-box" id="d2">
        <div class="number_">注销会员数</div>
        <div class="title_">888888</div>
      </div>
      <div class="crad-box" id="d3">
        <div class="number_">会员总积分</div>
        <div class="title_">888888</div>
      </div>
      <div class="crad-box" id="d4">
        <div class="number_">消耗积分</div>
        <div class="title_">888888</div>
      </div>
      <div class="crad-box" id="d5">
        <div class="number_">会员累计充值</div>
        <div class="title_">888888</div>
      </div>
      <div class="crad-box" id="d6">
        <div class="number_">会员总余额</div>
        <div class="title_">888888</div>
      </div>
    </div>
    <div class="conton-box">
      <div></div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      tabindex: 0,
      tabs: [
        {
          name: "会员统计",
        },
        {
          name: "会员画像",
        },
      ],
    }
  },
  methods:{
    getindex(index) {
      this.tabindex = index
      if (index == 0) {

      } else if (index == 1) {

      }
    }
  }
}
</script>

<style lang="scss" scoped>

.content {
  background: #f5f7f8;
  width: 100%;
  height: 100vh;
}

.tab-box {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  margin-bottom: 25px;

}
.top-box{
  width: 98%;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 15px;
  margin: 15px auto;
}

.tab_ {
  width: 75px;
  height: 100%;
  //border-bottom: 2px solid #FF770F;
  display: flex;
  font-weight: 500;
  font-size: 14px;
  color: #999999;
  align-items: center;
  justify-content: center;
  margin-left: 50px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid #FF770F !important;
  color: #FF770F !important;
}
.crad-box{
  width: 258px;
  height: 80px;
  margin-right: 20px;
  box-sizing: border-box;
  padding: 15px;
}
.number_{
  font-size: 14px;
  color: #333333;
  margin-bottom: 5px;
}
.title_{
  font-size: 24px;
  font-weight: bold;
  color: #333333;
}
#d1{
  background: url(../../assets/images/bz1.png) no-repeat;
  background-size:100% 100%;
}
#d2{
  background: url(../../assets/images/bz2.png) no-repeat;
  background-size:100% 100%;
}
#d3{
  background: url(../../assets/images/bz3.png) no-repeat;
  background-size:100% 100%;
}
#d4{
  background: url(../../assets/images/bz4.png) no-repeat;
  background-size:100% 100%;
}
#d5{
  background: url(../../assets/images/bz5.png) no-repeat;
  background-size:100% 100%;
}
#d6{
  background: url(../../assets/images/bz6.png) no-repeat;
  background-size:100% 100%;
}
</style>
