139 lines
3.2 KiB
TypeScript
139 lines
3.2 KiB
TypeScript
import ProTextSvg from '@/assets/icons/svg/proText.svg';
|
|
import RightTopDateSvg from '@/assets/icons/svg/righttopDate.svg';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, View } from "react-native";
|
|
|
|
const MemberCard = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<View style={styles.card}>
|
|
<View style={styles.content}>
|
|
<View style={styles.textContainer}>
|
|
<ProTextSvg />
|
|
<ThemedText style={styles.subtitle}>{t("personal:generalSetting.unlock")}</ThemedText>
|
|
</View>
|
|
|
|
</View>
|
|
|
|
<View style={styles.characterContainer}>
|
|
|
|
</View>
|
|
</View>
|
|
<View style={styles.decorativeElements}>
|
|
<View style={styles.righttopData}>
|
|
<RightTopDateSvg width={"150%"} height={74} />
|
|
<ThemedText style={styles.date}>2025-09-25截止</ThemedText>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
date: {
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
color: '#4C320C',
|
|
padding: 4,
|
|
transform: [{ rotate: '40deg' }],
|
|
position: 'absolute',
|
|
top: 20,
|
|
right: -38,
|
|
},
|
|
container: {
|
|
borderRadius: 32,
|
|
height: 140,
|
|
},
|
|
card: {
|
|
flex: 1,
|
|
backgroundColor: '#4C320C',
|
|
borderRadius: 16,
|
|
padding: 16,
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
overflow: 'hidden',
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
justifyContent: 'space-between',
|
|
},
|
|
textContainer: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
title: {
|
|
fontSize: 42,
|
|
fontWeight: 'bold',
|
|
width: '100%',
|
|
textAlign: 'center'
|
|
},
|
|
subtitle: {
|
|
color: '#FFE4A8',
|
|
fontSize: 14,
|
|
marginBottom: 12,
|
|
},
|
|
benefitsContainer: {
|
|
marginTop: 8,
|
|
},
|
|
benefit: {
|
|
color: '#FFF8DE',
|
|
fontSize: 12,
|
|
lineHeight: 20,
|
|
},
|
|
decorativeElements: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
},
|
|
topRightData: {
|
|
position: 'absolute',
|
|
top: -4,
|
|
right: 16,
|
|
zIndex: 0,
|
|
},
|
|
topRightData2: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
right: -16,
|
|
zIndex: 0,
|
|
},
|
|
righttopData: {
|
|
position: 'absolute',
|
|
top: -6,
|
|
right: 20,
|
|
zIndex: 0,
|
|
},
|
|
line: {
|
|
position: 'absolute',
|
|
bottom: 16,
|
|
left: 16,
|
|
right: 16,
|
|
height: 4,
|
|
},
|
|
characterContainer: {
|
|
position: 'absolute',
|
|
right: 0,
|
|
bottom: 0,
|
|
width: 360,
|
|
height: 140,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'flex-end',
|
|
},
|
|
gradient: {
|
|
position: 'absolute',
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
},
|
|
transparentText: {
|
|
opacity: 1,
|
|
},
|
|
});
|
|
|
|
export default MemberCard; |