158 lines
4.1 KiB
Vue
158 lines
4.1 KiB
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> |