9796c614ed
- 在项目中引入 dayjs 库以处理日期 - 新增 PlanCard 和 ProgressBar 组件，分别用于展示训练计划和进度条 - 更新首页以显示推荐的训练计划 - 优化个人中心页面的底部留白处理 - 本地化界面文本为中文
93 lines
1.9 KiB
TypeScript
93 lines
1.9 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}>
|
|
<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: '#FFFFFF',
|
|
borderRadius: 28,
|
|
padding: 20,
|
|
marginBottom: 18,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 4 },
|
|
shadowOpacity: 0.06,
|
|
shadowRadius: 12,
|
|
elevation: 3,
|
|
},
|
|
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,
|
|
},
|
|
});
|
|
|
|
|