修复懒加载 修改缩略游戏列表

src/components/GameSmallList/index.jsx

@@ -5,6 +5,7 @@ import symbol from "@assets/symbol-defs.svg";
 import {LazyLoadImage} from "react-lazy-load-image-component";
 import {useThemeProvider} from "@contexts/themeContext";
 import GameItem from "@components/GameItem";
+import SvgIcon from "@components/SvgIcon";
 
 const i18n=global.i18n;
 const GameSmallList=({data})=>{
@@ -131,6 +132,7 @@ const GameSmallList=({data})=>{
         return (
             <div className={styles.grid_top}>
                 <div className={styles.grid_tit}>
+                    <SvgIcon herf={data.icon}></SvgIcon>
                     <span>{data.title}</span>
                 </div>
                 <div className={styles.grid_nav}>
@@ -144,7 +146,7 @@ const GameSmallList=({data})=>{
             </div>
         );
     }
-    const renderList=()=>{
+    const renderDeskList=()=>{
         return (
             <div className={styles.grid_list} ref={gridListRef}>
                 {
@@ -157,6 +159,23 @@ const GameSmallList=({data})=>{
             </div>
         )
     }
+    const renderMobileList=()=>{
+        return (
+            <div className={styles.grid_list_m} ref={gridListRef}>
+                {
+                    list.map((item,index)=>{
+                        return (
+                            <GameItem key={index} data={item}></GameItem>
+                        )
+                    })
+                }
+            </div>
+        )
+    }
+    const renderList=()=>{
+        if (isMobile())return renderMobileList();
+        else return renderDeskList();
+    }
     return (
         <div className={`w-100 ${styles.list_container}`}>
             {renderTop()}

src/components/GameSmallList/styles.module.scss

@@ -6,14 +6,21 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    margin-bottom: 10px;
+    margin-bottom: 0.625rem;
     & .grid_tit{
       font-size: 1.25rem;
+      font-weight: 600;
       align-items: center;
-      height: 32px;
-      line-height: 32px;
+      height: 2rem;
+      line-height: 2rem;
       display: flex;
       color: var(--header);
+      gap: 0.5rem;
+      svg{
+        width: 1.4rem;
+        height: 1.4rem;
+        fill: var(--header);
+      }
     }
     & .grid_nav{
       display: flex;
@@ -71,4 +78,19 @@
     overflow-x: auto;
     overflow-y: hidden;
   }
+  & .grid_list_m{
+    --grid-gap: .75rem;
+    row-gap: 1.25rem;
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    grid-auto-flow: column;
+    //grid-auto-columns: calc(100% / var(--grid-num) - (var(--grid-num) - 1)* var(--grid-gap) / var(--grid-num));
+    grid-auto-columns: calc(100% / 3 - (2)* var(--grid-gap) / 3);
+    gap: var(--grid-gap);
+    position: relative;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
 }

src/components/Imgix/LazyImgix.jsx

@@ -13,7 +13,7 @@ const LazyImgix = ({ src,alt="",className="",blur=true, ...props}) => {
         props.width=Math.ceil(props.width/devicePixelRatio);
     }
     return (
-        <LazyLoadComponent>
+        <LazyLoadComponent className={'lazy-image'}>
             <ReactImgix
                 className={`${className} ${effectClass} ${effLoadedClass}`}
                 src={src}

src/features/agentSlice.js

@@ -13,6 +13,7 @@ const reducerAgentCheck=(state,action,arg)=>{
             if (data.subs)state.subs=data.subs;
             if (data.levels)state.levels=data.levels;
             if (data.history)state.bonusList=data.history;
+            if (data.link)state.link=data.link;
             state.isInit=true;
             // state.subs=[
             //     {
@@ -92,7 +93,8 @@ export const AgentSlice = createSlice({
         subs:[],
         levels:{},
         bonusList:[],
-        history:[]
+        history:[],
+        link:""
     },
     reducers:{
 
@@ -131,4 +133,7 @@ export const getAgentStatus=(state)=>{
 export const getIsInit=(state)=>{
     return state.agent.isInit;
 }
+export const getAgentLink=(state)=>{
+    return state.agent.link;
+}
 export default AgentSlice.reducer;

src/widgets/WAgent/index.jsx

@@ -3,7 +3,7 @@ import Spring from "@components/Spring";
 import {useDispatch, useSelector} from "react-redux";
 import {
     getAgentGetStatus,
-    getAgentInfo,
+    getAgentInfo, getAgentLink,
     getAgentStatus,
     getAgentSubs,
     getBonusList,
@@ -38,6 +38,7 @@ const WAgent=({close})=>{
     const agentStatus=useSelector(getAgentStatus);
     const dispatch=useDispatch();
     const isAgentInit=useSelector(getIsInit);
+    const agentLink=useSelector(getAgentLink);
     const lvnum=4;
     useEffect(()=>{
         if (!isAgentInit){
@@ -63,7 +64,7 @@ const WAgent=({close})=>{
         dispatch(reqAgentGet(ID));
     }
     const renderBase=()=>{
-        let agentUrl="";
+        let agentUrl=agentLink;
         let bonus=agentInfo.bonus?agentInfo.bonus:0;
         let bonusStr=formatCash(bonus);
         return (