<template>
  <div class="security-forces">
    <div class="security-forces-content noScollLine" v-loading="loading">
      <div v-for="(item, index) in list" :key="index" class="mt5 mb5">
        <div class="flex align-center title">
          <img src="@/assets/images/bi/abll.png" /><span class="f18">{{ item.ssbm }}</span>
        </div>
        <div class="row-container">
          <el-row class="mb2 pl20 pb2">
            <el-col :span="12">值守点位:<span class="num"> {{  item.zsdSl }} </span>个</el-col>
            <el-col :span="12">保安巡逻组:<span class="num"> {{ item.baxlzSl }} </span>组</el-col>
          </el-row>
          <el-row class="pl20 pb2">
            <el-col :span="12">保安值守:<span class="num"> {{ item.baSl }} </span>个</el-col>
            <el-col :span="12">保安巡逻:<span class="num"> {{ item.baxlSl }} </span>个</el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { qcckGet } from "@/api/qcckApi.js";
import { onMounted, ref } from 'vue';
const list = ref([])
const loading = ref(false)
onMounted(()=>{
  getCount()
})

// 更新数据
const getCount = () =>{
  loading.value = true;
  qcckGet({},'/mosty-jbld/dptj/getAbxxtj').then(res=>{
    loading.value = false;
    list.value = res || []
  }).catch(()=>{
    loading.value = false;
  })
}

</script>
<style lang="scss" scoped>
  .security-forces {
    padding: 10px 10px 5px 10px;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .security-forces-content {
      height: 100%;
      overflow: auto;
      box-sizing: border-box;
    }
    .title {
      font-family: "YSBTH";
      -webkit-background-clip: text;
      background-image: linear-gradient(to top, #a3c6f5 20%, #ffffff 80%);
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .el-row {
      background: url("~@/assets/images/bi/nrk.png") no-repeat center center;
      background-size: 100% 100%;
      box-sizing: border-box;
      .num {
        font-size: 18px;
        color: rgb(1, 252, 254);
        margin: 0 5px;
      }
      .el-col{
        padding: 2px 0;
        box-sizing: border-box;
      }
    }
  }
</style>
<style>
.el-loading-mask{
  background: rgba(0,0,0,0.5);
}
</style>
