<template>
    <div class="content">
         <div class="iconItem">
            <div class="item-box" style="right: -8%;">
                <div class="title">装备总量</div>
                <div class="num">
                    <span style="font-weight: 600;">{{totalCount}}</span>
                    <span class="unit">台</span>
                </div>
            </div>
           
         </div>
         <div class="iconItem">
            <div class="item-box" style="right: -10%;">
                <div class="title">装备总价值</div>
                <div class="num">
                    <span style="font-weight: 600;" v-if="totalValue>99999999">{{(totalValue/100000000).toFixed(3)}}</span>
                    <span style="font-weight: 600;" v-else>{{(totalValue/10000).toFixed(2)}}</span>
                    <span class="unit" v-if="totalValue>99999999">亿元</span> 
                    <span class="unit" v-else>万元</span>
                </div>
            </div>
         </div>
         <div class="iconItem">
            <div class="item-box" style="right: -8%;">
                <div class="title">装备配置率</div>
                <div class="num">
                    <span style="font-weight: 600;">{{allocationRate}}</span>
                    <span class="unit">%</span>
                </div>
            </div>
         </div>
    </div>
</template>

<script>  
import { getBasicHeadApi } from "@/api/screen/cityScreen"; 
export default {
    data() {
        return { 
            totalCount:0,
            totalValue:0,
            allocationRate:0,
        }
    },
    created() {},
    mounted() {
        this.getBasicHeader()
    },
    methods: {
        getBasicHeader(){
            getBasicHeadApi({companyId:sessionStorage.getItem('companyId')}).then(response => {
                console.log(response,'getBasicHeadApi')
                if(response.code==200){
                    this.totalCount=response.data.totalCount
                    this.totalValue=response.data.totalValue
                    this.allocationRate=response.data.allocationRate 
                }
            });
        } 
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%;
    background-image: url("../../../../../assets/cityScreen/topIconsBg.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    // border: 1px solid red;
   
}  
.iconItem{
    width: 25%;
    height: 100%;
    margin-right: 6%;
    // border: 1px solid red;
    position: relative;
}
.item-box{
    width: 70%;
    height: 100%;
    position: absolute;
    right: 0%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.title{
    color: #fff;
    font-size: 32px;
    margin-right: 15%;
    
}
.num{
    /* color: #FCFAC4; */
    font-size: 32px;
    margin-right: 25%;
    margin-top: 5%;
    font-family: 'DIN';
    background: linear-gradient(180deg, #fff 25.81%, #fdf277 77.42%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.unit{
    font-size: 24px;
    color: #ccc;
    margin-left: 10px;
}

@media screen and (min-width: 1080px) {
    .title{ 
        font-size: 12px; 
    }
    .num{ 
        font-size: 12px; 
    }
    .unit{
        font-size: 10px; 
        margin-left: 2px;
    }
}
@media screen and (min-width: 3000px) {
    .title{ 
        font-size: 32px; 
    }
    .num{ 
        font-size: 32px;
    }
    .unit{
        font-size: 24px; 
        margin-left: 10px;
    }
}

</style>
