feat: 生成分享图

src/game_pages/detail/components/GamePlayAndReq/index.module.scss

@@ -0,0 +1,54 @@
+.detail-page-content-gameplay-requirements {
+  padding: 24px 15px 0;
+  box-sizing: border-box;
+
+  .gameplay-requirements-title {
+    overflow: hidden;
+    color: #fff;
+    height: 24px;
+    padding-bottom: 6px;
+    font-feature-settings: "liga" off, "clig" off;
+    text-overflow: ellipsis;
+    font-family: "PingFang SC";
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px; /* 150% */
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .gameplay-requirements {
+    padding: 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 2px;
+      align-self: stretch;
+
+      &-title {
+        color: rgba(255, 255, 255, 0.8);
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "PingFang SC";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 24px; /* 171.429% */
+      }
+
+      &-desc {
+        color: #fff;
+        font-feature-settings: "liga" off, "clig" off;
+        font-family: "PingFang SC";
+        font-size: 15px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px; /* 160% */
+      }
+    }
+  }
+}

src/game_pages/detail/components/GamePlayAndReq/index.tsx

@@ -0,0 +1,46 @@
+import { View, Text } from "@tarojs/components";
+import { genNTRPRequirementText } from "../../utils/helper";
+import styles from "./index.module.scss";
+
+// 玩法要求
+export default function GamePlayAndRequirement(props) {
+  const {
+    detail: { skill_level_min, skill_level_max, play_type, game_type },
+  } = props;
+
+  const requirements = [
+    {
+      title: "NTRP水平要求",
+      desc: genNTRPRequirementText(skill_level_min, skill_level_max),
+    },
+    {
+      title: "活动玩法",
+      desc: play_type || "-",
+    },
+    {
+      title: "人员构成",
+      desc: game_type || "-",
+    },
+  ];
+  return (
+    <View className={styles["detail-page-content-gameplay-requirements"]}>
+      {/* title */}
+      <View className={styles["gameplay-requirements-title"]}>
+        <Text>玩法要求</Text>
+      </View>
+      {/* requirements */}
+      <View className={styles["gameplay-requirements"]}>
+        {requirements.map((item, index) => (
+          <View key={index} className={styles["gameplay-requirements-item"]}>
+            <Text className={styles["gameplay-requirements-item-title"]}>
+              {item.title}
+            </Text>
+            <Text className={styles["gameplay-requirements-item-desc"]}>
+              {item.desc}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}