ParkApp/pages/agency/agency.vue

<template>
	<view class="content">
		<view class="nav-top" style="position: fixed;top: 0;width: 100%;z-index: 99999;margin-top: -40rpx;">
			<scroll-view  scroll-x class="base-bg-color nav padding-top-30" scroll-with-animation >
				<view  class="cu-item  text-white" :class="index==current?'checked':''" v-for="(item,index) in tabList" :key="index" @tap="tabSelect(index)" >
					{{item}}
				</view>
			</scroll-view>
		</view>
		<view class="" :style="{marginTop:navHeight}">
			<agency-info  v-show="current==0"></agency-info>
			<data-service v-show="current==1"></data-service>
			<fire-service style="z-index: 99;" v-show="current==2"></fire-service>
		</view>
	</view>
</template>

<script>
import agencyInfo from "./comps/agency-info.vue"
import dataService from "./comps/data-service.vue"
import fireService from "./comps/fire-service.vue"
export default {
	components:{
		agencyInfo,
		dataService,
		fireService
	},
	data() {
		return {
			navHeight:'',
			current:0,
			tabList:['园区概况','数据统计','消防统计'],
		};
	},
	onLoad(options) {
		if (options.current) {
			this.current=options.current
		}
	},
	onReady() {
		this.$u.getRect('.nav-top').then(res => {
			this.navHeight=res.height-uni.upx2px(40)+'px'
		})
	},
	methods: {
		tabSelect(index){
			this.current=index
		}
	}
};
</script>

<style lang="scss" >
	page{
		background-color: #FFFFFF;
	}
	
	.line-groove {
		height: 8rpx;
		// border-top: 10rpx groove $base-color;
		background: repeating-radial-gradient(#e9685e, #ffaa00, #0055ff 10%);
	}
	
	.cu-item1{
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		margin: 0 10rpx;
		padding: 0 20rpx;
	}
	
	.checked{
		font-weight: 800;
		font-size: 42rpx;
	}
	
	.top{
		height: 100rpx;
		background-color: $base-color;
	}

</style>