From a824f2cc7728b67295a21ea83cdd1c522751d1de Mon Sep 17 00:00:00 2001 From: philipcheung Date: Sat, 1 Nov 2025 22:15:42 +0800 Subject: [PATCH] updated --- src/components/new_ui/info.tsx | 65 +++++++++++++++++++--------------- 1 file changed, 36 insertions(+), 29 deletions(-) diff --git a/src/components/new_ui/info.tsx b/src/components/new_ui/info.tsx index b165446..cb5e266 100644 --- a/src/components/new_ui/info.tsx +++ b/src/components/new_ui/info.tsx @@ -9,29 +9,33 @@ interface InfoData { } const infoData: InfoData[] = [ - { - id: 1, - title: '膽固醇\n超標', + { + id: 1, + title: '膽固醇\n超標', image: '/images/new/info_1.webp', - description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。' + description: `長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用嘅煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊堵塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。` }, - { - id: 2, - title: '中央肥胖\n脂肪肝', + { + id: 2, + title: '中央肥胖\n脂肪肝', image: '/images/new/info_2.webp', - description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。' + description: `研究指出，將煎炸油長時間加熱至超過煙點或重複使用，會令油質氧化，產生聚合物及自由基。前者會令油變黏稠、有油膩味，增加肝臟負擔；後者會攻擊細胞，加速身體衰老並提升患上慢性病嘅風險。 +長期攝取呢類油脂，會干擾身體脂肪代謝速度，令過多脂肪積聚喺肝臟，並削弱其解毒功能，令毒素累積喺體內，最終導致脂肪肝。如果肝臟持續受損，可能就會留下永久損傷，最後導致肝硬化。` }, - { - id: 3, - title: '皮膚暗啞\n容易脫髮', + { + id: 3, + title: '皮膚暗啞\n容易脫髮', image: '/images/new/info_3.webp', - description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。' + description: `好多人以為「滴油不沾」先健康，但其實持續 攝取適量又優質嘅油脂，先可以促進毛髮健康生長，同時令皮膚保持彈性同水潤。 + +因為脂肪係製造荷爾蒙嘅重要原素，而脂溶性維他命A、D、E、K亦必須喺有油嘅情況下先可以被吸收，長遠先能真正發揮對皮膚、頭髮同整體健康嘅作用，呈現由內而外嘅自然光澤。` }, - { - id: 4, - title: '經常容易\n覺得疲倦', + { + id: 4, + title: '經常容易\n覺得疲倦', image: '/images/new/info_4.webp', - description: '長期攝取過多飽和脂肪及反式脂肪（例如牛油、加工食品、或重複使用煎炸油），會令體內壞膽固醇（LDL）上升、好膽固醇（HDL）下降，導致膽固醇積聚喺血管內壁，形成血塊塞血管，有機會引致中風、心肌梗塞，甚至心臟病等嚴重後果。' + description: `香港人生活節奏急促，一日三餐唔係叫外賣就出街食，而餐廳普遍使用 Omega-6 偏高嘅食油（如大豆油）。長期攝取會令體內Omega-6遠多於Omega-3，脂肪酸比例失衡，促進身體慢性發炎。 +失衡嘅狀況如果未能得到改善，會慢慢出現容易攰、記憶力下降、專注力不足等情況；若持續惡化，仲可能影響腦部神經傳導，進一步提升患上腦霧及失智症嘅風險。 ` } ] @@ -49,7 +53,7 @@ function Info() { justifyItems={'center'} > - ( setSelectedInfo(info.id)} - bg={selectedInfo === info.id ? '#3D6741' : '#D4D4D4'} + bg={selectedInfo === info.id ? '#3D6741' : '#BCBCBC'} border={selectedInfo === info.id ? "4px solid #99BF35" : "none"} - borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '14px' }} + borderRadius={{ base: '20px', sm: '20px', md: '18px', lg: '16px', xl: '20px' }} display="flex" alignItems="center" justifyContent="center" @@ -82,7 +86,7 @@ function Info() { lineHeight="1.2" transition="all 0.3s ease" px={2} - boxShadow="inset 9px 3px 9px rgba(0,0,0,0.3), inset -3px 3px 6px rgba(0,0,0,0.3), inset 3px -3px 6px rgba(0,0,0,0.3), 4px 4px 10px rgba(0,0,0,0.45)" + boxShadow={info.id === selectedInfo ? "inset 9px 3px 9px rgba(0,0,0,0.25), 4px 4px 10px rgba(0,0,0,0.45)" : info.id === selectedInfo + 1 ? "inset 9px 3px 9px rgba(0,0,0,0.3)" : "none"} > {info.title} @@ -90,24 +94,27 @@ function Info() { info.id === selectedInfo)?.image} w="100%" - transition="all 0.3s ease" + p={5} + /> - +