hookehuyr

feat(welcome): 添加标题图片并优化布局

- 新增美乐爱觉标题图片,参考 ChoosePage.vue 的设计
- 调整布局为水平排列,3个功能入口在一行显示
- 优化图标尺寸为 5rem,文字为 0.95rem
- 调整左右边距保持一致,使用 space-between 均匀分布
- 布局更靠底部,padding-bottom 设置为 3rem
- 修复标题显示位置,标题在顶部,功能入口在底部

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
...@@ -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;
......