diff --git a/assets/icons/svg/cardBg.svg b/assets/icons/svg/cardBg.svg index 293927b..c18f285 100644 --- a/assets/icons/svg/cardBg.svg +++ b/assets/icons/svg/cardBg.svg @@ -1,25 +1,26 @@ - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/svg/memberBg.svg b/assets/icons/svg/memberBg.svg new file mode 100644 index 0000000..0eb272e --- /dev/null +++ b/assets/icons/svg/memberBg.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/components/owner/createCount.tsx b/components/owner/createCount.tsx index ab6fae7..ac507bb 100644 --- a/components/owner/createCount.tsx +++ b/components/owner/createCount.tsx @@ -19,13 +19,13 @@ const CreateCountComponent = React.memo((props: CreateCountProps) => { return ( - {props.number} {props.icon} {props.title} + {props.number} ); }); diff --git a/components/owner/rights/cardBg.tsx b/components/owner/rights/cardBg.tsx new file mode 100644 index 0000000..1ce73a7 --- /dev/null +++ b/components/owner/rights/cardBg.tsx @@ -0,0 +1,54 @@ +import Svg, { Defs, LinearGradient, Path, Rect, Stop, Text } from 'react-native-svg'; + +const CardBg = (prop: { pro: string, date: string }) => { + const { pro, date } = prop; + return ( + + {pro === "pro" && } + {pro === "pro" && } + + + + + + {/* 背景色块 */} + {pro === "pro" && } + + {/* 叠加文字 */} + { + pro === "pro" && + {date} + + } + + {/* 渐变定义(放在最后,避免覆盖) */} + + + + + + + + + + + + + + + + + ) +} + +export default CardBg \ No newline at end of file diff --git a/components/owner/rights/ipSvg.tsx b/components/owner/rights/ipSvg.tsx new file mode 100644 index 0000000..01014c5 --- /dev/null +++ b/components/owner/rights/ipSvg.tsx @@ -0,0 +1,68 @@ +import Svg, { Circle, Defs, Ellipse, FeBlend, FeColorMatrix, FeComposite, FeFlood, FeGaussianBlur, FeOffset, Filter, G, Path, Rect } from 'react-native-svg'; + +const IpSvg = (prop: { pro: string }) => { + const { pro } = prop; + return ( + + + {pro === "pro" && + + } + {pro === "pro" && } + {pro === "pro" && } + {pro === "pro" && } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + +export default IpSvg \ No newline at end of file diff --git a/components/owner/rights/memberCard.tsx b/components/owner/rights/memberCard.tsx index 669101f..e579d1b 100644 --- a/components/owner/rights/memberCard.tsx +++ b/components/owner/rights/memberCard.tsx @@ -1,12 +1,12 @@ -import CardBgSvg from '@/assets/icons/svg/cardBg.svg'; +import MemberBgSvg from '@/assets/icons/svg/memberBg.svg'; import ProSecondTextSvg from '@/assets/icons/svg/proSecondText.svg'; import ProTextSvg from '@/assets/icons/svg/proText.svg'; - import { ThemedText } from '@/components/ThemedText'; import { useRouter } from 'expo-router'; import { useTranslation } from "react-i18next"; import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native"; -import Svg, { Circle, Defs, Ellipse, FeBlend, FeColorMatrix, FeComposite, FeFlood, FeGaussianBlur, FeOffset, Filter, G, Path, Rect } from 'react-native-svg'; +import CardBg from './cardBg'; +import IpSvg from './ipSvg'; const MemberCard = ({ pro }: { pro: string }) => { const { t } = useTranslation(); @@ -16,76 +16,24 @@ const MemberCard = ({ pro }: { pro: string }) => { return ( router.push("/rights")}> - - - - {"2025-09-05截止"} - + {/* 背景图 */} + + - + {/* pro标志 */} + - - - - {pro === "pro" && - - } - {pro === "pro" && } - {pro === "pro" && } - {pro === "pro" && } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {/* 背景板ip */} + + + {/* 会员标识 */} + + + {"成为会员"} + + {/* 解锁更多魔法 */} {/* {"解锁更多魔法"} */} @@ -98,10 +46,13 @@ 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", - top: 30, - left: 30, zIndex: 9, }, ipContainer: { @@ -111,7 +62,6 @@ const styles = StyleSheet.create({ zIndex: 9 }, cardBg: { - marginTop: -50, width: "100%", alignSelf: "center", position: "relative", @@ -123,9 +73,7 @@ const styles = StyleSheet.create({ zIndex: 10, alignItems: 'flex-end', transform: [ - { translateX: -45 }, - { rotate: '400deg' }, - { translateX: 45 } + { rotate: '400deg' } ], }, });