refactor(web): 重构前端UI主题为深色科技风
1. 整体替换网站配色为深色深蓝主题,使用#0F172A作为主背景色 2. 引入Fira Code和Fira Sans字体提升排版质感 3. 重写头部、卡片、表单等组件的样式,适配深色主题 4. 添加全局滚动条样式优化和选中文字样式 5. 移除不再需要的setup-paddlepaddle.sh脚本文件 6. 优化Home页面的标签页样式和交互逻辑
This commit is contained in:
+39
-5
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user