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

<template>
    <!-- 城市大屏 -->
    <div class="city-screen-container" id="cityScreenContainer">
        <div class="left_view">
            <!-- <TopIcons /> -->
            <div class="left_1">
                <TopIcons />
            </div>
            <div class="left_2">
                <EquQuantity style="width: 50%" />
                <EquStatus style="width: 50%" />
            </div>
            <div class="left_3">
                <Maintenance style="width: 50%" />
                <Retire style="width: 50%" />
            </div>
        </div>
        <div class="center_view">
            <CountryMap />
        </div>
        <div class="right_view">
            <div class="right_1">
                <TopIconsTwo />
            </div>
            <div class="right_2">
                <EquUse style="width: 50%" />
                <EquTurnover style="width: 50%" />
            </div>
            <div class="right_3">
                <EngineerUsing />
            </div>
        </div>
    </div>
</template>

<script>
import CountryMap from './components/countryMap/index.vue'
import TopIcons from './components/topIcons/index.vue'
import EquQuantity from './components/equQuantity/index.vue'
import EquStatus from './components/equStatus/index.vue'
import Maintenance from './components/maintenance/index.vue'
import Retire from './components/retire/index.vue'
import TopIconsTwo from './components/topIconsTwo/index.vue'
import EquUse from './components/equUse/index.vue'
import EquTurnover from './components/equTurnover/index.vue'
import EngineerUsing from './components/engineerUsing/index.vue'
import autofit from 'autofit.js'
export default {
    name: 'cityScreen',
    // mixins: [drawMixin],
    components: {
        TopIcons,
        EquQuantity,
        EquStatus,
        Maintenance,
        Retire,
        CountryMap,
        TopIconsTwo,
        EquUse,
        EquTurnover,
        EngineerUsing,
    },
    data() {
        return {}
    },
    created() {},
    mounted() {
        autofit.init({
            designHeight: 1080,
            designWidth: 1920,
            renderDom: '#cityScreenContainer',
            resize: true,
        })
    },
    methods: {},
}
</script>
<style lang="scss" scoped>
.city-screen-container {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 60px 1% 6px;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 34% 32% 34%;
    background: url('../../../assets/images/cityScreen/bg.jpg') no-repeat center center;
    background-size: 100% 100%;
}

.left_view {
    display: grid;
    gap: 6px;
    grid-template-rows: repeat(16, 1fr);
}

.right_view {
    display: grid;
    gap: 6px;
    grid-template-rows: repeat(16, 1fr);
}

.left_1 {
    grid-row: 1 / 4;
    grid-column: 1 / 2;
}
.left_2 {
    grid-row: 4 / 10;
    grid-column: 1 / 2;
    display: flex;
    gap: 6px;
    // background-color: skyblue;
}
.left_3 {
    grid-row: 10 / 17;
    grid-column: 1 / 2;
    display: flex;
    gap: 6px;
    // background-color: pink;
}

.right_1 {
    grid-row: 1 / 4;
}
.right_2 {
    grid-row: 4 / 10;
    display: flex;
    gap: 6px;
}
.right_3 {
    grid-row: 10 / 17;
    display: flex;
    gap: 6px;
}
</style>