添加卫星信息列表

src/render/components/ScrollBoardTable.vue

@@ -0,0 +1,63 @@
+<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>