<template>
  <div class="body">
    <vTitle
      ><span>数据统计</span><span class="time">2021 / 11 / 25</span></vTitle
    >
    <div class="con">
      <div class="top">
        <div>
          <img :src="require(`@/assets/images/wurenji/top.png`)" alt="" />
          <p>无人机巡视</p>
        </div>
        <ul>
          <li v-for="(item, i) in data" :key="i">
            <span>{{ item.name }}</span>
            <p>
              <span>{{ item.num }}</span>
              <span>次</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="readmore">
        <img :src="require(`@/assets/images/title_icon.png`)" alt="" />
        <span>查看更多</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      data: [
        {
          name: "巡检次",
          num: "15",
          img: "1.png",
          color: "#0ad5ff",
        },
        {
          name: "拍照次数",
          num: "16",
          img: "2.png",
          color: "#66B0C9",
        },
        {
          name: "录像次数",
          num: "16",
          img: "3.png",
          color: "#E0B822",
        },
      ],
    };
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.con {
  background-position: top left;
  background-size: 100% 70%;
  background-repeat: no-repeat;
  padding-top: 10px;
  .top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    > div {
      flex: 1;
      padding: 30px;
      position: relative;
      > img {
        width: 100%;
      }
      > p {
        font-size: 12px;
        position: absolute;
        top: 65%;
        left: 50%;
        transform: translateX(-50%) scale(0.8);
      }
    }
    > ul {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      li {
        width: 100%;
        display: flex;
        margin: 20px 0;
        padding-right: 30px;
        align-items: center;
        justify-content: space-between;
        position: relative;
        > span {
          font-size: 16px;
        }
        > p {
          > span {
            &:first-of-type {
              font-size: 26px;
              color: #e0b822;
              margin-top: 4px;
              margin-right: 10px;
            }
          }
        }

        &:not(&:last-of-type) {
          &::before {
            content: "";
            display: inline-block;
            height: 1px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            opacity: 0.5;
            background: linear-gradient(
              45deg,
              #66b0c9 0%,
              #66b0c9 64%,
              rgba(102, 176, 201, 0.1) 100%
            );
          }
        }
      }
    }
  }

  .readmore {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
    > img {
      width: 22px;
      margin-right: 10px;
    }
    > span {
      font-size: 20px;
    }
  }
}
</style>
