<template>
  <div class="f-layout">
    <div class="f-txt theme-color1">文物关注度排行</div>
    <!-- <ul class="timeLine">
      <li class="theme-color1" :class="{active:item.id===active}" @click="active = item.id" v-for="(item,i) in time" :key="i"><span>{{item.name}}</span></li>
    </ul> -->
    <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'

const time = [
  {
    name: '日',
    id: 'day'
  }, {
    name: '周',
    id: 'week'
  }, {
    name: '月',
    id: 'mouth'
  }, {
    name: '季',
    id: 'season'
  }, {
    name: '年',
    id: 'year'
  }
]
export default {
  props: ['data'],
  data () {
    return {
      time,
      active: 'day'
    }
  },
  components: {
    WwCard
  }
}
</script>

<style scoped>
.f-layout{
  width: 100%;
  height: 50%;
  position: relative;
}
.f-txt{
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  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{
  margin: 60px 1.5rem;
  display: flex;
  justify-content: space-between;
}

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