feat: 修改厂商显示

src/components/Layout/Sidebar.tsx

@@ -269,7 +269,7 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                 <div className="flex-1 overflow-scroll px-[.12rem]">
                     <div className={styles.providerBox}>
                         {providers?.map((item, idx) => {
-                            if (idx === 8 && !isShowAll) {
+                            if (idx === 6 && !isShowAll) {
                                 return (
                                     <div
                                         className={styles.providerItem}
@@ -280,7 +280,7 @@ const Sidebar: FC<PropsWithChildren<Props>> = (props) => {
                                     </div>
                                 );
                             }
-                            if (idx > 8 && !isShowAll) return null;
+                            if (idx > 6 && !isShowAll) return null;
                             return (
                                 <div
                                     className={styles.providerItem}

src/components/Layout/style.module.scss

@@ -6,12 +6,15 @@
 
 .providerBox {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(3, 1fr);
     gap: 0.12rem;
 }
 .providerItem {
+    aspect-ratio: 1/1;
+    display: flex;
+    align-items: center;
     background-color: #2b363f;
-    text-align: center;
+    justify-content: center;
     padding: 0.1rem 0;
     border-radius: 0.06rem;
     cursor: pointer;

src/components/Manufacturer/index.tsx

@@ -2,7 +2,7 @@ import { Category, GameListRep } from "@/api/home";
 import { useRouter } from "@/i18n/routing";
 import clsx from "clsx";
 import { useMemo, useRef, useState } from "react";
-import { SwiperClass } from "swiper/react";
+import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
 import styles from "./style.module.scss";
 
 interface Props {
@@ -41,9 +41,8 @@ const HomeProvider: React.FC<Props> = ({ data }) => {
     };
 
     const slidesPerView = useMemo(() => {
-        if (renderData.length > 5) return 5;
-        if (renderData.length === 5) return 3;
-        return renderData.length % 2 === 1 ? renderData.length : renderData.length - 1;
+        if (renderData.length > 5) return 5.5;
+        return renderData.length;
     }, [renderData]);
 
     return (
@@ -53,19 +52,28 @@ const HomeProvider: React.FC<Props> = ({ data }) => {
                 <div className="text-[.15rem] font-bold">{data.category_name}</div>
             </div>
             <div className={styles.privoderBox}>
-                {renderData?.map((item: any, idx) => (
-                    <div
-                        key={item.id}
-                        className={clsx(
-                            "flex h-[100%] flex-col items-center justify-center",
-                            styles.manufactureritem
-                        )}
-                        onClick={() => todoHandler(item)}
-                    >
-                        <img src={item.game_icon} className={styles.providerIcon} alt=""></img>
-                        {/* <div className="mt-[.06rem] text-[.1rem]">{item.provider}</div> */}
-                    </div>
-                ))}
+                <Swiper slidesPerView={slidesPerView} spaceBetween={5}>
+                    {renderData?.map((item: any, idx) => {
+                        return (
+                            <SwiperSlide key={item.id}>
+                                <div
+                                    className={clsx(
+                                        "flex h-[100%] flex-col items-center justify-center",
+                                        styles.manufactureritem
+                                    )}
+                                    onClick={() => todoHandler(item)}
+                                >
+                                    <img
+                                        src={item.game_icon}
+                                        className={styles.providerIcon}
+                                        alt=""
+                                    ></img>
+                                    {/* <div className="mt-[.06rem] text-[.1rem]">{item.provider}</div> */}
+                                </div>
+                            </SwiperSlide>
+                        );
+                    })}
+                </Swiper>
             </div>
             {/* <Swiper
                 slidesPerView={slidesPerView}

src/components/Manufacturer/style.module.scss

@@ -1,5 +1,5 @@
 .container {
-    padding: 0rem 0.15rem 0.15rem 0.15rem;
+    padding: 0rem 0.1rem 0.15rem 0.1rem;
     // background-image: url("/home/provid_container_bg.png");
     background-size: 100% 100%;
     position: relative;
@@ -23,20 +23,21 @@
     }
 }
 .privoderBox {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 0.1rem;
-    grid-column: 0.1rem;
+    // display: grid;
+    // grid-template-columns: repeat(3, 1fr);
+    // grid-gap: 0.1rem;
+    // grid-column: 0.1rem;
 }
 .manufactureritem {
     // background-image: url("/home/provid_bg.png");
     // background-size: 100% 100%;
     // height: 0.8rem;
-    padding: 0.1rem 0;
+    aspect-ratio: 1/1;
+
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
     background-color: #22252f;
     border-radius: 0.06rem;
     .providerIcon {