<template>
    <div class="content">
         <div class="iconItem">
            <div class="item-box" style="right: -12%;">
                <div class="title">今日入库</div>
                <div class="num">
                    <span style="font-weight: 600;">5</span>
                    <span class="unit">台</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;">10</span>
                    <span class="unit">台</span>
                </div>
            </div>
         </div> 
    </div>
</template>

<script> 
export default {
    data() {
        return { 
        }
    },
    created() {

    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%;
    background-image: url("../../../../../assets/cityScreen/topIconsBg2.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;  
}  
.iconItem{
    width: 50%;
    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%;
}
.unit{
    font-size: 24px;
    color: #ccc;
    margin-left: 10px;
}

@media screen and (min-width: 1920px) {
    .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>
