taro/src/_record/pages/time_record.tsx

import { View, Image } from "@tarojs/components";
import './time_record.scss'
import Taro from "@tarojs/taro";
import { rpxToPx } from "@/utils/tools";
import Rings, { RingCommon, BgRing, TargetRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { MainColorType } from "@/context/themes/color";

export default function TimeRecord() {
    const systemInfo: any = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
    const navigationBarHeight = systemInfo.statusBarHeight + 44;

    const common: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 27,
        lineWidth: 12,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

    const bgRing: BgRing = {
        color: MainColorType.ringBg
    }

    function targetRing() {
        return {
            color: 'pink',
            startArc: 0,
            durationArc: 3 / 4 * Math.PI
        }
    }

    function realRing() {
        return {
            color: 'red',
            startArc: 0,
            durationArc: 2 / 4 * Math.PI
        }
    }

    function currentDot() {


        return {
            color: MainColorType.eat,
            lineWidth: 2,
            borderColor: '#F5F5F5',
            offset: 0
        }

    }

    function ring() {

        return <Rings common={common}
            bgRing={bgRing}
            targetRing={targetRing()}
            realRing={realRing()}
            canvasId={'smal11lsss'}
            currentDot={currentDot()}
            scale={1.0}
        />
    }

    return <View>
        <View className="navi_bar" style={{ height: navigationBarHeight }}>
            <View style={{
                position: 'absolute',
                left: 0,
                right: 0,
                bottom: 0,
                height: 44,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }}>
                <Image src={require('@assets/_health/navi_back.png')} style={{
                    position: 'absolute',
                    width: rpxToPx(92),
                    height: rpxToPx(64),
                    left: 0,
                    top: 22 - rpxToPx(32)
                }}
                    onClick={() => {
                        Taro.navigateBack()
                    }}
                />
                <View className="h36 bold">upcoming fast</View>
            </View>
        </View>
        <View style={{ height: navigationBarHeight }} />
        {
            ring()
        }
    </View>
}