feat(welcome): 添加标题图片并优化布局
- 新增美乐爱觉标题图片,参考 ChoosePage.vue 的设计 - 调整布局为水平排列,3个功能入口在一行显示 - 优化图标尺寸为 5rem,文字为 0.95rem - 调整左右边距保持一致,使用 space-between 均匀分布 - 布局更靠底部,padding-bottom 设置为 3rem - 修复标题显示位置,标题在顶部,功能入口在底部 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
1 changed file
with
11 additions
and
3 deletions
| ... | @@ -7,8 +7,13 @@ | ... | @@ -7,8 +7,13 @@ |
| 7 | --> | 7 | --> |
| 8 | <template> | 8 | <template> |
| 9 | <div class="welcome-content"> | 9 | <div class="welcome-content"> |
| 10 | - <!-- 功能入口区域 - 水平布局 --> | 10 | + <!-- 标题区域 --> |
| 11 | - <div class="entry-orbit"> | 11 | + <div class="mt-20 flex flex-col items-center z-10 w-full px-8"> |
| 12 | + <img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="美乐爱觉" /> | ||
| 13 | + </div> | ||
| 14 | + | ||
| 15 | + <!-- 功能入口区域 - 水平布局,自动推到底部 --> | ||
| 16 | + <div class="mt-auto entry-orbit"> | ||
| 12 | <div class="orbit-entries"> | 17 | <div class="orbit-entries"> |
| 13 | <WelcomeEntryItem | 18 | <WelcomeEntryItem |
| 14 | v-for="entry in entries" | 19 | v-for="entry in entries" |
| ... | @@ -31,6 +36,9 @@ import WelcomeEntryItem from './WelcomeEntryItem.vue' | ... | @@ -31,6 +36,9 @@ import WelcomeEntryItem from './WelcomeEntryItem.vue' |
| 31 | const router = useRouter() | 36 | const router = useRouter() |
| 32 | const entries = ref(welcomeEntries) | 37 | const entries = ref(welcomeEntries) |
| 33 | 38 | ||
| 39 | +// 导入标题图片 | ||
| 40 | +const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title007@2x.png' | ||
| 41 | + | ||
| 34 | const handleEntryClick = (entry) => { | 42 | const handleEntryClick = (entry) => { |
| 35 | if (entry.isExternal) { | 43 | if (entry.isExternal) { |
| 36 | // 外部链接:获取用户ID并拼接 | 44 | // 外部链接:获取用户ID并拼接 |
| ... | @@ -53,7 +61,6 @@ const handleEntryClick = (entry) => { | ... | @@ -53,7 +61,6 @@ const handleEntryClick = (entry) => { |
| 53 | display: flex; | 61 | display: flex; |
| 54 | flex-direction: column; | 62 | flex-direction: column; |
| 55 | align-items: center; | 63 | align-items: center; |
| 56 | - justify-content: flex-end; | ||
| 57 | padding-left: 2rem; | 64 | padding-left: 2rem; |
| 58 | padding-right: 2rem; | 65 | padding-right: 2rem; |
| 59 | padding-bottom: 3rem; | 66 | padding-bottom: 3rem; |
| ... | @@ -64,6 +71,7 @@ const handleEntryClick = (entry) => { | ... | @@ -64,6 +71,7 @@ const handleEntryClick = (entry) => { |
| 64 | position: relative; | 71 | position: relative; |
| 65 | width: 100%; | 72 | width: 100%; |
| 66 | max-width: 36rem; | 73 | max-width: 36rem; |
| 74 | + margin-top: auto; | ||
| 67 | 75 | ||
| 68 | .orbit-entries { | 76 | .orbit-entries { |
| 69 | display: flex; | 77 | display: flex; | ... | ... |
-
Please register or login to post a comment