feat: 样式调整

2025-07-31 19:23:25 +08:00 · 2025-07-31 19:23:25 +08:00 · 9efa6e7505
commit 9efa6e7505
parent 174d78fd91
7 changed files with 71 additions and 141 deletions
--- a/app/(tabs)/owner.tsx
+++ b/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.conversationsWithMemo", { ns: "personal" })} icon={<ConversationsSvg />} number={userInfoDetails.conversations_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 width={30} height={30} />} number={userInfoDetails.conversations_count} />
                        </View>

                        {/* 排行榜 */}
--- a/assets/icons/svg/pro.svg
+++ b/assets/icons/svg/pro.svg
--- a/components/owner/carousel.tsx
+++ b/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
    }
 })

--- a/components/owner/category.tsx
+++ b/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,
-        paddingVertical: 24,
+        padding: 16,
        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
    }
 });

--- a/components/owner/createCount.tsx
+++ b/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",
-        justifyContent: "space-between",
+        alignItems: "center",
+        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: 11,
+        fontSize: 20,
        fontWeight: "700",
        // 允许换行
        flexWrap: "wrap",
    },
    number: {
        fontSize: 32,
-        fontWeight: "700",
+        fontWeight: "400",
        paddingTop: 8,
        width: "100%",
-        // 靠右展示
-        textAlign: "right",
+        textAlign: "center",
+        color: "#4C320C"
    },
 })
 export default CreateCountComponent;
--- a/components/owner/rights/memberCard.tsx
+++ b/components/owner/rights/memberCard.tsx
@ -1,138 +1,42 @@
-import ProTextSvg from '@/assets/icons/svg/proText.svg';
-import RightTopDateSvg from '@/assets/icons/svg/righttopDate.svg';
+import HandersSvg from '@/assets/icons/svg/handers.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}>
-                <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>
+            <Image source={proPng} style={{ width: 330, height: 110, position: "absolute", left: width * 0.5 - 40, bottom: 0, zIndex: 9 }} />
+            <ProSvg width={"100%"} height={"100%"} style={{ backgroundColor: '#4C320C', borderRadius: 32 }} />
+            <HandersSvg style={{ position: "absolute", left: width * 0.5 + 5, bottom: -3, zIndex: 10 }} />
+            <View style={styles.dateContainer}>
+                <ThemedText style={styles.date}>2025-09-05截止</ThemedText>
            </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,
-        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,
+        position: "relative",
+        height: 120
    },
 });

--- a/components/owner/userName.tsx
+++ b/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
    }
 });