no message

src/components/AutoWinList/index.jsx

@@ -107,6 +107,7 @@ const AutoWinList=({data})=>{
     //     ]
     // }
     const renderTitle=()=>{
+        if (isMobile())return (<></>);
         return (
             <p className={styles.list_title}>
                 <b></b>

src/components/AutoWinList/styles.module.scss

@@ -1,4 +1,5 @@
 @import "../../styles/vars";
+$rb_bg:"../../assets/bigwin/rb_bg.png";
 @keyframes online-ani {
   0% {
     transform: scale(1);
@@ -131,33 +132,41 @@
   }
 }
 .list_context_m{
-  background-color: var(--widget-grid-bg);
-  border-radius: .25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border-image-source: url($rb_bg);
+  border-image-slice: 50% 10% 50% 50%;
+  border-image-width: auto;
+  border-image-repeat: stretch;
+  //background-color: var(--widget-grid-bg);
+  //border-radius: .25rem;
   position: relative;
   overflow: hidden;
-  height: 2.4rem;
-  padding:0.2rem .5rem;
+  height: 2.18rem;
+  padding:0.1rem 0.7rem;
   width: 100%;
-  &::after{
-    content: '';
-    height: 1.125rem;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-image: var(--mask-blur);
-    z-index: 2;
-  }
+  //&::after{
+  //  content: '';
+  //  height: 1.125rem;
+  //  position: absolute;
+  //  left: 0;
+  //  right: 0;
+  //  bottom: 0;
+  //  background-image: var(--mask-blur);
+  //  z-index: 2;
+  //}
   & .swiper_container_m{
-    height: 100%;
+    height: 1.8rem;
+    width: 100%;
     & .swiper_item_m{
       display: flex;
       align-items: center;
-      height: 2rem;
+      height: 1.8rem;
       justify-content: space-between;
       & .game_icon_m{
-        width: 2rem;
-        height: 2rem;
+        width: 1.39rem;
+        height: 1.39rem;
         img {
           border-radius: var(--border-radius);
         }
@@ -170,7 +179,7 @@
         text-overflow: ellipsis;
         margin: 0 .5rem;
         max-width: 5rem;
-        color: var(--text);
+        color: #c9844c;
         font-size: 0.825rem;
       }
       & .play_btn{
@@ -185,14 +194,15 @@
           justify-content: flex-end;
           //margin-right: 0.875rem;
           & .amount_m{
-            color: var(--primary-color);
-            font-weight: 700;
+            color: #caa74a;
+            //font-weight: 700;
             max-width: 10em;
             text-align: right;
           }
           & .coin_m{
-            width: 0.875rem;
-            height: 0.875rem;
+            margin-top: 0.2rem;
+            width: 1.21rem;
+            height: 1.21rem;
             margin-left: 0.2em;
           }
         }

src/components/GameTabs/index.jsx

@@ -4,6 +4,8 @@ import symbol from '@assets/symbol-defs.svg';
 import AllWidgets from "@widgets/index";
 import SmallLoading from "@components/SmallLoading";
 import SvgIcon from "@components/SvgIcon";
+import tabin_1 from "@assets/gametabs/tabin_1.png";
+import tabin_2 from "@assets/gametabs/tabin_2.png";
 const i18n=global.i18n;
 const GameTabs=({data})=>{
     const [tabIndex, setTabIndex] = useState(1);
@@ -47,6 +49,25 @@ const GameTabs=({data})=>{
     const changeTab=(tabIndex)=>{
         setTabIndex(tabIndex);
     }
+    const renderMask=(item,index,len)=>{
+        if (item.tabtype!==tabIndex)return (<></>);
+        let mask=(<></>);
+        if (index===0){
+            mask=(<img className={styles.mask_first} src={tabin_1}/>)
+        }
+        else if (index===len-1){
+            mask=(<img className={styles.mask_last} src={tabin_1}/>)
+        }
+        else
+        {
+            mask=(<img className={styles.mask_center} src={tabin_2}/>)
+        }
+        return (
+            <div className={styles.tab_mask}>
+                {mask}
+            </div>
+        )
+    }
     const renderTabs=()=>{
         let tabs=data.tabs;
         if (tabs==null)tabs=[];
@@ -58,9 +79,12 @@ const GameTabs=({data})=>{
                         return (
                             <button key={index} onClick={()=>{
                                 changeTab(item.tabtype);
-                            }} className={`${styles.tab_item} ${item.tabtype===tabIndex?styles.active:''}`}>
-                                <SvgIcon className={styles.icon} herf={item.icon}/>
-                                {i18n.t(item.title)}
+                            }} className={`${styles.tab_item} ${index===0?styles.tab_item_first:''} ${index===tabs.length-1?styles.tab_item_last:''}`}>
+                                {renderMask(item,index,tabs.length)}
+                                <div className={`${styles.tab_content} ${item.tabtype===tabIndex?styles.active:''}`}>
+                                    <SvgIcon className={styles.icon} herf={item.icon}/>
+                                    {i18n.t(item.title)}
+                                </div>
                             </button>
                         )
                     })

src/components/GameTabs/styles.module.scss

@@ -5,42 +5,103 @@
   & .game_tabs{
     display: flex;
     align-items: center;
-    flex-wrap: wrap;
-    gap: .75rem;
+    flex-wrap: nowrap;
+    border-radius: var(--border-radius);
+    border: 1px solid #23190b;
+    padding: 0.15rem;
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    //gap: .75rem;
     & .tab_item{
-      background: var(--nav-item-bg);
-      padding: .75rem 1.125rem;
-      border-radius: var(--border-radius);
-      //margin-right: .75rem;
-      //margin-top: .625rem;
-      width: auto;
-      font-weight: 400;
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--text);
-      &:hover,&.active{
-        background: var(--nav-item-hover);
-        color: var(--header);
-        font-weight: 600;
-        & .icon{
-          fill: var(--header);
+      position: relative;
+      background: linear-gradient(to bottom, #30200e,#2a1f0e,#48381d);
+      border-top: 1px solid rgba(64, 41, 19, 0.9);
+      border-bottom: 1px solid rgb(129, 99, 54);
+      border-left: 1px solid #47341a;
+      border-right: 1px solid #24170c;
+      &_first{
+        border-top-left-radius: var(--border-radius);
+        border-bottom-left-radius:var(--border-radius);
+        border-left: 1px solid #45351b !important;
+      }
+      &_last{
+        border-top-right-radius: var(--border-radius);
+        border-bottom-right-radius:var(--border-radius);
+        border-right: 1px solid #45351b !important;
+      }
+      & .tab_mask{
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        pointer-events: none;
+        & .mask_center{
+          object-fit: fill;
+          position: absolute;
+          top: 0;
+          left: -19%;
+          width: 133%;
+          height: 2.05rem;
+        }
+        & .mask_first{
+          object-fit: fill;
+          position: absolute;
+          top: 0;
+          left: -18%;
+          width: 133%;
+          height: 2.05rem;
+        }
+        & .mask_last{
+          transform: scaleX(-1);
+          object-fit: fill;
+          position: absolute;
+          top: 0;
+          right: -17.5%;
+          width: 133%;
+          height: 2.05rem;
         }
       }
-      & .icon{
-        margin-right: .375rem;
-        width: 1.4em;
-        height: 1.4em;
-        fill: var(--text);
+      & .tab_content{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        padding: 0.45rem 1rem;
+        font-size: 0.825rem;
+        font-weight: 400;
+        white-space: nowrap;
+        color: #867f64;
+        width: auto;
+        z-index: 1;
+        &:hover,&.active{
+          //background: var(--nav-item-hover);
+          //color: var(--header);
+          color: #FFFFFF;
+          text-shadow: 0px 2px 1px rgba(69, 42, 26, 0.44);
+          font-weight: 600;
+          & .icon{
+            //fill: var(--header);
+            fill: #f5e67f;
+          }
+        }
+        & .icon{
+          margin-right: .375rem;
+          width: 1.2em;
+          height: 1.2em;
+          //fill: var(--text);
+          fill: #867f64;
+        }
       }
     }
-    @media screen and (max-width: $width-mobile-max) {
-      flex-wrap: nowrap;
-      width: 100%;
-      overflow-x: auto;
-      scroll-snap-type: x mandatory;
-      scroll-behavior: smooth;
-    }
+    //@media screen and (max-width: $width-mobile-max) {
+    //  flex-wrap: nowrap;
+    //  //width: 100%;
+    //  overflow-x: auto;
+    //  scroll-snap-type: x mandatory;
+    //  scroll-behavior: smooth;
+    //}
   }
 }

src/components/Logo/styles.module.scss

@@ -22,13 +22,13 @@
     }
     .logo_img_m{
         width: auto;
-        height: 3rem;
-        @media screen and (max-width: 380px) {
-            height: 3rem;
-        }
-        @media screen and (max-width: 350px) {
-            height: 2.5rem;
-        }
+        height: 1.94rem;
+        //@media screen and (max-width: 380px) {
+        //    height: 1.94rem;
+        //}
+        //@media screen and (max-width: 350px) {
+        //    height: 1.94rem;
+        //}
     }
 
     &.sm {

src/features/paySlice.js

@@ -301,7 +301,7 @@ const reducerFirstPayMulti=(state,action,arg)=>{
         //         "give": "10",
         //         "favorable_price": "10",
         //         "second_give": "5",
-        //         "timeleft":0,
+        //         "timeleft":1000,
         //     },
         //     "default": 1
         // }

src/layout/BottomNav/index.jsx

@@ -24,6 +24,17 @@ import {getMailNew} from "@features/mailSlice";
 import {checkIsStandalone} from "@utils/helpers";
 import {useThemeProvider} from "@contexts/themeContext";
 import {APP_THEME} from "@constants/app";
+import bbg_top from "@assets/tabicon/bbg_top.png";
+import bbg_bottom from "@assets/tabicon/bbg_bottom.png";
+import bbtn_deposit from "@assets/tabicon/bbtn_deposit.png";
+import bbg_left from "@assets/tabicon/bbg_left.png";
+import bbg_right from "@assets/tabicon/bbg_right.png";
+import bbtn_promotion from "@assets/tabicon/bbtn_promotion.png";
+import bbtn_withdraw from "@assets/tabicon/bbtn_withdraw.png";
+import bbtn_light from "@assets/tabicon/bbtn_light.png";
+import bbtn_line from "@assets/tabicon/bbtn_line.png";
+import bbtn_message from "@assets/tabicon/bbtn_message.png";
+import bbtn_service from "@assets/tabicon/bbtn_service.png";
 const i18n=global.i18n;
 
 const BottomNav = () => {
@@ -79,80 +90,155 @@ const BottomNav = () => {
         if (langs.indexOf(lang)===-1)lang=langs[0];
         return lang;
     }
+    // return (
+    //     <div className={`${styles.container} ${isStandalone?styles.container_full:''}`}>
+    //         <svg aria-hidden="true" focusable="false" style={{width:0,height:0,position:"absolute"}}>
+    //             <linearGradient id="gradient-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
+    //                 <stop offset="0%" stopColor="#fffee7"/>
+    //                 <stop offset="50%" stopColor="#e4f6ee"/>
+    //                 <stop offset="100%" stopColor="#d6fede"/>
+    //             </linearGradient>
+    //             <linearGradient id="gradient-vertical-dark" x1="0%" y1="0%" x2="0%" y2="100%">
+    //                 <stop offset="0%" stopColor="#807f74"/>
+    //                 <stop offset="50%" stopColor="#757c77" />
+    //                 <stop offset="100%" stopColor="#386b42" />
+    //             </linearGradient>
+    //         </svg>
+    //         <NavLink className={styles.button} to={ROUTE_PATH.PROMOTION}>
+    //             {/*<svg className={"icon"}>*/}
+    //             {/*    <use xlinkHref={`${ticon_gift}#gift`} />*/}
+    //             {/*</svg>*/}
+    //             {/*<TabGift className={styles.icon}/>*/}
+    //             <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
+    //                 <use xlinkHref={`${symbol}#icon_Giftbox`}/>
+    //             </svg>
+    //             <span className={styles.bottomtxt}>{i18n.t("tab.promotion")}</span>
+    //         </NavLink>
+    //         <NavLink className={styles.button} to={ROUTE_PATH.SAQUE} aria-label="Home">
+    //             {/*<svg className={"icon"}>*/}
+    //             {/* <use xlinkHref={`${symbol_m}#icon_Home_1`} />*/}
+    //             {/*</svg>*/}
+    //             {/*<TabWithdraw className={styles.icon}/>*/}
+    //             <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
+    //                 <use xlinkHref={`${symbol}#icon_WithDraw`}/>
+    //             </svg>
+    //             <span className={styles.bottomtxt}>{i18n.t("tab.withdraw")}</span>
+    //         </NavLink>
+    //         <NavLink className={styles.button} style={{width:"25%"}} to={ROUTE_PATH.PAY}>
+    //             <div className={styles.deposit_icon}>
+    //                 <img className={styles.d_img} src={require(`@assets/tabicon/deposit_${getLang()}.png`)}/>
+    //                 <img className={styles.c_img} src={require(`@assets/tabicon/coin_${getSymbol()}.png`)}/>
+    //             </div>
+    //
+    //             <span className={`${styles.yellow_txt} ${styles.bottomtxt}`}
+    //                   style={{lineHeight: "1.5rem"}}>{i18n.t("tab.deposit")}</span>
+    //         </NavLink>
+    //         <NavLink className={styles.button} to={ROUTE_PATH.MESSAGE}>
+    //             {
+    //                 mailNew > 0 ? (
+    //                     <div className={styles["dont-badge"]}>
+    //                         <p>
+    //                             {
+    //                                 mailNew>=100?"...":mailNew
+    //                             }
+    //                         </p>
+    //                     </div>
+    //                 ) : (<></>)
+    //             }
+    //             {/*<svg className={"icon"}>*/}
+    //             {/*    <use xlinkHref={`${symbol_m}#icon_Account`} />*/}
+    //             {/*</svg>*/}
+    //             {/*<TabMessage className={styles.icon}/>*/}
+    //             <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
+    //                 <use xlinkHref={`${symbol}#icon_Mail`}/>
+    //             </svg>
+    //             <span className={styles.bottomtxt}>{i18n.t("tab.message")}</span>
+    //         </NavLink>
+    //         <NavLink className={styles.button} to={ROUTE_PATH.CUSTOMER}>
+    //             {/*<svg className={"icon"}>*/}
+    //             {/*    <use xlinkHref={`${symbol}#icon_Chat`} />*/}
+    //             {/*</svg>*/}
+    //             {/*<TabSett className={styles.icon}></TabSett>*/}
+    //             <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
+    //                 <use xlinkHref={`${symbol}#icon_Support`}/>
+    //             </svg>
+    //             <span className={styles.bottomtxt}>{i18n.t("tab.service")}</span>
+    //         </NavLink>
+    //     </div>
+    // )
     return (
         <div className={`${styles.container} ${isStandalone?styles.container_full:''}`}>
-            <svg aria-hidden="true" focusable="false" style={{width:0,height:0,position:"absolute"}}>
-                <linearGradient id="gradient-vertical" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" stopColor="#fffee7"/>
-                    <stop offset="50%" stopColor="#e4f6ee"/>
-                    <stop offset="100%" stopColor="#d6fede"/>
-                </linearGradient>
-                <linearGradient id="gradient-vertical-dark" x1="0%" y1="0%" x2="0%" y2="100%">
-                    <stop offset="0%" stopColor="#807f74"/>
-                    <stop offset="50%" stopColor="#757c77" />
-                    <stop offset="100%" stopColor="#386b42" />
-                </linearGradient>
-            </svg>
-            <NavLink className={styles.button} to={ROUTE_PATH.PROMOTION}>
-                {/*<svg className={"icon"}>*/}
-                {/*    <use xlinkHref={`${ticon_gift}#gift`} />*/}
-                {/*</svg>*/}
-                {/*<TabGift className={styles.icon}/>*/}
-                <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
-                    <use xlinkHref={`${symbol}#icon_Giftbox`}/>
-                </svg>
-                <span className={styles.bottomtxt}>{i18n.t("tab.promotion")}</span>
-            </NavLink>
-            <NavLink className={styles.button} to={ROUTE_PATH.SAQUE} aria-label="Home">
-                {/*<svg className={"icon"}>*/}
-                {/* <use xlinkHref={`${symbol_m}#icon_Home_1`} />*/}
-                {/*</svg>*/}
-                {/*<TabWithdraw className={styles.icon}/>*/}
-                <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
-                    <use xlinkHref={`${symbol}#icon_WithDraw`}/>
-                </svg>
-                <span className={styles.bottomtxt}>{i18n.t("tab.withdraw")}</span>
-            </NavLink>
-            <NavLink className={styles.button} style={{width:"25%"}} to={ROUTE_PATH.PAY}>
-                <div className={styles.deposit_icon}>
-                    <img className={styles.d_img} src={require(`@assets/tabicon/deposit_${getLang()}.png`)}/>
-                    <img className={styles.c_img} src={require(`@assets/tabicon/coin_${getSymbol()}.png`)}/>
+            <div className={styles.bnav_center}>
+                <NavLink className={styles.btn_deposit} to={ROUTE_PATH.PAY}>
+                    <img className={styles.bbg_top} src={bbg_top}/>
+                    <img className={styles.bd_icon} src={bbtn_deposit}/>
+                    <img className={styles.bbg_bottom} src={bbg_bottom}/>
+                    <div className={styles.bd_txt_con}>
+                        <span className={styles.bd_txt}>{i18n.t("tab.deposit")}</span>
+                    </div>
+                </NavLink>
+            </div>
+            <div className={styles.bnav_left}>
+                <img className={styles.bg} src={bbg_left}/>
+                <div className={styles.btn_con}>
+                    <NavLink className={styles.bnav_button} to={ROUTE_PATH.PROMOTION}>
+                        <div className={styles.bnav_light_con}>
+                            <img className={styles.light} src={bbtn_light}/>
+                            <img className={styles.line} src={bbtn_line}/>
+                        </div>
+                        <div className={styles.bnav_con}>
+                            <img className={styles.img_promotion} src={bbtn_promotion}/>
+                            <span className={styles.btn_text}>{i18n.t("tab.promotion")}</span>
+                        </div>
+                    </NavLink>
+                    <NavLink className={styles.bnav_button} to={ROUTE_PATH.SAQUE}>
+                        <div className={styles.bnav_light_con}>
+                            <img className={styles.light} src={bbtn_light}/>
+                            <img className={styles.line} src={bbtn_line}/>
+                        </div>
+                        <div className={styles.bnav_con}>
+                            <img className={styles.img_withdraw} src={bbtn_withdraw}/>
+                            <span className={styles.btn_text}>{i18n.t("tab.withdraw")}</span>
+                        </div>
+                    </NavLink>
                 </div>
-
-                <span className={`${styles.yellow_txt} ${styles.bottomtxt}`}
-                      style={{lineHeight: "1.5rem"}}>{i18n.t("tab.deposit")}</span>
-            </NavLink>
-            <NavLink className={styles.button} to={ROUTE_PATH.MESSAGE}>
-                {
-                    mailNew > 0 ? (
-                        <div className={styles["dont-badge"]}>
-                            <p>
-                                {
-                                    mailNew>=100?"...":mailNew
-                                }
-                            </p>
+            </div>
+            <div className={styles.bnav_right}>
+                <img className={styles.bg} src={bbg_right}/>
+                <div className={styles.btn_con}>
+                    <NavLink className={styles.bnav_button} to={ROUTE_PATH.MESSAGE}>
+                        <div className={styles.bnav_light_con}>
+                            <img className={styles.light} src={bbtn_light}/>
+                            <img className={styles.line} src={bbtn_line}/>
+                        </div>
+                        <div className={styles.bnav_con}>
+                            <img className={styles.img_message} src={bbtn_message}/>
+                            <span className={styles.btn_text}>{i18n.t("tab.message")}</span>
+                        </div>
+                        {
+                            mailNew > 0 ? (
+                                <div className={styles["dont-badge"]}>
+                                    <p>
+                                        {
+                                            mailNew>=100?"...":mailNew
+                                        }
+                                    </p>
+                                </div>
+                            ) : (<></>)
+                        }
+                    </NavLink>
+                    <NavLink className={styles.bnav_button} to={ROUTE_PATH.CUSTOMER}>
+                        <div className={styles.bnav_light_con}>
+                            <img className={styles.light} src={bbtn_light}/>
+                            <img className={styles.line} src={bbtn_line}/>
                         </div>
-                    ) : (<></>)
-                }
-                {/*<svg className={"icon"}>*/}
-                {/*    <use xlinkHref={`${symbol_m}#icon_Account`} />*/}
-                {/*</svg>*/}
-                {/*<TabMessage className={styles.icon}/>*/}
-                <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
-                    <use xlinkHref={`${symbol}#icon_Mail`}/>
-                </svg>
-                <span className={styles.bottomtxt}>{i18n.t("tab.message")}</span>
-            </NavLink>
-            <NavLink className={styles.button} to={ROUTE_PATH.CUSTOMER}>
-                {/*<svg className={"icon"}>*/}
-                {/*    <use xlinkHref={`${symbol}#icon_Chat`} />*/}
-                {/*</svg>*/}
-                {/*<TabSett className={styles.icon}></TabSett>*/}
-                <svg className={`${styles.bottomicon} ${theme===APP_THEME.LIGHT?styles.bottomicon_light:''}`}>
-                    <use xlinkHref={`${symbol}#icon_Support`}/>
-                </svg>
-                <span className={styles.bottomtxt}>{i18n.t("tab.service")}</span>
-            </NavLink>
+                        <div className={styles.bnav_con}>
+                            <img className={styles.img_service} src={bbtn_service}/>
+                            <span className={styles.btn_text}>{i18n.t("tab.service")}</span>
+                        </div>
+                    </NavLink>
+                </div>
+            </div>
         </div>
     )
 }

src/layout/BottomNav/styles.module.scss

@@ -1,8 +1,8 @@
 .container {
     color: var(--text);
-    background: var(--widget);
-    padding: 0 0.6rem;
-    border-top: 2px solid var(--border);
+    //background: var(--widget);
+    //padding: 0 0.6rem;
+    //border-top: 2px solid var(--border);
     position: fixed;
     bottom: 0;
     left: 0;
@@ -12,12 +12,218 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.5rem;
+    //gap: 0.5rem;
     pointer-events:auto;
     &_full{
         padding: 0rem 0.6rem 0.6rem 0.6rem;
         height: 4.725rem;
     }
+    &::before{
+      content: '';
+      height: 2rem;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 80%;
+      background-image: linear-gradient(to bottom,transparent,#1a120c);;
+      z-index: 0;
+    }
+}
+.bnav_center{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+    position: absolute;
+    z-index: 1;
+    inset:0;
+    & .btn_deposit{
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        position: absolute;
+        width: 30%;
+        height: 100%;
+        & .bbg_top{
+            position: absolute;
+            bottom: 0;
+            z-index: 0;
+            height: 3.9rem;
+            width: auto;
+        }
+        & .bd_icon{
+            position: absolute;
+            bottom: 1.15rem;
+            z-index: 1;
+            height: 3.2rem;
+            width: auto;
+        }
+        & .bbg_bottom{
+            position: absolute;
+            bottom: 0;
+            z-index: 2;
+            height: 1.89rem;
+            width: auto;
+        }
+        & .bd_txt_con{
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            bottom: 0;
+            z-index: 3;
+            height: 1.89rem;
+            width: 100%;
+            & .bd_txt{
+                background: linear-gradient(90deg, #fbe6ad, #ffc777);
+                -webkit-background-clip: text;
+                -webkit-text-fill-color: transparent;
+                text-align: center;
+                filter: drop-shadow(0 0.21rem 0.07rem rgba(51, 19, 6, 0.6));
+                color: transparent;
+            }
+        }
+    }
+}
+.bnav_left{
+    position: absolute;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 41.5%;
+    & .bg{
+        position: absolute;
+        z-index: 0;
+        right: 0;
+        bottom: 0;
+        height: 4.07rem;
+        width: auto;
+    }
+    & .btn_con{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        right: 1.2rem;
+        top: 0.5rem;
+        bottom: 0;
+    }
+}
+.bnav_right{
+    position: absolute;
+    z-index: 3;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 44.83%;
+    & .bg{
+        position: absolute;
+        z-index: 0;
+        left: 0;
+        bottom: 0;
+        height: 4.57rem;
+        width: auto;
+    }
+    & .btn_con{
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        position: absolute;
+        z-index: 1;
+        left: 1.6rem;
+        right: 0;
+        top: 0.5rem;
+        bottom: 0;
+    }
+}
+.bnav_button{
+    position: relative;
+    width: 4.07rem;
+    height: 100%;
+    transition: all var(--transition);
+    filter: brightness(80%);
+    & .bnav_light_con{
+        display: flex;
+        justify-content: center;
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        & .light{
+            pointer-events: none;
+            position: absolute;
+            z-index: 0;
+            height: 5.49rem;
+            width: auto;
+            bottom: 0;
+            left: -65%;
+            opacity: 0;
+            transition: all var(--transition);
+        }
+        & .line{
+            position: absolute;
+            z-index: 1;
+            width: 0rem;
+            //width: 1.94rem;
+            height: 0.78rem;
+            opacity: 0;
+            bottom: 0;
+            transition: all var(--transition);
+        }
+    }
+    & .bnav_con{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-end;
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        & .btn_text{
+            margin-bottom: 0.4rem;
+            line-height: 1.1rem;
+            background: linear-gradient(0deg, rgba(255,188,101,1) 0%, rgba(255,217,126,1) 70%, rgba(255,249,154,1) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-align: center;
+            filter: drop-shadow(0 0.21rem 0.07rem rgba(97, 44, 11, 0.8));
+            color: transparent;
+        }
+    }
+    &:hover{
+        filter: brightness(100%);
+        & .bnav_light_con{
+            & .light{
+                opacity: 1;
+            }
+            & .line{
+                width: 1.94rem;
+                opacity: 1;
+            }
+        }
+    }
+}
+.img_promotion{
+    height: 1.96rem;
+    width: auto;
+}
+.img_withdraw{
+    height: 1.75rem;
+    width: auto;
+    margin-bottom: 0.2rem;
+}
+.img_message{
+    height: 1.63rem;
+    width: auto;
+    margin-bottom: 0.2rem;
+}
+.img_service{
+    height: 1.94rem;
+    width: auto;
+    margin-bottom: 0.1rem;
 }
 
 .button {
@@ -160,6 +366,7 @@
     top: 0.3rem;
     background-color: var(--primary-color);
     color: #fff;
+    z-index: 4;
     p{
         font-size: calc(100% - 0.2rem);
         font-weight: 700;

src/layout/Navbar/index.jsx

@@ -31,6 +31,7 @@ import {ROUTE_PATH} from "@constants/routes";
 import {toast} from "react-toastify";
 import LazyImgix from "@components/Imgix/LazyImgix";
 import {APP_SITE} from "@constants/app";
+import coinIcon from "@assets/lvicon/USD.black.png";
 const i18n=global.i18n;
 
 const StyledToggleGroup= styled(ToggleButtonGroup)`
@@ -212,7 +213,7 @@ const MobileNav=()=>{
     return (
         <div
             className={`d-flex align-items-center justify-content-between ${styles.header} ${styles.header_mobile}`}>
-            <div className={`d-flex flex-row flex-1`} style={{maxWidth:"55%"}}>
+            <div className={styles.header_left}>
                 <SidebarTrigger/>
                 <Logo size="sm"/>
             </div>
@@ -229,15 +230,20 @@ const UserInfo=()=>{
         <>
             {
                 isLogin?(
-                    <div className={`d-flex align-items-center ${styles.user_info}`} onClick={()=>{
+                    <div className={styles.user_info} onClick={()=>{
                         navigate(ROUTE_PATH.SETTINGS);
                     }}>
-                        <div className={styles.info}>
+                        <div className={styles.info_left}>
+                            <img className={styles.coin} src={coinIcon}/>
+                            <div className={styles.score}>{global.DOLLAR + "" + numFormatter(user.Score)}</div>
+                        </div>
+                        <div className={styles.info_right}>
                             <div className={styles.nick}>{user.NickName}</div>
-                            <div className={styles.score}>{global.DOLLAR+" "+numFormatter(user.Score)}</div>
+                            <div className={styles.avatar_con}>
+                                <LazyImgix className={styles.avatar} src={user.img} alt={"Head"} width={90}/>
+                            </div>
                         </div>
                         {/*<LazyImage wrapperClassName={styles.avatar} src={user.img} alt={"Head"}/>*/}
-                        <LazyImgix className={styles.avatar} src={user.img} alt={"Head"} width={80}/>
                     </div>
                 ):(<></>)
             }

src/layout/Navbar/styles.module.scss

@@ -26,11 +26,13 @@
 .header{
   position: relative;
   //height:100%;
-  height:3.75rem;
+  height:2.49rem;
   width:100%;
   padding: 0px 40px;
-  background: var(--widget);
-  border-bottom: 1px solid var(--border);
+  //background: var(--widget);
+  background: linear-gradient(to right, #3d1915, #582a1e, #3d1915);
+  //border-bottom: 1px solid var(--border);
+  border-bottom: 0.05rem solid #4c1a0e;
   padding-left:85px;
   box-shadow:var(--widget-shadow);
   pointer-events: auto;
@@ -43,11 +45,18 @@
     //position:fixed;
     //position: absolute;
     position: relative;
-    height:3.75rem;
-    padding: 0px 10px;
+    height:2.49rem;
+    padding: 0px 0px;
     z-index: 2;
     pointer-events: auto;
   }
+  & .header_left{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 0.5rem;
+    gap: 0.4rem;
+  }
 }
 .header_room{
   display: flex;
@@ -144,28 +153,62 @@
   }
 }
 .user_info{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
   position: relative;
-  justify-content: flex-end;
+  height: 100%;
   gap: 0.5rem;
-  & .avatar{
-    height: 3rem;
-    width: auto;
-    border-radius: 50%;
-  }
-  & .info{
+  padding:0 0.5rem;
+  border-bottom-left-radius: 3rem;
+  border-top-left-radius: 3rem;
+  background-color: rgba(100, 54, 27, 0.86);
+  transition: padding .3s ease;
+  min-width: 53%;
+  & .info_right{
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-end;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.3rem;
     & .nick{
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: var(--text);
+      color: #FFFFFF;
+      max-width: 3.5rem;
+      white-space: nowrap; /* 防止文本换行 */
+      overflow: hidden; /* 隐藏超出部分 */
+      text-overflow: ellipsis; /* 显示省略号 */
+    }
+    & .avatar_con{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: #4a2d13;
+      border: 1px solid #76502b;
+      padding: 0.05rem;
+      min-width: 1.9rem;
+      min-height: 1.9rem;
+      & .avatar{
+        height: 1.9rem;
+        width: auto;
+        border-radius: 50%;
+      }
+    }
+  }
+  & .info_left{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.1rem;
+    & .coin{
+      margin-top: 0.2rem;
+      width: 2.03rem;
+      height: auto;
     }
     & .score{
       font-size: 0.9rem;
-      font-weight: 700;
-      color: #edc349;
+      color: #FFFFFF;
     }
   }
 }

src/styles/theme.js

@@ -97,7 +97,7 @@ export default createGlobalStyle`
     })};
     --widget-bg: ${theme('theme', {
         light: '#f6f7fb',
-        dark: '#25262b',
+        dark: '#1a120c',
     })};
     --swiper-btn-bg: ${theme('theme',{
         light:'#FFFFFF',

src/ui/SidebarTrigger/index.jsx

@@ -4,18 +4,26 @@ import styles from './styles.module.scss';
 // hooks
 import {useSidebar} from '@contexts/sidebarContext';
 
+import tgicon from '@assets/trigger/tgicon.png';
+
 // utils
 import classNames from 'classnames';
 
 const SidebarTrigger = () => {
     const {open, setOpen} = useSidebar();
+    // return (
+    //     <button className={classNames([styles.burger, open && styles.active])}
+    //             onClick={() => setOpen(!open)}
+    //             aria-label="Open sidebar">
+    //         <span className={styles.burger_line}/>
+    //         <span className={styles.burger_line}/>
+    //         <span className={styles.burger_line}/>
+    //     </button>
+    // )
     return (
-        <button className={classNames([styles.burger, open && styles.active])}
-                onClick={() => setOpen(!open)}
-                aria-label="Open sidebar">
-            <span className={styles.burger_line}/>
-            <span className={styles.burger_line}/>
-            <span className={styles.burger_line}/>
+        <button className={styles.container}
+                onClick={() => setOpen(!open)}>
+            <img className={styles.icon} src={tgicon} alt={''}/>
         </button>
     )
 }

src/ui/SidebarTrigger/styles.module.scss

@@ -30,3 +30,20 @@
         }
     }
 }
+.container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-style: solid;
+    border-width: 0.05rem;
+    border-color: rgb(81, 40, 23);
+    border-radius: 50%;
+    background-color: rgb(38, 18, 12);
+    width: 2.18rem;
+    height: 2.18rem;
+    transition: right var(--transition);
+    & .icon{
+        height: 0.95rem;
+        width: auto;
+    }
+}

src/widgets/WWelfarebar/index.jsx

@@ -11,8 +11,9 @@ import {useThemeProvider} from "@contexts/themeContext";
 import {useSidebar} from "@contexts/sidebarContext";
 import {useLocation} from "react-router-dom";
 import {ROUTE_PATH} from "@constants/routes";
+
 const i18n=global.i18n;
-const WelfareBtn=({children,open=false,pressDown=false,...props})=>{
+const WelfareBtn=({children,open=false,pressDown=false,renderIcon=null,renderLabel=null,...props})=>{
     const [bopen,setBopen]=useState(false);
     const [show,setShow]=useState(false);
     useEffect(()=>{
@@ -36,9 +37,17 @@ const WelfareBtn=({children,open=false,pressDown=false,...props})=>{
                         className={`${styles.wlf_btn} ${bopen ? styles.wlf_btn_open : styles.wlf_btn_close} ${pressDown ? styles.wlf_btn_press : ''}`}
                         {...props}
                     >
-                        {
-                            children == null ? (<></>) : children
-                        }
+                        <div className={styles.wlf_bg}/>
+                        <div className={styles.wlf_icon}>
+                            {
+                                renderIcon!=null?renderIcon():(<></>)
+                            }
+                        </div>
+                        <div className={styles.wlf_mask}>
+                            {
+                                renderLabel!=null?renderLabel():(<></>)
+                            }
+                        </div>
                     </button>
                 ):(<></>)
             }
@@ -246,77 +255,111 @@ const WWelfarebar = () => {
         return (
             <div className={`${styles.container} ${extra}`}>
                 <div className={`${styles.content} ${isClose?styles.content_close:''}`}>
-                    <WelfareBtn key={"protect"} open={openProtect} pressDown={getWelfTabState(APP_WELFARE.PROTECT)}
+                    <WelfareBtn key={"protect"}
+                                open={openProtect}
+                                pressDown={getWelfTabState(APP_WELFARE.PROTECT)}
+                                renderIcon={()=>{
+                                    return (
+                                        <div className={styles.wlf_protect}>
+                                            {/*<img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>*/}
+                                            <img className={styles.p_img}
+                                                 src={require("@assets/welfare/fundos_" + symbol + ".png")}/>
+                                            <div ref={starPRef} className={styles.p_stars}>
+                                                {
+                                                    stars.map((item, index) => {
+                                                        return (
+                                                            <div key={index}
+                                                                 className={`${styles.star} ${styles['star_ani_' + index]}`}></div>
+                                                        )
+                                                    })
+                                                }
+                                            </div>
+                                        </div>
+                                    )
+                                }}
+                                renderLabel={() => {
+                                    return (<img className={styles.wlf_protect_label}
+                                                 src={require("@assets/welfare/fundos_title_" + i18n.language + ".png")}/>)
+                                }}
                                 onClick={() => {
                                     global.showProtectReward();
                                 }}>
-                        <div className={styles.wlf_protect}>
-                            {/*<img src={require("@assets/welfare/fundos_" + i18n.language + ".png")}/>*/}
-                            <img className={styles.p_img} src={require("@assets/welfare/fundos_" + symbol + ".png")}/>
-                            <div ref={starPRef} className={styles.p_stars}>
-                                {
-                                    stars.map((item,index)=>{
-                                        return (
-                                            <div key={index} className={`${styles.star} ${styles['star_ani_'+index]}`}></div>
-                                        )
-                                    })
-                                }
-                            </div>
-                            <img className={styles.p_txt} src={require("@assets/welfare/fundos_title_" + i18n.language + ".png")}/>
-                        </div>
                     </WelfareBtn>
-                    <WelfareBtn key={"first_pay"} open={openFirst} pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
-                                onClick={() => {
-                                    global.showFirstPay();
-                                }}>
-                        <div className={styles.wlf_first}>
-                            <div className={styles.wlf_first_mask} style={{
-                                WebkitMask:`url(${require("@assets/welfare/bag_"+symbol+".png")}) 0 0/100%`
-                            }}>
-                                <img className={styles.f_img} src={require("@assets/welfare/bag_"+symbol+".png")}/>
-                            </div>
-                            {
-                                firstCD<=0? (<img className={styles.f_txt}
-                                                 src={require("@assets/welfare/first_" + i18n.language + ".png")}/>): (
-                                    <span data-title={formatFirstCD(firstCD)}
-                                          className={styles.f_cdtxt}>{formatFirstCD(firstCD)}</span>
-                                )
-                            }
+                    <WelfareBtn key={"first_pay"}
+                                open={openFirst}
+                                pressDown={getWelfTabState(APP_WELFARE.FIRST_PAY)}
+                                renderIcon={()=>{
+                                    return (
+                                        <div className={styles.wlf_first}>
+                                            <div className={styles.wlf_first_mask} style={{
+                                                WebkitMask: `url(${require("@assets/welfare/bag_" + symbol + ".png")}) 0 0/100%`
+                                            }}>
+                                                <img className={styles.f_img}
+                                                     src={require("@assets/welfare/bag_" + symbol + ".png")}/>
+                                            </div>
 
-                        </div>
-                    </WelfareBtn>
-                    <WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}
+                                        </div>
+                                    )
+                                }}
+                                renderLabel={()=>{
+                                    return (
+                                        <>
+                                            {
+                                                firstCD <= 0 ? (<img className={styles.wlf_first_label}
+                                                                     src={require("@assets/welfare/first_" + i18n.language + ".png")}/>) : (
+                                                    <span data-title={formatFirstCD(firstCD)}
+                                                          className={styles.wlf_first_cdlabel}>{formatFirstCD(firstCD)}</span>
+                                                )
+                                            }
+                                        </>
+                                    )
+                                }}
                                 onClick={() => {
-                                    global.showBindPhone();
+                                    global.showFirstPay();
                                 }}>
-                        <div className={styles.wlf_bind}>
-                            {/*<img className={`${styles.b_icon} iconshake`}*/}
-                            {/*     src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>*/}
-                            <div className={`${styles.b_icon} iconshake`}>
-                                <img className={styles.b_bg} src={require("@assets/welfare/otp_" + symbol + ".png")}/>
-                                <img className={styles.b_get}
-                                     src={require("@assets/welfare/get_" + i18n.language + ".png")}/>
-                                <span data-title={regCoins}
-                                      className={styles.b_num}>{regCoins}</span>
-                            </div>
-                            <img className={`${styles.b_txt}`}
-                                 src={require("@assets/welfare/bind_txt_" + i18n.language + ".png")}/>
-                        </div>
                     </WelfareBtn>
-                    <WelfareBtn key={"bonus_pack"} open={openBonusPack}
+                    {/*<WelfareBtn key={"bind"} open={openBind} pressDown={getWelfTabState(APP_WELFARE.BIND)}*/}
+                    {/*            onClick={() => {*/}
+                    {/*                global.showBindPhone();*/}
+                    {/*            }}>*/}
+                    {/*    <div className={styles.wlf_bind}>*/}
+                    {/*        /!*<img className={`${styles.b_icon} iconshake`}*!/*/}
+                    {/*        /!*     src={require("@assets/welfare/veri_" + i18n.language + ".png")}/>*!/*/}
+                    {/*        <div className={`${styles.b_icon} iconshake`}>*/}
+                    {/*            <img className={styles.b_bg} src={require("@assets/welfare/otp_" + symbol + ".png")}/>*/}
+                    {/*            <img className={styles.b_get}*/}
+                    {/*                 src={require("@assets/welfare/get_" + i18n.language + ".png")}/>*/}
+                    {/*            <span data-title={regCoins}*/}
+                    {/*                  className={styles.b_num}>{regCoins}</span>*/}
+                    {/*        </div>*/}
+                    {/*        <img className={`${styles.b_txt}`}*/}
+                    {/*             src={require("@assets/welfare/bind_txt_" + i18n.language + ".png")}/>*/}
+                    {/*    </div>*/}
+                    {/*</WelfareBtn>*/}
+                    <WelfareBtn key={"bonus_pack"}
+                                open={openBonusPack}
                                 pressDown={getWelfTabState(APP_WELFARE.BONUS_PACK)}
+                                renderIcon={()=>{
+                                    return (
+                                        <div className={styles.wlf_bpack}>
+                                            <div className={styles.wlf_bpack_mask} style={{
+                                                WebkitMask: `url(${require("@assets/welfare/bonuspack.png")}) 0 0/100%`
+                                            }}>
+                                                <img className={styles.f_img}
+                                                     src={require("@assets/welfare/bonuspack.png")}/>
+                                            </div>
+                                        </div>
+                                    )
+                                }}
+                                renderLabel={()=>{
+                                    return (
+                                        <span data-title={formatBonusPackCD(bonusCD)}
+                                              className={styles.wlf_bpack_cdlabel}>{formatBonusPackCD(bonusCD)}</span>
+                                    )
+                                }}
                                 onClick={() => {
                                     global.showBonusPack();
                                 }}>
-                        <div className={styles.wlf_bpack}>
-                            <div className={styles.wlf_bpack_mask} style={{
-                                WebkitMask: `url(${require("@assets/welfare/bonuspack.png")}) 0 0/100%`
-                            }}>
-                                <img className={styles.f_img} src={require("@assets/welfare/bonuspack.png")}/>
-                            </div>
-                            <span data-title={formatBonusPackCD(bonusCD)}
-                                  className={styles.f_cdtxt}>{formatBonusPackCD(bonusCD)}</span>
-                        </div>
                     </WelfareBtn>
                 </div>
             </div>

src/widgets/WWelfarebar/styles.module.scss

@@ -1,7 +1,8 @@
-$leftb:"./../../assets/welfare/leftb.png";
-$leftb_1:"./../../assets/welfare/leftb_1.png";
+//$leftb:"./../../assets/welfare/leftb.png";
+//$leftb_1:"./../../assets/welfare/leftb_1.png";
 $star:"./../../assets/welfare/star.png";
-
+$leftb_n:"./../../assets/welfare/leftb_n.png";
+$leftb_mask:'./../../assets/welfare/leftb_mask.png';
 
 .container{
   display: flex;
@@ -15,7 +16,7 @@ $star:"./../../assets/welfare/star.png";
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  gap: 0.8rem;
+  gap: 1.3rem;
   transition: all var(--transition);
   &_close{
     margin-left: -100%;
@@ -26,14 +27,17 @@ $star:"./../../assets/welfare/star.png";
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  position: relative;
   pointer-events: auto;
-  width: 5rem;
-  aspect-ratio: 144/162;
-  background: url($leftb);
+  width: 3.52rem;
+  aspect-ratio: 149/131;
+  //width: 5rem;
+  //aspect-ratio: 144/162;
+  //background: url($leftb);
   background-size: 100% 100%;
   &_press{
-    background: url($leftb_1);
-    background-size: 100% 100%;
+    //background: url($leftb_1);
+    //background-size: 100% 100%;
   }
   opacity: 0;
   transform: translateX(-100%);
@@ -47,50 +51,78 @@ $star:"./../../assets/welfare/star.png";
     transform: translateX(-100%);
     transition: all .3s ease;
   }
+  & .wlf_bg{
+    position: absolute;
+    z-index: 0;
+    left: 0;
+    width: 5.14rem;
+    aspect-ratio: 217/331;
+    pointer-events: none;
+    background-image: url($leftb_n);
+    background-size: 100% 100%;
+  }
+  & .wlf_icon{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    z-index: 1;
+    left: 0;
+    width: 3.52rem;
+    height: 3.1rem;
+  }
+  & .wlf_mask{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    z-index: 2;
+    left: -0.213rem;
+    bottom: 0rem;
+    width: 3.74rem;
+    aspect-ratio: 158/63;
+    pointer-events: none;
+    background-image: url($leftb_mask);
+    background-size: 100% 100%;
+  }
 }
 .wlf_protect{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 5rem;
-  height: auto;
-  //margin-left: 0.5rem;
-  margin-top: -0.5rem;
   position: relative;
+  width: 100%;
+  height: 100%;
   & .p_img{
-    width: 3.3rem;
+    position: absolute;
+    top: -0.6rem;
+    left: 0.6rem;
+    width: 2.06rem;
     height: auto;
   }
   & .p_stars{
-    top: -1rem;
+    top: -2rem;
     left: 0rem;
     right: 1.4rem;
     bottom: 1.2rem;
     position: absolute;
   }
-  & .p_txt{
-    position: absolute;
-    z-index: 2;
-    height: 1.5rem;
+  &_label{
+    height: 1.37rem;
     width: auto;
-    top: 2.2rem;
   }
 }
 .wlf_first{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 3.2rem;
-  aspect-ratio: 91/115;
-  margin-left: -0.5rem;
   position: relative;
+  width: 100%;
+  height: 100%;
   &_mask{
-    width: 3.2rem;
-    aspect-ratio: 84/86;
+    width: 3.1rem;
+    aspect-ratio: 135/111;
     flex-shrink: 0;
     position: absolute;
     overflow: hidden;
-    top: 0;
+    top: -0.8rem;
+    left: 0.15rem;
     &:after{
       content: '';
       position: absolute;
@@ -102,33 +134,27 @@ $star:"./../../assets/welfare/star.png";
     }
   }
   & .f_img{
-    width: 3.2rem;
+    width: 3.1rem;
     height: auto;
   }
-  & .f_txt{
-    position: absolute;
-    z-index: 2;
-    height: 1.52rem;
+  &_label{
+    height: 1.54rem;
     width: auto;
-    top: 2.6rem;
   }
-  & .f_cdtxt{
-    position: absolute;
-    z-index: 2;
-    top: 2.8rem;
+  &_cdlabel{
     color: #fff;
-    -webkit-text-stroke: 4px #2a3f5b;
-    font-weight: 600;
+    -webkit-text-stroke: 4px #381e0c;
+    font-weight: bold;
     font-size: 0.9rem;
     &::before{
       content: attr(data-title);
       position: absolute;
-      background-image: linear-gradient(to bottom,#fff,#24e2fc);
+      background-image: linear-gradient(to bottom,#815e3e,#efe9a3);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      -webkit-text-stroke: 0px #2a3f5b;
-      font-weight: 600;
+      -webkit-text-stroke: 0px #381e0c;
+      font-weight: bold;
       font-size: 0.9rem;
     }
   }
@@ -268,20 +294,17 @@ $star:"./../../assets/welfare/star.png";
 }
 
 .wlf_bpack{
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 3.8rem;
-  aspect-ratio: 104/115;
-  margin-left: -0.5rem;
   position: relative;
+  width: 100%;
+  height: 100%;
   &_mask{
-    width: 3.8rem;
+    width: 3.1rem;
     aspect-ratio: 104/89;
     flex-shrink: 0;
     position: absolute;
     overflow: hidden;
-    top: 0;
+    top: -0.7rem;
+    left: 0.15rem;
     &:after{
       content: '';
       position: absolute;
@@ -293,27 +316,24 @@ $star:"./../../assets/welfare/star.png";
     }
   }
   & .f_img{
-    width: 3.8rem;
+    width: 3.1rem;
     height: auto;
   }
-  & .f_cdtxt{
-    position: absolute;
-    z-index: 2;
-    top: 3rem;
+  &_cdlabel{
     color: #fff;
-    -webkit-text-stroke: 4px #2a3f5b;
-    font-weight: 600;
-    font-size: 0.9rem;
+    -webkit-text-stroke: 4px #381e0c;
+    font-weight: bold;
+    font-size: 0.8rem;
     &::before{
       content: attr(data-title);
       position: absolute;
-      background-image: linear-gradient(to bottom,#fff,#24e2fc);
+      background-image: linear-gradient(to bottom,#815e3e,#efe9a3);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
-      -webkit-text-stroke: 0px #2a3f5b;
-      font-weight: 600;
-      font-size: 0.9rem;
+      -webkit-text-stroke: 0px #381e0c;
+      font-weight: bold;
+      font-size: 0.8rem;
     }
   }
 }