css
This commit is contained in:
parent
d190b7eeeb
commit
900704dc9e
|
|
@ -5,7 +5,6 @@ import { useFocusEffect, useRouter } from 'expo-router'
|
||||||
import { observer } from 'mobx-react-lite'
|
import { observer } from 'mobx-react-lite'
|
||||||
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
import React, { memo, useCallback, useEffect, useMemo, useState } from 'react'
|
||||||
import { ActivityIndicator, RefreshControl } from 'react-native'
|
import { ActivityIndicator, RefreshControl } from 'react-native'
|
||||||
import { useAnimatedStyle } from 'react-native-reanimated'
|
|
||||||
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
||||||
|
|
||||||
import { imgPicker } from '@/@share/apis/imgPicker'
|
import { imgPicker } from '@/@share/apis/imgPicker'
|
||||||
|
|
@ -511,22 +510,29 @@ type TemplateSectionHeaderProps = {
|
||||||
onRandom: () => void
|
onRandom: () => void
|
||||||
}
|
}
|
||||||
const TemplateSectionHeader = memo<TemplateSectionHeaderProps>(function TemplateSectionHeader({ onRandom }) {
|
const TemplateSectionHeader = memo<TemplateSectionHeaderProps>(function TemplateSectionHeader({ onRandom }) {
|
||||||
const style = useAnimatedStyle(() => ({
|
const skewOffset = 8
|
||||||
transform: [{ skewX: '-6deg' }],
|
const padding = 2
|
||||||
backgroundColor: '#FFE500',
|
const buttonWidth = 100
|
||||||
}))
|
const buttonHeight = 32
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Block className="my-[16px]">
|
<Block className="my-[16px]">
|
||||||
<Block className="flex-row items-center justify-between">
|
<Block className="flex-row items-center justify-between">
|
||||||
<Block
|
<Block className="relative" style={{ width: buttonWidth, height: buttonHeight }}>
|
||||||
animated
|
<ParallelogramShape
|
||||||
className="flex-row items-center gap-[8px] border-2 border-black bg-accent px-[12px] py-[4px]"
|
width={buttonWidth}
|
||||||
style={style}
|
height={buttonHeight}
|
||||||
|
fillColor="#FFE500"
|
||||||
|
padding={padding}
|
||||||
|
skewOffset={skewOffset}
|
||||||
|
strokeWidth={2}
|
||||||
>
|
>
|
||||||
|
<Block className="absolute inset-0 flex-row items-center gap-[8px] px-[16px]">
|
||||||
<FontAwesome color="black" name="film" size={16} />
|
<FontAwesome color="black" name="film" size={16} />
|
||||||
<Text className="text-[10px] font-[900] text-black">视频模版</Text>
|
<Text className="text-[10px] font-[900] text-black">视频模版</Text>
|
||||||
</Block>
|
</Block>
|
||||||
|
</ParallelogramShape>
|
||||||
|
</Block>
|
||||||
|
|
||||||
<Block
|
<Block
|
||||||
className="-skew-x-6 items-center justify-center border-2 border-black bg-white px-[8px] py-[4px]"
|
className="-skew-x-6 items-center justify-center border-2 border-black bg-white px-[8px] py-[4px]"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue