feat: 轮播图
This commit is contained in:
parent
fa4092302b
commit
174d78fd91
4
assets/icons/svg/imgTotal.svg
Normal file
4
assets/icons/svg/imgTotal.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="17" cy="6" r="2" fill="#FFB645"/>
|
||||
<path d="M5.22641 11.1447L3.71963 12.4003C3.36576 12.6952 3.18882 12.8426 3.09441 13.0442C3 13.2458 3 13.4761 3 13.9367V16C3 17.8856 3 18.8284 3.58579 19.4142C4.17157 20 5.11438 20 7 20H16C17.8856 20 18.8284 20 19.4142 19.4142C20 18.8284 20 17.8856 20 16V15.8284C20 15.4197 20 15.2153 19.9239 15.0315C19.8478 14.8478 19.7032 14.7032 19.4142 14.4142L19.4142 14.4142L18.3008 13.3008C17.4728 12.4728 17.0588 12.0588 16.5777 11.9137C16.2009 11.8 15.7991 11.8 15.4223 11.9137C14.9412 12.0588 14.5272 12.4728 13.6992 13.3008C13.1138 13.8862 12.8212 14.1788 12.5102 14.2334C12.2685 14.2758 12.0197 14.2279 11.811 14.0988C11.5425 13.9326 11.3795 13.5522 11.0534 12.7913L10.935 12.515C10.1361 10.6509 9.73666 9.71888 8.98531 9.40712C8.79066 9.32635 8.58447 9.27686 8.37436 9.26047C7.56336 9.1972 6.78438 9.84635 5.22641 11.1447Z" fill="#FFB645" stroke="#FFB645" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1021 B |
6
assets/icons/svg/imgTotalWhite.svg
Normal file
6
assets/icons/svg/imgTotalWhite.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g opacity="0.92">
|
||||
<circle cx="17" cy="6.5" r="2" fill="white"/>
|
||||
<path d="M5.22641 11.6447L3.71963 12.9003C3.36576 13.1952 3.18882 13.3426 3.09441 13.5442C3 13.7458 3 13.9761 3 14.4367V16.5C3 18.3856 3 19.3284 3.58579 19.9142C4.17157 20.5 5.11438 20.5 7 20.5H16C17.8856 20.5 18.8284 20.5 19.4142 19.9142C20 19.3284 20 18.3856 20 16.5V16.3284C20 15.9197 20 15.7153 19.9239 15.5315C19.8478 15.3478 19.7032 15.2032 19.4142 14.9142L19.4142 14.9142L18.3008 13.8008C17.4728 12.9728 17.0588 12.5588 16.5777 12.4137C16.2009 12.3 15.7991 12.3 15.4223 12.4137C14.9412 12.5588 14.5272 12.9728 13.6992 13.8008C13.1138 14.3862 12.8212 14.6788 12.5102 14.7334C12.2685 14.7758 12.0197 14.7279 11.811 14.5988C11.5425 14.4326 11.3795 14.0522 11.0534 13.2913L10.935 13.015C10.1361 11.1509 9.73666 10.2189 8.98531 9.90712C8.79066 9.82635 8.58447 9.77686 8.37436 9.76047C7.56336 9.6972 6.78438 10.3464 5.22641 11.6447Z" fill="white" stroke="white" stroke-width="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
8
assets/icons/svg/liveTotal.svg
Normal file
8
assets/icons/svg/liveTotal.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 18V7L18 9L12 10L5 9L3 7V18L9 11.5L13 15L16.5 13L19.5 17.5L21 18Z" fill="#FFB645"/>
|
||||
<path d="M3 17L6.03914 13.4543C7.24119 12.0519 7.84222 11.3507 8.58666 11.2437C8.82846 11.209 9.07458 11.2188 9.31284 11.2727C10.0464 11.4388 10.5896 12.1857 11.676 13.6794L11.9869 14.107C12.2379 14.4521 12.3633 14.6246 12.5031 14.7213C12.8185 14.9396 13.2311 14.9582 13.5649 14.7691C13.7128 14.6854 13.8533 14.5248 14.1342 14.2038V14.2038C14.7172 13.5374 15.0088 13.2043 15.3126 13.0352C15.9993 12.6532 16.846 12.7087 17.4769 13.177C17.7562 13.3842 18.0017 13.7526 18.4929 14.4893L20.5 17.5" stroke="#FFB645" stroke-width="2"/>
|
||||
<path d="M7 9.5V4.5M17 9.5V4.5" stroke="#FFB645" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M3 17V7M21 7V17" stroke="#FFB645" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M17.0198 4.50998C18.6218 4.86883 19.8353 5.38985 20.4812 5.99615C21.127 6.60244 21.1711 7.26189 20.6067 7.87715C20.0424 8.49242 18.8996 9.03091 17.347 9.41315C15.7944 9.79539 13.9143 10.0011 11.9842 10C10.054 9.99886 8.17609 9.79092 6.62756 9.40686C5.07902 9.0228 3.94192 8.48297 3.38408 7.86705C2.82624 7.25112 2.87721 6.59173 3.52947 5.9862C4.18173 5.38067 5.40073 4.86107 7.00654 4.50411" stroke="#FFB645" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M21 17C21 17.7956 20.0518 18.5587 18.364 19.1213C16.6761 19.6839 14.3869 20 12 20C9.61305 20 7.32387 19.6839 5.63604 19.1213C3.94821 18.5587 3 17.7956 3 17" stroke="#FFB645" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,3 +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 width="81" height="33" viewBox="0 0 81 33" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" x="0.248535" y="0.716797" width="80.1118" height="32.0752" rx="16.0376" fill="white"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 179 B After Width: | Height: | Size: 210 B |
3
assets/icons/svg/timeTotal.svg
Normal file
3
assets/icons/svg/timeTotal.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM12 5.5C11.4477 5.5 11 5.94772 11 6.5V11.75C11 12.4404 11.5596 13 12.25 13H15.5C16.0523 13 16.5 12.5523 16.5 12C16.5 11.4477 16.0523 11 15.5 11H13V6.5C13 5.94772 12.5523 5.5 12 5.5Z" fill="#FFB645"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 424 B |
3
assets/icons/svg/timeTotalWhite.svg
Normal file
3
assets/icons/svg/timeTotalWhite.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 0.130859C13.9706 0.130859 18 4.1603 18 9.13086C18 14.1014 13.9706 18.1309 9 18.1309C4.02944 18.1309 0 14.1014 0 9.13086C0 4.1603 4.02944 0.130859 9 0.130859ZM9 2.63086C8.44771 2.63086 8 3.07857 8 3.63086V8.88086C8 9.57122 8.55964 10.1309 9.25 10.1309H12.5C13.0523 10.1309 13.5 9.68314 13.5 9.13086C13.5 8.57857 13.0523 8.13086 12.5 8.13086H10V3.63086C10 3.07857 9.55229 2.63086 9 2.63086Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
3
assets/icons/svg/videoTotal.svg
Normal file
3
assets/icons/svg/videoTotal.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.458 6.625C11.458 7.06787 11.4563 7.50119 11.5039 7.85547C11.5554 8.23848 11.6811 8.67601 12.0439 9.03906C12.407 9.40204 12.8445 9.52756 13.2275 9.5791C13.5819 9.62674 14.015 9.625 14.458 9.625H19.167V15.333C19.167 18.0436 19.1663 19.3991 18.3242 20.2412C17.4822 21.0831 16.1272 21.083 13.417 21.083H9.58301C6.87282 21.083 5.51783 21.0831 4.67578 20.2412C3.83371 19.3991 3.83301 18.0436 3.83301 15.333V7.66699C3.83301 4.95642 3.83371 3.60086 4.67578 2.75879C5.51783 1.91692 6.87282 1.91699 9.58301 1.91699H11.458V6.625ZM10.3857 11.6191C9.5521 11.2096 8.62504 11.9102 8.625 12.9502V15.7998C8.62504 16.8398 9.5521 17.5404 10.3857 17.1309L13.7373 15.4844C14.5875 15.0661 14.5875 13.6839 13.7373 13.2656L10.3857 11.6191ZM13.458 1.92383C13.8295 1.93478 14.0807 1.9657 14.3145 2.0625C14.6667 2.20839 14.9441 2.48511 15.498 3.03906L18.0439 5.58594C18.5976 6.13964 18.8746 6.4165 19.0205 6.76855C19.1173 7.00226 19.1472 7.25364 19.1582 7.625H14.458C13.9586 7.625 13.6843 7.62223 13.4941 7.59668C13.4916 7.59626 13.4888 7.59507 13.4863 7.59473C13.4861 7.59292 13.4856 7.59073 13.4854 7.58887C13.4598 7.39873 13.458 7.12415 13.458 6.625V1.92383Z" fill="#FFB645"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
3
assets/icons/svg/videoTotalWhite.svg
Normal file
3
assets/icons/svg/videoTotalWhite.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="20" viewBox="0 0 16 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.95801 5.08496C7.95801 5.52783 7.95632 5.96115 8.00391 6.31543C8.05544 6.69844 8.18108 7.13597 8.54395 7.49902C8.90701 7.862 9.34448 7.98752 9.72754 8.03906C10.0819 8.0867 10.515 8.08496 10.958 8.08496H15.667V13.793C15.667 16.5035 15.6663 17.8591 14.8242 18.7012C13.9822 19.543 12.6272 19.543 9.91699 19.543H6.08301C3.37282 19.543 2.01783 19.543 1.17578 18.7012C0.333713 17.8591 0.333008 16.5035 0.333008 13.793V6.12695C0.333008 3.41638 0.333713 2.06082 1.17578 1.21875C2.01783 0.376878 3.37282 0.376953 6.08301 0.376953H7.95801V5.08496ZM6.88574 10.0791C6.0521 9.66953 5.12504 10.3702 5.125 11.4102V14.2598C5.12504 15.2997 6.0521 16.0004 6.88574 15.5908L10.2373 13.9443C11.0875 13.526 11.0875 12.1439 10.2373 11.7256L6.88574 10.0791ZM9.95801 0.383789C10.3295 0.394738 10.5807 0.425665 10.8145 0.522461C11.1667 0.668355 11.4441 0.945073 11.998 1.49902L14.5439 4.0459C15.0976 4.5996 15.3746 4.87646 15.5205 5.22852C15.6173 5.46222 15.6472 5.7136 15.6582 6.08496H10.958C10.4586 6.08496 10.1843 6.08219 9.99414 6.05664C9.9916 6.05622 9.98876 6.05503 9.98633 6.05469C9.98606 6.05288 9.9856 6.0507 9.98535 6.04883C9.95983 5.85869 9.95801 5.58411 9.95801 5.08496V0.383789Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -1,5 +1,7 @@
|
||||
import HandersSvg from "@/assets/icons/svg/handers.svg";
|
||||
import UserinfoTotalSvg from "@/assets/icons/svg/userinfoTotal.svg";
|
||||
import ImgTotalSvg from "@/assets/icons/svg/imgTotal.svg";
|
||||
import LiveTotalSvg from "@/assets/icons/svg/liveTotal.svg";
|
||||
import TimeTotalSvg from "@/assets/icons/svg/timeTotal.svg";
|
||||
import VideoTotalSvg from "@/assets/icons/svg/videoTotal.svg";
|
||||
import { Counter, UserCountData } from "@/types/user";
|
||||
import * as React from "react";
|
||||
import { Dimensions, StyleSheet, View, ViewStyle } from "react-native";
|
||||
@ -44,16 +46,18 @@ function CarouselComponent(props: Props) {
|
||||
const totleItem = (data: UserCountData) => {
|
||||
return <View style={styles.container}>
|
||||
{Object?.entries(data)?.filter(([key]) => key !== 'cover_url')?.map((item, index) => (
|
||||
<View style={index === Object?.entries(data)?.length - 2 ? { ...styles.item, borderBottomWidth: 0 } : styles.item} key={index}>
|
||||
<ThemedText style={styles.title}>{item[0]}</ThemedText>
|
||||
<View style={styles.item} key={index}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, width: "75%", overflow: 'hidden' }}>
|
||||
<View style={styles.icon}>
|
||||
{
|
||||
item?.[0]?.includes('video_count') ? <VideoTotalSvg /> : item?.[0]?.includes('photo') ? <ImgTotalSvg /> : item?.[0]?.includes('live') ? <LiveTotalSvg /> : <TimeTotalSvg />
|
||||
}
|
||||
</View>
|
||||
<ThemedText style={styles.title}>{item[0]}</ThemedText>
|
||||
</View>
|
||||
<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>
|
||||
}
|
||||
|
||||
@ -70,7 +74,7 @@ function CarouselComponent(props: Props) {
|
||||
height={width * 0.75}
|
||||
data={carouselDataValue || []}
|
||||
mode="parallax"
|
||||
// defaultIndex={carouselDataValue?.findIndex((item) => item?.key === 'total_count') - 1 || 0}
|
||||
defaultIndex={carouselDataValue?.findIndex((item) => item?.key === 'total_count') - 1 || 0}
|
||||
modeConfig={{
|
||||
parallaxScrollingScale: 1,
|
||||
parallaxScrollingOffset: 160,
|
||||
@ -108,16 +112,22 @@ function CarouselComponent(props: Props) {
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
icon: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 32,
|
||||
padding: 4
|
||||
},
|
||||
container: {
|
||||
backgroundColor: "#FFB645",
|
||||
paddingVertical: 8,
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 16,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
position: 'relative',
|
||||
width: width * 0.6,
|
||||
height: '85%'
|
||||
width: width * 0.7
|
||||
},
|
||||
image: {
|
||||
position: 'absolute',
|
||||
@ -130,23 +140,19 @@ const styles = StyleSheet.create({
|
||||
item: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
paddingVertical: 8,
|
||||
borderBottomColor: '#fff',
|
||||
borderBottomWidth: 1,
|
||||
paddingVertical: 16
|
||||
},
|
||||
title: {
|
||||
color: "#4C320C",
|
||||
fontWeight: "700",
|
||||
fontSize: 14,
|
||||
fontWeight: "500",
|
||||
fontSize: 22,
|
||||
},
|
||||
number: {
|
||||
color: "#fff",
|
||||
fontWeight: "700",
|
||||
fontSize: 32,
|
||||
textAlign: 'right',
|
||||
fontSize: 28,
|
||||
textAlign: 'left',
|
||||
flex: 1,
|
||||
paddingTop: 8
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
import ImgTotalSvg from "@/assets/icons/svg/imgTotalWhite.svg";
|
||||
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 { Image, StyleProp, StyleSheet, View, ViewStyle } from "react-native";
|
||||
import { ThemedText } from "../ThemedText";
|
||||
|
||||
@ -26,7 +30,14 @@ const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
|
||||
<View style={styles.content}>
|
||||
{data.map((item, index) => (
|
||||
<View style={styles.item} key={index}>
|
||||
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', gap: index == 1 ? 12 : 16, flex: 3 }}>
|
||||
<View>
|
||||
{
|
||||
index == 0 ? <VideoTotalSvg width={20} height={20} /> : index == 1 ? <ImgTotalSvg width={24} height={24} /> : index == 2 ? <TimeTotalSvg width={20} height={20} /> : <LiveTotalSvg width={20} height={20} />
|
||||
}
|
||||
</View>
|
||||
<ThemedText style={styles.itemTitle}>{item.title}</ThemedText>
|
||||
</View>
|
||||
<ThemedText style={styles.itemNumber}>{item.number}</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
@ -34,7 +45,6 @@ const CategoryComponent = ({ title, data, bgSvg, style }: CategoryProps) => {
|
||||
<ThemedText style={styles.title}>{title}</ThemedText>
|
||||
<PeopleSvg />
|
||||
</View>
|
||||
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -54,12 +64,13 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
overlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.2)', // 0% 不透明度的黑色
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
||||
backdropFilter: 'blur(5px)',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 40,
|
||||
paddingVertical: 24,
|
||||
justifyContent: 'flex-end',
|
||||
justifyContent: "space-between",
|
||||
flex: 1
|
||||
},
|
||||
titleContent: {
|
||||
@ -72,7 +83,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
title: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
textShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
textShadowOffset: { width: 1, height: 1 },
|
||||
@ -85,17 +96,24 @@ const styles = StyleSheet.create({
|
||||
item: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 8,
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 8,
|
||||
width: '100%',
|
||||
},
|
||||
itemTitle: {
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
marginLeft: 16,
|
||||
flex: 1,
|
||||
},
|
||||
itemNumber: {
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
fontSize: 28,
|
||||
fontWeight: '700',
|
||||
textAlign: 'left',
|
||||
marginLeft: 8,
|
||||
flex: 1
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user