bowong
/
expo-duooomi-app
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css

This commit is contained in:
郭文文 2026-01-29 11:58:45 +08:00
parent dba5fd7795
commit 9979c00d14
1 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/(tabs)/sync.tsx
View File

@ -853,31 +853,43 @@ const SelectionBar = memo(
const FABButtons = memo(({ onGenAgain, handleSync }: { onGenAgain: () => void; handleSync: () => void }) => {
const insets = useSafeAreaInsets()
const buttonHeight = 56
const skewOffset = 8 // 统一所有平行四边形的倾斜角度
const padding = 2
// 计算按钮宽度：父容器宽度（screenWidth - 32）减去间距（12px）后平分
const buttonWidth = useMemo(() => (screenWidth - 16 * 2 - 12) / 2, [])
return (
<Block className="absolute inset-x-[16px] bottom-[96px] z-40" style={{ paddingBottom: insets.bottom }}>
<Block className="w-full flex-row gap-[12px]">
<Block className="flex-1 -skew-x-6 shadow-large-black">
<Block
className={cn`relative h-[56px] items-center justify-center overflow-hidden border-[2px] border-black bg-[#e61e25] shadow-large-accent`}
onClick={onGenAgain}
>
<Block className="z-10 skew-x-6 flex-row items-center gap-[8px]">
<MaterialCommunityIcons color="white" name="star-four-points" size={20} />
<Text className="font-[bol]d text-[16px] text-white">再次生成</Text>
</Block>
</Block>
<Block className="flex-1 relative" style={{ height: buttonHeight }} onClick={onGenAgain}>
<ParallelogramShape
width={buttonWidth}
height={buttonHeight}
fillColor="#FFFFFF"
padding={padding}
skewOffset={skewOffset}
>
<Block className="absolute inset-0 z-10 flex-row items-center justify-center gap-[8px]">
<MaterialCommunityIcons color="black" name="star-four-points" size={20} />
<Text className="font-bold text-[16px] text-black">再次生成</Text>
</Block>
</ParallelogramShape>
</Block>
<Block className="flex-1 -skew-x-6 shadow-large-accent">
<Block
className={cn`relative h-[56px] items-center justify-center overflow-hidden border-[2px] border-black bg-black`}
onClick={handleSync}
>
<Block className="z-10 flex-row items-center gap-[8px]">
<Ionicons color={'white'} name="refresh" size={20} />
<Text className={cn`font-[bol]d bg-black text-[16px] text-white`}>同步</Text>
</Block>
</Block>
<Block className="flex-1 relative" style={{ height: buttonHeight }} onClick={handleSync}>
<ParallelogramShape
width={buttonWidth}
height={buttonHeight}
fillColor="#FFE500"
padding={padding}
skewOffset={skewOffset}
>
<Block className="absolute inset-0 z-10 flex-row items-center justify-center gap-[8px]">
<Ionicons color="black" name="refresh" size={20} />
<Text className="font-bold text-[16px] text-black">同步</Text>
</Block>
</ParallelogramShape>
</Block>
</Block>
</Block>