39 lines
1.7 KiB
Markdown
39 lines
1.7 KiB
Markdown
# 重新设计div模块并适配中英文切换
|
||
|
||
## 目标
|
||
将当前的双按钮设计重新设计为参考图样式，并确保支持中英文切换功能。
|
||
|
||
## 修改内容
|
||
1. **修改文件**：`d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\home\index.vue`
|
||
2. **修改位置**：
|
||
- 第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模块将呈现参考图所示的设计，支持中英文切换功能。当切换语言时，按钮文字会自动更新为对应语言，同时保持参考图的视觉设计。 |