diff --git a/assets/icons/svg/cardBg.svg b/assets/icons/svg/cardBg.svg
new file mode 100644
index 0000000..293927b
--- /dev/null
+++ b/assets/icons/svg/cardBg.svg
@@ -0,0 +1,25 @@
+
\ No newline at end of file
diff --git a/assets/icons/svg/pro.svg b/assets/icons/svg/pro.svg
index b0500e0..0380f08 100644
--- a/assets/icons/svg/pro.svg
+++ b/assets/icons/svg/pro.svg
@@ -1,25 +1,59 @@
-
+
\ No newline at end of file
diff --git a/assets/icons/svg/proSecondText.svg b/assets/icons/svg/proSecondText.svg
new file mode 100644
index 0000000..f6718ae
--- /dev/null
+++ b/assets/icons/svg/proSecondText.svg
@@ -0,0 +1,10 @@
+
diff --git a/components/owner/rights/memberCard.tsx b/components/owner/rights/memberCard.tsx
index 1aa9109..669101f 100644
--- a/components/owner/rights/memberCard.tsx
+++ b/components/owner/rights/memberCard.tsx
@@ -1,9 +1,12 @@
-import HandersSvg from '@/assets/icons/svg/handers.svg';
-import ProSvg from '@/assets/icons/svg/pro.svg';
+import CardBgSvg from '@/assets/icons/svg/cardBg.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, Image, StyleSheet, TouchableOpacity, View } from "react-native";
+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';
const MemberCard = ({ pro }: { pro: string }) => {
const { t } = useTranslation();
@@ -12,65 +15,118 @@ const MemberCard = ({ pro }: { pro: string }) => {
const router = useRouter();
return (
-
-
-
-
-
- 2025-09-05截止
+ router.push("/rights")}>
+
+
+
+ {"2025-09-05截止"}
+
-
- {
- pro === "Pro"
- ?
- null :
- {
- router.push('/rights');
- }}
- activeOpacity={0.7}
- hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
- style={styles.proText}
- >
- {t("personal:generalSetting.goPremium")}
-
- }
-
-
-
+
+
+
+
+
+
+
+ {/* {"解锁更多魔法"} */}
+
+
+
);
};
const styles = StyleSheet.create({
- proText: {
- fontSize: 10,
- fontWeight: 'bold',
- color: '#4C320C',
- padding: 4,
- paddingHorizontal: 8,
- borderRadius: 16,
- backgroundColor: '#fff',
- position: 'absolute',
+ container: {
+ position: "relative"
+ },
+ proTextContainer: {
+ position: "absolute",
top: 30,
- left: 90,
- opacity: 0.7
+ left: 30,
+ zIndex: 9,
+ },
+ ipContainer: {
+ position: "absolute",
+ bottom: 0,
+ right: 0,
+ zIndex: 9
+ },
+ cardBg: {
+ marginTop: -50,
+ width: "100%",
+ alignSelf: "center",
+ position: "relative",
+ marginRight: 10,
+ zIndex: -1,
},
dateContainer: {
position: 'absolute',
- top: 16,
- right: -15,
- zIndex: 1,
- transform: [{ rotate: '40deg' }],
- },
- date: {
- fontSize: 11,
- fontWeight: 'bold',
- color: '#4C320C',
- padding: 4,
- },
- container: {
- position: "relative",
- height: 120
+ zIndex: 10,
+ alignItems: 'flex-end',
+ transform: [
+ { translateX: -45 },
+ { rotate: '400deg' },
+ { translateX: 45 }
+ ],
},
});