Skip to content

Commit 9a3118c

Browse files
liyupiliyupi
committed
前端优化 - 优化底部版权栏目信息
1 parent aa70e46 commit 9a3118c

File tree

4 files changed

+278
-18
lines changed

4 files changed

+278
-18
lines changed

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<template>
22
<div id="app">
3-
<router-view />
3+
<div class="app-content">
4+
<router-view />
5+
</div>
6+
<GlobalFooter />
47
</div>
58
</template>
69

710
<script setup>
811
import { onMounted } from 'vue'
912
import { useUserStore } from './stores/user'
13+
import GlobalFooter from './components/GlobalFooter.vue'
1014
1115
const userStore = useUserStore()
1216
@@ -30,5 +34,11 @@ body {
3034
3135
#app {
3236
min-height: 100vh;
37+
display: flex;
38+
flex-direction: column;
39+
}
40+
41+
.app-content {
42+
flex: 1;
3343
}
3444
</style>

‎coder-test-frontend/src/assets/qrcode.jpg‎

47.1 KB
Loading

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

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
<template>
2+
<div class="footer-container">
3+
<div class="footer-row">
4+
<!-- Logo和基本信息 -->
5+
<div class="footer-section logo-section">
6+
<div class="footer-logo">
7+
<el-icon class="logo-icon" :size="48"><Trophy /></el-icon>
8+
<h5 class="logo-text">程序员技术练兵场</h5>
9+
</div>
10+
<div class="footer-links">
11+
<a href="#" class="footer-protocol-button">《用户协议》</a>
12+
<a href="#" class="footer-protocol-button">《隐私政策》</a>
13+
</div>
14+
</div>
15+
16+
<!-- 友情链接 -->
17+
<div class="footer-section">
18+
<h5 class="footer-title">友情链接</h5>
19+
<div class="footer-links">
20+
<a href="https://www.codefather.cn/" target="_blank" class="footer-protocol-button">编程导航</a>
21+
<a href="https://www.laoyujianli.com/" target="_blank" class="footer-protocol-button">老鱼简历</a>
22+
<a href="https://www.codecopy.cn/" target="_blank" class="footer-protocol-button">代码小抄</a>
23+
<a href="https://jianqiezhushou.com/" target="_blank" class="footer-protocol-button">剪切助手</a>
24+
<a href="https://mianshiya.com/" target="_blank" class="footer-protocol-button">面试鸭</a>
25+
</div>
26+
</div>
27+
28+
<!-- 联系我们 -->
29+
<div class="footer-section">
30+
<h5 class="footer-title">联系我们</h5>
31+
<div class="footer-links">
32+
<a href="#" target="_blank" class="footer-protocol-button">商务合作</a>
33+
<a href="#" target="_blank" class="footer-protocol-button">站长：程序员鱼皮</a>
34+
</div>
35+
</div>
36+
37+
<!-- 关注我们 -->
38+
<div class="footer-section about-section">
39+
<h5 class="footer-title">关注我们</h5>
40+
<div class="qrcode-section">
41+
<img
42+
:src="qrcodeImage"
43+
alt="微信公众号"
44+
class="qrcode-image"
45+
width="65"
46+
height="65"
47+
/>
48+
<span class="qrcode-text">扫码关注<br>站长鱼皮的公众号</span>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<!-- 版权信息 -->
54+
<footer class="copyright-footer">
55+
<span class="copyright-text">{{ currentYear }} 程序员鱼皮</span>
56+
<a class="footer-protocol-link" href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">
57+
暂无备案号
58+
</a>
59+
<a class="footer-about-me" href="/about" target="_blank" rel="noreferrer">
60+
关于我们
61+
</a>
62+
</footer>
63+
</div>
64+
</template>
65+
66+
<script setup>
67+
import { computed } from 'vue'
68+
import { Trophy } from '@element-plus/icons-vue'
69+
import qrcodeImage from '../assets/qrcode.jpg'
70+
71+
// 获取当前年份
72+
const currentYear = computed(() => {
73+
return new Date().getFullYear()
74+
})
75+
</script>
76+
77+
<style scoped>
78+
.footer-container {
79+
background-color: #f8f9fa;
80+
padding: 40px 0 0;
81+
border-top: 1px solid #e9ecef;
82+
}
83+
84+
.footer-row {
85+
max-width: 1200px;
86+
margin: 0 auto;
87+
display: grid;
88+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
89+
gap: 40px;
90+
padding: 0 26px 40px;
91+
}
92+
93+
.footer-section {
94+
display: flex;
95+
flex-direction: column;
96+
}
97+
98+
.logo-section {
99+
padding-left: 0;
100+
}
101+
102+
.footer-logo {
103+
display: flex;
104+
align-items: center;
105+
margin-bottom: 20px;
106+
}
107+
108+
.logo-icon {
109+
color: #409eff;
110+
margin-right: 12px;
111+
margin-top: -10px;
112+
}
113+
114+
.logo-text {
115+
font-size: 18px;
116+
font-weight: 600;
117+
color: #333;
118+
margin: 0;
119+
}
120+
121+
.footer-title {
122+
font-size: 16px;
123+
font-weight: 600;
124+
color: #333;
125+
margin: 0 0 20px 0;
126+
}
127+
128+
.footer-links {
129+
display: flex;
130+
flex-direction: column;
131+
gap: 8px;
132+
padding-left: 46px;
133+
}
134+
135+
.logo-section .footer-links {
136+
padding-left: 46px;
137+
}
138+
139+
.footer-section:not(.logo-section) .footer-links {
140+
padding-left: 0;
141+
}
142+
143+
.footer-protocol-button {
144+
color: #666;
145+
text-decoration: none;
146+
font-size: 14px;
147+
line-height: 1.5;
148+
transition: color 0.3s ease;
149+
display: inline-block;
150+
padding: 2px 0;
151+
}
152+
153+
.footer-protocol-button:hover {
154+
color: #409eff;
155+
}
156+
157+
.about-section {
158+
align-items: flex-start;
159+
}
160+
161+
.qrcode-section {
162+
display: flex;
163+
align-items: flex-end;
164+
gap: 12px;
165+
margin-top: 8px;
166+
}
167+
168+
.qrcode-image {
169+
width: 65px;
170+
height: 65px;
171+
border-radius: 4px;
172+
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
173+
object-fit: cover;
174+
}
175+
176+
.qrcode-text {
177+
font-size: 12px;
178+
color: #999;
179+
line-height: 1.3;
180+
margin-bottom: 6px;
181+
margin-left: 4px;
182+
display: block;
183+
}
184+
185+
.copyright-footer {
186+
text-align: center;
187+
margin-bottom: 30px;
188+
color: #b7b6b6;
189+
font-size: 14px;
190+
padding: 0 20px;
191+
}
192+
193+
.copyright-text {
194+
margin-right: 20px;
195+
}
196+
197+
.footer-protocol-link,
198+
.footer-about-me {
199+
color: #b7b6b6;
200+
text-decoration: none;
201+
margin: 0 8px;
202+
transition: color 0.3s ease;
203+
}
204+
205+
.footer-protocol-link:hover,
206+
.footer-about-me:hover {
207+
color: #409eff;
208+
}
209+
210+
/* 响应式设计 */
211+
@media (max-width: 768px) {
212+
.footer-row {
213+
grid-template-columns: 1fr;
214+
gap: 30px;
215+
padding: 0 20px 30px;
216+
}
217+
218+
.footer-links {
219+
padding-left: 0 !important;
220+
}
221+
222+
.logo-section .footer-links {
223+
padding-left: 0 !important;
224+
}
225+
226+
.qrcode-section {
227+
justify-content: flex-start;
228+
}
229+
230+
.copyright-footer {
231+
font-size: 12px;
232+
line-height: 1.5;
233+
}
234+
235+
.copyright-text {
236+
display: block;
237+
margin: 0 0 10px 0;
238+
}
239+
}
240+
241+
@media (max-width: 480px) {
242+
.footer-container {
243+
padding: 30px 0 0;
244+
}
245+
246+
.footer-row {
247+
padding: 0 15px 20px;
248+
}
249+
250+
.footer-logo {
251+
justify-content: center;
252+
}
253+
254+
.footer-section {
255+
text-align: center;
256+
}
257+
258+
.footer-links {
259+
align-items: center;
260+
}
261+
262+
.qrcode-section {
263+
justify-content: center;
264+
}
265+
}
266+
</style>

‎coder-test-frontend/src/views/Home.vue‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -114,11 +114,6 @@
114114
</div>
115115
</div>
116116
</div>
117-
118-
<!-- 页脚 -->
119-
<el-footer class="footer">
120-
<p>&copy; 2024 程序员技术练兵场. All rights reserved.</p>
121-
</el-footer>
122117
</div>
123118
</template>
124119

@@ -156,9 +151,7 @@ const startChallenge = () => {
156151

157152
<style scoped>
158153
.home {
159-
min-height: 100vh;
160-
display: flex;
161-
flex-direction: column;
154+
min-height: calc(100vh - 200px);
162155
}
163156
164157
.header {
@@ -316,15 +309,6 @@ const startChallenge = () => {
316309
line-height: 1.6;
317310
}
318311
319-
.footer {
320-
background-color: #f8f9fa;
321-
text-align: center;
322-
color: #666;
323-
height: 60px;
324-
display: flex;
325-
align-items: center;
326-
justify-content: center;
327-
}
328312
329313
@media (max-width: 768px) {
330314
.header-content {

0 commit comments

Comments
 (0)