127 lines
4.2 KiB
TypeScript
127 lines
4.2 KiB
TypeScript
import type { LayoutChangeEvent } from 'react-native'
|
|
import { LinearGradient } from 'expo-linear-gradient'
|
|
import React, { useRef, useState } from 'react'
|
|
import { Text, View } from 'react-native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { LucideIcon } from '@/components/common/ao'
|
|
import { IconJiaotong } from '@/components/iconfont'
|
|
import { Grid, GridItem } from '@/components/ui/grid'
|
|
import { Progress, ProgressFilledTrack } from '@/components/ui/progress'
|
|
|
|
export default function Money() {
|
|
const insets = useSafeAreaInsets()
|
|
const [gradientHeight, setGradientHeight] = useState(200) // 默认渐变高度
|
|
const gridLayout = useRef({ y: 0, height: 0 })
|
|
const onGridLayout = (e: LayoutChangeEvent) => {
|
|
const { y, height } = e.nativeEvent.layout
|
|
gridLayout.current = { y, height }
|
|
setGradientHeight(y + height / 2 + 16 + insets.top)
|
|
}
|
|
return (
|
|
<View
|
|
className="flex-1 relative bg-white"
|
|
style={{
|
|
paddingTop: insets.top,
|
|
}}
|
|
>
|
|
<LinearGradient
|
|
colors={['#a3f7bf', '#d4f9e2', '#ffffff']}
|
|
locations={[0, 0.85, 1]}
|
|
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 0, y: 1 }}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: gradientHeight,
|
|
zIndex: 0,
|
|
}}
|
|
/>
|
|
|
|
{/* 页面内容 */}
|
|
<View style={{ zIndex: 10, padding: 8 }}>
|
|
<View className="flex flex-row justify-between items-center py-2">
|
|
<View className="flex flex-row items-center gap-2">
|
|
<Text className="font-bold text-base">2025/11/10</Text>
|
|
<LucideIcon icon="CircleChevronDown" size={14} />
|
|
</View>
|
|
<View className="flex flex-row items-center gap-2">
|
|
<LucideIcon icon="SlidersHorizontal" />
|
|
</View>
|
|
</View>
|
|
|
|
<View>
|
|
<View className="flex flex-col items-center">
|
|
<Text className="text-gray-600 text-xs">
|
|
<Text>余额</Text>
|
|
<Text className="text-green-500">↑20%</Text>
|
|
</Text>
|
|
<Text className="font-bold text-xl">
|
|
22313.00
|
|
</Text>
|
|
</View>
|
|
|
|
<View className="flex flex-row justify-between mt-2">
|
|
<View className="flex flex-col items-center">
|
|
<Text className="text-gray-600 text-xs">
|
|
<Text>收入</Text>
|
|
<Text className="text-green-500">↑20%</Text>
|
|
</Text>
|
|
<Text className="text-lg font-bold">11.0</Text>
|
|
</View>
|
|
<View className="flex flex-col items-center">
|
|
<Text className="text-gray-600 text-xs">
|
|
<Text>支出</Text>
|
|
<Text className="text-green-500">↑20%</Text>
|
|
</Text>
|
|
<Text className="text-lg font-bold">11.0</Text>
|
|
</View>
|
|
<View className="flex flex-col items-center">
|
|
<Text className="text-gray-600 text-xs">
|
|
<Text>结余</Text>
|
|
<Text className="text-green-500">↑20%</Text>
|
|
</Text>
|
|
<Text className="text-lg font-bold">11.0</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View className="flex flex-row items-center gap-4 mt-4 ">
|
|
<Text className="text-xs text-gray-600">预算</Text>
|
|
|
|
<View className="flex-1">
|
|
<Progress>
|
|
<ProgressFilledTrack />
|
|
</Progress>
|
|
</View>
|
|
|
|
<Text className="text-xs text-gray-600">点击设置</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<View
|
|
onLayout={onGridLayout}
|
|
className="mt-4 pt-2 pb-2 bg-white rounded-md"
|
|
>
|
|
<Grid
|
|
_extra={{ className: 'grid-cols-5' }}
|
|
>
|
|
{[...Array.from({ length: 5 })].map((_, i) => (
|
|
<GridItem
|
|
key={i}
|
|
className="flex flex-col items-center"
|
|
_extra={{ className: 'col-span-1' }}
|
|
>
|
|
<IconJiaotong size={28} />
|
|
<Text className="text-xs mt-1 text-gray-500">账单</Text>
|
|
</GridItem>
|
|
))}
|
|
</Grid>
|
|
</View>
|
|
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|