修改样式

src/components/ListCard/index.scss

@@ -1,7 +1,8 @@
 .listCard {
-  background: linear-gradient(90deg, rgba(183, 248, 113, 0.5) 0%, rgba(183, 248, 113, 0.1) 100%);
+  // background: linear-gradient(90deg, rgba(183, 248, 113, 0.5) 0%, rgba(183, 248, 113, 0.1) 100%);
   border-radius: 20px;
   border-width: 0.5px;
+  background: linear-gradient(90deg, #CCFFF2 0%, rgba(204, 255, 242, 0.30) 100%);
 }
 
 .listItem {
@@ -70,10 +71,35 @@
   margin-bottom: 4px;
 }
 
+.ntprIcon {
+  width: 20px;
+}
+
+.ntprTag {
+  gap: 2px;
+}
+
+.typeLine {
+  width: 7px;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 8px;
+    border-radius: 99px;
+    background: rgba(0, 0, 0, 0.25);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
 .bottom-info {
   display: flex;
   align-items: center;
-  margin-top: 4px;
+  margin-top: 8px;
   column-gap: 4px;
 }
 
@@ -141,6 +167,8 @@
   flex-shrink: 0;
   color: #000000;
   font-size: 11px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 .tag-text-max {
@@ -278,6 +306,9 @@
 
   .localAreaTitle {
     flex-shrink: 0;
+    font-size: 12px;
+    line-height: 20px;
+    font-weight: 600;
   }
 
   .smoothTitle {
@@ -297,11 +328,22 @@
     height: 14px;
   }
 
+  .iconListPlayingGame {
+    width: 73px;
+    height: 18px;
+  }
+
+  .localAreaContainer {
+    display: flex;
+    gap: 4px;
+  }
+
   .localArea {
     border: 0.5px solid #FFFFFFA6;
     border-radius: 50%;
     flex-shrink: 0;
   }
+
   .localAreaText {
     white-space: nowrap;
     overflow: hidden;

src/components/ListCard/index.tsx

@@ -3,6 +3,7 @@ import Taro from "@tarojs/taro";
 import img from "../../config/images";
 import { ListCardProps } from "../../../types/list/types";
 import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
+import images from '@/config/images'
 import "./index.scss";
 
 const ListCard: React.FC<ListCardProps> = ({
@@ -157,20 +158,24 @@ const ListCard: React.FC<ListCardProps> = ({
             <View className="tags">
               <View className="tag">
                 <Text className="tag-text">
-                  报名人数 {current_players}/
+                  已加入 {current_players}/
                   <Text className="tag-text-max">{max_players}</Text>
                 </Text>
               </View>
-              <View className="tag">
+              <View className="tag ntprTag">
+                <Image src={images.ICON_LIST_NTPR} className='ntprIcon' />
                 <Text className="tag-text">
-                  {skill_level_min} 至 {skill_level_max}
+                  {Number(skill_level_min)?.toFixed(1)} - {Number(skill_level_max)?.toFixed(1)}
                 </Text>
+                {/* 分割线 */}
+                <View className="typeLine" />
+                <Text className="tag-text">{play_type}</Text>
               </View>
-              {play_type && (
+              {/* {play_type && (
                 <View className="tag">
                   <Text className="tag-text">{play_type}</Text>
                 </View>
-              )}
+              )} */}
             </View>
           </View>
         </View>
@@ -183,16 +188,19 @@ const ListCard: React.FC<ListCardProps> = ({
         <View className="smoothPlayingGame">
           <View className="smoothWrapper">
             <Image
-              src={img.ICON_LIST_PLAYING_GAME}
+              src={img.ICON_LIST_CHANGDA}
               className="iconListPlayingGame"
             />
-            <Text className="smoothTitle">{game_type}</Text>
+            {/* <Text className="smoothTitle">{game_type}</Text> */}
           </View>
           <View className="line" />
-          <View className="localAreaTitle">场馆方:</View>
-          <View className="localAreaWrapper">
+          <View className="localAreaContainer">
+            <View className="localAreaTitle">场馆方:</View>
+            <View className="localAreaWrapper">
             <Image className="localArea" src={venueImage} />
-            <Text className="localAreaText">{venue_description}</Text>
+              <Text className="localAreaText">{venue_description}</Text>
+            </View>
+
           </View>
         </View>
       )}