no message

package.json

@@ -60,6 +60,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.43.3",
     "react-i18next": "^14.0.5",
+    "react-imgix": "^9.8.1",
     "react-intersection-observer": "^9.4.3",
     "react-lazy-load-image-component": "^1.5.6",
     "react-number-format": "^5.1.4",

src/components/AutoBanner/index.jsx

@@ -26,7 +26,7 @@ import BannerPagination from "@components/AutoBanner/BannerPagination";
 import {NavLink, useNavigate} from "react-router-dom";
 import styles from './styles.module.scss';
 import {ROUTE_PATH} from "@constants/routes";
-
+import Imgix from "@components/Imgix";
 
 const AutoBanner = ({data,perview=3,spaceBetween=15,delay=3000,speed=1000}) => {
     const [swiper, setSwiper] = useState(null);
@@ -92,8 +92,9 @@ const AutoBanner = ({data,perview=3,spaceBetween=15,delay=3000,speed=1000}) => {
                                         <button key={iIndex} className="img-box w-100" onClick={()=>{
                                             onClickNav(item);
                                         }}>
-                                            <LazyImage style={{borderRadius:"var(--border-radius)"}} className="img-box-content" src={item.img} alt={item.alt}>
-                                            </LazyImage>
+                                            {/*<LazyImage style={{borderRadius:"var(--border-radius)"}} className="img-box-content" src={item.img} alt={item.alt}>*/}
+                                            {/*</LazyImage>*/}
+                                            <Imgix className="lazyload img-box-content" style={{borderRadius:"var(--border-radius)"}} src={item.img} alt={item.alt} width={675}></Imgix>
                                         </button>
                                     ))
                                 }

src/components/AutoBanner/style.js

@@ -13,7 +13,7 @@ export const StyledSwiper = styled(Swiper)`
            filter: brightness(80%);
         }
         & .img-box-content{
-           
+           border-radius: var(--border-radius);
         }
     }
  }

src/components/GameItem/index.jsx

@@ -6,6 +6,7 @@ import React from "react";
 import {ROUTE_PATH} from "@constants/routes";
 import {localStorageSet} from "@utils/helpers";
 import {LOCAL_GAME_URL} from "@constants/localkey";
+import Imgix from "@components/Imgix";
 
 const GameItem=({data,handleRoom,...props})=>{
     const navigate=useNavigate();
@@ -88,12 +89,13 @@ const GameItem=({data,handleRoom,...props})=>{
                 // if (handleRoom)handleRoom(e,data);
                 handleEnterRoom(e)
             }}>
-                <LazyLoadImage
-                    src={data.img}
-                    alt={"game-icon"}
-                    effect={"blur"}
-                    wrapperClassName={`lazy-image ${styles.game_img}`}
-                />
+                {/*<LazyLoadImage*/}
+                {/*    src={data.img}*/}
+                {/*    alt={"game-icon"}*/}
+                {/*    effect={"blur"}*/}
+                {/*    wrapperClassName={`lazy-image ${styles.game_img}`}*/}
+                {/*/>*/}
+                <Imgix className={`lazyload ${styles.game_img}`} src={data.img} alt={"game-icon"} width={192}></Imgix>
             </button>
         </div>
     )

src/components/Imgix/index.jsx

@@ -0,0 +1,12 @@
+import PropTypes from "prop-types";
+import ReactImgix from "react-imgix";
+
+const Imgix = ({ src,alt="",className="lazyload", ...props}) => {
+    return (
+        <ReactImgix className={className} src={src} alt={alt} {...props}></ReactImgix>
+    )
+}
+Imgix.propTypes = {
+    src:PropTypes.string.isRequired
+}
+export default Imgix

src/styles/_reset.scss

@@ -35,6 +35,7 @@ a, input, button, textarea {
     font-size: inherit;
     border: none;
     cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);//点击高亮
 }
 
 input[readonly], textarea[readonly] {