1.7 KiB
1.7 KiB
重新设计div模块并适配中英文切换
目标
将当前的双按钮设计重新设计为参考图样式，并确保支持中英文切换功能。
修改内容
- 修改文件：
d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\home\index.vue - 修改位置：
- 第181-194行的div容器（按钮布局）
- 第541-654行的i18n对象（中英文文本）
具体修改
1. 更新i18n配置
在i18n对象的en和zh部分添加新的文本键值对：
- en: { hero: { joinWaitlist: 'Join Waitlist', enterInviteCode: 'Enter Invite Code' } }
- zh: { hero: { joinWaitlist: '加入候补名单', enterInviteCode: '输入邀请码' } }
2. 修改按钮布局
- 将flex容器的排列方式改为垂直居中
- 替换两个按钮为一个主按钮和一个次按钮
- 使用t()函数获取按钮文本，支持中英文切换
3. 样式设计
- 主按钮：白色背景、黑色文字、大圆角、居中显示
- 次按钮：使用渐变文字效果（用户提供的样式）
- 整体垂直排列，居中显示
实现细节
- 主按钮文字：通过
t('hero.joinWaitlist')获取 - 次按钮文字：通过
t('hero.enterInviteCode')获取 - 主按钮样式：白色背景、黑色文字、大圆角
- 次按钮样式：
- 渐变背景：linear-gradient(90deg, #fff5c1, #a2e5ff)
- 文字填充透明：-webkit-text-fill-color: #0000
- 背景裁剪文字：-webkit-background-clip: text; background-clip: text
- 布局：垂直排列，主按钮在上，次按钮在下，整体居中
预期效果
修改后的div模块将呈现参考图所示的设计，支持中英文切换功能。当切换语言时，按钮文字会自动更新为对应语言，同时保持参考图的视觉设计。