refactor(web): 重构前端UI主题为深色科技风

1.  整体替换网站配色为深色深蓝主题,使用#0F172A作为主背景色
2.  引入Fira Code和Fira Sans字体提升排版质感
3.  重写头部、卡片、表单等组件的样式,适配深色主题
4.  添加全局滚动条样式优化和选中文字样式
5.  移除不再需要的setup-paddlepaddle.sh脚本文件
6.  优化Home页面的标签页样式和交互逻辑
This commit is contained in:
wwh
2026-05-22 17:57:39 +08:00
parent a16e684e46
commit d01698dfcb
35 changed files with 4129 additions and 455 deletions
+39 -5
View File
@@ -22,10 +22,11 @@
<style scoped>
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
color: #F8FAFC;
padding: 0 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-content {
@@ -39,6 +40,12 @@
font-size: 24px;
margin: 0;
font-weight: 600;
font-family: 'Fira Code', monospace;
letter-spacing: -0.5px;
background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.header-info {
@@ -49,6 +56,8 @@
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
@@ -56,7 +65,9 @@
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: #0F172A;
color: #F8FAFC;
}
#app {
@@ -65,7 +76,30 @@ body {
}
.el-main {
background: #f5f7fa;
background: #0F172A;
padding: 20px;
}
::selection {
background: rgba(34, 197, 94, 0.3);
color: #F8FAFC;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #0F172A;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}
</style>