water_affairs/pages/index/index.vue

<template>
	<view class="container">
		<tab-control ref="tabControl" :active='opentabControl' />
		<home v-show="PageCur == 'Home'" />
		<my-map v-show="PageCur == 'Map'" />
		<message v-show="PageCur == 'Message'" />
		<mine v-show="PageCur == 'Mine'" />
		<view class="cu-bar tabbar bg-white foot" style="z-index: 100000;" @click="opentabControl(false)">
			<!-- bg-black -->
			<view @click="PageCur = 'Home'" :class="PageCur == 'Home' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Home' ? 'icon-shouye-xuanzhong' : 'icon-shouye-weixuanzhong'" />
				首页
			</view>
			<view @click="PageCur = 'Map'" :class="PageCur == 'Map' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Map' ? 'icon-ditu-xuanzhong' : 'icon-ditu-weixuanzhong'" /> 地图
			</view>
			<view class="text-gray" @click.stop="opentabControl(true)">
				<button class="cu-btn cuIcon-add shadow more" style="background-color:#0B3F7E;color: #fff;"></button>
			</view>
			<view @click="PageCur = 'Message'" :class="PageCur == 'Message' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Message' ? 'icon-xiaoxi-xuanzhong' : 'icon-xiaoxi-weixuanzhong'">
					<view class="cu-tag badge">99</view>
				</view> 消息
			</view>
			<view @click="PageCur = 'Mine'" :class="PageCur == 'Mine' ? 'action pitch-on-color' : 'action text-gray'">
				<view class="iconfont" :class="PageCur == 'Mine' ? 'icon-wode-xuanzhong' : 'icon-wode-weixuanzhong'" /> 我的
			</view>
		</view>
		<!-- <view style="height: calc(62px + env(safe-area-inset-bottom) / 2);" /> -->
	</view>
</template>

<script>
import home from "./modules/home.vue";
import myMap from "./modules/my-map.vue";
import message from "./modules/message.vue";
import mine from "./modules/mine.vue";
import tabControl from "../../components/bottomTabControl.vue";
export default {
	components: { home, myMap, message, mine, tabControl },
	data() {
		return {
			PageCur: "Home",
		}
	},
	methods: {
		opentabControl(active) {
			if (this.$refs.tabControl.active !== active) this.$nextTick(() => {
				this.$refs.tabControl.active = active;
			});
		}
	}
}
</script>

<style lang="scss">
.action .iconfont {
	width: 52px;
	position: relative;
	display: block;
	height: auto;
	margin: 0 auto 5px;
	text-align: center;
	font-size: 20px;
}

.pitch-on-color {
	color: #0B3F7E;
}

.more {
	height: 40px !important;
	font-size: 25px !important;
}
</style>