62 lines
1.1 KiB
Vue
62 lines
1.1 KiB
Vue
<template>
|
|
<table v-if="show">
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>经度</th>
|
|
<th>纬度</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="point-list">
|
|
<tr v-for="item, index in point.items" :key="index">
|
|
<td>{{ index + 1 }}</td>
|
|
<td>{{ item ? item.lng : ''}}</td>
|
|
<td>{{ item ? item.lat : ''}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { usePointStore } from '../stores/point'
|
|
|
|
const point = usePointStore()
|
|
const show = computed(() => point.index)
|
|
</script>
|
|
|
|
<style scoped>
|
|
table {
|
|
color: #FFFFFF;
|
|
background-color: #242424;
|
|
padding: 10px;
|
|
border-radius: 7px;
|
|
border-collapse: separate;
|
|
border-spacing: 2px;
|
|
}
|
|
|
|
table th:first-child {
|
|
width: 60px;
|
|
}
|
|
|
|
table th:not(:first-child) {
|
|
width: 120px;
|
|
}
|
|
|
|
table thead tr {
|
|
background-color: rgba(84, 84, 84, 0.8);
|
|
}
|
|
|
|
table tbody tr:nth-child(even) {
|
|
background-color: rgba(84, 84, 84, 0.8);
|
|
}
|
|
|
|
table tbody tr:nth-child(odd) {
|
|
background-color: rgba(84, 84, 84, 0.25);
|
|
}
|
|
|
|
table th, table td {
|
|
padding: 3px 5px;
|
|
}
|
|
</style>
|