2516cc2085
- 深色主题：深蓝背景 + 毛玻璃卡片 + 金色结果数字 - 自定义底部弹窗货币选择器，替换原生白色 Picker - 换算卡片内容居中竖排布局 - 汇率信息条改为竖排独立卡片 - 实时脉冲徽章 + 蓝紫渐变互换按钮 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
85 lines
2.5 KiB
Plaintext
85 lines
2.5 KiB
Plaintext
<view class="container">
|
||
<!-- 顶部 -->
|
||
<view class="hero">
|
||
<view class="hero-row">
|
||
<view class="hero-title">汇率换算</view>
|
||
<view class="hero-badge" wx:if="{{!loading}}">
|
||
<view class="badge-dot"></view>
|
||
<text class="badge-text">实时</text>
|
||
</view>
|
||
</view>
|
||
<view class="hero-desc" wx:if="{{updatedAt}}">{{updatedAt}}</view>
|
||
<view class="hero-desc" wx:if="{{loading}}">正在同步汇率数据...</view>
|
||
</view>
|
||
|
||
<!-- 换算主卡片 -->
|
||
<view class="card converter-card">
|
||
<!-- 源币种 -->
|
||
<view class="currency-block from-block">
|
||
<text class="block-label">从</text>
|
||
<view class="currency-chip" bindtap="openFromPicker">
|
||
<text class="chip-text">{{pickerData[fromIndex]}}</text>
|
||
<text class="chip-arrow">›</text>
|
||
</view>
|
||
<input
|
||
class="amount-input"
|
||
type="digit"
|
||
value="{{amount}}"
|
||
bindinput="handleAmountInput"
|
||
placeholder="0.00"
|
||
placeholder-class="amount-placeholder"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 互换 -->
|
||
<view class="swap-zone" bindtap="handleSwap">
|
||
<view class="swap-track"></view>
|
||
<view class="swap-btn">
|
||
<text class="swap-icon">⇅</text>
|
||
</view>
|
||
<view class="swap-track"></view>
|
||
</view>
|
||
|
||
<!-- 目标币种 -->
|
||
<view class="currency-block to-block">
|
||
<text class="block-label">到</text>
|
||
<view class="currency-chip" bindtap="openToPicker">
|
||
<text class="chip-text">{{pickerData[toIndex]}}</text>
|
||
<text class="chip-arrow">›</text>
|
||
</view>
|
||
<view class="result-amount">{{result || '0.00'}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 汇率信息 -->
|
||
<view class="rate-list" wx:if="{{unitRate}}">
|
||
<view class="card rate-item">
|
||
<text class="rate-text">{{unitRate}}</text>
|
||
</view>
|
||
<view class="card rate-item">
|
||
<text class="rate-text">{{reverseRate}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 错误 -->
|
||
<view class="card error-card" wx:if="{{error}}">
|
||
<text class="error-text">{{error}}</text>
|
||
</view>
|
||
|
||
<!-- 总览入口 -->
|
||
<view class="overview-btn" bindtap="goOverview">
|
||
<view class="overview-inner">
|
||
<text class="overview-label">查看全部汇率</text>
|
||
<text class="overview-arrow">→</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<currency-picker
|
||
show="{{showPicker}}"
|
||
list="{{pickerData}}"
|
||
current="{{pickerTarget === 'from' ? fromIndex : toIndex}}"
|
||
bind:select="handlePickerSelect"
|
||
bind:close="handlePickerClose"
|
||
/>
|