9796c614ed
- 在项目中引入 dayjs 库以处理日期 - 新增 PlanCard 和 ProgressBar 组件，分别用于展示训练计划和进度条 - 更新首页以显示推荐的训练计划 - 优化个人中心页面的底部留白处理 - 本地化界面文本为中文
126 lines
3.0 KiB
TypeScript
126 lines
3.0 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import React from 'react';
|
|
import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
|
|
interface WorkoutCardProps {
|
|
title: string;
|
|
calories?: number;
|
|
duration?: number;
|
|
imageSource: any;
|
|
onPress?: () => void;
|
|
}
|
|
|
|
export function WorkoutCard({ title, calories, duration, imageSource, onPress }: WorkoutCardProps) {
|
|
return (
|
|
<TouchableOpacity style={styles.container} onPress={onPress}>
|
|
<ImageBackground
|
|
source={{ uri: imageSource }}
|
|
style={styles.backgroundImage}
|
|
imageStyle={styles.imageStyle}
|
|
>
|
|
<View style={styles.overlay}>
|
|
<View style={styles.content}>
|
|
<View style={styles.textContainer}>
|
|
<Text style={styles.title}>{title}</Text>
|
|
|
|
<View style={styles.statsContainer}>
|
|
{calories !== undefined && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="flame-outline" size={16} color="#fff" />
|
|
<Text style={styles.statText}>{calories} Kcal</Text>
|
|
</View>
|
|
)}
|
|
|
|
{duration !== undefined && (
|
|
<View style={styles.statItem}>
|
|
<Ionicons name="time-outline" size={16} color="#fff" />
|
|
<Text style={styles.statText}>{duration} Min</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
</View>
|
|
|
|
<TouchableOpacity style={styles.playButton}>
|
|
<Ionicons name="play" size={24} color="#000" />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</ImageBackground>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
width: 280,
|
|
height: 170,
|
|
marginRight: 16,
|
|
borderRadius: 20,
|
|
overflow: 'hidden',
|
|
},
|
|
backgroundImage: {
|
|
flex: 1,
|
|
width: '100%',
|
|
height: '100%',
|
|
},
|
|
imageStyle: {
|
|
borderRadius: 20,
|
|
},
|
|
overlay: {
|
|
flex: 1,
|
|
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
|
borderRadius: 20,
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'flex-end',
|
|
padding: 18,
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
},
|
|
title: {
|
|
fontSize: 22,
|
|
fontWeight: 'bold',
|
|
color: '#fff',
|
|
marginBottom: 14,
|
|
lineHeight: 26,
|
|
},
|
|
statsContainer: {
|
|
flexDirection: 'column',
|
|
gap: 6,
|
|
},
|
|
statItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.25)',
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 5,
|
|
borderRadius: 15,
|
|
alignSelf: 'flex-start',
|
|
},
|
|
statText: {
|
|
color: '#fff',
|
|
fontSize: 13,
|
|
fontWeight: '600',
|
|
marginLeft: 4,
|
|
},
|
|
playButton: {
|
|
width: 48,
|
|
height: 48,
|
|
borderRadius: 24,
|
|
backgroundColor: '#A8E866',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
shadowColor: '#000',
|
|
shadowOffset: {
|
|
width: 0,
|
|
height: 3,
|
|
},
|
|
shadowOpacity: 0.3,
|
|
shadowRadius: 5,
|
|
elevation: 6,
|
|
},
|
|
}); |