zhihuixiaoyuan2-ui/pages/road/index.vue

<template>
  <view>
	  <view class="work" :style="{height: `${windowHeight}px`}">
			<uni-nav-bar title="路况" :background-color="backgroundColor" :border="navborder" statusBar='true' fixed="true" >
	  		  </uni-nav-bar>
			<!-- 主体 -->
			<!-- 家长 -->
			<view class="tab flex0">
				<view class="tit"  :class="tabidx==idx?'act':''" @click="getTab(idx)" v-for="(ite,idx) in tablist" :key="idx">
					<view class="f15 tits" >{{ite.tit}}</view>
					<image :src="tapline" class="line"></image>
				</view>
			</view>
			
			<view class="flex1 road">
				<!-- 路况 公共的-->
				<lu-swiper></lu-swiper>
				<view class=" road_big">
					<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
					<view class="flexc road_fot">
						<view class="flex1">
							<view class="flext">
								<view class="f15 mb6 fw co16 flex01">黄山路与潜山路交口路况</view>
								<view class="road_t">畅通</view>
							</view>
							<view class="f13 coa">2023-05-18 11:15:48</view>
						</view>
						<view class="flex0 road_r">
							<image :src="rcheck" ></image>
						</view>
						
					</view>
				</view>
				<!-- 视频 -->
				<view class="mt20">
					<view class="hsta_t flexcj mb20">
						<view class="hsta_tl f17 ">
							其他路况
							<image :src="tapline" class="hline"></image>
						 </view>
					</view>
					<luVideo></luVideo>
				</view>
			</view>	
	  </view>
  </view>
</template>

<script>
	import tabList from "@/components/toptab/tab.vue"
	import shList from "@/components/shlist/list.vue"
	import luSwiper from "@/components/home/luswiper.vue"
	import luVideo from "@/components/home/luvideo.vue"
  export default {
	  components:{tabList,shList,luSwiper,luVideo},
	data(){
		return{
			windowHeight: 0,
			wtopimg:require("@/static/images/wtop.png"),
			tapline:require("@/static/images/hline.png"), 
			rcheck:require("@/static/images/rcheck.png"), 
			backgroundColor:'transparent',
			navborder:false,
			tabidx:0,
			tablist:[{tit:'黄铺中心小学'},{tit:'杜埠中心小学'}],
		}
	},
	methods:{
		getTab(idx){
			this.tabidx=idx;
		},
	},
	mounted() {
		var systemInfo=uni.getSystemInfoSync();
		this.windowHeight=Number(systemInfo.windowHeight);
	},
	onReady: function(res) {
	        // #ifndef MP-ALIPAY
	        this.videoContext = uni.createVideoContext('myVideo')
	        // #endif
	    },
	onLoad: function() {
    }
  }
</script>

<style lang="scss" scoped>
.work{display: flex;flex-direction: column;overflow: hidden;background: linear-gradient(180deg, rgba(222,230,255,0.72) 28.000000000000004%, rgba(232,236,198,0) 100%);background-size: 100% 450rpx;background-repeat: no-repeat;
	.tab{
		display: flex;overflow-y: auto;align-items: center;
		.tit{position: relative;padding:32rpx 36rpx;color: #666666 ;
		&.act{
			.tits{font-size: 32rpx;font-weight: bold;}
			.line{display: block;}
			}
			
		}
		.line{width: 40rpx;height: 12rpx;position: absolute;left: 50%;margin-left: -20rpx;bottom: 16rpx;display: none;}
	}
	.road{overflow: auto;padding: 24rpx 0;}
	.road_big{background: #FFFFFF;border-radius: 14rpx;margin: 30rpx 36rpx 0;overflow: hidden;
		video{width: 100%;height: 376rpx;}
		.road_fot{
			padding:20rpx 24rpx 28rpx;
			.road_t{min-width: 70rpx;height: 30rpx;background: #5CC37D;border-radius: 16rpx;padding: 0 8rpx;line-height: 30rpx;font-size: 24rpx;color: #FFFFFF;margin-left: 16rpx;margin-top: 6rpx;}
			.road_r{width: 80rpx;height: 80rpx;margin-left: 16rpx;display: flex;align-items: center;justify-content: center;
			 image{width: 50rpx;height: 50rpx;}
			}
		}
	}
	
	.hsta_t{padding: 0 36rpx;
		.hsta_tl{font-weight: bold;color: #161616;position: relative;
			.hline{position: absolute;bottom: -20rpx;width: 40rpx;height: 11rpx;left: 50%;margin-left: -20rpx;}
		}
	}
}
</style>