增加滚动

This commit is contained in:
zhx 2026-06-01 17:36:04 +08:00
parent a7ac5fcd61
commit d33cbbcdac
10 changed files with 2328 additions and 1 deletions

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<title>Recharge Center</title>
<link rel="stylesheet" href="./style.css?v=20260519-0100" />
<link rel="stylesheet" href="./style.css?v=20260601-0100" />
</head>
<body>
<div class="recharge-center" aria-label="Recharge Center" data-i18n-aria="page_label" data-loading="true">

View File

@ -946,6 +946,7 @@ button {
.history-dialog {
width: min(100%, 390px);
grid-template-rows: auto minmax(0, 1fr);
}
.whatsapp-dialog {
@ -1006,8 +1007,11 @@ button {
.history-body {
display: grid;
gap: 12px;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0 16px 18px;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
}

224
h5/recharge/index.html Normal file
View File

@ -0,0 +1,224 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
/>
<meta name="format-detection" content="telephone=no" />
<title>Recharge Center</title>
<link rel="stylesheet" href="./style.css?v=20260601-0400" />
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app" v-cloak>
<div class="page" :dir="isRtl ? 'rtl' : 'ltr'">
<header class="topbar">
<button class="icon-button" type="button" :aria-label="text.back" @click="closePage">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M15 5 8 12l7 7" />
</svg>
</button>
<h1>{{ text.title }}</h1>
<div class="language-switcher" @click.stop>
<button
class="language-button"
type="button"
:aria-label="text.languageButtonAria"
:aria-expanded="languageMenuOpen ? 'true' : 'false'"
@click="toggleLanguageMenu"
>
{{ languageLabel }}
</button>
<div class="language-menu" v-show="languageMenuOpen">
<button
v-for="language in languages"
:key="language.type"
type="button"
:class="{ 'is-active': language.type === lang }"
:aria-pressed="language.type === lang ? 'true' : 'false'"
@click="applyLanguage(language.type)"
>
{{ language.label }}
</button>
</div>
</div>
</header>
<main class="content" @click="closeLanguageMenu">
<section v-if="paymentReturn" class="notice" :class="paymentReturn.type">
<strong>{{ paymentReturn.title }}</strong>
<span>{{ paymentReturn.message }}</span>
</section>
<section v-if="!authenticated && !isMock" class="notice warning">
<strong>{{ text.authMissingTitle }}</strong>
<span>{{ text.authMissingDesc }}</span>
</section>
<section v-if="selfMode && !targetProfile" class="panel">
<div class="empty-state">{{ searching ? text.loadingAccount : (statusText || text.loadingAccount) }}</div>
</section>
<section v-if="!selfMode" class="panel search-panel">
<div class="section-head">
<h3>{{ text.searchTitle }}</h3>
</div>
<form class="search-form" @submit.prevent="searchAccount">
<input
v-model.trim="account"
type="text"
inputmode="text"
autocomplete="off"
:placeholder="text.accountPlaceholder"
/>
<button type="submit" :disabled="searching || !account">
{{ searching ? text.searching : text.search }}
</button>
</form>
<p class="guide-text">{{ text.searchGuide }}</p>
<p v-if="statusText" class="status" :class="statusType">{{ statusText }}</p>
</section>
<section v-if="targetProfile" class="panel account-panel">
<div class="avatar-wrap">
<img v-if="avatarUrl(targetProfile)" :src="avatarUrl(targetProfile)" alt="" @error="hideBrokenImage" />
<span v-else>{{ fallbackInitial(targetProfile) }}</span>
</div>
<div class="account-copy">
<div class="role-row">
<span class="role-pill" :class="{ dealer: isDealer }">{{ roleLabel }}</span>
<span v-if="isDealer" class="role-pill fee">{{ text.lowFee }}</span>
</div>
<h3>{{ profileName(targetProfile) }}</h3>
<p>{{ text.userId }} {{ profileAccount(targetProfile) }}</p>
<p v-if="selectedCountry">{{ text.country }} {{ countryName(selectedCountry) }}</p>
</div>
<button v-if="!selfMode" class="mini-button" type="button" @click="resetTarget">{{ text.change }}</button>
</section>
<section v-if="targetProfile" class="panel methods-panel">
<div class="section-head">
<h3>{{ text.packageTitle }}</h3>
</div>
<div v-if="loadingOptions" class="empty-state">{{ text.loading }}</div>
<template v-else>
<div v-if="commodity.length" class="package-grid">
<button
v-for="goods in commodity"
:key="goods.id"
class="package-button"
:class="{ active: selectedGoodsId === String(goods.id) }"
type="button"
:disabled="ordering"
@click="selectGoods(goods)"
>
<span class="coin-mark"></span>
<strong>{{ goods.content || goods.name || '-' }}</strong>
<span>{{ formatPrice(goods) }}</span>
<small v-if="goods.awardContent">{{ goods.awardContent }}</small>
</button>
</div>
<div v-else class="empty-state">{{ text.noPackage }}</div>
<div class="section-head payment-head">
<h3>{{ text.methodTitle }}</h3>
</div>
<div v-if="visibleChannels.length" class="channel-list">
<button
v-for="channel in visibleChannels"
:key="channelKey(channel)"
class="channel-button"
:class="{ usdt: isUsdtTrc20Channel(channel), active: selectedChannelKey === channelKey(channel) }"
type="button"
:disabled="ordering"
@click="selectChannel(channel)"
>
<div class="method-icon">
<img v-if="channelIcon(channel)" :src="channelIcon(channel)" alt="" />
<span v-else>{{ channelName(channel).slice(0, 1) }}</span>
</div>
<div class="channel-copy">
<h4>{{ channelName(channel) }}</h4>
</div>
<span v-if="isUsdtTrc20Channel(channel)" class="method-badge">USDT TRC20</span>
</button>
</div>
<div v-else class="empty-state">{{ text.noOptions }}</div>
<button
class="create-order-button"
type="button"
:disabled="ordering || !selectedChannel || !selectedGoods"
@click="createOrder"
>
{{ ordering ? text.creatingOrder : text.createOrder }}
</button>
</template>
</section>
</main>
<div v-if="orderResult" class="sheet-mask" @click="orderResult = null">
<section class="result-sheet" @click.stop>
<button class="sheet-close" type="button" @click="orderResult = null">&times;</button>
<div class="result-icon" :class="orderResult.type"></div>
<h3>{{ orderResult.title }}</h3>
<p>{{ orderResult.message }}</p>
<dl v-if="orderResult.orderNo">
<dt>{{ text.orderNo }}</dt>
<dd>{{ orderResult.orderNo }}</dd>
</dl>
<button class="primary-wide" type="button" @click="orderResult = null">{{ text.done }}</button>
</section>
</div>
<div v-if="usdtModalOpen" class="sheet-mask usdt-mask">
<section class="usdt-dialog" @click.stop>
<button class="sheet-close" type="button" :aria-label="text.done" @click="closeUsdtModal">&times;</button>
<h3>{{ text.usdtOrderTitle }}</h3>
<div class="field-block">
<label>{{ text.trc20Address }}</label>
<div class="copy-row">
<button class="address-value" type="button" @click="copyUsdtAddress">{{ usdtAddressText }}</button>
<button class="copy-button" type="button" @click="copyUsdtAddress">{{ text.copy }}</button>
</div>
</div>
<div class="field-block">
<label>{{ text.amount }}</label>
<div class="readonly-amount">{{ formatPrice(selectedGoods) }}</div>
</div>
<form class="usdt-form" @submit.prevent="queryUsdtPaymentStatus">
<div class="field-block">
<label for="usdtOrderInput">{{ text.orderInputLabel }}</label>
<input
id="usdtOrderInput"
v-model.trim="usdtOrderInput"
class="usdt-input"
type="text"
inputmode="text"
autocomplete="off"
:placeholder="text.orderInputPlaceholder"
/>
</div>
<p v-if="usdtOrderError" class="status error">{{ usdtOrderError }}</p>
<button class="primary-wide" type="submit" :disabled="queryingPayment || !usdtOrderInput">
{{ queryingPayment ? text.queryingStatus : text.queryPaymentStatus }}
</button>
</form>
</section>
</div>
<div v-if="toastText" class="toast">{{ toastText }}</div>
</div>
</div>
<script src="./script.js?v=20260601-0400"></script>
</body>
</html>

View File

@ -0,0 +1,54 @@
{
"documentTitle": "مركز الشحن",
"back": "رجوع",
"title": "مركز الشحن",
"languageButtonAria": "تغيير اللغة",
"authMissingTitle": "لم يتم العثور على رمز الدخول",
"authMissingDesc": "افتح هذه الصفحة من التطبيق أو أضف الرمز في الرابط.",
"searchTitle": "البحث عن الحساب",
"searchGuide": "تأكد من الحساب قبل الدفع. لا يمكن رد عمليات الشحن المكتملة.",
"loadingAccount": "جار تحميل الحساب...",
"accountPlaceholder": "أدخل معرف المستخدم",
"search": "بحث",
"searching": "جار البحث...",
"userId": "المعرف:",
"country": "الدولة:",
"normalUser": "مستخدم عادي",
"dealer": "تاجر",
"superDealer": "تاجر مميز",
"lowFee": "رسوم منخفضة",
"change": "تغيير",
"packageTitle": "باقة الشحن",
"methodTitle": "طرق الدفع",
"selectPackageFirst": "اختر باقة أولا.",
"selectPaymentMethod": "اختر طريقة دفع أولا.",
"createOrder": "إنشاء طلب",
"creatingOrder": "جار الإنشاء...",
"usdtOrderTitle": "طلب USDT TRC20",
"trc20Address": "عنوان TRC20",
"copy": "نسخ",
"copied": "تم النسخ",
"amount": "المبلغ",
"orderInputLabel": "أدخل رقم الطلب (عنوان التحويل)",
"orderInputPlaceholder": "أدخل رقم الطلب",
"queryPaymentStatus": "الاستعلام عن حالة الدفع",
"queryingStatus": "جار الاستعلام...",
"paymentPending": "لم يتم تأكيد الدفع بعد.",
"paymentStatusFailed": "فشل الاستعلام عن حالة الدفع.",
"loading": "جار التحميل...",
"noOptions": "لا توجد طرق شحن متاحة.",
"searchFirst": "ابحث عن الحساب أولا.",
"orderNo": "رقم الطلب",
"done": "تم",
"paymentSuccessTitle": "تم الدفع بنجاح",
"paymentSuccessMessage": "تم إرجاع نتيجة الطلب.",
"paymentFailTitle": "فشل الدفع",
"paymentFailMessage": "يرجى إعادة المحاولة أو تغيير طريقة الدفع.",
"userNotFound": "لم يتم العثور على معلومات المستخدم",
"noCountry": "لا توجد دولة مدعومة",
"noPackage": "لا توجد باقات شحن",
"paymentUnavailable": "الدفع غير متاح",
"orderCreated": "تم إنشاء الطلب",
"orderCreatedMessage": "يرجى إكمال الدفع حسب تعليمات قناة الدفع.",
"redirecting": "جار التحويل إلى الدفع..."
}

View File

@ -0,0 +1,54 @@
{
"documentTitle": "Recharge Center",
"back": "Back",
"title": "Recharge Center",
"languageButtonAria": "Change language",
"authMissingTitle": "Login token not found",
"authMissingDesc": "Open this page from the app or include token in the URL.",
"searchTitle": "Find account",
"searchGuide": "Confirm the account before payment. Completed recharges cannot be refunded.",
"loadingAccount": "Loading account...",
"accountPlaceholder": "Enter User ID",
"search": "Search",
"searching": "Searching...",
"userId": "ID:",
"country": "Country:",
"normalUser": "Normal user",
"dealer": "Dealer",
"superDealer": "Super dealer",
"lowFee": "Low fee",
"change": "Change",
"packageTitle": "Recharge package",
"methodTitle": "Payment methods",
"selectPackageFirst": "Select a package first.",
"selectPaymentMethod": "Select a payment method first.",
"createOrder": "Create order",
"creatingOrder": "Creating...",
"usdtOrderTitle": "USDT TRC20 order",
"trc20Address": "TRC20 address",
"copy": "Copy",
"copied": "Copied",
"amount": "Amount",
"orderInputLabel": "Enter order no. (transfer address)",
"orderInputPlaceholder": "Enter order no.",
"queryPaymentStatus": "Query payment status",
"queryingStatus": "Querying...",
"paymentPending": "Payment is not confirmed yet.",
"paymentStatusFailed": "Payment status query failed.",
"loading": "Loading...",
"noOptions": "No available recharge methods.",
"searchFirst": "Search an account first.",
"orderNo": "Order no.",
"done": "Done",
"paymentSuccessTitle": "Payment successful",
"paymentSuccessMessage": "The order result has been returned.",
"paymentFailTitle": "Payment failed",
"paymentFailMessage": "Please retry or change payment method.",
"userNotFound": "User info not found",
"noCountry": "No supported country",
"noPackage": "No recharge packages",
"paymentUnavailable": "Payment not available",
"orderCreated": "Order created",
"orderCreatedMessage": "Please finish payment according to the payment channel instructions.",
"redirecting": "Redirecting to payment..."
}

View File

@ -0,0 +1,54 @@
{
"documentTitle": "Pusat Isi Ulang",
"back": "Kembali",
"title": "Pusat Isi Ulang",
"languageButtonAria": "Ubah bahasa",
"authMissingTitle": "Token login tidak ditemukan",
"authMissingDesc": "Buka halaman ini dari aplikasi atau sertakan token di URL.",
"searchTitle": "Cari akun",
"searchGuide": "Konfirmasi akun sebelum membayar. Isi ulang yang selesai tidak dapat dikembalikan.",
"loadingAccount": "Memuat akun...",
"accountPlaceholder": "Masukkan User ID",
"search": "Cari",
"searching": "Mencari...",
"userId": "ID:",
"country": "Negara:",
"normalUser": "Pengguna biasa",
"dealer": "Dealer",
"superDealer": "Dealer super",
"lowFee": "Biaya rendah",
"change": "Ubah",
"packageTitle": "Paket isi ulang",
"methodTitle": "Metode pembayaran",
"selectPackageFirst": "Pilih paket terlebih dahulu.",
"selectPaymentMethod": "Pilih metode pembayaran terlebih dahulu.",
"createOrder": "Buat pesanan",
"creatingOrder": "Membuat...",
"usdtOrderTitle": "Pesanan USDT TRC20",
"trc20Address": "Alamat TRC20",
"copy": "Salin",
"copied": "Disalin",
"amount": "Jumlah",
"orderInputLabel": "Masukkan no. pesanan (alamat transfer)",
"orderInputPlaceholder": "Masukkan no. pesanan",
"queryPaymentStatus": "Cek status pembayaran",
"queryingStatus": "Mengecek...",
"paymentPending": "Pembayaran belum dikonfirmasi.",
"paymentStatusFailed": "Gagal mengecek status pembayaran.",
"loading": "Memuat...",
"noOptions": "Tidak ada metode isi ulang.",
"searchFirst": "Cari akun terlebih dahulu.",
"orderNo": "No. pesanan",
"done": "Selesai",
"paymentSuccessTitle": "Pembayaran berhasil",
"paymentSuccessMessage": "Hasil pesanan telah kembali.",
"paymentFailTitle": "Pembayaran gagal",
"paymentFailMessage": "Coba lagi atau ganti metode pembayaran.",
"userNotFound": "Info pengguna tidak ditemukan",
"noCountry": "Tidak ada negara yang didukung",
"noPackage": "Tidak ada paket isi ulang",
"paymentUnavailable": "Pembayaran tidak tersedia",
"orderCreated": "Pesanan dibuat",
"orderCreatedMessage": "Selesaikan pembayaran sesuai instruksi kanal pembayaran.",
"redirecting": "Mengalihkan ke pembayaran..."
}

View File

@ -0,0 +1,54 @@
{
"documentTitle": "Yukleme Merkezi",
"back": "Geri",
"title": "Yukleme Merkezi",
"languageButtonAria": "Dili degistir",
"authMissingTitle": "Giris tokeni bulunamadi",
"authMissingDesc": "Bu sayfayi uygulamadan acin veya URL'ye token ekleyin.",
"searchTitle": "Hesap bul",
"searchGuide": "Odeme oncesi hesabi kontrol edin. Tamamlanan yuklemeler iade edilemez.",
"loadingAccount": "Hesap yukleniyor...",
"accountPlaceholder": "Kullanici ID gir",
"search": "Ara",
"searching": "Araniyor...",
"userId": "ID:",
"country": "Ulke:",
"normalUser": "Normal kullanici",
"dealer": "Bayi",
"superDealer": "Super bayi",
"lowFee": "Dusuk ucret",
"change": "Degistir",
"packageTitle": "Yukleme paketi",
"methodTitle": "Odeme yontemleri",
"selectPackageFirst": "Once bir paket secin.",
"selectPaymentMethod": "Once bir odeme yontemi secin.",
"createOrder": "Siparis olustur",
"creatingOrder": "Olusturuluyor...",
"usdtOrderTitle": "USDT TRC20 siparisi",
"trc20Address": "TRC20 adresi",
"copy": "Kopyala",
"copied": "Kopyalandi",
"amount": "Tutar",
"orderInputLabel": "Siparis no. girin (transfer adresi)",
"orderInputPlaceholder": "Siparis no. girin",
"queryPaymentStatus": "Odeme durumunu sorgula",
"queryingStatus": "Sorgulaniyor...",
"paymentPending": "Odeme henuz onaylanmadi.",
"paymentStatusFailed": "Odeme durumu sorgulanamadi.",
"loading": "Yukleniyor...",
"noOptions": "Kullanilabilir yukleme yontemi yok.",
"searchFirst": "Once bir hesap arayin.",
"orderNo": "Siparis no.",
"done": "Tamam",
"paymentSuccessTitle": "Odeme basarili",
"paymentSuccessMessage": "Siparis sonucu geri dondu.",
"paymentFailTitle": "Odeme basarisiz",
"paymentFailMessage": "Lutfen tekrar deneyin veya odeme yontemini degistirin.",
"userNotFound": "Kullanici bilgisi bulunamadi",
"noCountry": "Desteklenen ulke yok",
"noPackage": "Yukleme paketi yok",
"paymentUnavailable": "Odeme kullanilamiyor",
"orderCreated": "Siparis olusturuldu",
"orderCreatedMessage": "Lutfen odeme kanali talimatlarina gore odemeyi tamamlayin.",
"redirecting": "Odemeye yonlendiriliyor..."
}

1111
h5/recharge/script.js Normal file

File diff suppressed because it is too large Load Diff

771
h5/recharge/style.css Normal file
View File

@ -0,0 +1,771 @@
:root {
--bg: #f5f7fb;
--surface: #ffffff;
--surface-soft: #f9fbff;
--text: #20242c;
--muted: #737b8c;
--line: #e7ebf2;
--brand: #18c7ae;
--brand-dark: #089986;
--gold: #f5bd41;
--danger: #e45757;
--warning: #b7791f;
--shadow: 0 10px 28px rgba(24, 33, 54, 0.08);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
body {
display: flex;
justify-content: center;
background: #10131a;
color: var(--text);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
button,
input {
font: inherit;
}
button {
border: 0;
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
opacity: 0.58;
}
[v-cloak] {
display: none;
}
.page {
position: relative;
width: 100%;
max-width: 440px;
min-height: 100vh;
overflow-x: hidden;
background: var(--bg);
}
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 58px;
align-items: center;
min-height: 56px;
padding: 8px 14px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 4px 14px rgba(24, 33, 54, 0.06);
direction: ltr;
}
.topbar h1 {
margin: 0;
overflow: hidden;
font-size: 18px;
font-weight: 850;
line-height: 1.2;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
}
.icon-button,
.language-button {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 4px 12px rgba(24, 33, 54, 0.07);
}
.icon-button {
width: 38px;
height: 38px;
border-radius: 50%;
}
.icon-button svg {
width: 26px;
height: 26px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2.2;
}
.language-switcher {
position: relative;
justify-self: end;
}
.language-button {
width: 42px;
height: 30px;
border: 1px solid rgba(35, 40, 46, 0.12);
border-radius: 15px;
background: rgba(255, 255, 255, 0.72);
color: #25282e;
font-size: 13px;
font-weight: 900;
}
.language-menu {
position: absolute;
z-index: 30;
top: calc(100% + 7px);
right: 0;
display: grid;
gap: 2px;
min-width: 58px;
padding: 5px;
border: 1px solid rgba(35, 40, 46, 0.1);
border-radius: 8px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 10px 26px rgba(36, 46, 60, 0.14);
}
.language-menu button {
min-height: 28px;
border-radius: 6px;
color: #25282e;
font-size: 12px;
font-weight: 900;
background: transparent;
}
.language-menu button.is-active {
background: #e6fbf8;
color: #0e8f82;
}
[dir="rtl"] .language-menu {
right: auto;
left: 0;
}
.content {
display: grid;
gap: 12px;
padding: 14px 14px 32px;
}
.panel,
.notice {
border: 1px solid rgba(231, 235, 242, 0.86);
border-radius: 8px;
background: var(--surface);
box-shadow: var(--shadow);
}
.panel {
display: grid;
gap: 14px;
padding: 16px;
}
.notice {
display: grid;
gap: 4px;
padding: 12px 14px;
font-size: 13px;
line-height: 1.35;
}
.notice strong {
font-size: 14px;
}
.notice.warning {
border-color: #f7d48b;
background: #fff8e9;
color: #74510c;
}
.notice.success {
border-color: #9be6d9;
background: #ecfffb;
color: #087565;
}
.notice.error {
border-color: #f4aaaa;
background: #fff0f0;
color: #a33f3f;
}
.section-head {
display: flex;
justify-content: space-between;
gap: 12px;
}
.section-head h3 {
margin: 0;
font-size: 16px;
font-weight: 900;
line-height: 1.2;
}
.guide-text {
margin: -4px 0 0;
color: var(--muted);
font-size: 12px;
font-weight: 700;
line-height: 1.35;
}
.search-form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.search-form input {
min-width: 0;
height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0 12px;
outline: none;
background: var(--surface-soft);
color: var(--text);
font-size: 15px;
}
.search-form input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(24, 199, 174, 0.13);
}
.search-form button,
.primary-wide {
min-height: 44px;
border-radius: 8px;
padding: 0 16px;
background: var(--brand);
color: #fff;
font-weight: 850;
box-shadow: 0 8px 18px rgba(24, 199, 174, 0.22);
}
.status {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.35;
}
.status.error {
color: var(--danger);
}
.status.success {
color: var(--brand-dark);
}
.account-panel {
grid-template-columns: 54px minmax(0, 1fr) auto;
align-items: center;
}
.avatar-wrap {
width: 54px;
height: 54px;
overflow: hidden;
border-radius: 50%;
background: linear-gradient(135deg, #e5fbf7, #fff6db);
}
.avatar-wrap img,
.avatar-wrap span {
width: 100%;
height: 100%;
}
.avatar-wrap img {
display: block;
object-fit: cover;
}
.avatar-wrap span {
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-dark);
font-size: 20px;
font-weight: 900;
}
.account-copy {
min-width: 0;
}
.role-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 5px;
}
.role-pill {
display: inline-flex;
align-items: center;
min-height: 22px;
border-radius: 999px;
padding: 0 8px;
background: #edf2f7;
color: #4a5568;
font-size: 11px;
font-weight: 850;
}
.role-pill.dealer {
background: #fff2cf;
color: #946000;
}
.role-pill.fee {
background: #e8fbf7;
color: var(--brand-dark);
}
.account-copy h3 {
margin: 0;
overflow: hidden;
font-size: 16px;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.account-copy p {
margin: 3px 0 0;
overflow: hidden;
color: var(--muted);
font-size: 12px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.mini-button {
min-height: 34px;
border-radius: 8px;
padding: 0 10px;
background: #eef6f4;
color: var(--brand-dark);
font-size: 12px;
font-weight: 850;
}
.method-icon {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 8px;
background: #eaf7f5;
color: var(--brand-dark);
font-weight: 900;
}
.method-icon img {
width: 100%;
height: 100%;
object-fit: cover;
}
.method-head h4 {
margin: 0;
overflow: hidden;
font-size: 15px;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.method-badge {
min-height: 22px;
border-radius: 999px;
padding: 3px 8px;
background: #fff0c2;
color: #8a5c00;
font-size: 11px;
font-weight: 900;
}
.payment-head {
margin-top: 4px;
}
.package-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.package-button {
display: grid;
justify-items: center;
gap: 4px;
min-height: 106px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 8px;
background: #fff;
color: var(--text);
}
.package-button.active {
border-color: var(--brand);
background: #eafffb;
box-shadow: 0 0 0 3px rgba(24, 199, 174, 0.12);
}
.coin-mark {
width: 26px;
height: 26px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 26%, #fff8d8 0 18%, transparent 20%),
linear-gradient(145deg, #ffd963, #f0a516);
box-shadow: inset 0 -2px 0 rgba(133, 85, 0, 0.16);
}
.package-button strong {
max-width: 100%;
overflow: hidden;
font-size: 14px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.package-button span {
color: var(--brand-dark);
font-size: 13px;
font-weight: 900;
}
.package-button small {
max-width: 100%;
overflow: hidden;
color: #b7791f;
font-size: 11px;
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel-list {
display: grid;
gap: 8px;
}
.channel-button {
display: grid;
grid-template-columns: 42px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
width: 100%;
min-height: 62px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px;
background: var(--surface-soft);
color: var(--text);
text-align: left;
}
.channel-button.usdt {
border-color: rgba(245, 189, 65, 0.7);
background: linear-gradient(180deg, #fffaf0, #fff);
}
.channel-button.active {
border-color: var(--brand);
background: #eafffb;
box-shadow: 0 0 0 3px rgba(24, 199, 174, 0.12);
}
.channel-button.usdt.active {
border-color: var(--brand);
background: linear-gradient(180deg, #effffc, #fffaf0);
}
.channel-copy {
min-width: 0;
}
.channel-copy h4 {
margin: 0;
overflow: hidden;
font-size: 15px;
font-weight: 900;
text-overflow: ellipsis;
white-space: nowrap;
}
.channel-copy p {
margin: 3px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.25;
}
.create-order-button {
width: 100%;
min-height: 50px;
border-radius: 8px;
margin-top: 2px;
background: var(--brand);
color: #fff;
font-size: 15px;
font-weight: 900;
}
.create-order-button:not(:disabled) {
box-shadow: 0 8px 18px rgba(24, 199, 174, 0.22);
}
[dir="rtl"] .channel-button {
text-align: right;
}
.empty-state {
min-height: 92px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #d9dee8;
border-radius: 8px;
color: var(--muted);
font-size: 13px;
font-weight: 750;
text-align: center;
}
.sheet-mask {
position: fixed;
inset: 0;
z-index: 50;
display: flex;
align-items: flex-end;
justify-content: center;
background: rgba(15, 20, 28, 0.46);
}
.usdt-mask {
align-items: center;
padding: 18px 14px;
}
.result-sheet {
position: relative;
width: min(100%, 440px);
display: grid;
justify-items: center;
gap: 12px;
padding: 24px 18px 24px;
border-radius: 16px 16px 0 0;
background: #fff;
}
.usdt-dialog {
position: relative;
width: min(100%, 400px);
max-height: calc(100vh - 36px);
overflow: auto;
display: grid;
gap: 14px;
border-radius: 12px;
padding: 20px 16px 18px;
background: #fff;
box-shadow: 0 18px 40px rgba(18, 28, 43, 0.2);
}
.sheet-close {
position: absolute;
top: 10px;
right: 14px;
color: var(--muted);
background: transparent;
font-size: 24px;
line-height: 1;
}
.usdt-dialog h3 {
margin: 0;
padding-inline-end: 28px;
font-size: 18px;
font-weight: 900;
line-height: 1.25;
}
.field-block,
.usdt-form {
display: grid;
gap: 8px;
}
.field-block label {
color: var(--muted);
font-size: 12px;
font-weight: 850;
line-height: 1.25;
}
.copy-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
}
.address-value,
.readonly-amount,
.usdt-input {
min-width: 0;
min-height: 44px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 10px 12px;
background: var(--surface-soft);
color: var(--text);
font-size: 13px;
font-weight: 800;
}
.address-value {
overflow-wrap: anywhere;
text-align: left;
direction: ltr;
}
.readonly-amount {
display: flex;
align-items: center;
color: var(--brand-dark);
background: #eefaf8;
font-size: 15px;
font-weight: 900;
}
.copy-button {
min-height: 44px;
border-radius: 8px;
padding: 0 12px;
background: #fff0c2;
color: #8a5c00;
font-size: 12px;
font-weight: 900;
}
.usdt-input {
width: 100%;
outline: none;
font-weight: 750;
}
.usdt-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(24, 199, 174, 0.13);
}
.result-icon {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--brand);
}
.result-icon.error {
background: var(--danger);
}
.result-icon.info {
background: var(--gold);
}
.result-sheet h3 {
margin: 0;
font-size: 18px;
font-weight: 900;
}
.result-sheet p {
margin: 0;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
text-align: center;
}
.result-sheet dl {
width: 100%;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 8px 12px;
margin: 0;
padding: 12px;
border-radius: 8px;
background: var(--surface-soft);
font-size: 13px;
}
.result-sheet dt {
color: var(--muted);
}
.result-sheet dd {
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
font-weight: 850;
}
.primary-wide {
width: 100%;
}
.toast {
position: fixed;
left: 50%;
bottom: 28px;
z-index: 80;
max-width: min(360px, calc(100vw - 44px));
transform: translateX(-50%);
border-radius: 999px;
padding: 10px 14px;
background: rgba(23, 29, 38, 0.92);
color: #fff;
font-size: 13px;
font-weight: 750;
text-align: center;
}
@media (max-width: 360px) {
.package-grid {
grid-template-columns: 1fr;
}
}

View File

@ -12,6 +12,7 @@
<url><loc>https://h5.haiyihy.com/bd-center/</loc></url>
<url><loc>https://h5.haiyihy.com/bd-leader-center/</loc></url>
<url><loc>https://h5.haiyihy.com/coin-seller/</loc></url>
<url><loc>https://h5.haiyihy.com/recharge/</loc></url>
<url><loc>https://h5.haiyihy.com/games-king/</loc></url>
<url><loc>https://h5.haiyihy.com/host-center/</loc></url>
<url><loc>https://h5.haiyihy.com/invite-new-user/</loc></url>