diff --git a/.gitignore b/.gitignore index 4fce158..51d3498 100644 --- a/.gitignore +++ b/.gitignore @@ -66,4 +66,7 @@ yarn-error.log* # OS .DS_Store -Thumbs.db \ No newline at end of file +Thumbs.db + +# Figma 设计文件目录（无需纳入版本控制） +.figma/ \ No newline at end of file diff --git a/frontend/src/App.vue b/frontend/src/App.vue index c01ea79..521e2a8 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -271,32 +271,16 @@ onMounted(() => {
- -
-
-

AI棒榜

+ +
+
- - - - - - - -
-

{{ formatDateTitle(selectedDate) }}

-
-
- -
+
+ +
+

{{ formatDateTitle(selectedDate) }}

+
+
+
@@ -447,26 +437,43 @@ onMounted(() => { position: relative; } -/* 顶部标题区域 */ -.header-section { - padding-top: 20px; - text-align: center; +/* 顶部横幅（按设计稿） */ +.top-banner { + position: relative; + height: 180px; + /* 背景图改为项目内资源路径 */ + background-image: url('./images/top_bg.png'); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + overflow: hidden; } -.title-wrapper { +.top-banner::after { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.1) 100%); +} + +.banner-inner { + position: relative; + z-index: 1; display: flex; + flex-direction: column; align-items: center; justify-content: center; - gap: 10px; - position: relative; + height: 100%; } - -.main-title { - font-size: 24px; - font-weight: bold; - color: #333; - margin: 0; - font-family: Alatsi, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimHei, Arial, Helvetica, sans-serif; +.banner-main-title { + width: 136px; +} +.banner-subtitle { + margin-top: 12px; + letter-spacing: 1px; + color: #ffffff; + font-family: ABeeZee, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimHei, Arial, Helvetica, sans-serif; + font-size: 16px; } /* 横幅区域 */ @@ -484,20 +491,6 @@ onMounted(() => { z-index: 2; } -.banner-subtitle { - font-size: 14px; - color: rgba(255, 255, 255, 0.8); - margin: 0 0 8px 0; -} - -.banner-title { - font-size: 18px; - font-weight: bold; - color: white; - margin: 0; - line-height: 1.4; -} - /* 装饰分隔线 */ .divider-dots { display: flex; @@ -521,14 +514,13 @@ onMounted(() => { display: flex; align-items: center; justify-content: center; - margin: 20px 0; gap: 8px; } .date-title { - font-size: 16px; - color: #333; - margin: 0; + font-size: 14px; + color: #555; + margin: 8px 0; font-weight: 500; } @@ -570,7 +562,17 @@ onMounted(() => { /* 排行榜内容区域 */ .ranking-content { - padding: 0 16px; + /* 作为白色圆角卡片容器 */ + background: #ffffff; + /* 仅顶部圆角 */ + border-radius: 24px 24px 0 0; + /* 移除两侧内边距与外边距 */ + padding: 0; + margin: -24px 0 16px; + /* 提高层级，确保顶部圆角可见 */ + position: relative; + z-index: 2; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06); } /* 加载状态 */ @@ -599,8 +601,6 @@ onMounted(() => { .ranking-list { display: flex; flex-direction: column; - background: white; - border-radius: 12px; padding: 0 16px; } @@ -888,7 +888,8 @@ onMounted(() => { } .ranking-content { - padding: 0 12px; + margin-top: -12px; + padding: 12px 0; } .ranking-item { diff --git a/frontend/src/images/mhru18yf-f5p3yze.svg b/frontend/src/images/mhru18yf-f5p3yze.svg new file mode 100644 index 0000000..29875c4 --- /dev/null +++ b/frontend/src/images/mhru18yf-f5p3yze.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/images/top_bg.png b/frontend/src/images/top_bg.png new file mode 100644 index 0000000..9b3c45a Binary files /dev/null and b/frontend/src/images/top_bg.png differ