<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>
