<template>
  <div class="popular-feelings-warp">
    <div
      class="popular-feelings-content"
      :style="{
        '--before-bg': `url(${beforeBg})`,
      }"
    >
      <template v-for="(n, index) in datalist" :key="index">
        <div
          class="popular-feelings-item"
          :style="{
            'background-image': 'url(' + getAssetsFile('images/early/back1.png') + ')',
          }"
          :class="n.name"
        >
          <div class="content-bg">
            <div class="val">{{ n.val || 0 }}</div>
            <div class="label">{{ n.title || 0 }}</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
let datalist = reactive([
  { name: 'popular', title: '今天舆情量', val: 1872 },
  { title: '今日文章量', name: 'article', val: 1856 },
  { title: '今日浏览量', name: 'view', val: 54681 },
  { title: '文章总数', name: 'total', val: 75671 },
]);

const beforeBg = getAssetsFile('images/early/bg5.png');
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.popular-feelings-warp {
  height: 100%;
  width: 100%;
  padding: 10px;
  .popular-feelings-content {
    width: 100%;
    height: 100%;
    position: relative;
    .popular-feelings-item {
      position: absolute;
      background-size: 100% 100%;
      background-position: left bottom;
      background-repeat: no-repeat;
      text-align: center;
      &.popular {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        height: 45%;
        .val {
          color: #fff;
          font-weight: bold;
          font-size: 14px;
        }
        .label {
          color: #50e3c2;
          margin-top: 8%;
          font-size: 10px;
        }
      }
      &.article {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        width: 35%;
        height: 45%;
        .val {
          color: #fff;
          font-weight: bold;
          font-size: 14px;
        }
        .label {
          color: #50e3c2;
          margin-top: 8%;
          font-size: 10px;
        }
      }
      &.view {
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        height: 45%;
        .val {
          color: #fff;
          font-weight: bold;
          font-size: 14px;
        }
        .label {
          color: #50e3c2;
          margin-top: 8%;
          font-size: 10px;
        }
      }
      &.total {
        left: 50%;
        bottom: -10%;
        transform: translateX(-50%);
        width: 50%;
        height: 66%;
        .val {
          color: #50e3c2;
          font-weight: bold;
          font-size: 20px;
          margin-top: 2%;
        }
        .label {
          color: #fff;
          margin-top: 10%;
        }
      }

      .content-bg {
        width: 100%;
        height: 100%;
      }
      // .content-bg ::before {
      //   content: '';
      //   position: absolute;
      //   top: 0;
      //   left: 0;
      //   width: 100%;
      //   height: 100%;
      //   background-image: var(--before-bg); /* 替换为你的背景图片路径 */
      //   background-size: 100% 100%;
      //   background-position: left bottom;
      //   background-repeat: no-repeat;
      //   z-index: -1; /* 确保伪元素在内容后面 */
      //   transform: rotate(90deg); /* 旋转角度 */
      //   transform-origin: center; /* 设置旋转中心点 */
      // }
    }
  }
}
</style>
