Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
290fce62 1 parent 73378cac

docs(welcome): 调整功能入口为3个，采用环绕式布局 

功能入口调整：
- 移除时光机入口，保留3个核心功能（课程、活动、我的）
- 图标改为使用图片: /img/wecome_btn_1.png
- 布局调整为环绕式，模拟天体行星轨道效果

布局设计：
- 🌌 环绕式布局: 3个图标呈弧形排列
- 📍 位置: 页面中下位置
- ✨ 效果: 星空宇宙主题，旋转虚线轨道
- 🖼️ 图标: 统一使用图片图标，圆形发光效果

技术实现：
- 使用绝对定位形成环绕效果
- 左侧: 课程中心 (左下)
- 顶部: 活动中心 (中上)
- 右侧: 个人中心 (右下)
- 添加旋转轨道动画 (60s 匀速旋转)

更新文件：
- plan.md: 更新功能入口配置和布局代码
- README.md: 更新开发进度和布局说明
- brainstorm.md: 更新待确认事项

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Inline Side-by-side
Showing 3 changed files with 109 additions and 51 deletions
......@@ -70,17 +70,18 @@ VITE_WELCOME_VIDEO_URL=https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4
- [x] 通用上传工具 (`scripts/upload-to-qiniu.sh`)
- [x] 详细实现计划 (`plan.md`)
- [x] 头脑风暴文档 (`brainstorm.md`)
- [x] 功能入口列表确定（课程、活动、时光机、我的）
- [x] 功能入口列表确定（3个入口：课程、活动、我的）
- [x] 功能图标确定 (`/img/wecome_btn_1.png`)
### ⏳ 待开发
- [ ] VideoBackground 组件
- [ ] WelcomeContent 组件
- [ ] WelcomeEntryItem 组件
- [ ] WelcomeContent 组件（环绕式布局）
- [ ] WelcomeEntryItem 组件（图片图标）
- [ ] 路由与首次访问逻辑
- [ ] 功能入口配置实现
### ❌ 待确认
- [ ] 页面效果图 (设计稿)
- [ ] 环绕式布局的具体位置参数
- [ ] 页面布局细节 (顶部/底部元素)
---
......@@ -148,8 +149,13 @@ window.showWelcome()
1. **课程中心** (`/courses`) - 探索精选课程
2. **活动中心** (`/activity`) - 精彩活动不容错过
- ⚠️ **注意**: 当前为外链跳转，跳转到 `https://wxm.behalo.cc/pages/activity/activity`
3. **时光机** (`/recall/login`) - 回顾学习历程
4. **个人中心** (`/profile`) - 管理您的账户
3. **个人中心** (`/profile`) - 管理您的账户
**布局设计:**
- 🌌 **环绕式布局**: 3个图标像天体行星一样环绕排列
- 📍 **位置**: 页面中下位置
- ✨ **效果**: 星空宇宙主题，有旋转的虚线轨道
- 🖼️ **图标**: 统一使用 `/img/wecome_btn_1.png`
---
......
......@@ -419,11 +419,12 @@ const posterUrl = 'https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/o
1. ✅ **背景视频文件** - `video/welcome-bg.mp4` 已添加并上传到七牛云
2. ❌ **页面效果图** - `img/` 文件夹为空，需要设计稿确认布局
3. ✅ **功能入口列表** - 已确定底部Tab的四个功能入口
3. ✅ **功能入口列表** - 已确定3个功能入口
- 课程中心: `/courses`
- 活动中心: `/activity` (⚠️ 当前为外链跳转: `https://wxm.behalo.cc/pages/activity/activity`)
- 时光机: `/recall/login`
- 个人中心: `/profile`
- ✅ **图标确定**: 使用 `/img/wecome_btn_1.png` (图片图标)
- ✅ **布局确定**: 环绕式布局，位于页面中下，天体行星感觉
4. ❌ **页面布局细节** - 顶部/底部是否需要元素（Logo、标语、按钮等）
**建议:** 先完成技术框架和上传工具，等设计稿确认后再填充内容。
......
......@@ -765,14 +765,14 @@ if (import.meta.env.DEV) {
```javascript
/**
* 欢迎页功能入口配置
* 对应项目底部Tab的四个主要功能入口
* 采用环绕式布局，3个功能入口像天体行星一样排列
*/
export const welcomeEntries = [
{
id: 'courses',
title: '课程中心',
subtitle: '探索精选课程',
icon: '📚',
icon: '/img/wecome_btn_1.png', // 使用图片图标
route: '/courses',
color: '#4CAF50',
priority: 1
......@@ -781,7 +781,7 @@ export const welcomeEntries = [
id: 'activity',
title: '活动中心',
subtitle: '精彩活动不容错过',
icon: '🎉',
icon: '/img/wecome_btn_1.png', // 使用图片图标
route: '/activity',
color: '#FF9800',
priority: 2,
......@@ -789,22 +789,13 @@ export const welcomeEntries = [
externalUrl: 'https://wxm.behalo.cc/pages/activity/activity?token=&user_id='
},
{
id: 'recall',
title: '时光机',
subtitle: '回顾学习历程',
icon: '⏰',
route: '/recall/login',
color: '#9C27B0',
priority: 3
},
{
id: 'profile',
title: '个人中心',
subtitle: '管理您的账户',
icon: '👤',
icon: '/img/wecome_btn_1.png', // 使用图片图标
route: '/profile',
color: '#2196F3',
priority: 4
priority: 3
}
]
......@@ -828,17 +819,18 @@ export function getSortedEntries() {
- 查看最新活动信息
- 活动报名和参与
- ⚠️ **特殊处理**: 当前为外链跳转，跳转到 `https://wxm.behalo.cc/pages/activity/activity`
- 未来可能需要集成到项目内
3. **时光机** (`/recall/login`)
- 回顾功能和历史记录
- 用户成长历程展示
4. **个人中心** (`/profile`)
3. **个人中心** (`/profile`)
- 对应底部Tab第四个入口
- 个人资料管理
- 学习记录和设置
**布局设计:**
- 🌌 **环绕式布局**: 3个图标像天体行星一样环绕排列
- 📍 **位置**: 页面中下位置
- 🎨 **视觉效果**: 星空宇宙主题，行星轨道感
- 🖼️ **图标**: 统一使用 `/img/wecome_btn_1.png`
#### 步骤 2: 创建功能入口项组件
**文件:** `src/components/welcome/WelcomeEntryItem.vue`
......@@ -850,9 +842,9 @@ export function getSortedEntries() {
:style="{ '--index': index }"
@click="handleClick"
>
<!-- 图标 -->
<div class="entry-icon" :style="{ color: entry.color }">
{{ entry.icon }}
<!-- 图标 (图片) -->
<div class="entry-icon">
<img :src="entry.icon" :alt="entry.title" />
</div>
<!-- 标题 -->
......@@ -860,7 +852,7 @@ export function getSortedEntries() {
{{ entry.title }}
</div>
<!-- 副标题(可选) -->
<!-- 副标题 -->
<div v-if="entry.subtitle" class="entry-subtitle">
{{ entry.subtitle }}
</div>
......@@ -905,25 +897,45 @@ const handleClick = () => {
<style scoped lang="less">
.entry-item {
position: absolute; // 绝对定位，形成环绕效果
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
padding: 1rem;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
// 呼吸动画
animation: breathe 2.5s ease-in-out infinite;
animation-delay: calc(var(--index) * 0.3s);
animation-delay: calc(var(--index) * 0.5s);
// 环绕式布局位置计算
&:nth-child(1) {
// 左侧入口
left: 0;
bottom: 0;
}
&:nth-child(2) {
// 顶部入口
left: 50%;
transform: translateX(-50%);
bottom: 60%;
}
&:nth-child(3) {
// 右侧入口
right: 0;
bottom: 0;
}
&:hover {
animation-duration: 1s;
transform: scale(1.1);
.entry-icon {
transform: scale(1.2);
.entry-icon img {
transform: scale(1.15);
}
}
......@@ -934,19 +946,28 @@ const handleClick = () => {
@keyframes breathe {
0%, 100% {
transform: scale(1);
opacity: 0.9;
}
50% {
transform: scale(1.08);
opacity: 1;
}
}
.entry-icon {
font-size: 3rem;
width: 80px;
height: 80px;
margin-bottom: 0.75rem;
transition: transform 0.3s ease;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
}
.entry-title {
......@@ -956,6 +977,7 @@ const handleClick = () => {
text-align: center;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
margin-bottom: 0.25rem;
white-space: nowrap;
}
.entry-subtitle {
......@@ -963,6 +985,7 @@ const handleClick = () => {
color: rgba(255, 255, 255, 0.8);
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
white-space: nowrap;
}
</style>
```
......@@ -1006,21 +1029,48 @@ const sortedEntries = computed(() => getSortedEntries())
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: flex-end; // 内容靠下，位于中下位置
padding: 2rem;
padding-bottom: 6rem; // 距离底部有足够空间
}
.entries-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 600px;
max-width: 500px;
// 环绕式布局：3个图标呈弧形排列
// 使用绝对定位模拟行星轨道效果
&::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: rotate 60s linear infinite;
}
@media (min-width: 768px) {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 900px;
max-width: 700px;
&::before {
width: 450px;
height: 450px;
}
}
}
// 旋转轨道动画
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
......@@ -1338,8 +1388,9 @@ https://cdn.ipadbiz.cn/mlaj/video/welcome-bg.mp4?vframe/jpg/offset/0.001/w/1920/
1. ✅ **背景视频文件** - `video/welcome-bg.mp4` 已添加并上传到七牛云
2. ❌ **页面效果图** - 需要设计稿确认布局
3. ✅ **功能入口列表** - 已确定（课程、活动、时光机、我的）
4. ❌ **页面布局细节** - 顶部/底部是否需要元素（Logo、标语、按钮等）
3. ✅ **功能入口列表** - 已确定3个入口（课程、活动、我的）
4. ✅ **功能图标** - 已确定使用 `/img/wecome_btn_1.png`
5. ❌ **页面布局细节** - 顶部/底部是否需要其他元素（Logo、标语等）
**建议:** 先完成技术框架和上传工具，等设计稿确认后再填充内容。
......