sgxt_web/src/views/backOfficeSystem/IntelligentControl/warningControl/components/ryCount.vue

<template>
  <div class="carCnt_bottom relative flex align-center">
    <div class="bottom-item-left">
      <div class="imgIcon"></div>
      <div class="leftImg">
        <div class="sirxle"></div>
      </div>
    </div>
    <ul class="bottom-item-right noScollLine">
      <li class="itemChild" v-for="item in dataObj.countList" :key="item">
        <div class="label">
          <span class="imgicon mr10" :style="{ background: item.color }"></span>
          {{ item.label }}
        </div>
        <div class="num">{{ item.num }}</div>
        <div class="per" :style="{ color: item.color }">{{ item.persont }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive,defineProps, onUnmounted } from "vue";
const dataObj = reactive({
  btns:['今日','本周','自定义'],//按钮
  head:{num:0,hb:0,tb:0},
  countList:[
    {color:'#F57100',label:'刑事重点人员',num:0,persont:'0%'},
    {color:'#FFD15C',label:'禁毒重点人员',num:0,persont:'0%'},
    {color:'#0072FF',label:'治安重点人员',num:0,persont:'0%'},
    {color:'#00FFFF',label:'经侦重点人员',num:0,persont:'0%'},
    {color:'#09FF66',label:'其他',num:0,persont:'0%'},
  ]
})
</script>

<style lang="scss" scoped>
@mixin textColor($color1, $color2) {
  background-image: linear-gradient(0deg, $color1 0%, $color2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@mixin beforeText($width, $height, $left: 0, $top: 0) {
  position: absolute;
  content: "";
  left: $left;
  top: $top;
  height: $height;
  width: $width;
}
.carCnt_bottom {
  height: 100%;
  position: relative;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
  .bottom-item-left {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    .imgIcon {
      position: absolute;
      left: 39px;
      top: 40px;
      width: 42px;
      height: 40px;
      background: url("~@/assets/images/imgIcon1.png") no-repeat center center;
      background-size: 100% 100%;
      border-radius: 50%;
      animation: spin 10s infinite linear;
    }
    .leftImg {
      width: 100%;
      height: 100%;
      &::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 120px;
        height: 120px;
        background: url("~@/assets/images/sircleOut.png") no-repeat center
          center;
        background-size: 100% 100%;
        animation: revoleCrile 10s infinite linear;
      }
      .sirxle {
        position: absolute;
        width: 91px;
        height: 91px;
        left: 15px;
        top: 15px;
        background: url("~@/assets/images/sircleIn.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .bottom-item-right {
    width: calc(100% - 150px);
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    margin-left: 30px;
    position: absolute;
    left: 116px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    .itemChild {
      display: flex;
      align-items: center;
      height: 26px;
      border-bottom: 1px dashed #0072ff;
    }
    .label {
      width: 60%;
      .imgicon {
        display: inline-block;
        width: 13px;
        height: 6px;
        border-radius: 2px;
        transform: rotate(-3deg) skew(5deg, 5deg);
      }
    }
    .num {
      width: 20%;
    }
    .per {
      width: 20%;
    }
  }
}
@keyframes spin {
  to {
    transform: rotate((1turn));
  }
}
</style>