diff --git a/public/images/search-banner.png b/public/images/search-banner.png new file mode 100644 index 0000000..8fb33e5 Binary files /dev/null and b/public/images/search-banner.png differ diff --git a/src/Routes.tsx b/src/Routes.tsx index 7807b20..57245f4 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -24,6 +24,7 @@ import TermsOfUse from "@/pages/Others/TermsOfUse"; import PrivacyPolicy from "@/pages/Others/PrivacyPolicy"; import AuditReport from "@/pages/Others/AuditReport"; import SiteMap from "@/pages/Others/SiteMap"; +import Search from "@/pages/Others/Search"; const routes: RouteObject[] = [ { @@ -55,6 +56,8 @@ const routes: RouteObject[] = [ { path: "join/campus/detail/:id", element: }, // 物业服务 { path: "/property-service", element: }, + // 搜索 + { path: "/search", element: }, // 其它 // 使用条款 隐私保护 审计举报 网站地图 { path: "/terms-of-use", element: }, diff --git a/src/api/mockData.ts b/src/api/mockData.ts index b29976e..77c799b 100644 --- a/src/api/mockData.ts +++ b/src/api/mockData.ts @@ -1,5 +1,6 @@ const mockData = { - companyName: "银泰" + companyName: "银泰", + logo: '/images/logo.png', } diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 9f75a60..757782c 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -125,9 +125,9 @@ export default function Header() {
- + - {/* Cards */} + {/* 首页名片 */}
-
-
-
-
-

可持续发展

-

- 银泰集团积极践行绿色发展理念，将可持续发展融入企业战略与日常运营，致力于构建人与自然和谐共生的美好未来。 -

-
-
-
-
-
-
-

银泰公益基金会

-

- 银泰公益基金会专注于教育帮扶、社区发展等领域，多年来持续投入公益事业，用实际行动回馈社会，传递企业温度。 -

-
-
+ { + cardsData.map((item) => ( +
+
+
+
+

{item.title}

+

+ {item.content} +

+
+
+ )) + }
diff --git a/src/pages/Others/Search.module.css b/src/pages/Others/Search.module.css new file mode 100644 index 0000000..11f4040 --- /dev/null +++ b/src/pages/Others/Search.module.css @@ -0,0 +1,110 @@ +.searchRow { + width: 100%; + height: 288px; + background: #F0F2F4; + display: flex; + + .searchRowInner { + margin: auto; + display: flex; + align-items: center; + gap: 30px; + + .searchRowTitle { + font-weight: bold; + font-size: 24px; + color: #222222; + line-height: 34px; + } + + .searchInputWrapper { + position: relative; + + .searchInput { + width: 600px; + height: 54px; + border: 1px solid #333333; + + font-weight: 400; + font-size: 18px; + color: #222222; + line-height: 24px; + outline: none; + padding: 0 20px; + } + + .searchKeyword { + position: absolute; + margin-top: 20px; + font-size: 24px; + color: #222222; + + .searchKeywordKeyword { + color: #14355C; + } + } + + + } + + .searchBtn { + width: 128px; + height: 54px; + background: #14355C; + border-radius: 0px 0px 0px 0px; + outline: none; + + font-weight: 400; + font-size: 24px; + color: #FFFFFF; + cursor: pointer; + } + } +} + + +.searchItemList { + display: flex; + flex-direction: column; + gap: 50px; + .searchItem { + display: flex; + flex-direction: column; + gap: 20px; + height: 160px; + border-bottom: 1px solid #D8D8D8; + + .searchItemTitleRow { + display: flex; + align-items: center; + justify-content: space-between; + + .searchItemTitle { + font-size: 24px; + color: #222222; + font-weight: 700; + } + + .searchItemCreateTime { + font-weight: 400; + font-size: 16px; + color: #999999; + line-height: 22px; + } + + } + + .searchItemContent { + font-weight: 400; + font-size: 18px; + color: #333333; + line-height: 30px; + /* 2行文本超出省略 */ + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + } + } +} \ No newline at end of file diff --git a/src/pages/Others/Search.tsx b/src/pages/Others/Search.tsx new file mode 100644 index 0000000..b2567fe --- /dev/null +++ b/src/pages/Others/Search.tsx @@ -0,0 +1,91 @@ +import Banner from "@/components/Banner"; +import Section from "@/components/layout/Section"; +import styles from "./Search.module.css"; +import { useCallback, useState } from "react"; +import { dateFormat } from "@/utils"; +type SearchData = { + id: number; + title: string; + content: string; + createTime: string; +} + +export default function Search() { + const [searched, setSearched] = useState(false); + const [searchKeyword, setSearchKeyword] = useState(''); + const [total, setTotal] = useState(0); + const [searchData, setSearchData] = useState([]); + const handleSearch = useCallback(() => { + setSearched(true); + setSearchData([ + { + id: 1, + title: '中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态', + content: '中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。', + createTime: '2025-11-25' + }, + { + id: 2, + title: '中共中央举行新闻发布会解读党的十九届五中全会精神_党建动态', + content: '中国共产党第十九届中央委员会第五次全体会议，于2020年10月26日至29日在北京举行。全会审议通过了《中共中央关于制定国民经济和社会发展第十四个五年规划和二〇三五年远景目标的建议》。', + createTime: '2025-11-25' + }, + ]) + }, [searchKeyword]); + return ( +
+ + +
+
+ 关键词 +
+ setSearchKeyword(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + handleSearch(); + } + }} + /> + { + searched && ( +
搜索： + {searchKeyword} 共 + {total} + 个结果 +
+ ) + } +
+ +
+
+ +
+
+ { + searchData.map((item => ( +
+
+ {item.title} + {dateFormat(item.createTime, 'yyyy年MM月dd日')} +
+
{item.content}
+
+ ))) + } +
+
+
+ ); +} + + diff --git a/src/utils/index.ts b/src/utils/index.ts index 1b05bd7..b47fb09 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -5,4 +5,28 @@ export const debounce = (func: (...args: any[]) => void, delay: number) => { clearTimeout(timeout); timeout = setTimeout(() => func(...args), delay); }; +}; + +/** + * 日期转换字符串 + * @param date 日期 或 日期字符串:2026-03-05 10:00:00 + * @param format 格式 yyyy-MM-dd HH:mm:ss 或者 yyyy年MM月dd日 或 yyyy-MM + * @returns 日期字符串 + */ +export const dateFormat = (date: Date | string, format: string) => { + const d = typeof date === 'string' ? new Date(date) : date; + if (Number.isNaN(d.getTime())) return ''; + const year = d.getFullYear(); + const month = String(d.getMonth() + 1).padStart(2, '0'); + const day = String(d.getDate()).padStart(2, '0'); + const hours = String(d.getHours()).padStart(2, '0'); + const minutes = String(d.getMinutes()).padStart(2, '0'); + const seconds = String(d.getSeconds()).padStart(2, '0'); + return format + .replace('yyyy', String(year)) + .replace('MM', month) + .replace('dd', day) + .replace('HH', hours) + .replace('mm', minutes) + .replace('ss', seconds); }; \ No newline at end of file