151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
Vue
<template>
|
||
<div class="scroll-container">
|
||
<table cellspacing="0" cellpadding="8" style="width: 100%; border-collapse: collapse; text-align: center">
|
||
<!-- 双层表头 -->
|
||
<thead>
|
||
<!-- 第一行：跨列合并 -->
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>网省名称</th>
|
||
<th>装备价值（亿元）</th>
|
||
<th>装备数量（台）</th>
|
||
<th>配置率</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<!-- 表体：使用 v-for 渲染数据 -->
|
||
<tbody>
|
||
<tr v-for="(row, index) in tableData" :key="index">
|
||
<td style="width: 60px">{{ index + 1 }}</td>
|
||
<td style="width: 180px">{{ row.deptName }}</td>
|
||
<td style="width: 110px">{{ row.totalValue }}</td>
|
||
|
||
<!-- 装备数量 -->
|
||
<td>{{ row.totalEquipmentQuantity }}</td>
|
||
<td>{{ row.lineNum }}</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getUnitEquipmentConfigurationApi } from '@/api/wsScreen/index'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [
|
||
{
|
||
deptName: '安徽省',
|
||
totalValue: '3.96',
|
||
totalEquipmentQuantity: '2625',
|
||
lineNum: '120.00',
|
||
},
|
||
{
|
||
deptName: '陕西省',
|
||
totalValue: '3.66',
|
||
totalEquipmentQuantity: '2325',
|
||
lineNum: '109.00',
|
||
},
|
||
{
|
||
deptName: '河北省',
|
||
totalValue: '2.96',
|
||
totalEquipmentQuantity: '2025',
|
||
lineNum: '119.00',
|
||
},
|
||
{
|
||
deptName: '湖北省',
|
||
totalValue: '3.86',
|
||
totalEquipmentQuantity: '2425',
|
||
lineNum: '105.07',
|
||
},
|
||
{
|
||
deptName: '山东省',
|
||
totalValue: '3.42',
|
||
totalEquipmentQuantity: '2405',
|
||
lineNum: '101.09',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
created() {
|
||
// this.getList()
|
||
},
|
||
methods: {
|
||
async getList() {
|
||
try {
|
||
const res = await getUnitEquipmentConfigurationApi()
|
||
console.log('🚀 ~ getList ~ res:', res)
|
||
if (!res.data) return
|
||
this.tableData = res.data || []
|
||
} catch (error) {
|
||
console.log('🚀 ~ getList ~ error:', error)
|
||
}
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
font-family: 'Alibaba-PuHuiTi-Regular';
|
||
font-size: 11px;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
padding: 10px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
/* border: 1px solid rgba(255, 255, 255, 0.3); // 边框颜色可根据背景调整 */
|
||
background: linear-gradient(to bottom, #f0f5f8, #5eb6f0);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
line-height: 23px;
|
||
}
|
||
|
||
th {
|
||
/* background-color: #f5f5f5; */
|
||
font-weight: bold;
|
||
}
|
||
// 第一行背景
|
||
thead {
|
||
background-image: url('../../img/tableHeader.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
tbody tr {
|
||
background-image: url('../../img/tableTr.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/* 奇偶行颜色区分 */
|
||
tbody tr:nth-child(even) {
|
||
/* margin: 10px 0; */
|
||
}
|
||
|
||
tbody tr:hover {
|
||
background-image: url('../../img/table-hover.png');
|
||
cursor: pointer;
|
||
}
|
||
.scroll-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
|
||
/* 隐藏滚动条轨迹 */
|
||
-ms-overflow-style: none; /* IE / Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
/* Chrome / Safari */
|
||
.scroll-container::-webkit-scrollbar {
|
||
width: 0; /* 或者直接隐藏 */
|
||
height: 0;
|
||
background: transparent; /* 背景透明 */
|
||
}
|
||
</style>
|