xytSk-App/pages/rainDetail/zbyq/resList.vue

88 lines
2.7 KiB
Vue

<template>
<view class="list-box">
<uni-row class="list-row" >
<uni-col :span="12">
<view class="first-row" style="margin-left: 10px;">
<text style="display: inline-block; margin-bottom: 10px; font-weight: bold;">{{info.stnm}}</text>
<view>
<text style="margin-right: 60px; color: #aaaaaa;">{{sttype[info.source]}}</text>
<text style="color: #aaaaaa;">{{info.distance ? info.distance.toFixed(2) : 0}}km</text>
</view>
<text style="color: #aaaaaa;">{{info.tm}}</text>
</view>
</uni-col>
<uni-col :span="12" >
<view class="second-row" style="border: 1px solid #dfdfdf; font-size: 12px;border-bottom: 1px solid #dfdfdf;">
<view style="display: flex;">
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
1h(mm)
</view>
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
3h(mm)
</view>
</view>
<view style="display: flex;">
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
{{info.h1}}
</view>
<view style="flex: 0.5; text-align: center; border-bottom:1px solid #dfdfdf">
{{info.h3}}
</view>
</view>
<view style="display: flex;">
<view style="flex:0.5; background-color: #e1f3ff; border-right: 1px solid #dfdfdf; text-align: center; border-bottom:1px solid #dfdfdf">
6h(mm)
</view>
<view style="flex: 0.5; background-color: #e1f3ff;text-align: center; border-bottom:1px solid #dfdfdf" >
24h(mm)
</view>
</view>
<view style="display: flex;">
<view style="flex: 0.5; text-align: center; border-right: 1px solid #dfdfdf;">
{{info.h6}}
</view>
<view style="flex: 0.5; text-align: center; ">
{{info.h24}}
</view>
</view>
</view>
</uni-col>
</uni-row>
</view>
</template>
<script>
export default {
props:{
info:Object,
default:{}
},
data() {
return {
sttype: {
"SH": '山洪',
"SW": '水文',
"QX": '气象',
"SK": '水库',
},
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.list-box{
.list-row{
padding-bottom: 3px;
border-bottom: 1px solid #dfdfdf;
.second-row{
}
}
}
</style>