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 @@
-->
<template>
<div class="welcome-content">
<!-- 功能入口区域 - 水平布局 -->
<div class="entry-orbit">
<!-- 标题区域 -->
<div class="mt-20 flex flex-col items-center z-10 w-full px-8">
<img :src="titleImg" class="w-full max-w-[300px] mb-4 object-contain" alt="美乐爱觉" />
</div>
<!-- 功能入口区域 - 水平布局,自动推到底部 -->
<div class="mt-auto entry-orbit">
<div class="orbit-entries">
<WelcomeEntryItem
v-for="entry in entries"
......@@ -31,6 +36,9 @@ import WelcomeEntryItem from './WelcomeEntryItem.vue'
const router = useRouter()
const entries = ref(welcomeEntries)
// 导入标题图片
const titleImg = 'https://cdn.ipadbiz.cn/mlaj/recall/img/title007@2x.png'
const handleEntryClick = (entry) => {
if (entry.isExternal) {
// 外部链接:获取用户ID并拼接
......@@ -53,7 +61,6 @@ const handleEntryClick = (entry) => {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding-left: 2rem;
padding-right: 2rem;
padding-bottom: 3rem;
......@@ -64,6 +71,7 @@ const handleEntryClick = (entry) => {
position: relative;
width: 100%;
max-width: 36rem;
margin-top: auto;
.orbit-entries {
display: flex;
......