richarjiang
3312250f2d
- 新增教练页面，用户可以与教练进行互动和咨询 - 更新首页，切换到教练 tab 并传递名称参数 - 优化个人信息页面，添加注销帐号和退出登录功能 - 更新隐私政策和用户协议的链接，确保用户在使用前同意相关条款 - 修改今日训练页面标题为“开始训练”，提升用户体验 - 删除不再使用的进度条组件，简化代码结构
87 lines
1.7 KiB
TypeScript
87 lines
1.7 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Image, StyleSheet, Text, View } from 'react-native';
|
|
|
|
type Level = '初学者' | '中级' | '高级';
|
|
|
|
type PlanCardProps = {
|
|
image: string;
|
|
title: string;
|
|
subtitle: string;
|
|
level?: Level;
|
|
};
|
|
|
|
export function PlanCard({ image, title, subtitle, level }: 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>
|
|
</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',
|
|
},
|
|
});
|
|
|
|
|