feat: 样式调整

app/(tabs)/owner.tsx

@@ -97,14 +97,14 @@ export default function OwnerPage() {
                         <MemberCard />
 
                         {/* 分类 */}
-                        <View style={{ marginHorizontal: -16, marginBottom: -16 }}>
+                        <View style={{ marginHorizontal: -16 }}>
                             <CarouselComponent data={userInfoDetails?.material_counter} />
                         </View>
 
                         {/* 作品数据 */}
                         <View className='flex flex-row justify-between gap-[1rem]'>
-                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg />} number={userInfoDetails.stories_count} />
+                            <CreateCountComponent title={t("generalSetting.storiesCreated", { ns: "personal" })} icon={<StoriesSvg width={30} height={30} />} number={userInfoDetails.stories_count} />
-                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg />} number={userInfoDetails.conversations_count} />
+                            <CreateCountComponent title={t("generalSetting.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg width={30} height={30} />} number={userInfoDetails.conversations_count} />
                         </View>
 
                         {/* 排行榜 */}

components/owner/carousel.tsx

@@ -77,7 +77,7 @@ function CarouselComponent(props: Props) {
                 defaultIndex={carouselDataValue?.findIndex((item) => item?.key === 'total_count') - 1 || 0}
                 modeConfig={{
                     parallaxScrollingScale: 1,
-                    parallaxScrollingOffset: 160,
+                    parallaxScrollingOffset: 150,
                     parallaxAdjacentItemScale: 0.7
                 }}
                 renderItem={({ item, index }) => {
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
     },
     container: {
         backgroundColor: "#FFB645",
-        paddingVertical: 16,
+        paddingVertical: 8,
         paddingHorizontal: 16,
         borderRadius: 16,
         display: "flex",
@@ -153,6 +153,7 @@ const styles = StyleSheet.create({
         fontSize: 28,
         textAlign: 'left',
         flex: 1,
+        paddingTop: 8
     }
 })
 

components/owner/category.tsx

@@ -3,9 +3,9 @@ import LiveTotalSvg from "@/assets/icons/svg/liveTotal.svg";
 import PeopleSvg from "@/assets/icons/svg/people.svg";
 import TimeTotalSvg from "@/assets/icons/svg/timeTotalWhite.svg";
 import VideoTotalSvg from "@/assets/icons/svg/videoTotalWhite.svg";
+import { BlurView } from "expo-blur";
 import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { ThemedText } from "../ThemedText";
-
 interface CategoryProps {
     title: string;
     data: { title: string, number: string | number }[];
@@ -25,7 +25,7 @@ const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
                         resizeMode: "cover"
                     }}
                 />
-                <View style={styles.overlay} />
+                <BlurView intensity={10} style={styles.overlay} />
             </View>
             <View style={styles.content}>
                 {data.map((item, index) => (
@@ -64,12 +64,11 @@ const styles = StyleSheet.create({
     },
     overlay: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+        backgroundColor: 'rgba(0, 0, 0, 0.4)',
         backdropFilter: 'blur(5px)',
     },
     content: {
-        paddingHorizontal: 40,
+        padding: 16,
-        paddingVertical: 24,
         justifyContent: "space-between",
         flex: 1
     },
@@ -79,7 +78,6 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         position: 'relative',
         width: '100%',
-        marginTop: 16
     },
     title: {
         color: 'white',
@@ -113,7 +111,8 @@ const styles = StyleSheet.create({
         fontWeight: '700',
         textAlign: 'left',
         marginLeft: 8,
-        flex: 1
+        flex: 1,
+        paddingTop: 8
     }
 });
 

components/owner/createCount.tsx

@@ -10,13 +10,13 @@ interface CreateCountProps {
 const CreateCountComponent = (props: CreateCountProps) => {
     return (
         <View style={styles.container}>
+            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
             <View style={styles.header}>
-                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
                 <View className="mt-1">
                     {props.icon}
                 </View>
+                <ThemedText style={styles.title} className="!text-textSecondary">{props.title}</ThemedText>
             </View>
-            <ThemedText style={styles.number} className="!text-textSecondary">{props.number}</ThemedText>
         </View>
     );
 };
@@ -26,8 +26,8 @@ const styles = StyleSheet.create({
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        alignItems: "flex-start",
+        alignItems: "center",
-        justifyContent: "space-between",
+        justifyContent: "center",
         gap: 8,
         backgroundColor: "#FAF9F6",
         padding: 16,
@@ -45,24 +45,23 @@ const styles = StyleSheet.create({
         width: "100%",
         display: "flex",
         flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
         gap: 8,
-        // 靠左展示
-        textAlign: 'left',
     },
     title: {
-        width: "53%",
+        fontSize: 20,
-        fontSize: 11,
         fontWeight: "700",
         // 允许换行
         flexWrap: "wrap",
     },
     number: {
         fontSize: 32,
-        fontWeight: "700",
+        fontWeight: "400",
         paddingTop: 8,
         width: "100%",
-        // 靠右展示
+        textAlign: "center",
-        textAlign: "right",
+        color: "#4C320C"
     },
 })
 export default CreateCountComponent;

components/owner/rights/memberCard.tsx

@@ -1,138 +1,42 @@
-import ProTextSvg from '@/assets/icons/svg/proText.svg';
+import HandersSvg from '@/assets/icons/svg/handers.svg';
-import RightTopDateSvg from '@/assets/icons/svg/righttopDate.svg';
+import ProSvg from '@/assets/icons/svg/pro.svg';
 import { ThemedText } from '@/components/ThemedText';
 import { useTranslation } from "react-i18next";
-import { StyleSheet, View } from "react-native";
+import { Dimensions, Image, StyleSheet, View } from "react-native";
 
 const MemberCard = () => {
     const { t } = useTranslation();
-
+    const proPng = require("@/assets/images/png/owner/pro.png");
+    const width = Dimensions.get("window").width;
     return (
         <View style={styles.container}>
-            <View style={styles.card}>
+            <Image source={proPng} style={{ width: 330, height: 110, position: "absolute", left: width * 0.5 - 40, bottom: 0, zIndex: 9 }} />
-                <View style={styles.content}>
+            <ProSvg width={"100%"} height={"100%"} style={{ backgroundColor: '#4C320C', borderRadius: 32 }} />
-                    <View style={styles.textContainer}>
+            <HandersSvg style={{ position: "absolute", left: width * 0.5 + 5, bottom: -3, zIndex: 10 }} />
-                        <ProTextSvg />
+            <View style={styles.dateContainer}>
-                        <ThemedText style={styles.subtitle}>{t("personal:generalSetting.unlock")}</ThemedText>
+                <ThemedText style={styles.date}>2025-09-05截止</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({
+    dateContainer: {
+        position: 'absolute',
+        top: 16,
+        right: -15,
+        zIndex: 1,
+        transform: [{ rotate: '40deg' }],
+    },
     date: {
-        fontSize: 12,
+        fontSize: 11,
         fontWeight: 'bold',
         color: '#4C320C',
         padding: 4,
-        transform: [{ rotate: '40deg' }],
-        position: 'absolute',
-        top: 20,
-        right: -38,
     },
     container: {
-        borderRadius: 32,
+        position: "relative",
-        height: 140,
+        height: 120
-    },
-    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,
     },
 });
 

components/owner/userName.tsx

@@ -90,12 +90,11 @@ export default function UserInfo({ userInfo }: { userInfo: UserInfoDetails }) {
                         }}
                         activeOpacity={0.7}
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-                        style={[styles.text, { flex: 1, alignItems: "center", paddingVertical: 6, zIndex: 999 }]}>
+                        style={styles.text}>
                         <SettingSvg />
                     </TouchableOpacity>
                 </View>
             </View>
-
         </View >
     );
 }
@@ -110,5 +109,8 @@ const styles = StyleSheet.create({
         borderRadius: 20,
         padding: 4,
         textAlign: "center",
+        alignItems: "center",
+        paddingVertical: 6,
+        paddingHorizontal: 12
     }
 });