feat(index): 首页改版 hero + 进度点地图 + 计时环 dial + CTA 脉冲
- 全宽橙渐变 hero:头像+昵称+按小时问候+「时长」敢不敢来挑战+连胜(昵称同行) - 进度点地图 quest-card 上浮叠 hero,圆点+连线 done/now/final 三态,与 CTA 等宽 - 计时环 dial 虚线刻度环+呼吸动画,整体放大(320rpx/数字96rpx) - CTA「立即挑战+时长」带脉冲,保留自由/循环入口 - 千卡按 4 千卡/分钟估算(激励参考);删除「今天还没开始」整段与连胜前图标 - 循环训练秒数步进 ±10;取消每日语录模块
This commit is contained in:
+40
-80
@@ -1,91 +1,51 @@
|
||||
<view class="container page-enter" style="{{themeStyle}}">
|
||||
|
||||
<!-- 顶部问候:头像 + "昵称,准备好了吗?" -->
|
||||
<view class="greeting-row">
|
||||
<!-- 圆形头像:无头像时回退人形图标占位 -->
|
||||
<view class="greeting-avatar {{avatarUrl ? 'has-avatar' : ''}}">
|
||||
<image
|
||||
class="greeting-avatar-img"
|
||||
src="{{avatarUrl || icons.peopleFill}}"
|
||||
mode="{{avatarUrl ? 'aspectFill' : 'aspectFit'}}"
|
||||
></image>
|
||||
<!-- 全宽渐变头图 hero -->
|
||||
<view class="hero">
|
||||
<view class="hero-top">
|
||||
<!-- 圆形头像:无头像时白底 + peopleFill 占位(橙图标在白底清晰);
|
||||
有头像时透明描边,远程(cloud://)头像靠外层 overflow:hidden 裁圆 -->
|
||||
<view class="hero-avatar {{avatarUrl ? 'has-avatar' : ''}}">
|
||||
<image
|
||||
class="hero-avatar-img"
|
||||
src="{{avatarUrl || icons.peopleFill}}"
|
||||
mode="{{avatarUrl ? 'aspectFill' : 'aspectFit'}}"
|
||||
></image>
|
||||
</view>
|
||||
<view class="hero-user">
|
||||
<text class="hero-greet">{{greetText}},{{nickName || '运动达人'}}</text>
|
||||
<text class="hero-social">{{streakText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="greeting-main">
|
||||
<text class="greeting-title">{{nickName || '运动达人'}},{{todayDone ? '太棒了!' : '准备好了吗?'}}</text>
|
||||
<text class="greeting-sub">{{todayDone ? '继续保持这个势头' : '今天的平板支撑等着你'}}</text>
|
||||
<view class="hero-challenge">
|
||||
<text class="hero-time">「{{todayTargetText}}」</text>
|
||||
<text class="hero-cta-text">敢不敢来挑战?</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 连续打卡卡片:火焰连胜 + 分段进度 -->
|
||||
<ui-card variant="gradient in" index="0" class="{{justCompleted ? 'just-completed' : ''}}">
|
||||
<view class="header-card">
|
||||
<!-- 上区:连胜视觉重心 + 计划徽章 -->
|
||||
<view class="streak-row">
|
||||
<view class="streak-section">
|
||||
<view class="streak-icon-wrap">
|
||||
<view class="streak-halo"></view>
|
||||
<image class="streak-icon" src="{{icons.hotWhite}}" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="streak-text">
|
||||
<text class="streak-num">{{streakCount}}</text>
|
||||
<text class="streak-label">连续打卡</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="plan-badge">
|
||||
<image class="plan-badge-icon" src="{{icons.formWhite}}" mode="aspectFit"></image>
|
||||
<text class="plan-badge-text">{{planName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下区:分段格子(<=10天)或里程碑连续条(>10天) -->
|
||||
<view class="segment-progress">
|
||||
<view class="segment-track" wx:if="{{useSegments}}">
|
||||
<view
|
||||
wx:for="{{planDays}}"
|
||||
wx:key="*this"
|
||||
class="segment-cell {{index < planDay - 1 ? 'done' : ''}} {{index === planDay - 1 ? 'current' : ''}}"
|
||||
></view>
|
||||
</view>
|
||||
<view class="milestone-track" wx:else>
|
||||
<view class="milestone-bar">
|
||||
<view class="milestone-fill" style="width: {{planProgress}}%;"></view>
|
||||
<view class="milestone-node" style="left: 0%;"></view>
|
||||
<view class="milestone-node" style="left: 25%;"></view>
|
||||
<view class="milestone-node" style="left: 50%;"></view>
|
||||
<view class="milestone-node" style="left: 75%;"></view>
|
||||
<view class="milestone-node" style="left: 100%;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<text class="progress-label">第 {{planDay}} / {{planTotal}} 天</text>
|
||||
</view>
|
||||
<!-- 闯关进度地图(上浮叠在 hero 下) -->
|
||||
<ui-card variant="in" index="0" class="quest-card {{justCompleted ? 'just-completed' : ''}}">
|
||||
<view class="quest-head">
|
||||
<text class="quest-title">{{planName}}<text class="quest-sub">第 {{planDay}} / {{planTotal}} 天</text></text>
|
||||
<text class="quest-trophy">🏆</text>
|
||||
</view>
|
||||
<view class="quest-map">
|
||||
<block wx:for="{{questNodes}}" wx:key="label">
|
||||
<view class="q-node {{item.state}} {{item.final ? 'final' : ''}}">{{item.label}}</view>
|
||||
<view wx:if="{{index < questNodes.length - 1}}" class="q-link {{item.state === 'done' ? 'done' : ''}}"></view>
|
||||
</block>
|
||||
</view>
|
||||
<text class="quest-tip">{{questTip}}</text>
|
||||
</ui-card>
|
||||
|
||||
<!-- 今日目标卡片 -->
|
||||
<ui-card variant="in" index="1">
|
||||
<view class="target-section">
|
||||
<view class="target-header">
|
||||
<image class="section-icon" src="{{icons.targetFill}}" mode="aspectFit"></image>
|
||||
<text class="section-title">今日目标</text>
|
||||
</view>
|
||||
<view class="target-display">
|
||||
<view class="target-ring">
|
||||
<text class="target-time" style="font-size: {{targetTimeFontSize}}rpx;">{{todayTargetText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="today-status">
|
||||
<block wx:if="{{todayDone}}">
|
||||
<view class="done-badge">
|
||||
<image class="done-icon" src="{{icons.successFill}}" mode="aspectFit"></image>
|
||||
<text class="done-text">今日已完成 {{todayDuration}} 秒</text>
|
||||
</view>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<image class="pending-icon" src="{{icons.time}}" mode="aspectFit"></image>
|
||||
<text class="pending-text">还未开始训练</text>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 计时环 dial -->
|
||||
<view class="timer-wrap">
|
||||
<view class="dial">
|
||||
<text class="dial-time" style="font-size: {{targetTimeFontSize}}rpx;">{{todayTargetText}}</text>
|
||||
<text class="dial-label">今日目标时长</text>
|
||||
</view>
|
||||
</ui-card>
|
||||
<view class="benefit">⚡ 预计消耗 <text class="benefit-hl">{{estKcal}}</text> 千卡</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮区 -->
|
||||
<view class="action-buttons">
|
||||
@@ -93,10 +53,10 @@
|
||||
variant="primary"
|
||||
size="xl"
|
||||
block
|
||||
text="{{todayDone ? '再次训练' : '开始训练'}}"
|
||||
text="{{todayDone ? '再战一次 ' : '立即挑战 '}}{{todayTargetText}}"
|
||||
icon-src="{{icons.playWhite}}"
|
||||
bindtap="onStartTrain"
|
||||
custom-style="border-radius:16rpx;"
|
||||
custom-style="border-radius:16rpx;box-shadow:0 8rpx 20rpx rgba(var(--primary-rgb),0.35);animation:ctaPulse 2s ease-in-out infinite;"
|
||||
></ui-btn>
|
||||
|
||||
<view class="action-row">
|
||||
|
||||
Reference in New Issue
Block a user