1
This commit is contained in:
@@ -1,7 +1,8 @@
|
|||||||
.empty_state_page {
|
.empty_state_page {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
background: #3f3f3f;
|
// 白色渐变背景(从设计稿参考)
|
||||||
|
background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 100%);
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -18,18 +19,15 @@
|
|||||||
min-height: calc(100vh - 98px);
|
min-height: calc(100vh - 98px);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 背景图片
|
// 空状态图片
|
||||||
&__bg_image {
|
&__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 178px;
|
top: 178px;
|
||||||
left: 84px;
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
width: 221.17px;
|
width: 221.17px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIyMiAyMDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjIiIGhlaWdodD0iMjAwIiBmaWxsPSIjRkZGRkZGIiBmaWxsLW9wYWNpdHk9IjAuMiIvPgo8L3N2Zz4K');
|
opacity: 0.8; // 图片透明度
|
||||||
background-size: contain;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
opacity: 0.2;
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -41,7 +39,7 @@
|
|||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.05); // 白色背景下使用浅色背景
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
@@ -50,7 +48,7 @@
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
color: #ffffff;
|
color: rgba(0, 0, 0, 0.65); // 白色背景下使用深色文字
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -89,8 +87,9 @@
|
|||||||
|
|
||||||
// 主要按钮(去看看其他球局)
|
// 主要按钮(去看看其他球局)
|
||||||
&--primary {
|
&--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);
|
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 React, { useState, useEffect } from 'react';
|
||||||
import { View, Text } from '@tarojs/components';
|
import { View, Text, Image } from '@tarojs/components';
|
||||||
import Taro from '@tarojs/taro';
|
import Taro from '@tarojs/taro';
|
||||||
import { useGlobalState } from '@/store/global';
|
import { useGlobalState } from '@/store/global';
|
||||||
import { GeneralNavbar } from '@/components';
|
import { GeneralNavbar } from '@/components';
|
||||||
|
import emptyStateIcon from '@/static/emptyStatus/game-detail-empty.svg';
|
||||||
import './index.scss';
|
import './index.scss';
|
||||||
|
|
||||||
interface EmptyStateProps {
|
interface EmptyStateProps {
|
||||||
@@ -29,12 +44,13 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
|
|||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [countdown]);
|
}, [countdown]);
|
||||||
|
|
||||||
// 跳转到其他球局
|
// 跳转到其他球局 - 返回首页列表
|
||||||
const handle_go_to_other_games = () => {
|
const handle_go_to_other_games = () => {
|
||||||
if (onGoToOtherGames) {
|
if (onGoToOtherGames) {
|
||||||
onGoToOtherGames();
|
onGoToOtherGames();
|
||||||
} else {
|
} else {
|
||||||
Taro.switchTab({
|
// 使用 redirectTo 跳转到首页列表页(main_pages/index 默认显示 list tab)
|
||||||
|
(Taro as any).redirectTo({
|
||||||
url: '/main_pages/index',
|
url: '/main_pages/index',
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -45,13 +61,14 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
|
|||||||
if (onGoToHome) {
|
if (onGoToHome) {
|
||||||
onGoToHome();
|
onGoToHome();
|
||||||
} else {
|
} else {
|
||||||
const pages = Taro.getCurrentPages();
|
const pages = (Taro as any).getCurrentPages();
|
||||||
if (pages.length <= 1) {
|
if (pages.length <= 1) {
|
||||||
Taro.switchTab({
|
// 使用 redirectTo 跳转到首页列表页
|
||||||
|
(Taro as any).redirectTo({
|
||||||
url: '/main_pages/index',
|
url: '/main_pages/index',
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
Taro.navigateBack();
|
(Taro as any).navigateBack();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -61,8 +78,12 @@ const EmptyState: React.FC<EmptyStateProps> = ({ onGoToOtherGames, onGoToHome })
|
|||||||
<GeneralNavbar title="" showBack={true} />
|
<GeneralNavbar title="" showBack={true} />
|
||||||
|
|
||||||
<View className="empty_state_page__content">
|
<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">
|
<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