Mars
4a93fcfce0
一、全局主题重构（52 文件） - 设计体系从深色/金色奢华调性全面迁移至 Pinnacle 风格的清爽专业调性 - 主色：深海蓝 #003D6B，辅色：橙色 #F8971F / #E8870A（赔率强调色） - 背景从纯黑/深灰改为白色/浅灰 (#F5F7FA, #E8EDF2) - 更新 CSS 变量设计令牌体系：--primary, --border, --text-muted, --bg-body, --bg-hover, --radius-sm 等 - styles.css 全量重写，所有组件 scoped CSS 同步适配 二、紧凑布局优化 - 首页：BannerCarousel 轮播高度缩减 (clamp 148→120px)，MatchBetCard 内边距/间距/字号全面收紧 - 首页：赛事卡片 padding 14px→10px，队旗尺寸 72×48→56×38，VS 区域缩小 - 个人中心：钱包横幅宽高比 2/1→1.75/1，设置单元格 min-height 48→42px - 钱包页：交易行 padding/字号收紧，金额字号 15→14px - MainLayout：顶栏高度 50→48px，底部导航间距微调 三、对比度与可读性增强 - 赛事详情/投注页背景从透明加深至 #E8EDF2 - 所有卡片边框从 #E5E7EB 加深至 #CBD5E1，阴影强度提升 - 盘口选择面板背景 #F5F7FA→#EDF0F4，增加 border-top 分隔线 - 赔率颜色从 #F8971F 加深至 #E8870A，选中态 border-width 加粗至 2px - 标签字号增大并加粗 (font-weight: 600)，颜色从 #6B7280 加深至 #4B5563 四、首页快捷入口 & 个人中心网格布局 - 首页新增 4 宫格快捷入口（投注/充值/账单/活动），彩色图标区分功能 - 个人中心重构为「4 宫格快捷操作 + 列表」结构：钱包/充值/返水/记录 - 移除原个人中心金色入口列表项，精简设置列表为修改资料/投注规则/语言 五、顶部导航栏重设计 - Logo 从 img 标签替换为内联 SVG 纯文字：THE(灰) + BET(深蓝) + 365(橙) - 客服按钮改为纯图标圆形按钮 (32×32px)，增加竖线分隔符 - Chip 高度 34→32px，间距 8→6px - 底部导航激活态指示条加粗至 2.5px，左右缩进从 22% 调至 18% 六、SVG Favicon - 新增纯路径 SVG favicon（无 <text> 元素，确保浏览器 favicon 沙箱兼容） - 深蓝圆角方块 + 白色 "B" 字母路径 + 橙色圆点 + 白色 "365" 数字路径 - index.html 更新 favicon 引用为 /favicon.svg 🤖 Generated with [Qoder][https://qoder.com]
667 lines
19 KiB
Vue
667 lines
19 KiB
Vue
<script setup lang="ts">
|
||
import { ref, computed, onMounted } from 'vue';
|
||
import { useRouter, useRoute } from 'vue-router';
|
||
import { useI18n } from 'vue-i18n';
|
||
import imageCompression from 'browser-image-compression';
|
||
import api from '../api';
|
||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||
|
||
const router = useRouter();
|
||
const route = useRoute();
|
||
const { t } = useI18n();
|
||
|
||
const reapplyOrderId = computed(() => {
|
||
const id = route.query.orderId;
|
||
return typeof id === 'string' && id ? id : '';
|
||
});
|
||
const isReapply = computed(() => !!reapplyOrderId.value);
|
||
|
||
interface PaymentMethod {
|
||
id: string;
|
||
methodType: string;
|
||
bankName: string | null;
|
||
accountHolder: string | null;
|
||
accountNumber: string | null;
|
||
usdtAddress: string | null;
|
||
qrCodeUrl: string | null;
|
||
displayName: string | null;
|
||
}
|
||
|
||
const methodType = ref<'BANK' | 'USDT'>('BANK');
|
||
const methods = ref<PaymentMethod[]>([]);
|
||
const selectedMethod = ref<PaymentMethod | null>(null);
|
||
const amount = ref<string>('');
|
||
const screenshotFile = ref<File | null>(null);
|
||
const screenshotPreview = ref<string>('');
|
||
const loading = ref(true);
|
||
const submitting = ref(false);
|
||
const success = ref(false);
|
||
const orderNo = ref('');
|
||
const compressing = ref(false);
|
||
|
||
const bankMethods = computed(() => methods.value.filter((m) => m.methodType === 'BANK'));
|
||
const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
|
||
const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);
|
||
|
||
function applyReapplyQuery() {
|
||
const type = route.query.methodType;
|
||
if (type === 'BANK' || type === 'USDT') {
|
||
methodType.value = type;
|
||
}
|
||
|
||
const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
|
||
if (methodId) {
|
||
const match = methods.value.find((m) => m.id === methodId);
|
||
if (match) {
|
||
selectedMethod.value = match;
|
||
}
|
||
}
|
||
|
||
if (!selectedMethod.value && currentMethods.value.length) {
|
||
selectedMethod.value = currentMethods.value[0];
|
||
}
|
||
|
||
const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
|
||
const parsedAmount = parseFloat(amountQuery);
|
||
if (amountQuery && parsedAmount > 0) {
|
||
amount.value = amountQuery;
|
||
}
|
||
}
|
||
|
||
async function fetchMethods() {
|
||
loading.value = true;
|
||
try {
|
||
const { data } = await api.get('/player/payment-methods');
|
||
methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
|
||
if (isReapply.value) {
|
||
applyReapplyQuery();
|
||
} else if (currentMethods.value.length) {
|
||
selectedMethod.value = currentMethods.value[0];
|
||
}
|
||
} catch { /* */ } finally {
|
||
loading.value = false;
|
||
}
|
||
}
|
||
|
||
function switchType(type: 'BANK' | 'USDT') {
|
||
methodType.value = type;
|
||
selectedMethod.value = currentMethods.value.length ? currentMethods.value[0] : null;
|
||
}
|
||
|
||
function selectMethod(m: PaymentMethod) {
|
||
selectedMethod.value = m;
|
||
}
|
||
|
||
const MAX_ORIGINAL_BYTES = 10 * 1024 * 1024;
|
||
const MAX_SCREENSHOT_BYTES = 1024 * 1024;
|
||
|
||
async function compressScreenshot(file: File): Promise<File> {
|
||
const baseOptions = {
|
||
maxSizeMB: 1,
|
||
maxWidthOrHeight: 1920,
|
||
useWebWorker: true,
|
||
maxIteration: 15,
|
||
} as const;
|
||
|
||
const attempts = [
|
||
{ ...baseOptions, initialQuality: 0.85 },
|
||
{ ...baseOptions, initialQuality: 0.65, maxWidthOrHeight: 1600 },
|
||
{ ...baseOptions, initialQuality: 0.5, maxWidthOrHeight: 1280 },
|
||
];
|
||
|
||
for (const options of attempts) {
|
||
const compressed = (await imageCompression(file, options)) as File;
|
||
if (compressed.size <= MAX_SCREENSHOT_BYTES) {
|
||
return compressed;
|
||
}
|
||
}
|
||
|
||
throw new Error('COMPRESS_TOO_LARGE');
|
||
}
|
||
|
||
async function handleFileChange(event: Event) {
|
||
const input = event.target as HTMLInputElement;
|
||
const file = input.files?.[0];
|
||
if (!file) return;
|
||
|
||
if (!file.type.startsWith('image/')) {
|
||
alert(t('recharge.file_must_be_image'));
|
||
input.value = '';
|
||
return;
|
||
}
|
||
|
||
if (file.size > MAX_ORIGINAL_BYTES) {
|
||
alert(t('recharge.file_too_large'));
|
||
input.value = '';
|
||
return;
|
||
}
|
||
|
||
compressing.value = true;
|
||
try {
|
||
const compressed = await compressScreenshot(file);
|
||
screenshotFile.value = compressed;
|
||
screenshotPreview.value = URL.createObjectURL(compressed);
|
||
} catch {
|
||
alert(t('recharge.compress_failed'));
|
||
screenshotFile.value = null;
|
||
screenshotPreview.value = '';
|
||
input.value = '';
|
||
} finally {
|
||
compressing.value = false;
|
||
}
|
||
}
|
||
|
||
function removeScreenshot() {
|
||
screenshotFile.value = null;
|
||
screenshotPreview.value = '';
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
if (!selectedMethod.value) {
|
||
alert(t('recharge.select_method'));
|
||
return;
|
||
}
|
||
const amt = parseFloat(amount.value);
|
||
if (!amt || amt <= 0) {
|
||
alert(t('recharge.enter_amount'));
|
||
return;
|
||
}
|
||
if (!screenshotFile.value) {
|
||
alert(t('recharge.upload_screenshot'));
|
||
return;
|
||
}
|
||
if (screenshotFile.value.size > MAX_SCREENSHOT_BYTES) {
|
||
alert(t('recharge.compress_failed'));
|
||
return;
|
||
}
|
||
|
||
submitting.value = true;
|
||
try {
|
||
const fd = new FormData();
|
||
fd.append('amount', String(amt));
|
||
fd.append('screenshot', screenshotFile.value);
|
||
|
||
if (isReapply.value) {
|
||
fd.append('paymentMethodId', selectedMethod.value.id);
|
||
const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
|
||
const result = data.data;
|
||
orderNo.value = result?.orderNo ?? '';
|
||
success.value = true;
|
||
return;
|
||
}
|
||
|
||
fd.append('paymentMethodId', selectedMethod.value.id);
|
||
const { data } = await api.post('/player/deposit-orders', fd);
|
||
const result = data.data;
|
||
orderNo.value = result?.orderNo ?? '';
|
||
success.value = true;
|
||
} catch (e: any) {
|
||
alert(e.response?.data?.message || t('recharge.submit_failed'));
|
||
} finally {
|
||
submitting.value = false;
|
||
}
|
||
}
|
||
|
||
function goHistory() {
|
||
router.push('/wallet/recharge/history');
|
||
}
|
||
|
||
function goBack() {
|
||
router.back();
|
||
}
|
||
|
||
function resetForm() {
|
||
success.value = false;
|
||
amount.value = '';
|
||
screenshotFile.value = null;
|
||
screenshotPreview.value = '';
|
||
orderNo.value = '';
|
||
}
|
||
|
||
function copyText(text: string) {
|
||
navigator.clipboard?.writeText(text);
|
||
}
|
||
|
||
function formatCardNumber(num: string | null): string {
|
||
if (!num) return '—';
|
||
const digits = num.replace(/\s/g, '');
|
||
return digits.replace(/(\d{4})(?=\d)/g, '$1 ').trim();
|
||
}
|
||
|
||
onMounted(fetchMethods);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="recharge-page">
|
||
<div class="page-header">
|
||
<button class="back-btn" @click="goBack">‹</button>
|
||
<h2>{{ t('recharge.title') }}</h2>
|
||
<button class="history-btn" @click="goHistory">{{ t('recharge.history') }}</button>
|
||
</div>
|
||
|
||
<div v-if="loading" class="state">
|
||
<GoldSpinner :size="36" />
|
||
</div>
|
||
|
||
<div v-else-if="success" class="success-state">
|
||
<div class="success-icon">✓</div>
|
||
<h3>{{ t('recharge.submitted') }}</h3>
|
||
<p class="order-no">{{ orderNo }}</p>
|
||
<p class="success-hint">{{ t('recharge.pending_review') }}</p>
|
||
<button v-if="isReapply" class="btn-primary" @click="goHistory">{{ t('recharge.back_to_history') }}</button>
|
||
<button v-else class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
|
||
</div>
|
||
|
||
<template v-else>
|
||
<div v-if="isReapply" class="reapply-banner">{{ t('recharge.reapply_hint') }}</div>
|
||
<div class="type-tabs">
|
||
<button
|
||
:class="['tab', methodType === 'BANK' && 'active']"
|
||
@click="switchType('BANK')"
|
||
>{{ t('recharge.bank_transfer') }}</button>
|
||
<button
|
||
:class="['tab', methodType === 'USDT' && 'active']"
|
||
@click="switchType('USDT')"
|
||
>USDT</button>
|
||
</div>
|
||
|
||
<div v-if="currentMethods.length" class="methods-list">
|
||
<button
|
||
v-for="m in currentMethods"
|
||
:key="m.id"
|
||
:class="['method-pill', selectedMethod?.id === m.id && 'selected']"
|
||
@click="selectMethod(m)"
|
||
>
|
||
<span class="pill-name">{{ m.displayName || m.bankName || m.usdtAddress }}</span>
|
||
<span v-if="m.methodType === 'BANK'" class="pill-sub">{{ m.accountHolder }}</span>
|
||
</button>
|
||
</div>
|
||
<div v-else class="empty-methods">{{ t('recharge.no_methods') }}</div>
|
||
|
||
<div v-if="selectedMethod && selectedMethod.methodType === 'BANK'" class="bank-card-wrap">
|
||
<div class="bank-card-face">
|
||
<div class="bank-card-shine" aria-hidden="true" />
|
||
<div class="bank-card-deco bank-card-deco--1" aria-hidden="true" />
|
||
<div class="bank-card-deco bank-card-deco--2" aria-hidden="true" />
|
||
<div class="bank-card-top">
|
||
<div class="bank-card-bank">{{ selectedMethod.bankName }}</div>
|
||
</div>
|
||
<div class="bank-card-number-row">
|
||
<span class="bank-card-number">{{ formatCardNumber(selectedMethod.accountNumber) }}</span>
|
||
<button
|
||
type="button"
|
||
class="bank-card-copy"
|
||
:aria-label="t('recharge.account_number')"
|
||
@click="copyText(selectedMethod.accountNumber || '')"
|
||
>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="bank-card-bottom">
|
||
<div class="bank-card-holder">
|
||
<span class="bank-card-holder-label">{{ t('recharge.account_holder') }}</span>
|
||
<span class="bank-card-holder-name">{{ selectedMethod.accountHolder }}</span>
|
||
</div>
|
||
<div class="bank-card-type">DEBIT</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="selectedMethod" class="method-info">
|
||
<template v-if="selectedMethod.methodType !== 'BANK'">
|
||
<div class="info-row">
|
||
<span class="info-label">{{ t('recharge.usdt_address') }}</span>
|
||
<span class="info-value copyable" @click="copyText(selectedMethod!.usdtAddress || '')">
|
||
{{ selectedMethod.usdtAddress }}
|
||
<svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
|
||
</span>
|
||
</div>
|
||
<div v-if="selectedMethod.qrCodeUrl" class="qr-container">
|
||
<img :src="selectedMethod.qrCodeUrl" class="qr-image" />
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<label>{{ t('recharge.amount_label') }}</label>
|
||
<input
|
||
v-model="amount"
|
||
type="number"
|
||
inputmode="decimal"
|
||
:placeholder="t('recharge.amount_placeholder')"
|
||
class="amount-input"
|
||
/>
|
||
</div>
|
||
|
||
<div class="form-section">
|
||
<label>{{ t('recharge.screenshot_label') }}</label>
|
||
<div v-if="screenshotPreview" class="screenshot-preview">
|
||
<img :src="screenshotPreview" />
|
||
<button class="remove-btn" @click="removeScreenshot">✕</button>
|
||
</div>
|
||
<label v-else class="upload-area">
|
||
<input type="file" accept="image/*" @change="handleFileChange" :disabled="compressing" />
|
||
<div v-if="compressing" class="compress-hint">{{ t('recharge.compressing') }}...</div>
|
||
<div v-else class="upload-hint">{{ t('recharge.upload_hint') }}</div>
|
||
</label>
|
||
</div>
|
||
|
||
<button
|
||
class="btn-submit"
|
||
:disabled="submitting || !selectedMethod || !amount || !screenshotFile"
|
||
@click="handleSubmit"
|
||
>
|
||
<span v-if="submitting">{{ t('recharge.submitting') }}...</span>
|
||
<span v-else>{{ t('recharge.submit') }}</span>
|
||
</button>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.recharge-page { padding: 0 12px 24px; }
|
||
|
||
.page-header {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 8px 0 12px;
|
||
}
|
||
.page-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1A1A2E; }
|
||
.back-btn { background: none; border: none; color: #003D6B; font-size: 22px; cursor: pointer; padding: 0 6px; }
|
||
.history-btn { background: none; border: none; color: #003D6B; font-size: 12px; cursor: pointer; font-weight: 600; }
|
||
|
||
.state { display: flex; justify-content: center; padding: 48px; }
|
||
|
||
.reapply-banner {
|
||
margin-bottom: 12px;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
color: #DC2626;
|
||
background: rgba(220, 38, 38, 0.06);
|
||
border: 1px solid rgba(220, 38, 38, 0.2);
|
||
}
|
||
|
||
.type-tabs {
|
||
display: flex; margin-bottom: 12px;
|
||
border-radius: 6px; overflow: hidden;
|
||
border: 1px solid #E5E7EB;
|
||
}
|
||
.tab {
|
||
flex: 1; padding: 8px; border: none;
|
||
background: #FFFFFF;
|
||
color: #6B7280; font-weight: 700; font-size: 13px;
|
||
cursor: pointer; transition: all 0.2s;
|
||
}
|
||
.tab.active {
|
||
background: #003D6B; color: #FFFFFF;
|
||
}
|
||
|
||
.methods-list {
|
||
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px;
|
||
}
|
||
.method-pill {
|
||
display: flex; flex-direction: column; gap: 1px;
|
||
background: #FFFFFF;
|
||
border: 1px solid #E5E7EB;
|
||
border-radius: 6px; padding: 6px 12px;
|
||
text-align: left; cursor: pointer;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.method-pill.selected {
|
||
border-color: #0066CC;
|
||
background: rgba(0, 102, 204, 0.04);
|
||
}
|
||
.pill-name { font-weight: 700; font-size: 12px; color: #1A1A2E; }
|
||
.pill-sub { font-size: 10px; color: #6B7280; }
|
||
.empty-methods { text-align: center; color: #6B7280; padding: 20px; font-size: 12px; }
|
||
|
||
.bank-card-wrap {
|
||
margin-bottom: 16px;
|
||
perspective: 800px;
|
||
}
|
||
|
||
.bank-card-face {
|
||
position: relative;
|
||
aspect-ratio: 2 / 1;
|
||
border-radius: 14px;
|
||
padding: 14px 18px 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #003D6B 0%, #005B9F 50%, #003D6B 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.bank-card-shine {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
115deg,
|
||
transparent 30%,
|
||
rgba(255, 255, 255, 0.03) 45%,
|
||
rgba(255, 255, 255, 0.06) 50%,
|
||
rgba(255, 255, 255, 0.03) 55%,
|
||
transparent 70%
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bank-card-deco {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.bank-card-deco--1 {
|
||
width: 180px;
|
||
height: 180px;
|
||
right: -60px;
|
||
bottom: -80px;
|
||
background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 70%);
|
||
}
|
||
|
||
.bank-card-deco--2 {
|
||
width: 100px;
|
||
height: 100px;
|
||
right: 40px;
|
||
bottom: 20px;
|
||
border-color: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.bank-card-top,
|
||
.bank-card-number-row,
|
||
.bank-card-bottom {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bank-card-top {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.bank-card-bank {
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
color: #FFFFFF;
|
||
text-align: right;
|
||
letter-spacing: 0.5px;
|
||
line-height: 1.3;
|
||
max-width: 58%;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.bank-card-number-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
margin: 4px 0 2px;
|
||
}
|
||
|
||
.bank-card-number {
|
||
font-family: 'SF Mono', 'Consolas', 'Courier New', monospace;
|
||
font-size: clamp(15px, 4.2vw, 19px);
|
||
font-weight: 700;
|
||
letter-spacing: 0.14em;
|
||
color: #FFFFFF;
|
||
word-break: break-all;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.bank-card-copy {
|
||
flex-shrink: 0;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 8px;
|
||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: #FFFFFF;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
transition: background 0.15s, opacity 0.15s;
|
||
}
|
||
|
||
.bank-card-copy svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.bank-card-copy:active {
|
||
opacity: 0.65;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.bank-card-bottom {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
}
|
||
|
||
.bank-card-holder {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.bank-card-holder-label {
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.bank-card-holder-name {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #FFFFFF;
|
||
letter-spacing: 0.04em;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.bank-card-type {
|
||
flex-shrink: 0;
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
letter-spacing: 0.18em;
|
||
color: rgba(255, 255, 255, 0.5);
|
||
font-style: italic;
|
||
}
|
||
|
||
.method-info {
|
||
background: #FFFFFF;
|
||
border-radius: 8px; padding: 10px 12px;
|
||
margin-bottom: 12px;
|
||
border: 1px solid #E5E7EB;
|
||
}
|
||
.info-row {
|
||
display: flex; justify-content: space-between; align-items: baseline;
|
||
padding: 6px 0;
|
||
border-bottom: 1px solid #E5E7EB;
|
||
}
|
||
.info-row:last-child { border-bottom: none; }
|
||
.info-label { font-size: 11px; color: #6B7280; flex-shrink: 0; }
|
||
.info-value {
|
||
font-size: 13px; font-weight: 600;
|
||
word-break: break-all; text-align: right;
|
||
max-width: 60%;
|
||
color: #1A1A2E;
|
||
}
|
||
.copyable {
|
||
cursor: pointer; color: #0066CC;
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
}
|
||
.copyable:active { opacity: 0.6; }
|
||
.copy-icon { width: 14px; height: 14px; flex-shrink: 0; }
|
||
.qr-container { display: flex; justify-content: center; padding: 8px 0 4px; }
|
||
.qr-image { width: 140px; height: 140px; object-fit: contain; border-radius: 6px; background: #fff; padding: 6px; border: 1px solid #E5E7EB; }
|
||
|
||
.form-section { margin-bottom: 12px; }
|
||
.form-section label {
|
||
display: block; font-size: 11px; font-weight: 700;
|
||
color: #6B7280; margin-bottom: 4px;
|
||
}
|
||
.amount-input {
|
||
width: 100%; padding: 10px; background: #FFFFFF;
|
||
border: 1px solid #E5E7EB; border-radius: 6px;
|
||
color: #1A1A2E; font-size: 16px; font-weight: 700;
|
||
box-sizing: border-box;
|
||
}
|
||
.amount-input:focus { border-color: #0066CC; outline: none; box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15); }
|
||
|
||
.upload-area {
|
||
border: 1px dashed #0066CC;
|
||
border-radius: 6px; padding: 16px;
|
||
text-align: center; position: relative;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
background: rgba(0, 102, 204, 0.02);
|
||
}
|
||
.upload-area input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
|
||
.upload-hint { font-size: 12px; color: #6B7280; }
|
||
.compress-hint { font-size: 12px; color: #003D6B; }
|
||
.screenshot-preview { position: relative; display: inline-block; }
|
||
.screenshot-preview img { max-width: 100%; max-height: 160px; border-radius: 6px; }
|
||
.remove-btn {
|
||
position: absolute; top: 4px; right: 4px;
|
||
background: rgba(0, 0, 0, 0.6); border: none; color: #fff;
|
||
width: 20px; height: 20px; border-radius: 50%;
|
||
cursor: pointer; font-size: 11px;
|
||
}
|
||
|
||
.btn-submit {
|
||
width: 100%; padding: 12px;
|
||
background: #003D6B;
|
||
color: #FFFFFF; border: none; border-radius: 6px;
|
||
font-size: 14px; font-weight: 800;
|
||
cursor: pointer; margin-top: 8px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||
}
|
||
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }
|
||
|
||
.success-state { text-align: center; padding: 40px 16px; }
|
||
.success-icon { font-size: 40px; color: #059669; margin-bottom: 10px; }
|
||
.success-state h3 { margin: 0 0 6px; font-size: 16px; color: #1A1A2E; }
|
||
.order-no { font-family: monospace; color: #003D6B; font-size: 13px; margin: 4px 0; }
|
||
.success-hint { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
|
||
.btn-primary {
|
||
background: #003D6B;
|
||
color: #FFFFFF; border: none; border-radius: 6px;
|
||
padding: 10px 20px; font-weight: 700; font-size: 13px; cursor: pointer;
|
||
}
|
||
</style>
|