From 6dc9c7eff2e127a6caf6ecb4bb2ca4965b885625 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Sun, 26 Oct 2025 18:00:32 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B5=B0=E6=9F=A5?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.scss | 9 +- src/app.ts | 11 +++ src/components/GameManagePopup/index.tsx | 18 +++- src/config/images.js | 4 +- .../components/GameInfo/index.module.scss | 3 + .../OrganizerInfo/index.module.scss | 17 +++- .../detail/components/OrganizerInfo/index.tsx | 27 +++--- .../components/StickyBottom/index.module.scss | 88 ++++++++++++++++--- .../detail/components/StickyBottom/index.tsx | 66 ++++++++++++-- src/static/detail/icon-comment-light.svg | 7 ++ src/static/detail/icon-share-light.svg | 3 + src/static/detail/rmb.svg | 3 + 12 files changed, 213 insertions(+), 43 deletions(-) create mode 100644 src/static/detail/icon-comment-light.svg create mode 100644 src/static/detail/icon-share-light.svg create mode 100644 src/static/detail/rmb.svg diff --git a/src/app.scss b/src/app.scss index 0bd3f2f..775f9bc 100644 --- a/src/app.scss +++ b/src/app.scss @@ -1,4 +1,11 @@ // @font-face { // font-family: 'PoetsenOne'; // src: url('./static/asserts/fonts/PoetsenOne-Regular.ttf') format('truetype'); -// } \ No newline at end of file +// } + +@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; +} diff --git a/src/app.ts b/src/app.ts index 713742a..4388db6 100644 --- a/src/app.ts +++ b/src/app.ts @@ -25,6 +25,17 @@ class App extends Component { 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() { diff --git a/src/components/GameManagePopup/index.tsx b/src/components/GameManagePopup/index.tsx index e7c1daa..4d98074 100644 --- a/src/components/GameManagePopup/index.tsx +++ b/src/components/GameManagePopup/index.tsx @@ -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 ( <> - - 编辑活动 - + {!inTwoHours && !hasOtherParticiappants && ( + + 编辑活动 + + )} {finished && ( 重新发布 )} - {!finished && ( + {!inTwoHours && !hasOtherParticiappants && ( 取消活动 diff --git a/src/config/images.js b/src/config/images.js index b61abfb..58330fb 100644 --- a/src/config/images.js +++ b/src/config/images.js @@ -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'), diff --git a/src/game_pages/detail/components/GameInfo/index.module.scss b/src/game_pages/detail/components/GameInfo/index.module.scss index cea7cb5..17b7a00 100644 --- a/src/game_pages/detail/components/GameInfo/index.module.scss +++ b/src/game_pages/detail/components/GameInfo/index.module.scss @@ -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; diff --git a/src/game_pages/detail/components/OrganizerInfo/index.module.scss b/src/game_pages/detail/components/OrganizerInfo/index.module.scss index bebb99d..c10d8ed 100644 --- a/src/game_pages/detail/components/OrganizerInfo/index.module.scss +++ b/src/game_pages/detail/components/OrganizerInfo/index.module.scss @@ -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); + } } } } diff --git a/src/game_pages/detail/components/OrganizerInfo/index.tsx b/src/game_pages/detail/components/OrganizerInfo/index.tsx index a3a772a..37861ca 100644 --- a/src/game_pages/detail/components/OrganizerInfo/index.tsx +++ b/src/game_pages/detail/components/OrganizerInfo/index.tsx @@ -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,16 +235,20 @@ export default function OrganizerInfo(props) { } > - - 报名人数 {game.checkedApplications}/ - {game.applications} - + 已加入 + + {game.checkedApplications} + + /{game.applications} + + {game.levelRequirements} + + {game.playType} - {game.playType} - + */} diff --git a/src/game_pages/detail/components/StickyBottom/index.module.scss b/src/game_pages/detail/components/StickyBottom/index.module.scss index 5239968..5fe515a 100644 --- a/src/game_pages/detail/components/StickyBottom/index.module.scss +++ b/src/game_pages/detail/components/StickyBottom/index.module.scss @@ -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; + 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-family: "PoetsenOne"; - font-size: 28px; + // &-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: 24px; /* 114.286% */ - letter-spacing: -0.56px; - color: #000; + 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); } } } diff --git a/src/game_pages/detail/components/StickyBottom/index.tsx b/src/game_pages/detail/components/StickyBottom/index.tsx index 3271df6..df270b6 100644 --- a/src/game_pages/detail/components/StickyBottom/index.tsx +++ b/src/game_pages/detail/components/StickyBottom/index.tsx @@ -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 ? ( + <> + 0 + {/* .00 */} + + ) : ( + <> + {priceStrArr[0]} + .{priceStrArr[1]} + + ); // 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: () => ¥{displayPrice} 已加入, + text: () => ( + <> + + {displayPrice} + 已加入 + + ), action: () => toast("已加入"), }; } else if (is_substituting) { return { - text: () => ¥{displayPrice} 已加入候补, + text: () => ( + <> + + {displayPrice} + 已加入候补 + + ), action: () => toast("已加入候补"), }; } else if (can_pay) { return { - text: () => ¥{price} 继续支付, + text: () => ( + <> + + {price} + 继续支付 + + ), 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: () => ¥{displayPrice} 我要候补, + text: () => ( + <> + + {displayPrice} + 我要候补 + + ), action: handleJoinGame, }; } else if (can_join) { return { text: () => { - return ¥{displayPrice} 立即加入; + return ( + <> + + {displayPrice} + 立即加入 + + ); }, action: handleJoinGame, }; } else if (can_assess) { return { - text: () => ¥{displayPrice} 立即加入, + text: () => ( + <> + + {displayPrice} + 立即加入 + + ), action: handleSelfEvaluate, }; } @@ -190,7 +238,7 @@ export default function StickyButton(props) { if (typeof ActionText === "string") { ActionText = () => { - return {text as string}; + return {text as string}; }; } @@ -220,7 +268,7 @@ export default function StickyButton(props) { > {commentCount > 0 ? commentCount : "评论"} diff --git a/src/static/detail/icon-comment-light.svg b/src/static/detail/icon-comment-light.svg new file mode 100644 index 0000000..6ee6fbb --- /dev/null +++ b/src/static/detail/icon-comment-light.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/static/detail/icon-share-light.svg b/src/static/detail/icon-share-light.svg new file mode 100644 index 0000000..562b901 --- /dev/null +++ b/src/static/detail/icon-share-light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/static/detail/rmb.svg b/src/static/detail/rmb.svg new file mode 100644 index 0000000..040b793 --- /dev/null +++ b/src/static/detail/rmb.svg @@ -0,0 +1,3 @@ + + +