<template>
	<view class="content">
		<view class="toolbar">
			<div class="toolbar_title">
				<image
				  style="width: 50rpx; height: 50rpx; border-radius: 50%"
				  src="../../static/user.png"
				  mode="aspectFill"
				></image>
				<text style="font-size: 30rpx;margin-left: 20rpx;">颜家台灌区</text>
			</div>
		</view>
		<view class="pageBox">
			<pageSz v-if="value === 0"></pageSz>
			<!-- <pageLl v-if="value === 1"></pageLl> -->
			<test v-if="value === 1"></test>

		</view>
		<u-tabbar
		  :value="value"
		  @change="name => value = name"
		  :fixed="true"
		  :placeholder="true"
		  :safeAreaInsetBottom="true"
		>
		  <u-tabbar-item text="水质">
			  <image
				class="u-page__item__slot-icon"
				slot="active-icon"
				src="../../static/sz.svg"
			  ></image>
			  <image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				src="../../static/sz2.svg"
			  ></image>
		  </u-tabbar-item>
		  <u-tabbar-item text="流量">
			  <image
				class="u-page__item__slot-icon"
				slot="active-icon"
				src="../../static/ll.svg"
			  ></image>
			  <image
				class="u-page__item__slot-icon"
				slot="inactive-icon"
				src="../../static/ll2.svg"
			  ></image>
		  </u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import pageSz from "./pageSz.vue";
	import pageLl from "./pageLl.vue";
	import test from "./test.vue"
		
	export default {
		components: { pageSz, pageLl, test },
		data() {
			return {
				title: '111',
				tabList: [{name: '水质'}, {name: '流量'}, ],
				value: 0,
			}
		},
		mounted() {
			
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.toolbar{
		width: 100%;
		height: 64px;
		background-color: #0086f1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.toolbar_title{
		padding-left: 50rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}
	.tabBox{
		width: 100%;
		padding-left: 30px;
	}
	.u-page__item__slot-icon{
		width: 30rpx;
		height: 30rpx;
	}
	.pageBox{
		width: 100%;
		height: calc( 100vh - 115px);
		overflow-y: scroll;
	}
	
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f6f6f6;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
