Skip to content

Commit d486ca6

Browse files
liyupiliyupi
committed
前端优化 - 优化整个网站的页面风格
1 parent 9a3118c commit d486ca6

File tree

11 files changed

+1471
-650
lines changed

11 files changed

+1471
-650
lines changed

‎coder-test-frontend/.cursor/rules/custom-rule.mdc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
---
2+
description: 禁止帮我使用 Sword 图标，Element Plus 中不存在这个图标，如果需要使用，替换为 KnifeFork
3+
alwaysApply: false
4+
---

‎coder-test-frontend/src/App.vue‎

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,110 @@ onMounted(async () => {
2121
</script>
2222

2323
<style>
24+
25+
:root {
26+
/* 古朴配色方案 */
27+
--primary-sand: #D2B48C; /* 沙黄色主色 */
28+
--primary-brown: #8B7355; /* 棕褐色主色 */
29+
--secondary-sand: #F5DEB3; /* 浅沙色 */
30+
--secondary-brown: #A0522D; /* 深棕色 */
31+
--accent-gold: #DAA520; /* 金色强调 */
32+
--accent-copper: #B87333; /* 铜色强调 */
33+
34+
/* 中性色 */
35+
--text-primary: #3C2415; /* 深棕色文字 */
36+
--text-secondary: #6B5B47; /* 中棕色文字 */
37+
--text-muted: #8B7D6B; /* 浅棕色文字 */
38+
--bg-primary: #FAF7F0; /* 主背景色 */
39+
--bg-secondary: #F5F1E8; /* 次背景色 */
40+
--bg-card: #FEFCF7; /* 卡片背景 */
41+
42+
/* 边框和阴影 */
43+
--border-light: #E8DCC6; /* 浅色边框 */
44+
--border-medium: #D2B48C; /* 中色边框 */
45+
--shadow-light: rgba(139, 115, 85, 0.1);
46+
--shadow-medium: rgba(139, 115, 85, 0.2);
47+
--shadow-heavy: rgba(139, 115, 85, 0.3);
48+
}
49+
2450
* {
2551
margin: 0;
2652
padding: 0;
2753
box-sizing: border-box;
2854
}
2955
3056
body {
31-
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
32-
background-color: #f5f7fa;
57+
font-family: 'Source Han Serif SC', 'Noto Serif CJK SC', 'SimSun', '宋体', 'Times New Roman', serif;
58+
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
59+
color: var(--text-primary);
60+
line-height: 1.6;
3361
}
3462
3563
#app {
3664
min-height: 100vh;
3765
display: flex;
3866
flex-direction: column;
67+
background:
68+
radial-gradient(circle at 20% 80%, rgba(210, 180, 140, 0.1) 0%, transparent 50%),
69+
radial-gradient(circle at 80% 20%, rgba(139, 115, 85, 0.1) 0%, transparent 50%);
3970
}
4071
4172
.app-content {
4273
flex: 1;
4374
}
75+
76+
/* 全局按钮样式 */
77+
.el-button {
78+
border-radius: 6px !important;
79+
font-family: inherit !important;
80+
font-weight: 500 !important;
81+
letter-spacing: 0.5px !important;
82+
transition: all 0.3s ease !important;
83+
}
84+
85+
.el-button--primary {
86+
background: linear-gradient(135deg, var(--primary-brown) 0%, var(--secondary-brown) 100%) !important;
87+
border: 2px solid var(--primary-brown) !important;
88+
box-shadow: 0 4px 12px var(--shadow-medium) !important;
89+
}
90+
91+
.el-button--primary:hover {
92+
background: linear-gradient(135deg, var(--secondary-brown) 0%, var(--primary-brown) 100%) !important;
93+
transform: translateY(-2px) !important;
94+
box-shadow: 0 6px 20px var(--shadow-heavy) !important;
95+
}
96+
97+
.el-button--default {
98+
background: var(--bg-card) !important;
99+
border: 2px solid var(--border-medium) !important;
100+
color: var(--text-primary) !important;
101+
}
102+
103+
.el-button--default:hover {
104+
background: var(--secondary-sand) !important;
105+
border-color: var(--primary-brown) !important;
106+
transform: translateY(-1px) !important;
107+
}
108+
109+
/* 全局卡片样式 */
110+
.el-card {
111+
border: 2px solid var(--border-light) !important;
112+
border-radius: 12px !important;
113+
background: var(--bg-card) !important;
114+
box-shadow: 0 8px 24px var(--shadow-light) !important;
115+
transition: all 0.3s ease !important;
116+
}
117+
118+
.el-card:hover {
119+
transform: translateY(-4px) !important;
120+
box-shadow: 0 12px 32px var(--shadow-medium) !important;
121+
border-color: var(--border-medium) !important;
122+
}
123+
124+
/* 全局标题样式 */
125+
h1, h2, h3, h4, h5, h6 {
126+
color: var(--text-primary);
127+
font-weight: 600;
128+
letter-spacing: 1px;
129+
}
44130
</style>

‎coder-test-frontend/src/assets/banner.png‎

343 KB
Loading

‎coder-test-frontend/src/components/GlobalFooter.vue‎

Lines changed: 81 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,20 @@ const currentYear = computed(() => {
7676

7777
<style scoped>
7878
.footer-container {
79-
background-color: #f8f9fa;
80-
padding: 40px 0 0;
81-
border-top: 1px solid #e9ecef;
79+
background: linear-gradient(135deg, var(--primary-brown) 0%, var(--secondary-brown) 100%);
80+
padding: 60px 0 0;
81+
border-top: 4px solid var(--accent-gold);
82+
position: relative;
83+
}
84+
85+
.footer-container::before {
86+
content: '';
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
right: 0;
91+
height: 2px;
92+
background: linear-gradient(90deg, var(--accent-gold) 0%, var(--accent-copper) 50%, var(--accent-gold) 100%);
8293
}
8394
8495
.footer-row {
@@ -106,23 +117,25 @@ const currentYear = computed(() => {
106117
}
107118
108119
.logo-icon {
109-
color: #409eff;
110120
margin-right: 12px;
111121
margin-top: -10px;
112122
}
113123
114124
.logo-text {
115125
font-size: 18px;
116126
font-weight: 600;
117-
color: #333;
127+
color: var(--bg-card);
118128
margin: 0;
129+
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
119130
}
120131
121132
.footer-title {
122-
font-size: 16px;
133+
font-size: 18px;
123134
font-weight: 600;
124-
color: #333;
135+
color: var(--accent-gold);
125136
margin: 0 0 20px 0;
137+
letter-spacing: 1px;
138+
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
126139
}
127140
128141
.footer-links {
@@ -141,17 +154,34 @@ const currentYear = computed(() => {
141154
}
142155
143156
.footer-protocol-button {
144-
color: #666;
157+
color: var(--secondary-sand);
145158
text-decoration: none;
146159
font-size: 14px;
147160
line-height: 1.5;
148-
transition: color 0.3s ease;
161+
transition: all 0.3s ease;
149162
display: inline-block;
150-
padding: 2px 0;
163+
padding: 6px 0;
164+
position: relative;
165+
}
166+
167+
.footer-protocol-button::before {
168+
content: '';
169+
position: absolute;
170+
bottom: 2px;
171+
left: 0;
172+
width: 0;
173+
height: 1px;
174+
background: var(--accent-gold);
175+
transition: width 0.3s ease;
151176
}
152177
153178
.footer-protocol-button:hover {
154-
color: #409eff;
179+
color: var(--accent-gold);
180+
transform: translateX(4px);
181+
}
182+
183+
.footer-protocol-button:hover::before {
184+
width: 100%;
155185
}
156186
157187
.about-section {
@@ -184,27 +214,60 @@ const currentYear = computed(() => {
184214
185215
.copyright-footer {
186216
text-align: center;
187-
margin-bottom: 30px;
188-
color: #b7b6b6;
217+
margin-bottom: 40px;
218+
color: var(--secondary-sand);
189219
font-size: 14px;
190-
padding: 0 20px;
220+
padding: 30px 20px 0;
221+
border-top: 1px solid rgba(210, 180, 140, 0.2);
222+
position: relative;
223+
}
224+
225+
.copyright-footer::before {
226+
content: '';
227+
position: absolute;
228+
top: 0;
229+
left: 50%;
230+
transform: translateX(-50%);
231+
width: 100px;
232+
height: 1px;
233+
background: var(--accent-gold);
191234
}
192235
193236
.copyright-text {
194237
margin-right: 20px;
238+
font-weight: 500;
195239
}
196240
197241
.footer-protocol-link,
198242
.footer-about-me {
199-
color: #b7b6b6;
243+
color: var(--secondary-sand);
200244
text-decoration: none;
201-
margin: 0 8px;
202-
transition: color 0.3s ease;
245+
margin: 0 12px;
246+
transition: all 0.3s ease;
247+
position: relative;
248+
padding: 2px 0;
249+
}
250+
251+
.footer-protocol-link::before,
252+
.footer-about-me::before {
253+
content: '';
254+
position: absolute;
255+
bottom: 0;
256+
left: 0;
257+
width: 0;
258+
height: 1px;
259+
background: var(--accent-gold);
260+
transition: width 0.3s ease;
203261
}
204262
205263
.footer-protocol-link:hover,
206264
.footer-about-me:hover {
207-
color: #409eff;
265+
color: var(--accent-gold);
266+
}
267+
268+
.footer-protocol-link:hover::before,
269+
.footer-about-me:hover::before {
270+
width: 100%;
208271
}
209272
210273
/* 响应式设计 */

0 commit comments

Comments
 (0)