UNI-APP设计电池电量显示

 

<template>

        <view class="agv-footer">
            <view class="battery-info">
                <view class="battery-icon">
                    <view class="battery-body">
                        <view class="battery-level"
                            :style="{ width: batteryLevel + '%', backgroundColor: batteryColor }"></view>
                    </view>
                    <view class="battery-head"></view>
                </view>
                <text :style="{ color: batteryColor }">{{ batteryLevel }}%</text>
            </view>


    </view>
</template>

        .agv-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid #eee;

            .battery-info {
                display: flex;
                align-items: center;

                .battery-icon {
                    display: flex;
                    align-items: center;
                    margin-right: 8px;

                    .battery-body {
                        width: 40px;
                        height: 20px;
                        border: 1px solid #ddd;
                        border-radius: 3px;
                        position: relative;
                        overflow: hidden;

                        .battery-level {
                            height: 100%;
                            transition: width 0.5s ease;
                        }
                    }

                    .battery-head {
                        width: 4px;
                        height: 8px;
                        background-color: #ddd;
                        border-radius: 0 2px 2px 0;
                    }
                }
            }