zx_flk_app/pages/batteryDetail/batteryDetail.vue

<template>
	<view class="battery-detail-main">
		<view class=" quantity-count">65<text class="quantity-text">%</text></view>
		<view class="battery-list-view">
			<view class="battery-list flex-row flex-between">
				<view class="battery-name">No.1电池</view>
				<view class="battery-id">MAC ID:0168802221</view>
			</view>
			<view class="flex-row flex-around">
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">剩余电量</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">电压</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">温度</view>
				</view>
			</view>
		</view>
		<view class="battery-list-view">
			<view class="battery-list flex-row flex-between">
				<view class="battery-name">No.1电池</view>
				<view class="battery-id">MAC ID:0168802221</view>
			</view>
			<view class="flex-row flex-around">
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">剩余电量</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">电压</view>
				</view>
				<view class="battery-device-info">
					<view class="quantity-info">44 <text class="quantity-text-1">%</text></view>
					<view class="battery-info-text">温度</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
		},
		methods: {

		}
	};
</script>
<style>
	@import './batteryDetail.css';
</style>