f95401c1ce
- 新增 BMI 计算工具，支持用户输入体重和身高计算 BMI 值，并根据结果提供分类和建议 - 在训练计划中集成排课功能，允许用户选择和安排训练动作 - 更新个人信息页面，添加出生日期字段，支持用户完善个人资料 - 优化训练计划卡片样式，提升用户体验 - 更新相关依赖，确保项目兼容性和功能完整性
95 lines
2.0 KiB
TypeScript
95 lines
2.0 KiB
TypeScript
import { ProgressBar } from '@/components/ProgressBar';
|
|
import React from 'react';
|
|
import { Image, StyleSheet, Text, View } from 'react-native';
|
|
|
|
type Level = '初学者' | '中级' | '高级';
|
|
|
|
type PlanCardProps = {
|
|
image: string;
|
|
title: string;
|
|
subtitle: string;
|
|
level?: Level;
|
|
progress: number; // 0 - 1
|
|
};
|
|
|
|
export function PlanCard({ image, title, subtitle, level, progress }: PlanCardProps) {
|
|
return (
|
|
<View style={styles.card}>
|
|
<Image source={{ uri: image }} style={styles.image} />
|
|
<View style={styles.content}>
|
|
{level && (
|
|
<View style={styles.badgeContainer}>
|
|
<View style={styles.badge}>
|
|
<Text style={styles.badgeText}>{level}</Text>
|
|
</View>
|
|
</View>
|
|
)}
|
|
|
|
<Text style={styles.title}>{title}</Text>
|
|
<Text style={styles.subtitle}>{subtitle}</Text>
|
|
|
|
<View style={styles.progressWrapper}>
|
|
<ProgressBar progress={progress} showLabel={true} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
card: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#F0F0F0',
|
|
borderRadius: 28,
|
|
padding: 20,
|
|
marginBottom: 18,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 10 },
|
|
shadowOpacity: 0.25,
|
|
shadowRadius: 30,
|
|
elevation: 10,
|
|
},
|
|
image: {
|
|
width: 100,
|
|
height: 100,
|
|
borderRadius: 22,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingLeft: 18,
|
|
justifyContent: 'center',
|
|
},
|
|
badgeContainer: {
|
|
position: 'absolute',
|
|
top: -10,
|
|
right: -10,
|
|
},
|
|
badge: {
|
|
backgroundColor: '#192126',
|
|
borderTopRightRadius: 12,
|
|
borderBottomLeftRadius: 12,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 6,
|
|
},
|
|
badgeText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 12,
|
|
fontWeight: '500',
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
color: '#192126',
|
|
fontWeight: '800',
|
|
},
|
|
subtitle: {
|
|
marginTop: 8,
|
|
fontSize: 12,
|
|
color: '#B1B6BD',
|
|
},
|
|
progressWrapper: {
|
|
marginTop: 18,
|
|
},
|
|
});
|
|
|
|
|