<template>
    <div>
        <div class="headClass" style="">
            <h3>全要素布控</h3>
           
        </div>
        <div class="marginBox">
            <div>身份证号码：683716907261785789 <span>({{ status?'已布控':'未布控' }})</span></div>
           
           <div>手机号码：18928937987 <span>({{ status?'已布控':'未布控' }})</span> <div> 18928937987 <span>({{ status?'已布控':'未布控' }})</span></div></div>
           <div>车牌号码：冀A09219 <span>({{ status?'已布控':'未布控' }})</span></div>
        </div>
    </div>

</template>

<script setup>
import { ref ,onMounted} from 'vue';

   const status=ref(false)
onMounted(() => {
  console.log('Deployment 组件已挂载！')
})
</script>

<style lang="scss" scoped>
@import "~@/assets/css/layout.scss";
@import "~@/assets/css/element-plus.scss";

.headClass {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 10px 0;
    border-bottom: 2px solid #409eff;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.marginBox{
    span{
        margin-left: 10px;
        color: #ff4040;
    }
    &>:nth-child(1){
        width: 300px;
        height: 30px;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    &>:nth-child(2){
        width: 400px;
        height: 30px;
        
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    &>:nth-child(3){
        width: 210px;
        height: 30px;
       
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

</style>