philip-cat/healthy_oil
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wraning section ui updated

Browse Source
This commit is contained in:
philipcheung
2025-11-01 20:09:45 +08:00
parent d99ea3a8db
commit 78e89d9233
7 changed files with 297 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
src/components/new_ui/wraning.tsx
View File

@@ -1,8 +1,9 @@
import { Box, Image, Stack } from '@chakra-ui/react'
import { Box, Stack, Text, Image } from '@chakra-ui/react'
import CyclingImage from './CyclingImage'
function Wraning() {
const bigWarningSize = { base: "15vw", sm: "15vw", md: "9vw", lg: "7vw", xl: "6vw" };
const midWarningSize = { base: "10vw", sm: "10vw", md: "6vw", lg: "4vw", xl: "4vw" };
const smallWarningSize = { base: "7vw", sm: "7vw", md: "5vw", lg: "3vw", xl: "3vw" };
return (
<Box
position="relative"
@@ -16,8 +17,9 @@ function Wraning() {
<Box
position="relative"
w="100%"
minH={{ base: "170vw", sm: "170vw", md: "70vw", lg: "70vw", xl: "45vw" }}
bgImage={{ base: "url('/images/new/bg_people_mobile.webp')", sm: "url('/images/new/bg_people_mobile.webp')", md: "url('/images/new/bg_people.webp')", lg: "url('/images/new/bg_people.webp')", xl: "url('/images/new/bg_people.webp')" }}
minH={{ base: "163vw", sm: "163vw", md: "75vw", lg: "50vw", xl: "45vw" }}
// bgImage={"url:'/images/new/black_bg.webp'"}
bgImage={{ base: "url('/images/new/wraning_bg_mobile.webp')", sm: "url('/images/new/wraning_bg_mobile.webp')", md: "url('/images/new/wraning_bg.webp')", lg: "url('/images/new/wraning_bg.webp')", xl: "url('/images/new/wraning_bg.webp')" }}
bgSize="cover"
backgroundPosition="center"
justifyItems={'center'}
@@ -25,15 +27,201 @@ function Wraning() {
zIndex={3}
overflow="hidden"
>
<Image
{/* <Image
src="/images/new/bottle.webp"
position="absolute"
top={{ base: "11vw", sm: "14vw", md: "7vw", lg: "8vw", xl: "3.5vw" }}
right={{ base: "43vw", sm: "45vw", md: "48vw", lg: "48vw", xl: "50vw" }}
w={{ base: "15vw", sm: "14vw", md: "8vw", lg: "7vw", xl: "5vw" }}
/>
/> */}
{/* Wraning Sign Images */}
<Box
position={'absolute'}
w={bigWarningSize}
left={{ base: '8vw', sm: '8vw', md: '23vw', lg: '32vw', xl: '30vw' }}
top={{ base: '14vw', sm: '14vw', md: '7vw', lg: '5vw', xl: '4vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={smallWarningSize}
left={{ base: '36vw', sm: '36vw', md: '39vw', lg: '43vw', xl: '43vw' }}
top={{ base: '10vw', sm: '10vw', md: '6vw', lg: '3vw', xl: '2vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={smallWarningSize}
right={{ base: '37vw', sm: '37vw', md: '45vw', lg: '47vw', xl: '47vw' }}
top={{ base: '34vw', sm: '34vw', md: '19vw', lg: '15vw', xl: '12vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={smallWarningSize}
left={{ base: '37vw', sm: '37vw', md: '30vw', lg: '37vw', xl: '37vw' }}
bottom={{ base: '34vw', sm: '34vw', md: '22vw', lg: '13vw', xl: '13vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
<Box
position={'absolute'}
w={midWarningSize}
right={{ base: '37vw', sm: '37vw', md: '35vw', lg: '37vw', xl: '37vw' }}
bottom={{ base: '34vw', sm: '34vw', md: '17vw', lg: '10vw', xl: '10vw' }}
css={{
animation: 'floatSlow 3s ease-in-out infinite',
animationDelay: '0s'
}}
>
<CyclingImage
src="/images/new/bigwarning.webp"
position={'relative'}
w="100%"
cycleDuration={3}
intensity={0.1}
/>
</Box>
{/* title */}
<Stack
position="absolute"
top={{ base: '55vw', sm: '60vw', md: '35vw', lg: '23vw', xl: '20vw' }}
alignItems={'center'}
gap={'1px'}
>
<Text
className="font-melle font-xbold"
fontSize={{ base: '15vw', sm: '15vw', md: '6vw', lg: '5vw', xl: '3.5vw' }}
color={"#FED407"}
>
{'你要注意！'}
</Text>
<Text
className="font-melle font-xbold"
fontSize={{ base: '9vw', sm: '9vw', md: '3.5vw', lg: '2vw', xl: '2vw' }}
color={"#FED407"}
mt={{ base: -5, sm: -7, md: -5, lg: -5, xl: -5 }}
mr={{ base: 3, sm: 3, md: 0, lg: 0, xl: 0 }}
>
{'身體健康響起警號！'}
</Text>
<Text
className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"}
mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }}
mr={4}
>
{'好多時係同'}
</Text>
<Box display="inline" mt={{ base: -2, sm: -5, md: -3, lg: -3, xl: -3 }} mr={4}>
<Text
className="font-melle font-xbold"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"}
display="inline"
>
{'日常飲食習慣'}
</Text>
<Text
className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"}
display="inline"
>
{'有關！'}
</Text>
</Box>
<Text
className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"#FED407"}
mt={{ base: 8, sm: 7, md: 5, lg: 5, xl: 5 }}
mr={4}
>
{'簡單到喺你屋企'}
</Text>
<Image
src="/images/new/wraning_subtitle.webp"
w={{ base: '90vw', sm: '90vw', md: '34vw', lg: '22vw', xl: '22vw' }}
mt={-1}
/>
<Text
className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"}
mt={-3}
mr={4}
>
{'其實已經日積月累'}
</Text>
<Text
className="font-melle font-medium"
fontSize={{ base: '7.5vw', sm: '7.5vw', md: '2.5vw', lg: '1.8vw', xl: '1.8vw' }}
color={"white"}
mt={-3}
mr={4}
>
{'咁影響緊你！'}
</Text>
</Stack>
</Box>
</Stack >
</Box >