fix: 修复走查样式问题

2025-10-26 18:00:32 +08:00
parent 753b6b0c2c
commit 6dc9c7eff2
12 changed files with 213 additions and 43 deletions
--- 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;
--- 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);
+                }
              }
            }
          }
--- 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) {
                      }
                    >
                      <View
-                        className={
+                        className={classnames(
                          styles[
                            "recommend-games-list-item-addon-message-applications"
-                          ]
-                        }
+                          ],
+                          styles.joinMsg
+                        )}
                      >
-                        <Text>
-                          报名人数 {game.checkedApplications}/
-                          {game.applications}
-                        </Text>
+                        <Text>已加入</Text>
+                        <View>
+                          <Text>{game.checkedApplications}</Text>
+                          <Text className={styles.weaktip}>
+                            /{game.applications}
+                          </Text>
+                        </View>
                      </View>
                      <View
                        className={
@@ -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>
--- 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);
    }
  }
 }
--- 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 ? (
+      <>
+        <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 : "评论"}