|
@@ -1,26 +1,39 @@
|
|
|
<template>
|
|
|
<view :style="'padding-top:'+nvaHeight+'px;'">
|
|
|
- <view class="navbox" :style="'background-color:'+backgroundColor+';'">
|
|
|
- <!-- leftWidth="200rpx" -->
|
|
|
- <uni-nav-bar color="#ffffff" title="实时监控" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
|
|
|
- <!-- <block slot="left">
|
|
|
- <picker range-key='name' :value="adridx" :range="adrlist" @change='bindDateChangea'>
|
|
|
- <view class="chekt">
|
|
|
- <view class="over">{{address|| ""}}</view>
|
|
|
- <image :src="upimg"></image>
|
|
|
- </view>
|
|
|
- </picker>
|
|
|
- </block> -->
|
|
|
- </uni-nav-bar>
|
|
|
- <view class="tablist flexc">
|
|
|
- <view class="tabs" :class="tabval==ite.val?'act':''" @click="getTabFn(ite.val)" v-for="(ite,idx) in tablist">{{ite.tit}}</view>
|
|
|
- <view class="flex1"></view>
|
|
|
+ <view class="videotop" :style="'background-color:'+backgroundColor+';'">
|
|
|
+ <cover-view class="navbox" :style="'background-color:'+backgroundColor+';'">
|
|
|
+ <!-- leftWidth="200rpx" -->
|
|
|
+ <uni-nav-bar color="#ffffff" title="实时监控" :background-color="backgroundColor" :border="false" statusBar='true' fixed="true">
|
|
|
+ <!-- <block slot="left">
|
|
|
+ <picker range-key='name' :value="adridx" :range="adrlist" @change='bindDateChangea'>
|
|
|
+ <view class="chekt">
|
|
|
+ <view class="over">{{address|| ""}}</view>
|
|
|
+ <image :src="upimg"></image>
|
|
|
+ </view>
|
|
|
+ </picker>
|
|
|
+ </block> -->
|
|
|
+ <cover-view class="jktit" slot="default">实时监控</cover-view>
|
|
|
+ </uni-nav-bar>
|
|
|
+ <cover-view class="tablist flexc" v-if="tabval==1">
|
|
|
+ <cover-view class="tabs" v-for="(ite,idx) in tablist">
|
|
|
+ <cover-view class="tabtit" @click.stop="getTabFn(ite.val)" :class="tabval==ite.val?'act':''">{{ite.tit}}</cover-view>
|
|
|
+ <cover-view class="tabline" v-if="tabval==ite.val"></cover-view>
|
|
|
+ </cover-view>
|
|
|
+ </cover-view>
|
|
|
+ </cover-view>
|
|
|
+ <view class="flexc" v-if="tabval==2">
|
|
|
+ <view class="tablist flexc">
|
|
|
+ <view class="tabs" v-for="(ite,idx) in tablist">
|
|
|
+ <view class="tabtit" @click.stop="getTabFn(ite.val)" :class="tabval==ite.val?'act':''">{{ite.tit}}</view>
|
|
|
+ <view class="tabline" v-if="tabval==ite.val"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<!-- 道闸 -->
|
|
|
- <view class="chekts" v-if="tabval==2">
|
|
|
- <picker range-key='name' :value="adridx" :range="adrlist" @change='bindDateChangea'>
|
|
|
+ <view class="chekts" >
|
|
|
+ <picker range-key='name' :value="adridx" :range="adrlist" @change='bindDateChangea'>
|
|
|
<view class="chekt">
|
|
|
- <view class="over">{{address|| ""}}</view>
|
|
|
- <image :src="upimg"></image>
|
|
|
+ <view class="over chektit">{{address|| ""}}</view>
|
|
|
+ <image :src="upimg" class="chektimg"></image>
|
|
|
</view>
|
|
|
</picker>
|
|
|
</view>
|
|
@@ -579,22 +592,27 @@
|
|
|
page{background: #ffffff;}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
+.jktit{text-align: center;font-weight: bold;font-size: 30rpx;color: #FFFFFF;width: 100%;}
|
|
|
.navbox /deep/ .uni-navbar__header-container {align-items: center;padding-left: 0;}
|
|
|
.navbox /deep/ uni-picker{flex: 1;}
|
|
|
-.navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4;
|
|
|
- .tablist{padding: 0 200rpx 8rpx 32rpx;
|
|
|
- .tabs{font-weight: 500;font-size: 28rpx;color: #C2E2FC;position: relative;min-width: 156rpx;text-align: center;height: 56rpx;line-height: 56rpx;
|
|
|
- &.act{font-weight: bold;color: #FFFFFF;
|
|
|
- &::before{width: 34rpx;height: 8rpx;background: #FFFFFF;border-radius: 4rpx;position: absolute;left: 50%;margin-left: -16rpx;content: '';bottom:-8rpx;}
|
|
|
+.navbox /deep/ uni-cover-view{overflow: initial;}
|
|
|
+.videotop{position: fixed;left: 0;right: 0;top: 0;z-index: 4;}
|
|
|
+.navbox{
|
|
|
+
|
|
|
+}
|
|
|
+.tablist{padding: 0 200rpx 0rpx 32rpx;flex: 1;
|
|
|
+ .tabs{position: relative;min-width: 156rpx;height: 64rpx;
|
|
|
+ .tabtit{font-weight: 500;font-size: 28rpx;color: #C2E2FC;width: 100%;text-align: center;height: 56rpx;line-height: 56rpx;
|
|
|
+ &.act{font-weight: bold;color: #FFFFFF;}
|
|
|
}
|
|
|
+ .tabline{width: 34rpx;height: 8rpx;background: #FFFFFF;border-radius: 4rpx;position: absolute;left: 50%;margin-left: -16rpx;bottom:0rpx;}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
.chekts{
|
|
|
- position: absolute;right: 32rpx;
|
|
|
- .chekt{font-weight: bold;font-size: 30rpx;color: #FFFFFF;display: flex;align-items: center;width: 200rpx;
|
|
|
- view{flex: 0 1 auto;min-width: 100rpx;}
|
|
|
- image{width: 16rpx;height: 10rpx;margin-left: 10rpx;flex: 0 0 auto;}
|
|
|
+ position: absolute;right: 32rpx;bottom: 8rpx;z-index: 1;
|
|
|
+ .chekt{font-weight: bold;font-size: 30rpx;color: #FFFFFF;display: flex;align-items: center;width: 200rpx;height: 56rpx;
|
|
|
+ .chektit{flex: 1;min-width: 100rpx;text-align: right;}
|
|
|
+ .chektimg{width: 16rpx;height: 10rpx;margin-left: 10rpx;flex: 0 0 auto;}
|
|
|
}
|
|
|
}
|
|
|
|