cbsl-app/pages/simpleResviror/index.vue

<template>
  <view class="resviror-detail-box">
    <u-status-bar></u-status-bar>
    <view class="nav-bar">
      <u-icon name="arrow-left" color="#000" size="20" @click="backTo" style="margin-left:10px"></u-icon>
      <view class="title">
        {{ stnm }}
        <!-- <text style="font-size:12px;margin-left:5px">{{sta}}({{rain}})</text> -->
      </view>
    </view>
    <view class="tab-bar">
      <uni-swiper-dot :info="Array(2).fill(0)" :current="current" field="content" :dotsStyles="dotsStyles">
        <swiper class="swiper-box" style="height: 30px;" @change="change">
          <swiper-item>
            <view style="display: flex;justify-content: space-between;">
              <view class="jcsj" @click="activeOne = 0" :class="{ 'active': activeOne == 0 }">
                雨水情信息
              </view>
              <!-- style="margin: 0 25px;" -->
              <view class="tjsj" @click="activeOne = 1" :class="{ 'active': activeOne == 1 }">
                视频监控
              </view>
              <!-- style="margin: 0 25px 0 0;" -->
              <view class="spjk" @click="activeOne = 2" :class="{ 'active': activeOne == 2 }" >
                基本信息
              </view>
              <view class="zbyq" @click="activeOne = 3" :class="{ 'active': activeOne == 3 }">
                安全监测
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view style="display: flex; margin-left: 10px;">
              <view class="zrtx" @click="activeOne = 4" :class="{ 'active': activeOne == 4 }">
                责任体系
              </view>
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>

    </view>
    <view class="resviror-detail-content">
      <Ysqxx v-if="activeOne == 0"/>
      <Spjk stcd="3061"  v-else-if="activeOne == 1" />
      <Aqjc v-else-if="activeOne == 3"/>
      <Jbxx v-else-if="activeOne == 2" />
      <Zrtx resCode="42282650003" v-else-if="activeOne == 4" />
    </view>
  </view>
</template>

<script>
import Ysqxx from './ysqxx'
import Spjk from "./spjk/spjk.vue"
import Zrtx from "./zrtx/zrtx.vue"
import Jbxx from './jbxx'
import Aqjc from './aqjc'
export default {
  data() {
    return {
      activeOne: 0,
      stcd: '',
      stnm: '',
      wrz: '',
      grz: '',
      calFloodLev: '',
      desFloodLev: '',
      flLowLimLev: '',
      afsltdz: '',
      resCode: '',
      current: 0,
      dotsStyles: {
        bottom: 0,
        selectedBackgroundColor: "#d9001b"
      }
    }
  },
  components: {
    Spjk,
    Zrtx,
    Ysqxx,
    Jbxx,
    Aqjc
  },
  methods: {
    backTo() {
      uni.navigateBack({ delta: 1 })
    },
    change(e) {
      console.log(e.detail.current);
      this.current = e.detail.current;
    }
  },
  onLoad(option) {
    this.stcd = option.stcd;
    this.stnm = option.stnm;
    this.grz = option.grz;
    this.wrz = option.wrz;
    this.afsltdz = option.afsltdz;
    this.calFloodLev = option.calFloodLev;
    this.flLowLimLev = option.flLowLimLev;
    this.desFloodLev = option.desFloodLev;
    this.resCode = option.resCode;
  }
}
</script>

<style lang="scss" scoped>
.resviror-detail-box {
  height: 100vh;
  overflow: hidden;
  position: relative;

  .nav-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    // margin-top: 30px;
    // padding-top: 20px;
    // padding-bottom: 10px;
    border-bottom: 1px solid #dfdfdf;
    // box-shadow: 0 5px 10px -8px #dfdfdf inset;
  }

  .title {
    flex: 1;
    text-align: center;
    margin-right: 18px;
    font-size: 18px;
  }

  .tab-bar {
    // width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 30px;
    border-bottom: 1px solid #dfdfdf;
    // overflow-x: auto;
  }

  .active {
    color: #39a6ff;
  }

 .resviror-detail-content {
  /* 最大高度（比如占视口80%），内容超出才显示滚动条 */
  height: 85vh;
  /* 纵向滚动：auto=超出显示，scroll=始终显示 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 可选：如果元素是行内元素，需转为块级/行内块级 */
  display: block;
}
}
</style>