<template>
  <div class="hot-layout">
    <div class="h-txt theme-color1">文物热度榜</div>
    <div class="hot-table">
      <div class="hot-header">
        <div class="theme-color1">
          <span>序号</span>
          <span>文物名称</span>
        </div>
        <span class="theme-color1">累计点赞数</span>
      </div>
      <ul>
        <li v-for="(item,i) in data" :key="i">
          <div>
            <span class="xuhao" :class="{emxuhao:i===4}">{{i+1}}</span>
            <span>{{item.name}}</span>
          </div>
          <span class="theme-color1">{{item.num}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ['data']
}
</script>

<style scoped>
.hot-layout{
  position: relative;
  height: 100%;
}
.h-txt{
   position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-weight: bold;
}
.hot-table{
  padding: 60px 1.5rem 0;
}
.hot-table .hot-header{
  display: flex;
  justify-content: space-between;
}

.hot-table .hot-header>div span:first-of-type{
  width: 35px;
  display: inline-block;
}

ul{
  margin-top: 20px;
  height: 290px;
  overflow-x: hidden;
  overflow-y: auto;
}

ul li{
  display: flex;
  justify-content: space-between;
  text-align: center;
  line-height: 1;
  margin: 12px 0;
}
ul li>div span:first-of-type{
  display: inline-block;
  width: 35px;
  position: relative;
  z-index: 99;
  color: #fff;
  font-size: 14px;
}
ul li>div .xuhao::after{
  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #f76b6c;
  position: absolute;
  border-radius: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
}

ul li>div .emxuhao::after{
  background: #67c241;
}

</style>
