no message

src/components/GameItem/index.jsx

@@ -15,8 +15,37 @@ import {getGameLike, isLogined, updateGameLike} from "@features/mainSlice";
 import {updatePageGameLike} from "@features/pageSlice";
 import SvgIcon from "@components/SvgIcon";
 import {reqUpdateFavoInfo} from "@features/api";
-
-const GameItem=({data,handleRoom,...props})=>{
+import styled from 'styled-components/macro';
+export const GameImgAspectRatio=384/516;
+const StyledGridItem = styled.div`
+    ${(props) => {
+        let whStyle=props.$whStyle;
+        let width='';
+        let aspectRatio='';
+        if (whStyle!=null){
+            width=`width:${whStyle.width} !important;`;
+            aspectRatio=`aspect-ratio:${whStyle.aspectRatio} !important;`;
+        }
+        return `
+            ${width}
+            ${aspectRatio}
+        `
+    }}
+`
+const StyledImgWrap=styled.button`
+    aspect-ratio: ${GameImgAspectRatio};
+    ${(props) => {
+        let whStyle=props.$whStyle;
+        let aspectRatio='';
+        if (whStyle!=null){
+            aspectRatio=`aspect-ratio:${whStyle.aspectRatio} !important;`;
+        }
+        return `
+            ${aspectRatio}
+        `
+    }}
+`
+const GameItem=({data,handleRoom,whStyle,...props})=>{
     const navigate=useNavigate();
     const like=useSelector(getGameLike(data.id));
     const isLogin=useSelector(isLogined);
@@ -106,9 +135,16 @@ const GameItem=({data,handleRoom,...props})=>{
     //         </div>
     //     </div>
     // )
+    const getImgixW=()=>{
+        let baseAspectRatio=GameImgAspectRatio;
+        let whAspectRatio=baseAspectRatio;
+        if (whStyle!=null&&whStyle.aspectRatio!=null)whAspectRatio=Number(whStyle.aspectRatio);
+        let width=parseInt(384*(whAspectRatio/baseAspectRatio));
+        return width;
+    }
     return (
-        <div className={`${styles.grid_item}`} {...props}>
-            <button className={styles.game_img_wrap} onClick={(e)=>{
+        <StyledGridItem $whStyle={whStyle} className={`${styles.grid_item}`} {...props}>
+            <StyledImgWrap $whStyle={whStyle} className={styles.game_img_wrap} onClick={(e)=>{
                 // onEnterGame();
                 // if (handleRoom)handleRoom(e,data);
                 handleEnterRoom(e)
@@ -120,15 +156,15 @@ const GameItem=({data,handleRoom,...props})=>{
                 {/*    wrapperClassName={`lazy-image ${styles.game_img}`}*/}
                 {/*/>*/}
                 {/*<Imgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={192}></Imgix>*/}
-                <LazyImgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={384}></LazyImgix>
-            </button>
+                <LazyImgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={getImgixW()}></LazyImgix>
+            </StyledImgWrap>
             <button className={styles.favorite_con} onClick={handleLike}>
                 {
                     // like?(<LikeIcon></LikeIcon>):(<UNLikeIcon></UNLikeIcon>)
                     <SvgIcon className={`${styles.icon} ${like?styles.icon_active:''}`} herf={like?"icon_Favorites1":"icon_Favorites"}></SvgIcon>
                 }
             </button>
-        </div>
+        </StyledGridItem>
     )
 }
-export default GameItem;
+export default GameItem;

src/components/GameItem/styles.module.scss

@@ -14,7 +14,8 @@
     //display: block;
     position: relative;
     background-color: var(--widget-grid-bg);
-    border-radius: 0.8rem;
+    //border-radius: 0.8rem;
+    border-radius: 0.5rem;
     aspect-ratio:384/516;
     overflow: hidden;
     & .game_img{

src/components/GameList/index.jsx

@@ -1,24 +1,15 @@
 import styles from "@components/GameList/styles.module.scss";
 import React, {useEffect, useRef, useState} from "react";
-import GameItem from "@components/GameItem";
+import GameItem, {GameImgAspectRatio, GameItemImgAspectRatio} from "@components/GameItem";
 import {REQ_STATUS} from "@api/config";
 import SmallLoading from "@components/SmallLoading";
 import {useThemeProvider} from "@contexts/themeContext";
 import GameRoom from "@components/GameRoom";
-import {total} from "react-big-calendar/lib/utils/dates";
-import styled from 'styled-components/macro';
 import {useWindowSize} from "react-use";
 const i18n =global.i18n;
 const objInfo={
     timer:null
 }
-const StyledListRow=styled.div`
-    ${(props) => {
-        return `
-           grid-template-columns: none !important;
-        `
-    }}
-`
 const GameList=({data,status,reqMore,user})=>{
     // data={
     //     type:0,//游戏分类
@@ -85,7 +76,7 @@ const GameList=({data,status,reqMore,user})=>{
     //         },
     //     ]
     // }
-    const {isMobile} = useThemeProvider();
+    const {isMobile,fontScale} = useThemeProvider();
     const M_LIST_COL=3;
     const M_LIST_ROW=1;
     const [selected,setSelected]=useState(-1);
@@ -108,8 +99,30 @@ const GameList=({data,status,reqMore,user})=>{
         }
     },[])
     useEffect(()=>{
-
+        initGridsInfo();
     },[gameListRef,width])
+    const initGridsInfo=()=>{
+        let parent=gameListRef.current;
+        if (parent!=null){
+            let totalCol=3;
+            if (!isMobile())totalCol=7;
+            let gridBaseRatio=GameImgAspectRatio;
+            let totalWidth=parent.clientWidth;
+            let rowGap = window.getComputedStyle(parent).getPropertyValue('grid-row-gap');
+            let gap=Number(rowGap.replace("px",""));
+            if (gap===0||isNaN(gap))gap=0.75*16*fontScale;
+            let gridsData={};
+            for (let i=1;i<=6;i++){
+                let gridNum=i;
+                let gridWidth=(totalWidth-(totalCol-1)*gap)/totalCol;
+                let itemWidth=gridWidth*gridNum+(gridNum-1)*gap;
+                let width=itemWidth+"px";
+                let aspectRatio=gridBaseRatio*(itemWidth/gridWidth);
+                gridsData[i]={width,aspectRatio};
+            }
+            setGridInfo(gridsData);
+        }
+    }
     const resetTimer=()=>{
         if (objInfo.timer!=null){
             clearTimeout(objInfo.timer);
@@ -164,35 +177,19 @@ const GameList=({data,status,reqMore,user})=>{
         setRoomRow({});
         setShowPopRoom(false);
     }
-    const getGridItemStyle=(parent,totalCol,gridNum)=>{
-        const gridBaseRatio=384/516;
-        let width="0px";
-        let aspectRatio=gridBaseRatio;
-        if (parent!=null){
-            let totalWidth=parent.clientWidth;
-            let rowGap = window.getComputedStyle(parent).getPropertyValue('grid-row-gap');
-            let gap=Number(rowGap.replace("px",""));
-            let gridWidth=(totalWidth-(totalCol-1)*gap)/totalCol;
-            let gridNum=gridNum!=null?gridNum:1;
-            let itemWidth=gridWidth*gridNum+(gridNum-1)*gap;
-            width=itemWidth+"px";
-            aspectRatio=gridBaseRatio*(itemWidth/gridWidth);
-        }
-        return {
-            width,
-            aspectRatio
-        }
-    }
     const renderGameListDesktop=()=>{
         let list=data.data;
         if (list==null)list=[];
         return (
             <>
-                <div id={"gameList"} className={styles.game_list}>
+                <div ref={gameListRef} id={"gameList"} className={styles.game_list}>
                     {
                         list.map((item, index) => {
+                            let gridNum=item.gridNum!=null?item.gridNum:1;
+                            // gridNum=Math.floor(Math.random()*3)+1;
+                            let whStyle=gridInfo[gridNum];
                             return (
-                                <GameItem key={index} data={item} handleRoom={handlePopSelected}></GameItem>
+                                <GameItem key={index} data={item} handleRoom={handlePopSelected} whStyle={whStyle}></GameItem>
                             )
                         })
                     }
@@ -211,9 +208,7 @@ const GameList=({data,status,reqMore,user})=>{
             let count=0;
             for (let i = 0; i < list.length; i++) {
                 let item = list[i];
-                let gridNum=1;
-                gridNum=Math.floor(Math.random()*M_LIST_COL)+1;
-                gridNum=(count%M_LIST_COL+gridNum)>M_LIST_COL?1:gridNum;
+                let gridNum=item.gridNum!=null?item.gridNum:1;
                 let row=Math.floor(count/M_LIST_COL);
                 let rowData=mList[row];
                 if (rowData==null)rowData=[];
@@ -243,7 +238,7 @@ const GameList=({data,status,reqMore,user})=>{
         list=formatMList(list);
         let len=list.length;
         return (
-            <div id={"gameList"} className={styles.game_list_mobile}>
+            <div ref={gameListRef} id={"gameList"} className={styles.game_list_mobile}>
                 {
                     list.map((rowArr,row)=>{
                         let rowStyle={};
@@ -273,10 +268,13 @@ const GameList=({data,status,reqMore,user})=>{
                                                     itemStyle.transform="scale(1.05)";
                                                 }
                                             }
+                                            let gridNum=item.gridNum!=null?item.gridNum:1;
+                                            gridNum=Math.floor(Math.random()*3)+1;
+                                            let whStyle=gridInfo[gridNum];
                                             return (
                                                 <GameItem key={col} data={item} handleRoom={(e,data)=>{
                                                     handleSelect(e,data,row,len)
-                                                }} row={row}  style={itemStyle}></GameItem>
+                                                }} row={row} whStyle={whStyle}  style={itemStyle}></GameItem>
                                             )
                                         })
                                     }

src/components/GameList/styles.module.scss

@@ -2,12 +2,15 @@
 .list_container {
   //margin-top: 2.75rem;
   & .game_list {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-    gap: 1.25rem .75rem;
-    @media screen and (max-width: $width-mobile-max){
-      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-    }
+    display: flex;
+    flex-wrap: wrap;
+    //display: grid;
+    //grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    //grid-template-columns: repeat(7,1fr);
+    gap:.75rem;
+    //@media screen and (max-width: $width-mobile-max){
+    //  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    //}
   }
   & .game_list_mobile{
     display: flex;