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 @@
+
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 @@
+
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
+ return
{Object?.entries(data)?.filter(([key]) => key !== 'cover_url')?.map((item, index) => (
-
+
{item[0]}
{item[1]}
))}
+
+
+
+
}
@@ -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) => {
{
- {title}
{data.map((item, index) => (
{item.title}
{item.number}
))}
+
+ {title}
+
+
+
);
@@ -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,
}
});