baozhida-monitoring-host/components/x-navbar.vue

<template>
	<!-- 底部tabbar -->
	<view class="navmainbox">
		<view class="space_between">
			<view style="display: flex;align-items: center;padding: 0rpx 20rpx;">
				<image class="logo" src="/static/logo.png"></image>
				<view class="head_title">库房温湿度监测主机</view>
			</view>
			<view @click="reconnection">重连</view>
			<view class="navigation">
				<view class="navcont" :class="nowchos == index ? 'activebg' :''" v-for="(item,index) in dataList"
					:key="index" @click="gonavs(item,index)">
					<view class="card_icon_item center_in">
						<text class="iconfont icon_image" :class="[item.icon]"></text>
					</view>
					<view class="navchosbox" :class="nowchos == index ? 'activeName' :''">
						{{item.title}}
					</view>
				</view>
				<view class="navcont" @click="rebooting">
					<view class="card_icon_item_red center_in">
						<text class="iconfont icon_image icon-restart"></text>
					</view>
					<view class="navchosbox">重新启动</view>
				</view>
			</view>
		</view>
		<u-modal :show="rebootingShow" showCancelButton @confirm="confirm" @cancel="rebootingShow = false">
			<view class="slot-content">
				<view style="display: flex;align-items: center;">
					<u-icon name="error-circle-fill" color="#ff9900" size="30"></u-icon>
					<view class="circle_card">是否重新启动?</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: 'x-navbar',
		props: {
			nowchos: {
				type: Number,
				default () {
					return 0
				}
			},
		},
		data() {
			return {
				dataList: [{
					icon: 'icon-realtime',
					title: '实时数据',
				}, {
					icon: 'icon-lishishuju',
					title: '历史数据',
				}, {
					icon: 'icon-emergency',
					title: '报警查询',
				}, {
					icon: 'icon-shezhi',
					title: '基本设置',
				}],
				restartList: {
					icon: 'icon-restart',
					title: '重新启动',
				},
				rebootingShow: false,
			}
		},
		mounted() {
		},
		methods: {
			reconnection(){
				this.$emit('reconnection')
			},
			gonavs(e, cindex) {
				this.$emit('botomchos', cindex)
			},
			rebooting() {
				this.rebootingShow = true
				// this.$emit('rebooting')
			},
			// 确定重新启动
			confirm(){
				plus.runtime.restart()
			}
		}
	}
</script>

<style lang="scss">
	.navmainbox {
		background-color: #ffffff;
		width: 100%;
		border-bottom: 2rpx solid #ffffff;
	}

	.logo {
		flex: none;
		width: 30rpx;
		height: 30rpx;
	}

	.head_title {
		font-size: 9px;
		margin-left: 10rpx;
		font-weight: 600;
	}

	.navigation {
		z-index: 2;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
		padding-bottom: var(--window-bottom);
	}

	.navigation .navcont {
		cursor: pointer;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// width: 70rpx;
		margin: 0rpx 20rpx;
		height: 100%;
		border-bottom: 2rpx solid #ffffff;
	}

	.navchosbox {
		color: #727289 !important;
		margin-top: 2rpx;
		font-size: 6px;
	}

	.activeName {
		color: #3C9CFE !important;
	}

	.activebg {
		// background-color: #f4f4f5 !important;
		border-bottom: 2rpx solid #3C9CFE !important;
	}

	.card_icon_item {
		width: 15px;
		height: 15px;
		border-radius: 4px;
		background-color: #3C9CFE;
	}

	.card_icon_item_red {
		width: 15px;
		height: 15px;
		border-radius: 4px;
		background-color: #f56c6c;
	}

	.icon_image {
		z-index: 2024;
		color: #ffffff;
		font-size: 9px;
	}
</style>