<template>
  <div>
    <div class="dataList">
      <ul class="dataListBox">
        <li class="dataListBox_til">
          <p>{{title}}</p>
        </li>
        <li class="dataListBox_head">
          <p v-for="(value,index) in head" :key="index">{{value}}</p>
        </li>
        <li v-for="(value,index) in data" :key="index">
          <p>{{value.name}}</p>
          <p>{{value.num}}</p>
        </li>
      </ul>
      <i class="bg-horn top-left"></i>
      <i class="bg-horn top-right"></i>
      <i class="bg-horn bottom-left"></i>
      <i class="bg-horn bottom-right"></i>
    </div>
  </div> 
</template>
<script>
 
export default {
  props:['data','head','title'],
  data() {
    return {
    };
  },
  created() {},
  mounted() {

  },
  methods: {
    
  }
};
</script>

<style scoped>
/*列表*/
.dataList {
  background: url("../assets/images/moduleBg01.png") no-repeat left top;
  background-size: 100% 100%;
  padding: .03rem 0;
  position: relative;
}
.dataList{
  display: flex;
}
.bg-horn{
  position: absolute;
  width: .1rem;
  height: .1rem;
  background: url("../assets/images/module-horn.png") no-repeat; 
  background-size: 100% 100%;
}
.bg-horn.top-left{
  top: 0;
  left: 0;
}
.bg-horn.top-right{
  transform:rotate(90deg);
  top: 0;
  right: 0;
}
.bg-horn.bottom-left{
  transform:rotate(270deg);
  bottom: 0;
  left: 0;
}
.bg-horn.bottom-right{
  transform:rotate(180deg);
  bottom: 0;
  right: 0;
}
.dataList>ul{
  flex:1;
  
}
.dataListBox li {
  width: 50%;
  float:left;
  background: linear-gradient(to right, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
}
.dataListBox li p {
  width: 60%;
  float: left;
  display: inline-block;
  color: #09f2ff;
  font-size: 0.06rem;
  line-height: 0.06rem;
  padding: 0.054rem .08rem;
}
.dataListBox li p:nth-child(even){
  width: 40%;
}
.dataListBox li:hover:not(.dataListBox_til) {
  background: linear-gradient(to right, #061266, #0b1c84, #061266);
}
.dataListBox .dataListBox_til,.dataListBox .dataListBox_head{
  width: 100%;
}
.dataListBox .dataListBox_til p {
  color: #fff;
  font-weight: bold;
}
.dataListBox .dataListBox_head{
  background: linear-gradient(to right, #061266, #0b1c84, #061266);
}
.dataListBox .dataListBox_head p:nth-child(odd){
  width: 30%;
}
.dataListBox .dataListBox_head p:nth-child(even){
  width: 20%;
}
</style>