no message

src/components/GameItem/styles.module.scss

@@ -16,6 +16,7 @@
     background-color: var(--widget-grid-bg);
     border-radius: 0.8rem;
     aspect-ratio:384/516;
+    overflow: hidden;
     & .game_img{
       position: relative;
       width: 100%;

src/components/GameList/index.jsx

@@ -1,15 +1,24 @@
 import styles from "@components/GameList/styles.module.scss";
-import React, {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import GameItem 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,//游戏分类
@@ -84,6 +93,9 @@ const GameList=({data,status,reqMore,user})=>{
     const [showPopRoom,setShowPopRoom]=useState(false);
     const roomHeight=5.2;
     const rowTop=roomHeight+0.75;
+    const gameListRef = useRef(null);
+    const [gridInfo,setGridInfo]=useState({});
+    const {width} = useWindowSize();
     const handleReset=(e)=>{
         setSelected(-1);
         setRoomRow({});
@@ -95,6 +107,9 @@ const GameList=({data,status,reqMore,user})=>{
             resetTimer();
         }
     },[])
+    useEffect(()=>{
+
+    },[gameListRef,width])
     const resetTimer=()=>{
         if (objInfo.timer!=null){
             clearTimeout(objInfo.timer);
@@ -149,6 +164,25 @@ 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=[];
@@ -170,9 +204,23 @@ const GameList=({data,status,reqMore,user})=>{
     const formatMList = (list) => {
         let mList = [];
         if (list) {
-            for (let i = 0; i < list.length; i += M_LIST_COL) {
-                let rowArr = list.slice(i, i + M_LIST_COL);
-                mList.push(rowArr);
+            // for (let i = 0; i < list.length; i += M_LIST_COL) {
+            //     let rowArr = list.slice(i, i + M_LIST_COL);
+            //     mList.push(rowArr);
+            // }
+            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 row=Math.floor(count/M_LIST_COL);
+                let rowData=mList[row];
+                if (rowData==null)rowData=[];
+                let nitem={...item,gridNum:gridNum}
+                rowData.push(nitem);
+                mList[row]=rowData;
+                count+=gridNum;
             }
         }
         return mList;