feat: 修改UI

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeCard.tsx

@@ -23,7 +23,7 @@ const HomeCard: FC<PropsWithChildren<Props>> = (props) => {
                         <img
                             src={banner.content!}
                             alt=""
-                            className={"h-[100%] w-[100%] rounded-[0.1rem] border-[0.01rem] border-[#eba9ff]"}
+                            className={"h-[100%] w-[100%] rounded-[0.1rem]"}
                         />
                     </Box>
                 </SwiperSlide>

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeNoticeBar.tsx

@@ -12,10 +12,10 @@ const HomeNoticeBar: FC<Props> = (props) => {
     return (
         <div
             className={
-                "my-[0.0694rem] flex items-center overflow-hidden bg-[url(/home/notice.png)] bg-[length:100%_100%] px-[.1rem]"
+                "my-[0.0694rem] flex items-center overflow-hidden rounded-[.1rem] bg-[#1f2830] px-[.1rem]"
             }
         >
-            <div className={"iconfont icon-laba mr-[0.06rem] text-[.14rem] text-[#86e2f0] "}></div>
+            <div className={"iconfont icon-laba mr-[0.06rem] text-[.14rem] text-[#13de68]"}></div>
             <Swiper
                 direction="vertical"
                 indicator={() => null}

src/app/[locale]/(TabBar)/[[...share]]/_home/HomeSwiper.tsx

@@ -16,10 +16,7 @@ const HomeSwiper: FC<Props> = (props) => {
     return (
         <div
             style={{ height: "1.86rem" }}
-            className={
-                "home-banner overflow-hidden rounded-[0.1rem] border-[0.01rem] border-[#47aaae]" +
-                " bg-[#212a36]"
-            }
+            className={"home-banner overflow-hidden" + " bg-[#212a36]"}
         >
             <Swiper
                 autoplay={{ delay: 2500 }}

src/app/[locale]/style.module.scss

@@ -1,5 +1,7 @@
-.homePage{
-    background-image: url('/home/bg.jpg');
-    background-size: 100% auto;
-    background-repeat: repeat-y;
-}
+.homePage {
+    // background-image: url('/home/bg.jpg');
+
+    // background-size: 100% auto;
+    // background-repeat: repeat-y;
+    background-color: #0b0e10;
+}

src/components/Card/Card.tsx

@@ -143,6 +143,10 @@ const Card: FC<PropsWithChildren<CardProps>> = (props) => {
                         height={"1.54rem"}
                         className={"h-[100%] w-[100%]"}
                     />
+                    <div className={styles.cardOnline}>2323 On-Line</div>
+                    <div className={styles.favorite}>
+                        <i className="iconfont icon-ertong"></i>
+                    </div>
                 </div>
             )}
 

src/components/Card/SwiperGroup.tsx

@@ -58,13 +58,16 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     const swiperData = Array(gameList.length ? Math.ceil(gameList.length / lineNum) : 0)
         .fill(0)
         .map((_, index) => {
+            const showData = gameList
+                .slice(index * lineNum, index * lineNum + lineNum)
+                .map((subItem) => ({ ...subItem, category_name: group.category_name }));
+
             return {
                 key: index,
-                data: gameList
-                    .slice(index * lineNum, index * lineNum + lineNum)
-                    .map((subItem) => ({ ...subItem, category_name: group.category_name })),
+                data: showData,
             };
         });
+    console.log(swiperData);
     const prev = () => {
         swiperRef.current!.slidePrev();
     };
@@ -73,8 +76,6 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
     };
     const iconClass = clsx(styles.mainLeftIcon, "pro-iconfont", `pro-${group.icon}`);
 
-
-    
     return (
         <div>
             {visibleTitle && (
@@ -110,12 +111,12 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                                 </div>
                             )}
 
-                            <div onClick={prev}>
+                            {/* <div onClick={prev}>
                                 <span className="iconfont icon-xiangzuo1"></span>
                             </div>
                             <div onClick={next}>
                                 <span className="iconfont icon-xiangyou1"></span>
-                            </div>
+                            </div> */}
                         </div>
                     </div>
                 </Box>
@@ -131,19 +132,21 @@ const HomeSwiper: FC<PropsWithChildren<SwiperGroupProps>> = (props) => {
                         }}
                         loop
                     >
-                        {swiperData?.map((data, index) => (
-                            <SwiperSlide key={data.key}>
-                                {slideRender ? (
-                                    slideRender(data.data)
-                                ) : (
-                                    <GroupCard
-                                        data={data.data}
-                                        {...other}
-                                        groupType={1}
-                                    ></GroupCard>
-                                )}
-                            </SwiperSlide>
-                        ))}
+                        {swiperData?.map((data, index) => {
+                            return (
+                                <SwiperSlide key={data.key}>
+                                    {slideRender ? (
+                                        slideRender(data.data)
+                                    ) : (
+                                        <GroupCard
+                                            data={data.data}
+                                            {...other}
+                                            groupType={1}
+                                        ></GroupCard>
+                                    )}
+                                </SwiperSlide>
+                            );
+                        })}
                     </Swiper>
                 </Box>
             </Box>

src/components/Card/style.module.scss

@@ -1,5 +1,5 @@
 .gameContainer {
-    background-image: url("/home/gamecontainer.png");
+    // background-image: url("/home/gamecontainer.png");
     background-size: 100% 100%;
     padding-bottom: 0.2rem;
 }
@@ -11,20 +11,51 @@
     overflow: hidden;
     background: #212a36;
     border-radius: 0.1rem;
-    border: 1px solid #5eabb6;
+    // border: 1px solid #5eabb6;
 }
 .cardWrapGmeInfo {
     color: #fff;
     font-size: 0.2rem;
     margin: 0.2rem 0 0 0.17rem;
 }
+.cardOnline {
+    position: absolute;
+    left: 0.1rem;
+    bottom: 0.05rem;
+    font-size: 0.1rem;
+    color: #fff;
+    &::before {
+        content: "";
+        display: inline-block;
+        width: 0.04rem;
+        height: 0.04rem;
+        background: #11dd68;
+        border-radius: 50%;
+        margin-right: 0.02rem;
+        position: relative;
+        top: -0.02rem;
+    }
+}
+.favorite {
+    position: absolute;
+    right: 0.1rem;
+    top: 0.1rem;
+    background-color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    width: 0.18rem;
+    height: 0.18rem;
+    font-size: 0.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 
 .mainTitle {
     height: 0.34rem;
     display: flex;
     position: relative;
     justify-content: space-between;
-    background-image: url("/home/gametitle.png");
+    // background-image: url("/home/gametitle.png");
     background-size: 100% 100%;
     align-items: center;
     // img{

src/components/Header/style.module.scss

@@ -1,5 +1,5 @@
 .headerWrap {
-    height: calc($-header-height + 0.04rem);
+    height: calc($-header-height);
     //position: fixed;
     //z-index: 9;
     width: 100%;
@@ -7,7 +7,8 @@
 
     //transform: translate3d(200px, 0, 0);
     // background: $-theme-color ;
-    background-image: url("/home/headerbg.png");
+    // background-image: url("/home/headerbg.png");
+    background-color: #1e252b;
     background-size: 100% 250%;
     padding-bottom: 0.04rem;
     .headerMain {
@@ -16,7 +17,7 @@
         box-sizing: border-box;
         display: flex;
         align-items: center;
-
+        height: 100%;
         .headerLeft {
             // position: absolute;
             display: block;
@@ -104,28 +105,35 @@
                     padding: 0 0.04rem;
                     box-sizing: border-box;
                     min-width: 0.72rem;
-                    height: 0.34rem;
+                    height: 0.3rem;
                     color: #fff;
-                    background-image: url("/home/login.png");
-                    background-size: 100% 100%;
-                    font-size: 0.1rem;
+                    // background-image: url("/home/login.png");
+                    // background-size: 100% 100%;
+                    font-size: 0.12rem;
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    background-color: #37434b;
+                    border-radius: 0.4rem;
+                    color: #919399;
                 }
                 .rightActive {
                     padding: 0 0.04rem;
                     box-sizing: border-box;
                     min-width: 0.72rem;
-                    height: 0.34rem;
+                    height: 0.3rem;
                     color: #fff;
                     margin-left: 0.11rem;
-                    background-image: url("/home/registe.png");
-                    background-size: 100% 100%;
-                    font-size: 0.1rem;
+                    margin-right: 0.1rem;
+                    // background-image: url("/home/registe.png");
+                    // background-size: 100% 100%;
+                    font-size: 0.12rem;
                     display: flex;
                     align-items: center;
                     justify-content: center;
+                    border-radius: 0.4rem;
+                    background-color: #11dd68;
+                    color: #121418;
                 }
             }
         }

src/styles/variables.scss

@@ -3,7 +3,7 @@ $-footer-bg: #292929;
 
 $primary-color: #ff6a01;
 
-$-header-height: 0.4rem;
+$-header-height: 0.5rem;
 $-footer-height: 0.6rem;
 $-body-width: 4.02rem;