42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<template>
|
|
<full-screen-container>
|
|
<TheHeader title="卫星数据监控平台" />
|
|
|
|
<div class="main-content flex flex-1 flex-col">
|
|
<DigitalFlopContainer />
|
|
|
|
<div class="block-left-right-content flex flex-1 mt-5">
|
|
<div class="block-left-content w-1/5 flex flex-col">
|
|
<div class="clock-content mb-2 flex-1">
|
|
<Clock />
|
|
</div>
|
|
<div class="compass-content mb-2 flex-1">
|
|
<Compass />
|
|
</div>
|
|
<div class="water-level-content flex-1">
|
|
<WaterLevel />
|
|
</div>
|
|
</div>
|
|
<div class="block-right-content ml-2 flex flex-1">
|
|
<Map />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</full-screen-container>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
|
|
import TheHeader from '../components/Layout/TheHeader.vue'
|
|
import DigitalFlopContainer from '../components/DigitalFlopContainer.vue'
|
|
import Clock from '../components/Clock.vue'
|
|
import Compass from '../components/Compass.vue'
|
|
import WaterLevel from '../components/WaterLevel.vue'
|
|
import Map from '../components/Map.vue'
|
|
</script>
|
|
|
|
<style scoped>
|
|
.clock-content, .compass-content, .water-level-content, .block-right-content {
|
|
background-color: rgba(6,30,93,.5);
|
|
}
|
|
</style> |