89 lines
3.1 KiB
TypeScript
89 lines
3.1 KiB
TypeScript
import MemberBgSvg from '@/assets/icons/svg/memberBg.svg';
|
|
import ProTextSvg from '@/assets/icons/svg/proText.svg';
|
|
import GradientText from '@/components/textLinear';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { useRouter } from 'expo-router';
|
|
import { useTranslation } from "react-i18next";
|
|
import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
|
|
import CardBg from './cardBg';
|
|
import IpSvg from './ipSvg';
|
|
|
|
const MemberCard = ({ pro }: { pro: string }) => {
|
|
const { t } = useTranslation();
|
|
const proPng = require("@/assets/images/png/owner/pro.png");
|
|
const width = Dimensions.get("window").width;
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<TouchableOpacity style={[styles.container]} onPress={() => router.push("/rights")}>
|
|
{/* 背景图 */}
|
|
<View style={[styles.cardBg, { opacity: pro === "pro" ? 1 : 0.5 }]}>
|
|
<CardBg pro={pro} date={"2025-09-05"} />
|
|
</View>
|
|
{/* pro标志 */}
|
|
<View style={[styles.proTextContainer, { left: width * 0.08, top: width * 0.07 }]}>
|
|
<ProTextSvg />
|
|
</View>
|
|
{/* 背景板ip */}
|
|
<View style={[styles.ipContainer, { opacity: pro === "pro" ? 1 : 0.5 }]}>
|
|
<IpSvg pro={pro} />
|
|
</View>
|
|
{/* 会员标识 */}
|
|
<View style={[styles.memberContainer, { left: width * 0.25, top: width * 0.1, opacity: 1 }]}>
|
|
<MemberBgSvg />
|
|
<ThemedText style={{ fontSize: 12, color: "#2D3D60", position: "absolute", left: 0, top: 0, bottom: 0, right: 0, textAlign: "center", textAlignVertical: "center" }}>{t("personal:member.goPremium")}</ThemedText>
|
|
</View>
|
|
{/* 解锁更多魔法 */}
|
|
<View style={{ position: "absolute", bottom: width * 0.02, left: -width * 0.01, opacity: pro === "pro" ? 1 : 0.5, width: width * 0.1, flexWrap: "wrap" }}>
|
|
<GradientText
|
|
text={t("personal:member.unlock")}
|
|
width={width * 0.4}
|
|
fontSize={16}
|
|
lineHeight={1.5}
|
|
color={[
|
|
{ offset: "0%", color: "#FF512F" },
|
|
{ offset: "100%", color: "#F09819" }
|
|
]}
|
|
/>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: "relative"
|
|
},
|
|
memberContainer: {
|
|
position: "absolute",
|
|
backgroundColor: "linear-gradient(97.5deg, #FFF3E8 7.16%, #FFFAB9 100.47%)",
|
|
borderRadius: 13.1348,
|
|
},
|
|
proTextContainer: {
|
|
position: "absolute",
|
|
zIndex: 9,
|
|
},
|
|
ipContainer: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
right: 0,
|
|
zIndex: 9
|
|
},
|
|
cardBg: {
|
|
width: "100%",
|
|
alignSelf: "center",
|
|
position: "relative",
|
|
marginRight: 10,
|
|
zIndex: -1,
|
|
},
|
|
dateContainer: {
|
|
position: 'absolute',
|
|
zIndex: 10,
|
|
alignItems: 'flex-end',
|
|
transform: [
|
|
{ rotate: '400deg' }
|
|
],
|
|
},
|
|
});
|
|
|
|
export default MemberCard; |