diff --git a/public/img/newsPage_banner.png b/public/img/newsPage_banner.png new file mode 100644 index 0000000..55d225c Binary files /dev/null and b/public/img/newsPage_banner.png differ diff --git a/public/img/newsPage_banner@2x.png b/public/img/newsPage_banner@2x.png new file mode 100644 index 0000000..b3b606b Binary files /dev/null and b/public/img/newsPage_banner@2x.png differ diff --git a/src/components/common/news_items.tsx b/src/components/common/news_items.tsx index 955cbaa..b9cb11d 100644 --- a/src/components/common/news_items.tsx +++ b/src/components/common/news_items.tsx @@ -2,32 +2,35 @@ import Image from "next/image"; import Link from "next/link"; import { useTranslation } from "next-i18next"; import myStyles from "@/styles/about.module.css"; +import newsStyles from "@/styles/news.module.css"; function NewsItems(props: { id: string; title: string; date: string; - image: string; + thumbnail: string; contents: string; }) { const { t } = useTranslation("common"); const newsLink = `/news/${props.id}`; - //const localeDate = new Date(props.date).toLocaleDateString("zh-TW"); - const newsImg = t(`${props.image}`); + const localeDate = new Date(props.date).toLocaleDateString("zh-TW"); + const newsImg = t(`${props.thumbnail}`); //todo: Link url.format return (
-
-
+
+
news1
-

{t(`${props.title}`)}

- -
-

{t(`${props.contents}`)}

+
+

{t(`${props.title}`)}

+ +
+

{t(`${props.contents}`)}

+
diff --git a/src/components/common/news_list.tsx b/src/components/common/news_list.tsx index ae430e5..f0b09f6 100644 --- a/src/components/common/news_list.tsx +++ b/src/components/common/news_list.tsx @@ -1,12 +1,14 @@ -import myStyles from "@/styles/about.module.css"; import NewsItems from "./news_items"; -import { dummyNewsData } from "@/interfaces/news_detail"; +import { getAllNews } from "@/interfaces/news_detail"; +import myStyles from "@/styles/about.module.css"; +import newsStyles from "@/styles/news.module.css"; -function NewsList(max = 4) { - const newsData = dummyNewsData; - if (max > 6) { +function NewsList(props: { max: number }) { + const newsData = getAllNews(); + if (props.max > 6) { newsData.splice(4); } + const newsList = newsData.map((v) => { return ( ); }); - return
{newsList}
; + return
{newsList}
; } export default NewsList; diff --git a/src/components/faq/faqItems.tsx b/src/components/faq/faqItems.tsx index d786662..f920e5a 100644 --- a/src/components/faq/faqItems.tsx +++ b/src/components/faq/faqItems.tsx @@ -2,7 +2,11 @@ import { useState } from "react"; import { useTranslation } from "next-i18next"; import myStyles from "@/styles/faq.module.css"; -function FAQItems(props: { question: string; answer: string }) { +function FAQItems(props: { + question: string; + answer: string; + //faqStyle: string; +}) { const { t } = useTranslation("common"); const [showAns, setShowAns] = useState(false); diff --git a/src/components/news/newsBody.tsx b/src/components/news/newsBody.tsx new file mode 100644 index 0000000..90a5ea7 --- /dev/null +++ b/src/components/news/newsBody.tsx @@ -0,0 +1,38 @@ +import Image from "next/legacy/image"; +import Link from "next/link"; +import { useTranslation } from "next-i18next"; +import myStyles from "@/styles/news.module.css"; + +function NewsBody(props: { + title: string; + date: string; + image: string; + contents: string; +}) { + const { t } = useTranslation("common"); + + return ( +
+
+ {props.title} +
+
+

{props.title}

+ +
+

{props.contents}

+
+
+ + + +
+ ); +} + +export default NewsBody; diff --git a/src/components/techology/techologyItems.tsx b/src/components/techology/techologyItems.tsx index 997a5f5..e05c609 100644 --- a/src/components/techology/techologyItems.tsx +++ b/src/components/techology/techologyItems.tsx @@ -17,8 +17,8 @@ function TechnologyItems(props: { {t(`${props.title}`)}
diff --git a/src/interfaces/news_detail.ts b/src/interfaces/news_detail.ts index cf90da0..84610b8 100644 --- a/src/interfaces/news_detail.ts +++ b/src/interfaces/news_detail.ts @@ -2,6 +2,7 @@ export interface INewsDetail { id: string; title: string; date: string; + thumbnail: string; //縮圖 image: string; contents: string; } @@ -10,31 +11,35 @@ export const dummyNewsData: INewsDetail[] = [ { id: "n001", title: "News1", - date: "2023-2-15", - image: "/img/news/Placement Area.png", + date: "2023-02-15", + thumbnail: "/img/news/Placement Area.png", + image: "/img/news/Placement Area@2x.png", contents: "內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介內容簡介", }, { id: "n002", title: "News2", - date: "2023-2-1", - image: "/img/news/Placement Area2.png", + date: "2023-02-01", + thumbnail: "/img/news/Placement Area2.png", + image: "/img/news/Placement Area2@2x.png", contents: "起一個班種臺，科一電。眼員圖、學多約全是今相到知候健，出小而候現傳確持在試入球受公詩步於……卻常說車進兒交看這病據因門工是事自了拉，門媽說帶上山。陽空前教樂，人運教在了高居吸開行一完學，導訴怎上了，前相年酒演音生不不雖男數中的票分數心形能格人引實修。", }, { id: "n003", title: "News3", - date: "2023-1-1", - image: "/img/news/Placement Area3.png", + date: "2023-01-01", + thumbnail: "/img/news/Placement Area3.png", + image: "/img/news/Placement Area3@2x.png", contents: "新年快樂。", }, { id: "n004", title: "News4", date: "2022-12-14", - image: "/img/news/Placement Area4.png", + thumbnail: "/img/news/Placement Area4.png", + image: "/img/news/Placement Area4@2x.png", contents: "公臺足健北知天大天生，和生法；代排近全。刻施顧：果本年長認子畫好之屋以從門家雙院品立禮小小熱星國的空沒而麗看色客文能定。再的雖電出也大後，非未中級小案：屋事雙大，大力放業。己怕不，手是因看適是體；過後樂要試以個害共自間行法民數女想；高雄落不紅許怕物聽異是為境在決玩個媽報開室致羅商這人權的再麼奇喜體是活接空法銀千了笑面業！多主一選有……義線習孩未到爾些可、指愛象黨計料樣，直早先，步於間大力然大。裡我印賽此是山留但數們好變合個之似為兩部子學上班地陽，辦員待色想人望朋民空之口。早親有牛位奇說那；起學為導境。師動該平及費統業服本我家怎出個一、一資好的機遊來大兩精，不主不主三理詩引的組氣兩電，的金小狀回果一是長紀那的上八第面，了間了頭原的哥少遠年專安間一過，響開了年！什會運。防重題地考直年有中登基和。標及體公了金熱其品現不市充學士的風本清一於那用門車思列一創師我坐時之進總。上電們馬的，哥計氣無做我下屋。", }, @@ -42,7 +47,8 @@ export const dummyNewsData: INewsDetail[] = [ id: "n005", title: "News5", date: "2022-11-11", - image: "/img/news/Placement Area.png", + thumbnail: "/img/news/Placement Area.png", + image: "/img/news/Placement Area@2x.png", contents: "量山己他分開節文。人外雖麼這旅德他就；為紅類是覺……我流內不為金防：維女兒沒讓於，地言車日待灣需資大黨空要人縣過間……主要備作我良是會病護。遊園走這成方星了，件告然生期計狀……導價。", }, @@ -50,7 +56,8 @@ export const dummyNewsData: INewsDetail[] = [ id: "n006", title: "News6", date: "2022-10-30", - image: "/img/news/Placement Area4.png", + thumbnail: "/img/news/Placement Area4.png", + image: "/img/news/Placement Area4@2x.png", contents: "而且不犯的而我覺親友，樣的繼續狀況我就很，不喜歡只有的目標大的習慣男性⋯我沒好可愛什麼有，一大我們在⋯就想不好的看加上店機前好像到一？了想⋯真的之類的，家的感覺然還是找不就⋯太的不重要也想聲天下想像中願意，美麗拿到的聲：的他搞的裡有如果第一次。是一吸引望了，是兩個，麼也沒無法覺得很，成沒每次要的自⋯預告還是有天可以知道，的工作了不少，多多指前陣子果是，天下間完全不，要一真是太沒有被為，想到的看看出來每次還。", }, @@ -58,8 +65,18 @@ export const dummyNewsData: INewsDetail[] = [ id: "n007", title: "News7", date: "2022-10-26", - image: "/img/news/Placement Area3.png", + thumbnail: "/img/news/Placement Area3.png", + image: "/img/news/Placement Area3@2x.png", contents: "能媽說上表離作我；年向幾驗太受……覺友燈那活本其識！只車大要會在仍花念年被深善領行畫示國子主二麼現資施！", }, ]; + +export function getAllNews() { + return dummyNewsData; +} + +export function getNewsById(id: string) { + const news = dummyNewsData.find((news) => news.id === id); + return news || dummyNewsData[0]; +} diff --git a/src/locales/en/common.json b/src/locales/en/common.json index 2083908..2c70b0d 100644 --- a/src/locales/en/common.json +++ b/src/locales/en/common.json @@ -95,6 +95,11 @@ "question4": "如何下載安裝 Bolt？", "answer4": "詳細內容放置於此" }, + "news": { + "title": "News", + "seeMore": "See More", + "goBack": "Go Back" + }, "contactForm": { "title": "Contact Us", "name": "Name", diff --git a/src/locales/zh-TW/common.json b/src/locales/zh-TW/common.json index b465320..e5650d3 100644 --- a/src/locales/zh-TW/common.json +++ b/src/locales/zh-TW/common.json @@ -95,6 +95,11 @@ "question4": "如何下載安裝 Bolt？", "answer4": "詳細內容放置於此" }, + "news": { + "title": "最新消息", + "seeMore": "更多文章", + "goBack": "返回上頁" + }, "contactForm": { "title": "聯絡我們", "name": "姓名", diff --git a/src/pages/about_bolt.tsx b/src/pages/about_bolt.tsx index 33ef805..3106dc8 100644 --- a/src/pages/about_bolt.tsx +++ b/src/pages/about_bolt.tsx @@ -21,7 +21,7 @@ function AboutBoltPage() {

{t("about.news.title")}

- + 查看更多 diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx index 73f0360..56ac96a 100644 --- a/src/pages/faq.tsx +++ b/src/pages/faq.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { useTranslation } from "next-i18next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import myStyles from "@/styles/faq.module.css"; @@ -7,9 +8,22 @@ import { getFaqData } from "contents"; function FAQPage() { const { t } = useTranslation("common"); + //const [showAnsIndex, setShowAnsIndex] = useState(null); + //const clickHandler = () => setShowAnsIndex(); + + //const faqBlockStyles = showAns ? myStyles.faq_showAns : myStyles.faq_hideAns; + //const answerTextStyles = showAns ? myStyles.showAnswer : myStyles.hideAnswer; + const faqData = getFaqData(); const faqList = faqData.map((v) => { - return ; + return ( + + ); }); return ( diff --git a/src/pages/news/[newsId].tsx b/src/pages/news/[newsId].tsx index 7b4acdb..cb5b007 100644 --- a/src/pages/news/[newsId].tsx +++ b/src/pages/news/[newsId].tsx @@ -1,9 +1,48 @@ import { useRouter } from "next/router"; +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import { getNewsById } from "@/interfaces/news_detail"; +import myStyles from "@/styles/news.module.css"; +import NewsBody from "@/components/news/newsBody"; function NewsDetailPage() { + const { t } = useTranslation("common"); + const router = useRouter(); const { newsId } = router.query; - return

Post: {newsId}

; + if (!newsId) { + return <>; + } + + const news = getNewsById(newsId as string); + + return ( +
+ +
+ ); } + export default NewsDetailPage; + +export const getStaticPaths = async () => { + return { + paths: [{ params: { newsId: "" } }], + fallback: true, + }; +}; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + // Will be passed to the page component as props + }, + }; +} diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx index 471a6ba..c8e32f3 100644 --- a/src/pages/news/index.tsx +++ b/src/pages/news/index.tsx @@ -1,8 +1,28 @@ +import { useTranslation } from "next-i18next"; +import { serverSideTranslations } from "next-i18next/serverSideTranslations"; +import NewsList from "@/components/common/news_list"; +import myStyles from "@/styles/news.module.css"; + function AllNewsPage() { + const { t } = useTranslation("common"); + return ( -
-

This is All news page

+
+
+

{t("news.title")}

+
+ +
); } export default AllNewsPage; + +export async function getStaticProps({ locale }: any) { + return { + props: { + ...(await serverSideTranslations(locale, ["common"])), + // Will be passed to the page component as props + }, + }; +} diff --git a/src/styles/about.module.css b/src/styles/about.module.css index 114cebe..1e1cb0a 100644 --- a/src/styles/about.module.css +++ b/src/styles/about.module.css @@ -117,12 +117,18 @@ align-items: center; } -.newsitem_ticket h3 { +.newsitem_textbox { + display: flex; + flex-direction: column; + align-items: center; +} + +.newsitem_textbox h3 { font: normal normal normal 28px/45px Noto Sans TC; margin: 0.5rem; } -.newsitem_ticket time, +.newsitem_textbox time, .newsitem_contentbox p { font: normal normal normal 14px/23px Noto Sans TC; } diff --git a/src/styles/faq.module.css b/src/styles/faq.module.css index ca2c2fc..1ab23b6 100644 --- a/src/styles/faq.module.css +++ b/src/styles/faq.module.css @@ -1,5 +1,4 @@ .faq_main_container { - padding: 10rem 10rem 6rem 10rem; min-height: 100vh; display: flex; flex-direction: column; @@ -8,8 +7,8 @@ } .faq_main_container h1 { - font: normal normal normal 48px/78px Noto Sans TC; - color: #707070; + font: normal normal normal 36px/78px Noto Sans TC; + color: #3a3b4d; } .faq_items_container { @@ -32,15 +31,10 @@ border-bottom: 1px solid gainsboro; } -.faq_block h4 { - font: normal normal normal 28px/45px Noto Sans TC; -} - .faq_showAns h4::after, .faq_hideAns h4::after { content: ""; float: right; - margin-top: 10px; display: block; width: 17px; height: 17px; @@ -78,3 +72,26 @@ .hideAnswer { height: 0; } + +/* 螢幕寬度小於 992px 時 */ +@media screen and (max-width: 992px) { + .faq_main_container { + padding: 10rem 1rem 6rem 1rem; + } +} + +/* 螢幕寬度大於 992.1px 時 */ +@media screen and (min-width: 992.1px) { + .faq_main_container { + padding: 10rem 10rem 6rem 10rem; + } + + .faq_block h4 { + font: normal normal normal 28px/45px Noto Sans TC; + } + + .faq_showAns h4::after, + .faq_hideAns h4::after { + margin-top: 10px; + } +} diff --git a/src/styles/navbar.module.css b/src/styles/navbar.module.css index a560c3d..4149fc9 100644 --- a/src/styles/navbar.module.css +++ b/src/styles/navbar.module.css @@ -6,6 +6,7 @@ font-size: medium; padding: 1rem 5rem 1rem 5rem; position: fixed; + border-bottom: 0.5px solid #f8fafa; z-index: 100; } diff --git a/src/styles/news.module.css b/src/styles/news.module.css new file mode 100644 index 0000000..307292d --- /dev/null +++ b/src/styles/news.module.css @@ -0,0 +1,154 @@ +/* all news */ +.news_main_container { + padding: 5rem 0 6rem 0; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #f8fafa; + color: #3a3b4d; +} + +.news_main_banner { + width: 100%; + height: 450px; + background: url("/img/newsPage_banner.png") no-repeat top center / cover; + display: flex; + align-items: center; + justify-content: center; +} + +.news_main_banner h1 { + font: normal normal 36px/58px Noto Sans TC; +} + +/* news detail */ +.news_detail_container { + padding: 10rem 6rem 6rem 6rem; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + background: linear-gradient(180deg, #3a3b4d 500px 40%, #f8fafa 40%); +} + +/* news body */ +.news_body_container { + width: 80vw; + background-color: #f8fafa; + display: flex; + flex-direction: column; + align-items: center; + color: #3a3b4d; +} + +.news_body_imgbox { + background-color: #3a3b4d; + width: 100%; + height: 600px; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.news_body_textbox { + width: 100%; + margin-top: 5rem; + display: flex; + flex-direction: column; +} + +.news_body_textbox h1 { + font: normal normal normal 48px/78px Noto Sans TC; + text-align: center; +} + +.news_body_textbox time { + font: normal normal normal 14px/23px Barlow; + text-align: center; +} + +.news_contents p { + padding: 3rem; + font: normal normal normal 14px/23px Barlow; + text-align: left; +} + +.goBackBtn button { + padding: 10px; + width: 120px; + background-color: #31d3f5; + border: 1px solid #31d3f5; + border-radius: 23px; + color: #3a3b4d; + font: normal normal 18px/26px Noto Sans TC; + letter-spacing: 0.09px; + cursor: pointer; + transition: all 0.1s ease-in; +} + +.goBackBtn button:hover { + background-color: transparent; + color: #31d3f5; +} + +/* news list */ +.newslist_container { + padding: 5rem; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +/* news items */ +.newsitem_ticket { + width: 100%; + display: flex; + align-items: center; + margin-bottom: 1.5rem; +} + +.newsitem_imgbox { + display: flex; + align-items: center; + justify-content: center; +} + +.newsitem_textbox { + width: 100%; + margin-left: 3rem; + color: #3a3b4d; +} + +.newsitem_textbox h3 { + font: normal normal normal 28px/45px Noto Sans TC; +} + +.newsitem_textbox time, +.newsitem_contentbox p { + font: normal normal normal 14px/23px Barlow; +} + +.newsitem_textbox time { + float: right; +} + +.newsitem_contentbox p { + padding-right: 3rem; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; +} + +/* 螢幕寬度小於 992px 時 */ +@media screen and (max-width: 992px) { +} + +/* 螢幕寬度大於 992.1px 時 */ +@media screen and (min-width: 992.1px) { +} diff --git a/src/styles/privacy.module.css b/src/styles/privacy.module.css index 75957a8..f4cfc63 100644 --- a/src/styles/privacy.module.css +++ b/src/styles/privacy.module.css @@ -8,7 +8,7 @@ } .privacy_main_container h1 { - font: normal normal normal 48px/78px Noto Sans TC; + font: normal normal normal 36px/78px Noto Sans TC; color: #3a3b4d; } diff --git a/src/styles/technology.module.css b/src/styles/technology.module.css index 7f362a4..16a5cc6 100644 --- a/src/styles/technology.module.css +++ b/src/styles/technology.module.css @@ -6,7 +6,7 @@ } .tech_main_container h1 { - font: normal normal medium 36px/58px Noto Sans TC; + font: normal normal 36px/58px Noto Sans TC; color: #3a3b4d; }