From b36f75599e0bc61bc9e8533333c7323f8e738b08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E5=B0=8F=E5=8C=97?= Date: Thu, 14 May 2026 16:45:12 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E6=95=B4=E4=BD=93UI=E8=B0=83=E6=95=B4=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/tab-bar/tab-bar.vue | 147 ++++- language/cn.js | 6 + language/en.js | 6 + language/in.js | 6 + language/kr.js | 6 + language/tl.js | 6 + language/tw.js | 6 + language/yn.js | 6 + pages/index.vue | 868 ++++++++++++++++++--------- pages/login.vue | 247 +++++--- pages/recharge.vue | 410 +++++++++---- pages/register.vue | 363 +++++++---- pages/user/index.vue | 578 +++++++++++++++--- pages/withdraw.vue | 413 ++++++++++--- static/favicon.ico | Bin 15406 -> 9662 bytes static/images/ez-logo-login.png | Bin 56855 -> 21271 bytes static/images/index-ez.png | Bin 22435 -> 21271 bytes static/images/index.png | Bin 22435 -> 21271 bytes static/images/index_active-ez.png | Bin 22435 -> 21271 bytes static/images/index_active.png | Bin 22435 -> 21271 bytes static/images/logo2-ez.png | Bin 41327 -> 21271 bytes static/images/logo2.png | Bin 41327 -> 21271 bytes static/images/logo_2.png | Bin 41327 -> 21271 bytes static/images/logo_3-ez.png | Bin 41327 -> 21271 bytes static/images/logo_3.png | Bin 41327 -> 21271 bytes static/logo.png | Bin 12515 -> 21271 bytes static/tabBar/index-ez-v2.png | Bin 12515 -> 21271 bytes static/tabBar/index-ez.png | Bin 12515 -> 21271 bytes static/tabBar/index_active-ez-v2.png | Bin 12515 -> 21271 bytes static/tabBar/index_active-ez.png | Bin 12515 -> 21271 bytes static/tabBar/index_active.png | Bin 12515 -> 21271 bytes 31 files changed, 2278 insertions(+), 790 deletions(-) diff --git a/components/tab-bar/tab-bar.vue b/components/tab-bar/tab-bar.vue index d1bde7a..1a54772 100644 --- a/components/tab-bar/tab-bar.vue +++ b/components/tab-bar/tab-bar.vue @@ -5,19 +5,26 @@ ['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName) " > - - - {{ item.text }} + + + + + + + + {{ item.text }} + + @@ -122,27 +129,111 @@ export default { left: 0; right: 0; bottom: 0; - display: flex; - background: #000; - justify-content: space-between; - height: 50px; + z-index: 99; + padding: 0 8px 4px; + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.12) 26%, + rgba(0, 0, 0, 0.32) 100% + ); + + .tab-bar__shell { + display: flex; + justify-content: space-between; + align-items: stretch; + min-height: 56px; + padding: 4px 5px calc(4px + env(safe-area-inset-bottom)); + background: linear-gradient( + 180deg, + rgba(9, 8, 7, 0.98) 0%, + rgba(2, 2, 2, 0.99) 100% + ); + border: 1px solid rgba(226, 193, 117, 0.22); + border-bottom: none; + border-radius: 16px 16px 0 0; + box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.18), + inset 0 1px 0 rgba(255, 243, 212, 0.04); + } + .item { flex: 1; - display: flex; - align-items: center; - flex-direction: column; - justify-content: center; - color: #fff; - &.active { - color: #deb366; + min-width: 0; + color: rgba(255, 255, 255, 0.84); + + .item-inner { + position: relative; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + min-height: 46px; + margin: 0 1px; + padding: 5px 5px 2px; + border-radius: 14px; + transition: all 0.2s ease; } + + .item-indicator { + position: absolute; + top: -1px; + left: 50%; + width: 20px; + height: 2px; + border-radius: 999px; + background: transparent; + transform: translateX(-50%); + } + + .icon-box { + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + transition: all 0.2s ease; + } + .icon { - width: 25px; - height: 25px; + width: 22px; + height: 22px; } + .text { - font-size: 12px; - padding-top: 2px; + margin-top: 2px; + font-size: 11px; + line-height: 1.2; + letter-spacing: 0.2px; + white-space: nowrap; + transition: all 0.2s ease; + } + + &.active { + color: #e8c26f; + + .item-inner { + background: linear-gradient( + 180deg, + rgba(63, 46, 20, 0.24) 0%, + rgba(30, 22, 13, 0.08) 100% + ); + box-shadow: inset 0 1px 0 rgba(255, 236, 192, 0.08); + } + + .item-indicator { + background: linear-gradient(90deg, #f4ddb0 0%, #d9ae55 100%); + } + + .icon-box { + background: rgba(225, 191, 116, 0.08); + box-shadow: inset 0 1px 0 rgba(255, 244, 219, 0.06); + } + + .text { + font-weight: 600; + text-shadow: 0 0 10px rgba(217, 174, 85, 0.1); + } } } } diff --git a/language/cn.js b/language/cn.js index b6b4619..22783cd 100644 --- a/language/cn.js +++ b/language/cn.js @@ -72,6 +72,12 @@ var cn = { commission: "手续费", amountCannotBe0: "金额不能为0", submittingApplication: "提交申请中...", + bankName: "银行名称", + accountName: "账户姓名", + accountNumber: "银行卡号", + enterAccountName: "请输入账户姓名", + enterAccountNumber: "请输入银行卡号", + insufficientBalance: "余额不足", transfer: "划转", accountBalance: "账户余额", diff --git a/language/en.js b/language/en.js index 21d9f4f..16c316b 100644 --- a/language/en.js +++ b/language/en.js @@ -72,6 +72,12 @@ var en = { commission: "Commission", amountCannotBe0: "Amount cannot be 0", submittingApplication: "Submitting Application...", + bankName: "Bank Name", + accountName: "Account Name", + accountNumber: "Bank Account Number", + enterAccountName: "Please enter account name", + enterAccountNumber: "Please enter bank account number", + insufficientBalance: "Insufficient balance", transfer: "Transfer", accountBalance: "Account Balance", diff --git a/language/in.js b/language/in.js index cc5bd27..f3e69b2 100644 --- a/language/in.js +++ b/language/in.js @@ -72,6 +72,12 @@ var In = { commission: "Biaya Administrasi", amountCannotBe0: "Jumlah tidak boleh 0", submittingApplication: "Mengirimkan permintaan...", + bankName: "Nama Bank", + accountName: "Nama Rekening", + accountNumber: "Nomor Rekening Bank", + enterAccountName: "Masukkan nama rekening", + enterAccountNumber: "Masukkan nomor rekening bank", + insufficientBalance: "Saldo tidak cukup", transfer: "Transfer", accountBalance: "Saldo", diff --git a/language/kr.js b/language/kr.js index 67db613..cce289e 100644 --- a/language/kr.js +++ b/language/kr.js @@ -72,6 +72,12 @@ var kr = { commission: "수수료", amountCannotBe0: "금액은 0일 수 없습니다.", submittingApplication: "신청 제출 중...", + bankName: "은행명", + accountName: "예금주명", + accountNumber: "은행 계좌번호", + enterAccountName: "예금주명을 입력해 주세요", + enterAccountNumber: "은행 계좌번호를 입력해 주세요", + insufficientBalance: "잔액이 부족합니다", transfer: "전송", accountBalance: "계정 잔액", diff --git a/language/tl.js b/language/tl.js index 1d45acf..0cdbbcd 100644 --- a/language/tl.js +++ b/language/tl.js @@ -71,6 +71,12 @@ var tl = { commission: "คอมมิชชัน", amountCannotBe0: "ยอดไม่สามารถเป็น 0", submittingApplication: "ยื่นถอนเงิน", + bankName: "ชื่อธนาคาร", + accountName: "ชื่อบัญชี", + accountNumber: "เลขที่บัญชีธนาคาร", + enterAccountName: "กรุณากรอกชื่อบัญชี", + enterAccountNumber: "กรุณากรอกเลขที่บัญชีธนาคาร", + insufficientBalance: "ยอดเงินคงเหลือไม่เพียงพอ", transfer: "โอน", accountBalance: "ยอดเงินในบัญชี", diff --git a/language/tw.js b/language/tw.js index eefd4e1..2132033 100644 --- a/language/tw.js +++ b/language/tw.js @@ -72,6 +72,12 @@ var tw = { commission: "手續費", amountCannotBe0: "金額不能為0", submittingApplication: "提交申請中...", + bankName: "銀行名稱", + accountName: "賬戶姓名", + accountNumber: "銀行卡號", + enterAccountName: "請輸入賬戶姓名", + enterAccountNumber: "請輸入銀行卡號", + insufficientBalance: "餘額不足", transfer: "劃轉", accountBalance: "賬戶餘額", diff --git a/language/yn.js b/language/yn.js index 79cac0f..f76a884 100644 --- a/language/yn.js +++ b/language/yn.js @@ -72,6 +72,12 @@ var yn = { commission: "Phí thủ tục", amountCannotBe0: "Số tiền không thể bằng 0", submittingApplication: "Đang gửi yêu cầu...", + bankName: "Tên ngân hàng", + accountName: "Tên tài khoản", + accountNumber: "Số tài khoản ngân hàng", + enterAccountName: "Vui lòng nhập tên tài khoản", + enterAccountNumber: "Vui lòng nhập số tài khoản ngân hàng", + insufficientBalance: "Số dư không đủ", transfer: "Chuyển khoản", accountBalance: "Số dư tài khoản", diff --git a/pages/index.vue b/pages/index.vue index 2f6b882..865eb9a 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -2,31 +2,60 @@ - + + - - - - - - + + + + + + + - {{ userInfo.username || $lang.guest }} - - - {{ $fk(userInfo.money) || '0.00' }} + + + + {{ userInfo.username || $lang.guest }} + + + {{ + $fk(userInfo.money) || "0.00" + }} + + + + + + + + + + + - - - + + + - - - @@ -40,13 +69,20 @@ :class="{ active: currentCategory === cat.id }" @click="switchCategory(cat.id)" > + - - - + + + + + {{ $lang[cat.nameKey] }} + {{ getCategoryCount(cat.id) }} - {{ $lang[cat.nameKey] }} - ({{ getCategoryCount(cat.id) }}) @@ -76,12 +112,15 @@ {{ $lang.maxLimit }}:{{ $fk((item.game_id == 4 || item.game_id == 5) && userInfo.limit_high_nn > 0 ? userInfo.limit_high_nn : (userInfo.limit_high || 0)) }} {{ $lang.minLimit }}:{{ (item.game_id == 4 || item.game_id == 5) && userInfo.limit_low_nn > 0 ? userInfo.limit_low_nn : (userInfo.limit_low || 0) }} - + + + + - @@ -330,8 +368,8 @@ export default { display: flex; flex-direction: column; height: 100vh; - background-color: #0c0c0d; - color: #fff; + background: linear-gradient(180deg, #060505 0%, #0d0b09 100%); + color: #fff6e1; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } @@ -339,9 +377,8 @@ export default { .top-header { flex-shrink: 0; position: relative; - /* background-image removed, using image tag instead */ - padding-bottom: 5px; - overflow: hidden; + padding-bottom: 14px; + overflow: hidden; .header-bg { position: absolute; @@ -350,61 +387,157 @@ export default { width: 100%; height: 100%; z-index: 0; + opacity: 0.42; + } + + .header-overlay { + position: absolute; + inset: 0; + z-index: 0; + background: linear-gradient( + 180deg, + rgba(5, 4, 4, 0.86) 0%, + rgba(11, 9, 8, 0.66) 54%, + rgba(13, 11, 9, 0.96) 100% + ); } .status-bar { - height: var(--status-bar-height); - width: 100%; - position: relative; - z-index: 1; + height: var(--status-bar-height); + width: 100%; + position: relative; + z-index: 1; + } + + .header-content { + position: relative; + z-index: 1; + padding: 8px 12px 0; } .user-bar { - position: relative; - z-index: 1; display: flex; - justify-content: space-between; align-items: center; - padding: 10px 15px; - - .left-info { + gap: 14px; + padding: 6px 4px 14px; + + .brand-side { + flex-shrink: 0; + } + + .brand-logo-shell { + width: 58px; + height: 58px; display: flex; align-items: center; - gap: 10px; - - .username { - font-size: 14px; - font-weight: bold; - color: #fff; + justify-content: center; + } + + .brand-logo { + width: 44px; + height: 44px; + display: block; + } + + .header-right { + min-width: 0; + flex: 1; + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + } + + .user-summary { + min-width: 0; + flex: 1; + display: flex; + flex-direction: column; + gap: 7px; + } + + .username { + max-width: 100%; + font-size: 16px; + font-weight: 700; + color: #fbf3e0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .balance-pill { + width: fit-content; + max-width: 100%; + min-height: 30px; + padding: 0 12px; + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 999px; + background: rgba(10, 9, 8, 0.72); + border: 1px solid rgba(223, 189, 120, 0.24); + box-shadow: inset 0 1px 0 rgba(255, 243, 219, 0.04); + + .currency-symbol { + color: #f1cc84; + font-size: 13px; + font-weight: 700; } - - .balance-pill { - background: rgba(0,0,0,0.5); - border: 1px solid #f4c46f; - border-radius: 12px; - padding: 2px 8px; - display: flex; - align-items: center; - gap: 5px; - - .currency-symbol { - color: #f4c46f; - font-size: 14px; - font-weight: bold; - } - .balance-text { - color: #f4c46f; - font-size: 12px; - font-weight: bold; - } + .balance-text { + color: #f6e1b2; + font-size: 12px; + font-weight: 700; + } + } + + .right-actions { + display: flex; + align-items: center; + gap: 8px; + flex-shrink: 0; + + .action-btn { + width: 42px; + height: 42px; + border-radius: 15px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(12, 11, 10, 0.72); + border: 1px solid rgba(223, 189, 120, 0.16); + box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.04); } } } .banner-area { - position: relative; - z-index: 1; - padding: 5px 10px; + position: relative; + z-index: 1; + padding: 0 2px; + + ::v-deep .u-swiper { + border-radius: 18px !important; + overflow: hidden; + border: 1px solid rgba(223, 189, 120, 0.14); + box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24); + } + + ::v-deep .u-swiper__wrapper__item__wrapper { + border-radius: 18px !important; + } + + ::v-deep .u-swiper-indicator { + bottom: 10px !important; + } + + ::v-deep .u-swiper-indicator__wrapper__item { + background-color: rgba(255, 244, 220, 0.28) !important; + } + + ::v-deep .u-swiper-indicator__wrapper__item--active { + background-color: #dfbd78 !important; + } } } @@ -413,271 +546,414 @@ export default { flex: 1; display: flex; overflow: hidden; + gap: 10px; + padding: 0 12px 12px; /* Sidebar styles */ .sidebar { - width: 80px; - background-color: #161618; - border-right: 1px solid #1f1f1f; + width: 86px; + background: linear-gradient( + 180deg, + rgba(18, 15, 13, 0.98) 0%, + rgba(10, 9, 8, 0.98) 100% + ); + border: 1px solid rgba(223, 189, 120, 0.14); + border-radius: 22px; display: flex; flex-direction: column; + overflow: hidden; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18); .sidebar-item { - padding: 15px 5px; + position: relative; + margin: 6px; + padding: 14px 6px 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; - border-bottom: 1px solid #222; - transition: all 0.3s; - + border-radius: 18px; + transition: all 0.25s ease; + + .item-marker { + position: absolute; + left: 50%; + top: 0; + width: 20px; + height: 3px; + border-radius: 999px; + transform: translateX(-50%); + background: transparent; + } + &.active { - background-color: #f4c46f; - - .cat-name, .cat-count { - color: #000; - font-weight: bold; + background: linear-gradient( + 180deg, + rgba(59, 43, 19, 0.24) 0%, + rgba(27, 20, 12, 0.08) 100% + ); + box-shadow: inset 0 1px 0 rgba(255, 239, 203, 0.06); + + .item-marker { + background: linear-gradient(90deg, #f2ddb3 0%, #dbaf57 100%); + } + + .icon-box { + background: rgba(223, 189, 120, 0.08); + border-color: rgba(223, 189, 120, 0.18); + } + + .cat-name, + .cat-count { + color: #f1d392; } - - // Could change icon color via filter if using svg } - + .icon-box { - margin-bottom: 5px; + width: 40px; + height: 40px; + margin-bottom: 8px; + border-radius: 14px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(14, 13, 12, 0.8); + border: 1px solid rgba(255, 255, 255, 0.03); } - + + .cat-texts { + display: flex; + flex-direction: column; + align-items: center; + gap: 5px; + } + .cat-name { - font-size: 11px; - color: #999; - margin-bottom: 2px; - text-align: center; - word-break: break-word; - line-height: 1.2; - max-width: 70px; + font-size: 11px; + color: #cdc2a3; + text-align: center; + word-break: break-word; + line-height: 1.25; + max-width: 70px; } .cat-count { - font-size: 10px; - color: #666; + min-width: 32px; + height: 22px; + padding: 0 9px; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 11px; + font-weight: 700; + line-height: 1; + color: #e3c27a; + font-variant-numeric: tabular-nums; + letter-spacing: 0.2px; + background: linear-gradient( + 180deg, + rgba(29, 24, 19, 0.96) 0%, + rgba(16, 13, 11, 0.96) 100% + ); + border: 1px solid rgba(223, 189, 120, 0.12); + box-shadow: inset 0 1px 0 rgba(255, 245, 223, 0.04); + border-radius: 999px; } } .online-count-box { - margin-top: auto; - padding: 20px 5px; - text-align: center; - - .label { font-size: 10px; color: #666; display: block; } - .count { font-size: 14px; color: #f4c46f; font-weight: bold; } + margin: auto 6px 6px; + padding: 14px 6px calc(14px + env(safe-area-inset-bottom)); + border-top: 1px solid rgba(223, 189, 120, 0.1); + text-align: center; + + .label { + font-size: 10px; + color: #8d7a55; + display: block; + margin-bottom: 4px; + } + .count { + margin-top: 6px; + font-size: 15px; + color: #f1cc84; + font-weight: 700; + font-variant-numeric: tabular-nums; + letter-spacing: 0.3px; + } } } /* Content styles */ .content-area { - flex: 1; - background-color: #0c0c0d; - padding: 10px; - - .game-card { - background-color: #1e1e1e; - border-radius: 6px; - margin-bottom: 12px; - border: 1px solid #333; - overflow: hidden; - - .card-header { - display: flex; - justify-content: space-between; - align-items: center; - background: #252627; - padding: 5px 10px; - border-bottom: 1px solid #333; - height: 30px; - - .table-name { - font-size: 13px; - color: #fff; - font-weight: bold; - } - - .header-right { - display: flex; - align-items: center; - gap: 8px; - - .limit-info { - font-size: 10px; - color: #999; - } - - .status-dot { - width: 6px; - height: 6px; - border-radius: 50%; - background-color: #666; - &.is-live { background-color: #0f0; } - } - } - } - - .card-body { - position: relative; - height: 110px; // Fixed height for roadmap - background: #fff; // White background for roadmap grid - - .roadmap-grid { - width: 100%; - height: 100%; - position: relative; - // Grid background lines - background-size: 16.5px 17px; - background-image: - linear-gradient(to right, #ccc 1px, transparent 1px), - linear-gradient(to bottom, #ccc 1px, transparent 1px); - - .road-cell { - position: absolute; - width: 14px; - height: 14px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - border: 1px solid rgba(0,0,0,0.1); - - &.cell-red { - background-color: #fff; - border: 2px solid #d0021b; - color: #d0021b; - } - &.cell-blue { - background-color: #fff; - border: 2px solid #4a90e2; - color: #4a90e2; - } - &.cell-green { - background-color: #fff; - border: 2px solid #7ed321; - color: #7ed321; - } - - .cell-text { - font-size: 9px; - font-weight: bold; - } - } - } + flex: 1; + background: rgba(8, 7, 6, 0.52); + border: 1px solid rgba(223, 189, 120, 0.1); + border-radius: 22px; + padding: 12px; + box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03); - .nn-roadmap { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - background: #fff; + .table-list { + min-height: 100%; + } - .nn-row { - display: flex; - flex: 1; - border-bottom: 1px solid #e0e0e0; + .loading-state { + min-height: 180px; + display: flex; + align-items: center; + justify-content: center; + } - &:last-child { border-bottom: none; } - } + .game-card { + margin-bottom: 14px; + background: linear-gradient( + 180deg, + rgba(21, 18, 15, 0.98) 0%, + rgba(14, 12, 10, 0.98) 100% + ); + border: 1px solid rgba(223, 189, 120, 0.14); + border-radius: 18px; + overflow: hidden; + box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16); - .nn-label { - width: 30px; - display: flex; - align-items: center; - justify-content: center; - font-size: 10px; - font-weight: bold; - color: #fff; - flex-shrink: 0; + .card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 12px; + min-height: 44px; + background: linear-gradient( + 180deg, + rgba(30, 25, 20, 0.88) 0%, + rgba(19, 17, 14, 0.88) 100% + ); + border-bottom: 1px solid rgba(223, 189, 120, 0.1); - &.nn-label-banker { background: #c0392b; } - &.nn-label-player { background: #2c5fa1; } - } + .table-name { + font-size: 14px; + color: #f9f1de; + font-weight: 700; + } - .nn-cells { - flex: 1; - } + .header-right { + display: flex; + align-items: center; + gap: 8px; + } - .nn-cells-inner { - display: flex; - height: 100%; - } + .limit-info { + font-size: 10px; + color: #bca987; + text-align: right; + line-height: 1.35; + } - .nn-cell { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - border-right: 1px solid #e0e0e0; - padding: 1px 0; - } + .status-live { + width: 18px; + height: 18px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 999px; + background: rgba(255, 255, 255, 0.03); + } - .nn-text { - font-size: 10px; - font-weight: bold; - &.nn-text-red { color: #c0392b; } - &.nn-text-blue { color: #2c5fa1; } - } + .status-dot { + width: 7px; + height: 7px; + border-radius: 50%; + background-color: #6f6658; - .nn-win-tag { - font-size: 7px; - color: #fff; - background: #2c5fa1; - padding: 0 3px; - border-radius: 2px; - line-height: 1.4; - margin-top: 1px; - } - - .nn-cell.nn-win-banker .nn-win-tag { - background: #c0392b; - } - } - - .center-overlay { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - - .status-badge-lg { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 10px 20px; - background: rgba(0,0,0,0.7); - border-radius: 8px; - // Backdrop gradient - background: radial-gradient(circle, rgba(169,134,60,0.95) 0%, rgba(0,0,0,0.8) 100%); - color: #fff; - box-shadow: 0 4px 10px rgba(0,0,0,0.5); - width: 100px; - - &.status-dealing { - // background: radial-gradient(circle, rgba(200,50,50,0.9) 0%, rgba(0,0,0,0.8) 100%); - } - - .status-text-lg { - font-size: 14px; - font-weight: bold; - margin-top: 5px; - text-shadow: 1px 1px 2px #000; - } - .countdown-text { - font-size: 16px; - color: #fff; - margin-top: 2px; - font-family: monospace; - font-weight: bold; - } - } - } - } + &.is-live { + background-color: #53c57b; + box-shadow: 0 0 10px rgba(83, 197, 123, 0.28); + } + } } + + .card-body { + position: relative; + height: 114px; + background: linear-gradient(180deg, #fbf9f3 0%, #f0ece3 100%); + } + + .card-body-overlay { + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient( + 180deg, + rgba(255, 255, 255, 0.02) 0%, + rgba(0, 0, 0, 0.02) 100% + ); + } + + .roadmap-grid { + width: 100%; + height: 100%; + position: relative; + background-size: 16.5px 17px; + background-image: linear-gradient(to right, #dad3c7 1px, transparent 1px), + linear-gradient(to bottom, #dad3c7 1px, transparent 1px); + + .road-cell { + position: absolute; + width: 14px; + height: 14px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid rgba(0, 0, 0, 0.08); + background-color: #fff; + + &.cell-red { + border: 2px solid #cf4444; + color: #cf4444; + } + &.cell-blue { + border: 2px solid #467ed7; + color: #467ed7; + } + &.cell-green { + border: 2px solid #4ba96f; + color: #4ba96f; + } + + .cell-text { + font-size: 9px; + font-weight: 700; + } + } + } + + .nn-roadmap { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #fbf9f3 0%, #f0ece3 100%); + + .nn-row { + display: flex; + flex: 1; + border-bottom: 1px solid #ddd4c8; + + &:last-child { + border-bottom: none; + } + } + + .nn-label { + width: 30px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + font-weight: 700; + color: #fff; + flex-shrink: 0; + + &.nn-label-banker { + background: #a84237; + } + &.nn-label-player { + background: #3c6399; + } + } + + .nn-cells { + flex: 1; + } + + .nn-cells-inner { + display: flex; + height: 100%; + } + + .nn-cell { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-right: 1px solid #ddd4c8; + padding: 1px 0; + } + + .nn-text { + font-size: 10px; + font-weight: 700; + + &.nn-text-red { + color: #a84237; + } + &.nn-text-blue { + color: #3c6399; + } + } + + .nn-win-tag { + font-size: 7px; + color: #fff; + background: #3c6399; + padding: 0 3px; + border-radius: 2px; + line-height: 1.4; + margin-top: 1px; + } + + .nn-cell.nn-win-banker .nn-win-tag { + background: #a84237; + } + } + + .center-overlay { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + .status-badge-lg { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-width: 110px; + padding: 10px 18px; + border-radius: 16px; + color: #fff; + background: linear-gradient( + 180deg, + rgba(47, 39, 28, 0.92) 0%, + rgba(17, 14, 11, 0.92) 100% + ); + border: 1px solid rgba(223, 189, 120, 0.18); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18); + + &.status-betting { + background: linear-gradient( + 180deg, + rgba(88, 67, 33, 0.92) 0%, + rgba(24, 18, 11, 0.94) 100% + ); + } + + .status-text-lg { + font-size: 13px; + font-weight: 700; + margin-top: 4px; + } + + .countdown-text { + font-size: 15px; + color: #fff5dc; + margin-top: 2px; + font-family: monospace; + font-weight: 700; + } + } + } + } } } \ No newline at end of file diff --git a/pages/login.vue b/pages/login.vue index 59ae899..6eefc07 100644 --- a/pages/login.vue +++ b/pages/login.vue @@ -1,11 +1,11 @@