63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
<div class="satellite-table overflow-hidden">
|
||
|
|
<div class="table-header flex">
|
||
|
|
<div
|
||
|
|
class="table-header-item leading-10 flex-1"
|
||
|
|
v-for="(headerItem, i) in header"
|
||
|
|
:key="`${headerItem}${i}`"
|
||
|
|
v-html="headerItem"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="table-body flex flex-col overflow-hidden">
|
||
|
|
<div
|
||
|
|
class="row-item flex"
|
||
|
|
v-for="(row, ri) in satellites"
|
||
|
|
:key="`${row.toString()}`"
|
||
|
|
:style="`
|
||
|
|
line-height: 40px;
|
||
|
|
background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
|
||
|
|
`"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="ceil flex-1"
|
||
|
|
v-for="(ceil, ci) in row"
|
||
|
|
:key="`${ceil}${ri}${ci}`"
|
||
|
|
v-html="ceil"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
|
||
|
|
const oddRowBGC = '#003B51'
|
||
|
|
const evenRowBGC = '#0A2732'
|
||
|
|
|
||
|
|
const header = ['#', '卫星编号', '仰角', '方位角', '载噪比']
|
||
|
|
const satellites = reactive([
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 2, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
{ id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
|
||
|
|
])
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.table-header {
|
||
|
|
background-color: rgb(25, 129, 246);
|
||
|
|
}
|
||
|
|
</style>
|