151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
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 />
|
|
</div>
|
|
<div class="left_5">
|
|
<EquStatus />
|
|
</div>
|
|
<div class="left_3">
|
|
<Maintenance />
|
|
</div>
|
|
<div class="left_6">
|
|
<Retire />
|
|
</div>
|
|
</div>
|
|
<div class="center_view">
|
|
<CountryMap />
|
|
</div>
|
|
<div class="right_view">
|
|
<div class="right_1">
|
|
<TopIconsTwo />
|
|
</div>
|
|
<div class="right_2">
|
|
<EquUse />
|
|
</div>
|
|
<div class="right_3">
|
|
<EquTurnover />
|
|
</div>
|
|
<div class="right_4">
|
|
<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>
|
|
@font-face {
|
|
font-family: 'Alibaba-PuHuiTi-Regular';
|
|
src: url('../../../assets/font-family/alibaba/Alibaba-PuHuiTi-Regular.ttf');
|
|
}
|
|
.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%;
|
|
font-family: 'Alibaba-PuHuiTi-Regular';
|
|
}
|
|
|
|
.left_view {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-rows: repeat(16, 1fr);
|
|
}
|
|
|
|
.right_view {
|
|
display: grid;
|
|
gap: 10px;
|
|
grid-template-rows: repeat(16, 1fr);
|
|
}
|
|
|
|
.left_1 {
|
|
grid-row: 1 / 2;
|
|
grid-column: 1 / 2;
|
|
}
|
|
.left_2 {
|
|
grid-row: 2 / 6;
|
|
grid-column: 1 / 2;
|
|
}
|
|
.left_5 {
|
|
grid-row: 6 / 10;
|
|
grid-column: 1 / 2;
|
|
}
|
|
.left_3 {
|
|
grid-row: 10 / 13;
|
|
grid-column: 1 / 2;
|
|
}
|
|
.left_6 {
|
|
grid-row: 13 / 17;
|
|
grid-column: 1 / 2;
|
|
}
|
|
|
|
.right_1 {
|
|
grid-row: 1 / 2;
|
|
}
|
|
.right_2 {
|
|
grid-row: 2 / 7;
|
|
display: flex;
|
|
}
|
|
.right_3 {
|
|
grid-row: 7 / 12;
|
|
display: flex;
|
|
}
|
|
.right_4 {
|
|
grid-row: 12 / 17;
|
|
display: flex;
|
|
}
|
|
</style>
|