手机端项目整体UI调整修改
This commit is contained in:
黎小北
+119
-28
@@ -5,19 +5,26 @@
|
||||
['Recharge', 'Withdraw', 'Index', 'User', 'Transfer'].includes(routeName)
|
||||
"
|
||||
>
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: routeName == item.name }"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@click="goTab(item)"
|
||||
>
|
||||
<image
|
||||
class="icon"
|
||||
:src="routeName == item.name ? item.selectedIconPath : item.iconPath"
|
||||
alt=""
|
||||
></image>
|
||||
<view class="text">{{ item.text }}</view>
|
||||
<view class="tab-bar__shell">
|
||||
<view
|
||||
class="item"
|
||||
:class="{ active: routeName == item.name }"
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
@click="goTab(item)"
|
||||
>
|
||||
<view class="item-inner">
|
||||
<view class="item-indicator"></view>
|
||||
<view class="icon-box">
|
||||
<image
|
||||
class="icon"
|
||||
:src="routeName == item.name ? item.selectedIconPath : item.iconPath"
|
||||
alt=""
|
||||
></image>
|
||||
</view>
|
||||
<view class="text">{{ item.text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,6 +72,12 @@ var cn = {
|
||||
commission: "手续费",
|
||||
amountCannotBe0: "金额不能为0",
|
||||
submittingApplication: "提交申请中...",
|
||||
bankName: "银行名称",
|
||||
accountName: "账户姓名",
|
||||
accountNumber: "银行卡号",
|
||||
enterAccountName: "请输入账户姓名",
|
||||
enterAccountNumber: "请输入银行卡号",
|
||||
insufficientBalance: "余额不足",
|
||||
|
||||
transfer: "划转",
|
||||
accountBalance: "账户余额",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -72,6 +72,12 @@ var kr = {
|
||||
commission: "수수료",
|
||||
amountCannotBe0: "금액은 0일 수 없습니다.",
|
||||
submittingApplication: "신청 제출 중...",
|
||||
bankName: "은행명",
|
||||
accountName: "예금주명",
|
||||
accountNumber: "은행 계좌번호",
|
||||
enterAccountName: "예금주명을 입력해 주세요",
|
||||
enterAccountNumber: "은행 계좌번호를 입력해 주세요",
|
||||
insufficientBalance: "잔액이 부족합니다",
|
||||
|
||||
transfer: "전송",
|
||||
accountBalance: "계정 잔액",
|
||||
|
||||
@@ -71,6 +71,12 @@ var tl = {
|
||||
commission: "คอมมิชชัน",
|
||||
amountCannotBe0: "ยอดไม่สามารถเป็น 0",
|
||||
submittingApplication: "ยื่นถอนเงิน",
|
||||
bankName: "ชื่อธนาคาร",
|
||||
accountName: "ชื่อบัญชี",
|
||||
accountNumber: "เลขที่บัญชีธนาคาร",
|
||||
enterAccountName: "กรุณากรอกชื่อบัญชี",
|
||||
enterAccountNumber: "กรุณากรอกเลขที่บัญชีธนาคาร",
|
||||
insufficientBalance: "ยอดเงินคงเหลือไม่เพียงพอ",
|
||||
|
||||
transfer: "โอน",
|
||||
accountBalance: "ยอดเงินในบัญชี",
|
||||
|
||||
@@ -72,6 +72,12 @@ var tw = {
|
||||
commission: "手續費",
|
||||
amountCannotBe0: "金額不能為0",
|
||||
submittingApplication: "提交申請中...",
|
||||
bankName: "銀行名稱",
|
||||
accountName: "賬戶姓名",
|
||||
accountNumber: "銀行卡號",
|
||||
enterAccountName: "請輸入賬戶姓名",
|
||||
enterAccountNumber: "請輸入銀行卡號",
|
||||
insufficientBalance: "餘額不足",
|
||||
|
||||
transfer: "劃轉",
|
||||
accountBalance: "賬戶餘額",
|
||||
|
||||
@@ -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",
|
||||
|
||||
+563
-287
@@ -2,30 +2,59 @@
|
||||
<view class="page-container">
|
||||
<!-- Top Header Area -->
|
||||
<view class="top-header">
|
||||
<image class="header-bg" src="/static/images/login_bg.png" mode="aspectFill"></image>
|
||||
<image
|
||||
class="header-bg"
|
||||
src="/static/images/login_bg.png"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="header-overlay"></view>
|
||||
<view class="status-bar"></view>
|
||||
<!-- User Info Row -->
|
||||
<view class="user-bar">
|
||||
<view class="left-info" @click="goPage('/pages/user/index')">
|
||||
<u-icon name="arrow-left" color="#f4c46f" size="20" v-if="false"></u-icon>
|
||||
<view class="user-avatar">
|
||||
<u-icon name="account-fill" color="#fff" size="24"></u-icon>
|
||||
<view class="header-content">
|
||||
<!-- User Info Row -->
|
||||
<view class="user-bar">
|
||||
<view class="brand-side">
|
||||
<view class="brand-logo-shell">
|
||||
<image
|
||||
class="brand-logo"
|
||||
src="/static/logo.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<text class="username">{{ userInfo.username || $lang.guest }}</text>
|
||||
<view class="balance-pill">
|
||||
<text class="currency-symbol">₫</text>
|
||||
<text class="balance-text">{{ $fk(userInfo.money) || '0.00' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right-actions">
|
||||
<u-icon name="server-fill" color="#fff" size="24" @click="goService" style="margin-right: 15px;"></u-icon>
|
||||
<u-icon name="grid-fill" color="#fff" size="24" @click="goPage('/pages/user/index')"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Banner Area -->
|
||||
<view class="banner-area">
|
||||
<u-swiper :list="bannerList" height="140" radius="8" indicator indicatorMode="line" circular></u-swiper>
|
||||
<view class="header-right">
|
||||
<view class="user-summary" @click="goPage('/pages/user/index')">
|
||||
<text class="username">{{ userInfo.username || $lang.guest }}</text>
|
||||
<view class="balance-pill">
|
||||
<text class="currency-symbol">₫</text>
|
||||
<text class="balance-text">{{
|
||||
$fk(userInfo.money) || "0.00"
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="right-actions">
|
||||
<view class="action-btn" @click="goService">
|
||||
<u-icon name="server-fill" color="#f6e7bf" size="20"></u-icon>
|
||||
</view>
|
||||
<view class="action-btn" @click="goPage('/pages/user/index')">
|
||||
<u-icon name="grid-fill" color="#f6e7bf" size="20"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Banner Area -->
|
||||
<view class="banner-area">
|
||||
<u-swiper
|
||||
:list="bannerList"
|
||||
height="150"
|
||||
radius="14"
|
||||
indicator
|
||||
indicatorMode="line"
|
||||
circular
|
||||
></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -40,13 +69,20 @@
|
||||
:class="{ active: currentCategory === cat.id }"
|
||||
@click="switchCategory(cat.id)"
|
||||
>
|
||||
<view class="item-marker"></view>
|
||||
<view class="icon-box">
|
||||
<!-- Use local images or u-icons based on category -->
|
||||
<image :src="cat.icon" mode="widthFix" style="width: 24px; height: 24px;" v-if="cat.icon" />
|
||||
<u-icon :name="cat.uIcon" color="#ccc" size="28" v-else></u-icon>
|
||||
<image :src="cat.icon" mode="widthFix" style="width: 22px; height: 22px;" v-if="cat.icon" />
|
||||
<u-icon
|
||||
:name="cat.uIcon"
|
||||
:color="currentCategory === cat.id ? '#f1d392' : '#d1c6aa'"
|
||||
size="24"
|
||||
v-else
|
||||
></u-icon>
|
||||
</view>
|
||||
<view class="cat-texts">
|
||||
<text class="cat-name">{{ $lang[cat.nameKey] }}</text>
|
||||
<text class="cat-count">{{ getCategoryCount(cat.id) }}</text>
|
||||
</view>
|
||||
<text class="cat-name">{{ $lang[cat.nameKey] }}</text>
|
||||
<text class="cat-count">({{ getCategoryCount(cat.id) }})</text>
|
||||
</view>
|
||||
|
||||
<!-- Online Count Bottom -->
|
||||
@@ -76,12 +112,15 @@
|
||||
</view>
|
||||
<view class="header-right">
|
||||
<text class="limit-info">{{ $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) }}</text>
|
||||
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
|
||||
<view class="status-live">
|
||||
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Roadmap Visualization (Body) -->
|
||||
<view class="card-body">
|
||||
<view class="card-body-overlay"></view>
|
||||
<!-- 百家乐/龙虎: 珠盘路圆圈 -->
|
||||
<view class="roadmap-grid" v-if="item.game_id !== 4 && item.game_id !== 5">
|
||||
<view
|
||||
@@ -121,7 +160,6 @@
|
||||
|
||||
<!-- Center Overlay Status -->
|
||||
<view class="center-overlay" v-if="true">
|
||||
|
||||
<view class="status-badge-lg" :class="getStatusClass(item.bet_status)">
|
||||
<u-icon name="hourglass" size="20" color="#fff" v-if="item.bet_status == 1"></u-icon>
|
||||
<u-icon name="lock" size="20" color="#fff" v-else-if="item.bet_status == 2"></u-icon>
|
||||
@@ -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,8 +377,7 @@ export default {
|
||||
.top-header {
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
/* background-image removed, using image tag instead */
|
||||
padding-bottom: 5px;
|
||||
padding-bottom: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
.header-bg {
|
||||
@@ -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;
|
||||
gap: 14px;
|
||||
padding: 6px 4px 14px;
|
||||
|
||||
.left-info {
|
||||
.brand-side {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.brand-logo-shell {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
.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-text {
|
||||
color: #f6e1b2;
|
||||
font-size: 12px;
|
||||
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;
|
||||
.right-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.currency-symbol {
|
||||
color: #f4c46f;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.balance-text {
|
||||
color: #f4c46f;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.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;
|
||||
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);
|
||||
|
||||
.cat-name, .cat-count {
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
.item-marker {
|
||||
background: linear-gradient(90deg, #f2ddb3 0%, #dbaf57 100%);
|
||||
}
|
||||
|
||||
// Could change icon color via filter if using svg
|
||||
.icon-box {
|
||||
background: rgba(223, 189, 120, 0.08);
|
||||
border-color: rgba(223, 189, 120, 0.18);
|
||||
}
|
||||
|
||||
.cat-name,
|
||||
.cat-count {
|
||||
color: #f1d392;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
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: #666; display: block; }
|
||||
.count { font-size: 14px; color: #f4c46f; font-weight: bold; }
|
||||
.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;
|
||||
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);
|
||||
|
||||
.game-card {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid #333;
|
||||
overflow: hidden;
|
||||
.table-list {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #252627;
|
||||
padding: 5px 10px;
|
||||
border-bottom: 1px solid #333;
|
||||
height: 30px;
|
||||
.loading-state {
|
||||
min-height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.table-name {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.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);
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.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);
|
||||
|
||||
.limit-info {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
}
|
||||
.table-name {
|
||||
font-size: 14px;
|
||||
color: #f9f1de;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #666;
|
||||
&.is-live { background-color: #0f0; }
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
position: relative;
|
||||
height: 110px; // Fixed height for roadmap
|
||||
background: #fff; // White background for roadmap grid
|
||||
.limit-info {
|
||||
font-size: 10px;
|
||||
color: #bca987;
|
||||
text-align: right;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.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);
|
||||
.status-live {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.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);
|
||||
.status-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background-color: #6f6658;
|
||||
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nn-roadmap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
|
||||
.nn-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
|
||||
.nn-label {
|
||||
width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.nn-label-banker { background: #c0392b; }
|
||||
&.nn-label-player { background: #2c5fa1; }
|
||||
}
|
||||
|
||||
.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 #e0e0e0;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.nn-text {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
&.nn-text-red { color: #c0392b; }
|
||||
&.nn-text-blue { color: #2c5fa1; }
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+171
-76
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<view class="login">
|
||||
<div class="langview">
|
||||
<div class="select" @click="showLangselect(true)">
|
||||
<view class="langview">
|
||||
<view class="select" @click="showLangselect(true)">
|
||||
{{ langList[language] }}
|
||||
</div>
|
||||
<div class="select-box" v-show="langselect">
|
||||
<div
|
||||
</view>
|
||||
<view class="select-box" v-show="langselect">
|
||||
<view
|
||||
class="option"
|
||||
v-for="item in Object.keys(langList)"
|
||||
:key="item"
|
||||
@@ -13,42 +13,56 @@
|
||||
@click="choseLang(item)"
|
||||
>
|
||||
{{ langList[item] }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="logo">
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="loginLogo"
|
||||
width="125px"
|
||||
height="119px"
|
||||
mode="scaleToFill"
|
||||
></u--image>
|
||||
<view class="logo-shell">
|
||||
<view class="logo">
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="loginLogo"
|
||||
width="125px"
|
||||
height="119px"
|
||||
mode="scaleToFill"
|
||||
></u--image>
|
||||
</view>
|
||||
</view>
|
||||
<u-input
|
||||
class="input"
|
||||
v-model="phone"
|
||||
type="text"
|
||||
clearable
|
||||
:placeholder="$lang.enterAccount"
|
||||
><!--
|
||||
<view class="phone-code" slot="prefix" @click="countryShow = true">{{
|
||||
countryData.country_code
|
||||
}}</view>-->
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
v-model="password"
|
||||
:password="true"
|
||||
:placeholder="$lang.enterPassword"
|
||||
>
|
||||
</u-input>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @tap="login('login')">{{ $lang.login }}</view>
|
||||
<view class="btn" @tap="login('dome')">{{ $lang.dome }}</view>
|
||||
<view class="panel">
|
||||
<u-input
|
||||
class="input"
|
||||
v-model="phone"
|
||||
type="text"
|
||||
clearable
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="$lang.enterAccount"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.38); font-size: 14px;"
|
||||
><!--
|
||||
<view class="phone-code" slot="prefix" @click="countryShow = true">{{
|
||||
countryData.country_code
|
||||
}}</view>-->
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
v-model="password"
|
||||
:password="true"
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="$lang.enterPassword"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.38); font-size: 14px;"
|
||||
>
|
||||
</u-input>
|
||||
<view class="btn-box">
|
||||
<view class="btn btn-primary" @tap="login('login')">{{
|
||||
$lang.login
|
||||
}}</view>
|
||||
<view class="btn btn-secondary" @tap="login('dome')">{{
|
||||
$lang.dome
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="tip" @tap="goRegister">{{ $lang.goRegister }}</view>
|
||||
</view>
|
||||
<view class="tip" @tap="goRegister">{{ $lang.goRegister }}</view>
|
||||
</view>
|
||||
<!-- 提示 -->
|
||||
<u-toast ref="uToast" />
|
||||
@@ -202,65 +216,126 @@ export default {
|
||||
overflow-y: auto;
|
||||
.langview {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
z-index: 20;
|
||||
.select {
|
||||
border-radius: 4px;
|
||||
width: 90px;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
color: #cfc189;
|
||||
line-height: 35px;
|
||||
background: #212121;
|
||||
min-width: 96px;
|
||||
padding: 0 14px;
|
||||
font-size: 13px;
|
||||
color: #e8d39b;
|
||||
line-height: 34px;
|
||||
background: rgba(15, 12, 10, 0.74);
|
||||
border: 1px solid rgba(213, 181, 103, 0.18);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
opacity: 0.82;
|
||||
}
|
||||
}
|
||||
.select-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 45px;
|
||||
width: 90px;
|
||||
line-height: 30px;
|
||||
background: #212121;
|
||||
border-radius: 4px;
|
||||
top: 40px;
|
||||
width: 108px;
|
||||
padding: 4px 0;
|
||||
line-height: 32px;
|
||||
background: rgba(15, 12, 10, 0.92);
|
||||
border: 1px solid rgba(213, 181, 103, 0.18);
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 246, 226, 0.88);
|
||||
font-size: 13px;
|
||||
z-index: 9;
|
||||
.option {
|
||||
padding: 0 8px;
|
||||
}
|
||||
.option:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.active {
|
||||
color: #cfc189;
|
||||
color: #e8d39b;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 280px;
|
||||
padding-bottom: 50px;
|
||||
width: 86%;
|
||||
max-width: 326px;
|
||||
margin: 0 auto;
|
||||
padding: 94px 0 48px;
|
||||
.logo-shell {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20%;
|
||||
width: 125px;
|
||||
height: 119px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
padding: 20px 18px 22px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(14, 11, 9, 0.9) 0%,
|
||||
rgba(10, 8, 7, 0.8) 100%
|
||||
);
|
||||
border: 1px solid rgba(213, 181, 103, 0.22);
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
overflow: hidden;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(213, 181, 103, 0),
|
||||
rgba(244, 221, 169, 0.82),
|
||||
rgba(213, 181, 103, 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
.input {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 14px;
|
||||
background: rgba(24, 20, 17, 0.96);
|
||||
border: 1px solid rgba(213, 181, 103, 0.14);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
::v-deep .u-input__content {
|
||||
min-height: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
::v-deep .u-input__content__field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep input {
|
||||
color: #f7ecd2 !important;
|
||||
font-size: 15px !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
::v-deep input::placeholder {
|
||||
color: rgba(245, 228, 184, 0.42) !important;
|
||||
}
|
||||
}
|
||||
.phone-code {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ddd;
|
||||
border-right: 1px solid rgba(213, 181, 103, 0.18);
|
||||
}
|
||||
.btn-box {
|
||||
margin-top: 20px;
|
||||
@@ -269,15 +344,33 @@ export default {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: url("~@/static/images/btn_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 15px;
|
||||
margin-top: 12px;
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.86;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
margin-top: 0;
|
||||
color: #241804;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#f2dfb6 0%,
|
||||
#dfbd78 52%,
|
||||
#bd8d39 100%
|
||||
);
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
.btn-secondary {
|
||||
color: #ead6a0;
|
||||
background: rgba(18, 15, 12, 0.92);
|
||||
border: 1px solid rgba(213, 181, 103, 0.2);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
}
|
||||
}
|
||||
.country {
|
||||
@@ -287,12 +380,14 @@ export default {
|
||||
}
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: #b38f3c;
|
||||
margin-top: 20px;
|
||||
color: rgba(234, 214, 160, 0.92);
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(213, 181, 103, 0.1);
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 0.2px;
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+304
-106
@@ -2,7 +2,7 @@
|
||||
<view class="recharge">
|
||||
<u-navbar
|
||||
title=""
|
||||
bgColor="#000"
|
||||
bgColor="transparent"
|
||||
:placeholder="true"
|
||||
:fixed="true"
|
||||
leftIcon=""
|
||||
@@ -18,7 +18,7 @@
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.pleaseChoose"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="type"
|
||||
border="none"
|
||||
>
|
||||
@@ -31,7 +31,7 @@
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
@@ -59,14 +59,13 @@
|
||||
readonly
|
||||
:placeholder="$lang.walletAddress"
|
||||
fontSize="12px"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
:value="address"
|
||||
>
|
||||
<template slot="suffix">
|
||||
<u-button
|
||||
class="btn"
|
||||
:text="$lang.copy"
|
||||
type="success"
|
||||
@click="copyCode"
|
||||
color="#e5b932"
|
||||
></u-button>
|
||||
@@ -99,7 +98,7 @@
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.chooseCoin"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="currency.name"
|
||||
border="none"
|
||||
>
|
||||
@@ -112,7 +111,7 @@
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
@@ -125,7 +124,7 @@
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.chooseLine"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="coin_type.name"
|
||||
border="none"
|
||||
>
|
||||
@@ -138,7 +137,7 @@
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
@@ -146,7 +145,7 @@
|
||||
<view class="picker-view">
|
||||
<u-input
|
||||
:placeholder="$lang.enterMoney"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="amount"
|
||||
border="none"
|
||||
>
|
||||
@@ -206,7 +205,7 @@
|
||||
<view class="picker-view">
|
||||
<u-input
|
||||
:placeholder="payChannel === 'epay' ? 'Nhập số tiền VND (vd: 1,000,000)' : 'Tối thiểu 1,000,000'"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="amount"
|
||||
type="number"
|
||||
border="none"
|
||||
@@ -774,235 +773,434 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.pay-tabs {
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx 0;
|
||||
gap: 15rpx;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pay-tab {
|
||||
flex: 1;
|
||||
min-height: 44px;
|
||||
padding: 0 10rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 18rpx 0;
|
||||
color: #93979b;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1rpx solid #2a3448;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
color: #b9aa84;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(21, 18, 15, 0.96) 0%,
|
||||
rgba(13, 11, 9, 0.96) 100%
|
||||
);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 16px;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.3;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
background: linear-gradient(to right, #e5b932, #c5971e);
|
||||
color: #0b1520;
|
||||
font-weight: bold;
|
||||
border-color: #e5b932;
|
||||
color: #231705;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-color: rgba(242, 223, 182, 0.5);
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
}
|
||||
|
||||
.recharge {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
.navbar-lab {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||||
color: #f7ecd0;
|
||||
|
||||
::v-deep .u-navbar {
|
||||
background: rgba(0, 0, 0, 0.72) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .u-picker__view__column__item {
|
||||
color: #f3e3b8 !important;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar {
|
||||
background: #15120f !important;
|
||||
border-bottom-color: rgba(223, 189, 120, 0.12) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar__title {
|
||||
color: #f4dfae !important;
|
||||
}
|
||||
|
||||
.navbar-lab {
|
||||
color: #fbf2de;
|
||||
font-weight: 700;
|
||||
font-size: 19px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 5px 5px;
|
||||
border: 2px solid #947b2b;
|
||||
background: #222222;
|
||||
width: calc(100% - 24px);
|
||||
max-width: 760px;
|
||||
margin: 10px auto 0;
|
||||
padding: 18px 16px 22px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 13, 11, 0.96) 0%,
|
||||
rgba(10, 8, 7, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.18);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
||||
|
||||
.picker-view {
|
||||
border: 2px solid #947b2b;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
&.input {
|
||||
border: 1px solid #dadbde;
|
||||
min-height: 56px;
|
||||
margin-bottom: 14px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 21, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
::v-deep .u-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content {
|
||||
min-height: 54px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content__field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep input {
|
||||
color: #f7ecd0 !important;
|
||||
font-size: 15px !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
::v-deep input::placeholder {
|
||||
color: rgba(245, 228, 184, 0.4) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-text__value {
|
||||
color: #baa67f !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-bottom: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(23, 19, 16, 0.92) 0%,
|
||||
rgba(14, 12, 10, 0.92) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
&.qrcode {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 25px 0;
|
||||
padding: 20px 14px;
|
||||
|
||||
::v-deep .u-image {
|
||||
border-radius: 18px !important;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
.lab {
|
||||
color: #757272;
|
||||
margin: 10px 0;
|
||||
color: #b9aa84;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.box {
|
||||
::v-deep .u-input {
|
||||
min-height: 48px;
|
||||
padding: 0 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content {
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
::v-deep input {
|
||||
color: #f7ecd0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
color: #0b1520 !important;
|
||||
min-width: 76px;
|
||||
height: 34px;
|
||||
font-weight: 700;
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
color: #231705 !important;
|
||||
box-shadow: 0 8px 18px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.type {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
background: #e5b932;
|
||||
border-radius: 40px;
|
||||
min-width: 86px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-radius: 999px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
font-weight: 600;
|
||||
margin: 10px auto;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
color: #231705;
|
||||
box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
line-height: 45px;
|
||||
height: 45px;
|
||||
color: #0b1520 !important;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
height: 50px !important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
border: none !important;
|
||||
border-radius: 16px !important;
|
||||
color: #231705 !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
|
||||
.tip {
|
||||
color: #cc4c0e;
|
||||
color: #bca47a;
|
||||
font-size: 13px;
|
||||
text-align: justify;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
.mb60 {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ============ 内嵌 USDT 二维码弹窗 ============ */
|
||||
/* ============ 内嵌 USDT / 银行二维码弹窗 ============ */
|
||||
.epay-qr-box {
|
||||
width: 600rpx;
|
||||
padding: 30rpx 34rpx 24rpx;
|
||||
background: #1a1206;
|
||||
border: 1rpx solid #907545;
|
||||
border-radius: 10px;
|
||||
color: #e5b932;
|
||||
width: 620rpx;
|
||||
padding: 34rpx 34rpx 28rpx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(20, 16, 12, 0.98) 0%,
|
||||
rgba(11, 9, 7, 0.98) 100%
|
||||
);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.18);
|
||||
border-radius: 20rpx;
|
||||
color: #f0dbab;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.epay-qr-close {
|
||||
position: absolute;
|
||||
top: 8rpx;
|
||||
right: 18rpx;
|
||||
color: #aaa;
|
||||
font-size: 40rpx;
|
||||
top: 12rpx;
|
||||
right: 16rpx;
|
||||
color: #b7a37d;
|
||||
font-size: 38rpx;
|
||||
line-height: 1;
|
||||
padding: 10rpx 16rpx;
|
||||
}
|
||||
|
||||
.epay-qr-title {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8rpx;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10rpx;
|
||||
color: #f7e6bd;
|
||||
}
|
||||
|
||||
.epay-qr-status {
|
||||
width: fit-content;
|
||||
min-width: 180rpx;
|
||||
margin: 0 auto 20rpx;
|
||||
padding: 8rpx 18rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
&.waiting { color: #e5b932; }
|
||||
&.success { color: #7cd992; }
|
||||
&.expired { color: #e74c3c; }
|
||||
font-size: 22rpx;
|
||||
border-radius: 999rpx;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
|
||||
&.waiting {
|
||||
color: #e5b932;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #7cd992;
|
||||
}
|
||||
|
||||
&.expired {
|
||||
color: #e67e72;
|
||||
}
|
||||
}
|
||||
|
||||
.epay-qr-img-wrap {
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
margin: 0 auto 24rpx;
|
||||
background: #fff;
|
||||
padding: 14rpx;
|
||||
border-radius: 8rpx;
|
||||
padding: 16rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10rpx 26rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.epay-qr-field {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.epay-qr-label {
|
||||
color: #bbb;
|
||||
color: #ab9770;
|
||||
font-size: 22rpx;
|
||||
margin-bottom: 6rpx;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.epay-qr-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
border: 1rpx solid #5a4323;
|
||||
border-radius: 6rpx;
|
||||
padding: 12rpx 14rpx;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.12);
|
||||
border-radius: 14rpx;
|
||||
padding: 14rpx 16rpx;
|
||||
font-size: 24rpx;
|
||||
word-break: break-all;
|
||||
|
||||
&.amount {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
color: #fff8e6;
|
||||
font-weight: 700;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
&.addr {
|
||||
color: #e5b932;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #f0dbab;
|
||||
font-family: "Courier New", monospace;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.epay-qr-btn {
|
||||
flex-shrink: 0;
|
||||
background: #c5971e;
|
||||
color: #161107;
|
||||
min-width: 90rpx;
|
||||
text-align: center;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
color: #231705;
|
||||
font-size: 22rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 4rpx;
|
||||
font-weight: bold;
|
||||
padding: 8rpx 18rpx;
|
||||
border-radius: 10rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.epay-qr-meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #bbb;
|
||||
color: #b7a37d;
|
||||
font-size: 24rpx;
|
||||
margin: 20rpx 0 12rpx;
|
||||
}
|
||||
|
||||
.epay-qr-countdown {
|
||||
color: #e5b932;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.epay-qr-tip {
|
||||
color: #e74c3c;
|
||||
color: #d58c65;
|
||||
font-size: 22rpx;
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
margin-top: 14rpx;
|
||||
opacity: 0.85;
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.alin-overlay {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0,0,0,0.6);
|
||||
background: rgba(0, 0, 0, 0.68);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.alin-pay-box {
|
||||
width: 92vw;
|
||||
height: 85vh;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||||
border: 1px solid rgba(223, 189, 120, 0.16);
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.alin-pay-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 15px;
|
||||
background: #1a1a2e;
|
||||
padding: 12px 16px;
|
||||
background: rgba(20, 17, 14, 0.96);
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.12);
|
||||
}
|
||||
|
||||
.alin-pay-title {
|
||||
color: #f4c46f;
|
||||
color: #f4dca3;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.alin-iframe {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
+257
-106
@@ -1,39 +1,103 @@
|
||||
<template>
|
||||
<view class="register">
|
||||
<view class="content">
|
||||
<view class="logo">
|
||||
<u--image :showLoading="false" :src="loginLogo" width="125px" height="119px" mode="scaleToFill"></u--image>
|
||||
</view>
|
||||
<u-input class="input" :focus='focusUsername' v-model="username" type="text" clearable :placeholder="$lang.enterAccount">
|
||||
<text class="text" slot="prefix">{{ $lang.account }}</text>
|
||||
</u-input>
|
||||
<u-input class="input" :focus='focusPassword' v-model="password" :password="true" :placeholder="$lang.enterPassword" autocomplete="new-password">
|
||||
<text class="text" slot="prefix">{{ $lang.password }}</text>
|
||||
</u-input>
|
||||
<u-input class="input" :focus='focusRepass' v-model="repass" :password="true" :placeholder="$lang.enterPasswordAgain">
|
||||
<text class="text" slot="prefix">{{ $lang.confirmPassword }}</text>
|
||||
</u-input>
|
||||
<u-input class="input" :focus='focusPhone' v-model="phone" type="number" clearable
|
||||
:placeholder="`${$lang.enterPhone}`">
|
||||
<view class="phone-code" slot="prefix" @click="countryShow = true">
|
||||
{{ countryData.country_code }}
|
||||
</view>
|
||||
</u-input>
|
||||
<u-input class="input" v-model="referral_code" placeholder="TC176852" :disabled="referral_disabled">
|
||||
<text class="text" slot="prefix">{{ $lang.invitationCode }}</text>
|
||||
</u-input>
|
||||
<view class="btn-box">
|
||||
<view class="btn" @tap="register()">{{ $lang.register }}</view>
|
||||
</view>
|
||||
<view class="tip" @tap="goLogin">{{ $lang.goLogin }}</view>
|
||||
</view>
|
||||
<!-- 提示 -->
|
||||
<u-toast ref="uToast" />
|
||||
<!-- 区号 -->
|
||||
<country-code class="country" :show="countryShow" :anchor="countryData.anchor_index"
|
||||
:country="countryData.country_en" @select="selectCountryTap" @close="countryShow = false"></country-code>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
<view class="register">
|
||||
<view class="content">
|
||||
<view class="logo-shell">
|
||||
<view class="logo">
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="loginLogo"
|
||||
width="125px"
|
||||
height="119px"
|
||||
mode="scaleToFill"
|
||||
></u--image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="panel">
|
||||
<u-input
|
||||
class="input"
|
||||
:focus="focusUsername"
|
||||
v-model="username"
|
||||
type="text"
|
||||
clearable
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="$lang.enterAccount"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.42); font-size: 14px;"
|
||||
>
|
||||
<text class="text" slot="prefix">{{ $lang.account }}</text>
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
:focus="focusPassword"
|
||||
v-model="password"
|
||||
:password="true"
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="$lang.enterPassword"
|
||||
autocomplete="new-password"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.42); font-size: 14px;"
|
||||
>
|
||||
<text class="text" slot="prefix">{{ $lang.password }}</text>
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
:focus="focusRepass"
|
||||
v-model="repass"
|
||||
:password="true"
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="$lang.enterPasswordAgain"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.42); font-size: 14px;"
|
||||
>
|
||||
<text class="text" slot="prefix">{{ $lang.confirmPassword }}</text>
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
:focus="focusPhone"
|
||||
v-model="phone"
|
||||
type="number"
|
||||
clearable
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
:placeholder="`${$lang.enterPhone}`"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.42); font-size: 14px;"
|
||||
>
|
||||
<view class="phone-code" slot="prefix" @click="countryShow = true">
|
||||
{{ countryData.country_code }}
|
||||
</view>
|
||||
</u-input>
|
||||
<u-input
|
||||
class="input"
|
||||
v-model="referral_code"
|
||||
border="none"
|
||||
color="#f7ecd2"
|
||||
placeholder="TC176852"
|
||||
placeholderStyle="color: rgba(245, 228, 184, 0.42); font-size: 14px;"
|
||||
:disabled="referral_disabled"
|
||||
>
|
||||
<text class="text" slot="prefix">{{ $lang.invitationCode }}</text>
|
||||
</u-input>
|
||||
<view class="btn-box">
|
||||
<view class="btn btn-primary" @tap="register()">{{
|
||||
$lang.register
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="tip" @tap="goLogin">{{ $lang.goLogin }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 提示 -->
|
||||
<u-toast ref="uToast" />
|
||||
<!-- 区号 -->
|
||||
<country-code
|
||||
class="country"
|
||||
:show="countryShow"
|
||||
:anchor="countryData.anchor_index"
|
||||
:country="countryData.country_en"
|
||||
@select="selectCountryTap"
|
||||
@close="countryShow = false"
|
||||
></country-code>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -165,86 +229,173 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.register {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: url("~@/static/images/login_bg.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: bottom left;
|
||||
overflow-y: auto;
|
||||
.register {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: url("~@/static/images/login_bg.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: bottom left;
|
||||
overflow-y: auto;
|
||||
|
||||
.content {
|
||||
width: 280px;
|
||||
padding-bottom: 50px;
|
||||
margin: 0 auto;
|
||||
.content {
|
||||
width: 86%;
|
||||
max-width: 326px;
|
||||
margin: 0 auto;
|
||||
padding: 94px 0 48px;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20%;
|
||||
}
|
||||
.logo-shell {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 15px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 125px;
|
||||
height: 119px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.phone-code {
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
.panel {
|
||||
position: relative;
|
||||
padding: 20px 18px 22px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(14, 11, 9, 0.9) 0%,
|
||||
rgba(10, 8, 7, 0.8) 100%
|
||||
);
|
||||
border: 1px solid rgba(213, 181, 103, 0.22);
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
||||
overflow: hidden;
|
||||
|
||||
.text {
|
||||
padding-right: 5px;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
right: 18px;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(213, 181, 103, 0),
|
||||
rgba(244, 221, 169, 0.82),
|
||||
rgba(213, 181, 103, 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
margin-top: 20px;
|
||||
.input {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 14px;
|
||||
background: rgba(24, 20, 17, 0.96);
|
||||
border: 1px solid rgba(213, 181, 103, 0.14);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.16);
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: url("~@/static/images/btn_bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 600;
|
||||
margin-top: 15px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .u-input__content {
|
||||
min-height: 100%;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.country {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
::v-deep .u-input__content__field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: #b38f3c;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
::v-deep input {
|
||||
color: #f7ecd2 !important;
|
||||
font-size: 15px !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep input::placeholder {
|
||||
color: rgba(245, 228, 184, 0.42) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content__prefix-icon,
|
||||
::v-deep .u-input__content__subfix-icon {
|
||||
color: #e8d39b !important;
|
||||
}
|
||||
}
|
||||
|
||||
.phone-code {
|
||||
min-width: 58px;
|
||||
margin-right: 12px;
|
||||
padding-right: 12px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #e8d39b;
|
||||
border-right: 1px solid rgba(213, 181, 103, 0.18);
|
||||
}
|
||||
|
||||
.text {
|
||||
min-width: 74px;
|
||||
margin-right: 12px;
|
||||
font-size: 13px;
|
||||
color: rgba(232, 211, 155, 0.92);
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
margin-top: 20px;
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 15px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.86;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #241804;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#f2dfb6 0%,
|
||||
#dfbd78 52%,
|
||||
#bd8d39 100%
|
||||
);
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.24),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.country {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 12px;
|
||||
color: rgba(234, 214, 160, 0.92);
|
||||
margin-top: 16px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid rgba(213, 181, 103, 0.1);
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
|
||||
&:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+480
-98
@@ -1,70 +1,105 @@
|
||||
<template>
|
||||
<view class="user">
|
||||
<view class="card">
|
||||
<view class="uid">ID:{{ userInfo.username }}</view>
|
||||
<u--image
|
||||
class="logo"
|
||||
:showLoading="true"
|
||||
:src="loginLogo"
|
||||
width="50px"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
<view class="box">
|
||||
<view class="text">{{ $lang.userBalance }}</view>
|
||||
<view class="money">{{ money }}</view>
|
||||
<view class="hero">
|
||||
<view class="card">
|
||||
<view class="card-sheen"></view>
|
||||
<view class="card-orb"></view>
|
||||
<view class="card-grid"></view>
|
||||
<view class="card-head">
|
||||
<view class="uid">ID:{{ userInfo.username }}</view>
|
||||
<view class="logo-shell">
|
||||
<u--image
|
||||
class="logo"
|
||||
:showLoading="true"
|
||||
:src="loginLogo"
|
||||
width="42px"
|
||||
height="42px"
|
||||
mode="scaleToFill"
|
||||
></u--image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box">
|
||||
<view class="text">{{ $lang.userBalance }}</view>
|
||||
<view class="money-row">
|
||||
<view class="money-icon"></view>
|
||||
<view class="money">{{ money }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u--image
|
||||
:showLoading="false"
|
||||
:src="require('static/images/card_bg.png')"
|
||||
width="100%"
|
||||
height="auto"
|
||||
mode="widthFix"
|
||||
></u--image>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view
|
||||
class="cell"
|
||||
v-for="(item, index) in userMenu"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
>
|
||||
<view class="lab">{{ item.name }}</view>
|
||||
<u-icon
|
||||
class="icon"
|
||||
name="arrow-right"
|
||||
color="#757272"
|
||||
size="16"
|
||||
></u-icon>
|
||||
<view class="section-title">{{ $lang.tip }}</view>
|
||||
<view class="menu-panel">
|
||||
<view
|
||||
class="cell"
|
||||
v-for="(item, index) in userMenu"
|
||||
:key="index"
|
||||
@click="goPath(item)"
|
||||
>
|
||||
<view class="cell-left">
|
||||
<view class="cell-dot"></view>
|
||||
<view class="lab">{{ item.name }}</view>
|
||||
</view>
|
||||
<u-icon
|
||||
class="icon"
|
||||
name="arrow-right"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="logout" @tap="modalShow = true">{{ $lang.logout }}</view>
|
||||
</view>
|
||||
<u-picker
|
||||
:title="$lang.languageSettings"
|
||||
closeOnClickOverlay
|
||||
:defaultIndex="defaultIndex"
|
||||
<u-popup
|
||||
:show="show"
|
||||
:columns="langList"
|
||||
:cancelText="$lang.cancel"
|
||||
:confirmText="$lang.confirm"
|
||||
keyName="name"
|
||||
@close="show = false"
|
||||
@cancel="show = false"
|
||||
@confirm="confirm"
|
||||
></u-picker>
|
||||
<u-modal
|
||||
:show="modalShow"
|
||||
:title="$lang.tip"
|
||||
:confirmText="$lang.confirm"
|
||||
:cancelText="$lang.cancel"
|
||||
@confirm="confirmLogout"
|
||||
@cancel="modalShow = false"
|
||||
:showCancelButton="true"
|
||||
ref="uModal"
|
||||
:asyncClose="true"
|
||||
mode="bottom"
|
||||
round="20"
|
||||
closeOnClickOverlay
|
||||
@close="closeLangPopup"
|
||||
>
|
||||
<view style="text-align: center">{{ $lang.logoutTip }}</view>
|
||||
</u-modal>
|
||||
<view class="lang-popup">
|
||||
<view class="popup-header">
|
||||
<view class="popup-action cancel" @click="closeLangPopup">{{
|
||||
$lang.cancel
|
||||
}}</view>
|
||||
<view class="popup-title">{{ $lang.languageSettings }}</view>
|
||||
<view class="popup-action confirm" @click="confirmLanguageSelection">{{
|
||||
$lang.confirm
|
||||
}}</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="popup-list">
|
||||
<view
|
||||
class="popup-item"
|
||||
:class="{ active: tempLanguageKey === item.key }"
|
||||
v-for="item in langList[0]"
|
||||
:key="item.key"
|
||||
@click="tempLanguageKey = item.key"
|
||||
>
|
||||
<text>{{ item.name }}</text>
|
||||
<u-icon
|
||||
v-if="tempLanguageKey === item.key"
|
||||
name="checkmark"
|
||||
color="#231705"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<u-popup :show="modalShow" mode="center" round="20" @close="closeLogoutModal">
|
||||
<view class="logout-modal">
|
||||
<view class="logout-title">{{ $lang.tip }}</view>
|
||||
<view class="logout-text">{{ $lang.logoutTip }}</view>
|
||||
<view class="logout-actions">
|
||||
<view class="logout-btn logout-btn-cancel" @click="closeLogoutModal">{{
|
||||
$lang.cancel
|
||||
}}</view>
|
||||
<view class="logout-btn logout-btn-confirm" @click="confirmLogout">{{
|
||||
$lang.confirm
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="mb60"></view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -78,6 +113,7 @@ export default {
|
||||
modalShow: false,
|
||||
|
||||
defaultIndex: [0],
|
||||
tempLanguageKey: "cn",
|
||||
langList: [
|
||||
[
|
||||
{ key: "en", name: "English" },
|
||||
@@ -121,6 +157,7 @@ export default {
|
||||
this.defaultIndex = [i];
|
||||
}
|
||||
});
|
||||
this.tempLanguageKey = this.language;
|
||||
this.getUserMoneyData()
|
||||
},
|
||||
methods: {
|
||||
@@ -128,8 +165,22 @@ export default {
|
||||
this.$store.commit("app/updateLanguage", item.value[0].key);
|
||||
this.show = false;
|
||||
},
|
||||
closeLangPopup() {
|
||||
this.tempLanguageKey = this.language;
|
||||
this.show = false;
|
||||
},
|
||||
confirmLanguageSelection() {
|
||||
if (this.tempLanguageKey) {
|
||||
this.$store.commit("app/updateLanguage", this.tempLanguageKey);
|
||||
}
|
||||
this.show = false;
|
||||
},
|
||||
closeLogoutModal() {
|
||||
this.modalShow = false;
|
||||
},
|
||||
goPath(item) {
|
||||
if (item.id == 0) {
|
||||
this.tempLanguageKey = this.language;
|
||||
this.show = true;
|
||||
} else if (item.id == 4 || item.id == 5 || item.id == 6) {
|
||||
uni.switchTab({
|
||||
@@ -149,6 +200,7 @@ export default {
|
||||
}
|
||||
},
|
||||
confirmLogout() {
|
||||
this.modalShow = false;
|
||||
localStorage.removeItem("userInfo");
|
||||
localStorage.removeItem("uni_id_token");
|
||||
sessionStorage.clear();
|
||||
@@ -183,83 +235,413 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||||
color: #f7ecd0;
|
||||
|
||||
.hero {
|
||||
padding: 14px 12px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 28px;
|
||||
min-height: 188px;
|
||||
border: 1px solid rgba(226, 193, 117, 0.22);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.08);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#f1d488 0%,
|
||||
#ddaf4e 42%,
|
||||
#c78f28 100%
|
||||
);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 255, 255, 0.2) 0%,
|
||||
rgba(255, 255, 255, 0.04) 26%,
|
||||
rgba(133, 88, 16, 0.08) 60%,
|
||||
rgba(78, 50, 8, 0.18) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-sheen {
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
right: -36px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 247, 218, 0.34) 0%,
|
||||
rgba(255, 247, 218, 0.06) 46%,
|
||||
rgba(255, 247, 218, 0) 74%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-orb {
|
||||
position: absolute;
|
||||
left: -34px;
|
||||
bottom: -48px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(169, 107, 20, 0.24) 0%,
|
||||
rgba(169, 107, 20, 0.08) 45%,
|
||||
rgba(169, 107, 20, 0) 76%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 241, 204, 0.14) 12%,
|
||||
transparent 12%,
|
||||
transparent 50%,
|
||||
rgba(160, 107, 22, 0.08) 50%,
|
||||
rgba(160, 107, 22, 0.08) 62%,
|
||||
transparent 62%
|
||||
),
|
||||
linear-gradient(
|
||||
28deg,
|
||||
rgba(255, 247, 228, 0.08) 14%,
|
||||
transparent 14%,
|
||||
transparent 56%,
|
||||
rgba(149, 98, 21, 0.08) 56%,
|
||||
rgba(149, 98, 21, 0.08) 70%,
|
||||
transparent 70%
|
||||
);
|
||||
background-size: 180px 180px, 220px 220px;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
z-index: 3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uid {
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
top: 25px;
|
||||
z-index: 3;
|
||||
font-size: 14px;
|
||||
color: #573d14;
|
||||
max-width: calc(100% - 82px);
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(84, 64, 25, 0.38);
|
||||
border: 1px solid rgba(113, 82, 24, 0.12);
|
||||
color: rgba(92, 61, 12, 0.92);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.logo-shell {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 247, 224, 0.12);
|
||||
border: 1px solid rgba(115, 81, 18, 0.1);
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 20px;
|
||||
z-index: 3;
|
||||
opacity: 0.96;
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
top: 55%;
|
||||
z-index: 3;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #573d14;
|
||||
width: calc(100% - 52px);
|
||||
text-align: center;
|
||||
.money {
|
||||
padding-left: 38px;
|
||||
padding-right: 36px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 4px;
|
||||
color: #5d4312;
|
||||
|
||||
.text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.money-row {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 10px auto 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.money-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0;
|
||||
background: url("/static/images/balance_icon.png") no-repeat;
|
||||
background-size: 33px auto;
|
||||
background-position: left top;
|
||||
background-size: 28px auto;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.money {
|
||||
padding: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 20px 15px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
margin: 18px 12px 0;
|
||||
|
||||
.section-title {
|
||||
margin: 0 2px 12px;
|
||||
font-size: 13px;
|
||||
color: #a9956d;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.menu-panel {
|
||||
border-radius: 24px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 13, 11, 0.96) 0%,
|
||||
rgba(10, 8, 7, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
||||
}
|
||||
|
||||
.cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
color: #deb366;
|
||||
border-bottom: 1px solid #594522;
|
||||
background: #151617;
|
||||
min-height: 58px;
|
||||
padding: 0 16px;
|
||||
color: #e1c483;
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.08);
|
||||
background: rgba(19, 17, 15, 0.82);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.cell-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cell-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
box-shadow: 0 0 0 4px rgba(223, 189, 120, 0.06);
|
||||
}
|
||||
|
||||
.lab {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #e0c283;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.logout {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
background: #e5b932;
|
||||
font-weight: 600;
|
||||
margin: 20px auto;
|
||||
border-radius: 5px;
|
||||
font-size: 15px;
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
margin: 18px auto 0;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
opacity: 0.86;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lang-popup {
|
||||
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||||
border-top: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
||||
background: rgba(21, 18, 15, 0.96);
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #f4dfae;
|
||||
}
|
||||
|
||||
.popup-action {
|
||||
min-width: 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
&.cancel {
|
||||
color: #a9956d;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
color: #dfbd78;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-list {
|
||||
max-height: 50vh;
|
||||
padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.popup-item {
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #d9c6a0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 21, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-color: rgba(242, 223, 182, 0.45);
|
||||
box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
}
|
||||
|
||||
.logout-modal {
|
||||
width: 620rpx;
|
||||
padding: 34rpx 34rpx 28rpx;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(20, 16, 12, 0.98) 0%,
|
||||
rgba(11, 9, 7, 0.98) 100%
|
||||
);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.18);
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 24rpx 60rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.logout-title {
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
color: #f4dfae;
|
||||
}
|
||||
|
||||
.logout-text {
|
||||
margin-top: 18rpx;
|
||||
color: #d9c6a0;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logout-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
margin-top: 28rpx;
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
flex: 1;
|
||||
height: 78rpx;
|
||||
border-radius: 14rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
|
||||
&.logout-btn-cancel {
|
||||
color: #d9c6a0;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
border: 1rpx solid rgba(223, 189, 120, 0.12);
|
||||
}
|
||||
|
||||
&.logout-btn-confirm {
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
box-shadow: 0 10rpx 20rpx rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
+333
-80
@@ -2,7 +2,7 @@
|
||||
<view class="withdraw">
|
||||
<u-navbar
|
||||
title=""
|
||||
bgColor="#000"
|
||||
bgColor="transparent"
|
||||
:placeholder="true"
|
||||
:fixed="true"
|
||||
leftIcon=""
|
||||
@@ -24,7 +24,7 @@
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.pleaseChoose"
|
||||
color="#93979b"
|
||||
color="#f7ecd0"
|
||||
v-model="type"
|
||||
border="none"
|
||||
>
|
||||
@@ -37,7 +37,7 @@
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
@@ -57,10 +57,10 @@
|
||||
<view class="lable">{{ $lang.walletAddress }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
color="#f7ecd0"
|
||||
clearable
|
||||
:placeholder="$lang.enterWithdrawalAddress"
|
||||
border="surround"
|
||||
border="none"
|
||||
v-model="address"
|
||||
></u-input>
|
||||
</view>
|
||||
@@ -68,10 +68,10 @@
|
||||
<view class="lable">{{ $lang.amount }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
color="#f7ecd0"
|
||||
clearable
|
||||
:placeholder="$lang.enterWithdrawalamount"
|
||||
border="surround"
|
||||
border="none"
|
||||
v-model="money"
|
||||
></u-input>
|
||||
</view>
|
||||
@@ -94,16 +94,16 @@
|
||||
</template>
|
||||
<!-- 越南银行卡提现 -->
|
||||
<template v-if="userInfo.pay_channel == 'ALIN_VN'">
|
||||
<view class="picker-view" @click="showBankPicker = true">
|
||||
<view class="picker-view" @click="openBankPicker">
|
||||
<u-input
|
||||
readonly
|
||||
:placeholder="$lang.pleaseChoose || '请选择'"
|
||||
color="#93979b"
|
||||
:placeholder="$lang.pleaseChoose"
|
||||
color="#f7ecd0"
|
||||
v-model="bankName"
|
||||
border="none"
|
||||
>
|
||||
<u--text
|
||||
:text="$lang.bankName || '银行名称'"
|
||||
:text="$lang.bankName"
|
||||
slot="prefix"
|
||||
margin="0 3px 0 0"
|
||||
type="tips"
|
||||
@@ -111,41 +111,66 @@
|
||||
<u-icon
|
||||
slot="suffix"
|
||||
name="arrow-down-fill"
|
||||
color="#757272"
|
||||
color="#b9aa84"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</u-input>
|
||||
</view>
|
||||
<u-picker
|
||||
:title="$lang.bankName || '选择银行'"
|
||||
closeOnClickOverlay
|
||||
<u-popup
|
||||
:show="showBankPicker"
|
||||
:columns="bankColumns"
|
||||
:cancelText="$lang.cancel"
|
||||
:confirmText="$lang.confirm"
|
||||
@cancel="showBankPicker = false"
|
||||
@close="showBankPicker = false"
|
||||
@confirm="confirmBank"
|
||||
></u-picker>
|
||||
mode="bottom"
|
||||
round="20"
|
||||
closeOnClickOverlay
|
||||
@close="closeBankPicker"
|
||||
>
|
||||
<view class="bank-picker-popup">
|
||||
<view class="bank-picker-header">
|
||||
<view class="bank-picker-action cancel" @click="closeBankPicker">{{
|
||||
$lang.cancel
|
||||
}}</view>
|
||||
<view class="bank-picker-title">{{ $lang.bankName }}</view>
|
||||
<view class="bank-picker-action confirm" @click="confirmBankSelection">{{
|
||||
$lang.confirm
|
||||
}}</view>
|
||||
</view>
|
||||
<scroll-view scroll-y class="bank-picker-list">
|
||||
<view
|
||||
class="bank-picker-item"
|
||||
:class="{ active: tempBankName === item.name }"
|
||||
v-for="(item, index) in bankList"
|
||||
:key="index"
|
||||
@click="selectBankOption(item)"
|
||||
>
|
||||
<text>{{ item.name }}</text>
|
||||
<u-icon
|
||||
v-if="tempBankName === item.name"
|
||||
name="checkmark"
|
||||
color="#231705"
|
||||
size="16"
|
||||
></u-icon>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<view class="list">
|
||||
<view class="lable">{{ $lang.accountName || '账户姓名' }}</view>
|
||||
<view class="lable">{{ $lang.accountName }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
color="#f7ecd0"
|
||||
clearable
|
||||
:placeholder="$lang.enterAccountName || '请输入账户姓名'"
|
||||
border="surround"
|
||||
:placeholder="$lang.enterAccountName"
|
||||
border="none"
|
||||
v-model="accountName"
|
||||
></u-input>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="lable">{{ $lang.accountNumber || '银行卡号' }}</view>
|
||||
<view class="lable">{{ $lang.accountNumber }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
color="#f7ecd0"
|
||||
clearable
|
||||
:placeholder="$lang.enterAccountNumber || '请输入银行卡号'"
|
||||
border="surround"
|
||||
:placeholder="$lang.enterAccountNumber"
|
||||
border="none"
|
||||
v-model="accountNumber"
|
||||
></u-input>
|
||||
</view>
|
||||
@@ -153,11 +178,11 @@
|
||||
<view class="lable">{{ $lang.amount }}</view>
|
||||
<u-input
|
||||
class="input"
|
||||
color="#947b2b"
|
||||
color="#f7ecd0"
|
||||
clearable
|
||||
type="number"
|
||||
:placeholder="'Tối thiểu 1,000,000 VND'"
|
||||
border="surround"
|
||||
border="none"
|
||||
v-model="money"
|
||||
></u-input>
|
||||
</view>
|
||||
@@ -191,6 +216,7 @@ export default {
|
||||
// 越南银行卡提现
|
||||
bankName: "",
|
||||
bankCode: "",
|
||||
tempBankName: "",
|
||||
accountName: "",
|
||||
accountNumber: "",
|
||||
showBankPicker: false,
|
||||
@@ -280,31 +306,45 @@ export default {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
openBankPicker() {
|
||||
this.tempBankName = this.bankName;
|
||||
this.showBankPicker = true;
|
||||
},
|
||||
closeBankPicker() {
|
||||
this.showBankPicker = false;
|
||||
},
|
||||
selectBankOption(item) {
|
||||
this.tempBankName = item.name;
|
||||
},
|
||||
// 选择银行
|
||||
confirmBank(chose) {
|
||||
this.bankName = chose.value[0];
|
||||
this.bankCode = chose.value[0];
|
||||
confirmBankSelection() {
|
||||
if (!this.tempBankName) {
|
||||
this.showBankPicker = false;
|
||||
return;
|
||||
}
|
||||
this.bankName = this.tempBankName;
|
||||
this.bankCode = this.tempBankName;
|
||||
this.showBankPicker = false;
|
||||
},
|
||||
// 越南银行卡提现
|
||||
applyWithdrawBank() {
|
||||
if (!this.bankName) {
|
||||
this.$toast({
|
||||
message: this.$lang.bankName || '请选择银行',
|
||||
message: this.$lang.bankName,
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.accountName) {
|
||||
this.$toast({
|
||||
message: this.$lang.enterAccountName || '请输入账户姓名',
|
||||
message: this.$lang.enterAccountName,
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!this.accountNumber) {
|
||||
this.$toast({
|
||||
message: this.$lang.enterAccountNumber || '请输入银行卡号',
|
||||
message: this.$lang.enterAccountNumber,
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
@@ -325,7 +365,7 @@ export default {
|
||||
}
|
||||
if (Number(this.money) > Number(this.userInfo.money)) {
|
||||
this.$toast({
|
||||
message: this.$lang.insufficientBalance || 'Số dư không đủ',
|
||||
message: this.$lang.insufficientBalance,
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
@@ -340,7 +380,7 @@ export default {
|
||||
};
|
||||
this.$toast({
|
||||
type: "loading",
|
||||
message: this.$lang.submittingApplication || '提交中...',
|
||||
message: this.$lang.submittingApplication,
|
||||
duration: 200000,
|
||||
});
|
||||
this.$api
|
||||
@@ -377,80 +417,293 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.withdraw {
|
||||
background: #0b1520;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #060505 0%, #0d0b09 100%);
|
||||
color: #f7ecd0;
|
||||
|
||||
::v-deep .u-navbar {
|
||||
background: rgba(0, 0, 0, 0.72) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-navbar__content {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
::v-deep .u-picker__view__column__item {
|
||||
color: #f3e3b8 !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar {
|
||||
background: #15120f !important;
|
||||
border-bottom-color: rgba(223, 189, 120, 0.12) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar__title {
|
||||
color: #f4dfae !important;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar__wrapper__cancel {
|
||||
color: #a9956d !important;
|
||||
}
|
||||
|
||||
::v-deep .u-toolbar__wrapper__confirm {
|
||||
color: #dfbd78 !important;
|
||||
}
|
||||
|
||||
.navbar-lab {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #fbf2de;
|
||||
font-weight: 700;
|
||||
font-size: 19px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.content {
|
||||
margin: 5px 5px;
|
||||
border: 2px solid #947b2b;
|
||||
background: #222222;
|
||||
width: calc(100% - 24px);
|
||||
max-width: 760px;
|
||||
margin: 10px auto 0;
|
||||
padding: 18px 16px 22px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 13, 11, 0.96) 0%,
|
||||
rgba(10, 8, 7, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.18);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24),
|
||||
inset 0 1px 0 rgba(255, 245, 223, 0.03);
|
||||
min-height: 400px;
|
||||
|
||||
.picker-view {
|
||||
border: 2px solid #947b2b;
|
||||
padding: 8px;
|
||||
border-radius: 5px;
|
||||
min-height: 56px;
|
||||
margin-bottom: 14px;
|
||||
padding: 0 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 21, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 16px;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
|
||||
::v-deep .u-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content {
|
||||
min-height: 54px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content__field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep input {
|
||||
color: #f7ecd0 !important;
|
||||
font-size: 15px !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
::v-deep input::placeholder {
|
||||
color: rgba(245, 228, 184, 0.4) !important;
|
||||
}
|
||||
|
||||
::v-deep .u-text__value {
|
||||
color: #baa67f !important;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-bottom: 14px;
|
||||
padding: 14px;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(23, 19, 16, 0.92) 0%,
|
||||
rgba(14, 12, 10, 0.92) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.1);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
.lab {
|
||||
color: #757272;
|
||||
margin: 10px 0;
|
||||
color: #b9aa84;
|
||||
margin: 0 0 10px;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
}
|
||||
.lable {
|
||||
text-align: left;
|
||||
color: #ddd;
|
||||
margin-top: 20px;
|
||||
font-size: 16px;
|
||||
color: #d9c6a0;
|
||||
margin-top: 0;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.money {
|
||||
font-size: 16px;
|
||||
min-height: 52px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
margin-top: 0;
|
||||
padding: 15px 0;
|
||||
color: #e5b932;
|
||||
}
|
||||
.btn {
|
||||
height: 30px;
|
||||
font-weight: 600;
|
||||
color: #0b1520 !important;
|
||||
color: #f1d392;
|
||||
font-weight: 700;
|
||||
border-radius: 16px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(27, 22, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.14);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.04);
|
||||
}
|
||||
.type {
|
||||
width: 70px;
|
||||
height: 35px;
|
||||
background: #e5b932;
|
||||
border-radius: 40px;
|
||||
min-width: 86px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-radius: 999px;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
font-weight: 600;
|
||||
margin: 10px auto;
|
||||
line-height: 36px;
|
||||
font-weight: 700;
|
||||
color: #231705;
|
||||
box-shadow: 0 8px 18px rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.input {
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
min-height: 48px;
|
||||
padding: 0 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
border-radius: 14px;
|
||||
|
||||
::v-deep .u-input__content {
|
||||
min-height: 48px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep .u-input__content__field-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
::v-deep input {
|
||||
color: #f7ecd0 !important;
|
||||
font-size: 15px !important;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
::v-deep input::placeholder {
|
||||
color: rgba(245, 228, 184, 0.4) !important;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
line-height: 45px;
|
||||
height: 45px;
|
||||
color: #0b1520 !important;
|
||||
font-weight: bold;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
height: 50px !important;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 2px;
|
||||
border: none !important;
|
||||
border-radius: 16px !important;
|
||||
color: #231705 !important;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.3px;
|
||||
box-shadow: 0 12px 24px rgba(125, 84, 22, 0.18),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.36);
|
||||
}
|
||||
.tip {
|
||||
color: #cc4c0e;
|
||||
color: #bca47a;
|
||||
font-size: 13px;
|
||||
text-align: justify;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bank-picker-popup {
|
||||
background: linear-gradient(180deg, #17130f 0%, #0d0b09 100%);
|
||||
border-top: 1px solid rgba(223, 189, 120, 0.14);
|
||||
border-radius: 20px 20px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bank-picker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(223, 189, 120, 0.1);
|
||||
background: rgba(21, 18, 15, 0.96);
|
||||
}
|
||||
|
||||
.bank-picker-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #f4dfae;
|
||||
}
|
||||
|
||||
.bank-picker-action {
|
||||
min-width: 52px;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
&.cancel {
|
||||
color: #a9956d;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.confirm {
|
||||
color: #dfbd78;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.bank-picker-list {
|
||||
max-height: 52vh;
|
||||
padding: 10px 12px calc(18px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bank-picker-item {
|
||||
min-height: 48px;
|
||||
padding: 0 14px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: #d9c6a0;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(25, 21, 18, 0.96) 0%,
|
||||
rgba(17, 14, 12, 0.96) 100%
|
||||
);
|
||||
border: 1px solid rgba(223, 189, 120, 0.12);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 244, 220, 0.03);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #231705;
|
||||
background: linear-gradient(180deg, #f2dfb6 0%, #dfbd78 52%, #bd8d39 100%);
|
||||
border-color: rgba(242, 223, 182, 0.45);
|
||||
box-shadow: 0 10px 20px rgba(125, 84, 22, 0.16),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 21 KiB |
Reference in New Issue
Block a user