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

<template>
    <div class="content">
        <div class="content-title">
            <img src="../../../../../assets/cityScreen/equiQuantityBg.png" style="width: 100%;height: 100%;" />
            <div class="title">
                装备数量价值
            </div> 
        </div>
        <div class="content-view">
            <div class="content-view-item">
                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
                    <img src="../../../../../assets/cityScreen/quantityIcon1.png" style="width: 90%;height: 80%;" />
                </div>
                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
                    <div class="item-title">
                        <span class="title2">线路装备</span>
                    </div> 
                    
 
                    
                </div>
            </div>
            <div class="content-view-item">
                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
                    <img src="../../../../../assets/cityScreen/quantityIcon2.png" style="width: 90%;height: 80%;" />
                </div>
                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
                    <div class="item-title">
                        <span class="title2">变电装备</span>
                    </div> 

                </div>
            </div>
            <div class="content-view-item">
                <div style="width: 20%;height: 90%;display: flex;align-items: center;justify-content: center;">
                    <img src="../../../../../assets/cityScreen/quantityIcon3.png" style="width: 90%;height: 80%;" />
                </div>
                <div style="width: 80%;height: 90%;display: flex;flex-direction: column;">
                    <div class="item-title">
                        <span class="title2">电缆装备</span>
                    </div> 



                </div>
            </div>

        </div>
    </div>
</template>

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

    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    height: 100%; 
}   
.content-title{
    width: 100%;
    height: 18%; 
    position: relative;
    color: #78D6FF;
}
.title{
    font-size: 24px;
    position: absolute;
    top: 42%;
    left: 15%;
}
.content-view{
    width: 100%;
    height: 80%; 
    padding-left: 8%;
}
.content-view-item{
    width: 100%;
    height: 32%;
    margin-bottom: 1%; 
 
    display: flex;
    align-items: center;
    justify-content: center;
}
.item-title{
    width: 100%;
    height: 30%;
    background-image: url("../../../../../assets/cityScreen/equiQuantityTitle.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
}
.title2{
     font-size: 20px;
     color: #fff;
}
@media screen and (min-width: 1920px) { 
    .title{
        font-size: 10px; 
    }
    .title2{
        font-size: 10px; 
    }
    
}
@media screen and (min-width: 3000px) { 
    .title{
        font-size: 24px;
    }
    .title2{
        font-size: 20px; 
    }
}


</style>