zx_bms_uni/component/comEleQuantityHorizontal/comEleQuantityHorizontal.vue

<template>
    <view class="com-ele-quantity">
        <view v-if="quantity > 20" class="com-battery-frame-com" :style="'height: ' + height + '; width: ' + width">
            <view class="com-battry-header"></view>
            <view class="com-battery-body">
                <view :style="'width: ' + (100 - quantity) + '%;height: 100%;'"></view>
                <view class="com-quantity-percent" :style="'width: ' + quantity + '%'"></view>
                <view class="com-quantity-des">SOC:{{ quantity }}%</view>
            </view>
        </view>

        <view v-else class="com-battery-frame-com" :style="'height: ' + height + '; width: ' + width">
            <view class="com-battry-header"></view>
            <view class="com-battery-body">
                <view :style="'width: ' + (100 - quantity) + '%;height: 100%;'"></view>
                <view class="com-quantity-percent" :style="'width: ' + quantity + '%; background-color: rgb(247, 109, 29)'"></view>
                <view class="com-quantity-des" style="color: rgb(247, 109, 29)">SOC:{{ quantity }}%</view>
            </view>
        </view>
    </view>
</template>

<script>
// component/comEleQuantity/comEleQuantity.js
export default {
    data() {
        return {
            height: '112rpx',
            width: '200rpx'
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        quantity: {
            type: Number,
            default: 70
        }
    },
    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    /**
     * 组件的方法列表
     */
    methods: {
        ready: function () {}
    },
    created: function () {}
};
</script>
<style>
@import './comEleQuantityHorizontal.css';
</style>