From 1a2caab7e4252a12d6e87aae80dbd71c94980bd4 Mon Sep 17 00:00:00 2001
From: jinyaqiu <jinyaqiu@fairclip.cn>
Date: Tue, 22 Jul 2025 11:01:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=BD=AE=E6=92=AD=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/icons/svg/people.svg        |  3 ++
 assets/icons/svg/userinfoTotal.svg | 45 ++++++++++++++++++++++++++++++
 components/owner/carousel.tsx      | 27 ++++++++++++++----
 components/owner/category.tsx      | 36 +++++++++++++++++-------
 4 files changed, 96 insertions(+), 15 deletions(-)
 create mode 100644 assets/icons/svg/people.svg
 create mode 100644 assets/icons/svg/userinfoTotal.svg

diff --git a/assets/icons/svg/people.svg b/assets/icons/svg/people.svg
new file mode 100644
index 0000000..db2a291
--- /dev/null
+++ b/assets/icons/svg/people.svg
@@ -0,0 +1,3 @@
+<svg width="140" height="32" viewBox="0 0 140 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="140" height="32" rx="16" fill="#FFB645" fill-opacity="0.2"/>
+</svg>
diff --git a/assets/icons/svg/userinfoTotal.svg b/assets/icons/svg/userinfoTotal.svg
new file mode 100644
index 0000000..21718fe
--- /dev/null
+++ b/assets/icons/svg/userinfoTotal.svg
@@ -0,0 +1,45 @@
+<svg width="403" height="135" viewBox="0 0 403 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_2610_1468" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="403" height="135">
+<rect width="403" height="135" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2610_1468)">
+<path d="M162.293 51.3874C165.003 47.9968 172.492 55.1223 175.897 59.1089L163.363 60.1427C160.856 59.0426 159.582 54.7779 162.293 51.3874Z" fill="#FFDBA3"/>
+<path d="M164.084 52.7696C166.036 49.7687 170.582 55.3988 172.611 58.589L166.409 58.9204C164.82 58.1206 162.132 55.7706 164.084 52.7696Z" fill="#AC7E35"/>
+<path d="M242.275 51.3874C239.565 47.9968 232.077 55.1223 228.671 59.1089L241.205 60.1427C243.712 59.0426 244.986 54.7779 242.275 51.3874Z" fill="#FFDBA3"/>
+<path d="M240.487 52.7696C238.535 49.7687 233.989 55.3988 231.96 58.589L238.162 58.9204C239.75 58.1206 242.439 55.7706 240.487 52.7696Z" fill="#AC7E35"/>
+<path d="M107.996 103.821C149.775 31.4558 254.225 31.4559 296.004 103.821L324.502 153.179C366.282 225.544 314.057 316 230.497 316H173.503C89.9431 316 37.7184 225.544 79.4981 153.179L107.996 103.821Z" fill="#FFD18A"/>
+<path d="M196.064 69.1265C196.176 67.9873 195.281 67 194.137 67C192.992 67 192.097 67.9873 192.209 69.1265L192.437 71.4418C192.523 72.3163 193.258 72.9829 194.137 72.9829C195.015 72.9829 195.751 72.3163 195.837 71.4418L196.064 69.1265Z" fill="#4C320C"/>
+<path d="M210.769 69.1265C210.881 67.9873 209.986 67 208.842 67C207.697 67 206.802 67.9873 206.914 69.1265L207.142 71.4418C207.228 72.3163 207.963 72.9829 208.842 72.9829C209.72 72.9829 210.456 72.3163 210.542 71.4418L210.769 69.1265Z" fill="#4C320C"/>
+<path d="M140.736 142.883C170.285 99.9274 233.716 99.9274 263.265 142.883L296.918 191.806C330.855 241.142 295.535 308.307 235.654 308.307H168.347C108.466 308.307 73.1464 241.142 107.083 191.806L140.736 142.883Z" fill="#FFF8DE"/>
+<g filter="url(#filter0_i_2610_1468)">
+<ellipse cx="261.402" cy="108.682" rx="70.0855" ry="50" fill="#FFF8DE"/>
+</g>
+<g filter="url(#filter1_i_2610_1468)">
+<ellipse cx="142.17" cy="108.682" rx="69.6581" ry="50" fill="#FFF8DE"/>
+</g>
+<ellipse cx="201.572" cy="83.8953" rx="5.12821" ry="3.84615" transform="rotate(180 201.572 83.8953)" fill="#FFB8B9"/>
+<path d="M200.833 88.1688C201.162 87.599 201.984 87.599 202.313 88.1688L203.053 89.4508C203.382 90.0206 202.971 90.7329 202.313 90.7329H200.833C200.175 90.7329 199.764 90.0206 200.093 89.4508L200.833 88.1688Z" fill="#4C320C"/>
+</g>
+<defs>
+<filter id="filter0_i_2610_1468" x="183.624" y="58.6816" width="147.863" height="102.564" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="-7.69231" dy="2.5641"/>
+<feGaussianBlur stdDeviation="7.05128"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713726 0 0 0 0 0.270588 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2610_1468"/>
+</filter>
+<filter id="filter1_i_2610_1468" x="72.5122" y="58.6816" width="147.863" height="100" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="8.54701"/>
+<feGaussianBlur stdDeviation="4.70086"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.713974 0 0 0 0 0.272498 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_2610_1468"/>
+</filter>
+</defs>
+</svg>
diff --git a/components/owner/carousel.tsx b/components/owner/carousel.tsx
index 0b6ff1e..1d5b9e9 100644
--- a/components/owner/carousel.tsx
+++ b/components/owner/carousel.tsx
@@ -1,3 +1,5 @@
+import HandersSvg from "@/assets/icons/svg/handers.svg";
+import UserinfoTotalSvg from "@/assets/icons/svg/userinfoTotal.svg";
 import { Counter, UserCountData } from "@/types/user";
 import * as React from "react";
 import { Dimensions, StyleSheet, View, ViewStyle } from "react-native";
@@ -46,13 +48,17 @@ function CarouselComponent(props: Props) {
     }
 
     const totleItem = (data: UserCountData) => {
-        return <View style={[styles.container]}>
+        return <View style={styles.container}>
             {Object?.entries(data)?.filter(([key]) => key !== 'cover_url')?.map((item, index) => (
-                <View style={styles.item} key={index}>
+                <View style={index === Object?.entries(data)?.length - 2 ? { ...styles.item, borderBottomWidth: 0 } : styles.item} key={index}>
                     <ThemedText style={styles.title}>{item[0]}</ThemedText>
                     <ThemedText style={styles.number}>{item[1]}</ThemedText>
                 </View>
             ))}
+            <View style={styles.image}>
+                <UserinfoTotalSvg />
+                <View style={{ position: 'absolute', bottom: -5, right: 0, left: 0, justifyContent: 'center', alignItems: 'center' }}><HandersSvg /></View>
+            </View>
         </View>
     }
 
@@ -110,14 +116,26 @@ const styles = StyleSheet.create({
         borderRadius: 16,
         display: "flex",
         flexDirection: "column",
-        justifyContent: "space-between",
         height: '100%',
+        position: 'relative',
+    },
+    image: {
+        position: 'absolute',
+        bottom: 0,
+        right: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
     },
     item: {
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "space-between",
-        paddingVertical: 8
+        paddingVertical: 12,
+        borderBottomColor: '#fff',
+        borderBottomWidth: 1,
     },
     title: {
         color: "#4C320C",
@@ -130,7 +148,6 @@ const styles = StyleSheet.create({
         fontSize: 32,
         textAlign: 'right',
         flex: 1,
-        paddingTop: 8
     }
 })
 
diff --git a/components/owner/category.tsx b/components/owner/category.tsx
index f3f79ce..2f91fa2 100644
--- a/components/owner/category.tsx
+++ b/components/owner/category.tsx
@@ -1,3 +1,4 @@
+import PeopleSvg from "@/assets/icons/svg/people.svg";
 import { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { ThemedText } from "../ThemedText";
 
@@ -13,7 +14,7 @@ const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
         <View style={[styles.container, style]}>
             <View style={styles.backgroundContainer}>
                 <Image
-                    source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/animals.png')}
+                    source={bgSvg !== "" && bgSvg !== null ? { uri: bgSvg } : require('@/assets/images/png/owner/people.png')}
                     style={{
                         width: "100%",
                         height: "100%",
@@ -23,13 +24,17 @@ const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
                 <View style={styles.overlay} />
             </View>
             <View style={styles.content}>
-                <ThemedText style={styles.title}>{title}</ThemedText>
                 {data.map((item, index) => (
                     <View style={styles.item} key={index}>
                         <ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
                         <ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
                     </View>
                 ))}
+                <View style={styles.titleContent}>
+                    <ThemedText style={styles.title}>{title}</ThemedText>
+                    <PeopleSvg />
+                </View>
+
             </View>
         </View>
     );
@@ -49,37 +54,48 @@ const styles = StyleSheet.create({
     },
     overlay: {
         ...StyleSheet.absoluteFillObject,
-        backgroundColor: 'rgba(0, 0, 0, 0.4)', // 0% 不透明度的黑色
+        backgroundColor: 'rgba(0, 0, 0, 0.2)', // 0% 不透明度的黑色
     },
     content: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        justifyContent: 'space-between',
+        paddingHorizontal: 40,
+        paddingVertical: 24,
+        justifyContent: 'flex-end',
         flex: 1
     },
-    title: {
+    titleContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative',
         width: '100%',
-        textAlign: "center",
+        marginTop: 16
+    },
+    title: {
         color: 'white',
         fontSize: 16,
         fontWeight: '700',
         textShadowColor: 'rgba(0, 0, 0, 0.5)',
         textShadowOffset: { width: 1, height: 1 },
         textShadowRadius: 2,
+        position: 'absolute',
+        textAlign: 'center',
+        width: '100%',
+        zIndex: 1,
     },
     item: {
         flexDirection: 'row',
         alignItems: 'center',
+        paddingVertical: 8,
         justifyContent: 'space-between',
     },
     itemTitle: {
         color: 'white',
-        fontSize: 10,
+        fontSize: 14,
         fontWeight: '700',
     },
     itemNumber: {
         color: 'white',
-        fontSize: 10,
+        fontSize: 14,
     }
 });