cbsl-app/pages/simpleResviror/ysqxx/index.vue

<template>
  <view class="" style="padding: 5px;">
    <txjc />
    <view class="update-time">
      <text style="color: #bfbfbf;">行政区划:</text>
      <text>{{ info.adnm }}</text>
    </view>
    <view class="update-time">
      <text style="color: #bfbfbf;">更新时间:</text>
      <text>{{ info.tm }}</text>
    </view>
    <view class="sk-info">
      <view class="sk-first-row">
        <view class="first-item">
          <text>{{ info.rz }}米</text>
          <text>水位</text>
        </view>
        <view class="first-item">
          <text>{{ info.nowCap }}万m³</text>
          <text>蓄水量</text>
        </view>
        <view class="first-line"></view>
        <image style="width: 20px; height: 20px;" src="../../../static/images/first.jpg"></image>
      </view>
      <view class="sk-first-row">
        <view class="first-item">
          <text>{{ info.crestElev }}米</text>
          <text>坝顶高程</text>
        </view>
        <view class="first-item">
          <text>{{ info.flLowLimLev }}万m³</text>
          <text>正常水位</text>
        </view>
        <view class="first-item">
          <text>{{ info.totCap }}万m³</text>
          <text>总库容</text>
        </view>
      </view>
      <view class="sk-second-row">
        <view class="first-item">
          <text>{{ rainInfo.today || '-' }}毫米</text>
          <text>今日降雨</text>
        </view>
        <view class="first-item">
          <text>{{ rainInfo.yesterdayDrp }}毫米</text>
          <text>昨日降雨</text>
        </view>
        <view class="first-line" style="margin-right:17px"></view>
        <image style="width: 20px; height: 20px;" src="../../../static/images/second.jpg"></image>
      </view>
      <view class="sk-thirst-row">
        <view class=" sk-thirst-item" v-for="(item, index) in stationList" :key="index">
          <!-- 站名：支持自动换行 -->
          <view class="sk-thirst-name">{{ item.name }}:</view>
          <view style="margin: 0 20rpx;">123米</view>
          <view>时间:</view>
          <view class="sk-thirst-time">{{ item.time }}</view>
        </view>
      </view>
    </view>
    <view class="real-water">
      <!-- 实时水位 -->
     <h4>实时水位</h4>
     <sssw/>
    </view>

    <view class="real-water">
     <h4>实时雨量</h4>
     <ssyl/>
    </view>
  </view>

</template>

<script>
import txjc from './txjc.vue';
import sssw from './sssw.vue'
import ssyl from './ssyl.vue'
export default {
  components: {
    txjc,
    sssw,
    ssyl
  },
  data() {
    return {
      rainInfo: {
        today: 0,
        yesterdayDrp: 0
      },
      info: {
        tm: '2026-04-13 15:09',
        rz: '72.65',
        nowCap: 790,
        crestElev: '76',
        flLowLimLev: '76',
        totCap: 300,
        adnm: '咸宁市'
      },
      stationList: [
        { name: "塘沽(东)站", time: "12:21(高平潮)", height: 199 },
        { name: "临港工业区站", time: "12:19(高平潮)", height: 198 },
        { name: "大神堂站 站名特别特别特别长长长长长长", time: "12:18(高平潮)", height: 197 },
        { name: "大港站", time: "12:15(高平潮)", height: 195 },
        { name: "南港工业区站", time: "12:10(高平潮)", height: 192 }
      ]
    }
  },
}
</script>
<style lang="scss" scoped>
.update-time {
  display: flex;
  // justify-content: space-between;
  column-gap: 10px;
  align-items: center;
  padding: 5px 5px;
  // border-bottom: 1px solid #dfdfdf;
}

.sk-info {
  display: flex;
  flex-direction: column;
  padding: 2px 5px;
  margin: 5px 0;

  .sk-first-row,
  .sk-second-row {
    display: flex;
    padding: 5px 10px;
    align-items: center;
    justify-content: space-around;
    background-color: #f2fafc;

    .first-line {
      width: 3px;
      height: 20px;
      background-color: #c6eae6;
    }

    .first-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .sk-second-row {
    margin: 5px 0;
    background-color: #f2f8ff;
    padding: 5px 10px;
  }

  .sk-thirst-row {
    background-color: #f2fafc;
    padding: 5px 10px;

    .sk-thirst-item {
      display: flex;
      align-items: center;
      padding: 18rpx 0;
      font-size: 28rpx;
    }

    /* 站名：自动换行、左边固定宽度 */
    .sk-thirst-name {
      width: 230rpx;
      line-height: 1.2;
      color: #333;
      word-break: break-all;
      /* 自动换行 */
      white-space: pre-wrap;
    }

    /* 潮时：中间 */
    .sk-thirst-time {
      flex: 1;
      text-align: center;
      color: #666;
    }

    /* 潮高：右边 */
    .sk-thirst-height {
      width: 120rpx;
      text-align: right;
      color: #007aff;
      font-weight: 500;
    }
  }
}
.real-water{
  padding: 2px 5px;
}
</style>