1
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
// 次要按钮(返回首页)
|
||||
|
||||
@@ -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<EmptyStateProps> = ({ 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<EmptyStateProps> = ({ 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<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
|
||||
<GeneralNavbar title="" showBack={true} />
|
||||
|
||||
<View className="empty_state_page__content">
|
||||
{/* 背景图片 */}
|
||||
<View className="empty_state_page__bg_image" />
|
||||
{/* 空状态图片 */}
|
||||
<Image
|
||||
className="empty_state_page__icon"
|
||||
src={emptyStateIcon}
|
||||
mode="aspectFit"
|
||||
/>
|
||||
|
||||
{/* 提示文字 */}
|
||||
<View className="empty_state_page__tip">
|
||||
|
||||
33
src/static/emptyStatus/game-detail-empty.svg
Normal file
33
src/static/emptyStatus/game-detail-empty.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 21 KiB |
Reference in New Issue
Block a user