修改样式

src/components/GuideBar/index.tsx

@@ -7,7 +7,7 @@ import PublishMenu from "../PublishMenu";
 export type currentPageType = "games" | "message" | "personal";
 
 const GuideBar = (props) => {
-  const { currentPage } = props;
+  const { currentPage, guideBarClassName } = props;
 
   const guideItems = [
     {
@@ -57,7 +57,7 @@ const GuideBar = (props) => {
 
   return (
     <View className="guide-bar-container">
-      <View className="guide-bar">
+      <View className={`guide-bar ${guideBarClassName}`}>
         {/* guide area on the left */}
         <View className="guide-bar-pages">
           {guideItems.map((item) => (

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="localAreaContainer">
-          <View className="localAreaWrapper">
+            <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>
       )}

src/components/SearchBar/index.module.scss

@@ -8,7 +8,7 @@
   background-color: unset;
 
   :global(.nut-searchbar-content) {
-    box-shadow: 0 4px 48px #00000014;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.08);
   }
 
   .searchBarLeft {

src/config/images.js

@@ -66,4 +66,6 @@ export default {
     ICON_UPLOAD_IMG: require('@/static/publishBall/icon-upload-img.svg'),
     ICON_UPLOAD_SUCCESS: require('@/static/publishBall/icon-upload-success.svg'),
     ICON_CLOSE: require('@/static/publishBall/icon-close.svg'),
+    ICON_LIST_NTPR: require('@/static/list/ntpr.svg'),
+    ICON_LIST_CHANGDA: require('@/static/list/icon-changda.svg'),
   }

src/container/listContainer/index.scss

@@ -1,11 +1,9 @@
 .listContentWrapper {
-  // padding: 0 5px;
+  padding: 0 5px;
-  // background: #fafafa;
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding-bottom: 80px;
-  // min-height: 100vh;
 
   .recommendTextWrapper {
     display: flex;

src/container/listContainer/index.tsx

@@ -106,7 +106,7 @@ const ListContainer = (props) => {
               <NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} />
             );
           }
-          return <ListCard key={match.id || index} {...match} />;
+          return <ListCard key={match?.id || index} {...match} />;
         })}
       </>
     );

src/game_pages/list/index.module.scss

@@ -82,14 +82,9 @@
 
   .listTopSearchWrapper {
     padding: 0 15px;
-    // position: sticky;
+    background-color: #fff;
-    // background: #fefefe;
-    // z-index: 999;
   }
 
-  // .isScroll {
-  //   border-bottom: 0.5px solid #0000000F;
-  // }
 
   .listTopFilterWrapper {
     display: flex;
@@ -157,3 +152,7 @@
   pointer-events: none;
   /* 隐藏时不响应鼠标事件 */
 }
+
+.guideBarList {
+  z-index: 99;
+}

src/game_pages/list/index.tsx

@@ -432,7 +432,7 @@ const ListPage = () => {
           </View>
         </View>
       )}
-      <GuideBar currentPage="list" />
+      <GuideBar currentPage="list" guideBarClassName={styles.guideBarList} />
     </>
   );
 };

src/static/list/ntpr.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10" viewBox="0 0 20 10" fill="none">
+  <path d="M17.0237 0.950195C17.8751 0.950195 18.5768 1.10481 19.0657 1.49902C19.5567 1.89509 19.8235 2.52505 19.8235 3.45312C19.8235 4.34864 19.5565 5.01266 19.0676 5.45215C18.5796 5.89083 17.8781 6.09863 17.0237 6.09863H16.6008V9.16797H15.2141V0.950195H17.0237ZM16.6008 4.96484H16.9026C17.4513 4.96484 17.8377 4.84003 18.0872 4.59473C18.3364 4.34939 18.4592 3.97416 18.4592 3.45312C18.4592 2.92624 18.3364 2.58949 18.0901 2.38184C17.8415 2.17233 17.4552 2.08398 16.9026 2.08398H16.6008V4.96484Z" fill="black" stroke="black" stroke-width="0.1"/>
+  <path d="M12.1667 0.950195C12.8821 0.950195 13.5145 1.10253 13.9685 1.48438C14.4242 1.86764 14.6921 2.4749 14.6921 3.36523C14.6921 4.22287 14.4241 4.85915 13.9705 5.28027C13.8092 5.42996 13.6241 5.54973 13.4216 5.64453L14.8748 9.09863L14.9041 9.16797H13.4314L13.4187 9.13672L12.1355 5.90137H11.5789V9.16797H10.1921V0.950195H12.1667ZM11.5789 4.77832H12.0134C12.4386 4.77823 12.765 4.65925 12.9851 4.42871C13.2054 4.19775 13.3269 3.84646 13.3269 3.36523C13.3269 2.87788 13.2049 2.56112 12.9871 2.36523C12.7682 2.1686 12.4425 2.08405 12.0134 2.08398H11.5789V4.77832Z" fill="black" stroke="black" stroke-width="0.1"/>
+  <path d="M9.86768 0.950195V2.13867H8.0415V9.16797H6.64404V2.13867H4.80713V0.950195H9.86768Z" fill="black" stroke="black" stroke-width="0.1"/>
+  <path d="M1.54321 0.950195L1.55493 0.984375L3.02856 5.61621L3.02954 5.61719L3.48267 7.21484C3.42282 6.45819 3.35964 5.58161 3.35962 4.81738V0.950195H4.50513V9.16797H3.1311L3.12036 9.13281L1.65747 4.52441L1.65649 4.52246L1.19165 2.90137C1.25169 3.67145 1.31469 4.53397 1.3147 5.30078V9.16797H0.170166V0.950195H1.54321Z" fill="black" stroke="black" stroke-width="0.1"/>
+</svg>