75 lines
1.4 KiB
Vue
75 lines
1.4 KiB
Vue
<script setup lang="ts">
|
||
import GpsMapPanel from '@/components/GpsMapPanel.vue'
|
||
import { useMonitoringData } from '@/composables/useMonitoringData'
|
||
|
||
const { gps, errorMessage, headerStatus } = useMonitoringData({
|
||
refreshIntervalMs: 500,
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page-shell">
|
||
<header class="page-header">
|
||
<div>
|
||
<p class="eyebrow">Map</p>
|
||
<h1>地图定位页面</h1>
|
||
</div>
|
||
<p class="description">
|
||
这里整合了 `GeoStream` 的 GPS 展示逻辑。只要原来的 GPS 模块继续写
|
||
`gps_latest.json`，这个页面就能直接显示实时定位。
|
||
</p>
|
||
</header>
|
||
|
||
<section class="banner" :class="{ error: !!errorMessage }">
|
||
{{ headerStatus }}
|
||
</section>
|
||
|
||
<GpsMapPanel :gps="gps" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.page-shell {
|
||
display: grid;
|
||
gap: 22px;
|
||
}
|
||
|
||
.page-header {
|
||
display: grid;
|
||
gap: 10px;
|
||
}
|
||
|
||
.eyebrow {
|
||
margin: 0;
|
||
color: #f5a524;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
h1 {
|
||
margin: 0;
|
||
font-size: clamp(28px, 4vw, 48px);
|
||
}
|
||
|
||
.description,
|
||
.banner {
|
||
margin: 0;
|
||
color: #d5dbee;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.banner {
|
||
padding: 14px 16px;
|
||
border-radius: 18px;
|
||
background: rgba(11, 19, 35, 0.84);
|
||
border: 1px solid rgba(133, 147, 169, 0.2);
|
||
}
|
||
|
||
.banner.error {
|
||
color: #ffd0d0;
|
||
border-color: rgba(255, 107, 107, 0.28);
|
||
}
|
||
</style>
|