From 75f4b74b3d503104d56f973c4f2ea032ca9175f1 Mon Sep 17 00:00:00 2001
From: long <452591453@qq.com>
Date: Wed, 30 Sep 2026 10:33:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B1=85=E5=AE=B6=E8=80=97=E7=B3=96?=
 =?UTF-8?q?=E8=AE=AD=E7=BB=83=E6=94=B9=E4=B8=BA=E8=BD=AE=E6=92=AD=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=EF=BC=8C=E6=96=B0=E5=A2=9E=20AI=20=E8=B7=9F=E7=BB=83?=
 =?UTF-8?q?=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 轮播：当前卡片居中，两侧露出相邻卡片，自动慢速轮播，点两侧卡片先转到中间
- 卡片：每种训练一套配色，标题 + 一行介绍 + 去训练按钮，右侧大图标，AI 跟练卡片用教练插画
- 指示点替代“左右滑动”提示文字；悬浮菜单增加 AI 跟练入口
---
 .../components/dev-training-entry/index.vue   | 1656 +++++++++--------
 1 file changed, 927 insertions(+), 729 deletions(-)

diff --git a/TUICallKit-Vue3/components/dev-training-entry/index.vue b/TUICallKit-Vue3/components/dev-training-entry/index.vue
index 22916f9e4..200a4ff75 100644
--- a/TUICallKit-Vue3/components/dev-training-entry/index.vue
+++ b/TUICallKit-Vue3/components/dev-training-entry/index.vue
@@ -1,729 +1,927 @@
-<template>
-    <!-- 页面内嵌模块（如 weekly 统计页主内容区） -->
-    <view
-        v-if="visible && props.inline"
-        class="dev-entry-inline"
-        :class="{ 'dev-entry-inline--weekly': props.tone === 'weekly' }"
-    >
-        <view class="inline-hero">
-            <view class="inline-hero-icon" aria-hidden="true">
-                <view class="inline-hero-wave" />
-            </view>
-            <view class="inline-hero-text">
-                <view class="inline-hero-title-row">
-                    <text class="inline-title">居家耗糖训练</text>
-                    <text v-if="props.tone === 'weekly'" class="inline-pill">体验</text>
-                </view>
-                <text class="inline-sub">低强度动起来，帮助身体消耗糖分</text>
-            </view>
-        </view>
-
-        <scroll-view
-            scroll-x
-            class="inline-scroll"
-            :show-scrollbar="false"
-            :enable-flex="true"
-        >
-            <view class="inline-scroll-track">
-                <view
-                    v-for="item in inlineItems"
-                    :key="item.url"
-                    class="inline-card"
-                    @click="goto(item.url)"
-                >
-                    <view v-if="item.featured" class="inline-card-badge">
-                        <text>推荐</text>
-                    </view>
-                    <view class="menu-icon" :class="item.iconClass">
-                        <view v-if="item.icon === 'dumbbell'" class="dumbbell-shape">
-                            <view class="dumbbell-plate dumbbell-plate-left" />
-                            <view class="dumbbell-bar" />
-                            <view class="dumbbell-plate dumbbell-plate-right" />
-                        </view>
-                        <view v-else-if="item.icon === 'pedal'" class="foot-pedal-shape">
-                            <view class="pedal-bar pedal-bar-left" />
-                            <view class="pedal-bar pedal-bar-right" />
-                        </view>
-                        <view v-else-if="item.icon === 'pilates'" class="pilates-ring-shape" />
-                        <view v-else-if="item.icon === 'grip'" class="grip-ring-shape" />
-                        <view v-else-if="item.icon === 'metro'" class="menu-icon--metro-inner">
-                            <view class="metro-bar metro-bar-1" />
-                            <view class="metro-bar metro-bar-2" />
-                            <view class="metro-bar metro-bar-3" />
-                        </view>
-                    </view>
-                    <text class="inline-card-title">{{ item.title }}</text>
-                    <text class="inline-card-sub">{{ item.sub }}</text>
-                    <text class="inline-card-go" aria-hidden="true">进入</text>
-                </view>
-            </view>
-        </scroll-view>
-
-        <text v-if="props.tone === 'weekly'" class="inline-scroll-hint">左右滑动，选择适合您的训练</text>
-    </view>
-
-    <view v-else-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
-        <!-- 展开后的菜单卡片(从下往上动画) -->
-        <view v-if="expanded" class="menu-list" @click.stop>
-            <view class="menu-item" @click="goto('/training/pages/dumbbell')">
-                <view class="menu-icon menu-icon--dumbbell">
-                    <view class="dumbbell-shape">
-                        <view class="dumbbell-plate dumbbell-plate-left" />
-                        <view class="dumbbell-bar" />
-                        <view class="dumbbell-plate dumbbell-plate-right" />
-                    </view>
-                </view>
-                <view class="menu-info">
-                    <text class="menu-title">哑铃</text>
-                    <text class="menu-sub">力量塑形</text>
-                </view>
-                <view class="menu-arrow">›</view>
-            </view>
-
-            <view class="menu-item" @click="goto('/training/pages/foot-pedal')">
-                <view class="menu-icon menu-icon--pedal">
-                    <view class="foot-pedal-shape">
-                        <view class="pedal-bar pedal-bar-left" />
-                        <view class="pedal-bar pedal-bar-right" />
-                    </view>
-                </view>
-                <view class="menu-info">
-                    <text class="menu-title">脚蹬器</text>
-                    <text class="menu-sub">下肢有氧</text>
-                </view>
-                <view class="menu-arrow">›</view>
-            </view>
-
-            <view class="menu-item" @click="goto('/training/pages/pilates-ring')">
-                <view class="menu-icon menu-icon--pilates">
-                    <view class="pilates-ring-shape" />
-                </view>
-                <view class="menu-info">
-                    <text class="menu-title">瑜伽环</text>
-                    <text class="menu-sub">核心塑形</text>
-                </view>
-                <view class="menu-arrow">›</view>
-            </view>
-
-            <view class="menu-item" @click="goto('/training/pages/grip-ring')">
-                <view class="menu-icon menu-icon--grip">
-                    <view class="grip-ring-shape" />
-                </view>
-                <view class="menu-info">
-                    <text class="menu-title">握力环</text>
-                    <text class="menu-sub">握力训练</text>
-                </view>
-                <view class="menu-arrow">›</view>
-            </view>
-
-            <view class="menu-item" @click="goto('/training/pages/metronome')">
-                <view class="menu-icon menu-icon--metro">
-                    <view class="metro-bar metro-bar-1" />
-                    <view class="metro-bar metro-bar-2" />
-                    <view class="metro-bar metro-bar-3" />
-                </view>
-                <view class="menu-info">
-                    <text class="menu-title">耗糖节拍器</text>
-                    <text class="menu-sub">健走配速</text>
-                </view>
-                <view class="menu-arrow">›</view>
-            </view>
-        </view>
-
-        <!-- 主浮动按钮(单字"练" + 呼吸光环) -->
-        <view class="fab-container">
-            <view v-if="!expanded" class="fab-pulse" />
-            <view v-if="!expanded" class="fab-pulse fab-pulse-2" />
-            <view class="entry-fab" :class="{ expanded }" @click="toggle">
-                <view v-if="expanded" class="icon-close">
-                    <view class="cross-bar bar-1" />
-                    <view class="cross-bar bar-2" />
-                </view>
-                <!-- 心跳波形 icon: 健康主题,SVG 折线 -->
-                <view v-else class="fab-icon" />
-            </view>
-        </view>
-    </view>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-type TrainingItem = {
-    url: string
-    title: string
-    sub: string
-    icon: 'dumbbell' | 'pedal' | 'pilates' | 'grip' | 'metro'
-    iconClass: string
-    featured?: boolean
-}
-
-const trainingItems: TrainingItem[] = [
-    { url: '/training/pages/dumbbell', title: '哑铃', sub: '力量塑形', icon: 'dumbbell', iconClass: 'menu-icon--dumbbell' },
-    { url: '/training/pages/foot-pedal', title: '脚蹬器', sub: '下肢有氧', icon: 'pedal', iconClass: 'menu-icon--pedal' },
-    { url: '/training/pages/pilates-ring', title: '瑜伽环', sub: '核心塑形', icon: 'pilates', iconClass: 'menu-icon--pilates' },
-    { url: '/training/pages/grip-ring', title: '握力环', sub: '握力训练', icon: 'grip', iconClass: 'menu-icon--grip' },
-    { url: '/training/pages/metronome', title: '耗糖节拍器', sub: '健走配速', icon: 'metro', iconClass: 'menu-icon--metro', featured: true },
-]
-
-const props = withDefaults(
-    defineProps<{
-        /** 悬浮按钮距底部 rpx（仅非 inline） */
-        bottom?: number
-        /** 内嵌到页面主内容区，非 fixed 悬浮 */
-        inline?: boolean
-        /** weekly 页：与统计页 Vital Mint 视觉一致 */
-        tone?: 'default' | 'weekly'
-    }>(),
-    { bottom: 200, inline: false, tone: 'default' },
-)
-
-/** weekly 将健走节拍器置前并标推荐 */
-const inlineItems = computed(() => {
-    if (props.tone !== 'weekly') return trainingItems
-    const metro = trainingItems.find((i) => i.icon === 'metro')
-    const rest = trainingItems.filter((i) => i.icon !== 'metro')
-    return metro ? [metro, ...rest] : trainingItems
-})
-
-// 居家耗糖训练是正式功能，开发版和发行版都需要展示。
-const visible = ref(true)
-const expanded = ref(false)
-
-const toggle = () => {
-    expanded.value = !expanded.value
-}
-
-const goto = (url: string) => {
-    expanded.value = false
-    uni.navigateTo({ url })
-}
-</script>
-
-<style lang="scss" scoped>
-$brand: #10b981;
-$brand-deep: #047857;
-$brand-light: #34d399;
-
-.dev-entry-wrap {
-    position: fixed;
-    right: 24rpx;
-    z-index: 999;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: 18rpx;
-}
-
-/* ============================================================
- * 主浮动按钮
- * ============================================================ */
-.fab-container {
-    position: relative;
-    width: 108rpx;
-    height: 108rpx;
-}
-
-.entry-fab {
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    background: linear-gradient(140deg, $brand-light 0%, $brand-deep 100%);
-    box-shadow:
-        0 8rpx 20rpx rgba(16, 185, 129, 0.42),
-        0 2rpx 6rpx rgba(15, 23, 42, 0.12),
-        inset 0 -8rpx 16rpx rgba(0, 0, 0, 0.12),
-        inset 0 8rpx 16rpx rgba(255, 255, 255, 0.18);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
-
-    &:active {
-        transform: scale(0.92);
-    }
-
-    &.expanded {
-        background: linear-gradient(140deg, #94a3b8 0%, #475569 100%);
-        transform: rotate(135deg);
-        box-shadow:
-            0 6rpx 16rpx rgba(15, 23, 42, 0.2),
-            inset 0 -6rpx 14rpx rgba(0, 0, 0, 0.12),
-            inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
-    }
-
-    .fab-icon {
-        width: 60rpx;
-        height: 60rpx;
-        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
-        background-size: contain;
-        background-repeat: no-repeat;
-        background-position: center;
-        filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.22));
-        animation: fab-icon-beat 1.6s ease-in-out infinite;
-    }
-}
-@keyframes fab-icon-beat {
-    0%, 60%, 100% {
-        transform: scale(1);
-    }
-    20% {
-        transform: scale(1.12);
-    }
-    40% {
-        transform: scale(1);
-    }
-}
-
-/* 关闭态 X 图标 (CSS 几何) */
-.icon-close {
-    position: relative;
-    width: 36rpx;
-    height: 36rpx;
-
-    .cross-bar {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        height: 5rpx;
-        background: #fff;
-        border-radius: 3rpx;
-        transform-origin: center;
-    }
-    .bar-1 {
-        transform: translateY(-50%) rotate(45deg);
-    }
-    .bar-2 {
-        transform: translateY(-50%) rotate(-45deg);
-    }
-}
-
-/* 呼吸光环(2 圈错相位扩散) */
-.fab-pulse {
-    position: absolute;
-    inset: 0;
-    border-radius: 50%;
-    background: rgba(16, 185, 129, 0.25);
-    animation: fab-ring 2.4s ease-out infinite;
-    pointer-events: none;
-}
-.fab-pulse-2 {
-    animation-delay: 1.2s;
-}
-@keyframes fab-ring {
-    0% {
-        transform: scale(0.95);
-        opacity: 0.7;
-    }
-    100% {
-        transform: scale(1.55);
-        opacity: 0;
-    }
-}
-
-/* ============================================================
- * 展开菜单
- * ============================================================ */
-.menu-list {
-    display: flex;
-    flex-direction: column;
-    gap: 14rpx;
-    animation: slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-@keyframes slide-up {
-    from {
-        opacity: 0;
-        transform: translateY(20rpx) scale(0.92);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-.menu-item {
-    display: flex;
-    align-items: center;
-    gap: 16rpx;
-    background: rgba(255, 255, 255, 0.96);
-    padding: 14rpx 20rpx 14rpx 14rpx;
-    border-radius: 999rpx;
-    box-shadow:
-        0 8rpx 24rpx rgba(15, 23, 42, 0.1),
-        0 1rpx 2rpx rgba(15, 23, 42, 0.06);
-    min-width: 280rpx;
-    transition: transform 0.15s;
-    backdrop-filter: blur(12rpx);
-
-    &:active {
-        transform: scale(0.97);
-        background: #f0fdf4;
-    }
-}
-
-.menu-icon {
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.32);
-
-    &--train {
-        background: linear-gradient(140deg, $brand-light, $brand-deep);
-    }
-    &--dumbbell {
-        background: linear-gradient(140deg, #93c5fd, #3b82f6);
-        box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.36);
-    }
-    &--pedal {
-        background: linear-gradient(140deg, #fdba74, #f97316);
-        box-shadow: 0 2rpx 8rpx rgba(249, 115, 22, 0.36);
-    }
-    &--pilates {
-        background: linear-gradient(140deg, #c4b5fd, #8b5cf6);
-        box-shadow: 0 2rpx 8rpx rgba(139, 92, 246, 0.36);
-    }
-    &--grip {
-        background: linear-gradient(140deg, #5eead4, #14b8a6);
-        box-shadow: 0 2rpx 8rpx rgba(20, 184, 166, 0.36);
-    }
-    &--metro {
-        background: linear-gradient(140deg, #fbbf24, #d97706);
-        box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.36);
-        gap: 4rpx;
-    }
-}
-
-.menu-icon-text {
-    font-size: 32rpx;
-    line-height: 1;
-}
-
-/* 哑铃小 icon */
-.dumbbell-shape {
-    width: 40rpx;
-    height: 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.dumbbell-plate {
-    width: 10rpx;
-    height: 18rpx;
-    background: #fff;
-    border-radius: 3rpx;
-    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
-}
-
-.dumbbell-bar {
-    width: 16rpx;
-    height: 5rpx;
-    background: #fff;
-    border-radius: 2rpx;
-    margin: 0 2rpx;
-    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
-}
-
-/* 脚蹬器小 icon: 左右踏板 */
-.foot-pedal-shape {
-    width: 40rpx;
-    height: 28rpx;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 6rpx;
-}
-
-.pedal-bar {
-    width: 14rpx;
-    background: #fff;
-    border-radius: 4rpx 4rpx 2rpx 2rpx;
-    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
-}
-
-.pedal-bar-left {
-    height: 18rpx;
-    transform: rotate(-12deg);
-}
-
-.pedal-bar-right {
-    height: 22rpx;
-    transform: rotate(12deg);
-}
-
-/* 瑜伽环小 icon: 双弧阻力环 */
-.pilates-ring-shape {
-    width: 36rpx;
-    height: 36rpx;
-    border-radius: 50%;
-    border: 5rpx solid #fff;
-    position: relative;
-    box-shadow:
-        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
-        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 18rpx;
-        height: 18rpx;
-        transform: translate(-50%, -50%);
-        border-radius: 50%;
-        border: 3rpx solid rgba(255, 255, 255, 0.85);
-    }
-}
-
-/* 握力环小 icon: 白色描边的环（甜甜圈） */
-.grip-ring-shape {
-    width: 32rpx;
-    height: 32rpx;
-    border-radius: 50%;
-    border: 7rpx solid #fff;
-    box-shadow:
-        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
-        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
-}
-
-/* 节拍器小 icon: 3 根高低柱模拟均衡器/节拍 */
-.metro-bar {
-    width: 4rpx;
-    background: #fff;
-    border-radius: 2rpx;
-    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
-}
-.metro-bar-1 {
-    height: 16rpx;
-}
-.metro-bar-2 {
-    height: 28rpx;
-}
-.metro-bar-3 {
-    height: 22rpx;
-}
-
-.menu-info {
-    display: flex;
-    flex-direction: column;
-    gap: 2rpx;
-    flex: 1;
-}
-
-.menu-title {
-    font-size: 28rpx;
-    color: #0f172a;
-    font-weight: 700;
-    letter-spacing: 1rpx;
-}
-.menu-sub {
-    font-size: 20rpx;
-    color: #94a3b8;
-    letter-spacing: 0.5rpx;
-}
-
-.menu-arrow {
-    font-size: 32rpx;
-    color: #cbd5e1;
-    font-weight: 300;
-    line-height: 1;
-    margin-left: 4rpx;
-}
-
-.menu-icon--metro-inner {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 4rpx;
-    width: 100%;
-    height: 100%;
-}
-
-/* ============================================================
- * 内嵌模块（weekly 等）
- * ============================================================ */
-.dev-entry-inline {
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.dev-entry-inline--weekly {
-    padding: 32rpx 28rpx 24rpx;
-    border-radius: 48rpx;
-    background: var(--surface-container-lowest, #fff);
-    border: 1rpx solid rgba(0, 108, 73, 0.12);
-    box-shadow:
-        0 24rpx 60rpx -20rpx rgba(0, 108, 73, 0.08),
-        0 8rpx 20rpx -8rpx rgba(0, 0, 0, 0.03);
-}
-
-.inline-hero {
-    display: flex;
-    align-items: center;
-    gap: 20rpx;
-    margin-bottom: 24rpx;
-}
-
-.inline-hero-icon {
-    width: 88rpx;
-    height: 88rpx;
-    border-radius: 24rpx;
-    background: rgba(0, 108, 73, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.inline-hero-wave {
-    width: 52rpx;
-    height: 52rpx;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006c49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-.inline-hero-text {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 6rpx;
-}
-
-.inline-hero-title-row {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 10rpx;
-}
-
-.inline-title {
-    font-size: 32rpx;
-    font-weight: 700;
-    color: #0f172a;
-    line-height: 1.25;
-}
-
-.inline-pill {
-    font-size: 20rpx;
-    font-weight: 700;
-    color: #006c49;
-    padding: 4rpx 12rpx;
-    border-radius: 999rpx;
-    background: rgba(0, 108, 73, 0.1);
-    line-height: 1.2;
-}
-
-.inline-sub {
-    font-size: 26rpx;
-    font-weight: 500;
-    color: #475569;
-    line-height: 1.4;
-}
-
-.inline-scroll {
-    width: 100%;
-    white-space: nowrap;
-}
-
-.inline-scroll-track {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: stretch;
-    gap: 16rpx;
-    padding: 4rpx 2rpx 8rpx;
-}
-
-.inline-card {
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    width: 212rpx;
-    min-height: 220rpx;
-    padding: 20rpx 18rpx 18rpx;
-    border-radius: 28rpx;
-    background: #f4f7f5;
-    border: 1rpx solid rgba(0, 108, 73, 0.1);
-    box-sizing: border-box;
-    flex-shrink: 0;
-    transition: transform 0.2s ease, background 0.2s ease;
-
-    &:active {
-        transform: scale(0.98);
-        background: #e8f3ee;
-    }
-
-    .menu-icon {
-        width: 72rpx;
-        height: 72rpx;
-        margin-bottom: 14rpx;
-        flex-shrink: 0;
-    }
-}
-
-.inline-card-badge {
-    position: absolute;
-    top: 12rpx;
-    right: 12rpx;
-    padding: 4rpx 10rpx;
-    border-radius: 8rpx;
-    background: #006c49;
-
-    text {
-        font-size: 18rpx;
-        font-weight: 700;
-        color: #fff;
-        line-height: 1.2;
-    }
-}
-
-.inline-card-title {
-    font-size: 28rpx;
-    font-weight: 700;
-    color: #0f172a;
-    line-height: 1.25;
-    width: 100%;
-}
-
-.inline-card-sub {
-    margin-top: 6rpx;
-    font-size: 22rpx;
-    font-weight: 500;
-    color: #64748b;
-    line-height: 1.35;
-    width: 100%;
-}
-
-.inline-card-go {
-    margin-top: auto;
-    padding-top: 12rpx;
-    font-size: 22rpx;
-    font-weight: 700;
-    color: #006c49;
-    line-height: 1.2;
-}
-
-.inline-scroll-hint {
-    display: block;
-    margin-top: 14rpx;
-    font-size: 22rpx;
-    font-weight: 600;
-    color: #94a3b8;
-    text-align: center;
-    line-height: 1.35;
-}
-
-@media (prefers-reduced-motion: reduce) {
-    .inline-card:active {
-        transform: none;
-    }
-}
-</style>
+<template>
+    <!-- 页面内嵌模块（如 weekly 统计页主内容区） -->
+    <view
+        v-if="visible && props.inline"
+        class="dev-entry-inline"
+        :class="{ 'dev-entry-inline--weekly': props.tone === 'weekly' }"
+    >
+        <view class="inline-hero">
+            <view class="inline-hero-icon" aria-hidden="true">
+                <view class="inline-hero-wave" />
+            </view>
+            <view class="inline-hero-text">
+                <view class="inline-hero-title-row">
+                    <text class="inline-title">居家耗糖训练</text>
+                    <text v-if="props.tone === 'weekly'" class="inline-pill">体验</text>
+                </view>
+                <text class="inline-sub">低强度动起来，帮助身体消耗糖分</text>
+            </view>
+        </view>
+
+        <!-- 训练轮播：当前卡片居中放大，左右露出相邻卡片；自动慢速轮播，手指滑动时暂停 -->
+        <swiper
+            class="inline-swiper"
+            circular
+            autoplay
+            :interval="4500"
+            :duration="480"
+            easing-function="easeOutCubic"
+            previous-margin="84rpx"
+            next-margin="84rpx"
+            :current="current"
+            @change="onSwiperChange"
+        >
+            <swiper-item v-for="(item, i) in inlineItems" :key="item.url" class="inline-swiper-item">
+                <view class="slide" :class="['slide--' + item.icon, { 'is-active': i === current }]" @click="onSlideTap(i, item.url)">
+                    <view class="slide-deco" />
+                    <view class="slide-body">
+                        <view class="slide-head">
+                            <text class="slide-title">{{ item.title }}</text>
+                            <text v-if="item.isNew" class="slide-badge">新功能</text>
+                            <text v-else-if="item.featured" class="slide-badge">推荐</text>
+                        </view>
+                        <text class="slide-desc">{{ item.desc }}</text>
+                        <view class="slide-cta">
+                            <text>去训练</text>
+                            <text class="slide-cta-arrow">›</text>
+                        </view>
+                    </view>
+                    <view class="slide-art">
+                        <image
+                            v-if="item.art && !artFailed"
+                            class="slide-coach"
+                            :src="item.art"
+                            mode="heightFix"
+                            :webp="true"
+                            @error="artFailed = true"
+                        />
+                        <view v-else class="slide-icon menu-icon" :class="item.iconClass">
+                            <view class="slide-glyph">
+                                <view v-if="item.icon === 'dumbbell'" class="dumbbell-shape">
+                                    <view class="dumbbell-plate dumbbell-plate-left" />
+                                    <view class="dumbbell-bar" />
+                                    <view class="dumbbell-plate dumbbell-plate-right" />
+                                </view>
+                                <view v-else-if="item.icon === 'pedal'" class="foot-pedal-shape">
+                                    <view class="pedal-bar pedal-bar-left" />
+                                    <view class="pedal-bar pedal-bar-right" />
+                                </view>
+                                <view v-else-if="item.icon === 'pilates'" class="pilates-ring-shape" />
+                                <view v-else-if="item.icon === 'grip'" class="grip-ring-shape" />
+                                <text v-else-if="item.icon === 'ai'" class="ai-mark">AI</text>
+                                <view v-else-if="item.icon === 'metro'" class="menu-icon--metro-inner">
+                                    <view class="metro-bar metro-bar-1" />
+                                    <view class="metro-bar metro-bar-2" />
+                                    <view class="metro-bar metro-bar-3" />
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+
+        <view class="inline-dots">
+            <view
+                v-for="(item, i) in inlineItems"
+                :key="'dot-' + item.url"
+                class="inline-dot"
+                :class="{ 'is-on': i === current }"
+                @click="current = i"
+            />
+        </view>
+    </view>
+
+    <view v-else-if="visible" class="dev-entry-wrap" :style="{ bottom: props.bottom + 'rpx' }">
+        <!-- 展开后的菜单卡片(从下往上动画) -->
+        <view v-if="expanded" class="menu-list" @click.stop>
+            <view class="menu-item" @click="goto('/training/pages/pose-hub')">
+                <view class="menu-icon menu-icon--ai">
+                    <text class="ai-mark">AI</text>
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">AI 跟练</text>
+                    <text class="menu-sub">识别动作 · 自动计数</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/dumbbell')">
+                <view class="menu-icon menu-icon--dumbbell">
+                    <view class="dumbbell-shape">
+                        <view class="dumbbell-plate dumbbell-plate-left" />
+                        <view class="dumbbell-bar" />
+                        <view class="dumbbell-plate dumbbell-plate-right" />
+                    </view>
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">哑铃</text>
+                    <text class="menu-sub">力量塑形</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/foot-pedal')">
+                <view class="menu-icon menu-icon--pedal">
+                    <view class="foot-pedal-shape">
+                        <view class="pedal-bar pedal-bar-left" />
+                        <view class="pedal-bar pedal-bar-right" />
+                    </view>
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">脚蹬器</text>
+                    <text class="menu-sub">下肢有氧</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/pilates-ring')">
+                <view class="menu-icon menu-icon--pilates">
+                    <view class="pilates-ring-shape" />
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">瑜伽环</text>
+                    <text class="menu-sub">核心塑形</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/grip-ring')">
+                <view class="menu-icon menu-icon--grip">
+                    <view class="grip-ring-shape" />
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">握力环</text>
+                    <text class="menu-sub">握力训练</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+
+            <view class="menu-item" @click="goto('/training/pages/metronome')">
+                <view class="menu-icon menu-icon--metro">
+                    <view class="metro-bar metro-bar-1" />
+                    <view class="metro-bar metro-bar-2" />
+                    <view class="metro-bar metro-bar-3" />
+                </view>
+                <view class="menu-info">
+                    <text class="menu-title">耗糖节拍器</text>
+                    <text class="menu-sub">健走配速</text>
+                </view>
+                <view class="menu-arrow">›</view>
+            </view>
+        </view>
+
+        <!-- 主浮动按钮(单字"练" + 呼吸光环) -->
+        <view class="fab-container">
+            <view v-if="!expanded" class="fab-pulse" />
+            <view v-if="!expanded" class="fab-pulse fab-pulse-2" />
+            <view class="entry-fab" :class="{ expanded }" @click="toggle">
+                <view v-if="expanded" class="icon-close">
+                    <view class="cross-bar bar-1" />
+                    <view class="cross-bar bar-2" />
+                </view>
+                <!-- 心跳波形 icon: 健康主题,SVG 折线 -->
+                <view v-else class="fab-icon" />
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+type TrainingItem = {
+    url: string
+    title: string
+    /** 轮播卡片上的一行介绍（10 字左右） */
+    desc: string
+    icon: 'dumbbell' | 'pedal' | 'pilates' | 'grip' | 'metro' | 'ai'
+    iconClass: string
+    /** 卡片右侧的插画（网络图），没有或加载失败时显示大图标 */
+    art?: string
+    featured?: boolean
+    isNew?: boolean
+}
+
+/** AI 跟练卡片的教练插画：training-videos 导出、上传在 COS 的教练高清帧（开合跳双手举过头） */
+const COACH_ART = 'https://gz-1349751149.cos.ap-guangzhou.myqcloud.com/yundong/coach/jl_09.webp'
+
+const trainingItems: TrainingItem[] = [
+    { url: '/training/pages/pose-hub', title: 'AI 跟练', desc: 'AI 识别动作，自动计数', icon: 'ai', iconClass: 'menu-icon--ai', art: COACH_ART, isNew: true },
+    { url: '/training/pages/dumbbell', title: '哑铃', desc: '小重量多组数，练力量', icon: 'dumbbell', iconClass: 'menu-icon--dumbbell' },
+    { url: '/training/pages/foot-pedal', title: '脚蹬器', desc: '坐着就能练，低冲击', icon: 'pedal', iconClass: 'menu-icon--pedal' },
+    { url: '/training/pages/pilates-ring', title: '瑜伽环', desc: '夹一夹，练核心和腿部', icon: 'pilates', iconClass: 'menu-icon--pilates' },
+    { url: '/training/pages/grip-ring', title: '握力环', desc: '随时握一握，练手部', icon: 'grip', iconClass: 'menu-icon--grip' },
+    { url: '/training/pages/metronome', title: '耗糖节拍器', desc: '跟着节拍健走，不费劲', icon: 'metro', iconClass: 'menu-icon--metro', featured: true },
+]
+
+const props = withDefaults(
+    defineProps<{
+        /** 悬浮按钮距底部 rpx（仅非 inline） */
+        bottom?: number
+        /** 内嵌到页面主内容区，非 fixed 悬浮 */
+        inline?: boolean
+        /** weekly 页：与统计页 Vital Mint 视觉一致 */
+        tone?: 'default' | 'weekly'
+    }>(),
+    { bottom: 200, inline: false, tone: 'default' },
+)
+
+/** weekly 将健走节拍器置前并标推荐 */
+const inlineItems = computed(() => {
+    if (props.tone !== 'weekly') return trainingItems
+    const metro = trainingItems.find((i) => i.icon === 'metro')
+    const rest = trainingItems.filter((i) => i.icon !== 'metro')
+    return metro ? [metro, ...rest] : trainingItems
+})
+
+// 居家耗糖训练是正式功能，开发版和发行版都需要展示。
+const visible = ref(true)
+const expanded = ref(false)
+
+/** 轮播当前居中的卡片 */
+const current = ref(0)
+const artFailed = ref(false)
+
+const onSwiperChange = (e: { detail: { current: number } }) => {
+    current.value = e.detail.current
+}
+
+/** 点居中的卡片进入训练；点两侧露出的卡片先把它转到中间 */
+const onSlideTap = (index: number, url: string) => {
+    if (index !== current.value) {
+        current.value = index
+        return
+    }
+    goto(url)
+}
+
+const toggle = () => {
+    expanded.value = !expanded.value
+}
+
+const goto = (url: string) => {
+    expanded.value = false
+    uni.navigateTo({ url })
+}
+</script>
+
+<style lang="scss" scoped>
+$brand: #10b981;
+$brand-deep: #047857;
+$brand-light: #34d399;
+
+.dev-entry-wrap {
+    position: fixed;
+    right: 24rpx;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 18rpx;
+}
+
+/* ============================================================
+ * 主浮动按钮
+ * ============================================================ */
+.fab-container {
+    position: relative;
+    width: 108rpx;
+    height: 108rpx;
+}
+
+.entry-fab {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: linear-gradient(140deg, $brand-light 0%, $brand-deep 100%);
+    box-shadow:
+        0 8rpx 20rpx rgba(16, 185, 129, 0.42),
+        0 2rpx 6rpx rgba(15, 23, 42, 0.12),
+        inset 0 -8rpx 16rpx rgba(0, 0, 0, 0.12),
+        inset 0 8rpx 16rpx rgba(255, 255, 255, 0.18);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s;
+
+    &:active {
+        transform: scale(0.92);
+    }
+
+    &.expanded {
+        background: linear-gradient(140deg, #94a3b8 0%, #475569 100%);
+        transform: rotate(135deg);
+        box-shadow:
+            0 6rpx 16rpx rgba(15, 23, 42, 0.2),
+            inset 0 -6rpx 14rpx rgba(0, 0, 0, 0.12),
+            inset 0 6rpx 14rpx rgba(255, 255, 255, 0.12);
+    }
+
+    .fab-icon {
+        width: 60rpx;
+        height: 60rpx;
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        filter: drop-shadow(0 2rpx 6rpx rgba(0, 0, 0, 0.22));
+        animation: fab-icon-beat 1.6s ease-in-out infinite;
+    }
+}
+@keyframes fab-icon-beat {
+    0%, 60%, 100% {
+        transform: scale(1);
+    }
+    20% {
+        transform: scale(1.12);
+    }
+    40% {
+        transform: scale(1);
+    }
+}
+
+/* 关闭态 X 图标 (CSS 几何) */
+.icon-close {
+    position: relative;
+    width: 36rpx;
+    height: 36rpx;
+
+    .cross-bar {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 5rpx;
+        background: #fff;
+        border-radius: 3rpx;
+        transform-origin: center;
+    }
+    .bar-1 {
+        transform: translateY(-50%) rotate(45deg);
+    }
+    .bar-2 {
+        transform: translateY(-50%) rotate(-45deg);
+    }
+}
+
+/* 呼吸光环(2 圈错相位扩散) */
+.fab-pulse {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    background: rgba(16, 185, 129, 0.25);
+    animation: fab-ring 2.4s ease-out infinite;
+    pointer-events: none;
+}
+.fab-pulse-2 {
+    animation-delay: 1.2s;
+}
+@keyframes fab-ring {
+    0% {
+        transform: scale(0.95);
+        opacity: 0.7;
+    }
+    100% {
+        transform: scale(1.55);
+        opacity: 0;
+    }
+}
+
+/* ============================================================
+ * 展开菜单
+ * ============================================================ */
+.menu-list {
+    display: flex;
+    flex-direction: column;
+    gap: 14rpx;
+    animation: slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+@keyframes slide-up {
+    from {
+        opacity: 0;
+        transform: translateY(20rpx) scale(0.92);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+.menu-item {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    background: rgba(255, 255, 255, 0.96);
+    padding: 14rpx 20rpx 14rpx 14rpx;
+    border-radius: 999rpx;
+    box-shadow:
+        0 8rpx 24rpx rgba(15, 23, 42, 0.1),
+        0 1rpx 2rpx rgba(15, 23, 42, 0.06);
+    min-width: 280rpx;
+    transition: transform 0.15s;
+    backdrop-filter: blur(12rpx);
+
+    &:active {
+        transform: scale(0.97);
+        background: #f0fdf4;
+    }
+}
+
+.menu-icon {
+    width: 64rpx;
+    height: 64rpx;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    box-shadow: 0 2rpx 8rpx rgba(16, 185, 129, 0.32);
+
+    &--train {
+        background: linear-gradient(140deg, $brand-light, $brand-deep);
+    }
+    &--dumbbell {
+        background: linear-gradient(140deg, #93c5fd, #3b82f6);
+        box-shadow: 0 2rpx 8rpx rgba(59, 130, 246, 0.36);
+    }
+    &--pedal {
+        background: linear-gradient(140deg, #fdba74, #f97316);
+        box-shadow: 0 2rpx 8rpx rgba(249, 115, 22, 0.36);
+    }
+    &--pilates {
+        background: linear-gradient(140deg, #c4b5fd, #8b5cf6);
+        box-shadow: 0 2rpx 8rpx rgba(139, 92, 246, 0.36);
+    }
+    &--grip {
+        background: linear-gradient(140deg, #5eead4, #14b8a6);
+        box-shadow: 0 2rpx 8rpx rgba(20, 184, 166, 0.36);
+    }
+    &--metro {
+        background: linear-gradient(140deg, #fbbf24, #d97706);
+        box-shadow: 0 2rpx 8rpx rgba(245, 158, 11, 0.36);
+        gap: 4rpx;
+    }
+    &--ai {
+        background: linear-gradient(140deg, #34d399, #006c49);
+        box-shadow: 0 2rpx 8rpx rgba(0, 108, 73, 0.36);
+    }
+}
+
+/* AI 跟练小 icon */
+.ai-mark {
+    color: #fff;
+    font-size: 24rpx;
+    font-weight: 800;
+    letter-spacing: 1rpx;
+    line-height: 1;
+}
+
+.menu-icon-text {
+    font-size: 32rpx;
+    line-height: 1;
+}
+
+/* 哑铃小 icon */
+.dumbbell-shape {
+    width: 40rpx;
+    height: 20rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dumbbell-plate {
+    width: 10rpx;
+    height: 18rpx;
+    background: #fff;
+    border-radius: 3rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+.dumbbell-bar {
+    width: 16rpx;
+    height: 5rpx;
+    background: #fff;
+    border-radius: 2rpx;
+    margin: 0 2rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+/* 脚蹬器小 icon: 左右踏板 */
+.foot-pedal-shape {
+    width: 40rpx;
+    height: 28rpx;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 6rpx;
+}
+
+.pedal-bar {
+    width: 14rpx;
+    background: #fff;
+    border-radius: 4rpx 4rpx 2rpx 2rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+
+.pedal-bar-left {
+    height: 18rpx;
+    transform: rotate(-12deg);
+}
+
+.pedal-bar-right {
+    height: 22rpx;
+    transform: rotate(12deg);
+}
+
+/* 瑜伽环小 icon: 双弧阻力环 */
+.pilates-ring-shape {
+    width: 36rpx;
+    height: 36rpx;
+    border-radius: 50%;
+    border: 5rpx solid #fff;
+    position: relative;
+    box-shadow:
+        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
+        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 18rpx;
+        height: 18rpx;
+        transform: translate(-50%, -50%);
+        border-radius: 50%;
+        border: 3rpx solid rgba(255, 255, 255, 0.85);
+    }
+}
+
+/* 握力环小 icon: 白色描边的环（甜甜圈） */
+.grip-ring-shape {
+    width: 32rpx;
+    height: 32rpx;
+    border-radius: 50%;
+    border: 7rpx solid #fff;
+    box-shadow:
+        0 1rpx 2rpx rgba(0, 0, 0, 0.18),
+        inset 0 1rpx 2rpx rgba(255, 255, 255, 0.6);
+}
+
+/* 节拍器小 icon: 3 根高低柱模拟均衡器/节拍 */
+.metro-bar {
+    width: 4rpx;
+    background: #fff;
+    border-radius: 2rpx;
+    box-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.18);
+}
+.metro-bar-1 {
+    height: 16rpx;
+}
+.metro-bar-2 {
+    height: 28rpx;
+}
+.metro-bar-3 {
+    height: 22rpx;
+}
+
+.menu-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2rpx;
+    flex: 1;
+}
+
+.menu-title {
+    font-size: 28rpx;
+    color: #0f172a;
+    font-weight: 700;
+    letter-spacing: 1rpx;
+}
+.menu-sub {
+    font-size: 20rpx;
+    color: #94a3b8;
+    letter-spacing: 0.5rpx;
+}
+
+.menu-arrow {
+    font-size: 32rpx;
+    color: #cbd5e1;
+    font-weight: 300;
+    line-height: 1;
+    margin-left: 4rpx;
+}
+
+.menu-icon--metro-inner {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 4rpx;
+    width: 100%;
+    height: 100%;
+}
+
+/* ============================================================
+ * 内嵌模块（weekly 等）
+ * ============================================================ */
+.dev-entry-inline {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.dev-entry-inline--weekly {
+    padding: 32rpx 28rpx 24rpx;
+    border-radius: 48rpx;
+    // 轮播两侧露出的卡片在模块圆角边缘处裁掉
+    overflow: hidden;
+    background: var(--surface-container-lowest, #fff);
+    border: 1rpx solid rgba(0, 108, 73, 0.12);
+    box-shadow:
+        0 24rpx 60rpx -20rpx rgba(0, 108, 73, 0.08),
+        0 8rpx 20rpx -8rpx rgba(0, 0, 0, 0.03);
+}
+
+.inline-hero {
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    margin-bottom: 24rpx;
+}
+
+.inline-hero-icon {
+    width: 88rpx;
+    height: 88rpx;
+    border-radius: 24rpx;
+    background: rgba(0, 108, 73, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.inline-hero-wave {
+    width: 52rpx;
+    height: 52rpx;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006c49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,12 7,12 9.5,7 12,17 14.5,9 16.5,12 22,12'/></svg>");
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.inline-hero-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6rpx;
+}
+
+.inline-hero-title-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10rpx;
+}
+
+.inline-title {
+    font-size: 32rpx;
+    font-weight: 700;
+    color: #0f172a;
+    line-height: 1.25;
+}
+
+.inline-pill {
+    font-size: 20rpx;
+    font-weight: 700;
+    color: #006c49;
+    padding: 4rpx 12rpx;
+    border-radius: 999rpx;
+    background: rgba(0, 108, 73, 0.1);
+    line-height: 1.2;
+}
+
+.inline-sub {
+    font-size: 26rpx;
+    font-weight: 500;
+    color: #475569;
+    line-height: 1.4;
+}
+
+/* ---------- 训练轮播 ---------- */
+// 每种训练一套配色：背景浅色渐变两端、主色、深色
+$slide-themes: (
+    metro: (#fff7e6, #ffe8bd, #f59e0b, #b45309),
+    ai: (#e6f7ef, #c9eedc, #10b981, #006c49),
+    dumbbell: (#eaf2ff, #d3e3ff, #3b82f6, #1d4ed8),
+    pedal: (#fff1e6, #ffdcc4, #f97316, #c2410c),
+    pilates: (#f3efff, #e3daff, #8b5cf6, #6d28d9),
+    grip: (#e6f8f5, #c9efe9, #14b8a6, #0f766e),
+);
+
+.inline-swiper {
+    height: 216rpx;
+}
+
+// 轮播铺满整个模块宽度（含内边距），当前卡片更宽，两侧露出相邻卡片
+.dev-entry-inline--weekly .inline-swiper {
+    margin: 0 -28rpx;
+}
+
+.inline-swiper-item {
+    box-sizing: border-box;
+    padding: 10rpx 8rpx;
+}
+
+.slide {
+    position: relative;
+    height: 196rpx;
+    border-radius: 28rpx;
+    overflow: hidden;
+    display: flex;
+    align-items: stretch;
+    transform: scale(0.92);
+    opacity: 0.55;
+    transition:
+        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
+        opacity 0.45s ease,
+        box-shadow 0.45s ease;
+
+    &.is-active {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    &.is-active:active {
+        transform: scale(0.985);
+    }
+}
+
+// 右上角一团柔和的主色光晕，让卡片有层次
+.slide-deco {
+    position: absolute;
+    right: -50rpx;
+    top: -70rpx;
+    width: 250rpx;
+    height: 250rpx;
+    border-radius: 50%;
+}
+
+.slide-body {
+    position: relative;
+    z-index: 1;
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24rpx 0 20rpx 28rpx;
+}
+
+.slide-head {
+    display: flex;
+    align-items: center;
+    gap: 10rpx;
+    max-width: 100%;
+}
+
+.slide-title {
+    font-size: 32rpx;
+    font-weight: 800;
+    color: #0f172a;
+    line-height: 1.2;
+    letter-spacing: 1rpx;
+    white-space: nowrap;
+}
+
+.slide-badge {
+    flex-shrink: 0;
+    padding: 3rpx 12rpx;
+    border-radius: 999rpx;
+    font-size: 19rpx;
+    font-weight: 700;
+    color: #fff;
+    line-height: 1.3;
+}
+
+.slide-desc {
+    margin-top: 8rpx;
+    max-width: 100%;
+    font-size: 22rpx;
+    font-weight: 500;
+    color: #475569;
+    line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.slide-cta {
+    margin-top: auto;
+    display: flex;
+    align-items: center;
+    gap: 4rpx;
+    padding: 7rpx 18rpx;
+    border-radius: 999rpx;
+
+    text {
+        font-size: 22rpx;
+        font-weight: 700;
+        color: #fff;
+        line-height: 1.2;
+    }
+}
+
+.slide-cta-arrow {
+    font-size: 26rpx !important;
+    margin-top: -2rpx;
+}
+
+.slide-art {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+    width: 168rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// 教练插画：贴着卡片底边站着，头顶留一点空
+.slide-coach {
+    position: absolute;
+    right: 10rpx;
+    bottom: -4rpx;
+    height: 184rpx;
+}
+
+.slide-icon {
+    width: 108rpx;
+    height: 108rpx;
+    margin-right: 22rpx;
+}
+
+// 小图标的几何图形是按 64rpx 圆画的，放大后居中
+.slide-glyph {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64rpx;
+    height: 64rpx;
+    transform: scale(1.5);
+}
+
+@each $name, $c in $slide-themes {
+    .slide--#{$name} {
+        background: linear-gradient(135deg, nth($c, 1) 0%, nth($c, 2) 100%);
+        box-shadow: 0 16rpx 32rpx -18rpx rgba(nth($c, 4), 0.45);
+
+        .slide-deco {
+            background: radial-gradient(circle, rgba(nth($c, 3), 0.28) 0%, rgba(nth($c, 3), 0) 70%);
+        }
+        .slide-badge {
+            background: nth($c, 4);
+        }
+        .slide-cta {
+            background: linear-gradient(135deg, nth($c, 3) 0%, nth($c, 4) 100%);
+            box-shadow: 0 8rpx 18rpx -6rpx rgba(nth($c, 4), 0.55);
+        }
+        .slide-icon {
+            box-shadow:
+                0 0 0 12rpx rgba(255, 255, 255, 0.45),
+                0 14rpx 26rpx -10rpx rgba(nth($c, 4), 0.5);
+        }
+    }
+}
+
+.inline-dots {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10rpx;
+    margin-top: 14rpx;
+}
+
+.inline-dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: 999rpx;
+    background: rgba(0, 108, 73, 0.18);
+    transition:
+        width 0.35s ease,
+        background 0.35s ease;
+
+    &.is-on {
+        width: 36rpx;
+        background: #006c49;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .slide,
+    .inline-dot {
+        transition: none;
+    }
+}
+</style>