premier/src/components/business/access/people.vue

<template>
   <el-col :span="24" class="energy modular">
      <el-col class="title">人员通行</el-col>
         <el-col class="itemWrap" :span="24">
            <el-col class="item" :span="24">
                <el-col class="right" :span="24" >
                  <el-col class="right_top" :span="24">
                     <el-col class="right_left" :span="7" >
                        <el-col class="right_left_top" :span="24">
                           {{list[0][0]}}人/次
                        </el-col>
                        <el-col class="right_left_bottom" :span="24">
                           今日总人流量
                        </el-col>
                     </el-col>
                     <el-col class="right_right" :span="24">
                        <el-col class="right_right_top" :span="24">
                           楼内人员通行次数：{{list[0][1]}}人次
                        </el-col>
                        <el-col class="right_right_bottom" :span="24">
                           访客通行次数：{{list[0][2]}}人次
                        </el-col>
                     </el-col>
                  </el-col>
                  <el-col class="right_bottom" :span="24">
                     <pie :resData="list" :type="type" alt="人员通行"/>
                  </el-col>
               </el-col>
            </el-col>
         </el-col>
 </el-col>
</template>

<script setup >
import pie from "@/components/business/access/pie";
const props = defineProps({
   resData: Object,
})
const list = props.resData
const type = ref("people")
</script>
<style lang="scss" scoped >
@import "@/assets/styles/common.scss";
.energy{
   width:626px;
   height:calc(50vh - 155px);
   overflow: hidden;
   box-sizing: border-box;
      .itemWrap{
         .item{
            height:235px;
            .right{
               margin-left:0px;
               .right_top{
                  width:100%;
                  box-sizing: border-box;
                  .right_left{
                     background-color: $pmlbgc;
                     border-radius: 2px;
                     padding:7px 5px;
                     width:100%;
                     box-sizing: border-box;
                     text-align: center;
                     .right_left_top{
                        font-size: 14px;
                        font-weight: 700;
                        width:100%;
                     }
                     .right_left_bottom{
                        font-size: 14px;
                        margin-top:5px;
                        width:100%;
                     }
                  }
                  .right_right{
                     font-size: 10px;
                     margin-left:5px;
                     box-sizing: border-box;
                     width:69.5%;
                     .right_right_top{
                        background-color: $pmlbgc;
                        border-radius: 2px;
                        font-size: 12px;
                        padding:5px;
                        box-sizing: border-box;
                        width:100%;
                     }
                     .right_right_bottom{
                        background-color: $pmlbgc;
                        border-radius: 2px;
                        font-size: 12px;
                        margin-top:5px;
                        padding:5px;
                        box-sizing: border-box;
                        width:100%;
                        
                     }
                  }
               }
            }
            
         }
         .item2{
            padding:0px 0;
            margin-top:70px;
            .img{
               display: inline-block;
               vertical-align: middle;
               width:70px;
               height:70px;
               img{

               }
            }
            .attribute{
               vertical-align: middle;
               display: inline-block;
               .name{
                  font-size: 12px;
                  width:100%;
               }
               .value{
                  font-size: 12px;
                  margin-top:10px;
                  font-weight: 700;
                  display: inline-block;
                  span{
                     font-size: 12px;
                  }
                  .compare{
                     width:15px;
                     height:20px;
                     display: inline-block;
                     margin-left:10px;
                     vertical-align: middle;
                  }
               }
            }
           
         }
         .item2:nth-child(2){
            margin-top:0px !important;
         }
      }
     
      .itemWrap:nth-child(3){
         border-left:1px solid rgba(255,255,255,.1);
      }
      .itemWrap:nth-child(3).item .typeTitle{
         margin-left:20px;
      }

}
</style>