<template>
  <div class="f-layout">
    <div class="f-txt theme-color1">展馆打卡排行</div>
    <div class="card-layout">
      <WwCard class="ww" :data="item" v-for="(item,i) in data" :key="i"/>
    </div>
  </div>
</template>
<script>
import WwCard from '@/components/ww-card'

export default {
  props: ['data'],
  data () {
    return {
      active: 'day'
    }
  },
  components: {
    WwCard
  }
}
</script>

<style scoped>
.f-layout{
  width: 100%;
  height: 100%;
  position: relative;
  padding: 60px 30px;
}
.f-txt{
  position: absolute;
  top: 20px;
  left: 20px;
  font-weight: bold;
}
.timeLine{
  display: inline-block;
  position: absolute;
  top: 1.2rem;
  left: 10.5rem;
}
.timeLine li{
  display: inline-block;
  width:36px;
  height:24px;
  border-radius:3px;
  background:rgba(255,255,255,0.05);
  position: relative;
  cursor: pointer;
  margin: 0 5px;
}

.timeLine li span{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.timeLine .active{
  background:#532f1c;
  color: #fff!important;
}

.card-layout{
  max-height: 300px;
  overflow-y: auto;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}

.ww{
  width: 32%!important;
}
</style>
