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

<template>
    <div class="page">
        <div class="main-view">
            <div class="left_view">
                <TopIcons style="width: 96%;height: 13%;margin: 0 auto;"></TopIcons>
                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
                    <EquiQuantity style="width: 50%;height: 100%;"></EquiQuantity>
                    <EquiStatus style="width: 50%;height: 100%;"></EquiStatus>
                </div>
                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
                    <Maintenance style="width: 50%;height: 100%;"></Maintenance>
                    <Retire style="width: 50%;height: 100%;"></Retire>
                </div>
            </div>
            <div class="center_view"></div>
            <div class="right_view">
                <TopIconsTwo style="width: 96%;height: 13%;margin: 0 auto;"></TopIconsTwo>
                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
                    <EquiUse style="width: 50%;height: 100%;"></EquiUse>
                    <EquiTurnover style="width: 50%;height: 100%;"></EquiTurnover>
                </div>
                <div style="width: 98%;height: 42%;margin: 0 auto;display: flex;align-items: center;">
                    <EngineerUsing style="width: 100%;height: 100%;"></EngineerUsing>
                </div>
            </div>
        </div>
    </div>
</template>

<script> 
import TopIcons from './components/topIcons/index'
import TopIconsTwo from './components/topIconsTwo/index'
import EquiQuantity from './components/equiQuantity/index'
import EquiStatus from './components/equiStatus/index'
import Maintenance from './components/maintenance/index'
import Retire from './components/retire/index'
import EquiTurnover from './components/equiTurnover/index'
import EquiUse from './components/equiUse/index'
import EngineerUsing from './components/engineerUsing/index'
export default {
    name: 'cityScreen',
    components: {
      TopIcons,
      TopIconsTwo,
      EquiQuantity,
      EquiStatus,
      Maintenance,
      Retire,
      EquiTurnover,
      EquiUse,
      EngineerUsing
    },
    data() {
        return { 
        }
    },
    created() {

    },
    mounted() {
    },
    methods: {
    },
}
</script>
<style lang="scss" scoped>
.page{
    background: #333;
    width: 100vw;
    height: 100vh; 
    display: flex;
    align-items: center;
}
.main-view{
    width: 100vw;
    height: 100vh;
    background-image: url("../../../assets/cityScreen/mainBg.png");
    background-size: 100% 100%;
    display: flex;
}
@media screen and (min-width: 1920px) {
  .main-view {
    height: 60vh;
  }
}
@media screen and (min-width: 3300px) {
  .main-view {
    height: 100vh;
  }
}

.left_view{
    width: 32%;
    height: 100%; 
    padding: 2%;
}

.center_view{
    width: 36%;
    height: 100%; 
}

.right_view{
    width: 32%;
    height: 100%;
    padding: 2%;
    //   border: 1px solid red;
}


</style>