fix: 修复走查样式问题

This commit is contained in:
2025-10-26 18:00:32 +08:00
parent 753b6b0c2c
commit 6dc9c7eff2
12 changed files with 213 additions and 43 deletions

View File

@@ -2,3 +2,10 @@
// font-family: 'PoetsenOne';
// src: url('./static/asserts/fonts/PoetsenOne-Regular.ttf') format('truetype');
// }
@font-face {
font-family: "Quicksand";
src: url("https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/other/57dc951f-f10e-45b7-9157-0b1e468187fd.ttf")
format("truetype");
font-display: swap;
}

View File

@@ -25,6 +25,17 @@ class App extends Component<AppProps> {
resolve({ event: 'agree' }); // 同意隐私协议
});
// Taro.loadFontFace({
// family: 'Quicksand',
// source: 'url("https://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/other/57dc951f-f10e-45b7-9157-0b1e468187fd.ttf")',
// global: true, // 全局生效
// success(res) {
// console.log('字体加载成功', res);
// },
// fail(err) {
// console.error('字体加载失败', err);
// }
// })
}
componentDidMount() {

View File

@@ -10,6 +10,7 @@ import CommonPopup from "../CommonPopup";
import styles from "./index.module.scss";
import detailService, { MATCH_STATUS } from "@/services/detailService";
import { useUserInfo } from "@/store/userStore";
import dayjs from "dayjs";
const CancelPopup = forwardRef((props, ref) => {
const { detail } = props;
@@ -185,6 +186,12 @@ export default forwardRef(function GameManagePopup(props, ref) {
detail.match_status
);
const inTwoHours = dayjs(detail.start_time).diff(dayjs(), "hour") < 2;
const hasOtherParticiappants = (detail.participants || [])
.filter((item) => item.status === "joined")
.some((item) => item.user.id !== userInfo.id);
return (
<>
<CommonPopup
@@ -194,17 +201,20 @@ export default forwardRef(function GameManagePopup(props, ref) {
zIndex={1001}
enableDragToClose={false}
onClose={onClose}
style={{ minHeight: "unset" }}
>
<View className={styles.container}>
{!inTwoHours && !hasOtherParticiappants && (
<View className={styles.button} onClick={handleEditGame}>
</View>
)}
{finished && (
<View className={styles.button} onClick={handleRepubGame}>
</View>
)}
{!finished && (
{!inTwoHours && !hasOtherParticiappants && (
<View className={styles.button} onClick={handleCancelGame}>
</View>

View File

@@ -42,8 +42,8 @@ export default {
ICON_DETAIL_NOTICE: require('@/static/detail/icon-notice.svg'),
ICON_DETAIL_APPLICATION_ADD: require('@/static/detail/icon-application-add.svg'),
ICON_DETAIL_COMMENT: require('@/static/detail/icon-comment.svg'),
ICON_DETAIL_COMMENT_DARK: require('@/static/detail/icon-comment-dark.svg'),
ICON_DETAIL_SHARE: require('@/static/detail/icon-share-dark.svg'),
ICON_DETAIL_COMMENT_LIGHT: require('@/static/detail/icon-comment-light.svg'),
ICON_DETAIL_SHARE: require('@/static/detail/icon-share-light.svg'),
ICON_GUIDE_BAR_PUBLISH: require('@/static/common/guide-bar-publish.svg'),
ICON_NAVIGATOR_BACK: require('@/static/common/navigator-back.svg'),
ICON_LIST_PLAYING_GAME: require('@/static/list/icon-paying-game.svg'),

View File

@@ -30,6 +30,7 @@
color: #fff;
background: #536272;
flex-shrink: 0;
font-family: "Quicksand";
.month {
width: 100%;
@@ -42,6 +43,7 @@
align-items: center;
// border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #7b828b;
font-weight: 600;
}
.day {
@@ -52,6 +54,7 @@
box-sizing: border-box;
flex-direction: column;
align-items: center;
font-weight: 700;
// border: 0.5px solid rgba(255, 255, 255, 0.08);
// background: rgba(255, 255, 255, 0.25);
// background-color: #536272;

View File

@@ -146,7 +146,7 @@
gap: 6px;
flex: 0 0 auto;
border-radius: 20px;
border: 1px solid rgba(33, 178, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.16);
padding: 12px 0 12px 15px;
box-sizing: border-box;
@@ -218,8 +218,8 @@
font-size: 11px;
font-style: normal;
font-weight: 500;
line-height: 20px; /* 181.818% */
letter-spacing: -0.23px;
line-height: 20px;
letter-spacing: 1px;
display: flex;
height: 20px;
padding: 6px 8px;
@@ -229,6 +229,17 @@
border-radius: 999px;
// border: 0.5px solid rgba(0, 0, 0, 0.16);
background: rgba(255, 255, 255, 0.12);
& > .weaktip {
color: rgba(255, 255, 255, 0.25);
}
& > .spearator {
width: 1px;
height: 8px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.25);
}
}
}
}

View File

@@ -1,6 +1,7 @@
import Taro from "@tarojs/taro";
import dayjs from "dayjs";
import { View, Text, Image, ScrollView } from "@tarojs/components";
import classnames from "classnames";
import { calculateDistance } from "@/utils";
import { useUserInfo } from "@/store/userStore";
import * as LoginService from "@/services/loginService";
@@ -43,7 +44,7 @@ function genRecommendGames(games, location, avatar) {
checkedApplications: current_players,
levelRequirements:
skill_level_max !== skill_level_min
? `${skill_level_min || "-"}${skill_level_max || "-"}`
? `${skill_level_min || "-"}-${skill_level_max || "-"}`
: skill_level_min === "1"
? "无要求"
: `${skill_level_min}以上`,
@@ -234,17 +235,21 @@ export default function OrganizerInfo(props) {
}
>
<View
className={
className={classnames(
styles[
"recommend-games-list-item-addon-message-applications"
]
}
],
styles.joinMsg
)}
>
<Text>
{game.checkedApplications}/
{game.applications}
<Text></Text>
<View>
<Text>{game.checkedApplications}</Text>
<Text className={styles.weaktip}>
/{game.applications}
</Text>
</View>
</View>
<View
className={
styles[
@@ -253,8 +258,10 @@ export default function OrganizerInfo(props) {
}
>
<Text>{game.levelRequirements}</Text>
<View className={styles.spearator} />
<Text>{game.playType}</Text>
</View>
<View
{/* <View
className={
styles[
"recommend-games-list-item-addon-message-play-type"
@@ -262,7 +269,7 @@ export default function OrganizerInfo(props) {
}
>
<Text>{game.playType}</Text>
</View>
</View> */}
</View>
</View>
</View>

View File

@@ -20,8 +20,10 @@
justify-content: center;
gap: 16px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: #fff;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.25) inset;
backdrop-filter: blur(6px);
color: #fff;
.sticky-bottom-bar-share {
display: flex;
@@ -35,7 +37,6 @@
}
&-text {
color: rgba(0, 0, 0, 0.85);
font-size: 10px;
font-style: normal;
font-weight: 500;
@@ -61,7 +62,6 @@
}
&-text {
color: rgba(0, 0, 0, 0.85);
font-size: 10px;
font-style: normal;
font-weight: 500;
@@ -82,11 +82,11 @@
flex: 1 0 0;
border-radius: 16px;
// border: 1px solid rgba(0, 0, 0, 0.06);
background: #fff;
// background: #fff;
overflow: hidden;
&.disabled {
background-color: #b4b4b4;
&.disabled > .sticky-bottom-bar-join-game {
background: #b4b4b4;
color: rgba(60, 60, 67, 0.6);
pointer-events: none;
}
@@ -94,24 +94,72 @@
.sticky-bottom-bar-join-game {
margin-left: auto;
// width: 151px;
height: 100%;
padding-bottom: 14px;
box-sizing: border-box;
display: flex;
align-items: center;
align-items: flex-end;
justify-content: center;
flex: 1;
&-price {
font-family: "PoetsenOne";
font-size: 28px;
font-weight: 400;
line-height: 24px; /* 114.286% */
letter-spacing: -0.56px;
font-family: "Quicksand";
font-style: italic;
font-size: 20px;
border-radius: 16px 0 0 16px;
border: 2px solid rgba(0, 0, 0, 0.06);
background: linear-gradient(95deg, #fff 20.85%, #eaeaea 73.29%);
box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px);
color: #000;
// &-price {
// font-size: 28px;
// font-weight: 400;
// line-height: 24px; /* 114.286% */
// letter-spacing: -0.56px;
// color: #000;
// }
& .crrrencySymbol {
width: 8px;
height: 16px;
line-height: 16px;
// margin-top: 5px;
}
& > .integer {
font-feature-settings: "liga" off, "clig" off;
font-family: "DingTalk JinBuTi";
font-size: 20px;
// font-style: normal;
font-weight: 400;
line-height: 20px;
}
& > .decimalPart {
font-feature-settings: "liga" off, "clig" off;
font-family: "DingTalk JinBuTi";
font-size: 12px;
font-weight: 400;
line-height: 16px;
}
& > .btnText {
font-feature-settings: "liga" off, "clig" off;
font-family: "DingTalk JinBuTi";
// font-style: italic;
font-size: 18px;
font-weight: 400;
line-height: 20px;
letter-spacing: -1px;
margin-left: 8px;
}
}
.game_manage {
width: 100px;
margin-left: auto;
font-family: "Quicksand";
font-style: italic;
height: 100%;
display: flex;
align-items: center;
@@ -119,6 +167,18 @@
background: #000;
color: #fff;
pointer-events: all;
border-radius: 0 16px 16px 0;
border-top: 2px solid rgba(255, 255, 255, 0.06);
border-right: 2px solid rgba(255, 255, 255, 0.06);
border-bottom: 2px solid rgba(255, 255, 255, 0.06);
background: radial-gradient(
223.82% 178.84% at -64.5% 0%,
#525252 16.88%,
#222 54.19%,
#000 100%
);
// box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
backdrop-filter: blur(16px);
}
}
}

View File

@@ -8,6 +8,7 @@ import { EvaluateCallback, EvaluateScene } from "@/store/evaluateStore";
import { MATCH_STATUS, IsSubstituteSupported } from "@/services/detailService";
import { GameManagePopup, NTRPEvaluatePopup } from "@/components";
import img from "@/config/images";
import RMB_ICON from "@/static/detail/rmb.svg";
import { toast, navto } from "../../utils/helper";
import styles from "./index.module.scss";
@@ -87,7 +88,18 @@ export default function StickyButton(props) {
if (!user_action_status) {
return;
}
const displayPrice = is_organizer ? 0 : price;
const priceStrArr = price.toString().split(".");
const displayPrice = is_organizer ? (
<>
<Text className={styles.integer}>0</Text>
{/* <Text className={styles.decimalPart}>.00</Text> */}
</>
) : (
<>
<Text className={styles.integer}>{priceStrArr[0]}</Text>
<Text className={styles.decimalPart}>.{priceStrArr[1]}</Text>
</>
);
// user_action_status.can_assess = true;
// user_action_status.can_join = false;
// console.log(user_action_status, "user_action");
@@ -132,17 +144,35 @@ export default function StickyButton(props) {
}
if (waiting_start) {
return {
text: () => <Text>¥{displayPrice} </Text>,
text: () => (
<>
<Image className={styles.crrrencySymbol} src={RMB_ICON} />
{displayPrice}
<Text className={styles.btnText}></Text>
</>
),
action: () => toast("已加入"),
};
} else if (is_substituting) {
return {
text: () => <Text>¥{displayPrice} </Text>,
text: () => (
<>
<Image className={styles.crrrencySymbol} src={RMB_ICON} />
{displayPrice}
<Text className={styles.btnText}></Text>
</>
),
action: () => toast("已加入候补"),
};
} else if (can_pay) {
return {
text: () => <Text>¥{price} </Text>,
text: () => (
<>
<Image src={RMB_ICON} />
{price}
<Text className={styles.btnText}></Text>
</>
),
action: async () => {
const res = await OrderService.getUnpaidOrder(id);
if (res.code === 0) {
@@ -154,19 +184,37 @@ export default function StickyButton(props) {
};
} else if (can_substitute) {
return {
text: () => <Text>¥{displayPrice} </Text>,
text: () => (
<>
<Image className={styles.crrrencySymbol} src={RMB_ICON} />
{displayPrice}
<Text className={styles.btnText}></Text>
</>
),
action: handleJoinGame,
};
} else if (can_join) {
return {
text: () => {
return <Text>¥{displayPrice} </Text>;
return (
<>
<Image className={styles.crrrencySymbol} src={RMB_ICON} />
{displayPrice}
<Text className={styles.btnText}></Text>
</>
);
},
action: handleJoinGame,
};
} else if (can_assess) {
return {
text: () => <Text>¥{displayPrice} </Text>,
text: () => (
<>
<Image className={styles.crrrencySymbol} src={RMB_ICON} />
{displayPrice}
<Text className={styles.btnText}></Text>
</>
),
action: handleSelfEvaluate,
};
}
@@ -190,7 +238,7 @@ export default function StickyButton(props) {
if (typeof ActionText === "string") {
ActionText = () => {
return <Text>{text as string}</Text>;
return <Text className={styles.btnText}>{text as string}</Text>;
};
}
@@ -220,7 +268,7 @@ export default function StickyButton(props) {
>
<Image
className={styles["sticky-bottom-bar-comment-icon"]}
src={img.ICON_DETAIL_COMMENT_DARK}
src={img.ICON_DETAIL_COMMENT_LIGHT}
/>
<Text className={styles["sticky-bottom-bar-comment-text"]}>
{commentCount > 0 ? commentCount : "评论"}

View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M13.75 15.8333H9.16669V12.5H15V9.16663H18.3334V15.8333H16.25L15 17.0833L13.75 15.8333Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.66669 2.5H15V12.5H7.08335L5.41669 14.1667L3.75002 12.5H1.66669V2.5Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.91669 7.5H8.33335" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
<path d="M10.8333 7.5H11.25" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
<path d="M5 7.5H5.41667" stroke="white" stroke-width="1.66667" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 738 B

View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<path d="M9.16665 0.833374L16.6666 8.33337L9.16665 15.4167V10.8334C3.33331 10.8334 0.833313 17.0834 0.833313 17.0834C0.833313 10 2.91665 5.41671 9.16665 5.41671V0.833374Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 363 B

View File

@@ -0,0 +1,3 @@
<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.73598 5.13596H0.251982L0.395982 3.93596H2.30398L0.227982 -4.43459e-05H1.91998L3.61198 3.56396L6.10798 -4.43459e-05H7.84798L4.87198 3.93596H6.71998L6.57598 5.13596H4.15198L4.05598 5.97596H6.46798L6.32398 7.17596H3.91198L3.68398 9.01196H2.26798L2.49598 7.17596H-1.75685e-05L0.143982 5.97596H2.63998L2.73598 5.13596Z" fill="black"/>
</svg>

After

Width:  |  Height:  |  Size: 443 B