training-float.vue 1.22 KB
<template>
    <view v-if="trainStore.trainingInfo.isMinimized" class="float-ball" @click="goBackTrain">
        <text class="text">训练中</text>
        <text class="time">{{ formatTime(trainStore.trainingInfo.totalSeconds) }}</text>
    </view>
</template>

<script setup>
import useTrainingStore from '@/sheep/store/training';
const trainStore = useTrainingStore();

// 回到训练页
const goBackTrain = () => {
    const info = trainStore.trainingInfo;
    trainStore.restore();

    uni.navigateTo({
        url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${info.exerciseId}&unitType=${info.unitType}`,
    });
};

// 时间格式化
const formatTime = (s) => {
    const m = Math.floor(s / 60).toString().padStart(2, '0');
    const sec = (s % 60).toString().padStart(2, '0');
    return `${m}:${sec}`;
};
</script>

<style scoped>
.float-ball {
    position: fixed;
    bottom: 200rpx;
    right: 40rpx;
    width: 120rpx;
    height: 120rpx;
    background: #ffd700;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.text {
    font-size: 24rpx;
    font-weight: bold;
}

.time {
    font-size: 20rpx;
    margin-top: 6rpx;
}
</style>