diff --git a/src/game_pages/detail/components/EmptyState/index.scss b/src/game_pages/detail/components/EmptyState/index.scss index 54d1b1d..2bfc631 100644 --- a/src/game_pages/detail/components/EmptyState/index.scss +++ b/src/game_pages/detail/components/EmptyState/index.scss @@ -1,7 +1,8 @@ .empty_state_page { width: 100%; min-height: 100vh; - background: #3f3f3f; + // 白色渐变背景（从设计稿参考） + background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%); position: relative; display: flex; flex-direction: column; @@ -18,18 +19,15 @@ min-height: calc(100vh - 98px); } - // 背景图片 - &__bg_image { + // 空状态图片 + &__icon { position: absolute; top: 178px; - left: 84px; + left: 50%; + transform: translateX(-50%); width: 221.17px; height: 200px; - background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIyMiAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjIiIGhlaWdodD0iMjAwIiBmaWxsPSIjRkZGRkZGIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4K'); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - opacity: 0.2; + opacity: 0.8; // 图片透明度 z-index: 0; } @@ -41,7 +39,7 @@ transform: translateX(-50%); z-index: 1; padding: 8px 16px; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.05); // 白色背景下使用浅色背景 border-radius: 4px; white-space: nowrap; @@ -50,7 +48,7 @@ font-weight: 400; font-size: 15px; line-height: 1.6; - color: #ffffff; + color: rgba(0, 0, 0, 0.65); // 白色背景下使用深色文字 text-align: center; } } @@ -89,8 +87,9 @@ // 主要按钮（去看看其他球局） &--primary { - background: linear-gradient(154deg, rgba(255, 255, 255, 1) 0%, rgba(234, 234, 234, 1) 100%); + background:#000000; border: 2px solid rgba(0, 0, 0, 0.06); + color: #FFFFFF; } // 次要按钮（返回首页） diff --git a/src/game_pages/detail/components/EmptyState/index.tsx b/src/game_pages/detail/components/EmptyState/index.tsx index 82438d2..fdced2d 100644 --- a/src/game_pages/detail/components/EmptyState/index.tsx +++ b/src/game_pages/detail/components/EmptyState/index.tsx @@ -1,8 +1,23 @@ +/** + * 球局详情页 - 空状态（兜底页面） + * 当球局不存在或已删除时显示的页面 + * + * Figma 设计稿参考： + * https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版） + */ +/** + * 球局详情页 - 空状态（兜底页面） + * 当球局不存在或已删除时显示的页面 + * + * Figma 设计稿参考： + * https://www.figma.com/design/EWQlX5wM2lhiSLfFQp8qKT/小程序设计稿V1（开发协作版）?node-id=7183-68082&t=pFQxnqJSKzz9ls8h-0 + */ import React, { useState, useEffect } from 'react'; -import { View, Text } from '@tarojs/components'; +import { View, Text, Image } from '@tarojs/components'; import Taro from '@tarojs/taro'; import { useGlobalState } from '@/store/global'; import { GeneralNavbar } from '@/components'; +import emptyStateIcon from '@/static/emptyStatus/game-detail-empty.svg'; import './index.scss'; interface EmptyStateProps { @@ -29,12 +44,13 @@ const EmptyState: React.FC = ({ onGoToOtherGames, onGoToHome }) return () => clearTimeout(timer); }, [countdown]); - // 跳转到其他球局 + // 跳转到其他球局 - 返回首页列表 const handle_go_to_other_games = () => { if (onGoToOtherGames) { onGoToOtherGames(); } else { - Taro.switchTab({ + // 使用 redirectTo 跳转到首页列表页（main_pages/index 默认显示 list tab） + (Taro as any).redirectTo({ url: '/main_pages/index', }); } @@ -45,13 +61,14 @@ const EmptyState: React.FC = ({ onGoToOtherGames, onGoToHome }) if (onGoToHome) { onGoToHome(); } else { - const pages = Taro.getCurrentPages(); + const pages = (Taro as any).getCurrentPages(); if (pages.length <= 1) { - Taro.switchTab({ + // 使用 redirectTo 跳转到首页列表页 + (Taro as any).redirectTo({ url: '/main_pages/index', }); } else { - Taro.navigateBack(); + (Taro as any).navigateBack(); } } }; @@ -61,8 +78,12 @@ const EmptyState: React.FC = ({ onGoToOtherGames, onGoToHome }) - {/* 背景图片 */} - + {/* 空状态图片 */} + {/* 提示文字 */} diff --git a/src/static/emptyStatus/game-detail-empty.svg b/src/static/emptyStatus/game-detail-empty.svg new file mode 100644 index 0000000..de1f042 --- /dev/null +++ b/src/static/emptyStatus/game-detail-empty.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +