diff --git a/src/components/GuideBar/index.tsx b/src/components/GuideBar/index.tsx index 57c884a..60522bf 100644 --- a/src/components/GuideBar/index.tsx +++ b/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 ( - + {/* guide area on the left */} {guideItems.map((item) => ( diff --git a/src/components/ListCard/index.scss b/src/components/ListCard/index.scss index 6292d27..c28b995 100644 --- a/src/components/ListCard/index.scss +++ b/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; diff --git a/src/components/ListCard/index.tsx b/src/components/ListCard/index.tsx index 5bf8d6a..6f7b205 100644 --- a/src/components/ListCard/index.tsx +++ b/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 = ({ @@ -157,20 +158,24 @@ const ListCard: React.FC = ({ - 报名人数 {current_players}/ + 已加入 {current_players}/ {max_players} - + + - {skill_level_min} 至 {skill_level_max} + {Number(skill_level_min)?.toFixed(1)} - {Number(skill_level_max)?.toFixed(1)} + {/* 分割线 */} + + {play_type} - {play_type && ( + {/* {play_type && ( {play_type} - )} + )} */} @@ -183,16 +188,19 @@ const ListCard: React.FC = ({ - {game_type} + {/* {game_type} */} - 场馆方: - + + 场馆方: + - {venue_description} + {venue_description} + + )} diff --git a/src/components/SearchBar/index.module.scss b/src/components/SearchBar/index.module.scss index 0790b46..9d656f5 100644 --- a/src/components/SearchBar/index.module.scss +++ b/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 { diff --git a/src/config/images.js b/src/config/images.js index 58330fb..4a8f4c0 100644 --- a/src/config/images.js +++ b/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'), } diff --git a/src/container/listContainer/index.scss b/src/container/listContainer/index.scss index ad059ce..170724e 100644 --- a/src/container/listContainer/index.scss +++ b/src/container/listContainer/index.scss @@ -1,11 +1,9 @@ .listContentWrapper { - // padding: 0 5px; - // background: #fafafa; + padding: 0 5px; display: flex; flex-direction: column; gap: 5px; padding-bottom: 80px; - // min-height: 100vh; .recommendTextWrapper { display: flex; diff --git a/src/container/listContainer/index.tsx b/src/container/listContainer/index.tsx index 93ee7b4..e926649 100644 --- a/src/container/listContainer/index.tsx +++ b/src/container/listContainer/index.tsx @@ -106,7 +106,7 @@ const ListContainer = (props) => { ); } - return ; + return ; })} ); diff --git a/src/game_pages/list/index.module.scss b/src/game_pages/list/index.module.scss index db7b707..0360952 100644 --- a/src/game_pages/list/index.module.scss +++ b/src/game_pages/list/index.module.scss @@ -82,14 +82,9 @@ .listTopSearchWrapper { padding: 0 15px; - // position: sticky; - // background: #fefefe; - // z-index: 999; + background-color: #fff; } - // .isScroll { - // border-bottom: 0.5px solid #0000000F; - // } .listTopFilterWrapper { display: flex; @@ -157,3 +152,7 @@ pointer-events: none; /* 隐藏时不响应鼠标事件 */ } + +.guideBarList { + z-index: 99; +} \ No newline at end of file diff --git a/src/game_pages/list/index.tsx b/src/game_pages/list/index.tsx index 847603a..33ae6d4 100644 --- a/src/game_pages/list/index.tsx +++ b/src/game_pages/list/index.tsx @@ -432,7 +432,7 @@ const ListPage = () => { )} - + ); }; diff --git a/src/static/list/icon-changda.svg b/src/static/list/icon-changda.svg new file mode 100644 index 0000000..4382fd3 --- /dev/null +++ b/src/static/list/icon-changda.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/static/list/ntpr.svg b/src/static/list/ntpr.svg new file mode 100644 index 0000000..b229b8c --- /dev/null +++ b/src/static/list/ntpr.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file