init

2025-03-10 15:44:49 +08:00 · 2025-03-10 15:44:49 +08:00 · 45112b2881
commit 45112b2881
687 changed files with 97295 additions and 0 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,16 @@
+VITE_APP_H5_NO=1
+VITE_CHANNEL_ID=""
+VITE_APP_NAME=Spinz777
+# VITE_APP_NAME=Winzz777
+VITE_APP_THEME=red
+VITE_APP_ID=101
+# VITE_APP_ID=103
+VITE_APP_DOWNLOAD_URL="https://www.777spinz.com/spinz777_101_1.0.0.apk"
+# VITE_APP_DOWNLOAD_URL="https://www.777spinz.com/Winzz777_103_100.apk"
+VITE_APP_LOCALE=en
+VITE_APP_IMAGE_URL="https://img1.sp77.in/frontimg"
+VITE_WALLET_URL="https://inrchain.in/#/?inviteCode=m5ncrxv0"
+VITE_NAME_UPPER=SPINZ777
+# VITE_NAME_UPPER=WINZZ777
+VITE_CURRENCY=INR
+VITE_CURRENCY_SYMBOL=₹
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,8 @@
+NODE_ENV = development
+VITE_APP_BASE_URL = https://game.777spinz.com
+# VITE_APP_BASE_URL=https://game-api.777spinz.com
+# VITE_APP_BASE_URL=http://192.168.1.24:8093
+VITE_APP_ID = 101
+
+VITE_APP_H5_NO = 1
+VITE_CHANNEL_ID = ""
--- a/.env.production
+++ b/.env.production
@ -0,0 +1,2 @@
+NODE_ENV=production
+VITE_APP_BASE_URL=https://game-api.777spinz.com
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,33 @@
+.DS_Store
+node_modules
+/dist
+/config/server.config.js
+/unpackage
+.svn
+
+# lock files
+yarn.lock
+package.lock
+package-lock.json
+pnpm-lock.yaml
+
+# local env files
+.env.local
+.env.*.local
+*.npmrc
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+**/*.log
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.local
+*.sw*
--- a/.hbuilderx/launch.json
+++ b/.hbuilderx/launch.json
@ -0,0 +1,9 @@
+{
+    "version" : "1.0",
+    "configurations" : [
+        {
+            "playground" : "custom",
+            "type" : "uni-app:app-android"
+        }
+    ]
+}
--- a/21
+++ b/21
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -0,0 +1,35 @@
+# Unilucky 777
+
+This project is initialized with Mario. Follow is the quick guide for how to use.
+
+## Environment Prepare
+
+Install `node_modules`:
+
+```bash
+npm install
+```
+
+or
+
+```bash
+yarn install
+```
+
+## Provided Scripts
+
+Scripts provided in `package.json`. It's safe to modify or add additional script:
+
+### Start project
+
+```bash
+npm run dev:h5
+```
+
+### Build project
+
+```bash
+npm run build:h5:all
+```
+
+## More
--- a/deploy/file.js
+++ b/deploy/file.js
@ -0,0 +1,51 @@
+const fs = require('fs').promises
+const path = require('path')
+
+// 复制文件夹到指定目录
+async function copyDirectory (source, destination) {
+  const entries = await fs.readdir(source, { withFileTypes: true });
+  await fs.mkdir(destination, { recursive: true });
+  for (let entry of entries) {
+    const srcPath = path.join(source, entry.name);
+    const destPath = path.join(destination, entry.name);
+ 
+    if (entry.isDirectory()) {
+      await copyDirectory(srcPath, destPath);
+    } else {
+      await fs.copyFile(srcPath, destPath);
+    }
+  }
+}
+
+// 删除文件夹
+async function deleteDirectory (dir) {
+  const isExist = await fileExists(dir)
+  if (!isExist) {
+    return true
+  }
+  const entries = await fs.readdir(dir, { withFileTypes: true })
+  for (let entry of entries) {
+    const fullPath = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      await deleteDirectory(fullPath)
+    } else {
+      await fs.unlink(fullPath)
+    }
+  }
+  await fs.rmdir(dir)
+}
+
+// 判断文件是否存在
+async function fileExists(filePath) {
+  try {
+    await fs.access(filePath);
+    return true; // 文件存在
+  } catch {
+    return false; // 文件不存在
+  }
+}
+
+module.exports = {
+  copyDirectory,
+  deleteDirectory
+}
--- a/deploy/index.js
+++ b/deploy/index.js
@ -0,0 +1,54 @@
+const path = require('path')
+const { exec } = require('child_process')
+
+const fileHandler = require('./file')
+
+const packages = ['h5101', 'h5103', 'h5106']
+let currentIndex = 0
+
+const startPackage = (package) => {
+  console.log('开始打包：', package)
+  const packagePath = path.resolve(__dirname, '../')
+  exec(`cd ${packagePath} && npm run build:${package}`, (error, stdout, stderr) => {
+    if (error) {
+      console.error(`打包出错：${package} ${error}`)
+      return
+    }
+
+    if (stderr) {
+      console.error('std error', stderr)
+      return
+    }
+    // console.log('std out', stdout)
+
+    console.log('打包成功：', package)
+
+    const sourceDir = path.resolve(__dirname, '../dist/build/h5')
+    const destinationDir = path.resolve(__dirname, `../dist/package/${package}`)
+
+    console.log('复制文件:', sourceDir)
+    console.log('目标目录:', destinationDir)
+    
+    fileHandler.deleteDirectory(destinationDir)
+      .then(() => {
+        fileHandler.copyDirectory(sourceDir, destinationDir)
+          .then(() => {
+            console.log('复制完成', package)
+
+            if (currentIndex < packages.length - 1) {
+              currentIndex++
+              startPackage(packages[currentIndex])
+            } else {
+              console.log('全部打包完成')
+            }
+          })
+          .catch(err => {
+            console.error('复制过程中发生错误:', err)
+          })
+      }).catch(error => {
+        console.error('删除文件夹时发生错误:', error)
+      })
+  })
+}
+
+startPackage(packages[currentIndex])
--- a/index.html
+++ b/index.html
@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="theme-color" />
+  <meta name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
+  <link rel="icon" href="./src/static/logo1.png" />
+  <link rel="preconnect" href="https://storage.googleapis.com" />
+  <link rel="preconnect" href="https://game-api.777spinz.com" />
+  <script src="https://telegram.org/js/telegram-web-app.js?56"></script>
+  <!-- <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script> -->
+  <title>Spinz777</title>
+  <!-- <title>Winzz777</title> -->
+  <!--preload-links-->
+  <!--app-context-->
+</head>
+
+<body>
+  <div id="app"><!--app-html--></div>
+  <script type="module" src="./src/main.js"></script>
+  <script>
+    window.Telegram.WebApp.ready()
+    const WebApp = window.Telegram.WebApp;
+    console.log("initData", WebApp.initData);
+    localStorage.setItem("TgInitData", WebApp.initData);
+    // if (WebApp.initDataUnsafe.user) {
+    //   console.log(WebApp.initDataUnsafe);
+
+    //   initData = `query_id=${
+    //     WebApp.initDataUnsafe.query_id
+    //   }&user=${encodeURIComponent(
+    //     JSON.stringify(WebApp.initDataUnsafe.user)
+    //   )}&auth_date=${WebApp.initDataUnsafe.auth_date}&hash=${
+    //     WebApp.initDataUnsafe.hash
+    //   }`;
+    //   localStorage.setItem("TgInitData", JSON.stringify(initData));
+    // }
+  </script>
+  <!-- Facebook Pixel Code -->
+  <script>
+    let fbId = "";
+    const search = new URLSearchParams(window.location.search);
+    fbId = search.get("fid");
+    if (!fbId) {
+      fbId = localStorage.getItem("fbId");
+      if (!fbId) {
+        fbId = "543414502000542";
+      }
+    }
+
+    localStorage.setItem("fbId", fbId);
+    // const fbId = '543414502000542';
+    // const fbId = "575796885034758";
+    !(function (f, b, e, v, n, t, s) {
+      if (f.fbq) return;
+      n = f.fbq = function () {
+        n.callMethod
+          ? n.callMethod.apply(n, arguments)
+          : n.queue.push(arguments);
+      };
+      if (!f._fbq) f._fbq = n;
+      n.push = n;
+      n.loaded = !0;
+      n.version = "2.0";
+      n.queue = [];
+      t = b.createElement(e);
+      t.async = !0;
+      t.src = v;
+      s = b.getElementsByTagName(e)[0];
+      s.parentNode.insertBefore(t, s);
+    })(
+      window,
+      document,
+      "script",
+      "https://connect.facebook.net/en_US/fbevents.js"
+    );
+    fbq("init", fbId);
+    fbq("track", "PageView");
+    window.fbq = fbq;
+
+    const node = document.createElement("noscript");
+    node.innerHTML = `<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=${fbId}&ev=PageView&noscript=1">`;
+    document.body.appendChild(node);
+  </script>
+  <!-- End Facebook Pixel Code -->
+   <!-- Start of LiveChat (www.livechat.com) code -->
+<!-- <script>
+  window.__lc = window.__lc || {};
+  window.__lc.license = 19034769;
+  window.__lc.integration_name = "manual_onboarding";
+  window.__lc.product_name = "livechat";
+  ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
+</script>
+<noscript><a href="https://www.livechat.com/chat-with/19034769/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript> -->
+<!-- End of LiveChat code -->
+</body>
+
+</html>
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "~": [
+        "./*"
+      ]
+    },
+    "types": [
+      "@dcloudio/types",
+      "@uni-helper/uni-app-types"
+    ]
+  },
+  "resolveExtensions": [
+    ".js",
+    ".vue"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/nativeplugins/Tidu-GaidUtil/android/gaidutil-release.aar
+++ b/nativeplugins/Tidu-GaidUtil/android/gaidutil-release.aar
--- a/nativeplugins/Tidu-GaidUtil/android/libs/getGAID.jar
+++ b/nativeplugins/Tidu-GaidUtil/android/libs/getGAID.jar
--- a/nativeplugins/Tidu-GaidUtil/package.json
+++ b/nativeplugins/Tidu-GaidUtil/package.json
@ -0,0 +1,20 @@
+{
+	"name": "GaidUtil",
+	"id": "Tidu-GaidUtil",
+	"version": "0.0.1",
+	"description": "获取gaid插件",
+	"_dp_type":"nativeplugin",
+	"_dp_nativeplugin":{
+		"android": {
+			"plugins": [
+				{
+					"type": "module",
+					"name": "Tidu-GaidUtil",
+					"class": "com.tidu.util.gaid.GaidUtilModule"
+				}
+			],
+			"integrateType": "aar",
+			"minSdkVersion" : 16
+		}
+	}
+}
--- a/package.json
+++ b/package.json
--- a/shims-uni.d.ts
+++ b/shims-uni.d.ts
@ -0,0 +1,10 @@
+/// <reference types='@dcloudio/types' />
+import 'vue'
+
+declare module '@vue/runtime-core' {
+  type Hooks = App.AppInstance & Page.PageInstance;
+
+  interface ComponentCustomOptions extends Hooks {
+
+  }
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,485 @@
+<script>
+import {
+    useAppStore
+} from '@/store/useAppStore.js'
+import {
+    useLangStore
+} from '@/store/useLangStore.js'
+import {
+    useUserStore
+} from '@/store/useUserStore.js'
+import {
+    useThemeStore
+} from '@/store/useThemeStore.js'
+import {
+    useI18n
+} from 'vue-i18n'
+// #ifdef APP-PLUS
+import { getAdid } from '@/module/utils/util.js'
+import { getAndroidId } from "@/uni_modules/x-uniq-id"
+// #endif
+import md5 from "crypto-js/md5"
+export default {
+    onLaunch: function (options) {
+
+        console.log('App Launch', options)
+        console.log('Process.env', process.env)
+        this.handleAppLaunch(options);
+        // #ifdef APP-PLUS
+        plus.navigator.hideSystemNavigation()
+        // getGoogleAdId().then(adId => {
+        //     console.log("Google 广告 ID:", adId);
+        // }).catch(err => {
+        //     console.error('Google err:', err);
+        // });
+        // #endif
+
+        // uni.getClipboardData({
+        //     success: (res) => {
+        //         if (res.data) {
+        //             console.log("Clipboard:", res.data)
+        //             try {
+        //                 const params = JSON.parse(res.data)
+        //                 const appStore = useAppStore()
+        //                 appStore.channelId = params?.channelId
+        //                 appStore.h5No = params?.h5no
+        //                 appStore.fbc = params?.fbc
+        //                 appStore.fbp = params?.fbp
+        //                 uni.setClipboardData({
+        //                     data: '',
+        //                 })
+        //             } catch (error) {
+        //                 console.log(error);
+
+        //             }
+        //             uni.hideToast()
+        //         }
+        //         uni.hideToast()
+        //     }
+        // })
+
+    },
+    onShow: function (options) {
+        console.log('App Show', options)
+        uni.onWindowResize(this.handleWindowResize)
+    },
+    onHide: function () {
+        console.log('App Hide')
+        uni.offWindowResize(this.handleWindowResize)
+    },
+    methods: {
+        handleAppLaunch(options) {
+            this.appDataInit(options)
+            // this.setupTabbar()
+            this.setupTheme()
+
+            // setInterval(() => {
+            // 	uni.getNetworkType({
+            // 		success: (res) => {
+            // 			uni.showToast({
+            // 				title: '无网络'
+            // 			})
+            // 			plus.runtime.quit()
+            // 		}
+            // 	})
+            // }, 3000)
+        },
+        handleWindowResize() {
+            const appStore = useAppStore()
+            appStore.windowSizeChange()
+        },
+        async appDataInit(options) {
+            const appStore = useAppStore()
+            appStore.asyncFromLocal()
+
+            const userStore = useUserStore()
+            userStore.asyncFromLocal()
+            const langStore = useLangStore()
+            langStore.asyncFromLocal()
+            const res = uni.getSystemInfoSync()
+
+            // #ifdef APP-PLUS
+            let s = ''
+            try {
+                const gaid = await getAdid()
+                appStore.androidId = gaid
+                console.log("gaid:", gaid);
+                s = 'g_'
+            } catch (error) {
+                appStore.androidId = await getAndroidId()
+                s = 'a_'
+            }
+            console.log("androidId:", appStore.androidId);
+            
+            appStore.deviceId = s + md5(appStore.packageName + appStore.androidId).toString()
+            // appStore.deviceId = s + appStore.androidId
+            // #endif
+
+            //系统信息
+            // #ifdef H5
+            appStore.deviceId = res.deviceId
+            // #endif
+            appStore.systemInfo = res
+            appStore.isNative = res.uniPlatform === 'app'
+            appStore.appStatusBarHeight = res.statusBarHeight
+            // 设备信息
+            const deviceInfo = uni.getDeviceInfo()
+            appStore.deviceInfo = deviceInfo
+            console.log('deviceInfo', deviceInfo)
+
+            if (options.query) {
+                console.log('query:', options.query);
+
+                if (options.query.cid) {
+                    appStore.channelId = options.query.cid
+                }
+                if (options.query.h5No) {
+                    console.log('h5No:', options.query.h5No);
+                    
+                    appStore.h5No = Number(options.query.h5No)
+                }
+                if (options.query.invite_code) {
+                    appStore.inviteCode = options.query.invite_code
+                }
+                if (options.query.fbp) {
+                    appStore.fbp = options.query.fbp
+                }
+                if (options.query.fbc) {
+                    appStore.fbc = options.query.fbc
+                }
+                if (options.query.uni_key) {
+                    appStore.uniKey = options.query.uni_key
+                } else {
+                    appStore.uniKey = '' + Date.now() + Math.floor(Math.random() * 1000)
+                }
+                if(options.query.mcId) {
+                    appStore.mcId = options.query.mcId
+                }
+                // NOTE: for 殼包
+                if (options.query.isCoat && options.query.isCoat === '1') {
+                    appStore.isCoat = true
+
+                    // NOTE: for 殼包
+                    const msg = {
+                        eventName: 'coat-version',
+                        version: process.env.COAT_VER || '0',
+                        url: process.env.COAT_URL || 'https://www.google.com/'
+                    };
+
+                    parent.postMessage(JSON.stringify(msg), '*');
+                }
+                if (options.query.link_id) {
+                    appStore.roibestLinkId = options.query.link_id
+                }
+
+                if (options.query.lk7data) {
+                    appStore.lk7data = options.query.lk7data
+                }
+
+                appStore.saveToLocal()
+            }
+
+            if (options.path !== 'pages/index/index') {
+                // if (!userStore.isLogin) {
+                uni.reLaunch({
+                    url: '/pages/index/index'
+                })
+                // }
+            }
+
+            appStore.getInfo()
+            userStore.getServiceInfo()
+
+        },
+        setupTabbar() {
+            const themeStore = useThemeStore()
+            const {
+                t
+            } = useI18n()
+            uni.setTabBarStyle({
+                backgroundColor: themeStore.theme.tabbar.bgColor,
+                color: themeStore.theme.tabbar.textColor,
+                selectedColor: themeStore.theme.tabbar.textSelectColor
+            })
+
+            const tabBarMap = [{
+                text: t('app.tabbar.home'),
+                normal: themeStore.imageUrl.tabbar1,
+                select: themeStore.imageUrl.tabbar1Select
+            },
+            {
+                text: t('app.tabbar.promo'),
+                normal: themeStore.imageUrl.tabbar2,
+                select: themeStore.imageUrl.tabbar2Select
+            },
+            {
+                text: t('app.tabbar.vip'),
+                normal: themeStore.imageUrl.tabbar3,
+                select: themeStore.imageUrl.tabbar3Select
+            },
+            {
+                text: t('app.tabbar.earnMoney'),
+                normal: themeStore.imageUrl.tabbar4,
+                select: themeStore.imageUrl.tabbar4Select
+            },
+            {
+                text: t('app.tabbar.account'),
+                normal: themeStore.imageUrl.tabbar5,
+                select: themeStore.imageUrl.tabbar5Select
+            },
+            ]
+
+            tabBarMap.map((el, index) => {
+                uni.setTabBarItem({
+                    index,
+                    text: el.text,
+                    iconPath: el.normal,
+                    selectedIconPath: el.select
+                })
+            })
+        },
+        setupTheme() {
+            const themeStore = useThemeStore()
+            // #ifdef H5
+            document.body.style.backgroundColor = themeStore.theme.bgColor
+            document.body.style.color = themeStore.theme.text.normal
+            document.querySelector('meta[name="theme-color"]').setAttribute('content', themeStore.theme.bgColor)
+            // #endif
+
+            // uni.setBackgroundColor({
+            //     backgroundColor: themeStore.theme.bgColor
+            // })
+
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '@/uni_modules/uni-scss/index.scss';
+
+// #chat-widget-container{
+//     position: fixed;
+//     bottom: 30% !important;
+//     right: 0;
+//     z-index: 9999;
+// }
+page {
+    width: 100%;
+    min-height: 100%;
+    /* font-size: $font-14; */
+    line-height: 1.35;
+    // --safe-area-inset-top: 0px;  
+    // --safe-area-inset-right: 0px;  
+    // --safe-area-inset-bottom: 0px;  
+    // --safe-area-inset-left: 0px;
+    // background-color: #610606;
+    // color: #ffffff;
+    // background-color: #ffffff;
+    // color: #211e21;
+    font-weight: 500;
+}
+
+body {
+    overscroll-behavior-y: contain;
+}
+
+view {
+    box-sizing: border-box;
+}
+
+img {
+    pointer-events: none;
+    display: flex;
+}
+
+image {
+    display: block;
+}
+
+div {
+    box-sizing: border-box;
+}
+
+.safe-area {
+    padding-bottom: constant(safe-area-inset-bottom) !important;
+    padding-bottom: env(safe-area-inset-bottom) !important;
+}
+
+.uni-page-body {
+    height: 100%;
+}
+
+.color-linear {
+    background-image: -webkit-linear-gradient(1.95deg, #6B0916, #BC282D);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+// image{
+// 	width: 100%;
+// }
+/*每个页面公共css */
+.w-full {
+    width: 100%;
+}
+
+.relative {
+    position: relative;
+}
+
+.pos-absolute {
+    position: absolute;
+}
+
+.p-1 {
+    padding: 10rpx;
+}
+
+.p-2 {
+    padding: 20rpx;
+}
+
+.px-1 {
+    padding-left: 10rpx;
+    padding-right: 10rpx;
+}
+
+.pt28 {
+    padding-top: 28rpx;
+}
+
+.py-1 {
+    padding-top: 10rpx;
+    padding-bottom: 10rpx;
+}
+
+.mr-1 {
+    margin-right: 10rpx;
+}
+
+.ml-1 {
+    margin-left: 10rpx;
+}
+
+.ml-2 {
+    margin-left: 20rpx;
+}
+
+.ml-1_5 {
+    margin-left: 15rpx;
+}
+
+.mt-1 {
+    margin-top: 10rpx;
+}
+
+.mt-5 {
+    margin-top: 20rpx;
+}
+
+.mt-8 {
+    margin-top: 40rpx;
+}
+
+.mb-1 {
+    margin-bottom: 10rpx;
+}
+
+.mt30 {
+    margin-top: 30rpx;
+}
+
+.pt30 {
+    padding-top: 20rpx;
+}
+
+.flex {
+    display: flex;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.row-center {
+    display: flex;
+    justify-content: center;
+}
+
+.col-center {
+    display: flex;
+    align-items: center;
+}
+
+.flex-end {
+    justify-content: flex-end;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+.shrink-0 {
+    flex-shrink: 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.grow-0 {
+    flex-grow: 0;
+}
+
+.justify-between {
+    justify-content: space-between;
+}
+
+.justify-center {
+    justify-content: center;
+}
+
+.items-center {
+    align-items: center;
+}
+
+.items-end {
+    align-items: flex-end;
+}
+
+.justify-end {
+    justify-content: flex-end;
+}
+
+.justify-around {
+    justify-content: space-around;
+}
+
+.items-start{
+    align-items: flex-start;
+}
+.uni-modal {
+    background-color: #610606 !important;
+
+    .uni-modal__hd {
+        color: #fff !important;
+    }
+
+    .uni-modal__btn_default {
+        color: rgba(255, 255, 255, 0.76) !important;
+    }
+}
+
+.uni-popup {
+    z-index: 9999 !important;
+}
+</style>
--- a/src/api/account.js
+++ b/src/api/account.js
@ -0,0 +1,168 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getAccountUrl: ipConfig.api_app + '/user/getUserInfo',
+	getVipUrl: ipConfig.api_app + '/vip/getVipInfo',
+	getProfileUrl: ipConfig.api_app + '/user/profile',
+	editNickNameUrl: ipConfig.api_app + "/user/rename",
+	editProfileUrl: ipConfig.api_app + "/user/editprofile",
+	bindPhoneUrl: ipConfig.api_app + "/user/bind-phone",
+	bankCardUrl: ipConfig.api_app + "/user/bank",
+	setWithdrawalPasswordUrl: ipConfig.api_app + "/withdraw/setPwd",
+	updateFeedbackUrl: ipConfig.api_app + "/service/feedback",
+	getBalanceTypeUrl: ipConfig.api_app + "/balance/getBalanceType",
+	getBalanceListUrl: ipConfig.api_app + "/balance/getBalanceList",
+	getGameListUrl: ipConfig.api_app + "/balance/getGameRecord",
+	getFAQListUrl: ipConfig.api_app + "/faq/list",
+	bindWithdrawAccountUrl: ipConfig.api_app + "/user/bindwithdrawaccount",
+	saveUinfo: ipConfig.api_app + "/fbclick/saveInfo",
+	getFbInfo: ipConfig.api_app + "/fbclick/getFbInfo",
+}
+
+export const getFbInfoApi = () => {
+	return httpRequest.get({
+		url: api.getFbInfo,
+		data: {}
+	})
+}
+export const saveUinfoApi = (params) => {
+	return httpRequest.post({
+		url: api.saveUinfo,
+		data: params
+	})
+}
+/**
+ * 获取个人中心数据
+ */
+export const getAccountApi = (params) => {
+	return httpRequest.post({
+		url: api.getAccountUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取用户详细信息
+ */
+export const getProfileApi = (params) => {
+	return httpRequest.post({
+		url: api.getProfileUrl,
+		data: params
+	})
+}
+
+/**
+ * 修改用户名
+ */
+export const editNickNameApi = (params) => {
+	return httpRequest.post({
+		url: api.editNickNameUrl,
+		data: params
+	})
+}
+
+/**
+ * 修改用户详细信息
+ */
+export const editProfileApi = (params) => {
+	return httpRequest.post({
+		url: api.editProfileUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 绑定手机号
+ */
+export const bindPhoneApi = (params) => {
+	return httpRequest.post({
+		url: api.bindPhoneUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 绑定银行卡
+ */
+export const bankCardApi = (params) => {
+	return httpRequest.post({
+		url: api.bankCardUrl,
+		data: params
+	})
+}
+
+/**
+ * 绑定提现账号
+ */
+export const bindWithdrawAccountApi = (params) => {
+	return httpRequest.post({
+		url: api.bindWithdrawAccountUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 设置提现密码
+ */
+
+export const setWithdrawalPasswordApi = (params) => {
+	return httpRequest.post({
+		url: api.setWithdrawalPasswordUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取Feedback 更新时间
+ */
+export const updateFeedbackApi = (params) => {
+	return httpRequest.post({
+		url: api.updateFeedbackUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取余额类型 
+ */
+export const getBalanceTypeApi = (params) => {
+	return httpRequest.post({
+		url: api.getBalanceTypeUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取余额记录 
+ */
+export const getBalanceListApi = (params) => {
+	return httpRequest.post({
+		url: api.getBalanceListUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 获取游戏记录 
+ */
+export const getGameListApi = (params) => {
+	return httpRequest.post({
+		url: api.getGameListUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取FAQ列表 
+ */
+export const getFAQListApi = (params) => {
+	return httpRequest.post({
+		url: api.getFAQListUrl,
+		data: params
+	})
+}
--- a/src/api/app.js
+++ b/src/api/app.js
@ -0,0 +1,66 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	appStackUpload: ipConfig.api_app + '/u/appStackUpload',
+	appEventUpload: ipConfig.api_app + '/u/transferEventUpload',
+	appConfig: ipConfig.api_app + '/u/gconfig',
+	appLanguages: ipConfig.api_app + '/language/languages',
+	appFbparams: ipConfig.api_app + '/fbclick/saveInfo',
+	appUpdate: ipConfig.api_app + '/user/appVersion'
+}
+
+export const requestAppUpdate = (params) => {
+	return httpRequest.post({
+		url: api.appUpdate,
+		data: params
+	})
+}
+/**
+ * app异常日志上报
+ */
+export const requestAppStackUpload = (params) => {
+	return httpRequest.post({
+		url: api.appStackUpload,
+		data: params
+	})
+}
+
+/**
+ * app埋点上报
+ */
+export const requestAppEventUpload = (params) => {
+	return httpRequest.post({
+		url: api.appEventUpload,
+		data: params
+	})
+}
+
+/**
+ * app全局配置
+ */
+export const requestAppConfig = (params) => {
+	return httpRequest.post({
+		url: api.appConfig,
+		data: params
+	})
+}
+
+/**
+ * app国际化语言查询
+ */
+export const requestAppLanguages = (params) => {
+	return httpRequest.get({
+		url: api.appLanguages,
+		data: params
+	})	
+}
+/**
+ * appfbparams
+ */
+export const requestAppFbparams = (params) => {
+	return httpRequest.post({
+		url: api.appFbparams,
+		data: params
+	})
+}
--- a/src/api/deposit.js
+++ b/src/api/deposit.js
@ -0,0 +1,73 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+import { okSpin } from '@/module/third/okspin.js'
+
+const api = {
+	getChargeInfo: ipConfig.api_app + '/recharge/getChargeInfo',
+	createTransferOrder: ipConfig.api_app + '/recharge/createTransferOrder',
+	createRechargeOrder: ipConfig.api_app + '/recharge/createRechargeOrder',
+	getRecordList: ipConfig.api_app + '/recharge/record',
+	orderDetail: ipConfig.api_app + '/recharge/orderDetail',
+	getPayChannel: ipConfig.api_app + '/recharge/getPayChannel'
+}
+
+/**
+ * 获取充值页信息
+ */
+export const requestChargeInfo = (params) => {
+	return httpRequest.post({
+		url: api.getChargeInfo,
+		data: params
+	})
+}
+
+/**
+ * 创建转账订单
+ */
+export const requestCreateTransferOrder = (params) => {
+	return httpRequest.post({
+		url: api.createTransferOrder,
+		data: params
+	})
+}
+
+/**
+ * 创建充值订单
+ */
+export const requestCreateRechargeOrder = (params) => {
+	okSpin.purchase()
+	return httpRequest.post({
+		url: api.createRechargeOrder,
+		data: params
+	})
+}
+
+/**
+ * 获取充值记录
+ */
+export const requestRecordList = (params) => {
+	return httpRequest.post({
+		url: api.getRecordList,
+		data: params
+	})
+}
+
+/**
+ * 订单详情
+ */
+export const requestOrderDetail = (params) => {
+	return httpRequest.post({
+		url: api.orderDetail,
+		data: params
+	})
+}
+
+/**
+ * 充值渠道
+ */
+export const requestGetPayChannel = (params) => {
+	return httpRequest.post({
+		url: api.getPayChannel,
+		data: params
+	})
+}
--- a/src/api/earn.js
+++ b/src/api/earn.js
@ -0,0 +1,106 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getAgentInfoUrl: ipConfig.api_app + '/invite/agent/info',
+	receiveRebateUrl: ipConfig.api_app + '/invite/agent/receiveRebate',
+	agentV2Home: ipConfig.api_app + '/agentV2/home',
+	agentV2MyRewardBaseInfo: ipConfig.api_app + '/agentV2/myRewardBaseInfo',
+	agentV2MyRewardList: ipConfig.api_app + '/agentV2/myRewardList',
+	agentV2MyTeamsBaseInfo: ipConfig.api_app + '/agentV2/myTeamsBaseInfo',
+	agentV2MyTeamsList: ipConfig.api_app + '/agentV2/myTeamsList',
+	agentV2ClaimAward: ipConfig.api_app + '/agentV2/claimAward',
+	agentV2LevelConfig: ipConfig.api_app + '/agentV2/levelConfig',
+}
+
+/**
+ * 获取分销等级规则
+ */
+export const getAgentV2LevelConfig = (params) => {
+	return httpRequest.post({
+		url: api.agentV2LevelConfig,
+		data: params
+	})
+}
+
+/**
+ * 获取分销home
+ */
+export const getAgentV2Home = (params) => {
+	return httpRequest.post({
+		url: api.agentV2Home,
+		data: params
+	})
+}
+
+/**
+ * 获取分销奖励
+ */
+export const agentV2ClaimAward = (params) => {
+	return httpRequest.post({
+		url: api.agentV2ClaimAward,
+		data: params
+	})
+}
+
+/**
+ * 获取分销reward
+ */
+export const getAgentV2MyRewardBaseInfo = (params) => {
+	return httpRequest.post({
+		url: api.agentV2MyRewardBaseInfo,
+		data: params
+	})
+}
+
+/**
+ * 获取分销reward list
+ */
+export const getAgentV2MyRewardList = (params) => {
+	return httpRequest.post({
+		url: api.agentV2MyRewardList,
+		data: params
+	})
+}
+
+/**
+ * 获取分销teams
+ */
+export const getAgentV2MyTeamsBaseInfo = (params) => {
+	return httpRequest.post({
+		url: api.agentV2MyTeamsBaseInfo,
+		data: params
+	})
+}
+
+/**
+ * 获取分销teams list
+ */
+export const getAgentV2MyTeamsList = (params) => {
+	return httpRequest.post({
+		url: api.agentV2MyTeamsList,
+		data: params
+	})
+}
+
+
+/**
+ * 获取分销员信息
+ */
+export const getAgentInfoApi = (params) => {
+	return httpRequest.post({
+		url: api.getAgentInfoUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 领取返利
+ */
+export const receiveRebateApi = (params) => {
+	return httpRequest.post({
+		url: api.receiveRebateUrl,
+		data: params
+	})
+}
--- a/src/api/game.js
+++ b/src/api/game.js
@ -0,0 +1,116 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getGameCategoryList: ipConfig.api_app + '/labelGame/list',
+	getGameAndCategoryByLabel: ipConfig.api_app + '/labelGame/getGameAndCategoryByLabel',
+	getRecentGames: ipConfig.api_app + '/labelGame/getRecentGames',
+	getFavoriteGames: ipConfig.api_app + '/labelGame/getFavoriteGames',
+	favoriteGame: ipConfig.api_app + '/labelGame/favoriteGame',
+	getGameUrlByGame: ipConfig.api_app + '/labelGame/getGameUrlByGame',
+	openGameSearch: ipConfig.api_app + '/labelGame/openGameSearch',
+	getGameByCategoryAndPage: ipConfig.api_app + '/labelGame/getGameByCategoryAndPage',
+	getSearchResults: ipConfig.api_app + '/labelGame/getSearchResults',
+	jiliLogout: ipConfig.api_app + '/jili/transfer/logout'
+}
+
+/**
+ * 获取标签
+ */
+export const requestGameCategoryList = (params) => {
+	return httpRequest.post({
+		url: api.getGameCategoryList,
+		data: params
+	})
+}
+
+/**
+ * 根据标签获取游戏和分类
+ */
+export const requestGetGameAndCategoryByLabel = (params) => {
+	return httpRequest.post({
+		url: api.getGameAndCategoryByLabel,
+		data: params
+	})
+}
+
+/**
+ * 获取最近游戏
+ */
+export const requestRecentGameList = (params) => {
+	return httpRequest.post({
+		url: api.getRecentGames,
+		data: params
+	})
+}
+
+/**
+ * 获取收藏游戏
+ */
+export const requestFavoriteGameList = (params) => {
+	return httpRequest.post({
+		url: api.getFavoriteGames,
+		data: params
+	})
+}
+
+/**
+ * 收藏游戏
+ */
+export const requestFavoriteGame = (params) => {
+	return httpRequest.post({
+		url: api.favoriteGame,
+		data: params
+	})
+}
+
+/**
+ * 根据游戏id获取游戏进入url
+ */
+export const requestGetGameUrlByGame = (params) => {
+	return httpRequest.post({
+		url: api.getGameUrlByGame,
+		data: params
+	})
+}
+
+/**
+ * 打开游戏搜索
+ */
+export const requestOpenGameSearch = (params) => {
+	return httpRequest.post({
+		url: api.openGameSearch,
+		data: params
+	})
+}
+
+/**
+ * 获取游戏分页
+ */
+export const requestGetGameByCategoryAndPage = (params) => {
+	return httpRequest.post({
+		url: api.getGameByCategoryAndPage,
+		data: params
+	})
+}
+
+/**
+ * 搜索游戏结果
+ */
+export const requestSearchResults = (params) => {
+	return httpRequest.post({
+		url: api.getSearchResults,
+		data: params
+	})
+}
+
+/**
+ * jili游戏退出调用
+ */
+export const requestJiliLogout = (params) => {
+	return httpRequest.post({
+		url: api.jiliLogout,
+		data: params
+	})
+}
+
--- a/src/api/home.js
+++ b/src/api/home.js
@ -0,0 +1,49 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	rechargeButtonStatus: ipConfig.api_app + '/home/rechargeButtonStatus',
+	rollMsg: ipConfig.api_app + '/home/rollMsg',
+	bannerList: ipConfig.api_app + '/banner/list',
+	getService: ipConfig.api_app + '/service/index',
+}
+
+/**
+ * 获取重置按钮状态
+ */
+export const requestRechargeButtonStatus = (params) => {
+	return httpRequest.post({
+		url: api.rechargeButtonStatus,
+		data: params
+	})
+}
+
+/**
+ * 获取跑马灯消息
+ */
+export const requestRollMsg = (params) => {
+	return httpRequest.post({
+		url: api.rollMsg,
+		data: params
+	})
+}
+
+/**
+ * 获取banner列表
+ */
+export const requestBannerList = (params) => {
+	return httpRequest.post({
+		url: api.bannerList,
+		data: params
+	})
+}
+
+/**
+ * 获取客服信息
+ */
+export const requestServiceList = (params) => {
+	return httpRequest.post({
+		url: api.getService,
+		data: params
+	})
+}
--- a/src/api/login.js
+++ b/src/api/login.js
@ -0,0 +1,100 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	login: ipConfig.api_app + '/sso/v2/login',
+	guestLogin: ipConfig.api_app + '/sso/guest',
+	getOtp: ipConfig.api_app + '/sms/send',
+	passwordLoginApi: ipConfig.api_app + '/sso/login',
+	idPasswordLogin: ipConfig.api_app + '/sso/idlogin',
+	loginConfigApi: ipConfig.api_app + "/threeLogin/channel",
+	registerApiUrl: ipConfig.api_app + "/sso/register",
+	changePasswordUrl: ipConfig.api_app + "/sso/modify",
+	googleLogin: ipConfig.api_app + '/sso/googleLogin'
+}
+/**
+ * 修改Miami
+ */
+export const changePasswordApi = (params) => {
+	return httpRequest.post({
+		url: api.changePasswordUrl,
+		data: params
+	})
+}
+/**
+ * 手机号+密码 注册
+ */
+export const registerApi = (params) => {
+	return httpRequest.post({
+		url: api.registerApiUrl,
+		data: params
+	})
+}
+/**
+ * 获取三方登录配置
+ */
+export const getLoginConfigApi = (params) => {
+	return httpRequest.get({
+		url: api.loginConfigApi,
+		data: params
+	})
+}
+
+/**
+ * 登录获取sign uid和用户信息
+ */
+export const requestLogin = (params) => {
+	return httpRequest.post({
+		url: api.login,
+		data: params
+	})
+}
+/**
+ * 登陆  手机号+密码
+ */
+export const passwordLogin = (params) => {
+	return httpRequest.post({
+		url: api.passwordLoginApi,
+		data: params
+	})
+}
+/**
+ * 游客登录获取sign uid和用户信息 
+ */
+export const requestGuestLogin = (params) => {
+	return httpRequest.post({
+		url: api.guestLogin,
+		data: params
+	})
+}
+
+
+/**
+ * 获取Otp
+ */
+export const requestGetOtp = (params) => {
+	return httpRequest.post({
+		url: api.getOtp,
+		data: params
+	})
+}
+
+/**
+ * google登录
+ */
+export const requestGoogleLogin = (params) => {
+	return httpRequest.post({
+		url: api.googleLogin,
+		data: params
+	})
+}
+
+/**
+ * id + password登录
+ */
+export const requestIdPasswordLogin = (params) => {
+	return httpRequest.post({
+		url: api.idPasswordLogin,
+		data: params
+	})
+}
--- a/src/api/mail.js
+++ b/src/api/mail.js
@ -0,0 +1,49 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	mailList: ipConfig.api_app + '/mail/list',
+	mailDel: ipConfig.api_app + '/mail/del',
+	mailRead: ipConfig.api_app + '/mail/read',
+	mailReceive: ipConfig.api_app + '/mail/receive',
+}
+
+/**
+ * 获取邮件列表
+ */
+export const requestMailList = (params) => {
+	return httpRequest.post({
+		url: api.mailList,
+		data: params
+	})
+}
+
+/**
+ * 删除
+ */
+export const requestMailDel = (params) => {
+	return httpRequest.post({
+		url: api.mailDel,
+		data: params
+	})
+}
+
+/**
+ * 已读
+ */
+export const requestMailRead = (params) => {
+	return httpRequest.post({
+		url: api.mailRead,
+		data: params
+	})
+}
+
+/**
+ * 领取
+ */
+export const requestMailReceive = (params) => {
+	return httpRequest.post({
+		url: api.mailReceive,
+		data: params
+	})
+}
--- a/src/api/promo.js
+++ b/src/api/promo.js
@ -0,0 +1,353 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getPromoListUrl: ipConfig.api_app + '/activity/list',
+	exchangeUrl: ipConfig.api_app + "/activity/exchange",
+	getBetRankDataUrl: ipConfig.api_app + "/activity/betRankData",
+	getSigninInfoUrl: ipConfig.api_app + "/signin/getSigninInfo",
+	recvRewardUrl: ipConfig.api_app + "/signin/recvReward",
+	canGiftCode: ipConfig.api_app + '/activity/giftCode',
+	registerActivityData: ipConfig.api_app + '/activity/registerActivityData',
+	registerActivityReward: ipConfig.api_app + '/activity/registerActivityReward',
+	inviteRechageRankData: ipConfig.api_app + '/activity/inviteRechageRankData',
+	inviteRechageRankHeadAwardList: ipConfig.api_app + '/activity/inviteRechageRankHeadAwardList',
+	inviteRechageRankBelowData: ipConfig.api_app + '/activity/inviteRechageRankBelowData',
+	inviteRechageRankBelowList: ipConfig.api_app + '/activity/inviteRechageRankBelowList',
+	inviteRechageRankHeadAwardReceive: ipConfig.api_app + '/activity/inviteRechageRankHeadAwardReceive',
+	getSpinBigAward: ipConfig.api_app + '/activity/getSpinBigAward',
+	inviteRechageRankHistroyData: ipConfig.api_app + '/activity/inviteRechageRankHistroyData',
+	getSpinResult: ipConfig.api_app + '/activity/invite/lottery',
+	getLotteryRecord: ipConfig.api_app + '/activity/invite/lotteryRecord/',
+	getActivity: ipConfig.api_app + '/activity/invite/joinAct', // 参与活动
+	getPrize: ipConfig.api_app + '/activity/invite/getPrize',
+	getJoinAct: ipConfig.api_app + '/activity/invite/getJoinAct',
+	exchange2Tg: ipConfig.api_app + '/unioncode/check',
+	getTypeDetail: ipConfig.api_app + '/activity/getByType/',
+	checkRechargeAct: ipConfig.api_app + '/activity/recharge/checkAct',
+	createRecharge: ipConfig.api_app + '/activity/recharge/createRecharge',
+	getBonusAmount: ipConfig.api_app + '/activity/recharge/getAmount/',
+	checkRedeposit: ipConfig.api_app + '/activity/recharge/lottery/checkAct',
+	getRepositLottery: ipConfig.api_app + '/activity/recharge/lottery/lottery/',
+	getSpinRecord: ipConfig.api_app + '/activity/recharge/lottery/record',
+	getLotteryMsg: ipConfig.api_app + '/activity/recharge/lottery/rollMsg',
+}
+export const getLotteryMsgApi = () => {
+	return httpRequest.post({
+		url: api.getLotteryMsg,
+		data: {}
+	})
+}
+export const getSpinRecordApi = () => {
+	return httpRequest.post({
+		url: api.getSpinRecord,
+		data: {}
+	})
+}
+export const checkRedepositApi = () => {
+	return httpRequest.post({
+		url: api.checkRedeposit,
+		data: {}
+	})
+}
+export const getRepositLotteryApi = (params) => {
+	return httpRequest.post({
+		url: api.getRepositLottery + params.id,
+		data: {}
+	})
+}
+export const createRechargeApi = (params) => {
+	return httpRequest.post({
+		url: api.createRecharge,
+		data: params
+	})
+}
+export const getBonusAmountApi = (params) => {
+	return httpRequest.post({
+		url: api.getBonusAmount + params.id,
+		data: {}
+	})
+}
+export const checkRechargeActApi = (params) => {
+	return httpRequest.post({
+		url: api.checkRechargeAct,
+		data: params
+	})
+}
+export const getTypeDetailApi = (params) => {
+	return httpRequest.post({
+		url: api.getTypeDetail + params.type,
+	})
+}
+export const getPrizeByTgApi = (params) => {
+	return httpRequest.post({
+		url: api.exchange2Tg + '/' + params.code,
+	})
+}
+/**
+ * 领取现金
+ * @param {*} params 
+ * @returns 
+ */
+export const getPrizeApi = (params) => {
+	return httpRequest.post({
+		url: api.getPrize,
+		data: params
+	})
+}
+/**
+ * 获取活动信息
+ * @param {*} params 
+ * @returns 
+ */
+export const getJoinActApi = (params) => {
+	return httpRequest.post({
+		url: api.getJoinAct,
+		data: params
+	})
+}
+/**
+ * 获取奖励
+ * @param {*} params 
+ * @returns 
+ */
+export const getPrizeListApi = (params) => {
+	return httpRequest.post({
+		url: api.getPrizeList,
+		data: params
+	})
+}
+/**
+ * 参与活动
+ * @param {*} params 
+ * @returns 
+ */
+export const getActivity = (params) => {
+	return httpRequest.post({
+		url: api.getActivity,
+		data: params
+	})
+}
+/**
+ * 抽奖记录
+ * @param {*} params 
+ * @returns 
+ */
+export const getLotteryRecord = (params) => {
+	const { id, page, size } = params
+	return httpRequest.post({
+		url: api.getLotteryRecord + id + '?page=' + page + '&size=' + size,
+	})
+}
+/**
+ * 转盘列表
+ */
+export const getSpinList = (params) => {
+	return httpRequest.post({
+		url: api.getSpinList,
+		data: params
+	})
+}
+/**
+ * 转盘结果
+ */
+export const getSpinResult = (params) => {
+	return httpRequest.post({
+		url: api.getSpinResult,
+		data: params
+	})
+}
+/**
+ * 邀请活动历史
+ */
+export const getInviteRechageRankHistroyData = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankHistroyData,
+		data: params
+	})
+}
+
+
+/**
+ * 转盘大奖
+ */
+export const getSpinBigAward = (params) => {
+	return httpRequest.post({
+		url: api.getSpinBigAward,
+		data: params
+	})
+}
+
+/**
+ * 获取活动列表
+ */
+export const getPromoListApi = (params) => {
+	return httpRequest.post({
+		url: api.getPromoListUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 兑换
+ */
+export const exchangeApi = (params) => {
+	return httpRequest.post({
+		url: api.exchangeUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取排行榜数据
+ */
+export const getBetRankDataApi = (params) => {
+	return httpRequest.post({
+		url: api.getBetRankDataUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取签到数据
+ */
+export const getSigninInfoApi = (params) => {
+	return httpRequest.post({
+		url: api.getSigninInfoUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 获取签到数据
+ */
+export const recvRewardUrlApi = (params) => {
+	return httpRequest.post({
+		url: api.recvRewardUrl,
+		data: params
+	})
+}
+
+/**
+ * jili活动code
+ */
+export const requestCanGiftCode = (params) => {
+	return httpRequest.post({
+		url: api.canGiftCode,
+		data: params
+	})
+}
+
+/**
+ * 注册活动
+ */
+export const requestRegisterActivityData = (params) => {
+	return httpRequest.post({
+		url: api.registerActivityData,
+		data: params
+	})
+}
+
+/**
+ * 注册活动领取
+ */
+export const requestRegisterActivityReward = (params) => {
+	return httpRequest.post({
+		url: api.registerActivityReward,
+		data: params
+	})
+}
+
+/**
+ * 获取邀请充值排行榜数据
+ */
+export const requestInviteRechageRankData = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankData,
+		data: params
+	})
+}
+
+/**
+ * 获取邀请充值排行榜人头奖记录
+ */
+export const requestInviteRechageRankHeadAwardList = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankHeadAwardList,
+		data: params
+	})
+}
+
+/**
+ * 获取邀请充值排行榜下级数据
+ */
+export const requestInviteRechageRankBelowData = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankBelowData,
+		data: params
+	})
+}
+
+
+/**
+ * 获取邀请充值排行榜下级数据
+ */
+export const requestInviteRechageRankBelowList = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankBelowList,
+		data: params
+	})
+}
+
+
+/**
+ * 获取邀请充值排行榜下级数据
+ */
+export const requestInviteRechageRankHeadAwardReceive = (params) => {
+	return httpRequest.post({
+		url: api.inviteRechageRankHeadAwardReceive,
+		data: params
+	})
+}
+
+/**
+ * 获取转盘结果
+ */
+export const requestGetSpinReward = (params) => {
+	return httpRequest.post({
+		url: ipConfig.api_app + '/activity/getSpinReward',
+		data: params
+	})
+}
+
+/**
+ * 获取转盘结果记录
+ */
+export const requestGetSpinRewardLog = (params) => {
+	return httpRequest.post({
+		url: ipConfig.api_app + '/activity/getSpinAwardLog',
+		data: params
+	})
+}
+
+/**
+ * 获取转盘剩余次数
+ */
+export const requestGetSpinActivityData = (params) => {
+	return httpRequest.post({
+		url: ipConfig.api_app + '/activity/getSpinActivityData',
+		data: params
+	})
+}
+
+/**
+ * 获取转盘领奖
+ */
+export const requestClaimSpinAward = (params) => {
+	return httpRequest.post({
+		url: ipConfig.api_app + '/activity/claimSpinAward',
+		data: params
+	})
+}
--- a/src/api/sms.js
+++ b/src/api/sms.js
--- a/src/api/user.js
+++ b/src/api/user.js
@ -0,0 +1,36 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getUserInfo: ipConfig.api_app + '/user/getUserInfo',
+	reportOnline: ipConfig.api_app+ '/user/reportOnline',
+	userAdid: ipConfig.api_app + '/user/adid'
+}
+
+/**
+ * 登录获取用户信息
+ */
+export const requestUserInfo = (params) => {
+	return httpRequest.post({
+		url: api.getUserInfo,
+		data: params
+	})
+}
+
+/**
+ * 上报在线 { placeId }  大厅：1   游戏内：gameid
+ */
+export const requestReportOnline = (params) => {
+	return httpRequest.post({
+		url: api.reportOnline,
+		data: params
+	})
+}
+
+// adid
+export const requestUserAdid = (params) => {
+	return httpRequest.post({
+		url: api.userAdid,
+		data: params
+	})
+}
--- a/src/api/vip.js
+++ b/src/api/vip.js
@ -0,0 +1,16 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	VipInfo: ipConfig.api_app + '/vip/getVipInfo',
+}
+
+/**
+ * 获取重置按钮状态
+ */
+export const getVipInfo = (params) => {
+	return httpRequest.post({
+		url: api.VipInfo,
+		data: params
+	})
+}
--- a/src/api/withdraw.js
+++ b/src/api/withdraw.js
@ -0,0 +1,62 @@
+import httpRequest from '@/module/request/http-request.js'
+import ipConfig from '@/config/ip.config.js'
+
+const api = {
+	getWithdrawInfoUrl: ipConfig.api_app + '/withdraw/getWithdrawInfo',
+	getIsSetWithdrawalPasswordUrl: ipConfig.api_app + '/withdraw/hasSetPwd',
+	createWithdrawOrderUrl: ipConfig.api_app + '/withdraw/createWithdrawOrder',
+	getWithdrawContentUrl: ipConfig.api_app + '/withdraw/getWithdrawContent',
+	getWithdrawListUrl: ipConfig.api_app + '/withdraw/list'
+}
+
+/**
+ * 获取提现页面信息
+ */
+
+export const getWithdrawInfoApi = (params) => {
+	return httpRequest.post({
+		url: api.getWithdrawInfoUrl,
+		data: params
+	})
+}
+
+/**
+ * 获取用户是否设置提现密码
+ */
+
+export const getIsSetWithdrawalPasswordApi = (params) => {
+	return httpRequest.post({
+		url: api.getIsSetWithdrawalPasswordUrl,
+		data: params
+	})
+}
+
+
+/**
+ * 创建提现订单
+ */
+
+export const createWithdrawOrderApi = (params) => {
+	return httpRequest.post({
+		url: api.createWithdrawOrderUrl,
+		data: params
+	})
+}
+/**
+ * 提现前 界面详情
+ */
+export const getWithdrawContentApi = (params) => {
+	return httpRequest.post({
+		url: api.getWithdrawContentUrl,
+		data: params
+	})
+}
+/**
+ * 获取提现列表 
+ */
+export const getWithdrawListApi = (params) => {
+	return httpRequest.post({
+		url: api.getWithdrawListUrl,
+		data: params
+	})
+}
--- a/src/components/LoginHeader/LoginHeader.vue
+++ b/src/components/LoginHeader/LoginHeader.vue
@ -0,0 +1,114 @@
+<template>
+  <view class="phone-binding-header">
+    <theme-image
+      :style="{ width: '46rpx', height: '46rpx' }"
+      src="@/static/icon-back-white.png"
+      @click="back"
+    ></theme-image>
+    <view class="title" :style="{ color: themeStore.color }">{{
+      props.title
+    }}</view>
+    <theme-image
+      src="@/static/account/supprot.png"
+      class="supprot-image"
+      @click="supprotClick"
+    ></theme-image>
+  </view>
+</template>
+
+<script setup>
+import { requestServiceList } from "@/api/home.js";
+import Toast from "@/module/toast/toast";
+import { openUrl } from "@/module/utils/openUrl";
+import { useUserStore } from "@/store/useUserStore";
+import { useThemeStore } from "@/store/useThemeStore";
+const themeStore = useThemeStore().theme.account.header;
+// const themeStore = useThemeStore()
+const props = defineProps({
+  title: String,
+});
+const userStore = useUserStore();
+/**
+ * 返回上一级
+ */
+const back = () => {
+  uni.navigateBack({
+    delta: 1,
+  });
+};
+/**
+ * 客服功能调用
+ */
+const supprotClick = async () => {
+  Toast.showLoading("Loading");
+  const { code, data } = await requestServiceList();
+  Toast.hideLoading();
+  if (code !== 200) {
+    return;
+  }
+  if (data.mobile && data.mobile.length) {
+    const getObjWithName = (list, name) => {
+      for (let i = 0; i < list.length; i++) {
+        if (name === list[i].mobileName) {
+          return list[i];
+        }
+      }
+      return null;
+    };
+
+    const vipLevel = userStore.vipInfo.currentVipConfig.level;
+
+    const vipCS = getObjWithName(data.mobile, "VipCS");
+    const vipWebCS = getObjWithName(data.mobile, "VipWebCS");
+    const webCS = getObjWithName(data.mobile, "WebCS");
+
+    let url = "";
+    if (vipLevel > vipCS.minVipLevel) {
+      if (vipCS && vipCS.mobileNumber && vipCS.mobileNumber.length) {
+        url = vipCS.mobileNumber[0];
+      } else if (
+        vipWebCS &&
+        vipWebCS.mobileNumber &&
+        vipWebCS.mobileNumber.length
+      ) {
+        url = vipWebCS.mobileNumber[0];
+      }
+    } else {
+      if (webCS && webCS.mobileNumber && webCS.mobileNumber.length) {
+        url = webCS.mobileNumber[0];
+      }
+    }
+
+    if (!url) {
+      return;
+    }
+    openUrl(url);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.phone-binding-header {
+  width: 100%;
+  height: 88rpx;
+  box-sizing: border-box;
+  padding: 0 31rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title {
+    width: calc(100% - 40%);
+    text-align: center;
+    font-size: 36rpx;
+    // color: #fff;
+  }
+  .back-image {
+    width: 17rpx;
+    height: 29rpx;
+  }
+  .supprot-image {
+    width: 62rpx;
+    height: 61rpx;
+  }
+}
+</style>
--- a/src/components/LotteryWheel/LotteryWheel.vue
+++ b/src/components/LotteryWheel/LotteryWheel.vue
@ -0,0 +1,189 @@
+<template>
+  <view class="content minHeight100">
+      <view style="width:300px;margin:50px auto">
+          <view class="flex margin-bottom-2x">
+              <view class="red margin-right-1x">剩余抽奖次数:{{ num }}</view>
+              <button class="color-btn bg-cyan anim-but-5-cyan" @click="startRotation">抽奖</button>
+          </view>
+     
+          <view class="turntableBox">
+              <image  src="@/static/images/pointer.png" mode="aspectFill"
+                  class="RoundTurntableImg" />
+              <RoundTurntable ref="roundTurntable" :prizeData="prizeData" :rotateCircle="rotateCircle"
+                  :duringTime="duringTime" :turntableStyleOption="turntableStyleOption" @endRotation="endRotation"
+                  class="turntable">
+                  <template #item="scope">
+                      <view class="turntable-name">{{ scope.item.level }}</view>
+                      <view class="turntable-img">
+                          <image :src="scope.item.picture" mode="aspectFill" />
+                      </view>
+                  </template>
+              </RoundTurntable>
+          </view>
+      
+      </view>
+  </view>
+</template>
+
+<script>
+  import RoundTurntable from './components/RoundTurntable';
+  export default {
+      name: 'lattice',
+      components: {
+          RoundTurntable
+      },
+      data() {
+          return {
+              // 转盘上的奖品数据
+              prizeData: [{
+                      id: 1,
+                      level: '2000元京东券',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 2,
+                      level: '300元京东券',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 3,
+                      level: '加班一天',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 4,
+                      level: '50元话费券',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 5,
+                      level: '100元话费券',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 6,
+                      level: '50元现金',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 7,
+                      level: '50元现金',
+                      picture: require('../../assets/images/gift.png')
+                  },
+                  {
+                      id: 8,
+                      level: '50元现金',
+                      picture: require('../../assets/images/gift.png')
+                  }
+              ],
+              // 转动的圈数
+              rotateCircle: 6,
+              // 转动需要持续的时间（s）
+              duringTime: 4.5,
+              // 转盘样式的选项
+              turntableStyleOption: {
+                  // 背景色
+                  prizeBgColors: ['#ffe0d6', '#fffdfe', '#ffe0d6', '#fffdfe', '#ffe0d6', '#fffdfe', '#ffe0d6',
+                      '#fffdfe'
+                  ],
+                  // 转盘的外边框颜色
+                  borderColor: '#fede87'
+              },
+              // 中奖的奖品的index
+              prizeIndex: -1,
+              // 用来锁定转盘，避免同时多次点击转动
+              isLocking: false,
+              // 剩余抽奖次数
+              num: 5
+          };
+      },
+      methods: {
+          // 开始抽奖
+          startRotation() {
+              // 如果还不可以转动
+              if (!this.canBeRotated()) {
+                  return false;
+              }
+              // 开始转动
+              // 先上锁
+              this.isLocking = true;
+              // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
+              const index = Math.floor(Math.random() * this.prizeData.length);
+              // 成功后次数减少一次
+              this.num--;
+              this.prizeIndex = index;
+              // 告诉子组件，开始转动了
+              this.$refs.roundTurntable.rotate(index);
+          },
+          // 已经转动完转盘触发的函数
+          endRotation() {
+              // 提示中奖
+              // 解锁
+              this.isLocking = false;
+          },
+          // 判断是否可以转动
+          canBeRotated() {
+              if (this.num <= 0) {
+                return false;
+              }
+              if (this.isLocking) {
+                  return false;
+              }
+              return true;
+          }
+      }
+  };
+</script>
+
+<style lang="scss">
+  .turntableBox {
+      position: relative;
+      width: 300px;
+      height: 300px;
+      .RoundTurntableImg {
+          width: 50px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 10;
+          cursor: pointer;
+      }
+  }
+
+  .turntable {
+      position: absolute;
+      //   left: calc(50% - 145px);
+      //   top: calc(50% - -10px);
+      width: 300px;
+      height: 300px;
+  }
+
+  .turntable-name {
+      /*background: pink;*/
+      position: absolute;
+      left: 10px;
+      top: 20px;
+      width: calc(100% - 20px);
+      font-size: 14px;
+      text-align: center;
+      //   color: #fff;
+      color: aqua;
+  }
+
+  .turntable-img {
+      position: relative;
+      /*要居中就要50% - 宽度 / 2*/
+      left: calc(70% - 100px / 2);
+      top: 40px;
+      width: 60px;
+      height: 60px;
+
+      img {
+          display: inline-block;
+          width: 60%;
+          height: 60%;
+      }
+  }
+
+</style>
--- a/src/components/LotteryWheel/components/RoundTurntable.vue
+++ b/src/components/LotteryWheel/components/RoundTurntable.vue
@ -0,0 +1,150 @@
+<template>
+    <div class="turntable" ref="turntable">
+        <div class="myTurntable" :style="{transform: rotateAngle, transition: rotateTransition}">
+          <canvas id="canvas" ref="canvas">
+            当前浏览器版本过低,请使用其他浏览器尝试
+          </canvas>
+          <div>
+            
+          </div>
+          <div class="prize-container">
+            <div v-for="(item, index) in prizeData" :key="index" class="item" :style="getRotateAngle(index)">
+              <slot name="item" :item="item"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+  
+  
+  </template>
+  
+  <script>
+    export default {
+      name: 'round-turntable',
+      mounted() {
+        this.init();
+      },
+      props: {
+        prizeData: {
+          required: true
+        },
+        rotateCircle: {
+          default: 6
+        },
+        turntableStyleOption: {
+          default: () => {
+            return {
+              // 背景色
+              prizeBgColors: ['#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe'],
+              // 转盘的外边框颜色
+              borderColor: '#f9dc84'
+            };
+          }
+        },
+        duringTime: {
+          default: 4.5
+        }
+      },
+      data() {
+        return {
+          // 开始转动的角度
+          startRotateDegree: 0,
+          rotateAngle: 0,
+          rotateTransition: ''
+        };
+      },
+      methods: {
+        // 根据index计算每一格要旋转的角度的样式
+        getRotateAngle(index) {
+          const angle = 360 / this.prizeData.length * index + (180 / this.prizeData.length);
+          return {
+            transform: `rotate(${angle}deg)`
+          };
+        },
+        // 初始化圆形转盘canvas
+        init() {
+          // 各种数据
+          const data = this.turntableStyleOption;
+          const prizeNum = this.prizeData.length;
+          const {
+            prizeBgColors,
+            borderColor
+          } = data;
+          // 开始绘画
+          const canvas = this.$refs.canvas;
+          const ctx = canvas.getContext('2d');
+          const canvasW = this.$refs.canvas.width = this.$refs.turntable.clientWidth; // 画板的高度
+          const canvasH = this.$refs.canvas.height = this.$refs.turntable.clientHeight; // 画板的宽度
+          // translate方法重新映射画布上的 (0,0) 位置
+          ctx.translate(0, canvasH);
+          // rotate方法旋转当前的绘图,因为文字适合当前扇形中心线垂直的！
+          ctx.rotate(-90 * Math.PI / 180);
+          // 圆环的外圆的半径
+          const outRadius = canvasW / 2;
+          // 圆环的内圆的半径
+          const innerRadius = 0;
+          const baseAngle = Math.PI * 2 / prizeNum; // 计算每个奖项所占角度数
+          ctx.clearRect(0, 0, canvasW, canvasH); // 去掉背景默认的黑色
+          ctx.strokeStyle = borderColor; // 设置画图线的颜色
+          for (let index = 0; index < prizeNum; index++) {
+            const angle = index * baseAngle;
+            ctx.fillStyle = prizeBgColors[index]; // 设置每个扇形区域的颜色
+            ctx.beginPath(); // 开始绘制
+            // 标准圆弧：arc(x,y,radius,startAngle,endAngle,anticlockwise)
+            ctx.arc(canvasW * 0.5, canvasH * 0.5, outRadius, angle, angle + baseAngle, false);
+            ctx.arc(canvasW * 0.5, canvasH * 0.5, innerRadius, angle + baseAngle, angle, true);
+            ctx.stroke(); // 开始链线
+            ctx.fill(); // 填充颜色
+            ctx.save(); // 保存当前环境的状态
+          }
+        },
+        // 转动起来
+        rotate(index) {
+          // 运转时长
+          const duringTime = this.duringTime;
+          const rotateAngle = this.startRotateDegree + this.rotateCircle * 360 + 360 - (180 / this.prizeData.length +
+            360 / this.prizeData.length * index) - this.startRotateDegree % 360;
+          this.startRotateDegree = rotateAngle;
+          this.rotateAngle = `rotate(${rotateAngle}deg)`;
+          this.rotateTransition = `transform ${duringTime}s cubic-bezier(0.250, 0.460, 0.455, 0.995)`;
+          setTimeout(() => {
+            this.$emit('endRotation');
+          }, duringTime * 1000 + 500);
+        }
+      }
+    };
+  </script>
+  
+  <style scoped lang="scss">
+  
+    
+  
+    .turntable {
+      .myTurntable {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+      }
+  
+      .prize-container {
+        position: absolute;
+        left: 25%;
+        top: 0;
+        width: 50%;
+        height: 50%;
+  
+        .item {
+          /*background: pink;*/
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          transform-origin: center bottom;
+        }
+      }
+    }
+  </style>
+  
--- a/src/components/badge/BadgeTR.vue
+++ b/src/components/badge/BadgeTR.vue
@ -0,0 +1,38 @@
+<!-- <template>
+	<view class="badge-container">
+		<view v-if="!!content" class="badge-view">
+			<view>{{ content }}</view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup>
+	defineProps({
+		content: {
+			type: String | Number,
+			default: ''
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.badge-container {
+		position: relative;
+	}
+	
+	.badge-view {
+		position: absolute;
+		top: -15rpx;
+		right: 15rpx;
+		height: 30rpx;
+		border-radius: 15rpx;
+		background-color: #B80A0A;
+		font-size: 24rpx;
+		padding: 0rpx 15rpx;
+	}
+	
+	.badge-view.top-middle {
+		
+	}
+</style> -->
--- a/src/components/common/CardSlider.vue
+++ b/src/components/common/CardSlider.vue
@ -0,0 +1,330 @@
+<template>
+	<div>
+		<div class="carousel-holder" :class="classes" v-show="cards.length > 1">
+			<div class="slide-container" ref="container" @mousedown="handleStart" @touchstart="handleStart" @mousemove="handleSlide" @touchmove="handleSlide" @mouseup="handleEnd" @touchend="handleEnd">
+				<div class="slide_container_aspect_ratio" :style="`padding-top: calc(100% / ${aspectStyle});`"></div>
+				<div v-for="(card, index) in cards" :key="card.id" :style="setSlidePos(index)" class="slide-wrapper">
+					<slot :card="card" />
+				</div>
+			</div>
+			<button @click="prevSlide" type="button" class="slide_left">
+				<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+					<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+				</svg>
+			</button>
+			<button @click="nextSlide" type="button" class="slide_right">
+				<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+					<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+				</svg>
+			</button>
+			<div class="slide_dot_box">
+				<button @click="currentSlide = index" type="button" v-for="(c, index) in cards" :key="c.id" class="slide_dot" :class="index == currentSlide ? 'active' : ''"></button>
+			</div>
+		</div>
+		<div v-show="cards.length == 1">
+			<div ref="singleCardContainer">
+				<slot :card="cards[0]" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		cards: {
+			type: Array,
+			required: true,
+		},
+		config: {
+			type: Object,
+		},
+		modelValue: {
+			type: Number,
+		},
+		classes: {
+			type: String,
+		},
+		aspectStyle: {
+			type: Number
+		}
+	},
+	data() {
+		return {
+			settings: {
+				maxDegree: 15,
+				cardDistance: 25,
+				maxScale: 1,
+			},
+			currentSlide: 0,
+			sliding: false,
+			startX: null,
+			oriSlide: 0,
+			slideDistance: 100,
+			timer: null
+		};
+	},
+	computed: {
+		cardLength() {
+			return this.cards.length
+		}
+	},
+	methods: {
+		setSlidePos(i) {
+			const diff = i - this.currentSlide;
+			// skewY
+			let skew = Math.abs(diff) * this.settings.maxDegree;
+			if (skew > this.settings.maxDegree) skew = this.settings.maxDegree;
+			// else if (skew < -this.settings.maxDegree) skew = -this.settings.maxDegree
+			// translateX
+			let tX = -50 + diff * (100 + this.settings.cardDistance);
+			// scale
+			let scale = (1 - Math.abs(diff)) * this.settings.maxScale;
+			if (scale > this.settings.maxScale) scale = this.settings.maxScale;
+			else if (scale < 1) scale = 1;
+			let nextI = Math.round(this.currentSlide);
+			return {
+				left: `50%`,
+				top: "50%",
+				transform: `translate(${tX}%, -50%) skewY(${skew}deg) scale(${scale})`,
+				transition: this.sliding ? "none" : "all 0.3s",
+				zIndex: nextI >= i ? 2 : 1,
+				opacity: nextI == i ? 1 : 0.7,
+			};
+		},
+		handleStart(e) {
+			if (this.sliding) return;
+			this.sliding = true;
+			this.startX =
+				e.type == "mousedown" ? e.clientX : e.touches[0].clientX;
+			this.oriSlide = this.currentSlide;
+		},
+		handleSlide(e) {
+			if (!this.sliding) return;
+			// #ifdef H5
+			window.getSelection().removeAllRanges();
+			// #endif
+			let xPos = e.type == "mousemove" ? e.clientX : e.touches[0].clientX;
+
+			let dist = this.startX - xPos;
+			if (dist > this.slideDistance) dist = this.slideDistance;
+			else if (dist < -this.slideDistance) dist = -this.slideDistance;
+			let newSlide = this.oriSlide + dist / this.slideDistance;
+			if (newSlide < 0) newSlide = 0;
+			else if (newSlide > this.cards.length - 1)
+				newSlide = this.cards.length - 1;
+			this.currentSlide = newSlide;
+		},
+		handleEnd(e) {
+			this.sliding = false;
+			this.currentSlide = Math.round(this.currentSlide);
+			this.$emit("input", this.currentSlide);
+		},
+		resizeHandler() {
+			const container = this.$refs.container
+			const singleContainer = this.$refs.singleCardContainer
+			const wrapper = container ? container.querySelector(".slide-wrapper") : singleContainer
+			this.$refs.container.style.height = `${
+				wrapper.offsetHeight +
+				Math.tan((this.settings.maxDegree / 180) * Math.PI) *
+					wrapper.offsetHeight
+			}px`;
+			this.slideDistance = wrapper.offsetWidth / 3;
+		},
+		prevSlide() {
+			if (this.currentSlide == 0) {
+				this.currentSlide = (this.cards.length - 1);
+			} else {
+				this.currentSlide--
+			}
+		},
+		nextSlide() {
+			if (this.currentSlide >= (this.cards.length - 1)) {
+				this.currentSlide = 0;
+			} else {
+				this.currentSlide++
+			}
+		}
+	},
+	mounted() {
+		// #ifdef H5
+		window.addEventListener("resize", this.resizeHandler);
+		
+		this.timer = setInterval(() => {
+			if (this.currentSlide >= (this.cards.length - 1)) {
+				this.currentSlide = 0;
+			} else {
+				this.currentSlide++
+			}
+		}, 5000);
+		// #endif
+		// #ifdef APP-PLUS
+		uni.onResize(() => {
+			this.resizeHandler()
+		})
+		// #endif
+	},
+	beforeMount() {
+		if (this.config) {
+			for (let c in this.config) {
+				if (this.settings[c]) this.settings[c] = this.config[c];
+			}
+		}
+		if (this.modelValue) {
+			this.currentSlide = this.modelValue;
+		}
+	},
+	beforeUnmount() {
+		// #ifdef H5
+		window.removeEventListener("resize", this.resizeHandler);
+		// #endif
+		// #ifndef H5
+		uni.offResize(() => {
+			this.resizeHandler()
+		})
+		// #endif
+		clearInterval(this.timer)
+	},
+	watch: {
+		modelValue() {
+			this.currentSlide = this.modelValue;
+		},
+		cardLength(n, o) {
+			this.$nextTick(() => {
+				this.resizeHandler()
+			})
+		}
+	},
+};
+</script>
+
+<style scoped>
+.carousel-holder{
+	position:relative;
+}
+
+.slide-container {
+	width: 100%;
+	overflow: hidden;
+	display: flex;
+	position: relative;
+}
+
+.slide-container .slide_container_aspect_ratio {
+	width: 100%;
+	padding-top: calc(100% / 3.2);
+}
+
+.slide-wrapper {
+	width: 100%;
+	position: absolute;
+}
+
+
+.slide_left {
+    width: 50px;
+    height: 50px;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+    position: absolute;
+    z-index: 2;
+}
+
+.lucky_spin .slide_left {
+	width: 20px;
+	height: 20px;
+	left: 5px;
+	background-color: #000;
+}
+
+.slide_right {
+    width: 50px;
+    height: 50px;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+    position: absolute;
+    z-index: 2;
+}
+
+.lucky_spin .slide_right {
+	width: 20px;
+	height: 20px;
+	right: 5px;
+	background-color: #000;
+}
+
+.arrow_icon {
+    width: 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.lucky_spin .arrow_icon {
+	width: 10px;
+}
+
+.arrow_icon path {
+    fill: #fff;
+}
+
+.slide_dot {
+	width: 10px;
+	height: 10px;
+	background-color: rgba(255, 255, 255, 0.5);
+	border-radius: 100%;
+	margin: 5px;
+	transition: all 0.3s;
+}
+
+.lucky_spin .slide_dot {
+	display: none;
+}
+
+.slide_dot.active {
+	background-color: #fff;
+}
+
+.slide_dot_box {
+	display: inline-flex;
+	align-items: center;
+	margin: 0 auto;
+	position: absolute;
+	bottom: 20px;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 2;
+}
+
+/* Responsive */
+@media (max-width: 767px) {
+	.slide_left {
+		width: 30px;
+		height: 30px;
+		left: 5px;
+	}
+	.arrow_icon {
+		width: 15px;
+	}
+	.slide_right {
+		width: 30px;
+		height: 30px;
+		right: 5px;
+	}
+	.slide_dot_box {
+		bottom: 5px;
+	}
+	.slide_dot {
+		width: 5px;
+		height: 5px;
+		margin: 3px;
+	}
+}
+</style>
--- a/src/components/custom-tab-bar/CustomTabBar.vue
+++ b/src/components/custom-tab-bar/CustomTabBar.vue
@ -0,0 +1,246 @@
+<template>
+    <view class="bottom-custom-wrap relative" style="height: 150rpx;box-sizing: content-box;">
+        <!-- <image class="fixed-paly-wrap" :src="themeStore.imageUrl.tabbarBg" mode="aspectFill" /> -->
+        <image src="@/static/tabbar/tabbar_bg.png" class="fixed-paly-wrap" mode="aspectFill" />
+        <view class="fixed-center-wrap" @click="handleCenterClick">
+            <!-- <image :src="themeStore.imageUrl.tabbar3" mode="aspectFill" class="center-img" /> -->
+            <!-- <image src="@/static/tabbar/dibuzhuanpan.gif" mode="aspectFill" class="center-img" /> -->
+             <view class="center-img">
+                <c-lottie src="/static/tabbar/spinz.json" width="134rpx" height="134rpx"></c-lottie>
+             </view>
+            <text class="center-text color-linear">Get ₹{{ actData?.content?.prizeAmount ?? 200 }}</text>
+        </view>
+        <view class="tabbar-content">
+            <view class="tabbar-bottom-line"></view>
+            <view v-for="(item, index) in tabbars" :key="index" class="tabbar-item" @click="change1(index)"
+                :style="{ color: index == selected ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textColor }">
+                <image v-if="index === selected" class="tabbar-icon" slot="active-icon" :src="item.select"></image>
+                <image v-else class="tabbar-icon" slot="inactive-icon" :src="item.normal"></image>
+                <view class="tab-text" :class="{ 'color-linear': index === selected }"><text>{{ item.text }}</text></view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { useThemeStore } from '@/store/useThemeStore';
+import { useI18n } from 'vue-i18n';
+import { usePromoStore } from '@/store/usePromoStore';
+import { onMounted, ref } from 'vue';
+// import jsonData from '@/static/tabbar/spin.json'
+// console.log('jsonData', jsonData);
+
+// const _json = JSON.stringify(jsonData)
+
+defineOptions({
+    name: 'custom-tabbar',
+})
+defineProps({
+    selected: {
+        type: Number
+    }
+})
+const themeStore = useThemeStore()
+const promoStore = usePromoStore()
+const { t } = useI18n()
+const actData = ref({})
+const tabbars = [
+    {
+        path: '/pages/home/Home',
+        text: t('app.tabbar.home'),
+        normal: '/static/tabbar/tabbar_1.png',
+        select: '/static/tabbar/tabbar_select_1.png'
+        // normal: themeStore.imageUrl.tabbar1,
+        // select: themeStore.imageUrl.tabbar1Select
+    },
+    {
+        path: '/pages/promo/Promo',
+        text: t('app.tabbar.promo'),
+        normal: '/static/tabbar/tabbar_2.png',
+        select: '/static/tabbar/tabbar_select_2.png'
+        // normal: themeStore.imageUrl.tabbar2,
+        // select: themeStore.imageUrl.tabbar2Select
+    },
+    {
+        path: '',
+        text: '',
+        normal: '',
+        select: ''
+    },
+    {
+        path: '/pages/earn/Earn',
+        text: t('app.tabbar.earnMoney'),
+        normal: '/static/tabbar/tabbar_4.png',
+        select: '/static/tabbar/tabbar_select_4.png'
+        // normal: themeStore.imageUrl.tabbar4,
+        // select: themeStore.imageUrl.tabbar4Select
+    },
+    {
+        path: '/pages/account/Account',
+        text: t('app.tabbar.account'),
+        normal: '/static/tabbar/tabbar_5.png',
+        select: '/static/tabbar/tabbar_select_5.png'
+        // normal: themeStore.imageUrl.tabbar5,
+        // select: themeStore.imageUrl.tabbar5Select
+    }
+]
+const toPage = ref('/pages/activity/Activity')
+const change1 = (val) => {
+    // 因为在pages中配置了需要跳转的页面为 tabbar页面 
+    // 所以不能使用navigateTo 只能使用下面这个方法跳转。
+    uni.switchTab({
+        url: tabbars[val].path
+    })
+}
+const handleCenterClick = () => {
+    uni.navigateTo({
+        url: toPage.value
+        // url: '/pages/vip/Vip'
+    })
+}
+onMounted(() => {
+    if (promoStore.promoList?.length !== 0) {
+        const idx = promoStore.promoList.findIndex(item => item.type === 12)
+        if (idx !== -1) {
+            toPage.value = '/pages/activity/Activity'
+            actData.value = promoStore.promoList[idx]
+        } else {
+            toPage.value = '/pages/vip/Vip'
+        }
+    } else {
+        promoStore.getPromoList().then(() => {
+            const idx = promoStore.promoList?.findIndex(item => item.type === 12)
+            if(idx!== -1) {
+                toPage.value = '/pages/activity/Activity'
+                actData.value = promoStore.promoList[idx]
+            } else {
+                toPage.value = '/pages/vip/Vip'
+            }
+            
+        })
+    }
+
+})
+</script>
+
+<style lang="scss">
+.bottom-custom-wrap {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 999;
+
+    .fixed-center-wrap {
+        position: absolute;
+        bottom: 34rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 999;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .center-text {
+            font-weight: bold;
+            font-size: 10px;
+            line-height: 20rpx;
+        }
+
+        .tabbar-bottom-line {
+            width: 100%;
+            height: 1px;
+            background-color: #610606;
+            position: absolute;
+            left: 0;
+            top: 0;
+            transform: translateY(0.5);
+        }
+
+        .center-img {
+            //width: 165rpx;
+            //height: 84rpx;
+            width: 134rpx;
+            height: 134rpx;
+        }
+    }
+
+    .tabbar-content {
+        width: 100%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        position: absolute;
+        left: 0;
+        top: 30rpx;
+        z-index: 99;
+
+        .tabbar-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            font-size: 12px;
+            position: relative;
+            bottom: -10rpx;
+
+            .tab-text {
+                margin-top: 8rpx;
+                font-size: 10px;
+                color: #E48989;
+                font-weight: 600;
+            }
+        }
+    }
+
+
+    .tabbar-icon {
+        height: 46rpx;
+        width: 46rpx;
+    }
+
+    .fixed-paly-wrap {
+        width: 100%;
+        height: 150rpx;
+        position: absolute;
+        left: 0;
+        bottom: 0;
+    }
+
+    .audio-play-cover {
+        height: 100rpx;
+        width: 100rpx;
+        border-radius: 50rpx;
+    }
+
+    .audio-play-btn {
+        position: absolute;
+        height: 48rpx;
+        width: 45rpx;
+    }
+
+    .isPlay {
+        animation: rotate 6s linear infinite;
+    }
+
+    @keyframes rotate {
+        from {
+            transform: rotate(0deg);
+        }
+
+        to {
+            transform: rotate(360deg);
+        }
+    }
+}
+
+.color-linear {
+    background-image: linear-gradient(-90deg, #FFDB12, #FFC300, #942509);
+    background-image: -webkit-linear-gradient(-90deg, #FFDB12, #FFC300, #942509);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+</style>
--- a/src/components/emptyHold/EmptyHold.vue
+++ b/src/components/emptyHold/EmptyHold.vue
@ -0,0 +1,22 @@
+<template>
+    <view class="w-full empty-wrap safe-area">
+        <view class="w-full" :style="{ height: _height }"></view>
+    </view>
+</template>
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+    height: {
+        type: [Number, String],
+        default: 0
+    }
+})
+
+const _height = computed(() => {
+    if (props.height.endsWith('px')) {
+        return props.height
+    } else {
+        return props.height + 'rpx'
+    }
+})
+</script>
--- a/src/components/footer/MobileFooter.vue
+++ b/src/components/footer/MobileFooter.vue
@ -0,0 +1,105 @@
+<template>
+	<div class="mobile-footer" :style="{ 'backgroundColor': themeStore.theme.tabbar.bgColor }">
+		<div class="mobile-footer-tabbar">
+			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/home/Home')">
+				<theme-image v-if="selectIndex === 0" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-1-select.png" mode="aspectFit" />
+				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-1-normal.png" mode="aspectFit" />
+				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 0 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
+					Home
+				</div>
+			</div>
+			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/promo/Promo')">
+				<theme-image v-if="selectIndex === 1" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-2-select.png" mode="aspectFit" />
+				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-2-normal.png" mode="aspectFit" />
+				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 1 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
+					Promo
+				</div>
+			</div>
+			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/vip/Vip')">
+				<theme-image v-if="selectIndex === 2" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-3-select.png" mode="aspectFit" />
+				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-3-normal.png" mode="aspectFit" />
+				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 2 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
+					Vip
+				</div>
+			</div>
+			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/earn/Earn')">
+				<theme-image v-if="selectIndex === 3" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-4-select.png" mode="aspectFit" />
+				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-4-normal.png" mode="aspectFit" />
+				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 3 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
+					Earn money
+				</div>
+			</div>
+			<div class="tabbar-item" @click.stop="handleTabbarClick('/pages/account/Account')">
+				<theme-image v-if="selectIndex === 4" class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-5-select.png" mode="aspectFit" />
+				<theme-image v-else class="tabbar-item-icon" src="@/static/tabbar/icon-tabbar-5-normal.png" mode="aspectFit" />
+				<div class="tabbar-item-text" :style="{ 'color': selectIndex === 4 ? themeStore.theme.tabbar.textSelectColor : themeStore.theme.tabbar.textNormalColor }">
+					Account
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { ref, onMounted } from 'vue'
+	
+	defineProps({
+		selectIndex: {
+			type: Number,
+			default: 0
+		}
+	})
+	
+	const themeStore = useThemeStore()
+	
+	const handleTabbarClick = (name) => {
+		// uni.navigateTo({
+		// 	url: `${name}`
+		// })
+		uni.switchTab({
+			url: `${name}`
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mobile-footer {
+		width: 100%;
+		background-color: white;
+		position: fixed;
+		bottom: 0rpx;
+		right: 0rpx;
+		left: 0rpx;
+		height: 110rpx;
+		z-index: 99;
+		border-top: 1rpx solid #F31212;
+		
+		.mobile-footer-tabbar {
+			height: 110rpx;
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 5rpx 0rpx;
+			
+			.tabbar-item {
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				flex: 1;
+				
+				.tabbar-item-icon {
+					width: 42rpx;
+					height: 42rpx;
+				}
+				
+				.tabbar-item-text {
+					margin-top: 5rpx;
+					font-size: 20rpx;
+				}
+			}
+		}
+	}
+</style>
--- a/src/components/footer/PcFooter.vue
+++ b/src/components/footer/PcFooter.vue
@ -0,0 +1,21 @@
+<template>
+	<view class="pc-footer">
+		<view class="">
+			©2023 ALL RIGHTS RESERVED
+		</view>
+	</view>
+</template>
+
+<script setup>
+</script>
+
+<style lang="scss" scoped>
+	.pc-footer {
+		background-color: deepskyblue;
+		padding: 30px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		
+	}
+</style>
--- a/src/components/header/MobileGameHeader.vue
+++ b/src/components/header/MobileGameHeader.vue
@ -0,0 +1,107 @@
+<template>
+	<div class="mobile-sub-header-container" :style="{ height: appStore.headerStyle.height + 'px', 'background': themeStore.theme.bgColor }">
+		<div class="mobile-state-bar" :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></div>
+		<div class="mobile-header" :style="{ height: appStore.headerStyle.navigateBarHeight + 'px' }">
+			<div class="left flex-center" @click.stop="handleBackClick">
+				<theme-image src="@/static/icon-back-white.png" mode="aspectFit" style="width: 40px; height: 20px" />
+			</div>
+			<div class="middle title">
+				<div v-if="title">{{ title }}</div>
+				<slot name="title"></slot>
+			</div>
+			<div class="right">
+				<slot name="right"></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import { onMounted, reactive, ref, computed } from 'vue'
+	import { useAppStore } from '@/store/useAppStore.js'
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { exitFullscreen } from '@/module/fullscreen/fullscreen-handler'
+	
+	const themeStore = useThemeStore()
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		}
+	})
+	const emit = defineEmits(['back'])
+
+	const handleBackClick = () => {
+		emit('back')
+		uni.navigateBack({
+			delta: 1,
+			fail() {
+				uni.reLaunch({
+					url: '/pages/home/Home'
+				})
+			}
+		})
+		// const pages = getCurrentPages()
+		
+		// if (pages.length > 2) {
+		
+		// 	const page = pages[pages.length - 2]
+		// 	const path = page.$page.fullPath
+			
+		// 	uni.redirectTo({
+		// 		url: path
+		// 	})
+
+		// 	// uni.navigateBack()
+
+		// } else {
+		// 	uni.reLaunch({
+		// 		url: '/pages/home/Home'
+		// 	})
+		// 	// uni.switchTab({
+		// 	// 	url: '/pages/home/Home'
+		// 	// })
+		// }
+		exitFullscreen()
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-header-container {
+		background-color: #610606;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 98;
+		
+		.mobile-state-bar {
+			
+		}
+	}
+	
+	.mobile-header {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		
+		.title {
+			font-size: 18px;
+			color: #FFFFFF;
+		}
+		
+		.left {
+			width: 40px;
+			flex-shrink: 0;
+			padding-left: 20rpx;
+		}
+		
+		.right {
+			min-width: 40px;
+			flex-shrink: 0;
+		}
+	}
+</style>
--- a/src/components/header/MobileHeader.vue
+++ b/src/components/header/MobileHeader.vue
@ -0,0 +1,94 @@
+<template>
+	<div class="mobile-sub-header-container" :style="{ height: appStore.headerStyle.height + 'px', 'background': themeStore.theme.bgColor }">
+		<div class="mobile-state-bar" :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></div>
+		<div class="mobile-header" :style="{ height: appStore.headerStyle.navigateBarHeight + 'px' }">
+			<div class="left">
+				<slot name="left"></slot>
+			</div>
+			<div class="middle title">
+				<div v-if="title" :style="{ 'color': themeStore.theme.text.normal }">{{ title }}</div>
+				<slot name="title"></slot>
+			</div>
+			<div class="right">
+				<slot name="right"></slot>
+			</div>
+		</div>
+		<!-- <div class="header-bottom-line" :style="{ 'border-bottom': `${lineHeight}px solid ${themeStore.theme.darkSeplineColor}`}"></div> -->
+	</div>
+</template>
+
+<script setup>
+	import { onMounted, reactive, ref, computed } from 'vue'
+	import { useAppStore } from '@/store/useAppStore.js'
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 0
+		}
+	})
+
+	const handleBackClick = () => {
+		const pages = getCurrentPages()
+		if (pages.length > 1) {
+			uni.navigateBack()
+		} else {
+			// uni.reLaunch({
+			// 	url: '/pages/home/Home'
+			// })
+			uni.switchTab({
+				url: '/pages/home/Home'
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-header-container {
+		background-color: #610606;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 98;
+		
+		.mobile-state-bar {
+			
+		}
+	}
+	
+	.mobile-header {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		
+		.title {
+			font-size: 36rpx;
+			// color: #FFFFFF;
+		}
+		
+		.left {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			padding-left: 20rpx;
+		}
+		
+		.right {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: 30rpx;
+		}
+	}
+</style>
--- a/src/components/header/MobileSubHeader.vue
+++ b/src/components/header/MobileSubHeader.vue
@ -0,0 +1,101 @@
+<template>
+	<div class="mobile-sub-header-container" :style="{ height: appStore.headerStyle.height + 'px', 'background': headBgColor }">
+		<div class="mobile-state-bar" :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></div>
+		<div class="mobile-header" :style="{ height: appStore.headerStyle.navigateBarHeight + 'px' }">
+			<div class="left" @click.stop="handleBackClick">
+				<theme-image src="@/static/icon-back-white.png" mode="aspectFit" style="width: 46rpx; height: 46rpx;" />
+			</div>
+			<div class="middle title">
+				<div v-if="title" :style="{ color: themeStore.theme.text.normal }">{{ title }}</div>
+				<slot name="title"></slot>
+			</div>
+			<div class="right">
+				<slot name="right"></slot>
+			</div>
+		</div>
+		<!-- <div class="header-bottom-line" :style="{ 'border-bottom': `${lineHeight}px solid ${themeStore.theme.darkSeplineColor}`}"></div> -->
+	</div>
+</template>
+
+<script setup>
+	import { onMounted, reactive, ref, computed } from 'vue'
+	import { useAppStore } from '@/store/useAppStore.js'
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 0
+		},
+		headBgColor: {
+			type: String,
+			default: 'transparent'
+		}
+	})
+
+	const handleBackClick = () => {
+		const pages = getCurrentPages()
+		if (pages.length > 1) {
+			uni.navigateBack({
+				fail: () => {
+					uni.reLaunch({
+						url: '/pages/home/Home'
+					})
+				}
+			})
+		} else {
+			// uni.reLaunch({
+			// 	url: '/pages/home/Home'
+			// })
+			uni.switchTab({
+				url: '/pages/home/Home'
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-header-container {
+		background-color: #610606;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		z-index: 98;
+		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0,0,0,0.2);
+	}
+	
+	.mobile-header {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		
+		.title {
+			font-size: 36rpx;
+			// color: #FFFFFF;
+		}
+		
+		.left {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			padding-left: 20rpx;
+		}
+		
+		.right {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: 30rpx;
+		}
+	}
+</style>
--- a/src/components/header/PcHeader.vue
+++ b/src/components/header/PcHeader.vue
@ -0,0 +1,65 @@
+<template>
+	<div class="pc-header">
+		<!-- <div class="pc-header-left">
+			
+		</div>
+		<div class="pc-header-right">
+			<el-dropdown
+				@command="handleChangeLanguage"
+			>
+				<span class="" style="margin-right: 20px;">
+					{{ $t('app.language') }}
+				</span>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item command="en-US">
+							{{ $t('app.language.english') }}
+						</el-dropdown-item>
+						<el-dropdown-item command="zh-CN">
+							{{ $t('app.language.chinese') }}
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+			<div class="" style="margin-right: 20px;">
+				<el-avatar> {{ $t('app.user') }} </el-avatar>
+			</div>
+			<div class="">
+				{{ $t('app.notification') }}
+			</div>
+		</div> -->
+	</div>
+</template>
+
+<script setup>
+	import { useLangStore } from '@/store/useLangStore.js'
+	
+	const handleChangeLanguage = (lang) => {
+		const langStore = useLangStore()
+		langStore.changeLanguage(lang)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.pc-header {
+		height: 64px;
+		background-color: deepskyblue;
+		padding: 0px 20px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		position: fixed;
+		top: 0px;
+		right: 0px;
+		left: 200px;
+		z-index: 999;
+		box-sizing: border-box;
+		
+		.pc-header-right {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0px 20px;
+		}
+	}
+</style>
--- a/src/components/header/TransparentHeader.vue
+++ b/src/components/header/TransparentHeader.vue
@ -0,0 +1,95 @@
+<template>
+	<div class="mobile-sub-header-container" :style="{ height: appStore.headerStyle.height + 'px'}">
+		<div class="mobile-state-bar" :style="{ height: appStore.headerStyle.statusBarHeight + 'px' }"></div>
+		<div class="mobile-header" :style="{ height: appStore.headerStyle.navigateBarHeight + 'px' }">
+			<div class="left" @click.stop="handleBackClick">
+				<theme-image src="@/static/navbar/icon-back-white.png" mode="aspectFit" style="width: 80rpx; height: 36rpx" />
+			</div>
+			<div class="middle title">
+				<div v-if="title">{{ title }}</div>
+				<slot name="title"></slot>
+			</div>
+			<div class="right">
+				<slot name="right"></slot>
+			</div>
+		</div>
+		<!-- <div class="header-bottom-line" :style="{ 'border-bottom': `${lineHeight}px solid ${themeStore.theme.darkSeplineColor}`}"></div> -->
+	</div>
+</template>
+
+<script setup>
+	import { onMounted, reactive, ref, computed } from 'vue'
+	import { useAppStore } from '@/store/useAppStore.js'
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 0
+		}
+	})
+
+	const handleBackClick = () => {
+		const pages = getCurrentPages()
+		if (pages.length > 1) {
+			uni.navigateBack()
+		} else {
+			// uni.reLaunch({
+			// 	url: '/pages/home/Home'
+			// })
+			uni.switchTab({
+				url: '/pages/home/Home'
+			})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-header-container {
+		background-color: #ffffff00;
+		width: 100%;
+		// position: fixed;
+		// top: 0;
+		// right: 0;
+		// left: 0;
+		// z-index: 98;
+		
+		.mobile-state-bar {
+			
+		}
+	}
+	
+	.mobile-header {
+		width: 100%;
+		align-items: center;
+		justify-content: space-between;
+		display: flex;
+		
+		.title {
+			font-size: 36rpx;
+			// color: #FFFFFF;
+		}
+		
+		.left {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			padding-left: 20rpx;
+		}
+		
+		.right {
+			width: 150rpx;
+			flex-shrink: 0;
+			display: flex;
+			justify-content: flex-end;
+			padding-right: 30rpx;
+		}
+	}
+	
+</style>
--- a/src/components/image/ThemeImage.vue
+++ b/src/components/image/ThemeImage.vue
@ -0,0 +1,37 @@
+<template>
+	<image :src="themeSrc" :mode="mode" />
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import GlobalConfig from '@/config/global.config.js'
+
+const props = defineProps({
+	src: {
+		type: String,
+		default: ''
+	},
+	mode: {
+		type: String,
+		default: 'aspectFill'
+	}
+})
+
+const themeSrc = computed(() => {
+	return combineImgSrc()
+})
+
+const combineImgSrc = () => {
+	if (!props.src) { return '' }
+	if (props.src.startsWith('http')) {
+		return props.src
+	} else {
+		let flagSrc = props.src.replace('@/static', '')
+		const imgSrc = `${GlobalConfig.appImagePrefix()}${flagSrc}`
+		return imgSrc
+	}
+}
+
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/components/input/MoneyInput.vue
+++ b/src/components/input/MoneyInput.vue
@ -0,0 +1,112 @@
+<template>
+	<view class="money-input-container">
+		<view class="input-tag" :style="{ 'color': themeStore.theme.input.icon  }">{{ appStore.currencySign }} </view>
+		<input
+			v-if="!readOnly"
+			:value="modelValue"
+			:maxlength="maxlength"
+			:border="false"
+			type="digit"
+			class="input-view"
+			style="font-size: 30rpx; height: 80rpx; flex: 1;"
+			:style="{ 'color': themeStore.theme.input.text }"
+			:placeholder="placeholder"
+			:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
+			@input="handleInput"
+			@blur="handleBlur"
+		/>
+		<theme-image
+			v-if="modelValue && modelValue.length"
+			class="input-clear-btn"
+			src="@/static/search/icon-search-clear.png"
+			mode="aspectFit"
+			@click.stop="handleClearClick"
+		/>
+	</view>
+</template>
+
+<script setup>
+	import { reactive, ref } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { useAppStore } from '@/store/useAppStore'
+	
+	const props = defineProps({
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: String,
+			default: ''
+		},
+		maxlength: {
+			type: Number,
+			default: 20
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		min: {
+			type: Number,
+			default: 0
+		},
+		max: {
+			type: Number,
+			default: 10000000000
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const themeStore = useThemeStore()
+	const appStore = useAppStore()
+	
+	const handleClearClick = () => {
+		emit('update:modelValue', '')
+		emit('change', '')
+	}
+	
+	const handleInput = (e) => {
+		emit('update:modelValue', e.detail.value)
+		emit('change', e.detail.value)
+	}
+	
+	const handleBlur = (e) => {
+		let value = Number(e.detail.value || 0)
+		if (value < props.min) {
+			value = props.min
+		} else if (value > props.max) {
+			value = props.max
+		}
+		emit('update:modelValue', value + '')
+		emit('change', value + '')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.money-input-container {
+		background-color: #400105;
+		height: 80rpx;
+		border-radius: 20rpx;
+		padding: 0rpx 30rpx;
+		display: flex;
+		align-items: center;
+		
+		.input-tag {
+			font-size: 36rpx;
+			color: #ffffff;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+		}
+		
+		.input-view {
+			font-weight: 600;
+		}
+		
+		.input-clear-btn {
+			width: 45rpx;
+			height: 45rpx;
+			flex-shrink: 0;
+			margin-left: 30rpx;
+		}
+	}
+</style>
--- a/src/components/input/NormalInput.vue
+++ b/src/components/input/NormalInput.vue
@ -0,0 +1,105 @@
+<template>
+	<view class="normal-input-container" :style="{ 'background-color': themeStore.theme.input.bgColor  }">
+		<input
+			v-if="!readOnly"
+			:value="modelValue"
+			:maxlength="maxlength"
+			:border="false"
+			:type="type"
+			class="input-view"
+			style="font-size: 30rpx; height: 80rpx; flex: 1;"
+			:style="{ 'color': themeStore.theme.input.text }"
+			:placeholder="placeholder"
+			:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
+			@input="handleInput"
+		/>
+		<theme-image
+			v-if="modelValue && modelValue.length"
+			class="input-clear-btn"
+			src="@/static/search/icon-search-clear.png"
+			mode="aspectFit"
+			@click.stop="handleClearClick"
+		/>
+	</view>
+</template>
+
+<script setup>
+	import { reactive, ref } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { nextTick } from 'vue';
+	
+	const props = defineProps({
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: String,
+			default: ''
+		},
+		maxlength: {
+			type: Number,
+			default: 20
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		type: {
+			type: String,
+			default: 'text'
+		},
+		reg: {
+			default: null
+		}
+	})
+	const emit = defineEmits(['update:modelValue', 'change'])
+	const themeStore = useThemeStore()
+	
+	const handleClearClick = () => {
+		emit('update:modelValue', '')
+		emit('change', '')
+	}
+	
+	const handleInput = (e) => {
+		let value = e.detail.value + ''
+		// console.log(111, value)
+		// if (props.reg) {
+		// 	value = value.replace(props.reg, '')
+		// 	console.log(222, value)
+		// }
+		nextTick(() => {
+			emit('update:modelValue', value)
+			emit('change', value)
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.normal-input-container {
+		background-color: #3D0303;
+		height: 80rpx;
+		border-radius: 20rpx;
+		padding: 0rpx 30rpx;
+		display: flex;
+		align-items: center;
+		
+		.input-tag {
+			font-size: 40rpx;
+			color: #ffffff;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+		}
+		
+		.input-view {
+			
+		}
+		
+		.input-clear-btn {
+			width: 45rpx;
+			height: 45rpx;
+			flex-shrink: 0;
+			margin-left: 30rpx;
+		}
+	}
+</style>
--- a/src/components/input/SearchInput.vue
+++ b/src/components/input/SearchInput.vue
@ -0,0 +1,95 @@
+<template>
+	<view class="search-input-container" :style="{ 'backgroundColor': themeStore.theme.bgColor }">
+		<view class="search-input-view flex-acenter" :style="{ 'background-color': themeStore.theme.input.bgColor }">
+			<view class="search-input">
+				<input
+					v-if="!readOnly"
+					:value="modelValue"
+					:maxlength="20"
+					:border="false"
+					style="font-size: 26rpx"
+					:placeholder="placeholder"
+					:placeholder-style="`font-size: 26rpx; color: ${themeStore.theme.input.placeholder}`"
+					@input="handleInput"
+				/>
+				<view v-else style="font-size: 30rpx" :style="{ 'color': themeStore.theme.input.placeholder }" @click.stop="handleClick">{{ placeholder }}</view>
+			</view>
+			<view v-if="modelValue && modelValue.length" @click.stop="handleClearClick">
+				<theme-image class="clear-icon" src="@/static/search/icon-search-clear.png" mode="aspectFit"></theme-image>
+			</view>
+			<view>
+				<theme-image class="search-icon" src="@/static/icon-search-yellow.png" mode="aspectFit" @click="handleSearchClick"></theme-image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { reactive, ref } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const props = defineProps({
+		readOnly: {
+			type: Boolean,
+			default: false
+		},
+		modelValue: {
+			type: String,
+			default: ''
+		},
+    placeholder: {
+      type: String,
+      default: ''
+    }
+	})
+	const emit = defineEmits(['update:modelValue', 'search', 'searchClick', 'change'])
+
+	const themeStore = useThemeStore()
+	
+	const handleSearchClick = () => {
+		emit('search', props.modelValue)
+	}
+	
+	const handleClick = () => {
+		emit('searchClick')
+	}
+	
+	const handleClearClick = () => {
+		emit('update:modelValue', '')
+		emit('change', '')
+	}
+	
+	const handleInput = (e) => {
+		emit('update:modelValue', e.detail.value)
+		emit('change', e.detail.value)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.search-input-container {
+		position: relative;
+		
+		.search-input-view {
+			border-radius: 20rpx;
+			padding: 0rpx 30rpx;
+			height: 90rpx;
+			
+			.search-input {
+				flex: 1;
+			}
+			
+			.search-icon {
+				width: 48rpx;
+				height: 48rpx;
+				flex-shrink: 0;
+			}
+			
+			.clear-icon {
+				width: 45rpx;
+				height: 45rpx;
+				flex-shrink: 0;
+				margin-right: 30rpx;
+			}
+		}
+	}
+</style>
--- a/src/components/layout/CommonLayout.vue
+++ b/src/components/layout/CommonLayout.vue
@ -0,0 +1,161 @@
+<template>
+	<view class="common-layout" :style="{minHeight: appStore.windowInfo.screenHeight + 'px', background: bgColor}">
+<!-- 		<el-container>
+			<el-aside
+				v-if="!appStore.isMobileView"
+				width="200px"
+			>
+				<PcSiderBar />
+			</el-aside>
+			<el-container> -->
+				<!-- <el-header> -->
+					<!-- <MobileHeader v-if="appStore.isMobileView"></MobileHeader> -->
+					<!-- <PcHeader v-if="!appStore.isMobileView"></PcHeader> -->
+				<!-- </el-header> -->
+			<!-- 	<el-main>
+					<view
+						class="content-container"
+						:class="{
+							'content-container-mobile-padding': appStore.isMobileView,
+							'content-container-pc-padding': !appStore.isMobileView
+						}"
+					>
+						<slot></slot>
+						<PcFooter v-if="!appStore.isMobileView"></PcFooter>
+					</view>
+				</el-main>
+			</el-container>
+		</el-container> -->
+		<slot></slot>
+		<view
+			class="service-icon"
+			style="width: 50px; height: 50px;"
+			:style="{ 'bottom': serviceIconXY.bottom + 'px', 'left': serviceIconXY.x + 'px' }"
+			@click.stop="handleServiceClick"
+			@touchmove.prevent="handleTouchMove"
+		>
+			<theme-image src="@/static/icon-service-top.png" style="width: 50px; height: 50px;"></theme-image>
+		</view>
+		<DepositClosePopup/>
+	</view>
+</template>
+
+<script setup>
+	import { onMounted, reactive, ref } from 'vue'
+	import { useAppStore } from '@/store/useAppStore.js'
+	import { useUserStore } from '@/store/useUserStore'
+	
+	import PcHeader from '@/components/header/PcHeader.vue'
+	import MobileHeader from '@/components/header/MobileHeader.vue'
+	import PcFooter from '@/components/footer/PcFooter.vue'
+	import MobileFooter from '@/components/footer/MobileFooter.vue'
+	import PcSiderBar from '@/components/siderbar/PcSiderBar.vue'
+
+	import Toast from '@/module/toast/toast'
+	import { openUrl } from '@/module/utils/openUrl'
+	import { useI18n } from 'vue-i18n'
+	import GlobalConfig from '@/config/global.config.js'
+	
+	import DepositClosePopup from '@/pages/wallet/components/DepositClosePopup.vue'
+
+	onMounted(() => {
+		loadData()
+		// handlePages()
+	})
+	defineProps({
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		}
+	})
+	const appStore = useAppStore()
+	const userStore = useUserStore()
+	const { t } = useI18n()
+	
+	const serviceIconXY = reactive({
+		x: appStore.windowInfo.windowWidth - 50,
+		y: appStore.windowInfo.windowHeight * 0.7,
+		bottom: 100
+	})
+	
+	const loadData = () => {
+	}
+	
+	const handlePages = () => {
+		const pages = getCurrentPages()
+		const currentPage = pages[pages.length - 1]
+		const currentRoute = currentPage.route
+		console.log('currentRoute', currentRoute);
+		
+		const pathKeys = currentRoute.split('/').slice(1).join('.')
+		uni.setNavigationBarTitle({
+			title: `${GlobalConfig.appName} - ${t(pathKeys)}`
+		})
+	}
+	
+	const handleTouchMove = (e) => {
+		if (e.type === 'touchmove' && e.touches.length) {
+			const windowInfo = uni.getWindowInfo()
+			const currentTouch = e.touches[0]
+			const x = currentTouch.pageX
+			const y = currentTouch.pageY 
+			if (x > 0 && x < windowInfo.windowWidth - 50) {
+				serviceIconXY.x = x
+			}
+			if (y > 0 && y < windowInfo.windowHeight - 50) {
+				serviceIconXY.y = y
+				serviceIconXY.bottom = windowInfo.windowHeight - y
+			}
+		}
+	}
+	
+	const handleServiceClick = async () => {
+		openUrl(appStore.FAQ)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.common-layout {
+		position: relative;
+		width: 100%;
+		min-height: 100%;
+		box-sizing: border-box;
+		overflow-y: auto;
+		// transform: translate(0,0)
+	}
+	
+	.service-icon {
+		position: fixed;
+		z-index: 101;
+	}
+	
+	.content-container {
+		position: relative;
+		width: 100%;
+		min-height: 100%;
+		box-sizing: border-box;
+	}
+	
+	.content-container-mobile-padding {
+		// padding-top: 120rpx;
+		padding-bottom: 110rpx;
+	}
+	
+	.content-container-pc-padding {
+		padding-top: 64px;
+		padding-bottom: 0px;
+	}
+</style>
+
+<style lang="scss">
+	.common-layout {
+		
+		.el-header {
+			padding: 0px !important;
+		}
+		
+		.el-main {
+			padding: 0px !important;
+		}
+	}
+</style>
--- a/src/components/layout/MainLayout.vue
+++ b/src/components/layout/MainLayout.vue
@ -0,0 +1,40 @@
+<template>
+	<common-layout>
+		<view class="mobile-sub-layout" :style="{ 'padding-top': appStore.headerStyle.height + 'px' }">
+			<MobileHeader
+				:title="title"
+				:lineHeight="lineHeight"
+			>
+				<template #right>
+					<view>
+						<slot name="header-right"></slot>
+					</view>
+				</template>
+			</MobileHeader>
+			<slot></slot>
+		</view>
+	</common-layout>
+</template>
+
+<script setup>
+	import MobileHeader from '@/components/header/MobileHeader'
+	import { useAppStore } from '@/store/useAppStore'
+	
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 0
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-layout {
+		position: relative;
+	}
+</style>
--- a/src/components/layout/MobileCustomLayout.vue
+++ b/src/components/layout/MobileCustomLayout.vue
@ -0,0 +1,33 @@
+<script setup>
+
+defineProps({
+    bgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    title: {
+        type: String,
+        default: ''
+    },
+    headBgColor: {
+        type: String,
+        default: 'transparent'
+    },
+    paddingTop: {
+        type: Number,
+        default: 0
+    }
+})
+</script>
+<template>
+    <common-layout :bgColor="bgColor">
+        <mobile-sub-header :title="title" :headBgColor="headBgColor">
+            <template #right>
+                <slot name="head-right"></slot>
+            </template>
+        </mobile-sub-header>
+        <view :style="{ paddingTop: paddingTop + 'px' }">
+            <slot></slot>
+        </view>
+    </common-layout>
+</template>
--- a/src/components/layout/MobileLayout.vue
+++ b/src/components/layout/MobileLayout.vue
@ -0,0 +1,40 @@
+<template>
+	<common-layout>
+		<view class="mobile-sub-layout" :style="{ 'padding-top': appStore.headerStyle.height + 'px' }">
+			<MobileHeader
+				:title="title"
+				:lineHeight="lineHeight"
+			>
+				<template #right>
+					<view>
+						<slot name="header-right"></slot>
+					</view>
+				</template>
+			</MobileHeader>
+			<slot></slot>
+		</view>
+	</common-layout>
+</template>
+
+<script setup>
+	import MobileHeader from '@/components/header/MobileHeader'
+	import { useAppStore } from '@/store/useAppStore'
+	
+	const appStore = useAppStore()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 0
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-layout {
+		position: relative;
+	}
+</style>
--- a/src/components/layout/MobileSubLayout.vue
+++ b/src/components/layout/MobileSubLayout.vue
@ -0,0 +1,49 @@
+<template>
+	<common-layout :bgColor="bgColor">
+		<view class="mobile-sub-layout" :style="{ paddingTop: (screen.statusBarHeight + 50) + 'px' }">
+			<MobileSubHeader
+				:title="title"
+				:headBgColor="headBgColor ? headBgColor : themeStore.theme.bgColor"
+			>
+				<template #right>
+					<view>
+						<slot name="header-right"></slot>
+					</view>
+				</template>
+			</MobileSubHeader>
+			<slot></slot>
+		</view>
+	</common-layout>
+</template>
+
+<script setup>
+	import MobileSubHeader from '@/components/header/MobileSubHeader'
+	import { useAppStore } from '@/store/useAppStore'
+import { useThemeStore } from '@/store/useThemeStore';
+	const themeStore = useThemeStore()
+	const screen = uni.getWindowInfo()
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		lineHeight: {
+			type: Number,
+			default: 4
+		},
+		bgColor: {
+			type: String,
+			default: 'transparent'
+		},
+		headBgColor: {
+			type: String,
+			default: ''
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.mobile-sub-layout {
+		position: relative;
+	}
+</style>
--- a/src/components/list/RewardsList.vue
+++ b/src/components/list/RewardsList.vue
@ -0,0 +1,83 @@
+<template>
+	<view class="award-list-container">
+		<view class="activity-award-content-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
+			<view class="depoist-amoout">
+				{{ title1 }}
+			</view>
+			<view class="reward-amoout">
+				{{ title2 }}
+			</view>
+		</view>
+		<view
+			class="activity-award-content-item"
+			v-for="(item, index) in list"
+			:style="{ 'background': themeStore.theme.list.listBgColor }"
+		>
+			<view class="depoist-amoout">
+				{{ item[key1] }}
+			</view>
+			<view class="reward-amoout">
+				{{ $formatThousandDot(item[key2], 0) }}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	
+	const props = defineProps({
+		title1: {
+			type: String,
+			default: ''
+		},
+		title2: {
+			type: String,
+			default: ''
+		},
+		key1: {
+			type: String,
+			default: ''
+		},
+		key2: {
+			type: String,
+			default: ''
+		},
+		list: {
+			type: Array,  // [{ title }]
+			default: () => []
+		},
+	})
+</script>
+
+<style lang="scss" scoped>
+	.award-list-container {
+	  width: 100%;
+	  box-sizing: border-box;
+	  padding: 0 0rpx;
+		
+	  .activity-award-content-item {
+	    width: 100%;
+	    margin-bottom: 10rpx;
+	    background: #8d120e;
+	    border-radius: 20rpx;
+	    display: flex;
+	    height: 62rpx;
+	    justify-content: flex-start;
+	    text-align: center;
+	    line-height: 62rpx;
+	    .depoist-amoout {
+	      width: 50%;
+	      font-size: 28rpx;
+	      color: #ffffff;
+	    }
+	    .reward-amoout {
+	      width: 50%;
+	      font-size: 28rpx;
+	      color: #f8eb59;
+	    }
+	  }
+	}
+</style>
--- a/src/components/loading/StartLoading.vue
+++ b/src/components/loading/StartLoading.vue
@ -0,0 +1,47 @@
+<template>
+    <view v-if="visible" class="start-loading-container">
+        <view class="start-loading-view" :style="{ background: themeStore.theme.startLoginBgColor }">
+            <!-- <theme-image class="start-loding-icon" :src="appStore.startImgUrls.loginLogo" mode="aspectFit"></theme-image> -->
+            <image :src="appStore.startImgUrls.loginLogo" mode="aspectFit" class="start-loding-icon" />
+        </view>
+    </view>
+</template>
+
+<script setup>
+import { useAppStore } from "@/store/useAppStore";
+import { useThemeStore } from "@/store/useThemeStore";
+
+const themeStore = useThemeStore();
+const appStore = useAppStore()
+
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false,
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.start-loading-container {
+    position: relative;
+
+    .start-loading-view {
+        position: fixed;
+        z-index: 9999;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .start-loding-icon {
+            width: 400rpx;
+            height: 400rpx;
+            padding-bottom: 200rpx;
+        }
+    }
+}
+</style>
--- a/src/components/menu/SideMenu.vue
+++ b/src/components/menu/SideMenu.vue
@ -0,0 +1,76 @@
+<template>
+	<div class="side-menu">
+		<!-- <el-menu
+			default-active="2"
+			class="el-menu-vertical-demo"
+			:collapse="isCollapse"
+			@open="handleOpen"
+			@close="handleClose"
+		>
+			<el-sub-menu index="1">
+				<template #title>
+					<el-icon><location /></el-icon>
+					<span>Navigator One</span>
+				</template>
+				<el-menu-item-group>
+					<template #title><span>Group One</span></template>
+					<el-menu-item index="1-1">item one</el-menu-item>
+					<el-menu-item index="1-2">item two</el-menu-item>
+				</el-menu-item-group>
+				<el-menu-item-group title="Group Two">
+					<el-menu-item index="1-3">item three</el-menu-item>
+				</el-menu-item-group>
+				<el-sub-menu index="1-4">
+					<template #title><span>item four</span></template>
+					<el-menu-item index="1-4-1">item one</el-menu-item>
+				</el-sub-menu>
+			</el-sub-menu>
+			<el-menu-item index="2">
+				<el-icon><icon-menu /></el-icon>
+				<template #title>Navigator Two</template>
+			</el-menu-item>
+			<el-menu-item index="3" disabled>
+				<el-icon><document /></el-icon>
+				<template #title>Navigator Three</template>
+			</el-menu-item>
+			<el-menu-item index="4">
+				<el-icon><setting /></el-icon>
+				<template #title>Navigator Four</template>
+			</el-menu-item>
+		</el-menu> -->
+	</div>
+</template>
+
+<script setup>
+	// import { ref } from 'vue'
+	
+	// import {
+	//   Document,
+	//   Menu as IconMenu,
+	//   Location,
+	//   Setting,
+	// } from '@element-plus/icons-vue'
+	
+	// const isCollapse = ref(false)
+	
+	// const handleOpen = (key, keyPath) => {
+	// 	console.log(key, keyPath)
+	// }
+	
+	// const handleClose = (key, keyPath) => {
+	// 	console.log(key, keyPath)
+	// }
+</script>
+
+<style lang="scss" scoped>
+	
+</style>
+
+<style lang="scss">
+	.side-menu {
+		
+		.el-menu {
+			border-right: 0px !important;
+		}
+	}
+</style>
--- a/src/components/nodata/NoDataSearch.vue
+++ b/src/components/nodata/NoDataSearch.vue
@ -0,0 +1,51 @@
+<template>
+	<view class="no-data-search-container">
+		<view class="">
+			<theme-image v-if="iconType === 'node'" class="no-data-image" lazy-load src="@/static/no-data-withdraw.png"
+				mode="aspectFit" />
+			<theme-image v-else class="no-data-image" lazy-load src="@/static/mail/image_qxy.png" mode="aspectFit" />
+		</view>
+		<view class="no-data-text" :style="{ 'color': themeStore.theme.text.lightAlpha }">
+			{{ title }}
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { useThemeStore } from '@/store/useThemeStore'
+const themeStore = useThemeStore()
+defineProps({
+	title: {
+		type: String,
+		default: 'No records!'
+	},
+	isShowBtn: {
+		type: Boolean,
+		default: false
+	},
+	iconType: {
+		type: String,
+		default: ''
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+.no-data-search-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	padding: 200rpx 40rpx;
+
+	.no-data-image {
+		width: 416rpx;
+		height: 293rpx;
+	}
+
+	.no-data-text {
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.7);
+	}
+}
+</style>
--- a/src/components/pageable/Pageable.vue
+++ b/src/components/pageable/Pageable.vue
@ -0,0 +1,77 @@
+<template>
+	<view class="pageable-container">
+		<view class="pageable-btn" :style="{ 'background': themeStore.theme.pageable.btnColor }" @click.stop="handleLast()">
+			<view>
+				<
+			</view>
+		</view>
+		<view class="pageable-text" :style="{ 'color': themeStore.theme.pageable.color }">
+			<span class="pageable-text-current" :style="{ 'color': themeStore.theme.pageable.currentTextColor }">{{ current }}</span> / {{ total }}
+		</view>
+		<view class="pageable-btn" :style="{ 'background': themeStore.theme.pageable.btnColor }" @click.stop="handleNext()">
+			<view>
+				>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { reactive } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+
+	const themeStore = useThemeStore()
+	const props = defineProps({
+		total: {
+			type: Number,
+			default: 1
+		},
+		current: {
+			type: Number,
+			default: 1
+		}
+	})
+		
+	const emit = defineEmits(['change'])
+	
+	const handleLast = () => {
+		console.log(props.current, props.total)
+		if (props.current <= 1 ) { return }
+		emit('change', props.current - 1)
+	}
+	
+	const handleNext = () => {
+		console.log(props.current, props.total)
+		if (props.current > props.total -1) { return }
+		emit('change', props.current + 1)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.pageable-container {
+		display: flex;
+		align-items: center;
+		
+		.pageable-btn {
+			background-color: #7E1920;
+			width: 50rpx;
+			height: 50rpx;
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #ffffff;;
+			font-size: 28rpx;
+		}
+		
+		.pageable-text {
+			font-size: 26rpx;
+			color: #fff;
+			padding: 0rpx 20rpx;
+			
+			.pageable-text-current {
+				color: #F96969;
+			}
+		}
+	}
+</style>
--- a/src/components/popup/BindPhonePop.vue
+++ b/src/components/popup/BindPhonePop.vue
@ -0,0 +1,300 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="bin-content">
+            <view class="bind-inner relative">
+                <view class="bind-title" :style="{ color: themeStore.theme.light }">{{ $t('account.bindPhone.title') }}
+                </view>
+                <view class="bind-content flex-column flex-center">
+                    <view class="phone-box phone-num flex items-center">
+                        <view class="phone-pre flex items-center">
+                            <theme-image src="@/static/account/icon_iphone.png" class="icon-phone"
+                                mode="aspectFit"></theme-image>
+                            <view class="pre-text" :style="{ color: themeStore.theme.light }">+91</view>
+                        </view>
+                        <input type="number" v-model="phone" maxlength="10" class="phone-input"
+                            placeholder-class="plc-cs" :placeholder="$t('account.bindPhone.placeholder')" />
+                        <view class="send-btn flex-center" @click="getOtp" :style="{ color: themeStore.theme.light }">{{
+                            btnText }}</view>
+                    </view>
+                    <view class="phone-box verify-box flex items-center">
+                        <view class="phone-pre">
+                            <theme-image src="@/static/account/icon_safe.png" class="icon-phone"
+                                mode="aspectFit"></theme-image>
+                        </view>
+                        <input type="number" v-model="verificationCode" class="phone-input flex-1"
+                            placeholder-class="plc-cs" :placeholder="$t('account.bindPhone.verifyPlaceholder')" />
+                    </view>
+                </view>
+                <view class="bind-tip">
+                    {{ $t('account.bindPhone.bindTip') }}
+                </view>
+                <view class="bind-confirm flex-center" @click="config"
+                    :style="{ background: `no-repeat top / cover ${themeStore.theme.account.confirmBtnBg}`, color: themeStore.theme.account.confirmBtnTextColor }">
+                    {{
+                        $t('account.bindPhone.confirm') }}</view>
+                <view class="icon-wrap flex-center" @click.stop="onClose">
+                    <theme-image src="@/static/pop-close.png" class="icon-close" mode="aspectFill"></theme-image>
+                </view>
+            </view>
+        </view>
+    </uni-popup>
+    <Congratulation ref="congratulation" :prize-amount="amount" />
+</template>
+<script setup>
+import { useThemeStore } from '@/store/useThemeStore';
+import { onMounted, ref } from 'vue';
+import Toast from "@/module/toast/toast.js";
+import { requestGetOtp } from '@/api/login';
+import { useI18n } from 'vue-i18n';
+import Congratulation from './Congratulation.vue';
+import { bindPhoneApi } from '@/api/account';
+import { useAppStore } from '@/store/useAppStore';
+import { useUserStore } from '@/store/useUserStore';
+const popup = ref(null);
+const emit = defineEmits(['close', 'complete']);
+
+const themeStore = useThemeStore();
+const appStore = useAppStore()
+const userStore = useUserStore()
+const { t } = useI18n();
+const phone = ref("");
+const btnText = ref(t("account.bindPhone.send"))
+const timer = ref(null);
+const time = ref(0)
+let verificationCode = ref("");
+const amount = ref(0);
+const congratulation = ref(null);
+
+const onInput = (e) => {
+    const value = e.detail.value;
+    if (value.length > 10) {
+        phone.value = value.slice(0, 10);
+    }
+}
+const onClose = () => {
+    close()
+    emit('close');
+};
+const open = () => {
+    popup.value.open();
+};
+const close = () => {
+    popup.value.close();
+};
+const getOtp = async () => {
+    if (time.value == 0) {
+        if (phone.value == "") {
+            Toast.show(t("account.phoneBinding.toast.phone"));
+            return;
+        }
+        Toast.showLoading("Loading");
+        try {
+            const { code, data, msg } = await requestGetOtp({
+                tel: phone.value,
+            })
+            Toast.show(msg);
+            if (code == 200) {
+                time.value = data;
+                countdown();
+            }
+        } catch (error) {
+            console.log(error);
+            
+        } finally {
+            Toast.hideLoading()
+        }
+    }
+};
+/**
+ * 倒计时
+ */
+const countdown = () => {
+    btnText.value = time.value + "s";
+    timer.value = setInterval(() => {
+        if (time.value > 0) {
+            time.value--;
+            btnText.value = time.value + "s";
+        } else {
+            btnText.value = t("account.bindPhone.send");
+            time.value = 0;
+            clearInterval(timer.value);
+        }
+    }, 1000);
+};
+/**
+ * 提交
+ */
+const config = async () => {
+
+    if (phone.value == "") {
+        Toast.show("The phone number cannot be empty");
+        return;
+    }
+    if (verificationCode.value == "") {
+        Toast.show("The Verification code cannot be empty");
+        return;
+    }
+
+    Toast.showLoading("Loading");
+    const { code, data } = await bindPhoneApi({
+        mobile: phone.value,
+        verificationCode: verificationCode.value,
+        referralCode: appStore.inviteCode,
+    });
+    Toast.hideLoading();
+    if (code == 200) {
+        close();
+        if (data && data > 0) {
+            amount.value = data;
+            congratulation.value.open();
+        }
+        await userStore.getUserTotalInfo();
+        Toast.hideLoading();
+        Toast.showSuccess()
+        emit('complete')
+    }
+
+};
+
+defineExpose({
+    open,
+    close,
+});
+
+</script>
+<style lang="scss" scoped>
+.bin-content {
+    width: 640rpx;
+    height: 610rpx;
+    background: linear-gradient(90deg, #F7A421, #FDF7AB, #F57F08);
+    border-radius: 19rpx;
+    padding: 2px;
+
+    .bind-inner {
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(180deg, #280000, #580006);
+        border-radius: 19rpx;
+
+        .icon-wrap {
+            width: 42rpx;
+            height: 42rpx;
+            position: absolute;
+            right: 20rpx;
+            top: 20rpx;
+            z-index: 10;
+
+            .icon-close {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .bind-title {
+            width: 100%;
+            height: 100rpx;
+            line-height: 100rpx;
+            padding: 0 28rpx;
+            font-size: 14px;
+            position: relative;
+
+            &::after {
+                position: absolute;
+                content: "";
+                width: calc(100% - 56rpx);
+                height: 1px;
+                background: rgba(255, 255, 255, 0.1);
+                left: 28rpx;
+                bottom: 0;
+            }
+        }
+
+        .bind-content {
+            margin-top: 35rpx;
+
+            .phone-box {
+                width: 590rpx;
+                height: 94rpx;
+                background: #54030A;
+                box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
+                border-radius: 10rpx;
+                padding: 24rpx;
+
+                .phone-pre {
+                    padding-right: 20rpx;
+
+                    .icon-phone {
+                        width: 44rpx;
+                        height: 44rpx;
+                    }
+
+                    .pre-text {
+                        margin-left: 16rpx;
+                    }
+                }
+
+                .phone-input {
+                    font-size: 25rpx;
+                    color: #ffffff;
+                    padding: 0 24rpx;
+                }
+
+                .send-btn {
+                    width: 102rpx;
+                    height: 48rpx;
+                    background: #77010D;
+                    box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.35);
+                    border-radius: 6rpx;
+                    font-family: Roboto;
+                    font-weight: 400;
+                    font-size: 25rpx;
+                }
+
+                .plc-cs {
+                    color: rgba(255, 255, 255, 0.7);
+                }
+            }
+
+            .phone-num {
+                .phone-pre {
+                    position: relative;
+
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        top: -8rpx;
+                        right: 0;
+                        width: 2px;
+                        height: 60rpx;
+                        background: #721B22;
+                    }
+                }
+            }
+
+            .verify-box {
+                margin-top: 31rpx;
+            }
+        }
+
+        .bind-tip {
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 23rpx;
+            color: #FFFFFF;
+            padding: 0 28rpx;
+            margin-top: 31rpx;
+        }
+
+        .bind-confirm {
+            width: 279rpx;
+            height: 81rpx;
+            margin: 0 auto;
+            margin-top: 50rpx;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 29rpx;
+            line-height: normal;
+        }
+    }
+}
+</style>
--- a/src/components/popup/BindPromoPop.vue
+++ b/src/components/popup/BindPromoPop.vue
@ -0,0 +1,68 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="bind-content flex-center relative">
+            <theme-image :src="`@/static${mainImg}`" class="pop-main-img" mode="aspectFit"></theme-image>
+            <view class="btn-box flex items-center justify-between">
+                <theme-image src="@/static/home/btn_Bindmobile.png" class="btn-img" mode="aspectFit" @click="handleBind"></theme-image>
+                <theme-image src="@/static/home/btn_VerifyLater.png" class="btn-img" mode="aspectFit" @click="handleLater"></theme-image>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { useAppStore } from '@/store/useAppStore';
+import { computed, ref } from 'vue'
+import themeImg from '@/theme/image'
+
+const emit = defineEmits(['onBind', 'close'])
+const popup = ref(null)
+
+const appStore = useAppStore()
+
+const mainImg = computed(() => {
+    return appStore.isNative ? themeImg.bindPhoneActApp : themeImg.bindPhoneActH5
+})
+
+const open = () => {
+    popup.value.open()
+}
+const close = () => {
+    popup.value.close()
+}
+
+const handleBind = () => {
+    close()
+    emit('onBind')
+}
+const handleLater = () => {
+    close()
+    emit('close')
+}
+defineExpose({
+    open,
+    close
+})
+</script>
+<style lang="scss" scoped>
+.bind-content {
+    width: 699rpx;
+    height: 600rpx;
+    .pop-main-img{
+        width: 626rpx;
+        height: 523rpx;
+    }
+    .btn-box{
+        width: 450rpx;
+        height: 70rpx;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .btn-img{
+            width: 203rpx;
+            height: 70rpx;
+        }
+    }
+}
+</style>
--- a/src/components/popup/ConDepositPop.vue
+++ b/src/components/popup/ConDepositPop.vue
@ -0,0 +1,279 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="pop-content relative"
+            :style="{ background: `top / contain no-repeat ${themeStore.theme.popup.bgImage}` }">
+            <theme-image src="@/static/rank/image_phbsy_x.png" class="icon-close" @click.stop="close" />
+            <theme-image src="@/static/deposit_continue/image_cdbbanner.png" mode="aspectFit" class="banner-img" />
+            <view class="bonus-box pos-absolute" :style="{ background: themeStore.theme.activity.normalBg }">
+                <view v-for="(item, index) in content" :key="index" class="bonus-box-item relative"
+                    :style="{ background: `top / contain no-repeat ${popTheme.itemBg}` }" @click="activeIndex = index">
+                    <theme-image v-if="activeIndex === index" src="@/static/deposit_continue/gouxuan.png"
+                        class="bonus-box-item-img" />
+                    <view class="dot-box relative" :style="{ background: `top / contain no-repeat ${popTheme.dotBg}` }">
+                        <text class="label" :style="{ color: popTheme.subLabel }">Extra</text>
+                        <text class="add-percent" :style="{ color: popTheme.light }">+{{ calPercent(item) }}%</text>
+                    </view>
+                    <view class="day-left flex justify-between items-center">
+                        <view class="days-row ">
+                            <view class="day-label" :style="{ color: popTheme.title }">Day 1</view>
+                            <view class="day-bonus plus" :style="{ color: popTheme.title2 }">{{ item.rechargeAmount }}
+                            </view>
+                        </view>
+                        <view v-for="(d, index2) in item.give" :key="index2" class="days-row">
+                            <view class="day-label" :style="{ color: popTheme.title }">{{ d.name }}</view>
+                            <view v-if="index2 !== item.give.length - 1" class="day-bonus plus"
+                                :style="{ color: popTheme.title2 }">{{ d.giveAmount }}
+                            </view>
+                            <view v-else class="day-bonus equal" :style="{ color: popTheme.title2 }">{{ d.giveAmount }}
+                            </view>
+                        </view>
+                        <view class="bonus-total">
+                            <view class="day-label" :style="{ color: popTheme.title }">Total</view>
+                            <view class="day-bonus" :style="{ color: popTheme.title2 }">₹{{ calTotal(item.rechargeAmount,
+                                item.give) }}</view>
+                        </view>
+                    </view>
+                    <view class="day-right flex-center" :style="{ color: popTheme.bold }">₹{{ item.rechargeAmount }}
+                    </view>
+                </view>
+            </view>
+            <!-- <view class="other-amount" :style="{ color: themeStore.theme.popup.textLink }">Other amount</view> -->
+            <theme-image src="@/static/deposit_continue/btn_addcash.png" class="btn-add-img"
+                @click.stop="handleDeposit"></theme-image>
+            <!-- <view class="close-text" :style="{ color: themeStore.theme.light }" @click.stop="close">
+                {{ $t("promo.popup.tapClose") }}</view> -->
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { computed, ref } from 'vue'
+import { useThemeStore } from '@/store/useThemeStore';
+import { usePromoStore } from '@/store/usePromoStore';
+import { formatNum } from '@/module/utils/util';
+import toast from '@/module/toast/toast';
+import { createRechargeApi } from '@/api/promo';
+import { openUrl } from '@/module/utils/openUrl';
+
+const popup = ref(null)
+const themeStore = useThemeStore()
+const emit = defineEmits(['close'])
+const popTheme = computed(() => themeStore.theme.popup)
+const activeIndex = ref(0)
+const promoStore = usePromoStore()
+const content = computed(() => {
+    return promoStore.rechargeContent || []
+})
+console.log("content: ", content.value);
+const handleDeposit = async () => {
+    toast.showLoading('Loading')
+    try {
+        const amount = content.value[activeIndex.value].rechargeAmount
+        const { data } = await createRechargeApi({ amount })
+        uni.setStorageSync('rechargeAmount', amount)
+        openUrl(data.url)
+        toast.hideLoading()
+    } catch (error) {
+        console.log("deposit error: ", error);
+
+    } finally {
+        toast.hideLoading()
+    }
+}
+const calTotal = (d1, list) => {
+    return list.reduce((total, item) => {
+        return total + item.giveAmount
+    }, 0) + d1
+}
+const calPercent = (item) => {
+    const totalBonus = item.give.reduce((total, item) => {
+        return total + item.giveAmount
+    }, 0)
+    return formatNum(totalBonus / item.rechargeAmount * 100, 1)
+}
+function open() {
+    popup.value.open()
+}
+function close() {
+    popup.value.close()
+    emit('close')
+}
+defineExpose({
+    open,
+    close
+})
+</script>
+<style lang="scss">
+.pop-content {
+    width: 701rpx;
+    height: 1195rpx;
+
+    .icon-close{
+        position: absolute;
+        top: 120rpx;
+        right: 20rpx;
+        width: 50rpx;
+        height: 50rpx;
+        z-index: 100;
+    }
+
+    .banner-img {
+        position: absolute;
+        top: 160rpx;
+        left: 34rpx;
+        width: 626rpx;
+        height: 122rpx;
+        z-index: 10;
+    }
+
+    .bonus-box {
+        width: 620rpx;
+        height: 718rpx;
+        left: 38rpx;
+        top: 296rpx;
+        border-radius: 10rpx;
+        overflow-y: auto;
+        z-index: 10;
+        padding: 14rpx;
+
+        .bonus-box-item {
+            width: 100%;
+            height: 118rpx;
+
+            .dot-box {
+                position: absolute;
+                top: 2px;
+                right: 2px;
+                width: 78rpx;
+                height: 44rpx;
+
+                .label {
+                    position: absolute;
+                    left: 12rpx;
+                    top: 0;
+                    font-weight: 400;
+                    font-size: 18rpx;
+                    color: #FFFDC6;
+                    line-height: 18rpx;
+                }
+
+                .add-percent {
+                    position: absolute;
+                    bottom: 6rpx;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    font-family: Roboto;
+                    font-weight: bold;
+                    font-size: 18rpx;
+                    color: #FFFFFF;
+                    line-height: 18rpx;
+                }
+            }
+
+            .bonus-box-item-img {
+                position: absolute;
+                top: -2px;
+                left: -2px;
+                width: calc(100% + 4px);
+                height: 100%;
+            }
+
+            .day-left {
+                width: 490rpx;
+                height: 100%;
+                padding: 12rpx;
+            }
+
+            .day-right {
+                width: 114rpx;
+                height: 114rpx;
+                position: absolute;
+                top: 10rpx;
+                right: 0;
+                font-family: Roboto;
+                font-weight: bold;
+                font-size: 24rpx;
+            }
+
+            .day-left {
+                flex: 1;
+            }
+
+            .day-label {
+                font-family: Roboto;
+                font-weight: 400;
+                font-size: 20rpx;
+                color: #813F0A;
+                text-align: center;
+            }
+
+            .day-bonus {
+                font-family: Roboto;
+                font-weight: bold;
+                font-size: 22rpx;
+                color: #582204;
+                margin-top: 10rpx;
+                text-align: center;
+            }
+
+            .plus {
+                position: relative;
+
+                &::after {
+                    content: '+';
+                    position: absolute;
+                    right: -24rpx;
+                    bottom: 2rpx;
+                    color: #582204;
+                    font-weight: bold;
+                }
+            }
+
+            .equal {
+                position: relative;
+
+                &::after {
+                    content: '=';
+                    position: absolute;
+                    right: -22rpx;
+                    bottom: 2rpx;
+                    color: #582204;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+
+    .other-amount {
+        position: absolute;
+        bottom: 184rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: Roboto;
+        font-weight: 400;
+        font-size: 25rpx;
+        color: #FFE76A;
+        text-decoration-line: underline;
+    }
+
+    .btn-add-img {
+        position: absolute;
+        bottom: 30rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 338rpx;
+        height: 81rpx;
+        z-index: 10;
+    }
+
+    .close-text {
+        position: absolute;
+        bottom: -60rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: Roboto;
+        font-weight: bold;
+        font-size: 27rpx;
+        text-decoration: underline;
+    }
+}
+</style>
--- a/src/components/popup/ConfirmPopup.vue
+++ b/src/components/popup/ConfirmPopup.vue
@ -0,0 +1,124 @@
+<template>
+	<NormalPopupView
+		v-if="visible"
+		:zIndex="9999"
+		@close="hide"
+	>
+		<view class="tips-popup-content">
+			<view class="title" :style="{ color: themeStore.theme.text.normal }">
+				{{ title || $t('app.popup.tips') }}
+			</view>
+			<view class="text" :style="{ color: themeStore.theme.text.normal }">
+				{{ text }}
+			</view>
+      <view class="flex-acenter plr24">
+        <view v-if="showCancel" class="confirm-button" :style="{ 'background': themeStore.theme.button.cancel , 'color': themeStore.theme.button.textNormal}" @click.stop="handleCancelClick">
+          <view>
+            {{ cancelText || $t('app.popup.cancel') }}
+          </view>
+        </view>
+        <view v-if="showConfirm" class="confirm-button" :style="{ 'background': themeStore.theme.button.normal , 'color': themeStore.theme.button.textNormal}" @click.stop="handleConfirmClick">
+          <view>
+            {{ confirmText || $t('app.popup.confirm') }}
+          </view>
+        </view>
+      </view>
+		</view>
+	</NormalPopupView>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	import NormalPopupView from './NormalPopupView.vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { useI18n } from 'vue-i18n'
+	
+	const { t } = useI18n()
+	const themeStore = useThemeStore()
+
+	const visible = ref(false)
+	const emit = defineEmits(['confirm'])
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		showConfirm: {
+			type: Boolean,
+			default: true
+		},
+		confirmText: {
+			type: String,
+			default: ''
+		},
+    showCancel: {
+			type: Boolean,
+			default: true
+		},
+		confirmText: {
+			type: String,
+			default: ''
+		}
+	})
+	
+	const show = () => {
+		visible.value = true
+	}
+	
+	const hide = () => {
+		visible.value = false
+	}
+
+  const handleCancelClick = () => {
+    hide()
+  }
+	
+	const handleConfirmClick = () => {
+		emit('confirm')
+		hide()
+	}
+	
+	defineExpose({
+		show,
+		hide
+	})
+</script>
+
+<style lang="scss" scoped>
+	.tips-popup-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		
+		.title {
+			font-size: 38rpx;
+			font-weight: bold;
+		}
+		
+		.text {
+			margin-top: 50rpx;
+			font-size: 30rpx;
+			max-height: 300rpx;
+			overflow-y: scroll;
+		}
+		
+		.confirm-button {
+      margin: 0rpx 10rpx;
+      flex: 1;
+			margin-top: 50rpx;
+			min-width: 300rpx;
+			max-width: 500rpx;
+			height: 90rpx;
+			border-radius: 45rpx;
+			font-size: 32rpx;
+			padding: 0 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+</style>
--- a/src/components/popup/Congratulation.vue
+++ b/src/components/popup/Congratulation.vue
@ -0,0 +1,131 @@
+<template>
+    <uni-popup ref="awardPopup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="award-content">
+            <view class="award-inner flex-center relative">
+                <view class="award-title flex-center"
+                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.recordTitleBg}`, color: themeStore.theme.activity.normal }">
+                    {{ $t('promo.activity.awardTitle') }}
+                </view>
+                <view class="award-box flex-column items-center">
+                    <view class="award-gold"
+                        :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.awardBg}` }">
+                        <theme-image src="@/static/spins/image_jinbi.png" class="award-gold-icon"
+                            mode="aspectFit"></theme-image>
+                    </view>
+                    <view class="award-amount" :style="{ color: themeStore.theme.activity.normal }">
+                        <text v-if="!isNaN(prizeAmount)">{{ currency}}</text> {{ prizeAmount}}
+                    </view>
+                </view>
+                <view class="btn-ok flex-center" @click="close"
+                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.activity.awardBtnBg}`, 'color': themeStore.theme.deposit.button.textColor }">
+                    {{ $t('promo.activity.ok') }}</view>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { useThemeStore } from '@/store/useThemeStore';
+
+
+const themeStore = useThemeStore()
+defineProps({
+    prizeAmount: {
+        type: [Number, String],
+        default: 0
+    },
+    currency: {
+        type: String,
+        default: '₹'
+    }
+})
+const emit = defineEmits(['close'])
+const awardPopup = ref(null)
+
+const open = () => {
+    awardPopup.value.open()
+}
+const close = () => {
+    awardPopup.value.close()
+    emit('close')
+}
+
+defineExpose({
+    open,
+    close
+})
+</script>
+
+<style lang="scss" scoped>
+.award-content {
+    width: 616rpx;
+    height: 482rpx;
+    background: linear-gradient(90deg, #F7A421, #FDF7AB, #F57F08);
+    border-radius: 19rpx;
+    padding: 2px;
+
+    .award-inner {
+        width: 100%;
+        height: 100%;
+        background-color: #440707;
+        border-radius: 19rpx;
+        padding: 60rpx 30rpx;
+
+        .award-title {
+            width: 460rpx;
+            height: 69rpx;
+            position: absolute;
+            top: -28rpx;
+            left: 50%;
+            transform: translateX(-50%);
+            font-family: Roboto;
+            font-size: 14px;
+            font-weight: 700;
+            line-height: 14px;
+            text-align: left;
+            text-underline-position: from-font;
+            text-decoration-skip-ink: none;
+            color: #FEBF05;
+        }
+
+        .btn-ok {
+            width: 464rpx;
+            height: 88rpx;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: -44rpx;
+            border-radius: 19rpx;
+            overflow: hidden;
+        }
+
+        .award-box {
+            width: 372rpx;
+
+            .award-gold {
+                width: 100%;
+                height: 252rpx;
+                display: flex;
+                justify-content: center;
+                align-items: flex-end;
+
+                .award-gold-icon {
+                    width: 200rpx;
+                    height: 168rpx;
+                }
+            }
+
+            .award-amount {
+                font-family: Roboto;
+                font-size: 34rpx;
+                font-weight: 700;
+                line-height: normal;
+                text-align: left;
+                text-underline-position: from-font;
+                text-decoration-skip-ink: none;
+                color: #FFBF01;
+            }
+        }
+    }
+}
+</style>
--- a/src/components/popup/DepositBonus.vue
+++ b/src/components/popup/DepositBonus.vue
@ -0,0 +1,320 @@
+<script setup>
+import { getBonusAmountApi } from '@/api/promo'
+import { usePromoStore } from '@/store/usePromoStore'
+import { useThemeStore } from '@/store/useThemeStore'
+import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue'
+const popup = ref(null)
+const promoStore = usePromoStore()
+const themeStore = useThemeStore()
+
+const rewardList = computed(() => promoStore.detailList)
+const emit = defineEmits(['close'])
+const popTheme = computed(() => themeStore.theme.popup)
+const instance = getCurrentInstance()
+function open() {
+    popup.value.open()
+    nextTick(() => {
+        const popBox = uni.createSelectorQuery().in(instance.proxy)
+        popBox.select('#claim-content').boundingClientRect((data) => {
+            console.log('data: ', data);
+        }).exec()
+    })
+    
+}
+function close() {
+    popup.value.close()
+    emit('close')
+}
+const handleCollect = async (item) => {
+    console.log('collect')
+    getBonusAmountApi({ id: item.id }).then(() => {
+        const idx = promoStore.detailList.findIndex((i) => i.id === item.id)
+        promoStore.detailList[idx].status = 2
+    })
+}
+const date2Date = (dateStr) => {
+    const date = new Date(dateStr)
+    const year = date.getFullYear()
+    const month = date.getMonth()
+    const day = date.getDate()
+    return new Date(year, month, day)
+}
+function judgeStatus(item) {
+    const curDate = date2Date(Date.now())
+    const endtDate = date2Date(item.giveDate)
+    if (curDate < endtDate) {
+        return {
+            type: 'button',
+            color: '#565656',
+            disabled: true,
+            text: 'Not Reach',
+        }
+    }
+    if (item.status === 0) {
+        return {
+            type: 'button',
+            color: '#565656',
+            text: 'Incomplete',
+            disabled: true,
+        }
+    }
+    if (item.status === 2) {
+        return {
+            type: 'text',
+            text: 'Collected',
+            color: '#FBA7AE',
+            disabled: true
+        }
+    }
+
+    if (item.status === 1) {
+        return {
+            type: 'button',
+            text: 'Collect',
+            color: '#7B0810',
+            disabled: false,
+            onClick: () => {
+                console.log('collect')
+                handleCollect(item)
+            }
+        }
+    }
+    if (curDate > endtDate) {
+        return {
+            type: 'text',
+            color: '#D51414',
+            text: 'Expired',
+            disabled: true,
+        }
+    }
+
+}
+const handleStatus = (item) => {
+    if (judgeStatus(item).type === 'button' && item.status === 1) {
+        judgeStatus(item).onClick()
+    }
+}
+const calPercent = (a1, a2) => {
+    if (a1 >= a2) return 100
+    return Math.ceil(a1 / a2 * 100)
+}
+const handleSpread = (item) => {
+    item.show = !item.show
+}
+
+defineExpose({
+    open,
+    close
+})
+
+</script>
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="claim-content relative" id="claim-content">
+            <view class="head flex-center">Claim rewards</view>
+            <theme-image src="@/static/rank/image_phbsy_x.png" class="icon-close" @click="close" />
+            <view class="w-full act-box">
+                <view class="w-full table-head flex justify-between items-center">
+                    <view class="tb-head-col flex-center flex-1">Day</view>
+                    <view class="tb-head-col flex-center medium-width">Rewards</view>
+                    <view class="tb-head-col flex-center flex-1">Status</view>
+                </view>
+                <view class="day-reward" v-for="(item, index) in rewardList" :key="index">
+                    <view class="flex items-center justify-between reward-label">
+                        <view class="flex-center flex-1 label-text">Day {{ index + 1 }}</view>
+                        <view class="flex-center medium-width amount">₹{{ item.giveAmount }}</view>
+                        <view v-if="judgeStatus(item).type === 'text'" :style="{ color: judgeStatus(item).color }"
+                            class=" flex-center flex-1 flex-center label-text text-status">
+                            {{ judgeStatus(item).text }}
+                        </view>
+                        <view v-else class=" flex-center flex-1 flex-center label-text text-status" :style="{
+                            color: judgeStatus(item).color,
+                            background: judgeStatus(item).disabled ? popTheme.disableBtnBg : popTheme.enableBtnBg
+                        }" @click="handleStatus(item)">
+                            {{ judgeStatus(item).text }}
+                        </view>
+                    </view>
+                    <view class="flex-1 conditions" v-if="item.conditions !== ''">
+                        <view class="flex items-center justify-between condi-line">
+                            <view class="condi-label">Conditions:</view>
+                            <view class="icon-spad2" v-if="item.show" @click.stop="handleSpread(item)"></view>
+                            <view class="icon-spad" v-else @click.stop="handleSpread(item)"></view>
+                            <view class="condi-progress relative">
+                                <view class="progress-inner"
+                                    :style="{ width: calPercent(item.curBets, item.maxBets) + '%' }"></view>
+                                <view class="progress-txt">{{ item.curBets }}/{{ item.maxBets }}</view>
+                            </view>
+                        </view>
+                        <template v-if="item.show && item.conditions !== ''">
+                            <!-- v-for="(condi, index2) in item.conditions" :key="index2" -->
+                            <view class="condi-item">
+                                Need to complete the following games including
+                            </view>
+                            <view class="condi-item">[<text style="color: #FDE261;">{{ item.conditions }}</text>], and
+                                bet more than <text style="color: red;">{{ item.maxBets }}</text></view>
+                        </template>
+                    </view>
+                    <!-- <view class="flex items-center justify-between reward-label"></view> -->
+                </view>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<style lang="scss">
+.claim-content {
+    width: 680rpx;
+    max-height: 1250rpx;
+    background-color: #450408;
+    border: 4px solid #FFD77B;
+    // border: 4px solid;
+    // border-image: linear-gradient(0deg, #FFD679, #FFEC95, #FFD77B) 4 4;
+    border-radius: 10rpx;
+    padding: 0 10rpx;
+    padding-bottom: 16rpx;
+
+    .icon-close {
+        position: absolute;
+        top: -20rpx;
+        right: -20rpx;
+        width: 42rpx;
+        height: 42rpx;
+    }
+
+    .head {
+        height: 90rpx;
+        width: 100%;
+        color: white;
+        font-family: Roboto;
+        font-weight: bold;
+        font-size: 38rpx;
+    }
+
+    .act-box {
+        border: 1px solid #851E25;
+        border-radius: 6rpx;
+        overflow-y: auto;
+        // height: calc(1250rpx - 90rpx - 16px);
+    }
+
+    .table-head {
+        height: 62rpx;
+
+        .tb-head-col {
+            height: 100%;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 25rpx;
+            color: #DE848D;
+            border-right: 1px solid #851E25;
+
+            &:last-child {
+                border-right: none;
+            }
+        }
+    }
+
+    .medium-width {
+        width: 270rpx;
+        flex-shrink: 0;
+    }
+
+    .day-reward {
+        border-top: 1px solid #851E25;
+
+        .reward-label {
+            height: 84rpx;
+
+            .text-status {
+                width: 180rpx;
+                height: 62rpx;
+                font-family: Roboto;
+                font-weight: 400;
+                font-size: 24rpx;
+            }
+        }
+
+        .label-text {
+            color: #DE848D;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 25rpx;
+        }
+
+        .amount {
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 25rpx;
+            color: #FDE261;
+        }
+
+        .conditions {
+            // border-top: 1px solid #851E25;
+            padding: 10rpx;
+
+            .condi-label {
+                width: 188rpx;
+                font-family: Roboto;
+                font-weight: 400;
+                font-size: 22rpx;
+                color: #FFFFFF;
+            }
+
+            .condi-progress {
+                width: 188rpx;
+                height: 26rpx;
+                background: #000000;
+                border-radius: 10rpx;
+                border: 1px solid #AC2E36;
+
+                .progress-inner {
+                    // width: 108rpx;
+                    height: 22rpx;
+                    background: linear-gradient(0deg, #009311, #1BCE39, #009412);
+                    border-radius: 10rpx;
+                }
+
+                .progress-txt {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 188rpx;
+                    height: 26rpx;
+                    font-family: Roboto;
+                    font-weight: 400;
+                    font-size: 19rpx;
+                    color: #FEFEFE;
+                    text-align: center;
+                }
+            }
+
+            .condi-line {
+                margin-bottom: 12rpx;
+
+                .icon-spad {
+                    width: 0;
+                    height: 0;
+                    border-bottom: 20rpx solid #FFE68E;
+                    border-left: 16rpx solid transparent;
+                    border-right: 16rpx solid transparent;
+                }
+
+                .icon-spad2 {
+                    width: 0;
+                    height: 0;
+                    border-top: 20rpx solid #FFE68E;
+                    border-left: 16rpx solid transparent;
+                    border-right: 16rpx solid transparent;
+                }
+            }
+
+            .condi-item {
+                font-family: Roboto;
+                font-weight: 400;
+                font-size: 20rpx;
+                color: #DE848D;
+                line-height: 25rpx;
+            }
+        }
+    }
+}
+</style>
--- a/src/components/popup/Download.vue
+++ b/src/components/popup/Download.vue
@ -0,0 +1,96 @@
+<template>
+    <uni-popup ref="popup" type="center">
+        <view class="download-box relative" :style="{ background: themeStore.theme.popup.updateBg }">
+            <theme-image src="@/static/rank/image_phbsy_x.png" mode="widthFix" class="close-img"
+                @click="close"></theme-image>
+            <view class="dw-head flex-center"
+                :style="{ color: themeStore.theme.light, 'border-color': themeStore.theme.popup.lineBg }">
+                Discover a newversion
+            </view>
+            <view class="update-content" :style="{ background: themeStore.theme.popup.updatePopBg }">
+                {{ appStore.updateData?.updateText }}
+            </view>
+            <view class="confirm-box flex-center" @click="onConfirm"
+                :style="{ background: `top / cover no-repeat ${themeStore.theme.popup.btnImgBg}`, color: themeStore.theme.popup.textColor }">
+                Immediate Updating
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { useAppStore } from '@/store/useAppStore';
+import { useThemeStore } from '@/store/useThemeStore';
+
+const emit = defineEmits(['close', 'confirm'])
+const appStore = useAppStore()
+const themeStore = useThemeStore()
+const popup = ref()
+const confirm = ref(false)
+
+const onConfirm = () => {
+    confirm.value = true
+    popup.value.close()
+    emit('confirm')
+}
+function close() {
+    popup.value.close()
+    emit('close')
+}
+
+function open() {
+    popup.value.open()
+}
+
+defineExpose({
+    close,
+    open
+})
+</script>
+<style lang="scss">
+.download-box {
+    width: 642rpx;
+    height: 610rpx;
+    background-color: beige;
+    border-radius: 12rpx;
+    border: 3px solid #FFD77B;
+    padding: 0 26rpx;
+
+    .close-img {
+        width: 44rpx;
+        height: 44rpx;
+        position: absolute;
+        top: -22rpx;
+        right: -22rpx;
+    }
+
+    .dw-head {
+        width: 100%;
+        height: 100rpx;
+        font-family: Roboto;
+        font-weight: bold;
+        font-size: 35rpx;
+        border-bottom: 1px solid;
+    }
+
+    .update-content {
+        width: 100%;
+        height: 356rpx;
+        margin-top: 18rpx;
+        border-radius: 10rpx;
+        padding: 25rpx;
+        color: #fff;
+    }
+
+    .confirm-box {
+        width: 300rpx;
+        height: 81rpx;
+        font-family: Roboto;
+        font-weight: 600;
+        font-size: 27rpx;
+        color: #7B0810;
+        margin: 0 auto;
+        margin-top: 20rpx;
+    }
+}
+</style>
--- a/src/components/popup/FirstRechargePop.vue
+++ b/src/components/popup/FirstRechargePop.vue
@ -0,0 +1,224 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="recharge-content flex-center relative">
+            <view class="recharge-img-wrap relative">
+                <theme-image src="@/static/frecharge/image_cztc_X.png" class="close-btn" mode="aspectFit"
+                    @click.stop="close"></theme-image>
+                <theme-image src="@/static/frecharge/image_czdk2.png" class="pop-main-img"
+                    mode="aspectFit"></theme-image>
+                <view class="charge-box">
+                    <view v-for="(item, index) in awardList" :key="index" class="water-back-item flex items-center justify-between">
+                        <view class="back-left flex items-center" :style="{color: themeStore.theme.deposit.depCorlor}">
+                            <theme-image src="@/static/frecharge/icon_coins01.png" mode="aspectFit"
+                                class="coin-img"></theme-image>
+                            <text style="line-height: 32rpx; margin-left: 12rpx;">≥{{ item.amount }}</text>
+                        </view>
+                        <view class="back-right flex items-center" :style="{color: themeStore.theme.deposit.awarColor}">
+                            <theme-image src="@/static/frecharge/icon_coins02.png" mode="aspectFit"
+                                class="coin2-img"></theme-image>
+                            <text style="line-height: 32rpx;margin-left: 12rpx;">{{ item.award }}</text>
+                        </view>
+                    </view>
+                </view>
+                <theme-image src="@/static/frecharge/btn_deposit.png" class="pop-deposit-img" mode="aspectFit"
+                    @click.stop="toDeposit"></theme-image>
+            </view>
+            <view class="show-dayonce flex items-center">
+                <view class="check-box relative" @click="onChecked">
+                    <theme-image src="@/static/frecharge/image_gx.png" mode="aspectFit" class="check-bg"></theme-image>
+                    <theme-image v-if="showToday" src="@/static/frecharge/image_gou.png" class="checked-img"
+                        mode="aspectFit"></theme-image>
+                </view>
+                <view class="tips" :style="{ color: themeStore.theme.text.normal }">{{ $t('home.popTip') }}</view>
+            </view>
+            <theme-image src="@/static/frecharge/image_djs.png" class="count-down-img" mode="aspectFit"></theme-image>
+            <view class="count-down">{{ countDownStr }}</view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { useDepositStore } from '@/store/useDepositStore';
+import { useThemeStore } from '@/store/useThemeStore';
+import { computed, onMounted, ref } from 'vue';
+const popup = ref(null)
+
+const countDown = ref(10 * 60 * 60)
+const countDownStr = ref('')
+const timer = ref(null)
+const themeStore = useThemeStore()
+const depositStore = useDepositStore()
+defineProps({
+    showToday: {
+        type: Boolean,
+        default: false
+    }
+})
+const awardList = computed(() => {
+    return depositStore.awardList   
+})
+const emit = defineEmits(['close', 'checked'])
+const onChecked = () => {
+    emit('checked')
+}
+const open = () => {
+    popup.value.open()
+}
+const close = () => {
+    uni.setStorageSync('hour', countDown.value)
+    clearInterval(timer.value)
+    popup.value.close()
+    emit('close')
+}
+const toDeposit = () => {
+    close()
+    uni.navigateTo({
+        url: '/pages/wallet/Deposit'
+    })
+}
+const addZero = (num) => {
+    return num < 10 ? '0' + num : num
+}
+const genCountDown = () => {
+    const seconds = countDown.value - 1
+    const hours = Math.floor(seconds / 3600)
+    const minutes = Math.floor((seconds - hours * 3600) / 60)
+    const second = seconds - hours * 3600 - minutes * 60
+    countDownStr.value = `${addZero(hours)} : ${addZero(minutes)} : ${addZero(second)}`
+    countDown.value = seconds
+    if (seconds <= 0) {
+        clearInterval(timer.value)
+        uni.setStorageSync('hour', 10 * 60 * 60)
+        close()
+        return
+    }
+}
+defineExpose({
+    open,
+    close
+})
+onMounted(() => {
+    const hour = uni.getStorageSync('hour')
+    if (hour) {
+        countDown.value = hour
+    } else {
+        uni.setStorageSync('hour', countDown.value)
+    }
+    timer.value = setInterval(() => {
+        genCountDown()
+    }, 1000)
+})
+</script>
+<style scoped lang="scss">
+.recharge-content {
+    flex-direction: column;
+
+    .charge-box {
+        position: absolute;
+        bottom: 110rpx;
+        width: 470rpx;
+        height: 452rpx;
+        left: 50%;
+        transform: translateX(-50%);
+
+        .water-back-item {
+            position: relative;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 26rpx;
+            padding: 4rpx 30rpx;
+
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                height: 1px;
+                transform: scaleY(0.5);
+                background-color: #A22255;
+            }
+
+            .coin-img {
+                width: 28rpx;
+                height: 32rpx;
+            }
+
+            .coin2-img {
+                width: 52rpx;
+                height: 42rpx;
+            }
+            .back-left{
+                width: 150rpx;
+            }
+            .back-right{
+                width: 120rpx;
+            }
+        }
+    }
+
+    .pop-main-img {
+        width: 573rpx;
+        height: 816rpx;
+    }
+
+    .close-btn {
+        position: absolute;
+        top: -50rpx;
+        right: 0;
+        z-index: 100;
+        width: 34rpx;
+        height: 34rpx;
+    }
+
+    .pop-deposit-img {
+        position: absolute;
+        bottom: 30rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 323rpx;
+        height: 63rpx;
+    }
+
+    .show-dayonce {
+        margin-top: 34rpx;
+
+        .check-box {
+            width: 28rpx;
+            height: 28rpx;
+            margin-right: 4rpx;
+            display: flex;
+
+            .check-bg {
+                width: 28rpx;
+                height: 28rpx;
+            }
+
+            .checked-img {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 26rpx;
+                height: 26rpx;
+            }
+        }
+
+        .tips {
+            font-size: 28rpx;
+        }
+    }
+
+    .count-down-img {
+        margin-top: 20rpx;
+        width: 300rpx;
+        height: 23rpx;
+    }
+
+    .count-down {
+        margin-top: 24rpx;
+        font-family: Bahnschrift;
+        font-weight: 400;
+        font-size: 50rpx;
+        color: #F5E74C;
+    }
+}
+</style>
--- a/src/components/popup/NormalPopup.vue
+++ b/src/components/popup/NormalPopup.vue
@ -0,0 +1,68 @@
+<template>
+	<uni-popup
+		ref="popupRef"
+		:round="false"
+		:mask-click="false"
+		mode="center"
+	>
+		<view class="popup-view">
+			<view class="popup-content-view" :style="{ 'background': themeStore.theme.popup.bgColor }">
+				<slot></slot>
+			</view>
+			<theme-image class="popup-close-btn" src="@/static/mail/icon-popup-close.png" mode="aspectFit" @click.stop="hide"/>
+		</view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore.js'
+	
+	const themeStore = useThemeStore()
+	const popupRef = ref(null)
+	
+	const show = () => {
+		popupRef.value.open()
+	}
+	
+	const hide = () => {
+		popupRef.value.close()
+	}
+	
+	defineExpose({
+		show,
+		hide
+	})
+</script>
+
+<style lang="scss">
+	.van-popup {
+		background: none;
+		overflow-y: visible;
+	}
+</style>
+
+<style lang="scss" scoped>
+	.popup-view {
+		position: relative;
+	}
+	
+	.popup-close-btn {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		right: -20rpx;
+		top: -20rpx;
+	}
+	
+	.popup-content-view {
+		border-radius: 20rpx;
+		width: 690rpx;
+		max-height: 70vh;
+		background-color: #922222;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 30rpx;
+	}
+</style>
--- a/src/components/popup/NormalPopupView.vue
+++ b/src/components/popup/NormalPopupView.vue
@ -0,0 +1,89 @@
+<template>
+	<view class="normal-popup-view-container">
+		<view class="normal-popup-view-mask" @touchmove.prevent="handleMaskMove" @mousemove.prevent="handleMaskMove" @click.stop="handleMaskClick"></view>
+		<view class="normal-popup-view" :style="{ 'z-index': zIndex }" >
+			<view class="normal-popup-content">
+				<view class="popup-content-view" @click.stop="handleContentClick" :style="{ 'background-color': themeStore.theme.popup.bgColor }">
+					<slot></slot>
+				</view>
+				<theme-image class="popup-close-btn" src="@/static/icon-popup-close.png" mode="aspectFit" @click.stop="handleCloseBtnClick"/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	const emit = defineEmits(['onMaskClick, close'])
+	const props = defineProps({
+		zIndex: {
+			type: Number,
+			default: 1002
+		}
+	})
+	
+	const handleMaskClick = () => {
+		emit('onMaskClick')
+	}
+	
+	const handleMaskMove = () => {
+		console.log('mask movie')
+	}
+	
+	const handleContentClick = () => {
+		
+	}
+	
+	const handleCloseBtnClick = () => {
+		emit('close')
+	}
+</script>
+
+<style lang="scss" scoped>
+	.normal-popup-view-container {
+		position: relative;
+		
+		.normal-popup-view-mask {
+			position: fixed;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			z-index: 1000;
+			background-color: #00000090;
+		}
+	}
+	
+	.normal-popup-view {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.normal-popup-content {
+		position: relative;
+		padding-bottom: 80rpx;
+	}
+	
+	.popup-close-btn {
+		width: 60rpx;
+		height: 60rpx;
+		position: absolute;
+		right: -20rpx;
+		top: -20rpx;
+	}
+	
+	.popup-content-view {
+		border-radius: 20rpx;
+		width: 650rpx;
+		max-height: 70vh;
+		padding: 30rpx;
+	}
+</style>
--- a/src/components/popup/RankHisPop.vue
+++ b/src/components/popup/RankHisPop.vue
@ -0,0 +1,266 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="rank-his-pop relative"
+            :style="{ 'border-color': themeStore.theme.promo.rank.borderColor, background: themeStore.theme.promo.rank.historyBgColor }">
+            <theme-image src="@/static/rank/image_history_X.png" class="close-image" @click="closePopup"></theme-image>
+            <view class="rank-his-pop-content-title w-full flex-center" :style="{ color: themeStore.theme.light }">
+                {{ $t('promo.pop.title') }}
+            </view>
+            <view class="rank-top w-full flex justify-center items-end"
+                :style="{ background: `top / cover no-repeat ${themeStore.theme.promo.rank.historyTitleImg}` }">
+                <text class="rank-top-amount" :style="{ color: themeStore.theme.promo.rank.borderColor }">₹{{ totalBet
+                    }}</text>
+            </view>
+            <view class="rank-his-pop-content-list">
+                <view class="table-tab flex justify-between items-center">
+                    <view class="tab-item"
+                        :style="{ color: active === 'day' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
+                        @click="betDateChange('day')">{{ $t('promo.pop.lastDay') }}</view>
+                    <view class="tab-item"
+                        :style="{ color: active === 'week' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
+                        @click="betDateChange('week')">{{ $t('promo.pop.lastWeek') }}</view>
+                    <view class="tab-item"
+                        :style="{ color: active === 'month' ? themeStore.theme.promo.rank.tabActive : themeStore.theme.promo.rank.tabColor }"
+                        @click="betDateChange('month')">{{ $t('promo.pop.lastMonth') }}</view>
+                </view>
+                <view class="table-head w-full flex items-center justify-between"
+                    :style="{ color: themeStore.theme.promo.rank.tabColor }">
+                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnRank') }}</view>
+                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnPhone') }}</view>
+                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnBet') }}</view>
+                    <view class="table-head-item flex-1 flex-center">{{ $t('promo.pop.columnReward') }}</view>
+                </view>
+                <view class="list-wrap">
+                    <template v-for="(item, index) in rankHis">
+                        <template v-if="index === 0">
+                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
+                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.firstRowBgColor }">
+                                <view class="table-column-item flex-1 flex-center">
+                                    <theme-image src="@/static/rank/pm1.png" class="rank-image"></theme-image>
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
+                                    }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center"
+                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
+                                    ₹{{ encipherAmount(item.rewardAmount, 3) }}</view>
+                            </view>
+                        </template>
+                        <template v-else-if="index === 1">
+                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
+                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.secondRowBgColor }">
+                                <view class="table-column-item flex-1 flex-center">
+                                    <theme-image src="@/static/rank/pm2.png" class="rank-image"></theme-image>
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
+                                    }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center"
+                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
+                                    ₹{{ encipherAmount(item.rewardAmount,3) }}</view>
+                            </view>
+                        </template>
+                        <template v-else-if="index === 2">
+                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
+                                :style="{ color: themeStore.theme.promo.rank.tabColor, background: themeStore.theme.promo.rank.thirdRowBgColor }">
+                                <view class="table-column-item flex-1 flex-center">
+                                    <theme-image src="@/static/rank/pm3.png" class="rank-image"></theme-image>
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
+                                    }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center"
+                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
+                                    ₹{{ encipherAmount(item.rewardAmount,3) }}</view>
+                            </view>
+                        </template>
+                        <template v-else>
+                            <view :key="item.rank" class="table-row w-full flex items-center justify-between"
+                                :style="{ color: themeStore.theme.promo.rank.tabColor }">
+                                <view class="table-column-item flex-1 flex-center">{{ item.rank }}</view>
+                                <view class="table-column-item flex-1 flex-center">{{ encipherPhone(item.mobile) }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center">₹{{ encipherAmount(item.betAmount, 3)
+                                    }}
+                                </view>
+                                <view class="table-column-item flex-1 flex-center"
+                                    :style="{ color: themeStore.theme.promo.rank.borderColor }">
+                                    ₹{{ encipherAmount(item.rewardAmount, 3) }}</view>
+                            </view>
+                        </template>
+                    </template>
+                </view>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { getBetRankDataApi } from '@/api/promo';
+import { encipherPhone } from '@/module/utils/encipherPhone';
+import { useThemeStore } from '@/store/useThemeStore';
+import { computed, onMounted, ref } from 'vue';
+
+const themeStore = useThemeStore()
+
+const popup = ref(null)
+const active = ref('day')
+const ranks = ref({})
+
+const totalBet = computed(() => {
+    return ranks.value[active.value]?.totalBetAmount ?? 0
+})
+const rankHis = computed(() => {
+    return ranks.value[active.value]?.ranks ?? []
+})
+console.log('rankHis', rankHis);
+
+const props = defineProps({
+    content: String
+})
+
+const betDateChange = (type) => {
+    active.value = type
+}
+const open = () => {
+    popup.value.open()
+}
+const close = () => {
+    popup.value.close()
+}
+const closePopup = () => {
+    close()
+}
+const calcRate = (rank) => {
+    console.log('rank', rank);
+
+    console.log('rankAwards', ranks.value[active.value]?.rankAwards);
+
+    const idx = ranks.value[active.value]?.rankAwards?.findIndex((item) => {
+        return rank >= item[0] && rank <= item[1];
+    })
+    if (idx > -1) {
+        return ranks.value[active.value]?.rankAwards[idx][2]
+    }
+    return 0
+}
+const encipherAmount = (value, type = 0) => {
+    if (value != "") {
+        if (type == 0) {
+            return Math.floor(value).toString().replace(/\d(?=(\d{3})+\.)/g, "$&,");
+        }
+        if (type == 1) {
+            return (Math.floor(value * 100) / 100).toFixed(2);
+        }
+        if (type == 3) {
+            return (isNaN(value) ? 0 : value).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, "$&,");
+        }
+    }
+    return "";
+};
+const getBetData = async () => {
+    const { data } = await getBetRankDataApi({ rankOption: -1 })
+    if (data?.ranks) {
+        ranks.value = data.ranks.reduce((acc, cur) => {
+            acc[cur.rankType] = cur
+            return acc
+        }, {})
+        console.log('hist ranks', ranks.value);
+
+        if (props.content && props.content != '') {
+            let content = JSON.parse(props.content)
+            console.log('content', content);
+
+            content.ranks.forEach((item) => {
+                ranks.value[item.type].rankAwards = item.rank_awards
+                ranks.value[item.type].rankShow = item?.rank_show ?? 50
+                ranks.value[item.type].rankShowMax = item?.rank_show_max ?? 1000
+                ranks.value[item.type].betRate = item?.bet_rate ?? 0
+            })
+            console.log('ranksVal', ranks.value);
+        }
+    }
+}
+onMounted(() => {
+    getBetData()
+})
+defineExpose({
+    open,
+    close
+})
+</script>
+<style lang="scss" scoped>
+.rank-his-pop {
+    width: 652rpx;
+    height: 974rpx;
+    border-radius: 18rpx;
+    border: 2px solid;
+
+    .close-image {
+        width: 24rpx;
+        height: 24rpx;
+        position: absolute;
+        right: 30rpx;
+        top: 30rpx;
+    }
+
+    .rank-his-pop-content-title {
+        height: 94rpx;
+    }
+
+    .rank-top {
+        height: 106rpx;
+
+        .rank-top-amount {
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 52rpx;
+        }
+    }
+
+    .rank-his-pop-content-list {
+        width: 100%;
+
+        .table-tab {
+            width: 100%;
+            height: 74rpx;
+            padding: 0 54rpx;
+
+            .tab-item {
+                font-family: Roboto;
+                font-weight: 400;
+                font-size: 25rpx;
+                color: #DE848D;
+            }
+        }
+
+        .table-head {
+            height: 50rpx;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 21rpx;
+        }
+        .list-wrap{
+            height: 640rpx;
+            width: 100%;
+            overflow-y: auto;
+        }
+        .table-row {
+            height: 42rpx;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 21rpx;
+
+            .rank-image {
+                width: 40rpx;
+                height: 32rpx;
+            }
+        }
+    }
+}
+</style>
--- a/src/components/popup/RankRewardPop.vue
+++ b/src/components/popup/RankRewardPop.vue
@ -0,0 +1,252 @@
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="popup-view relative"
+            :style="{ 'background': themeStore.theme.promo.rank.popBgColor, borderColor: themeStore.theme.promo.rank.popSpecialColor }">
+            <view class="pop-title">Beting Ranking Started</view>
+            <theme-image src="@/static/rank/image_phbsy_x.png" class="rank-reward-image" mode="aspectFit"
+                @click="close"></theme-image>
+            <view class="pop-content w-full">
+                <view class="reward-desc" :style="{color: themeStore.theme.light}">
+                    Place a bet and join the rankings for <text class="text-special"
+                        :style="{ color: themeStore.theme.promo.rank.popSpecialColor }">free</text> rewards up to
+                    <text :style="{ color: themeStore.theme.promo.rank.popSpecialColor }" class="text-special">
+                        {{formatNum(rankData, 2) }}
+                    </text>!
+                </view>
+                <view class="rewards-title flex-center"
+                    :style="{ 'background': `top / cover no-repeat ${themeStore.theme.promo.rank.betRewardHeadBg}`, color: themeStore.theme.light }">
+                    {{ $t('promo.pop.eventAward') }}
+                </view>
+                <view class="award-list w-full">
+                    <view class="table-head flex justify-between items-center"
+                        :style="{ color: themeStore.theme.promo.rank.tabColor }">
+                        <view class="head-column-item flex-1" :style="{ color: themeStore.theme.promo.rank.rankColor }">
+                            {{ $t("promo.public.rank") }}</view>
+                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.dailyList") }}</view>
+                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.weeklyList") }}</view>
+                        <view class="head-column-item flex-1">{{ $t("promo.leaderboard.monthlyList") }}</view>
+                    </view>
+                    <div class="list-wraper">
+                        <view v-for="item in promoStore.betrankList" :key="item.rank"
+                            class="table-row flex justify-between items-center"
+                            :style="{ color: themeStore.theme.promo.rank.rankNumPreColor }">
+                            <view class="head-column-item flex-1"
+                                :style="{ color: themeStore.theme.promo.rank.rankColor }">
+                                {{ item.rank }}</view>
+                            <view class="head-column-item flex-1">{{ formatNum(item.day * 100) + '%' }}</view>
+                            <view class="head-column-item flex-1">{{ formatNum(item.week * 100) + '%' }}</view>
+                            <view class="head-column-item flex-1">{{ formatNum(item.month * 100) + '%' }}</view>
+                        </view>
+                    </div>
+                </view>
+            </view>
+            <view class="evt-button">
+                <view class="show-dayonce flex items-center">
+                    <view class="check-box relative" @click="onChecked">
+                        <theme-image src="@/static/frecharge/image_gx.png" mode="aspectFit"
+                            class="check-bg"></theme-image>
+                        <theme-image v-if="showToday" src="@/static/frecharge/image_gou.png" class="checked-img"
+                            mode="aspectFit"></theme-image>
+                    </view>
+                    <view class="tips" :style="{ color: themeStore.theme.text.normal }">{{ $t('home.popTip') }}</view>
+                </view>
+                <theme-image @click.stop="toRankEvent" src="@/static/rank/btn_EventDetails.png" class="rank-evt-image"
+                    mode="aspectFit"></theme-image>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<script setup>
+import { getBetRankDataApi } from '@/api/promo';
+import { usePromoStore } from '@/store/usePromoStore';
+import { useThemeStore } from '@/store/useThemeStore';
+import { onMounted, ref } from 'vue';
+import { formatNum } from '@/module/utils/util';
+
+const promoStore = usePromoStore()
+const themeStore = useThemeStore()
+const popup = ref(null)
+const rankData = ref(0)
+const emit = defineEmits(['close', 'checked'])
+defineProps({
+    showToday: {
+        type: Boolean,
+        default: false
+    }
+})
+
+
+const onChecked = () => {
+    emit('checked')
+}
+const open = () => {
+    popup.value.open()
+}
+const close = () => {
+    popup.value.close()
+    emit('close')
+}
+const toRankEvent = () => {
+    const promo = promoStore.promoList.find((item) => item.jumpUrl === 'module:betrank')
+    uni.navigateTo({
+        url: '/pages/promo/Ranking/Ranking',
+        success: function (res) {
+            close()
+            res.eventChannel.emit(
+                "getContentInfo",
+                JSON.stringify(promo.content)
+            );
+        },
+    });
+}
+const getRankData = async () => {
+    const { data } = await getBetRankDataApi({ rankOption: 0 })
+    if (data) {
+        const rank = data.ranks?.find(item => item.rankType === 'day')
+        if (rank) {
+            rankData.value = rank.totalBetAmount
+        }
+    }
+}
+defineExpose({
+    open,
+    close
+})
+
+onMounted(() => {
+    getRankData()
+})
+</script>
+<style lang="scss" scoped>
+.popup-view {
+    width: 632rpx;
+    height: 930rpx;
+    border-radius: 18rpx;
+    border: 2px solid;
+
+    .pop-title {
+        font-family: Impact;
+        font-weight: 400;
+        font-size: 50rpx;
+        // color: #F8C106;
+        // color: #FFFCCF;
+        // text-shadow: 0rpx 2rpx 0rpx #A61100;
+        background: linear-gradient(0deg, #FFB600 20%, #EBDB25 43.212890625%, #FFFBB1 77.24609375%, #FFFCCF 100%);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        text-align: center;
+        line-height: 90rpx;
+    }
+
+    .rank-reward-image {
+        width: 44rpx;
+        height: 44rpx;
+        position: absolute;
+        top: -22rpx;
+        right: -22rpx;
+    }
+
+    .pop-content {
+        .reward-desc {
+            font-style: italic;
+            margin-top: 4rpx;
+            padding: 0 36rpx;
+
+            .text-special {
+                font-size: 36rpx;
+            }
+        }
+
+        .rewards-title {
+            width: 235rpx;
+            height: 58rpx;
+            font-family: Roboto;
+            font-weight: 500;
+            font-size: 28rpx;
+            margin: 0 auto;
+            margin-top: 24rpx;
+        }
+
+        .award-list {
+            height: 634rpx;
+            padding: 28rpx 20rpx;
+
+            .table-head {
+                width: 100%;
+                height: 63rpx;
+                background: #6E0910;
+                border-radius: 10rpx;
+                border: 1px solid #8A4446;
+                font-size: 21rpx;
+                margin-bottom: 14rpx;
+            }
+            .list-wraper {
+                height: 534rpx;
+                overflow-y: auto;
+            }
+
+            .table-row {
+                font-size: 21rpx;
+                width: 100%;
+                height: 63rpx;
+                background: #5A1116;
+                border-radius: 10rpx;
+                border: 1px solid #8A4446;
+                margin-bottom: 14rpx;
+            }
+
+            .head-column-item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            
+        }
+    }
+
+    .evt-button {
+        position: absolute;
+        bottom: -150rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 632rpx;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .show-dayonce {
+        .check-box {
+            width: 28rpx;
+            height: 28rpx;
+            margin-right: 4rpx;
+            display: flex;
+
+            .check-bg {
+                width: 28rpx;
+                height: 28rpx;
+            }
+
+            .checked-img {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 26rpx;
+                height: 26rpx;
+            }
+        }
+
+        .tips {
+            font-size: 28rpx;
+        }
+    }
+
+    .rank-evt-image {
+        margin-top: 14rpx;
+        width: 279rpx;
+        height: 81rpx;
+    }
+}
+</style>
--- a/src/components/popup/TipsPopup.vue
+++ b/src/components/popup/TipsPopup.vue
@ -0,0 +1,104 @@
+<template>
+	<NormalPopupView
+		v-if="visible"
+		:zIndex="9999"
+		@close="hide"
+	>
+		<view class="tips-popup-content">
+			<view class="title" :style="{ color: themeStore.theme.text.normal }">
+				{{ title || $t('app.popup.tips') }}
+			</view>
+			<view class="text" :style="{ color: themeStore.theme.text.normal }">
+				{{ text }}
+				<slot></slot>
+			</view>
+			<view v-if="showConfirm" class="confirm-button" :style="{ 'background': themeStore.theme.button.normal , 'color': themeStore.theme.button.textNormal}" @click.stop="handleConfirmClick">
+				<view>
+					{{ confirmText || $t('app.popup.confirm') }}
+				</view>
+			</view>
+		</view>
+	</NormalPopupView>
+</template>
+
+<script setup>
+	import { ref } from 'vue';
+	import NormalPopupView from './NormalPopupView.vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	import { useI18n } from 'vue-i18n'
+	
+	const { t } = useI18n()
+	const themeStore = useThemeStore()
+
+	const visible = ref(false)
+	const emit = defineEmits(['confirm'])
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		text: {
+			type: String,
+			default: ''
+		},
+		showConfirm: {
+			type: Boolean,
+			default: true
+		},
+		confirmText: {
+			type: String,
+			default: ''
+		}
+	})
+	
+	const show = () => {
+		visible.value = true
+	}
+	
+	const hide = () => {
+		visible.value = false
+	}
+	
+	const handleConfirmClick = () => {
+		emit('confirm')
+		hide()
+	}
+	
+	defineExpose({
+		show,
+		hide
+	})
+</script>
+
+<style lang="scss" scoped>
+	.tips-popup-content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		
+		.title {
+			font-size: 38rpx;
+			font-weight: bold;
+		}
+		
+		.text {
+			margin-top: 50rpx;
+			font-size: 30rpx;
+			max-height: 500rpx;
+			overflow-y: scroll;
+		}
+		
+		.confirm-button {
+			margin-top: 50rpx;
+			min-width: 300rpx;
+			max-width: 500rpx;
+			height: 90rpx;
+			border-radius: 45rpx;
+			font-size: 32rpx;
+			padding: 0 30rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+</style>
--- a/src/components/popup/WheelPop.vue
+++ b/src/components/popup/WheelPop.vue
@ -0,0 +1,93 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useThemeStore } from '@/store/useThemeStore'
+import { usePromoStore } from '@/store/usePromoStore'
+import { openUrl } from '@/module/utils/openUrl'
+import config from '@/config/global.config.js'
+
+const promoStore = usePromoStore()
+const themeStore = useThemeStore()
+const popup = ref(null)
+const emit = defineEmits(['close'])
+const tgLink = computed(() => {
+    const idx = promoStore.promoList.findIndex(item => item.jumpUrl === 'module:lottery')
+    if (idx > -1) {
+        return promoStore.promoList[idx]?.content?.tgLink
+    }
+    return ''
+})
+const popImg = computed(() => {
+    return config.appImageStartPrefix + '/zptc.png'
+})
+const open = () => {
+    popup.value.open()
+}
+const close = () => {
+    popup.value.close()
+    emit('close')
+}
+const toWheel = () => {
+    uni.navigateTo({
+        url: '/pages/activity/Activity'
+    })
+}
+const toTg = () => {
+    if (tgLink.value) {
+        openUrl(tgLink.value)
+    }
+}
+
+defineExpose({
+    open,
+    close
+})
+</script>
+<template>
+    <uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0, 0, 0, 0.7)">
+        <view class="pop-content relative">
+            <theme-image src="@/static/deposit_wheel/image_x.png" class="pop-close" @click.stop="close"></theme-image>
+            <theme-image :src="popImg" class="pop-image" mode="widthFix"></theme-image>
+            <view class="btns flex justify-between items-center">
+                <view class="flex-center btn btn-wheel" @click.stop="toWheel"
+                    :style="{ background: themeStore.theme.popup.btnImgBg, color: themeStore.theme.popup.textColor }">Go
+                </view>
+                <view class="flex-center btn btn-tg" @click.stop="toTg"
+                    :style="{ background: themeStore.theme.popup.btnImgBg, color: themeStore.theme.popup.textColor }">
+                    Telegram
+                </view>
+            </view>
+        </view>
+    </uni-popup>
+</template>
+<style scoped lang="scss">
+.pop-content {
+    width: 592rpx;
+
+    .pop-image {
+        width: 592rpx;
+    //    height: 686rpx;
+    }
+
+    .pop-close {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 30rpx;
+        height: 30rpx;
+        z-index: 99;
+    }
+
+    .btns {
+        margin-top: 50rpx;
+
+        .btn {
+            width: 264rpx;
+            height: 70rpx;
+            font-family: Roboto;
+            font-weight: 400;
+            font-size: 36rpx;
+            color: #7B0810;
+        }
+    }
+}
+</style>
--- a/src/components/radio/Radio.vue
+++ b/src/components/radio/Radio.vue
@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
--- a/src/components/segment/RoundSegmentControl.vue
+++ b/src/components/segment/RoundSegmentControl.vue
@ -0,0 +1,67 @@
+<template>
+	<view class="round-segmentcontrol-container" :style="{ 'background': themeStore.theme.tabsRound.bgColor }">
+		<view
+			v-for="(item, index) in list"
+			class="segment-item"
+			:style="{
+				'background': index === modelValue ? themeStore.theme.tabsRound.selectBgColor : '',
+				'color': index === modelValue ? themeStore.theme.tabsRound.selectTextColor : themeStore.theme.tabsRound.textColor
+			}" 
+			@click.stop="handleChangeClick(index)"
+		>
+			<view>{{ item }}</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref } from 'vue'
+	import { useThemeStore } from '@/store/useThemeStore'
+	
+	const themeStore = useThemeStore()
+	
+	const emits = defineEmits([
+		'update:modelValue',
+		'change'
+	])
+	const props = defineProps({
+		defaultIndex: {
+			type: Number,
+			default: 0
+		},
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		list: {
+			type: Array,
+			default: () => []
+		}
+	})
+	
+	const handleChangeClick = (index) => {
+		if (props.modelValue === index) { return }
+		emits('change', index)
+		emits('update:modelValue', index)
+	}
+</script>
+
+<style lang="scss" scoped>
+	.round-segmentcontrol-container {
+		display: flex;
+		align-items: center;
+		height: 64rpx;
+		border-radius: 32rpx;
+		font-size: 30rpx;
+		width: 520rpx;
+		
+		.segment-item {
+			width: 260rpx;
+			height: 64rpx;
+			border-radius: 32rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+</style>
--- a/src/components/segment/SegmentControl.vue
+++ b/src/components/segment/SegmentControl.vue
@ -0,0 +1,123 @@
+<template>
+	<view class="segment-control-container">
+		<view v-for="(item, index) in listData" :key="index" @click.stop="handleSelectChange(item, index)"
+			class="segment-item">
+			<view class="title" :class="{ 'active': index === pageData.selectIndex }"
+				:style="{ 'color': index === pageData.selectIndex ? themeStore.theme.tabs.active : themeStore.theme.tabs.normal }">
+				{{ item.title || '' }}
+			</view>
+			<view class="badge-view" v-if="item.badge"
+				:style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
+				{{ item.badge || '' }}
+			</view>
+			<view class="line-view">
+				<view class="line" v-if="index === pageData.selectIndex"
+					:style="{ 'width': lineWidth ? lineWidth + 'rpx' : '100%', 'background-color': themeStore.theme.tabs.active }">
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { useThemeStore } from '@/store/useThemeStore'
+
+const themeStore = useThemeStore()
+const emit = defineEmits(['change'])
+const props = defineProps({
+	listData: {
+		type: Array,
+		default: () => []
+	},
+	defaultIndex: {
+		type: Number,
+		default: 0
+	},
+	lineWidth: {
+		type: Number,
+		default: 0
+	}
+})
+
+const pageData = reactive({
+	selectIndex: props.defaultIndex
+})
+
+const handleSelectChange = (item, index) => {
+	if (pageData.selectIndex === index) { return }
+	pageData.selectIndex = index
+	emit('change', {
+		item: item,
+		index: index
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+.segment-control-container {
+	display: flex;
+	align-items: center;
+
+	.segment-item {
+		position: relative;
+		height: 60rpx;
+		padding: 0rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+
+		.title {
+			font-size: 27rpx;
+			color: #fff;
+			white-space: nowrap;
+
+		}
+
+		.title.active {
+			color: #FEBF05;
+			font-weight: bold;
+		}
+
+		.badge-view {
+			position: absolute;
+			top: 0rpx;
+			right: 10rpx;
+			height: 36rpx;
+			min-width: 80rpx;
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: contain;
+			text-align: center;
+			font-size: 23rpx;
+			line-height: 22rpx;
+			color: #fff;
+			font-weight: 400;
+		}
+
+		.badge-icon {
+			min-width: 70rpx;
+			height: 30rpx;
+		}
+
+		.line-view {
+			display: flex;
+			justify-content: center;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 50;
+
+			.line {
+				width: 100%;
+				height: 4rpx;
+				border-radius: 2rpx;
+				background-color: #FFDF3F;
+				overflow: hidden;
+			}
+		}
+	}
+}
+</style>
--- a/src/components/siderbar/PcSiderBar.vue
+++ b/src/components/siderbar/PcSiderBar.vue
@ -0,0 +1,38 @@
+<template>
+	<div class="pc-sider-bar">
+		<div class="pc-sider-bar-top">
+			<div class="logo">LOGO</div>
+		</div>
+		<div class="pc-sider-bar-menu">
+			<SideMenu />
+		</div>
+	</div>
+</template>
+
+<script setup>
+	import SideMenu from '@/components/menu/SideMenu.vue'
+</script>
+
+<style lang="scss" scoped>
+	.pc-sider-bar {
+		width: 100%;
+		height: 100%;
+		background-color: white;
+		
+		.pc-sider-bar-top {
+			display: flex;
+			justify-content: center;	
+			align-items: center;
+			padding: 20px 30px;	
+			
+			.logo {
+				font-size: 30px;
+				font-weight: bold;
+			}
+		}
+		
+		.pc-sider-bar-menu {
+			
+		}
+	}
+</style>
--- a/src/components/tabs/NormalTabs.vue
+++ b/src/components/tabs/NormalTabs.vue
@ -0,0 +1,98 @@
+<template>
+	<view class="normal-tabs-container">
+		<view class="normal-tabs-view">
+			<view v-for="(item, index) in tabList" :key="index" @click.stop="handleSelectChange(item, index)" :class="{ 'tab-count-3': tabList.length === 3, 'tab-count-2': tabList.length === 2, 'tab-count-1': tabList.length === 1 }">
+				<SmallTabsItem
+					v-if="size === 'small'"
+					:title="item.title"
+					:badge="item.badge"
+					:isActive="modelValue === index"
+					:normalColor="normalColor"
+					:activeColor="activeColor"
+				/>
+				<NormalTabsItem
+					v-else
+					:title="item.title"
+					:badge="item.badge"
+					:isActive="modelValue === index"
+					:normalColor="normalColor"
+					:activeColor="activeColor"
+				/>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { reactive } from 'vue';
+	import NormalTabsItem from './NormalTabsItem.vue'
+	import SmallTabsItem from './SmallTabsItem.vue'
+	
+	const emits = defineEmits([
+		'change',
+		'update:modelValue',
+	])
+	const props = defineProps({
+		tabList: {
+			type: Array,
+			default: () => []
+		},
+		defaultIndex: {
+			type: Number,
+			default: 0
+		},
+		modelValue: {
+			type: Number,
+			default: 0
+		},
+		normalColor: {
+			type: String,
+			default: '#fff'
+		},
+		activeColor: {
+			type: String,
+			default: '#FFDF3F'
+		},
+		size: {
+			type: String,
+			default: 'normal' // small
+		}
+	})
+	
+	const handleSelectChange = (item, index) => {
+		if (props.modelValue === index) { return }
+		emits('update:modelValue', index)
+		emits('change', {
+			item: item,
+			index: index
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.normal-tabs-container {
+		width: 100%;
+
+		.tab-count-3 { 
+			width: 33%;
+		}
+		
+		.tab-count-2 { 
+			width: 50%;
+		}
+		
+		.tab-count-1 {
+			width: 100%;
+		}
+		
+		.normal-tabs-view {
+			display: flex;
+			align-items: center;
+			overflow-x: auto;
+		}
+		
+		.normal-tabs-view::-webkit-scrollbar {
+		  display: none; /* 对于WebKit浏览器，如Chrome和Safari */
+		}
+	}
+</style>
--- a/src/components/tabs/NormalTabsItem.vue
+++ b/src/components/tabs/NormalTabsItem.vue
@ -0,0 +1,118 @@
+<template>
+	<view class="normal-tabs-item-container">
+		<view class="title" :class="{ 'active': isActive }" :style="{ 'color': isActive ? activeColor : normalColor }">
+			{{ title || '' }}
+		</view>
+		<view class="badge-view" v-if="badge" :style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
+			{{ badge || '' }}
+		</view>
+		<view class="line-view">
+			<view class="line" v-if="isActive" :style="{ 'background': activeColor }"></view>
+			<view v-if="isActive" class="triangle-up" :style="{ 'border-bottom-color': activeColor }"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { useThemeStore } from '@/store/useThemeStore'
+
+	const themeStore = useThemeStore()
+
+	defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		badge: {
+			type: String,
+			default: ''
+		},
+		isActive: {
+			type: Boolean,
+			default: false
+		},
+		normalColor: {
+			type: String,
+			default: '#fff'
+		},
+		activeColor: {
+			type: String,
+			default: '#FFDF3F'
+		},
+		size: {
+			type: String,
+			default: 'normal' // small
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.normal-tabs-item-container {
+		position: relative;
+		height: 100rpx;
+		padding: 0rpx 30rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.title {
+			font-size: 30rpx;
+			white-space: nowrap;
+		}
+		
+		.title.active {
+			font-weight: bold;
+		}
+		
+		.badge-view {
+			position: absolute;
+			top: 2rpx;
+			right: 25%;
+			height: 32rpx;
+			min-width: 80rpx;
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: contain;
+			text-align: center;
+			font-size: 18rpx;
+			line-height: 24rpx;
+			color: #fff;
+			font-weight: 400; 
+		}
+		
+		.badge-icon {
+			min-width: 70rpx;
+			height: 30rpx;
+		}
+		
+		.line-view {
+			display: flex;
+			justify-content: center;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 50;
+			width: 100%;
+			
+			.line {
+				width: 120rpx;
+				height: 4rpx;
+				border-radius: 2rpx;
+				overflow: hidden;
+			}
+
+			.triangle-up {
+				position: absolute;
+				left: calc(50% - 4rpx);
+				bottom: 3rpx;
+				width: 0;
+				height: 0;
+				z-index: 1;
+				border-left: 8rpx solid transparent;
+				border-right: 8rpx solid transparent;
+				border-bottom: 10rpx solid #ff0000;
+			}
+		}
+	}
+</style>
--- a/src/components/tabs/SmallTabsItem.vue
+++ b/src/components/tabs/SmallTabsItem.vue
@ -0,0 +1,100 @@
+<template>
+	<view class="normal-tabs-item-container">
+		<view class="title" :class="{ 'active': isActive }" :style="{ 'color': isActive ? activeColor : normalColor }">
+			{{ title || '' }}
+		</view>
+		<view class="badge-view" v-if="badge"  :style="{ 'background-image': themeStore.imageCssUrl.iconBadgeRed }">
+			{{ badge || '' }}
+		</view>
+		<view class="line-view">
+			<view class="line" v-if="isActive" :style="{ 'background': activeColor }"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { useThemeStore } from '@/store/useThemeStore'
+
+	const themeStore = useThemeStore()
+
+	defineProps({
+		title: {
+			type: String,
+			default: ''
+		},
+		badge: {
+			type: String,
+			default: ''
+		},
+		isActive: {
+			type: Boolean,
+			default: false
+		},
+		normalColor: {
+			type: String,
+			default: '#fff'
+		},
+		activeColor: {
+			type: String,
+			default: '#FFDF3F'
+		},
+		size: {
+			type: String,
+			default: 'normal' // small
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.normal-tabs-item-container {
+		position: relative;
+		height: 60rpx;
+		padding: 0rpx 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.title {
+			font-size: 26rpx;
+			white-space: nowrap;
+		}
+		
+		.badge-view {
+			position: absolute;
+			top: 2rpx;
+			right: 25%;
+			height: 32rpx;
+			min-width: 80rpx;
+			background-repeat: no-repeat;
+			background-position: center center;
+			background-size: contain;
+			text-align: center;
+			font-size: 18rpx;
+			line-height: 24rpx;
+			color: #fff;
+			font-weight: 400; 
+		}
+		
+		.badge-icon {
+			min-width: 70rpx;
+			height: 30rpx;
+		}
+		
+		.line-view {
+			display: flex;
+			justify-content: center;
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			z-index: 50;
+			
+			.line {
+				width: 80rpx;
+				height: 4rpx;
+				border-radius: 2rpx;
+				overflow: hidden;
+			}
+		}
+	}
+</style>
--- a/src/components/vipSign/VipSign.vue
+++ b/src/components/vipSign/VipSign.vue
@ -0,0 +1,42 @@
+<template>
+    <view class="vip-level relative flex col-center flex-end">
+        <text class="vip-level-text">{{ userStore.vipInfo?.vipLevel }}</text>
+        <!-- userStore.vipInfo.currentVipConfig.level -->
+        <theme-image :src="userStore.vipInfo?.currentVipConfig?.picUrl" class="vip-icon-level pos-absolute" mode="aspectFit"></theme-image>
+    </view>
+</template>
+<script setup>
+import { useUserStore } from '@/store/useUserStore'
+const userStore = useUserStore()
+
+</script>
+<style lang="scss" scoped>
+.vip-level {
+    min-width: 77rpx;
+    height: 24rpx;
+    background: linear-gradient(90deg, #A01E06 0%, #CA580F 58%, #BF5008 100%), linear-gradient(90deg, #73050A 0%, #EC290F 100%);
+    border-radius: 38rpx;
+    border: 2rpx solid #C28A37;
+    padding: 0 13rpx;
+
+    .vip-level-text {
+        text-align: right;
+        color: #FFEC8A;
+        font-size: 10px;
+        line-height: 10px;
+        font-weight: bold;
+        background-image: -webkit-linear-gradient(180deg, #FFEC8A, #E89537);
+        background-clip: text;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .vip-icon-level {
+        width: 32rpx;
+        height: 32rpx;
+        left: -16rpx;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+}
+</style>
--- a/src/config/global.config.js
+++ b/src/config/global.config.js
@ -0,0 +1,19 @@
+const arr = ['https://img0.sp77.in/frontimg','https://img1.sp77.in/frontimg', 'https://img2.sp77.in/frontimg', 'https://img3.sp77.in/frontimg']
+const config = {
+	appName: import.meta.env.VITE_APP_NAME,
+	appVersion: '1.0.0',
+	appId: process.env.APP_ID || import.meta.env.VITE_APP_ID || 101,
+	appDescription: '',
+	appDownloadUrl: import.meta.env.VITE_APP_DOWNLOAD_URL,
+	// appImagePrefix: 'https://storage.googleapis.com/baowang-static/h5-images/v2/' + process.env.APP_THEME,
+	// appImageStartPrefix: 'https://storage.googleapis.com/baowang-static/h5-images/app/' + process.env.APP_ID,
+	// appImagePrefix: import.meta.env.VITE_APP_IMAGE_URL + '/images/' + (import.meta.env.VITE_APP_THEME || 'red'),
+	appImagePrefix: () => {
+		return arr[Math.floor(Math.random() * arr.length)] + '/images/' + (import.meta.env.VITE_APP_THEME || 'red')
+	},
+	canvasImage: import.meta.env.VITE_APP_IMAGE_URL + '/images/' + (import.meta.env.VITE_APP_THEME || 'red'),
+	appImageStartPrefix: import.meta.env.VITE_APP_IMAGE_URL + '/images/' + (process.env.APP_ID || import.meta.env.VITE_APP_ID || 101),
+	defaultUrl: import.meta.env.VITE_APP_IMAGE_URL
+}
+
+export default config
--- a/src/config/ip.config.js
+++ b/src/config/ip.config.js
@ -0,0 +1,8 @@
+
+// import globalConfig from '@/config/global.config.js'
+
+const ipConfig = {
+	api_app: import.meta.env.VITE_APP_BASE_URL
+}
+
+export default ipConfig
--- a/src/locales/index.js
+++ b/src/locales/index.js
@ -0,0 +1,27 @@
+import { createI18n } from 'vue-i18n'
+import { useAppStore } from '@/store/useAppStore.js'
+
+import enUS from './lang/en-US.js'
+import zhCN from './lang/zh-CN.js'
+import jaJP from './lang/ja-JP.js'
+import indIND from "./lang/ind-IND/"
+
+const messages = {
+	'en': enUS,
+	'zh': zhCN,
+	'ja': jaJP,
+	'ind': indIND
+}
+
+const i18n = createI18n({
+	locale: uni.getStorageSync('LANGUAGE_STORE_KEY') || process.env.APP_LOCALE || 'en',
+	legacy: false,
+	globalInjection: true,
+	messages: messages
+})
+
+export const setupLocales = (app) => {
+	app.use(i18n)
+}
+
+export default i18n
--- a/src/locales/lang/en-US.js
+++ b/src/locales/lang/en-US.js
@ -0,0 +1,27 @@
+import app from './en-US/app.js'
+import login from './en-US/login.js'
+import constants from './en-US/constants.js'
+import home from './en-US/home.js'
+import mail from './en-US/mail.js'
+import deposit from './en-US/deposit.js'
+import withdraw from './en-US/withdraw.js'
+import earn from './en-US/earn.js';
+import vip from './en-US/vip.js';
+import promo from './en-US/promo.js';
+import search from './en-US/search.js';
+import redeposit from './en-US/redeposit.js'
+
+export default {
+	...app,
+	...login,
+	...constants,
+	...home,
+	...mail,
+	...deposit,
+	...withdraw,
+	...earn,
+	...vip,
+	...promo,
+	...search,
+	...redeposit
+}
--- a/src/locales/lang/en-US/app.js
+++ b/src/locales/lang/en-US/app.js
@ -0,0 +1,67 @@
+export default {
+	app: {
+		language: 'Language',
+		languageChange: 'Change Language',
+		notification: 'Notification',
+		english: 'English',
+		chinese: 'Chinese',
+		tabbar: {
+			home: 'HOME',
+			promo: 'PROMO',
+			vip: 'VIP',
+			earnMoney: 'EARN',
+			account: 'ACCOUNT'
+		},
+		popup: {
+			confirm: 'Confirm',
+			cancel: 'Cancel',
+			tips: 'Tips'
+		}
+	},
+	'pages/home/Home': 'Home',
+	'pages/Login/Login': 'Login',
+	'pages/Login/Register': 'Register',
+	'pages/promo/Promo': 'Promo',
+	'pages/vip/Vip': 'Vip',
+	'pages/earn/Earn': 'Earn Money',
+	'pages/account/Account': 'Account',
+	'pages/mail/Mail': 'Mail',
+	'pages/search/Search': 'Search',
+	'pages/search/SearchResult': 'Search Result',
+	'pages/wallet/Deposit': 'Deposit',
+	'pages/wallet/DepositHistory': 'Deposit History',
+	'pages/wallet/DepositOrderDetail': 'Order Detail',
+	'pages/wallet/DepositUpiDetail': 'UPI',
+	'pages/wallet/DepositImpsDetail': 'IMPS',
+	'pages/wallet/Withdraw': 'Withdraw',
+	'pages/wallet/WithdrawHistory': 'Withdraw History',
+	'pages/wallet/TransferInstructions': 'Transfer Instructions',
+	'pages/webview/GameWeb': 'Game',
+	'pages/account/Profile/Profile': 'Profile',
+	'pages/account/components/EditProfile/EditProfile': 'Edit Profile',
+	'pages/account/Language': 'Language',
+
+
+	'pages/account/BalanceRecords/BalanceRecords': 'Balance Records',
+	'pages/account/GameRecords/GameRecords': 'Game Records',
+	'pages/account/BankCard/BankCard': 'Withdraw Account',
+	'pages/account/BankCard/BankCardList': 'Withdraw Account',
+	'pages/account/PhoneBinding/PhoneBinding': 'Phone Binding',
+	'pages/account/WithdrawalPassword/WithdrawalPassword': 'Withdraw Password',
+	'pages/account/FeedBack/FeedBack': 'Feedback',
+	'pages/account/FAQ/FAQ': 'FAQ',
+	'pages/account/FAQInfo/FAQInfo': 'FAQ Info',
+	'pages/promo/FirstDeposit/FirstDeposit': 'First Deposit',
+	'pages/promo/Ranking/Ranking': 'Ranking',
+	'pages/promo/RebatePromo/RebatePromo': 'Rebate Promo',
+	'pages/promo/CashbackRecord/CashbackRecord': 'Cashback Record',
+	'pages/promo/Signin/Signin': 'Signin',
+	'pages/promo/SignupBonus': 'Sign-up Bonus',
+	'pages/promo/InvitationalRanks': 'Invitational Ranks',
+	'pages/promo/Jili': 'Jili',
+	'pages/wallet/WithdrawWait': "Withdraw",
+	'pages/Login/LoginV2': "Login",
+	'pages/Login/Register': "Register",
+	"pages/Login/ForgetPassword": "Forget Password",
+	'pages/activity/Activity': 'Activity',
+}
--- a/src/locales/lang/en-US/constants.js
+++ b/src/locales/lang/en-US/constants.js
@ -0,0 +1,188 @@
+export default {
+	account: {
+		header: {
+			bankCardTitle: "Account",
+			faqTitle: "FAQ",
+			balanceRecordsTitle: "Balance Records",
+			feedbackTitle: "Feedback",
+			withdrawalPasswordTitle: "Set withdrawal password",
+			gameRecordsTitle: 'Game Records',
+			phoneBindingTitle: "Binding",
+			withdrawalBankTitle: "Withdraw Account"
+		},
+		bindPhone: {
+			title: 'Bind Phone No.',
+			placeholder: 'Enter your phone no.',
+			send: 'Send',
+			verifyPlaceholder: 'Enter the received verification code',
+			bindTip: 'To ensure the security of your funds, please link your mobile number.',
+			confirm: 'Confirm',
+			binded: 'You have already binded this phone number!'
+		},
+		button: {
+			save: "Save",
+			submit: "submit",
+			switchAccount: "SWITCH ACCOUNT",
+			confirm: "Confirm",
+			otp: "OTP",
+			confirmCapital: "CONFIRM"
+		},
+		toast: {
+			copySuccess: "Copied successfully",
+			loading: "Loading。。。。"
+		},
+		noData: {
+			text: "you have no balance records during this period."
+		},
+		config: {
+			deposit: "Deposit",
+			withdraw: "Withdraw",
+			balanceRecords: "Balance Records",
+			gameRecords: "Game Records",
+			firstTitle: 'Profile & Security',
+			helpTitle: "Help & Setting",
+			profile: "Profile",
+			phoneBinding: "Phone Binding",
+			bankCard: "Withdraw Account",
+			withdrawPassword: "Withdraw password",
+			faq: "FAQ",
+			feedback: "Feedback",
+			version: "Version",
+			gift: 'Gifts',
+			service: 'Service'
+		},
+		profileItem: {
+			id: "ID",
+			avatar: "Avatar",
+			nickname: "Nickname",
+			phoneNumber: "Phonenumber",
+			birthday: "Birthday",
+			eamil: "Email",
+			whatsApp: "WhatsApp",
+			facebook: "Facebook",
+			telegram: "Telegram",
+			twitter: "Twitter",
+			setUp: 'set up'
+		},
+		balanceRecordsStatus: {
+			all: "All",
+			bet: "Bet",
+			deposit: "Deposit",
+			withdrawal: "Withdrawal",
+			win: "Win",
+			giftMoney: "Gift money",
+			vipBonus: "VIP Bonus",
+			dailyRebate: "Daily Rebate",
+			depositBonus: "Deposit Bonus",
+			dailyBonus: "Daily Bonus"
+		},
+		month: {
+			January: "January",
+			February: "February",
+			March: "March",
+			April: "April",
+			May: "May",
+			June: "June",
+			July: "July",
+			August: "August",
+			September: "September",
+			October: "October",
+			November: "November",
+			December: "December"
+		},
+
+		bankCard: {
+			placeholder: {
+				accountName: "Please enter account holder name",
+				accountNumber: "Please enter Account Number",
+				accountIfsc: "Please enter IFSC",
+			},
+			tips: {
+				title: "Tips",
+				text: "cards",
+				tipsMain: "will not be supported for cash withdrawals Please confirm your withdraw account information carefully to avoid withdrawal errors.",
+				ifscTips: "IFSC fifth digit must be 0",
+				accountName: "Please enter correct account holder name",
+				accountNumber: "Please enter correct account number",
+			},
+			button: {
+				submit: "SAVE & CONTINUE"
+			},
+			labels: {
+				accountName: "Account Holder Name",
+				accountNumber: "Account Number",
+				accountIfsc: "IFSC",
+				accountType: "Account Type"
+			},
+			text: {
+				accNo: "Acc No.",
+				addBankCardText: "Add New Account",
+				add: "Add",
+				edit: "Edit",
+				delAccount: "Delete Account"
+			}
+		},
+		balanceRecords: {
+			searchFormTitle: "Verification Sent"
+		},
+		feedBack: {
+			label: {
+				yourId: "Your ID",
+				phoneNumber: "Phone number",
+				email: "Email",
+				suggestion: "Suggestion",
+				emailPlaceholder: "Enter Your Email.",
+				phonePlaceholder: "Enter Your Phone.",
+				suggestionPlaceholder: "Your opinion is very important to us, we will listen toall suggestions, and as long as your suggestions are effective, you will receive a cashreward!",
+			},
+			screen: {
+				game: "Game",
+				deposit: "Deposit",
+				withdraw: "Withdraw",
+				vip: "Vip",
+				invite: "Invite",
+				account: "Account",
+				other: "Other",
+			},
+			upto: "Up to",
+			bonus: 'bonus'
+
+		},
+		withdrawalPassword: {
+			label: {
+				password: "Please set your withdraw password",
+				repeatPassword: "Repeat withdraw password",
+				phone: "Please enter your bind phone number",
+				otpPlaceholder: "6-digit OTP"
+			},
+			toast: {
+				phone: "The phone number cannot be empty",
+				withdrawPasswd: "The withdraw passwd cannot be empty",
+				withdrawPasswdRepeat: "Two passwords do not match",
+				verificationCode: "The verification code cannot be empty",
+			},
+		},
+		gameRecords: {
+			status: {
+				all: "All Status",
+				settled: "Settled",
+				unsettled: "Unsettled",
+				cancel: "Cancel"
+			},
+			time: {
+				today: "Today",
+				yesterday: "Yesterday",
+				lastDay: "last 3 days"
+			},
+			betId: "Bet id",
+			vaildBet: "Vaild Bet",
+			wl: "W/L",
+		},
+		phoneBinding: {
+			toast: {
+				phone: "The phone number cannot be empty"
+			}
+		}
+	},
+
+}
--- a/src/locales/lang/en-US/deposit.js
+++ b/src/locales/lang/en-US/deposit.js
@ -0,0 +1,131 @@
+export default {
+	deposit: {
+		title: 'Deposit',
+		title2: 'Order Detail',
+		title3: 'Deposit History',
+		title4: 'UPI',
+		title5: 'IMPS',
+		titleSelfUtr: 'Self-service UTR',
+		onlinePayment: 'E-wallet',
+		transferDeposit: 'Transfer Deposit',
+		crypto: 'Crypto',
+		paymentMethods: 'Payment Methods',
+		depositChannel: 'Deposit Channel',
+		depositEvent: 'Deposit Event',
+		bonus: 'Bonus',
+		depositAmount: 'Deposit Amount',
+		depositTips: 'Deposit Tips',
+		agencyDeposit: 'Agency Deposit',
+		channel: 'Channel',
+		depositService: 'Deposit Service',
+		cryptoCurrency: 'Crypto Currency',
+		getAmount: 'Get Amount',
+		online: 'Online',
+		supportAmount: 'Support Amount',
+		onlineTime: 'Online Time',
+		total: 'Total',
+		orderId: 'OrderId',
+		depositType: 'Deposit Type',
+		creationTime: 'Creation Time',
+		arrivalTime: 'Arrival Time',
+		orderNo: 'Order No',
+		transferAmount: 'Transfer Amount',
+		utr: 'UTR',
+		bankAccountInfo: 'Bank Account Info',
+		accountHolderName: 'Account Holder Name',
+		bankName: 'Bank Name',
+		IFSCCode: 'IFSC Code',
+		accountNo: 'Account No',
+		remark: 'Remark',
+		transferInstructions: 'Transfer instructions',
+		name: 'Name',
+		upi: 'UPI',
+		orderConfirmation: 'Order Confirmation',
+		howtouse: 'How to use?',
+		history: 'History',
+		tab: {
+			bank: 'Bank Payment',
+			wallet: 'Wallet Payment',
+			crypto: 'Crypto'
+		},
+		button: {
+			depositNow: 'Deposit Now',
+			confirm: 'Confirm',
+			transferCompleted: 'Transfer Completed',
+			copy: 'Copy',
+			gotoDepositHistory: 'Go to Deposit History',
+			selfUtrCheck: 'Self-service order only'
+		},
+		
+		status: {
+			succeeded: 'Succeeded',
+			success: 'Success',
+			pending: 'Pending'
+		},
+		payType: {
+			bank: 'Bank Payment',
+			wallet: 'Wallet Payment'
+		},
+		tabs: {
+			tab1: 'Today',
+			tab2: '7 Days',
+			tab3: '30 Days'
+		},
+		
+		message: {
+			nodata: 'No record!',
+			tips1: '1、Each deposit will be credited within 1-5 minutes.',
+			tips2: '2、You can contact customer service at any timeto resolve deposit issues.',
+			tips3: 'After participating in this event, you will need 3 times the stake required to withdraw money',
+			tips4: '7*24 Online Customer Service > ',
+			tips5: 'If you have any deposit problem, you can contact us',
+			tips6: 'Your deposit order has been submitted successfully and will arrive within 1-5 minutes. Please wait patiently..',
+			tips7: 'You can alse check the results in the deposit history or contact customer service.',
+			
+			tipsUtr1: 'Self-service UTR',
+			tipsUtr2: 'up to 30% bonus',
+			tipsUtr3: 'Upload your UTR and we will confrm your order',
+			tipsUtr4: 'This order has applied for self-service',
+			tipsUtr5: 'Details',
+			
+			history1: 'This order will be processed within 2-24 hours',
+			
+			tipsDetail1: 'Deposit has not arrived?',
+			
+			tipsImps1: 'In order to improve your deposit experience, it is recommended that you',
+			tipsImps2: 'You can long press the input box to paste the UTR',
+			tipsImps3: '1、Enter the remark in the Comments field when you make a deposit. lf you do not enter the remark, your payment may not be identified orcredited to your account.',
+			tipsImps4: '2、You can contact customer service at any time to resolve deposit issues.',
+			tipsImps5: 'Please enter a 12~sigit UTR',
+			
+			popupTip: 'If your transfer amount is inconsistent with the submitted amount, it will not arrive in time. If you have any questions, please contact customer service'
+		},
+		
+		utrPage: {
+			text1: 'In order to process your deposit order faster, we provide a self-service entrance.',
+			text2: 'If your order has not yet arrived, you can directly provide the UTR and payment screenshot.',
+			title1: 'Self Service Bonus',
+			title2: 'Operating procedures',
+			text3: 'Every 6 hours until the UTR and screenshot are successfully submitted, 1% of the deposit amount will be given, up to 30%, and the reward will be issued together with the deposit.',
+			text4: '1. Find your order in the deposit history and click on the order to enter the details page.',
+			text5: '2. Click the self-service entrance at the bottom of the details page.',
+			text6: '3. Upload your UTR and payment screenshot on the web page, We will deal with your problem as soon as possible.',
+			text7: '4. You can check the processing progress at any time by clicking on the self-service entrance of this order.',
+			text8: '5. We will notify you of the order processing results via inbox.',
+		},
+		
+		toast: {
+			text1: 'Please input deposit amount!',
+			text2: 'Deposit amount must during',
+			text3: 'Please input UTR!',
+			text4: 'Copy Success',
+			text5: 'You still have',
+			text6: 'orders being processed. Please try again later.',
+		},
+		
+		closePopup: {
+			text: 'Your deposit function has been closed, please contact customer service',
+			confirm: 'Contact Customer Service'
+		}
+	}
+}
--- a/src/locales/lang/en-US/earn.js
+++ b/src/locales/lang/en-US/earn.js
@ -0,0 +1,98 @@
+export default {
+	earn: {
+		header: {
+			myRewards: "My rewards",
+			rules: "Rules"
+		},
+		toast: {
+			loading: "Loading...."
+		},
+		footer: {
+			myLink: "MY LINK",
+			copy: "COPY",
+			share: "SHARE"
+		},
+		rule: {
+			cashBonus: "Cash Bonus",
+			cashBalance: "Cash Balance",
+			text: "of his bet to your ",
+			tipOneProblem: "1. How to develop my downline?",
+			tipOneText: "Download the game through the link you shared, register an account, and participate in any game, you can successfully become a lower-level user and get rewards.",
+			tipTwoProblem: "2. How to claim my reward?",
+			tipTwoText: "On the My Reward page, click claim to get the reward, which will be issued in real time.",
+			tipThreeProblem: "3. How can you make more money?",
+			tipThreeText: "Develop more downline users and encourage your downline users to develop more downline users. You will get a lot of money every moment!",
+
+		},
+		myRewards: {
+			rewardToday: "Reward Today",
+			totalRewards: "Total Rewards",
+			numberOfInviters: "Number of Inviters",
+			amountAvailable: "Amount available",
+			data: "Data",
+			rewards: "Rewards",
+			claim: "Claim"
+		},
+		"tab1": "Home",
+		"tab2": "My Reward",
+		"tab3": "My Teams",
+		"tab4": "Rules",
+		home: {
+			topDes: "Invite friends to participate in the game or participate in distribution, you will get rewards. The bigger your team is, the more rewards you will get.",
+			myAgentLevel: 'My Agent Level',
+			level: "Level",
+			myTeam: "My Team",
+			today: "Today",
+			myRebateRatio: "My Rebate Radio",
+			myDirect: "My Direct",
+			claim: "Claim",
+			date: "Date",
+			reward: "Reward",
+			userId: "ID",
+			team: "Team",
+			direct: "Direct",
+			allDirect: "All Direct",
+			placeholder1: "User ID to search",
+			teamPerformance: "Team performance",
+			directPerformance: "Direct performance",
+			item1Des: "Today's team performance",
+			item2Des: "Today's direct performance",
+			item3Des: "Reward Total",
+			item4Des: "Reward Today",
+			item5Des: "Commissions Avilable",
+			relation: "Relation",
+			commission: "Commission",
+			commissionTable: "Commission Table",
+			rules: "Rules",
+			commission1: "1. A's  Valid bets * Your Commission Rate.",
+			commission2: "2. A's Performance *(Your Commission Rate- A's Commission Rate.",
+			rules1: "1. Share your link with your friends, and you can get commissions after they participate in the game and place bets.",
+			rules2: "2. The commission for the day will be issued at 1:30 the next day, and you can claim it on my rewards page.",
+			rules3: "3. The agent level is reset at 0:00 every day, and the commission calculated when issuing rewards is the level before the reset.",
+			rules4: "4. The commissions for different agent levels are different, please check the commission details for details.",
+			rules5: "5. The performance is the sum of the valid bets of all subordinates.",
+			tableTitle1: "Agent Level",
+			tableTitle2: "Performance range",
+			tableTitle3: "Commission Rate",
+
+			levelTip1: "1. The agent level is calculated in real time based on the team performance of the day. The rules are shown in the commission table.",
+			levelTip2: "2. The agent level is reset at 00:00 every day.",
+			levelTip3: "3. The commission for the day will be calculated based on the commission ratio corresponding to the agent level.",
+
+			teamTodayTip1: "1. My team refers to my subordinates, and my subordinates' subordinates... the total number of all people.",
+			teamTodayTip2: "2. (Today) means the number of people added to the team today.",
+
+			directTodayTip1: "1. My direct subordinates refer to my direct subordinates",
+			directTodayTip2: "2. (Today) refers to the number of direct subordinates added today",
+
+			teamPerformanceTip1: "Today's team performance means the total valid bets of all members of the team (excluding yourself) today.",
+
+			directPerformanceTip1: "Today's direct performance means the total valid bets of all direct subordinates in the team today (excluding yourself)",
+
+			rewardTotalTip1: "Rewards total refer to the sum of all distribution rewards, including unclaimed rewards",
+			
+			rewardTodayTip1: "Rewards today refer to the total of today's distribution rewards, including unclaimed rewards"
+		}
+	}
+
+}
--- a/src/locales/lang/en-US/home.js
+++ b/src/locales/lang/en-US/home.js
@ -0,0 +1,15 @@
+export default {
+	home: {
+		allgames: 'All Games',
+		recent: 'Recent',
+		favorite: 'Favorite',
+		withdraw: 'Withdraw',
+		deposit: 'Deposit',
+		download: 'Download',
+		login: 'Login',
+		register: 'Register',
+		award: 'Get',
+		downloadSlogan: 'Download the App and bind your phone',
+		popTip: 'Don\'t show today again'
+	}
+}
--- a/src/locales/lang/en-US/login.js
+++ b/src/locales/lang/en-US/login.js
@ -0,0 +1,52 @@
+export default {
+	login: {
+		header: {
+			title: "Login",
+			text: "Sign in to continue.",
+			Password: "Password",
+			OTP: "OTP",
+			or: "OR",
+			phone: "Phone",
+			oneClick: "One Click",
+			register: "Register",
+			registerSuccess: "Registration success！",
+			changePassword: "Change Password",
+			forgetPassword: "Forget Password"
+		},
+		placeholder: {
+			phone: "Enter Your Phone Number",
+			otp: "6-digit OTP",
+			password: "Password",
+			passwordLogin: "Phone,ID",
+			loginOtp: "6-digit OTP"
+		},
+		button: {
+			submit: "LOGIN",
+			otp: "OTP",
+			send: 'SEND',
+			register: "Register",
+			forgetPassword: "Forget password?",
+			share: "Share",
+			copy: "Copy",
+			clickSubmit: "SUBMIT"
+		},
+		tips: {
+			checkText: "I agree all statements in Terms and Conditions",
+			rgisterTipText: "I certify that l am at least 18 years old and agree to theterms and conditions outlined in the ",
+			termsAndConditions: "“Terms & Conditions”",
+			oneClickTips: "Click the button below to quickly register. You can add your mobile phone number, email and password in the personal center.",
+			changePasswordTipTitle:"Tips:",
+			changePasswordTipText: "For the security of your data, you need to bind a mobile phone number to set a password"
+		},
+		toast: {
+			phone: "The phone number cannot be empty",
+			oth: "The OTP cannot be empty",
+			idOrPhone: "The phone number or ID cannot be empty",
+			password: "The Password cannot be empty",
+		},
+		label: {
+			userId: "Your User ID：",
+			password: "Your Password：",
+		}
+	}
+}
--- a/src/locales/lang/en-US/mail.js
+++ b/src/locales/lang/en-US/mail.js
@ -0,0 +1,30 @@
+export default {
+	mail: {
+		title: 'InBox',
+		title2: 'Mail details',
+		dearPlayer: 'Dear player',
+		message: {
+			nodata: 'There are currently no messages for you.',
+			noMail: 'No mail',
+		},
+		button: {
+			delete: 'Delete',
+			confirm: 'Confirm',
+			receive: 'Receive',
+		},
+		detailTitle: 'Mail details',
+		deleteRead: 'Delete read',
+		receiveAll: 'Receive all',
+		modal: {
+			title: 'Tip',
+			content: "Confirm whether to delete all mails",
+			confirm: 'Confirm',
+			cancel: 'Cancel'
+		},
+		tipPre: 'Send you',
+		tipEnd: 'free bonus!',
+		mailDetail: {
+			title: 'Mail details'
+		}
+	}
+}
--- a/src/locales/lang/en-US/promo.js
+++ b/src/locales/lang/en-US/promo.js
@ -0,0 +1,288 @@
+export default {
+	promo: {
+		header: {
+			promo: "Promo",
+			community: "Community",
+			promoCode: "Promo Code",
+			firstDeposit: "First deposit",
+			ranking: "Ranking",
+			rules: "Rules",
+			myReward: "My reward",
+			siginTitle: "Daily Check In",
+			luckySpin: "Lucky Spin",
+		},
+		activity: {
+			btnTip: "Choose your reward",
+			inviteText: 'Invite Friends to Earn Money!',
+			endTime: 'End Time',
+			recordTitle: 'Record',
+			playerName: 'Player',
+			awardTitle: 'Congratulations!',
+			ok: 'OK',
+			prev: 'Prev',
+			next: 'Next',
+			noChance: 'No more chances to spin',
+			tips: 'Tips',
+			cashout: 'Cash Out',
+			noPrize: 'The amount does not meet the conditions for collection.'
+		},
+		pop: {
+			title: 'History',
+			lastDay: 'Last Day',
+			lastWeek: 'Last Week',
+			lastMonth: 'Last Month',
+			columnRank: 'Rank',
+			columnPhone: 'Phone No.',
+			columnBet: 'Total Bet',
+			columnReward: 'Rewards',
+			eventAward: 'Event Award:',
+			dailyList: 'Daily List',
+			weeklyList: 'Weekly List',
+			monthlyList: 'Monthly List',
+		},
+		public: {
+			rank: "Rank",
+			bonus: "Bonus",
+			bet: "Bet",
+			activityAward: "Activity Award",
+			depoistAmoout: "Depoist amount",
+			rewardAmoout: "Reward amount",
+			requiredDeposit: "Required deposit",
+			requiredBets: "Required bets",
+			day: "Day",
+			bonusContent: "Bonus Content",
+			checkText: "Don't show again today",
+		},
+		button: {
+			confirm: "Confirm",
+			joinNow: "Join now",
+			contatToClaim: "Contat To Claim",
+			claim: "Claim",
+			claimAll: "Claim All",
+			betNow: "Place bet now",
+			despiteNow: "Despite Now",
+			details: "Details",
+			eventDetails: "Event Details"
+		},
+		toast: {
+			loading: "Loading....",
+			receiveSuccessfully: "Receive successfully"
+		},
+		noData: {
+			myRewardText: "You haven't received any ranking rewards yet, so go bet and participate inthe event.",
+			leaderboardText: "There is no ranking information for the previous issue."
+		},
+		rebatePromo: {
+			title: "35% deposit cashback",
+			ninmiumDeposit: "ninmium deposit",
+			bonus: "bonus",
+			tumover: "Tumover"
+		},
+		leaderboard: {
+			dailyList: "Daily list",
+			weeklyList: "Weekly list",
+			monthlyList: "Monthly list",
+			phone: "Phone number",
+			totalBet: "Total Bet",
+			history: "History",
+			lastDay: "Last day",
+			lastWeekly: "Last Weekly",
+			lastMonthly: "Last Monthly",
+			phoneNo: "Phone No",
+			award: "Award",
+			betRate: 'of total bets by all players',
+			myBets: 'My Bets',
+			myReward: 'My Reward',
+			noRank: 'No ranked',
+			left: 'Rank Left',
+			noRankDesc: 'You haven\'t received any ranking rewards yet, so go bet and participate in the event.'
+		},
+		community: {
+			oneTitle: "Lots of rewards",
+			oneContent: "The community will hold red envelope rain events from time to time.If you join the community you can participate in events for freeA single reward can be up to a maximum of",
+			twoTitle: "More event information",
+			twoContent: "The latest activities and consultations will be pushed to the community as soon as possible.Join the community, get the latest information, and be the first to participate in events",
+			threeTitle: "More community events",
+			threeContent: "We will hold exclusive community activities, such as community game rankings, community task activities, etc. There are many free activities waiting for you to participate",
+			foreTitle: "More services",
+			foreContent: "Join the community to get more service support, and community managers can better answer your questions.",
+		},
+		firstDeposit: {
+			activityConditions: "Activity Conditions",
+			activityConditionsText: "For the first deposit into an account, the accountmust be b ound to a mobile phone number.",
+			rewardDistribution: "Reward distribution",
+			rewardDistributionText: "The bonus will be distributed through the InBox. lfthe mobile phone number is not bound, please goto the InBox after binding the mobile phonenumber to claim the reward.",
+			activityTerms: "Activity Terms",
+			activityTermsText1: "1. The bonus given in this event (capital + bonus)must be wagered {0} times to be withdrawn.",
+			activityTermsText2: "2. Players opening multiple or fraudulent accounts will disqualified from the promotion. In addition，the remaining amount could be forfeited, and the report shall be frozen.",
+			activityTermsText3: "3. This promotion cannot be used with any promotional offer. Draw, refunded, void bets on two opposite sides and bets on non-participating products will not count as valid turnover.",
+			activityTermsText4: "4. This event is only for the account owner'snormal manual operations, renting, using cheatingsoftware, bots, gambling between differentaccounts, mutual manipulation, arbitrage, APIsprotocols, exploiting vulnerabilities, group control,or other technical means are prohibited, otherwiserewards may be canceled or deducted, or accountsmay be frozen or evenblacklisted；",
+			activityTermsText5: "5. In order to avoid differences in text understanding, the platform will retain the final interpretation of this event.",
+		},
+		rankRule: {
+			activityRules: "Activity  Rules",
+			activityRulesText1: "1. The bonus given in this event (capital + bonus)must be wagered {0} times to be withdrawn.",
+			activityRulesText2: "2. Players opening multiple or fraudulent accounts will disqualified from the promotion. In addition，the remaining amount could be forfeited, and the report shall be frozen.",
+			activityRulesText3: "3. This promotion cannot be used with any promotional offer. Draw, refunded, void bets on two opposite sides and bets on non-participating products will not count as valid turnover.",
+			activityRulesText4: "4. This event is only for the account owner'snormal manual operations, renting, using cheatingsoftware, bots, gambling between differentaccounts, mutual manipulation, arbitrage, APIsprotocols, exploiting vulnerabilities, group control,or other technical means are prohibited, otherwiserewards may be canceled or deducted, or accountsmay be frozen or evenblacklisted；",
+			activityRulesText5: "5. In order to avoid differences in text understanding, the platform will retain the final interpretation of this event.",
+			activityRulesText6: "6. In order to avoid differences in text understanding, the platform will retain the final interpretation of this event."
+		},
+		rebateRules: {
+			title: "How to participate:",
+			rebateRulesText1: "1、Everyday single deposit minimum of 500 or Above will bee claimed as up to 30%bonus.",
+			rebateRulesText2: "2、 After the deposit, contact our customer24/7support to apply.",
+			rebateRulesText3: "3、 Maximum bonus:30000lNR per day.",
+			title2: "Terms and conditions:",
+			rebateRulesText4: "1、All player must provide their mobil numberand bank account details before applving.Phone number, lP address and bankaccountdetail must match their region, and anyviolationwill-invalidate his: bonus or proht.",
+			rebateRulesText5: "2、Players opening multiple or fraudulentaccounts wil disqualifed frothe promotion. lnaddition, the remaining amount could beforfeitedand the report shall be frozen.",
+			rebateRulesText6: "3、 This promotion cannot conjunction be usedwith any promotional offer. Draw ,refundedvoidbets on two opposite sidesand bets onnon-participating products will not count as validtumnover.",
+			rebateRulesText7: "4、Please be sure to read these terms andconditions carefully before you participate inthis activity."
+		},
+		signinRules: {
+			title: "Event rules",
+			signinRulesText1: "1、Everyday single deposit minimum of 500 or Above will bee claimed as up to 30%bonus.",
+			signinRulesText2: "2、 After the deposit, contact our customer24/7support to apply.",
+			signinRulesText3: "3、 Maximum bonus:30000lNR per day."
+		},
+		popup: {
+			upRebateText: "Every deposit that meets the minimum amount can earn cash back,",
+			upTo: "up to",
+			rankText: "Place a bet and join the rankings for",
+			rankFree: "free",
+			rankReward: "Rewards",
+			communityTitle: "The bonus up to",
+			communityText: "Join the telegramcommunity to participate in the red envelope rain event for",
+			communityTip: "I agree all statements in Terms and Conditions",
+			signinText: "Complete daily check-in today to get",
+			tapClose: 'TAP TO CLOSE'
+		},
+		promoCodePlaceholder: "Please enter the Promo Code",
+		signup: {
+			title: "Sign-up Bonus",
+			eventCountdown: "Event countdown",
+			task: "Task",
+			cliam: "Cliam",
+			totalRollover: "Total Rollover",
+			ruleTitle: "Event Rules",
+			rule1: "1. Complete the above four tasks to get rewards.Click the button above to receive the rewards.",
+			rule2: "2. The event is only open to users who have registered within 24 hours.",
+			rule3: "3. The reward will be retained for a maximum of 7 days, after which it will no longer be available for redemption",
+			termTitle: "Terms & Conditions",
+			term1: "1. All player must provide their mobil number and bank account details before applving. Phone number, IP address and bank accountdetail must match their region, and any violation will invalidate his bonus or profit.",
+			term2: "2. Players opening multiple or fraudulent accounts wil disqualifed from the promotion. In addition, the remaining amount could be forfeitedand the report shall be frozen.",
+			term3: "3. This promotion cannot conjunction be used with any promotional offer. Draw ,refundedvoid bets on two opposite sides and bets onnon-participating products will not count as valid turnover.",
+			term4: "4. Please be sure to read these terms and conditions carefully before you participate in this activity.",
+			toast1: 'After completing all tasks, you can receive rewards'
+		},
+		jili: {
+			title: "JiLi",
+			userRequirements: "User Requirements",
+			getGiftCode: "Get Gift Code",
+			copy: "Copy",
+			suportedGamesTitle: "Gift Code supported games",
+			ruleTitle: "EVENT RULES",
+			rule1: "After receiving the Gift code, please  enter the corresponding",
+			rule2: "1.Goto settings>gifticon>enter giftcode",
+			rule3: "2.One gift code can use once per account",
+			rule4: "3.enter my code and got free spin!",
+			termTitle: "TERMS & CONDITIONS",
+			term1: "1. All player must provide their mobil number and bank account details before applving. Phone number, IP address and bank accountdetail must match their region, and any violation will invalidate his bonus or profit.",
+			term2: "2. Players opening multiple or fraudulent accounts wil disqualifed from the promotion. In addition, the remaining amount could be forfeitedand the report shall be frozen.",
+			term3: "3. This promotion cannot conjunction be used with any promotional offer. Draw ,refundedvoid bets on two opposite sides and bets onnon-participating products will not count as valid turnover.",
+			term4: "4. Please be sure to read these terms and conditions carefully before you participate in this activity.",
+			popbtn: "Get it Now",
+			poptip: "Don't show today",
+			popdes1: "You have a",
+			popdes2: "Free",
+			popdes3: "gift code to receive",
+			require1: '1. Users registered after',
+			require2: '2. Total deposit reach',
+			require3: '3. Need to',
+			require4: 'bind mobile phone number'
+		},
+		invitationRanks: {
+			tab1: 'Home',
+			tab2: 'Rank',
+			tab3: 'Myrewards&Teams',
+			tab4: 'Rules',
+			eventRewards: 'Event Rewards',
+			commission: 'Commission',
+			ranking: 'Ranking',
+			rank: 'Rank',
+			rewards: 'Rewards',
+			times: 'times',
+			teams: 'Teams',
+			rulsTip1: ' Reward Rollover',
+			rulsTipTitle1: 'Event Time:',
+			rulsTipTitle2: 'Event Rules:',
+			rulsTipTitle3: 'Terms & Conditions ',
+			"rulsTipDes1-1": '1. You must bind your mobile phone to participate in the  event',
+			"rulsTipDes1-2": '2. The user you invite must deposit a certain amount to become a valid invitation',
+			"rulsTipDes1-3": '3. The rewards will be distributed via Inbox at 5:00 GMT+5.5 in the morning of the next day after the event ends.',
+			"rulsTipDes2-1": '1. All player must provide their mobil number and bank account details before applving. Phone number, IP address and bank accountdetail must match their region, and any violation will invalidate his bonus or profit.',
+			"rulsTipDes2-2": '2. Players opening multiple or fraudulent accounts wil disqualifed from the promotion. In addition, the remaining amount could be forfeitedand the report shall be frozen.',
+			"rulsTipDes2-3": '3. This promotion cannot conjunction be used with any promotional offer. Draw ,refundedvoid bets on two opposite sides and bets onnon-participating products will not count as valid turnover.',
+			"rulsTipDes2-4": '4. Please be sure to read these terms and conditions carefully before you participate in this activity.',
+			rules: 'Rules',
+			inviteLink: 'Invite Link',
+			inviteCode: 'Invite Code',
+			copy: 'Copy',
+			share: 'Share',
+			myRewards: 'My rewards',
+			phoneNumber: 'Phone Number',
+			invite: 'Invite',
+			bindToJoin: 'Bind to join',
+			homeText1: 'Invitation Courtesy',
+			homeText2: 'Invite your friends to get rewards',
+			homeText3: 'UP to',
+			homeText4: 'per user',
+			homeText5: 'During the event, you will receive a reward for every 2 validusers you invite. The more people you invite, the higher thereward.',
+			homeText6: 'Invitation Ranking',
+			homeText7: 'Join Invitation Rank List',
+			homeText8: 'Top Rewards',
+			homeText9: 'Invite valid users to join the invitation rankings. The higherthe ranking, the higher the reward.',
+			homeText10: 'The event has ended, please go to claim your  rewards.',
+			teamText1: 'Tolat invitation user',
+			teamText2: 'Valid invitation user',
+			teamText3: 'Total Rewards',
+			teamText4: 'Underreview',
+			teamText5: 'You will get',
+			teamText6: 'by inviting',
+			teamText7: 'Show only valid invitations',
+			teamText8: 'Invite Time',
+			teamText9: 'Deposit',
+			teamText11: 'Status',
+			teamText10: 'more valid users.',
+			all: 'All',
+			underReview: 'Under Review',
+			pass: 'Pass',
+			claimable: 'Claimable',
+			reClaim: 'ReClaim',
+			claim: 'Claim'
+		},
+		turnplate: {
+			yourBonus: 'Your bonus:',
+			claim: 'Claim',
+			share: 'Share',
+			rules:'Rules',
+			winning: 'Winning announcement',
+			myRecord: 'My record',
+			phone: 'Phone',
+			bonus: 'Bonus',
+			time: 'Time',
+			claimTime: 'ClaimTime'
+		},
+		tgReward: {
+			title: 'Reward redemption code',
+			descTitle: 'Follow official channel to get the code',
+			inputTitle: 'Hi ,we have a gift for you',
+			placeholder: 'Please enter the gift code',
+			amountLabel: 'Bonus amount:',
+			btnConfirm: 'Confirm',
+			btnTg: 'Telegram channel',
+			joinDesc1: 'Join ' + import.meta.env.VITE_APP_NAME + '.GAME Official Channel:',
+			joinDesc2: 'Get daily bonus codes ranging from ₹ 7 to ₹ 7777! Invite your friends to join and claim your bonus together!'
+		}
+	}
+}
--- a/src/locales/lang/en-US/redeposit.js
+++ b/src/locales/lang/en-US/redeposit.js
@ -0,0 +1,21 @@
+export default {
+    redeposit: {
+        slogan1: 'Complete the deposit task to participate in the wheel',
+        slogan2: 'spin activity and win up to ₹3,777.',
+        depositNow: 'Deposit Now',
+        upto: 'Up To',
+        myReward: 'My Rewards',
+        title: 'Activity rules',
+        history: 'My Rewards',
+        row1: 'The event includes four types of carousels: silver, gold, diamond and special. Unlock different levels of carou- sels by recharging, the higher the level, the more gener- ous the rewards.',
+        row2: 'Each draw has a 100% chance to get rewards.',
+        row3: 'All rewards will be deposited directly into your wallet.',
+        row4: 'Bonus requires 1 turnaround before withdrawal.',
+        row5: `The right to interpret the activity belongs to ${import.meta.env.VITE_NAME_UPPER}, if you have any questions, please contact customer service.`,
+        rewards: 'Total Rewards',
+        tip: 'Comp the first three wheel tasks to unlock specal wheel!',
+        supreme: 'Complete the first three wheel tasks to unlock supreme wheel!',
+        noRecord: 'No Record',
+        noCount: 'you need to deposit before spinning the wheel~'
+    }
+}
--- a/src/locales/lang/en-US/search.js
+++ b/src/locales/lang/en-US/search.js
@ -0,0 +1,22 @@
+export default {
+	search: {
+		title: 'Search',
+		searchGames: 'Search Games',
+		searchResult: 'Search Result',
+		popularSearches: 'Popular Searches',
+		recommentGames: 'Recomment Games',
+		recentlySearches: 'Recently Searches',
+		
+		
+		tabs: {
+			tab1: 'All',
+			tab2: 'Hot',
+			tab3: 'Recent'
+		},
+		
+		message: {
+			nodata: 'There are no search results for',
+			norecord: 'No Records!'
+		}
+	}
+}
--- a/src/locales/lang/en-US/vip.js
+++ b/src/locales/lang/en-US/vip.js
@ -0,0 +1,22 @@
+export default {
+	vip: {
+		VIP: "VIP",
+		relegationSuccessfuIl: "Relegation successfuIl",
+		thisMonth: "this month",
+		continueToDeposit: "Continue to deposit",
+		toReach: "to reach",
+		deposit: "Deposit",
+		privileges: "Privileges",
+		upGradeBouns: "UpGrade Bouns",
+		betRebate: "Bet Rebate",
+		weeklyBouns: "Weekly Bouns",
+		birthdayBouns: "Birthday Bouns",
+		withdrawDailyLimited: "Withdraw Daily Limited",
+		withdrawFee: "Withdraw Fee",
+		withdrawDailyTimes: "Withdraw Daily Times",
+		relegationRequirements: "Relegation requirements",
+		VIPCustomerService: "VIP Customer Service",
+		exclusiveforVlP: "Exclusive for VlP",
+		customer: "Contact",
+	}
+}
--- a/src/locales/lang/en-US/withdraw.js
+++ b/src/locales/lang/en-US/withdraw.js
@ -0,0 +1,98 @@
+export default {
+	withdraw: {
+		title: 'Withdraw',
+		title2: 'Withdraw History',
+		bankAccount: 'Bank Account',
+		walletAddr: 'Wallet Address',
+		changeBankAccount: "Change Account",
+		edit: 'Edit Account',
+		walletEdit: 'Edit Wallet',
+		withdrawAmount: 'Withdraw Amount',
+		addNewAccount: 'Add New Account',
+		myBalance: 'My balance',
+		total: 'Total',
+		orderId: 'OrderId',
+		bindWallet: 'Bind Wallet',
+		walletLink: 'Wallet Address',
+		linkPlaceholder: 'Please enter the wallet address',
+		bankLabel: 'Bank Account',
+		walletLabel: 'Wallet Address',
+		posterText: 'Get INRUPAY Wallet',
+		mesaage: {
+			nodata: 'No record!'
+		},
+
+		input: {
+			placeholder: 'Withdraw Amount'
+		},
+
+		button: {
+			withdraw: 'WITHDRAW',
+			cancel: 'Cancel',
+			goToSetPassword: 'Go to set password',
+			addNewAccount: 'Add New Account'
+		},
+
+		tips: {
+			title: 'Tips',
+			tips1: 'Under normal circumstances, the withdrawal amount will arrive in your account in about',
+			tips2: '2 hours',
+			tips3: ', and the longest time will not exceed',
+			tips4: '24 hours'
+		},
+
+		items1: 'Remaining withdrawal Limit',
+		items2: 'VIP Daily Limit',
+		items3: 'Wager requirement',
+		items4: 'Remaining withdrawals times today',
+
+		setPasswordPopup: {
+			title: 'Set Withdrawal Password',
+			des: 'For the security of your account, please set awithdrawal password first.'
+		},
+
+		bankCardPopup: {
+			title: 'Bank Account Required',
+			des: 'To be able to withdraw，please，add a bank account first.'
+		},
+
+		configPopup: {
+			title: 'Withdrawal tips',
+			orderNumber: 'Order Number',
+			arrivalAmount: 'Arrival Amount',
+			total: 'Total',
+			withdrawAmount: 'Withdraw Amount',
+			serviceCharege: 'Service Charge',
+			yourBankAccount: 'Your account',
+			chooseBankAccount: 'Choose Withdraw Account',
+			withdrawPassword: 'Withdrawal password',
+
+			des1: 'Withdraw fee is',
+			des2: '(Comprehensive personal income tax)',
+
+			placeHolder: 'Please enter the withdrawal password'
+		},
+
+		toast: {
+			text1: 'Please enter your withdrawal password',
+			text2: 'Application successful, please wait',
+			text3: 'The withdrawal amount cannot be empty',
+			text4: 'You still have ',
+			text5: ' rupees left tobet in the game,'
+		},
+
+		tabs: {
+			tab1: 'Today',
+			tab2: '7 Days',
+			tab3: '30 Days'
+		},
+		waitPage: {
+			btnTetx: "BACK TO ACCOUNT",
+			tipTetx: "Withdraw in progress"
+		},
+		bindWallet: 'Bind Wallet',
+		walletLink: 'Wallet Address',
+		getTitle: 'Get wallet address:',
+		linkPlaceholder: 'Enter the wallet address,single withdrawal >3000 per reward ₹77-7777'
+	}
+}
--- a/src/locales/lang/ind-IND.js
+++ b/src/locales/lang/ind-IND.js
@ -0,0 +1,25 @@
+import app from './ind-IND/app.js'
+import login from './ind-IND/login.js'
+import constants from './ind-IND/constants.js'
+import home from './ind-IND/home.js'
+import mail from './ind-IND/mail.js'
+import deposit from './ind-IND/deposit.js'
+import withdraw from './ind-IND/withdraw.js'
+import earn from './ind-IND/earn.js';
+import vip from './ind-IND/vip.js';
+import promo from './ind-IND/promo.js';
+import search from './ind-IND/search.js'
+
+export default {
+    ...app,
+    ...login,
+    ...constants,
+    ...home,
+    ...mail,
+    ...deposit,
+    ...withdraw,
+    ...earn,
+    ...vip,
+    ...promo,
+    ...search
+}
--- a/src/locales/lang/ind-IND/app.js
+++ b/src/locales/lang/ind-IND/app.js
@ -0,0 +1,65 @@
+export default {
+	app: {
+		language: 'Bahasa',
+		languageChange: 'Ubah Bahasa',
+		notification: 'Notification',
+		english: 'English',
+		chinese: 'Chinese',
+		tabbar: {
+			home: 'Home',
+			promo: 'Promo',
+			vip: 'Vip',
+			earnMoney: 'Menghasilkan uang',
+			account: 'Akun'
+		},
+		popup: {
+			confirm: 'Mengonfirmasi',
+			cancel: 'Batalkan',
+			tips: 'Tips'
+		}
+	},
+	'pages/home/Home': 'Home',
+	'pages/Login/Login': 'Masuk',
+	'pages/Login/Register': 'Daftar',
+	'pages/promo/Promo': 'Promo',
+	'pages/vip/Vip': 'Vip',
+	'pages/earn/Earn': 'Menghasilkan uang',
+	'pages/account/Account': 'Akun',
+	'pages/mail/Mail': 'Surat',
+	'pages/search/Search': 'Mencari',
+	'pages/search/SearchResult': 'Hasil pencarian',
+	'pages/wallet/Deposit': 'Setoran',
+	'pages/wallet/DepositHistory': 'Riwayat Deposit',
+	'pages/wallet/DepositOrderDetail': 'Detail pesanan',
+	'pages/wallet/DepositUpiDetail': 'UPI',
+	'pages/wallet/DepositImpsDetail': 'IMPS',
+	'pages/wallet/Withdraw': 'Menarik',
+	'pages/wallet/WithdrawHistory': 'Tarik Riwayat',
+	'pages/wallet/TransferInstructions': 'Instruksi Transfer',
+	'pages/webview/GameWeb': 'Permainan',
+	'pages/account/Profile/Profile': 'Profil',
+	'pages/account/components/EditProfile/EditProfile': 'Sunting Profil',
+	'pages/account/Language': 'Bahasa',
+
+
+	'pages/account/BalanceRecords/BalanceRecords': 'Catatan Saldo',
+	'pages/account/GameRecords/GameRecords': 'Catatan Permainan',
+	'pages/account/BankCard/BankCard': 'Tarik Akun',
+	'pages/account/BankCard/BankCardList': 'Tarik Akun',
+	'pages/account/PhoneBinding/PhoneBinding': 'Pengikatan Telepon',
+	'pages/account/WithdrawalPassword/WithdrawalPassword': 'Tarik Kata Sandi',
+	'pages/account/FeedBack/FeedBack': 'Masukan',
+	'pages/account/FAQ/FAQ': 'Pertanyaan Umum',
+	'pages/account/FAQInfo/FAQInfo': 'FAQ',
+	'pages/promo/FirstDeposit/FirstDeposit': 'Setoran Pertama',
+	'pages/promo/Ranking/Ranking': 'Peringkat',
+	'pages/promo/RebatePromo/RebatePromo': 'Promo Rabat',
+	'pages/promo/CashbackRecord/CashbackRecord': 'Catatan Uang Kembali',
+	'pages/promo/Signin/Signin': 'Masuk',
+	'pages/promo/SignupBonus': 'Bonus Pendaftaran',
+	'pages/promo/Jili': 'Jili',
+	'pages/wallet/WithdrawWait': "Withdraw",
+	'pages/Login/LoginV2': "Masuk",
+	'pages/Login/Register': "Daftar",
+	"pages/Login/ForgetPassword": "Lupa Password"
+}
--- a/src/locales/lang/ind-IND/constants.js
+++ b/src/locales/lang/ind-IND/constants.js
@ -0,0 +1,183 @@
+export default {
+	account: {
+		header: {
+			bankCardTitle: "Akun",
+			faqTitle: "Pertanyaan Umum",
+			balanceRecordsTitle: "Catatan Saldo",
+			feedbackTitle: "Masukan",
+			withdrawalPasswordTitle: "Setel ulang kata",
+			gameRecordsTitle: 'Catatan Permainan',
+			phoneBindingTitle: "Mengikat",
+			withdrawalBankTitle: "Tarik Akun"
+		},
+		bindPhone: {
+			title: 'Bind Phone No.',
+			placeholder: 'Enter your phone no.',
+			send: 'Send',
+			verifyPlaceholder: 'Enter the received verification code',
+			bindTip: 'To ensure the security of your funds, please link your mobile number.',
+			confirm: 'Confirm',
+		},
+		button: {
+			save: "SIMPAN",
+			submit: "Kirim",
+			switchAccount: "GANTI AKUN",
+			confirm: "Mengonfirmasi",
+			otp: "OTP",
+			confirmCapital: "MENGONFIRMASI"
+		},
+		toast: {
+			copySuccess: "Berhasil disalin",
+			loading: "Loading..."
+		},
+		noData: {
+			text: "Anda tidak memiliki catatan saldo selama periode ini."
+		},
+		config: {
+			deposit: "Setoran",
+			withdraw: "Menarik",
+			balanceRecords: "Catatan Saldo",
+			gameRecords: "Catatan Permainan",
+			firstTitle: 'Profil & Keamanan',
+			helpTitle: "Bantuan & Pengaturan",
+			profile: "Profil",
+			phoneBinding: "Pengikatan Telepon",
+			bankCard: "Tarik Akun",
+			withdrawPassword: "Tarik Kata Sandi",
+			faq: "Pertanyaan Umum",
+			feedback: "Masukan",
+			version: "Versi",
+		},
+		profileItem: {
+			id: "ID",
+			avatar: "Avatar",
+			nickname: "Nama panggilan",
+			phoneNumber: "Nomor telepon",
+			birthday: "Hari ulang tahun",
+			eamil: "Email",
+			whatsApp: "WhatsApp",
+			facebook: "Facebook",
+			telegram: "Telegram",
+			twitter: "Twitter",
+			setUp: 'mempersiapkan'
+		},
+		balanceRecordsStatus: {
+			all: "Semua",
+			bet: "Taruhan",
+			deposit: "Setoran",
+			withdrawal: "Penarikan",
+			win: "Menang",
+			giftMoney: "Hadiah uang",
+			vipBonus: "Bonus VIP",
+			dailyRebate: "Rabat Harian",
+			depositBonus: "Bonus isi ulang",
+			dailyBonus: "Bonus Harian"
+		},
+		month: {
+			January: "Januari",
+			February: "Februari",
+			March: "Berbaris",
+			April: "April",
+			May: "Mungkin",
+			June: "Juni",
+			July: "Juli",
+			August: "Agustus",
+			September: "September",
+			October: "Oktober",
+			November: "November",
+			December: "Desember"
+		},
+
+		bankCard: {
+			placeholder: {
+				accountName: "Silakan Masukkan Nama Pemilik Rekening",
+				accountNumber: "Silakan Masukkan Nama Pemilik Rekening",
+				accountIfsc: "",
+			},
+			tips: {
+				title: "Tips",
+				text: "kartu",
+				tipsMain: "tidak akan didukung untuk penarikan tunai Harap konfirmasi informasi akun penarikan Anda dengan hati-hati untuk menghindari kesalahan penarikan.",
+				ifscTips: "Digit kelima IFSC harus 0",
+			},
+			button: {
+				submit: "SIMPAN & LANJUTKAN"
+			},
+			labels: {
+				accountName: "nama pemilik akun",
+				accountNumber: "Nomor akun",
+				accountIfsc: "IFSC",
+				accountType: "Jenis akun",
+			},
+			text: {
+				accNo: "Nomor Rek.",
+				addBankCardText: "Tambahkan Akun Baru",
+				add: "Menambahkan",
+				edit: "Sunting",
+				delAccount: "Hapus akun"
+			}
+		},
+		balanceRecords: {
+			searchFormTitle: "Verifikasi Terkirim"
+		},
+		feedBack: {
+			label: {
+				yourId: "Tanda pengenal Anda",
+				phoneNumber: "Nomor telepon",
+				email: "Email",
+				suggestion: "Saran",
+				emailPlaceholder: "Masukkan Email Anda.",
+				phonePlaceholder: "Masukkan Ponsel Anda.",
+				suggestionPlaceholder: "Pendapat Anda sangat penting bagi kami, kami akan mendengarkan semua saran, dan selama saran Anda efektif, Anda akan menerima hadiah uang tunai!",
+			},
+			screen: {
+				game: "Permainan",
+				deposit: "Setoran",
+				withdraw: "Menarik",
+				vip: "Vip",
+				invite: "Mengundang",
+				account: "Akun",
+				other: "Lainnya",
+			},
+			upto: "Hingga",
+			bonus: 'bonus'
+
+		},
+		withdrawalPassword: {
+			label: {
+				password: "I-set ang iyong Menarik Password",
+				repeatPassword: "Ulangi kata sandi penarikan",
+				phone: "Ilagay ang iyong naka-bind na phone number",
+				otpPlaceholder: "OTP 6 digit"
+			},
+			toast: {
+				phone: "Nomor telepon tidak boleh kosong",
+				withdrawPasswd: "Kata sandi penarikan tidak boleh kosong",
+				withdrawPasswdRepeat: "Dua kata sandi tidak cocok",
+				verificationCode: "Kode verifikasi tidak boleh kosong",
+			},
+		},
+		gameRecords: {
+			status: {
+				all: "Semua Status",
+				settled: "Selesai",
+				unsettled: "Belum Selesai",
+				cancel: "Dibatalkan"
+			},
+			time: {
+				today: "Hari ini",
+				yesterday: "Kemarin",
+				lastDay: "3 hari terakhir"
+			},
+			betId: "ID Taruhan",
+			vaildBet: "Taruhan yang valid",
+			wl: "W/L",
+		},
+		phoneBinding: {
+			toast: {
+				phone: "Nomor telepon tidak boleh kosong"
+			}
+		}
+	},
+
+}
--- a/src/locales/lang/ind-IND/deposit.js
+++ b/src/locales/lang/ind-IND/deposit.js
@ -0,0 +1,123 @@
+export default {
+	deposit: {
+		title: 'Setoran',
+		title2: 'Detail pesanan',
+		title3: 'Riwayat Deposit',
+		title4: 'UPI',
+		title5: 'IMPS',
+		titleSelfUtr: 'RRN',
+		onlinePayment: 'Pembayaran Daring',
+		transferDeposit: 'Transfer Setoran',
+		crypto: 'kripto',
+		paymentMethods: 'cara Pembayaran',
+		depositChannel: 'Saluran Setoran',
+		depositEvent: 'Acara Setoran',
+		bonus: 'Bonus',
+		depositAmount: 'Jumlah setoran',
+		depositTips: 'Tip Setoran',
+		agencyDeposit: 'Agensi isi ulang',
+		channel: 'Saluran',
+		depositService: 'Layanan Deposit',
+		cryptoCurrency: 'Mata Uang Kripto',
+		getAmount: 'Dapatkan jumlah',
+		online: 'Online',
+		supportAmount: 'Jumlah dukungan',
+		onlineTime: 'Waktu Online',
+		total: 'Total',
+		orderId: 'ID Pesanan',
+		depositType: 'Jenis Setoran',
+		creationTime: 'Waktu Pembuatan',
+		arrivalTime: 'Jam kedatangan',
+		orderNo: 'Nomor Pesanan',
+		transferAmount: 'Jumlah transfer',
+		utr: 'UTR',
+		bankAccountInfo: 'Info Rekening Bank',
+		accountHolderName: 'Nama pemilik akun',
+		bankName: 'Nama Bank',
+		IFSCCode: 'Kode IFSC',
+		accountNo: 'No rekening',
+		remark: 'Komentar',
+		transferInstructions: 'Instruksi Transfer',
+		name: 'Nama',
+		upi: 'UPI',
+		orderConfirmation: 'Konfirmasi pesanan',
+		howtouse: 'How to use?',
+
+		button: {
+			depositNow: 'Setor Sekarang',
+			confirm: 'Mengonfirmasi',
+			transferCompleted: 'Pemindahan Selesai',
+			copy: 'menyalin',
+			gotoDepositHistory: 'Buka Riwayat Deposit',
+			selfUtrCheck: 'Hanya pesanan swalayan'
+		},
+
+		status: {
+			succeeded: 'Salinan Berhasil',
+			success: 'Success',
+			pending: 'Tertunda'
+		},
+
+		tabs: {
+			tab1: 'Hari ini',
+			tab2: '7 hari',
+			tab3: '30 hari'
+		},
+
+		message: {
+			nodata: 'Tidak Ada Catatan!',
+			tips1: '1、Setiap deposit akan dikreditkan dalam 1-5 menit.',
+			tips2: '2、Anda dapat menghubungi layanan pelanggan kapan saja untuk menyelesaikan masalah isi ulang.',
+			tips3: 'Setelah berpartisipasi dalam event ini, Anda memerlukan 3 kali lipat taruhan yang diperlukan untuk melakukan penarikan uang',
+			tips4: '7*24 Layanan Pelanggan Online > ',
+			tips5: 'Jika Anda memiliki masalah setoran, Anda dapat menghubungi kami',
+			tips6: 'Pesanan deposit Anda telah berhasil dikirimkan dan akan tiba dalam waktu 1-5 menit. Harap bersabar menunggu...',
+			tips7: 'Anda juga dapat memeriksa hasilnya di riwayat isi ulang atau menghubungi layanan pelanggan.',
+
+			tipsUtr1: 'RRN',
+			tipsUtr2: 'bonusnya hingga 30%.',
+			tipsUtr3: 'Unggah UTR Anda dan kami akan mengkonfirmasi pesanan Anda',
+			tipsUtr4: 'Pesanan ini berlaku untuk layanan mandiri',
+			tipsUtr5: 'Detail',
+
+			history1: 'Pesanan ini akan diproses dalam waktu 2-24 jam',
+
+			tipsDetail1: 'Setoran belum sampai?',
+
+			tipsImps1: 'Untuk meningkatkan pengalaman deposit Anda, disarankan agar Anda menggunakan Transfer Deposit untuk deposit lebih besar dari #0',
+			tipsImps2: 'Tips: Anda dapat menekan lama kotak input untuk menempelkan RRN',
+			tipsImps3: '1、Masukkan komentar di kolom Komentar saat Anda melakukan deposit. Jika Anda tidak memasukkan komentar tersebut, pembayaran Anda mungkin tidak teridentifikasi atau dikreditkan ke akun Anda.',
+			tipsImps4: '2、Anda dapat menghubungi layanan pelanggan kapan saja untuk menyelesaikan masalah isi ulang.',
+			tipsImps5: 'Silakan masukkan UTR 12~sigit',
+
+			popupTip: 'Jika jumlah transfer Anda tidak sesuai dengan jumlah yang dikirimkan, maka transfer tidak akan sampai tepat waktu. Jika Anda memiliki pertanyaan, silakan hubungi layanan pelanggan'
+		},
+
+		utrPage: {
+			text1: 'Untuk memproses pesanan deposit Anda lebih cepat, kami menyediakan layanan isi ulang mandiri.',
+			text2: 'Jika pesanan Anda belum sampai, Anda bisa langsung memberikan UTR dan screenshot pembayarannya.',
+			title1: 'Bonus Self Service',
+			title2: 'Prosedur operasi',
+			text3: 'Setiap 6 jam hingga UTR dan screenshot berhasil dikirimkan, 1% dari jumlah deposit akan diberikan, maksimal 30%, dan hadiah akan dikeluarkan bersamaan dengan deposit.',
+			text4: '1. Temukan pesanan Anda di riwayat deposit dan klik pesanan untuk masuk ke halaman detail.',
+			text5: '2. Klik pintu masuk layanan mandiri di bagian bawah halaman detail.',
+			text6: '3. Unggah UTR dan tangkapan layar pembayaran Anda di halaman web, Kami akan menangani masalah Anda sesegera mungkin.',
+			text7: '4. Anda dapat memeriksa kemajuan pemrosesan kapan saja dengan mengklik pintu masuk layanan mandiri pesanan ini.',
+			text8: '5. Hasil pemrosesan pesanan akan kami informasikan melalui inbox.',
+		},
+
+		toast: {
+			text1: 'Silakan masukkan jumlah deposit!',
+			text2: 'Jumlah deposit harus selama',
+			text3: 'Silakan masukkan UTR!',
+			text4: 'Salin Sukses',
+			text5: 'Anda masih punya',
+			text6: 'pesanan sedang diproses. Silakan coba lagi nanti.',
+		},
+
+		closePopup: {
+			text: 'Fungsi deposit Anda telah ditutup, silakan hubungi layanan pelanggan',
+			confirm: 'Hubungi Layanan Pelanggan'
+		}
+	}
+}
--- a/Show More
+++ b/Show More