Skip to content

Commit b0eebbf

Browse files
todaymvptodaymvp
committed
foot脚注：2026-06-18 15:58
1 parent 1c2ac6a commit b0eebbf

3 files changed

Lines changed: 422 additions & 86 deletions

File tree

‎src/assets/scss/_optimized-pages.scss‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
// =====================================================
2+
// 关于我们 & 成员专栏：现代卡片式视觉优化
3+
// =====================================================
4+
@use './base/breakpoint' as *;
5+
@use './base/mixins' as *;
6+
7+
// ---- 公共卡片容器 ----
8+
.about-page,
9+
.portfolio-page {
10+
// 给主内容区加一层干净的半透明卡片
11+
.container:not(.page-header .container):not(.py-8):not(.my-24) {
12+
background: rgba(255, 255, 255, 0.85);
13+
backdrop-filter: blur(8px);
14+
border-radius: 1.5rem;
15+
padding: 2.5rem;
16+
margin-top: 2rem;
17+
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.08);
18+
border: 1px solid rgba(0, 0, 0, 0.04);
19+
}
20+
21+
// 暗色模式
22+
.dark & {
23+
.container:not(.page-header .container):not(.py-8):not(.my-24) {
24+
background: rgba(26, 32, 44, 0.9);
25+
border-color: rgba(255, 255, 255, 0.06);
26+
box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
27+
}
28+
}
29+
30+
// 页面主标题下方加一条彩色渐变装饰线
31+
.page-header h1 {
32+
position: relative;
33+
display: inline-block;
34+
padding-bottom: 0.5rem;
35+
&::after {
36+
content: '';
37+
position: absolute;
38+
left: 0;
39+
bottom: 0;
40+
width: 100%;
41+
height: 5px;
42+
background: linear-gradient(90deg,
43+
var(--color-primary, #4f8cc9),
44+
var(--color-secondary, #9b7ed9));
45+
border-radius: 3px;
46+
}
47+
}
48+
49+
// 二级标题左侧彩色竖条装饰
50+
h2 {
51+
font-weight: 700;
52+
margin-top: 2.5rem;
53+
margin-bottom: 1.2rem;
54+
padding-left: 1rem;
55+
border-left: 4px solid var(--color-primary, #4f8cc9);
56+
}
57+
58+
// 段落行高优化
59+
p {
60+
line-height: 1.8;
61+
opacity: 0.9;
62+
}
63+
64+
// 链接颜色
65+
a:not(.button):not(.card) {
66+
color: var(--color-primary, #4f8cc9);
67+
font-weight: 500;
68+
transition: color 0.2s;
69+
&:hover {
70+
color: var(--color-primary-dark, #2b6cb0);
71+
text-decoration: underline;
72+
}
73+
}
74+
}
75+
76+
// ---- 成员列表页专属优化 ----
77+
.portfolio-page {
78+
// 成员卡片悬停动画
79+
.card {
80+
border-radius: 1.25rem;
81+
background: rgba(255, 255, 255, 0.9);
82+
border: 1px solid rgba(0, 0, 0, 0.05);
83+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
84+
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s;
85+
86+
&:hover {
87+
transform: translateY(-6px);
88+
box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.12);
89+
border-color: var(--color-primary-light, #90cdf4);
90+
}
91+
92+
img {
93+
border-radius: 50%;
94+
border: 2px solid rgba(0, 0, 0, 0.05);
95+
transition: border-color 0.3s;
96+
}
97+
&:hover img {
98+
border-color: var(--color-primary, #4f8cc9);
99+
}
100+
101+
blockquote {
102+
font-style: italic;
103+
color: var(--foreground-muted, #718096);
104+
background: rgba(237, 242, 247, 0.5);
105+
padding: 0.5rem 1rem;
106+
border-radius: 0.5rem;
107+
margin-top: 0.75rem;
108+
}
109+
}
110+
111+
// 暗色模式成员卡片
112+
.dark & {
113+
.card {
114+
background: rgba(45, 55, 72, 0.92);
115+
border-color: rgba(255, 255, 255, 0.05);
116+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
117+
&:hover {
118+
border-color: var(--color-primary, #63b3ed);
119+
box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.5);
120+
}
121+
img {
122+
border-color: rgba(255, 255, 255, 0.08);
123+
}
124+
blockquote {
125+
background: rgba(255, 255, 255, 0.05);
126+
color: #a0aec0;
127+
}
128+
}
129+
}
130+
}
131+
132+
// ---- 关于我们右侧卡片（加入我们 / 知识库）微调 ----
133+
.about-page {
134+
.bg-\[var\(--background-color\)\] {
135+
border-radius: 1rem;
136+
padding: 1.5rem;
137+
background: rgba(247, 250, 252, 0.8);
138+
border: 1px solid rgba(0, 0, 0, 0.04);
139+
transition: box-shadow 0.2s;
140+
&:hover {
141+
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
142+
}
143+
}
144+
.dark & {
145+
.bg-\[var\(--background-color\)\] {
146+
background: rgba(45, 55, 72, 0.7);
147+
border-color: rgba(255, 255, 255, 0.06);
148+
}
149+
}
150+
}
151+
152+
// --- 细微增强：让卡片更有层次 ---
153+
.about-page,
154+
.portfolio-page {
155+
.container:not(.page-header .container):not(.py-8):not(.my-24) {
156+
box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.12), 0 4px 10px -4px rgba(0, 0, 0, 0.06);
157+
border: 1px solid rgba(255, 255, 255, 0.7);
158+
}
159+
}
160+
161+
// 成员卡片：增加一点点背景渐变
162+
.portfolio-page .card {
163+
background: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(248,250,252,0.9) 100%);
164+
}
165+
166+
// =====================================================
167+
// 整体页面的色彩点缀（背景、导航、阴影）
168+
// =====================================================
169+
170+
// 1. 关于我们 & 成员页面：整体背景加极淡的蓝紫渐变
171+
.about-page,
172+
.portfolio-page {
173+
// 背景渐变，只在 body 上生效（因为我们把 class 加到了 body）
174+
& {
175+
background: linear-gradient(135deg,
176+
rgba(245, 248, 255, 0.6) 0%,
177+
rgba(255, 255, 255, 1) 30%,
178+
rgba(248, 245, 255, 0.4) 100%);
179+
background-attachment: fixed;
180+
}
181+
182+
// 暗色模式下背景也加一点蓝紫色调
183+
.dark & {
184+
background: linear-gradient(135deg,
185+
rgba(26, 32, 44, 1) 0%,
186+
rgba(30, 35, 50, 1) 50%,
187+
rgba(26, 30, 48, 1) 100%);
188+
}
189+
}
190+
191+
// 2. 导航栏底部加一条极细的彩色装饰线（利用 header 选择器）
192+
.about-page header,
193+
.portfolio-page header {
194+
border-bottom: 2px solid transparent;
195+
border-image: linear-gradient(90deg, #63b3ed, #b794f4) 1;
196+
// 如果 border-image 不生效，则用 box-shadow 模拟
197+
box-shadow: 0 1px 4px rgba(99, 179, 237, 0.15);
198+
}
199+
200+
// 3. 卡片阴影增加蓝紫色微光
201+
.about-page .container:not(.page-header .container):not(.py-8):not(.my-24),
202+
.portfolio-page .card {
203+
box-shadow: 0 8px 24px -8px rgba(79, 140, 201, 0.12),
204+
0 2px 8px -2px rgba(0, 0, 0, 0.04);
205+
}
206+
207+
// 暗色模式下的阴影
208+
.dark .about-page .container:not(.page-header .container):not(.py-8):not(.my-24),
209+
.dark .portfolio-page .card {
210+
box-shadow: 0 8px 24px -8px rgba(99, 179, 237, 0.2),
211+
0 2px 8px -2px rgba(0, 0, 0, 0.3);
212+
}
213+
214+
// =====================================================
215+
// 无文字区域的色彩注入（背景、间隙、页脚）
216+
// =====================================================
217+
218+
// 1. 关于我们 & 成员页面：整体背景使用柔和的蓝紫渐变，消除死白
219+
.about-page,
220+
.portfolio-page {
221+
& {
222+
background: linear-gradient(145deg,
223+
#f8faff 0%,
224+
#ffffff 40%,
225+
#faf8ff 70%,
226+
#f5f3ff 100%);
227+
background-attachment: fixed;
228+
}
229+
230+
// 暗色模式下背景加深，并带蓝紫底调
231+
.dark & {
232+
background: linear-gradient(145deg,
233+
#1a2030 0%,
234+
#1e2538 30%,
235+
#1c2340 70%,
236+
#191e2e 100%);
237+
}
238+
}
239+
240+
// 2. 导航栏下方增加一条更明显的彩色渐变条（贯穿整个页面宽度）
241+
.about-page header::after,
242+
.portfolio-page header::after {
243+
content: '';
244+
display: block;
245+
width: 100%;
246+
height: 3px;
247+
background: linear-gradient(90deg, #63b3ed, #b794f4, #f687b3);
248+
opacity: 0.8;
249+
}
250+
251+
// 3. 页面主内容区之间添加淡彩色的分隔带（section 之间）
252+
.about-page main .narrow,
253+
.portfolio-page main .container:not(.page-header .container) {
254+
position: relative;
255+
&::before {
256+
content: '';
257+
position: absolute;
258+
top: -1.5rem;
259+
left: 5%;
260+
width: 90%;
261+
height: 1px;
262+
background: linear-gradient(90deg, transparent, #63b3ed, #b794f4, transparent);
263+
opacity: 0.4;
264+
}
265+
}
266+
267+
// 4. 页脚区域添加极淡的蓝紫底色，与背景呼应
268+
.about-page footer,
269+
.portfolio-page footer {
270+
background: linear-gradient(0deg, rgba(245,248,255,0.8) 0%, rgba(255,255,255,0) 100%);
271+
border-top: 1px solid rgba(99,179,237,0.15);
272+
padding-top: 2rem;
273+
margin-top: 3rem;
274+
}
275+
.dark .about-page footer,
276+
.dark .portfolio-page footer {
277+
background: linear-gradient(0deg, rgba(26,32,44,0.8) 0%, rgba(30,35,50,0) 100%);
278+
border-top-color: rgba(99,179,237,0.2);
279+
}
280+
281+
// 5. 成员列表页的网格容器增加微妙的彩色间隙光
282+
.portfolio-page .grid {
283+
position: relative;
284+
&::after {
285+
content: '';
286+
position: absolute;
287+
inset: -1rem;
288+
border-radius: 2rem;
289+
background: radial-gradient(circle at 50% 0%, rgba(99,179,237,0.06) 0%, transparent 70%);
290+
pointer-events: none;
291+
z-index: -1;
292+
}
293+
}

0 commit comments

Comments
 (0)