体现
This commit is contained in:
qiuyuan
parent
3ccfcea326
commit
60e84f5ef2
@ -8,224 +8,201 @@
|
||||
<a-breadcrumb-item>算力点兑换</a-breadcrumb-item>
|
||||
</a-breadcrumb>
|
||||
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h1 class="page-title">算力点兑换</h1>
|
||||
<p class="page-description">使用余额兑换算力点，提升计算能力</p>
|
||||
</div>
|
||||
|
||||
<!-- 余额卡片 -->
|
||||
<a-card class="balance-card" :bordered="false">
|
||||
<div class="balance-info">
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">
|
||||
|
||||
<span class="label-text">我的余额</span>
|
||||
</div>
|
||||
<div class="balance-value">
|
||||
<span class="currency">¥</span>
|
||||
<span class="amount">{{ formatCurrency(balance) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">
|
||||
|
||||
<span class="label-text">算力点</span>
|
||||
</div>
|
||||
<div class="balance-value">
|
||||
<span class="points">{{ formatPoints(points) }}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-card>
|
||||
|
||||
|
||||
<!-- 兑换卡片 -->
|
||||
<a-card class="exchange-card" title="兑换算力点">
|
||||
<div class="exchange-content">
|
||||
<!-- 兑换金额选择 -->
|
||||
<div class="exchange-section">
|
||||
<div class="amount-options">
|
||||
<div class="section-title">选择兑换金额</div>
|
||||
<a-button v-for="option in amountOptions" :key="option.value"
|
||||
:class="['amount-option', { 'selected': selectedAmount === option.value }]"
|
||||
@click="selectAmount(option.value)" size="large">
|
||||
<div class="amount-option-content">
|
||||
<div class="amount-number">{{ option.value }}</div>
|
||||
</div>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 自定义输入 -->
|
||||
<div class="custom-amount">
|
||||
<a-input-group compact>
|
||||
<a-input v-model:value="customAmount" placeholder="输入其他金额" size="large" style="width: calc(100% - 120px)"
|
||||
@change="handleCustomAmountChange" :disabled="loading" />
|
||||
<!-- <a-button type="primary" size="large" style="width: 120px" :disabled="!isCustomAmountValid || loading"
|
||||
@click="handleCustomAmountConfirm">
|
||||
确认
|
||||
</a-button> -->
|
||||
</a-input-group>
|
||||
<p class="input-name">用户自定义输入算力点数量</p>
|
||||
<div v-if="customAmountError" class="error-text">
|
||||
<ExclamationCircleOutlined />
|
||||
{{ customAmountError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换规则说明 -->
|
||||
<div class="exchange-section">
|
||||
<h3 class="section-title">兑换规则</h3>
|
||||
<div class="exchange-rules">
|
||||
<div class="rule-item">
|
||||
<CheckCircleOutlined class="rule-icon" />
|
||||
<span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<ExclamationCircleOutlined class="rule-icon" />
|
||||
<span><strong>算力点不可退</strong>，兑换前请确认需求</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<InfoCircleOutlined class="rule-icon" />
|
||||
<span>兑换后算力点立即生效，可用于平台所有计算服务</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<SafetyOutlined class="rule-icon" />
|
||||
<span>兑换过程安全加密，保障您的资金安全</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换信息展示 -->
|
||||
<div v-if="selectedExchangeAmount > 0" class="exchange-preview">
|
||||
<div class="preview-card">
|
||||
<div class="preview-header">
|
||||
<div class="preview-title">兑换明细</div>
|
||||
<a-button type="text" @click="clearSelection">
|
||||
<CloseOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换金额：</span>
|
||||
<span class="preview-value">¥{{ selectedExchangeAmount }}</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">获得算力点：</span>
|
||||
<span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换后余额：</span>
|
||||
<span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换后算力点：</span>
|
||||
<span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }}
|
||||
算力点</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户协议确认 -->
|
||||
<div class="agreement-section">
|
||||
<a-checkbox v-model:checked="agreementChecked" :disabled="loading">
|
||||
在确认兑换算力点前，我已阅读并确认
|
||||
<a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
|
||||
</a-checkbox>
|
||||
<div v-if="!agreementChecked && showAgreementError" class="error-text">
|
||||
请阅读并确认用户协议
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<a-button type="primary" size="large" :loading="loading" :disabled="!canExchange" @click="handleExchange"
|
||||
class="exchange-button">
|
||||
<template #icon>
|
||||
<ThunderboltOutlined />
|
||||
</template>
|
||||
确认兑换
|
||||
</a-button>
|
||||
<a-button size="large" @click="handleCancel" :disabled="loading" class="cancel-button">
|
||||
取消
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<div class="main-content">
|
||||
<!-- 余额卡片 -->
|
||||
<a-card class="balance-card" :bordered="false">
|
||||
<div class="balance-info">
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">
|
||||
<span class="icon-wrapper">
|
||||
<DollarCircleOutlined />
|
||||
</span>
|
||||
<span class="label-text">我的余额</span>
|
||||
</div>
|
||||
<div class="balance-value">
|
||||
<span class="currency">¥</span>
|
||||
<span class="amount">{{ formatCurrency(balance) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-item">
|
||||
<div class="balance-label">
|
||||
<span class="icon-wrapper">
|
||||
<ThunderboltOutlined />
|
||||
</span>
|
||||
<span class="label-text">当前算力点</span>
|
||||
</div>
|
||||
<div class="balance-value">
|
||||
<span class="points">{{ formatPoints(points) }}</span>
|
||||
<span class="points-unit">算力点</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="balance-tips">
|
||||
<InfoCircleOutlined />
|
||||
<span>余额可用于兑换算力点，算力点可用于平台计算服务</span>
|
||||
</div>
|
||||
<a-card class="history-card" title="算力点兑换历史">
|
||||
<a-table :columns="historyColumns" :data-source="exchangeHistory" row-key="key" :pagination="false">
|
||||
<!-- 自定义状态列的渲染 -->
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'status'">
|
||||
<span :style="{ color: getStatusColor(record.status) }">{{ getStatusText(record.status) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'amount' || column.key === 'points'">
|
||||
<span>{{ formatCurrency(record.amount) }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ record[column.dataIndex] }}
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
|
||||
<!-- 兑换卡片 -->
|
||||
<a-card class="exchange-card" title="兑换算力点">
|
||||
<div class="exchange-content">
|
||||
<!-- 兑换金额选择 -->
|
||||
<div class="exchange-section">
|
||||
<h3 class="section-title">选择兑换金额</h3>
|
||||
<p class="section-subtitle">请选择或输入要兑换的金额</p>
|
||||
|
||||
<div class="amount-options">
|
||||
<a-button
|
||||
v-for="option in amountOptions"
|
||||
:key="option.value"
|
||||
:class="['amount-option', { 'selected': selectedAmount === option.value }]"
|
||||
@click="selectAmount(option.value)"
|
||||
size="large"
|
||||
>
|
||||
<div class="amount-option-content">
|
||||
<div class="amount-number">¥{{ option.value }}</div>
|
||||
<div class="amount-points">= {{ option.value }} 算力点</div>
|
||||
</div>
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 自定义输入 -->
|
||||
<div class="custom-amount">
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
v-model:value="customAmount"
|
||||
placeholder="输入其他金额"
|
||||
size="large"
|
||||
style="width: calc(100% - 120px)"
|
||||
@change="handleCustomAmountChange"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
style="width: 120px"
|
||||
:disabled="!isCustomAmountValid || loading"
|
||||
@click="handleCustomAmountConfirm"
|
||||
>
|
||||
确认
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<div v-if="customAmountError" class="error-text">
|
||||
<ExclamationCircleOutlined />
|
||||
{{ customAmountError }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换规则说明 -->
|
||||
<div class="exchange-section">
|
||||
<h3 class="section-title">兑换规则</h3>
|
||||
<div class="exchange-rules">
|
||||
<div class="rule-item">
|
||||
<CheckCircleOutlined class="rule-icon" />
|
||||
<span>算力点兑换比例为人民币 <strong>1元 = 1算力点</strong></span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<ExclamationCircleOutlined class="rule-icon" />
|
||||
<span><strong>算力点不可退</strong>，兑换前请确认需求</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<InfoCircleOutlined class="rule-icon" />
|
||||
<span>兑换后算力点立即生效，可用于平台所有计算服务</span>
|
||||
</div>
|
||||
<div class="rule-item">
|
||||
<SafetyOutlined class="rule-icon" />
|
||||
<span>兑换过程安全加密，保障您的资金安全</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 兑换信息展示 -->
|
||||
<div v-if="selectedExchangeAmount > 0" class="exchange-preview">
|
||||
<div class="preview-card">
|
||||
<div class="preview-header">
|
||||
<div class="preview-title">兑换明细</div>
|
||||
<a-button type="text" @click="clearSelection">
|
||||
<CloseOutlined />
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="preview-content">
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换金额：</span>
|
||||
<span class="preview-value">¥{{ selectedExchangeAmount }}</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">获得算力点：</span>
|
||||
<span class="preview-value points-value">{{ selectedExchangeAmount }} 算力点</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换后余额：</span>
|
||||
<span class="preview-value">¥{{ formatCurrency(balance - selectedExchangeAmount) }}</span>
|
||||
</div>
|
||||
<div class="preview-item">
|
||||
<span class="preview-label">兑换后算力点：</span>
|
||||
<span class="preview-value points-value">{{ formatPoints(points + selectedExchangeAmount) }} 算力点</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户协议确认 -->
|
||||
<div class="agreement-section">
|
||||
<a-checkbox v-model:checked="agreementChecked" :disabled="loading">
|
||||
在确认兑换算力点前，我已阅读并确认
|
||||
<a @click="showAgreementModal" class="agreement-link">《用户协议》</a>
|
||||
</a-checkbox>
|
||||
<div v-if="!agreementChecked && showAgreementError" class="error-text">
|
||||
请阅读并确认用户协议
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-buttons">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
:disabled="!canExchange"
|
||||
@click="handleExchange"
|
||||
class="exchange-button"
|
||||
>
|
||||
<template #icon><ThunderboltOutlined /></template>
|
||||
确认兑换
|
||||
</a-button>
|
||||
<a-button
|
||||
size="large"
|
||||
@click="handleCancel"
|
||||
:disabled="loading"
|
||||
class="cancel-button"
|
||||
>
|
||||
取消
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 用户协议模态框 -->
|
||||
<a-modal
|
||||
v-model:visible="agreementModalVisible"
|
||||
title="用户协议"
|
||||
width="800px"
|
||||
:footer="null"
|
||||
>
|
||||
<a-modal v-model:visible="agreementModalVisible" title="用户协议" width="800px" :footer="null">
|
||||
<div class="agreement-content">
|
||||
<h3>算力点兑换服务协议</h3>
|
||||
<p>欢迎使用算力点兑换服务。在兑换算力点前，请您仔细阅读以下协议内容：</p>
|
||||
|
||||
|
||||
<h4>一、兑换规则</h4>
|
||||
<p>1. 算力点兑换比例为1元人民币兑换1算力点。</p>
|
||||
<p>2. 最小兑换金额为100元，最大单次兑换金额为10000元。</p>
|
||||
<p>3. 兑换操作一经确认，不可撤销或退款。</p>
|
||||
|
||||
|
||||
<h4>二、使用规则</h4>
|
||||
<p>1. 算力点可用于平台提供的各项计算服务。</p>
|
||||
<p>2. 算力点不设有效期，但平台保留根据业务调整的权利。</p>
|
||||
<p>3. 算力点不可转让、不可提现、不可兑换为现金。</p>
|
||||
|
||||
|
||||
<h4>三、免责声明</h4>
|
||||
<p>1. 如因系统维护、升级等需要暂停服务，平台将提前公告。</p>
|
||||
<p>2. 用户应妥善保管账户信息，因用户原因造成的损失平台不承担责任。</p>
|
||||
|
||||
|
||||
<div class="agreement-footer">
|
||||
<a-checkbox v-model:checked="modalAgreementChecked">
|
||||
我已阅读并同意以上协议
|
||||
</a-checkbox>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="handleAgreementConfirm"
|
||||
:disabled="!modalAgreementChecked"
|
||||
>
|
||||
<a-button type="primary" @click="handleAgreementConfirm" :disabled="!modalAgreementChecked">
|
||||
确认并关闭
|
||||
</a-button>
|
||||
</div>
|
||||
@ -235,57 +212,31 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import {
|
||||
DollarCircleOutlined,
|
||||
ThunderboltOutlined,
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import {
|
||||
DollarCircleOutlined,
|
||||
ThunderboltOutlined,
|
||||
InfoCircleOutlined,
|
||||
CheckCircleOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
SafetyOutlined,
|
||||
CloseOutlined
|
||||
} from '@ant-design/icons-vue'
|
||||
import { message, Modal } from 'ant-design-vue'
|
||||
import { message, Modal, Divider } from 'ant-design-vue'
|
||||
|
||||
// 用户余额和算力点
|
||||
const balance = ref(3568.50)
|
||||
const balance = ref(3568.5)
|
||||
const points = ref(1250)
|
||||
|
||||
// 金额选项
|
||||
const amountOptions = ref([
|
||||
{ value: 100, label: '100元' },
|
||||
{ value: 200, label: '200元' },
|
||||
{ value: 500, label: '500元' },
|
||||
{ value: 1000, label: '1000元' },
|
||||
{ value: 2000, label: '2000元' },
|
||||
{ value: 5000, label: '5000元' }
|
||||
])
|
||||
|
||||
// 选择的金额
|
||||
const selectedAmount = ref(0)
|
||||
const customAmount = ref('')
|
||||
const customAmountError = ref('')
|
||||
|
||||
// 用户协议确认
|
||||
const agreementChecked = ref(false)
|
||||
const showAgreementError = ref(false)
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 模态框
|
||||
const agreementModalVisible = ref(false)
|
||||
const modalAgreementChecked = ref(false)
|
||||
|
||||
// 兑换记录
|
||||
const exchangeHistory = ref([
|
||||
{ key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
|
||||
{ key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
|
||||
{ key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
|
||||
{ key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
|
||||
{ key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
|
||||
{ value: 100, label: '100' },
|
||||
{ value: 200, label: '200' },
|
||||
{ value: 1000, label: '1000' },
|
||||
{ value: 5000, label: '5000' }
|
||||
])
|
||||
|
||||
// 注意：这里只定义 columns 结构，不包含 customRender
|
||||
const historyColumns = [
|
||||
{
|
||||
title: '兑换金额',
|
||||
@ -312,6 +263,31 @@ const historyColumns = [
|
||||
}
|
||||
]
|
||||
|
||||
// 选择的金额
|
||||
const selectedAmount = ref(0)
|
||||
const customAmount = ref('')
|
||||
const customAmountError = ref('')
|
||||
|
||||
// 用户协议确认
|
||||
const agreementChecked = ref(false)
|
||||
const showAgreementError = ref(false)
|
||||
|
||||
// 加载状态
|
||||
const loading = ref(false)
|
||||
|
||||
// 模态框
|
||||
const agreementModalVisible = ref(false)
|
||||
const modalAgreementChecked = ref(false)
|
||||
|
||||
// 兑换记录
|
||||
const exchangeHistory = ref([
|
||||
{ key: 1, amount: 1000, points: 1000, time: '2024-03-15 14:30:22', status: 'success' },
|
||||
{ key: 2, amount: 500, points: 500, time: '2024-03-10 09:15:45', status: 'success' },
|
||||
{ key: 3, amount: 2000, points: 2000, time: '2024-03-05 16:20:33', status: 'success' },
|
||||
{ key: 4, amount: 100, points: 100, time: '2024-02-28 11:45:12', status: 'success' },
|
||||
{ key: 5, amount: 5000, points: 5000, time: '2024-02-20 13:05:27', status: 'success' }
|
||||
])
|
||||
|
||||
// 计算选中的兑换金额
|
||||
const selectedExchangeAmount = computed(() => {
|
||||
if (selectedAmount.value > 0) {
|
||||
@ -323,10 +299,10 @@ const selectedExchangeAmount = computed(() => {
|
||||
|
||||
// 检查是否可以兑换
|
||||
const canExchange = computed(() => {
|
||||
return selectedExchangeAmount.value > 0 &&
|
||||
agreementChecked.value &&
|
||||
selectedExchangeAmount.value <= balance.value &&
|
||||
!loading.value
|
||||
return selectedExchangeAmount.value > 0 &&
|
||||
agreementChecked.value &&
|
||||
selectedExchangeAmount.value <= balance.value &&
|
||||
!loading.value
|
||||
})
|
||||
|
||||
// 检查自定义金额是否有效
|
||||
@ -420,18 +396,18 @@ const handleAgreementConfirm = () => {
|
||||
// 处理兑换
|
||||
const handleExchange = () => {
|
||||
showAgreementError.value = false
|
||||
|
||||
|
||||
if (!agreementChecked.value) {
|
||||
showAgreementError.value = true
|
||||
message.error('请先阅读并确认用户协议')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if (selectedExchangeAmount.value > balance.value) {
|
||||
message.error('兑换金额不能超过余额')
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
Modal.confirm({
|
||||
title: '确认兑换',
|
||||
content: `您确定要兑换 ¥${selectedExchangeAmount.value} 获得 ${selectedExchangeAmount.value} 算力点吗？此操作不可撤销。`,
|
||||
@ -444,17 +420,15 @@ const handleExchange = () => {
|
||||
// 执行兑换
|
||||
const performExchange = () => {
|
||||
loading.value = true
|
||||
|
||||
|
||||
// 模拟API请求
|
||||
setTimeout(() => {
|
||||
// 更新余额和算力点
|
||||
balance.value -= selectedExchangeAmount.value
|
||||
points.value += selectedExchangeAmount.value
|
||||
|
||||
// 添加兑换记录
|
||||
|
||||
const now = new Date()
|
||||
const timeStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
|
||||
|
||||
|
||||
exchangeHistory.value.unshift({
|
||||
key: exchangeHistory.value.length + 1,
|
||||
amount: selectedExchangeAmount.value,
|
||||
@ -462,13 +436,11 @@ const performExchange = () => {
|
||||
time: timeStr,
|
||||
status: 'success'
|
||||
})
|
||||
|
||||
// 重置选择
|
||||
|
||||
clearSelection()
|
||||
agreementChecked.value = false
|
||||
|
||||
loading.value = false
|
||||
|
||||
|
||||
message.success(`兑换成功！获得 ${selectedExchangeAmount.value} 算力点`)
|
||||
}, 1500)
|
||||
}
|
||||
@ -480,11 +452,6 @@ const handleCancel = () => {
|
||||
showAgreementError.value = false
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr) => {
|
||||
return timeStr
|
||||
}
|
||||
|
||||
// 获取状态颜色
|
||||
const getStatusColor = (status) => {
|
||||
const colors = {
|
||||
@ -505,14 +472,13 @@ const getStatusText = (status) => {
|
||||
return texts[status] || status
|
||||
}
|
||||
|
||||
// 初始化加载
|
||||
onMounted(() => {
|
||||
// 可以在这里加载用户余额和算力点数据
|
||||
console.log('页面加载完成')
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 你的样式保持不变 */
|
||||
.points-exchange-page {
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
@ -540,10 +506,7 @@ onMounted(() => {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.main-content {}
|
||||
|
||||
.balance-card {
|
||||
margin-bottom: 20px;
|
||||
@ -581,24 +544,25 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: rgba(56, 56, 56, 1);
|
||||
}
|
||||
|
||||
.balance-value {
|
||||
font-size: 28px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.balance-value .currency {
|
||||
font-size: 20px;
|
||||
color: #52c41a;
|
||||
color: rgba(56, 56, 56, 1);
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.balance-value .points {
|
||||
color: #722ed1;
|
||||
color: rgba(56, 56, 56, 1);
|
||||
}
|
||||
|
||||
.balance-value .points-unit {
|
||||
@ -648,8 +612,8 @@ onMounted(() => {
|
||||
|
||||
.amount-options {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
gap: 6px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@ -661,7 +625,7 @@ onMounted(() => {
|
||||
|
||||
.amount-option {
|
||||
height: auto !important;
|
||||
padding: 16px !important;
|
||||
/* padding: 6px !important; */
|
||||
border-radius: 8px !important;
|
||||
border: 2px solid #f0f0f0 !important;
|
||||
background: #fff !important;
|
||||
@ -696,7 +660,24 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.custom-amount {
|
||||
width: 460px;
|
||||
margin-bottom: 24px;
|
||||
margin-left: 170px;
|
||||
|
||||
input {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.input-name {
|
||||
width: 350px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(166, 166, 166, 1);
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.error-text {
|
||||
@ -888,7 +869,6 @@ onMounted(() => {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
:deep(.ant-btn-loading) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user