xytSk-App/pages/rain/Table.vue

99 lines
2.7 KiB
Vue

<template>
<div class="table_div">
<div class="table_cur">
<table>
<tr>
<th style="width: 50px;">
<div style="margin-top: 6px;">序号</div>
</th>
<th style="width: 100px">
<div style="margin-top: 6px;">站名</div></th>
<th style="width: 70px;">
<div>时段雨量</div>
<div style="margin-top: -12px;">(mm)</div>
</th>
<th style="width: 70px;" >
<div>昨日降雨</div>
<div style="margin-top: -12px;">(mm)</div>
</th>
<th style="width: 100px">
<div style="margin-top: 6px;">所属政区</div></th>
</tr>
<div style="max-height: 460px; overflow-y: auto">
<tr v-for="(item, index) in list" :key="index">
<td style="width: 50px">{{ index + 1 }}</td>
<td style="width: 100px;color: #3399ef;" @click="jumpDetail(item)">{{ item.stnm }}</td>
<td style="width: 70px">{{ item.drp }}</td>
<td style="width: 70px">{{ item.yesDrp || 0 }}</td>
<td style="width: 100px">{{ item.adnm }}</td>
</tr>
</div>
</table>
</div>
</div>
</template>
<script>
export default {
props:{
list:{
type:Array,
default:[],
}
},
methods:{
jumpDetail(params){
console.log(123)
uni.navigateTo({
url:`/pages/rainDetail/rainDetail?stcd=${params.stcd}`
})
}
}
}
</script>
<style lang="scss" scoped>
.table_div {
height: 100%;
max-width: calc(100% - 0px);
max-height: calc(100vh);
flex: 1;
padding-top: 0px;
overflow-x: scroll;
}
/*table样式*/
.table_cur {
width: 100%;
empty-cells: show;
border-collapse: collapse;
font-size: 14px;
}
.table_cur tr {
display: flex;
line-height: 56rpx;
}
.table_cur th {
height: 80rpx;
color: #3399ef;
background: #e1f3ff;
font-size: 14px;
// font-weight: bold;
padding: 0px 10px;
box-sizing: border-box;
white-space: nowrap;
text-align: center !important;
}
.table_cur td {
height: 65rpx;
// border-bottom: 1px solid #d8ddeb;
font-size: 14px;
color: #2f4056;
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
text-align: center !important;
}
/*table样式 end*/
</style>