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

<template>
	<!-- 底部tabbar -->
	<view class="card_information">
		<view class="space_between">
			<view style="display: flex;">
				<view class="interval">SN:21512532142134</view>
				<view class="interval">通讯：</view>
				<view class="interval">未上传数据：0</view>
				<view class="interval">未上传报警：0</view>
				<view class="title_green interval">备网：本地网</view>
				<view class="interval">Rssi：16</view>
			</view>
			<view class="card_row_right">市电正常 UPS:0.13V 2024-8-30 10:17:30</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'x-navbottom',
		props: {},
		data() {
			return {}
		},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss">
	.card_information {
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// right: 0;
		display: flex;
		align-items: flex-end;
		flex-direction: column;
		justify-content: center;
		height: 24rpx;
		padding: 0rpx 15rpx;
		background-color: #fff;
		border-top: 1px solid #EBEEF5;
	}

	.card_row_flex {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.card_row_right {
		display: flex;
		justify-content: flex-end;
		font-size: 14rpx;
	}

	.title_green {
		color: #5ac725;
	}

	.interval {
		font-size: 14rpx;
		margin-right: 4rpx;
	}
</style>