jsy-app/components/custom-battery/custom-battery.vue

<template>
	<view class="battery-container" v-if="online">
		<text v-if="showValue">{{ value }} </text>
		<view :style="[`width:${value}%`]" :class="['battery-level','battery-level-red ', charging ? 'charging' : '']"
			v-if="Number(value) <= 70" />
		<view :style="[`width:${value}%`]" :class="['battery-level','battery-level-yellow', charging ? 'charging' : '']"
			v-else-if="Number(value) <= 90" />
		<view :style="[`width:${value}%`]" :class="['battery-level', charging ? 'charging' : '']" v-else />
	</view>
	<view class="battery-container" v-else>
		<text v-if="showValue">{{ value }} </text>
		<view :style="[`width:${value}%`,'background-color: #aaa;']" class="battery-level" />
	</view>
</template>

<script>
	export default {
		name: "Battery",
		props: {
			// 在线状态
			online: {
				type: Boolean,
				default: false,
				required: true
			},
			// 电量
			value: {
				type: [String, Number],
				default: 0,
				required: true
			},
			// 显示数值
			showValue: {
				type: Boolean,
				default: true,
			},
			// 充电状态
			charging: {
				type: Boolean,
				default: false,
			},
			// 颜色
			fontColor: {
				type: String,
				default: "#333",
			}
		},
		data() {
			return {}
		},
		created() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	// 电池
	.battery-container {
		margin: 0 0 0 10px;
		position: relative;
		width: 31px;
		height: 16px;
		line-height: 14px;
		background-color: #fff;
		border-radius: 3px;
		border: 1px solid #333;
		text-align: center;

		text {
			position: relative;
			z-index: 2;
		}
	}

	.battery-container::after {
		content: "";
		position: absolute;
		top: 4px;
		right: -2px;
		width: 1px;
		height: 5px;
		background-color: #333;
		border-radius: 4px;
	}

	.battery-level {
		height: 12px;
		position: absolute;
		top: 1px;
		bottom: 0;
		left: 1px;
		width: 90%;
		max-width: 95%;
		background-color: #4CAF50;
		border-radius: 2px;
		transition: width 0.5s;
	}

	.battery-level-red {
		background-color: #f56c6c;
	}

	.battery-level-yellow {
		background-color: #e6a23c;
	}


	// 充电动画
	@keyframes chargingWidth {
		from {
			width: 10%;
		}

		to {
			width: 100%;
		}
	}

	.charging {
		animation: chargingWidth 2s infinite;
	}
</style>