From 066766305877c003472180769881f0b64ff0ff68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=83=E6=BC=A2=E8=BB=92?= Date: Wed, 12 Jun 2024 22:56:40 +0800 Subject: [PATCH] Implmenet: Marquee --- src/assets/news.json | 109 +++++++++++++++++++++++++++++++++++ src/component/Marquee.tsx | 28 +++++++++ src/component/Topics.tsx | 3 +- src/index.css | 32 +++++++++++ src/layout/RootLayout.tsx | 6 +- src/page/News.tsx | 116 +++++--------------------------------- 6 files changed, 188 insertions(+), 106 deletions(-) create mode 100644 src/assets/news.json create mode 100644 src/component/Marquee.tsx diff --git a/src/assets/news.json b/src/assets/news.json new file mode 100644 index 0000000..71a2a75 --- /dev/null +++ b/src/assets/news.json @@ -0,0 +1,109 @@ +[ + { + "people": "簡嘉頤、林妍蓁、劉宜蓁", + "description": "榮獲 2024 尋找資安女婕思（資安組）- 第二名", + "time": "2024.04.27" + }, + { + "people": "吳奕萱、何穎宣、莊于潔", + "description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作", + "time": "2024.04.27" + }, + { + "people": "李佳軒、黄湘婷、陳欣霈", + "description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作", + "time": "2024.04.27" + }, + { + "people": "林星主、李子儀、詹採晴", + "description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作", + "time": "2024.04.27" + }, + { + "people": "胡瑀涵、歐佳昀、黃曉筠", + "description": "榮獲 2024 尋找資安女婕思（資安組）- 佳作", + "time": "2024.04.27" + }, + { + "people": "吳奕萱、何穎宣、莊于潔、李佳軒、黄湘婷、陳欣霈、簡嘉頤、林妍蓁、劉宜蓁、胡瑀涵、歐佳昀、黃曉筠、林星主、李子儀、詹採晴", + "description": "晉級 2024 尋找資安女婕思（資安組）決賽", + "extraDescription": "（晉級率 15/21 = 71%）", + "time": "2024.04.16" + }, + { + "people": "白又銘、郭思彤", + "description": "榮獲第 54 屆全國技能競賽（北區分區-青年組）網路安全職類第二名", + "time": "2024.03.30" + }, + { + "people": "李昆積、張家維", + "description": "晉級 2024 AIS3 EOF 攻防競賽決賽", + "time": "2024.01.21" + }, + { + "people": "李昆積、林幸慧", + "description": "錄取 TeamT5 Security Camp 2024 資安培訓營", + "time": "2024.12.14" + }, + { + "people": "黃漢軒", + "description": "錄取 國立清華大學 資訊安全研究所、國立陽明交通大學 資訊安全研究所", + "time": "2024.12.14" + }, + { + "people": "顏柏耀、張家維、許貽昇", + "description": "通過 112 年 iPAS 初級資訊安全工程師鑑定", + "time": "2023.12.05" + }, + { + "people": "張家維、顏柏耀", + "description": "榮獲 2023 T 貓盃全國資安基礎實務能力競賽 - 佳作", + "time": "2023.11.23" + }, + { + "people": "陳勝舢", + "description": "榮獲 DEVCORE 戴夫寇爾 獎學金資格", + "time": "2023.10.18" + }, + { + "people": "李昆積、李子儀、吳奕萱、何穎宣、莊于潔", + "description": "錄取 2023 AIS3 新型態資安實務主題課程", + "time": "2023.07.07" + }, + { + "people": "陳勝舢", + "description": "榮任第 53 屆全國技能競賽暨國手選拔賽青年組「網路安全」職類解說技術顧問", + "time": "2023.06.17" + }, + { + "people": "張君瑋、郭丞軒、呂凱達、林蔚、林星主、林正峰、林威立、吳承諺、王育嵐、林承孝、洪嘉璘、劉柏鑫、盧岳劭、温淇淼、黃柏喆、吳威勝、楊子毅、李之正、邱凡洺、何亞翰、李昆積、陳雅音、江柔萱", + "description": "通過 112 年 iPAS 初級資訊安全工程師鑑定", + "extraDescription": "（課程同學通過率 23/37 = 62%）", + "time": "2023.06.16" + }, + { + "people": "陸詠涵、陳佳均、陳琴蓮", + "description": "榮獲 2023 尋找資安女婕思（資安組）- 優勝", + "time": "2023.04.16" + }, + { + "people": "吳奕萱、何穎宣、莊于潔", + "description": "榮獲 2023 尋找資安女婕思（資安組）- 佳作", + "time": "2023.04.16" + }, + { + "people": "張洸銘", + "description": "榮獲 2023 AIS3 EOF攻防競賽 特別獎 - 蟒蛇專家獎", + "time": "2023.02.13" + }, + { + "people": "陳勝舢", + "description": "錄取 TeamT5 Security Camp 2023 資安培訓營", + "time": "2022.12.13" + }, + { + "people": "陳勝舢", + "description": "榮獲 AIS3 新型態資安暑期課程最佳專題獎", + "time": "2022.07.31" + } +] \ No newline at end of file diff --git a/src/component/Marquee.tsx b/src/component/Marquee.tsx new file mode 100644 index 0000000..b2ff53e --- /dev/null +++ b/src/component/Marquee.tsx @@ -0,0 +1,28 @@ +import news from "../assets/news.json" + +export function Marquee(){ + return ( +
+
+
+ { + news.map((data) => { + return <> +

賀！{data.people} {data.description}

+
+ + }) + } + { + news.map((data) => { + return <> +

賀！{data.people} {data.description}

+
+ + }) + } +
+
+
+ ) +} \ No newline at end of file diff --git a/src/component/Topics.tsx b/src/component/Topics.tsx index 963f37a..f135e85 100644 --- a/src/component/Topics.tsx +++ b/src/component/Topics.tsx @@ -4,8 +4,7 @@ export function Topics(props: { }){ return (

- {props.topic}: - {props.description} + {props.topic}: {props.description}

) } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 42df453..e787ac1 100644 --- a/src/index.css +++ b/src/index.css @@ -150,4 +150,36 @@ a { .activities td { padding: 1.25rem; +} + +.marquee-container { + height: 100%; /* Adjust this to fit your desired height */ + overflow: hidden; + position: relative; +} + +.marquee-content { + display: flex; + flex-direction: column; + position: absolute; + top: 100%; + animation: scroll 150s linear infinite; +} + +.marquee-container:hover .marquee-content { + animation-play-state: paused; +} + +.marquee-content p { + font-size: calc(0.6rem + .3vw) !important; + color: #cf2e2e +} + +@keyframes scroll { + 0% { + transform: translateY(0%); + } + 100% { + transform: translateY(-100%); + } } \ No newline at end of file diff --git a/src/layout/RootLayout.tsx b/src/layout/RootLayout.tsx index c0c32f6..a34adb4 100644 --- a/src/layout/RootLayout.tsx +++ b/src/layout/RootLayout.tsx @@ -3,6 +3,7 @@ import { Outlet } from "react-router-dom"; import { Header } from "../component/Header"; import { Navbar } from "../component/Navbar"; import Logo from "../assets/logo.png" +import { Marquee } from "../component/Marquee"; export function RootLayout(){ return ( @@ -21,8 +22,9 @@ export function RootLayout(){
-
-
公告
+
+
公告
+ diff --git a/src/page/News.tsx b/src/page/News.tsx index c2ea68b..14d491a 100644 --- a/src/page/News.tsx +++ b/src/page/News.tsx @@ -1,3 +1,5 @@ +import news from "../assets/news.json" + export function News(){ const NewsItem = (props: { @@ -30,108 +32,18 @@ export function News(){ 歡迎寄信與我聯繫：cysun@ntut.edu.tw
- - - - - - - - - - - - - - - - - - - - + { + news.map((data) => { + return ( + + ) + }) + }