中俄汇率换算工具

/* 工具容器 */
.exchange-tool-wrap {
max-width: 860px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif;
color: #1a1a2e;
}

/* 标题区 */
.exchange-tool-wrap .tool-header {
text-align: center;
margin-bottom: 28px;
}
.exchange-tool-wrap .tool-header h2 {
font-size: 1.6em;
color: #0052CC;
margin-bottom: 8px;
}
.exchange-tool-wrap .tool-header p {
color: #666;
font-size: 0.95em;
}

/* 实时汇率横条 */
.exchange-tool-wrap .rate-bar {
background: linear-gradient(135deg, #0052CC 0%, #0065ff 100%);
color: #fff;
padding: 12px 20px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
flex-wrap: wrap;
gap: 8px;
}
.exchange-tool-wrap .rate-bar .rate-main {
font-size: 1.15em;
font-weight: 600;
}
.exchange-tool-wrap .rate-bar .rate-update {
font-size: 0.82em;
opacity: 0.85;
}
.exchange-tool-wrap .rate-bar .rate-source {
font-size: 0.78em;
opacity: 0.7;
}

/* 换算面板 */
.exchange-tool-wrap .convert-panel {
background: #f7f9fc;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.exchange-tool-wrap .convert-row {
display: flex;
gap: 12px;
align-items: flex-end;
flex-wrap: wrap;
margin-bottom: 16px;
}
.exchange-tool-wrap .convert-row .field {
flex: 1;
min-width: 180px;
}
.exchange-tool-wrap .convert-row .field label {
display: block;
font-size: 0.85em;
color: #555;
margin-bottom: 6px;
font-weight: 500;
}
.exchange-tool-wrap .convert-row .field input,
.exchange-tool-wrap .convert-row .field select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
font-size: 1em;
transition: border-color 0.2s;
background: #fff;
box-sizing: border-box;
}
.exchange-tool-wrap .convert-row .field input:focus,
.exchange-tool-wrap .convert-row .field select:focus {
border-color: #0052CC;
outline: none;
box-shadow: 0 0 0 3px rgba(0,82,204,0.12);
}

/* 换算按钮 */
.exchange-tool-wrap .btn-swap {
background: #0052CC;
color: #fff;
border: none;
border-radius: 50%;
width: 42px;
height: 42px;
cursor: pointer;
font-size: 1.2em;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
flex-shrink: 0;
margin-bottom: 2px;
}
.exchange-tool-wrap .btn-swap:hover {
background: #0040a0;
transform: rotate(180deg);
}

/* 换算结果 */
.exchange-tool-wrap .convert-result {
background: #fff;
border: 2px solid #0052CC;
border-radius: 10px;
padding: 18px 22px;
margin-top: 16px;
}
.exchange-tool-wrap .convert-result .result-value {
font-size: 1.8em;
font-weight: 700;
color: #0052CC;
margin-bottom: 4px;
}
.exchange-tool-wrap .convert-result .result-label {
font-size: 0.88em;
color: #666;
}

/* 手续费说明 */
.exchange-tool-wrap .fee-section {
background: #fff9e6;
border: 1px solid #f0d060;
border-radius: 10px;
padding: 16px 20px;
margin-bottom: 24px;
}
.exchange-tool-wrap .fee-section h4 {
color: #b8860b;
margin: 0 0 10px 0;
font-size: 0.95em;
}
.exchange-tool-wrap .fee-section .fee-item {
display: flex;
justify-content: space-between;
padding: 5px 0;
border-bottom: 1px dashed #f0d060;
font-size: 0.9em;
}
.exchange-tool-wrap .fee-section .fee-item:last-child {
border-bottom: none;
font-weight: 600;
color: #333;
}
.exchange-tool-wrap .fee-section .fee-item .fee-label {
color: #555;
}
.exchange-tool-wrap .fee-section .fee-item .fee-value {
color: #333;
}

/* 快捷金额 */
.exchange-tool-wrap .quick-amounts {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.exchange-tool-wrap .quick-amounts button {
padding: 6px 16px;
border: 1.5px solid #0052CC;
background: #fff;
color: #0052CC;
border-radius: 20px;
cursor: pointer;
font-size: 0.88em;
transition: all 0.2s;
}
.exchange-tool-wrap .quick-amounts button:hover,
.exchange-tool-wrap .quick-amounts button.active {
background: #0052CC;
color: #fff;
}

/* 汇率趋势 */
.exchange-tool-wrap .trend-section {
background: #f7f9fc;
border-radius: 10px;
padding: 20px;
margin-bottom: 24px;
border: 1px solid #e2e8f0;
}
.exchange-tool-wrap .trend-section h4 {
margin: 0 0 14px 0;
color: #333;
font-size: 1em;
}
.exchange-tool-wrap .trend-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9em;
}
.exchange-tool-wrap .trend-table th,
.exchange-tool-wrap .trend-table td {
padding: 8px 12px;
text-align: center;
border-bottom: 1px solid #e2e8f0;
}
.exchange-tool-wrap .trend-table th {
background: #eef2f7;
color: #555;
font-weight: 600;
}
.exchange-tool-wrap .trend-table .up { color: #e53e3e; }
.exchange-tool-wrap .trend-table .down { color: #38a169; }

/* 提示框 */
.exchange-tool-wrap .tip-box {
background: #e6f7ff;
border-left: 4px solid #0052CC;
padding: 14px 18px;
border-radius: 0 8px 8px 0;
margin-bottom: 24px;
font-size: 0.9em;
color: #333;
line-height: 1.6;
}
.exchange-tool-wrap .tip-box strong {
color: #0052CC;
}

/* 免责 */
.exchange-tool-wrap .disclaimer {
text-align: center;
color: #999;
font-size: 0.8em;
margin-top: 20px;
line-height: 1.5;
}

@media (max-width: 600px) {
.exchange-tool-wrap .convert-row {
flex-direction: column;
}
.exchange-tool-wrap .convert-row .field {
min-width: 100%;
}
.exchange-tool-wrap .btn-swap {
align-self: center;
transform: rotate(90deg);
}
.exchange-tool-wrap .btn-swap:hover {
transform: rotate(270deg);
}
.exchange-tool-wrap .rate-bar {
flex-direction: column;
text-align: center;
}
}

(function() {
let currentRate = null;
let rateDate = ”;

// 获取汇率
async function fetchRate() {
try {
// 获取最近30天汇率用于趋势
const endDate = new Date().toISOString().split(‘T’)[0];
const startDate = new Date(Date.now() – 35 * 86400000).toISOString().split(‘T’)[0];

const resp = await fetch(
‘https://api.frankfurter.app/’ + startDate + ‘..’ + endDate + ‘?from=CNY&to=RUB’
);
const data = await resp.json();

const rates = data.rates;
const dates = Object.keys(rates).sort();
if (dates.length === 0) throw new Error(‘No data’);

const latestDate = dates[dates.length – 1];
currentRate = rates[latestDate].RUB;
rateDate = latestDate;

// 更新显示
document.getElementById(‘rateDisplay’).textContent = currentRate.toFixed(4);
document.getElementById(‘rateTime’).textContent = rateDate;

// 渲染趋势表（最近10天）
renderTrend(dates.slice(-10), rates);

convert();
calcFee();
} catch(e) {
console.error(‘汇率获取失败:’, e);
document.getElementById(‘rateDisplay’).textContent = ‘获取失败’;
document.getElementById(‘rateTime’).textContent = ‘请稍后刷新重试’;
document.getElementById(‘trendBody’).innerHTML = ‘

‘;

// 使用备用估算
currentRate = 12.80;
document.getElementById(‘rateDisplay’).textContent = currentRate.toFixed(4) + ‘ (估算)’;
}
}

// 渲染趋势表
function renderTrend(dates, rates) {
const tbody = document.getElementById(‘trendBody’);
let html = ”;
let prevRate = null;

for (let i = dates.length – 1; i >= 0; i–) {
const d = dates[i];
const r = rates[d].RUB;
let changeHtml = ‘–‘;
if (prevRate !== null) {
const diff = r – prevRate;
const pct = ((diff / prevRate) * 100).toFixed(2);
if (diff > 0) {
changeHtml = ‘▲ +’ + diff.toFixed(4) + ‘ (+’ + pct + ‘%)‘;
} else if (diff < 0) {
changeHtml = '▼ ‘ + diff.toFixed(4) + ‘ (‘ + pct + ‘%)‘;
} else {
changeHtml = ‘0.0000‘;
}
}
html += ‘

‘;
prevRate = r;
}
tbody.innerHTML = html;
}

// 快捷金额
window.setQuickAmount = function(amount) {
document.getElementById(‘inputAmount’).value = amount;
// 高亮按钮
document.querySelectorAll(‘.quick-amounts button’).forEach(b => b.classList.remove(‘active’));
event.target.classList.add(‘active’);
convert();
};

// 换算
window.convert = function() {
if (!currentRate) return;
const amount = parseFloat(document.getElementById(‘inputAmount’).value);
const dir = document.getElementById(‘convertDirection’).value;
const resultBox = document.getElementById(‘resultBox’);
const resultValue = document.getElementById(‘resultValue’);
const resultLabel = document.getElementById(‘resultLabel’);

if (isNaN(amount) || amount 0 && currentRate) {
if (sel.value === ‘rub_to_cny’) {
amountInput.value = (currentVal * currentRate).toFixed(2);
} else {
amountInput.value = (currentVal / currentRate).toFixed(2);
}
}
convert();
};

// 手续费计算
window.calcFee = function() {
if (!currentRate) return;
const balance = parseFloat(document.getElementById(‘ozonBalance’).value);
const method = document.getElementById(‘withdrawMethod’).value;
const detail = document.getElementById(‘feeDetail’);

if (isNaN(balance) || balance <= 0) {
detail.style.display = 'none';
return;
}
detail.style.display = 'block';

let feeRate, feeName;
switch(method) {
case 'bank':
feeRate = 0.015; feeName = '银行卡提现 (1.5%)'; break;
case 'third_party':
feeRate = 0.025; feeName = '第三方代收 (2.5%)'; break;
case 'payoneer':
feeRate = 0.01; feeName = 'Payoneer (1%+固定费)'; break;
}

const fee = balance * feeRate;
const afterFee = balance – fee;
const cnyAmount = afterFee / currentRate;

document.getElementById('feeOzonAmount').textContent = '₽ ' + balance.toLocaleString('ru-RU', {minimumFractionDigits: 2});
document.getElementById('feeWithdraw').textContent = '- ₽ ' + fee.toLocaleString('ru-RU', {minimumFractionDigits: 2}) + ' (' + feeName + ')';
document.getElementById('feeExchange').textContent = '÷ ' + currentRate.toFixed(4) + ' (RUB/CNY)';
document.getElementById('feeFinal').textContent = '¥ ' + cnyAmount.toLocaleString('zh-CN', {minimumFractionDigits: 2, maximumFractionDigits: 2});
};

// 初始化
fetchRate();
})();