bonus-ui/src/views/screen/cityScreen/components/topIconsTwo/index.vue

<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;">{{enterNum}}</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;">{{outNum}}</span>
                    <span class="unit">台</span>
                </div>
            </div>
         </div> 
    </div>
</template>

<script> 
import { getBasicHeadApi } from "@/api/screen/cityScreen"; 
export default {
    data() {
        return { 
            enterNum:0,
            outNum:0,
        }
    },
    created() {},
    mounted() {
        this.getBasicHeader()
    },
    methods: {
        getBasicHeader(){
            getBasicHeadApi({companyId:sessionStorage.getItem('companyId')}).then(response => { 
                if(response.code==200){
                    this.enterNum=response.data.enterNum
                    this.outNum=response.data.outNum 
                }
            });
        } 
    },
}
</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: 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>