Skip to content

Commit 5719f94

Browse files
dajiangjunokdajiangjunok
committed
refactor: about page
1 parent c802bb6 commit 5719f94

File tree

3 files changed

+254
-179
lines changed

3 files changed

+254
-179
lines changed

‎src/data/about.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
// About 页面数据
2+
export interface HeroImage {
3+
src: string;
4+
alt: string;
5+
}
6+
7+
export interface TimelineItem {
8+
year: string;
9+
title: string;
10+
description: string;
11+
position: 'left' | 'right';
12+
}
13+
14+
export interface Honor {
15+
image: string;
16+
title: string;
17+
date: string;
18+
description: string;
19+
}
20+
21+
// 轮播图片数组
22+
export const heroImages: HeroImage[] = [
23+
{
24+
src: "/img/about/banner.jpeg",
25+
alt: "开源社"
26+
},
27+
{
28+
src: "/img/about/where.webp",
29+
alt: "开源社四大使命"
30+
},
31+
{
32+
src: "/img/about/how.webp",
33+
alt: "开源社的工作"
34+
},
35+
{
36+
src: "/img/about/COSCon.webp",
37+
alt: "中国开源年会"
38+
}
39+
];
40+
41+
// 发展历程数据
42+
export const timelineData: TimelineItem[] = [
43+
{
44+
year: "2014",
45+
title: "开源社成立",
46+
description: "开源社（KAIYUANSHE®）成立，以'贡献、共识、共治'原则组成。与欧洲OSS-Watch合作，提供开源治理工具。",
47+
position: "left"
48+
},
49+
{
50+
year: "2015",
51+
title: "首个年度报告",
52+
description: "发布首版《中国开源生态系统年度报告》，主办Apache中国路演。",
53+
position: "right"
54+
},
55+
{
56+
year: "2016",
57+
title: "加入OSI & 首届COSCon",
58+
description: "加入Open Source Initiative(OSI)，成为首家中国成员。举办首届中国开源年会(COSCon)。",
59+
position: "left"
60+
},
61+
{
62+
year: "2017",
63+
title: "教育组织成立",
64+
description: "执委会下设立开源教育组、高校合作组等专注开源教育的工作组。",
65+
position: "right"
66+
},
67+
{
68+
year: "2018",
69+
title: "开源教育论坛",
70+
description: "在第三届中国开源年会上出品最早的开源教育分论坛。",
71+
position: "left"
72+
},
73+
{
74+
year: "2019",
75+
title: "木兰许可证 & 教育基金",
76+
description: "参与编制首个中英双语国际开源许可证'木兰宽松许可证'。在华东师范大学设立'中国开源软件教育基金'。",
77+
position: "right"
78+
},
79+
{
80+
year: "2020",
81+
title: "开源人宣言 & 开源特训营",
82+
description: "发布《开源人宣言》，推出《开源特训营》视频课程，参与首届'开源之夏'活动。",
83+
position: "left"
84+
},
85+
{
86+
year: "2021",
87+
title: "开源公益计划",
88+
description: "联合腾源会发起'WeOpen Good开源公益计划'，推动用开源技术赋能公益组织。",
89+
position: "right"
90+
},
91+
{
92+
year: "2022",
93+
title: "标准制定参与",
94+
description: "参与木兰开放作品许可证编制、《信息技术 开源 开源项目评估模型参考架构》标准制定。",
95+
position: "left"
96+
},
97+
{
98+
year: "2023",
99+
title: "青少年开源论坛",
100+
description: "在COSCon'23发起国内首个青少年开源论坛。连续参与Open Source Congress。",
101+
position: "right"
102+
},
103+
{
104+
year: "2024",
105+
title: "OpenGood开源公益",
106+
description: "发起'OpenGood开源公益'行动，获评'2024年中国开放科学优秀行动'。参与《开源大模型应用指南1.0》编写。",
107+
position: "left"
108+
},
109+
{
110+
year: "2025",
111+
title: "主权AI圆桌 & 醒源大讲堂",
112+
description: "受邀作为Linux基金会'主权AI圆桌'亚太区代表。发起'醒源大讲堂'系列线上专题讲座。",
113+
position: "right"
114+
}
115+
];
116+
117+
// 荣誉墙数据
118+
export const honorsData: Honor[] = [
119+
{
120+
image: "/img/about/honor-osi.webp",
121+
title: "OSI首家中国成员",
122+
date: "2016年1月",
123+
description: "开源社加入Open Source Initiative(OSI)，成为OSI联盟的首家中国成员"
124+
},
125+
{
126+
image: "/img/about/honor-community.webp",
127+
title: "年度开源社区",
128+
date: "2023年",
129+
description: "获选'开源创新榜单-年度开源社区'，由中国科协科学技术传播中心等联合评选"
130+
},
131+
{
132+
image: "/img/about/honor-mulan.webp",
133+
title: "木兰许可证通过OSI认证",
134+
date: "2020年",
135+
description: "推动木兰宽松许可证MulanPSL v2通过OSI认证，被批准为国际类别开源许可证"
136+
},
137+
{
138+
image: "/img/about/honor-opengood.webp",
139+
title: "中国开放科学优秀行动",
140+
date: "2024年",
141+
description: "OpenGood开源公益行动获评'2024年中国开放科学优秀行动'"
142+
},
143+
{
144+
image: "/img/about/honor-coscon.webp",
145+
title: "最受开发者欢迎技术活动",
146+
date: "连续多年",
147+
description: "COSCon中国开源年会连续多年荣获思否评选的'中国最受开发者欢迎的技术活动'"
148+
},
149+
{
150+
image: "/img/about/honor-sovereign-ai.webp",
151+
title: "主权AI圆桌亚太区代表",
152+
date: "2025年",
153+
description: "受邀作为Linux基金会'主权AI圆桌'的亚太区代表，参与国际议题对话"
154+
}
155+
];

‎src/pages/about/index.module.css‎

Lines changed: 98 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -753,60 +753,79 @@
753753
align-items: center;
754754
}
755755

756-
/* Timeline Mobile Styles */
756+
/* 移动端发展历程 - 全新卡片式布局 */
757757
.timeline {
758758
margin: 2rem 0;
759-
padding: 1rem 0;
759+
padding: 0;
760+
position: relative;
760761
}
761762

763+
/* 移除桌面端的时间轴线 */
762764
.timeline::before {
763-
left: 1.5rem;
764-
width: 1px;
765+
display: none;
765766
}
766767

767768
.timelineItem {
768-
flex-direction: row !important;
769-
align-items: flex-start;
770-
margin-bottom: 2rem;
769+
display: block !important;
770+
margin-bottom: 1.5rem;
771+
position: relative;
771772
}
772773

773774
.timelineContent {
774-
width: calc(100% - 3.5rem);
775-
margin-left: 3.5rem !important;
776-
margin-right: 0 !important;
777-
padding: 1rem;
778-
border-radius: 8px;
775+
width: 100% !important;
776+
margin: 0 !important;
777+
padding: 1.5rem;
778+
border-radius: 16px;
779+
background: white;
780+
border: 2px solid #f0f0f0;
781+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
782+
position: relative;
783+
transition: all 0.3s ease;
784+
}
785+
786+
.timelineContent:hover {
787+
transform: translateY(-4px);
788+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
789+
border-color: #3498db;
779790
}
780791

781-
.timelineContent::before {
782-
left: -15px !important;
783-
border-right-color: #e9ecef !important;
784-
border-left-color: transparent !important;
785-
border-width: 8px;
792+
/* 移除箭头 */
793+
.timelineContent::before,
794+
.timelineContent::after {
795+
display: none;
786796
}
787797

798+
/* 移除圆点 */
788799
.timelineDot {
789-
left: 1.5rem;
790-
width: 12px;
791-
height: 12px;
792-
border-width: 2px;
800+
display: none;
793801
}
794802

795803
.timelineYear {
796-
font-size: 0.8rem;
797-
padding: 0.25rem 0.75rem;
798-
margin-bottom: 0.75rem;
804+
font-size: 1rem;
805+
padding: 0.5rem 1rem;
806+
margin-bottom: 1rem;
807+
display: inline-block;
808+
background: linear-gradient(135deg, #3498db, #2980b9);
809+
color: white;
810+
border-radius: 20px;
811+
font-weight: 700;
812+
letter-spacing: 0.5px;
813+
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
799814
}
800815

801816
.timelineTitle {
802-
font-size: 1.1rem;
803-
margin-bottom: 0.5rem;
804-
line-height: 1.3;
817+
font-size: 1.3rem;
818+
margin-bottom: 0.8rem;
819+
line-height: 1.4;
820+
color: #2c3e50;
821+
font-weight: 700;
805822
}
806823

807824
.timelineDescription {
808-
font-size: 0.9rem;
809-
line-height: 1.5;
825+
font-size: 1rem;
826+
line-height: 1.6;
827+
color: #495057;
828+
margin: 0;
810829
}
811830

812831
/* Honor Carousel Mobile Styles */
@@ -898,44 +917,79 @@
898917
height: 10px;
899918
}
900919

901-
/* Ultra Mobile Timeline Styles */
920+
/* 超小屏幕发展历程 - 保持卡片式布局 */
902921
.timeline {
903922
margin: 1.5rem 0;
904-
padding: 0.5rem 0;
923+
padding: 0;
924+
position: relative;
905925
}
906926

927+
/* 移除桌面端的时间轴线 */
907928
.timeline::before {
908-
left: 1rem;
929+
display: none;
909930
}
910931

911932
.timelineItem {
912-
margin-bottom: 1.5rem;
933+
display: block !important;
934+
margin-bottom: 1.2rem;
935+
position: relative;
913936
}
914937

915938
.timelineContent {
916-
width: calc(100% - 2.5rem);
917-
margin-left: 2.5rem !important;
918-
padding: 0.75rem;
939+
width: 100% !important;
940+
margin: 0 !important;
941+
padding: 1.2rem;
942+
border-radius: 14px;
943+
background: white;
944+
border: 2px solid #f0f0f0;
945+
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
946+
position: relative;
947+
transition: all 0.3s ease;
948+
}
949+
950+
.timelineContent:hover {
951+
transform: translateY(-3px);
952+
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
953+
border-color: #3498db;
954+
}
955+
956+
/* 移除箭头 */
957+
.timelineContent::before,
958+
.timelineContent::after {
959+
display: none;
919960
}
920961

962+
/* 移除圆点 */
921963
.timelineDot {
922-
left: 1rem;
923-
width: 10px;
924-
height: 10px;
964+
display: none;
925965
}
926966

927967
.timelineYear {
928-
font-size: 0.75rem;
929-
padding: 0.2rem 0.5rem;
968+
font-size: 0.85rem;
969+
padding: 0.4rem 0.8rem;
970+
margin-bottom: 0.8rem;
971+
display: inline-block;
972+
background: linear-gradient(135deg, #3498db, #2980b9);
973+
color: white;
974+
border-radius: 16px;
975+
font-weight: 700;
976+
letter-spacing: 0.3px;
977+
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
930978
}
931979

932980
.timelineTitle {
933-
font-size: 1rem;
934-
margin-bottom: 0.4rem;
981+
font-size: 1.1rem;
982+
margin-bottom: 0.6rem;
983+
line-height: 1.3;
984+
color: #2c3e50;
985+
font-weight: 700;
935986
}
936987

937988
.timelineDescription {
938-
font-size: 0.85rem;
989+
font-size: 0.9rem;
990+
line-height: 1.5;
991+
color: #495057;
992+
margin: 0;
939993
}
940994

941995
/* Ultra Mobile Honor Carousel Styles */

0 commit comments

Comments
 (0)