diff --git a/frontend/index.html b/frontend/index.html index 9e5fc8f..f3181aa 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -1,10 +1,10 @@ - + - Vite App + Rill
diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a78fb6f..f219522 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -1,7 +1,13 @@ diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index f1d8c73..bf58cd3 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -1 +1,19 @@ @import "tailwindcss"; + +@theme { + --color-primary: #fb7299; + --color-primary-hover: #fc8bab; + --color-accent: #00aeec; + --color-page: #f6f7f8; + --color-line: #e3e5e7; + --color-content-1: #18191c; + --color-content-2: #61666d; + --color-content-3: #9499a0; +} + +@layer base { + body { + background-color: var(--color-page); + color: var(--color-content-1); + } +} diff --git a/frontend/src/components/common/PlaceholderBox.vue b/frontend/src/components/common/PlaceholderBox.vue new file mode 100644 index 0000000..b2c50a3 --- /dev/null +++ b/frontend/src/components/common/PlaceholderBox.vue @@ -0,0 +1,31 @@ + + + diff --git a/frontend/src/components/home/CategoryNav.vue b/frontend/src/components/home/CategoryNav.vue new file mode 100644 index 0000000..cc007b6 --- /dev/null +++ b/frontend/src/components/home/CategoryNav.vue @@ -0,0 +1,21 @@ + + + diff --git a/frontend/src/components/home/HomeCarousel.vue b/frontend/src/components/home/HomeCarousel.vue new file mode 100644 index 0000000..a285c81 --- /dev/null +++ b/frontend/src/components/home/HomeCarousel.vue @@ -0,0 +1,33 @@ + + + diff --git a/frontend/src/components/home/LiveSection.vue b/frontend/src/components/home/LiveSection.vue new file mode 100644 index 0000000..f73bf50 --- /dev/null +++ b/frontend/src/components/home/LiveSection.vue @@ -0,0 +1,33 @@ + + + diff --git a/frontend/src/components/home/VideoCard.vue b/frontend/src/components/home/VideoCard.vue new file mode 100644 index 0000000..d1b2898 --- /dev/null +++ b/frontend/src/components/home/VideoCard.vue @@ -0,0 +1,45 @@ + + + diff --git a/frontend/src/components/home/VideoSection.vue b/frontend/src/components/home/VideoSection.vue new file mode 100644 index 0000000..54ef8e5 --- /dev/null +++ b/frontend/src/components/home/VideoSection.vue @@ -0,0 +1,63 @@ + + + diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue new file mode 100644 index 0000000..15509b2 --- /dev/null +++ b/frontend/src/components/layout/AppHeader.vue @@ -0,0 +1,88 @@ + + + diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue new file mode 100644 index 0000000..c4a3138 --- /dev/null +++ b/frontend/src/components/layout/AppSidebar.vue @@ -0,0 +1,44 @@ + + + diff --git a/frontend/src/mock/home.ts b/frontend/src/mock/home.ts new file mode 100644 index 0000000..907d13c --- /dev/null +++ b/frontend/src/mock/home.ts @@ -0,0 +1,100 @@ +export interface BannerItem { + id: number + title: string +} + +export interface VideoItem { + id: number + title: string + author: string + views: string + danmaku: string + duration: string + date: string +} + +export interface LiveRoom { + id: number + title: string + author: string + popularity: string +} + +export const banners: BannerItem[] = Array.from({ length: 7 }, (_, index) => ({ + id: index + 1, + title: `轮播图 ${index + 1}`, +})) + +export const sideBanners: BannerItem[] = Array.from({ length: 6 }, (_, index) => ({ + id: index + 1, + title: `推荐位 ${index + 1}`, +})) + +export const categories = [ + '动画', + '番剧', + '国创', + '音乐', + '舞蹈', + '游戏', + '知识', + '科技', + '运动', + '汽车', + '生活', + '美食', + '动物', + '鬼畜', + '时尚', + '娱乐', +] + +export const liveRooms: LiveRoom[] = [ + { id: 1, title: '直播标题占位：赛季揭幕战全程解说', author: '主播占位一', popularity: '24.7万' }, + { id: 2, title: '直播标题占位：深夜电台点歌时间', author: '主播占位二', popularity: '8.2万' }, + { id: 3, title: '直播标题占位：新游开荒第一天', author: '主播占位三', popularity: '12.6万' }, + { id: 4, title: '直播标题占位：周末手工制作现场', author: '主播占位四', popularity: '3.4万' }, + { id: 5, title: '直播标题占位：音乐会彩排幕后', author: '主播占位五', popularity: '5.9万' }, +] + +const topicPool = [ + '城市夜景延时摄影记录', + '从零搭建家庭影音服务器', + '经典电影镜头语言解析', + '周末骑行 Vlog 全记录', + '一人食料理制作全流程', + '新番开播前瞻与无剧透点评', + '游戏高光时刻集锦', + '独立音乐现场演出片段', + '纪录片解说：深海探索', + '硬件装机与性能实测', + '手绘插画过程分享', + '户外露营装备测评', + '经典老片修复对比', + '编程实战：从零写一个播放器', + '羽毛球业余联赛集锦', +] + +function createVideos(prefix: string, count: number, startId: number): VideoItem[] { + return Array.from({ length: count }, (_, index) => { + const id = startId + index + const topic = topicPool[id % topicPool.length] ?? '内容标题占位' + return { + id, + title: `【${prefix}】${topic}（标题文案占位）`, + author: `UP主占位 ${id}`, + views: `${(id * 2.7).toFixed(1)}万`, + danmaku: (id * 143).toLocaleString('zh-CN'), + duration: `${String((index % 12) + 1).padStart(2, '0')}:${String((index * 13) % 60).padStart(2, '0')}`, + date: `${(index % 28) + 1}天前`, + } + }) +} + +export const recommendVideos = createVideos('推荐', 10, 1) + +export const hotVideos = createVideos('热门', 10, 11) + +export const recommendTabs = ['综合', '动画', '游戏', '知识', '生活', '影视', '音乐', '科技', '美食', '运动'] + +export const footerLinks = ['关于我们', '帮助中心', '用户协议', '隐私政策', '社区规范', '联系我们'] diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index 88a2a01..abdaa29 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -1,5 +1,24 @@ + +