zx_flk_app/pages/dashboard/dashboard.vue

<template>
    <view class="dashboard-page zx-page-linear">
       <view class="dashboard">
            <view class="shadow" :style="{ '--progress': progress + '%' }"></view>
            <view class="spe-wrap">
                <view class="spe-num">
                    {{ speed }}
                </view>
                <view class="unit">km/h</view>
            </view>
            <view class="power-wrap">
                <u-count-to :startVal="0" bold :endVal="progress" fontSize="48rpx" />
            </view>
        </view>

        <view class="battery_life_progress">
            <view class="is_progress">
                <text>续航</text>
                <text>46.5km</text>
            </view>
        </view>

        <view class="info-container">
            <view class="info-wrap" v-for="(item, index) in infoList" :key="index">
                <view class="label">{{ item.label }}</view>
                <view class="value">{{ 10 + index }} <text class="unit">{{ item.unit }}</text></view>
            </view>
        </view>
    </view>
</template>


<script>
export default {
    data() {
        return {
            speed: 50,
            infoList: []
        }
    },
    computed: {
        progress() {
            const MAX_SPEED = 120;
            return this.speed / MAX_SPEED * 100
        }
    },
    created() {
        this._initInfoList()
    },
    methods: {
        _initInfoList() {
            this.infoList = [
                { label: '骑行里程', prop: 'km', unit: 'km' },
                { label: '骑行时长', prop: 'km', unit: 'h' },
                { label: '最大速度', prop: 'km', unit: 'km/h' },
                { label: '平均速度', prop: 'km', unit: 'km/h' },
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
@import "@/libs/css/layout.scss";

.dashboard-page {
    padding: 24rpx 32rpx 0;
    min-height: calc(100vh - 100rpx);

    .dashboard {
        width: 554rpx;
        height: 554rpx;
        margin: 0 auto 58rpx;
        background: url('https://qiniu.bms16.com/Ftwa7u9tJYw3XSLaXYvrDyGNRuD5');
        background-size: 100%;
        position: relative;
        .shadow {
            box-shadow: inset 0rpx 2rpx 6rpx 0rpx #fff;
            width: 490rpx;
            height: 502rpx;
            position: relative;
            top: 20rpx;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 50%;
            background: conic-gradient(from -122deg, #0A59F7 0%, #20FFCA var(--progress), #F3F8FF 0% 245deg, transparent 245deg 360deg);
            mask: radial-gradient(transparent 200rpx, #000 200rpx);
            -webkit-mask: radial-gradient(transparent 210rpx, #000 213rpx);
        }

        .spe-wrap {
            width: 218rpx;
            height: 218rpx;
            background: #0A59F7;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #fff;
            .spe-num {
                font-family: Futura, Futura;
                font-weight: bold;
                font-size: 80rpx;
                color: #FFFFFF;
                line-height: 64rpx;
                text-align: center;
                font-style: normal;
                margin-bottom: 16rpx;
            }
            .unit {
                line-height: 28rpx;
                font-style: italic;
            }
        }

        .power-wrap {
            width: 230rpx;
            height: 104rpx;
            background: #D6E7FF;
            border-radius: 64rpx;
            position: absolute;
            bottom: 22rpx;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: Futura, Futura;
            font-weight: bold;
            font-size: 48rpx;
            color: #060809;
        }
    }

    .battery_life_progress {
        width: 100%;
        margin-bottom: 40rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        padding: 6rpx;
        overflow: hidden;

        .is_progress {
            width: 50%;
            height: 100%;
            padding: 16rpx 32rpx;
            background: #0A59F7;
            border-radius: 36rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #fff;
            font-size: 36rpx;
        }
    }

    .info-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .info-wrap {
            width: 336rpx;
            margin-bottom: 14rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            padding: 32rpx 24rpx;

            .label {
                font-size: 28rpx;
                color: #060809;
                margin-bottom: 24rpx;
            }

            .value {
                font-size: 48rpx;

                .unit {
                    margin-left: 8rpx;
                    font-size: 28rpx;
                }
            }
        }
    }
}

</style>