From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/components/Transform/assetsCenter/financialList.vue | 172 +++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 130 insertions(+), 42 deletions(-)
diff --git a/src/components/Transform/assetsCenter/financialList.vue b/src/components/Transform/assetsCenter/financialList.vue
index 08818e7..0a23084 100644
--- a/src/components/Transform/assetsCenter/financialList.vue
+++ b/src/components/Transform/assetsCenter/financialList.vue
@@ -1,58 +1,73 @@
<template>
- <div class="cryptos">
- <div class="w-762 h-220 mt-37 box-border px-22 py-34 rounded-lg contBackground"
- v-for="(item, index) in list" :key="index">
- <div class="flex justify-between" @click="handleGoOrderDetail(item)">
- <div class="flex ">
- <img v-if="type==0" :src="item.img ? item.img : '../../page/financialManagement/images/fund5.png'"
- alt="" class="w-154 h-154 mr-35" />
- <img v-else :src="item.img ? item.img : '../../page/financialManagement/images/machine_fpga.png'"
- alt="" class="w-154 h-154 mr-35" />
- <div>
- <div class="font-26 font-700 font-6 textColor" v-if="type==0">
- {{ $i18n.locale === 'CN' ? item.financeName_cn : $i18n.locale === 'zh-CN'?item.financeName : item.financeName_en }}
- </div>
- <div class="font-26 font-700 font-6 textColor" v-else>
- {{ $i18n.locale === 'CN' ? item.miner_name_cn : $i18n.locale === 'zh-CN' ? item.miner_name : item.miner_name_en }}
- </div>
- <!-- <div v-if="tapIndex === 1" class="font-35 font-6">体验矿机3天</div> -->
- <div class="font-26 font-4 cl-33 mt-25 mb-16 textColor1">{{$t('数量')}}
- <span class="ml-10 mr-10 textColor">{{item.amount}}</span>{{ item.buyCurrency? item.buyCurrency.toUpperCase() :'USDT' }}</div>
- <div class="font-26 font-4 cl-33 textColor1">{{$t('周期')}} <span class="textColor">{{ item.cycle == 0 ? $t('无限期') : item.cycle+ $t('天')}}</span>
- </div>
+ <div class="order-list">
+ <div
+ class="order-card contBackground"
+ v-for="(item, index) in list"
+ :key="index"
+ @click="handleGoOrderDetail(item)"
+ >
+ <div class="order-card-main">
+ <img
+ v-if="type == 0"
+ :src="item.img ? item.img : '../../page/financialManagement/images/fund5.png'"
+ alt=""
+ class="order-thumb"
+ />
+ <img
+ v-else
+ :src="item.img ? item.img : '../../page/financialManagement/images/machine_fpga.png'"
+ alt=""
+ class="order-thumb"
+ />
+ <div class="order-info">
+ <div class="order-name textColor" v-if="type == 0">
+ {{ $i18n.locale === 'CN' ? item.financeName_cn : ($i18n.locale === 'zh-CN' ? item.financeName : item.financeName_en) }}
+ </div>
+ <div class="order-name textColor" v-else>
+ {{ $i18n.locale === 'CN' ? item.miner_name_cn : ($i18n.locale === 'zh-CN' ? item.miner_name : item.miner_name_en) }}
+ </div>
+ <div class="order-meta textColor1">
+ {{ $t('数量') }}
+ <span class="textColor">{{ item.amount }}</span>
+ {{ item.buyCurrency ? item.buyCurrency.toUpperCase() : 'USDT' }}
+ </div>
+ <div class="order-meta textColor1">
+ {{ type == 0 ? $t('周期') : (isMinerTest(item.test) ? $t('周期') : $t('可解锁周期')) }}
+ <span class="textColor">
+ {{ item.cycle == 0 ? $t('无限期') : item.cycle + (type == 0 || isMinerTest(item.test) ? $t('天') : $t('分钟')) }}
+ </span>
</div>
</div>
- <div class="flex justify-center align-center text-center h-152 lh-152">
- <div class="mr-24 flex flex-col justify-center items-center">
- <span class="h-52 lh-52 font-44" :class="item.profit / 1 >= 0 ? 'text-green' : 'text-red'">{{(item.profit /
- 1).toFixed(2)}}</span>
- <span class="w-162 h-32 lh-32 font-26 mt-16 textColor">{{$t('累计收益')}}({{ item.outputCurrency? item.outputCurrency.toUpperCase() : 'USDT'}})</span>
- </div>
- <div class="h-152 lh-152">
- <van-icon class="textColor" name="arrow" />
- </div>
+ </div>
+ <div class="order-profit">
+ <div class="profit-num" :class="item.profit / 1 >= 0 ? 'text-green' : 'text-red'">
+ {{ (item.profit / 1).toFixed(2) }}
</div>
+ <div class="profit-label textColor">
+ {{ $t('累计收益') }}({{ item.outputCurrency ? item.outputCurrency.toUpperCase() : 'USDT' }})
+ </div>
+ <van-icon class="order-arrow textColor" name="arrow" />
</div>
</div>
</div>
</template>
<script>
-import { Icon } from 'vant';
+import { Icon } from 'vant'
+import { isMinerTest } from '@/utils/index.js'
+
export default {
- name: "financialList",
- props: ['list', 'btnShow', 'goBack', 'type'], // orderShow 点击跳转到订单详情的时候是否展示赎回按钮,goBack表示订单详情返回一层
- components :{
- [Icon.name]:Icon,
- },
- mounted(){
- console.log(this.type)
+ name: 'financialList',
+ props: ['list', 'btnShow', 'goBack', 'type'],
+ components: {
+ [Icon.name]: Icon
},
methods: {
+ isMinerTest,
handleGoOrderDetail(item) {
if (this.type === 0) {
this.$router.push({
- path: '/financialOrder',
+ path: '/cryptos/financialOrder',
query: {
order_no: item.order_no,
showBtn: this.btnShow,
@@ -62,7 +77,7 @@
})
} else {
this.$router.push({
- path: '/miningMachineOrder',
+ path: '/cryptos/miningMachineOrder',
query: {
order_no: item.order_no,
showBtn: this.btnShow,
@@ -70,11 +85,84 @@
}
})
}
- },
+ }
}
}
</script>
-<style scoped>
+<style scoped lang="scss">
+.order-list {
+ padding: 0 32px 24px;
+}
+.order-card {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+ margin-top: 24px;
+ padding: 28px 24px;
+ border-radius: 20px;
+}
+
+.order-card-main {
+ display: flex;
+ align-items: center;
+ flex: 1;
+ min-width: 0;
+}
+
+.order-thumb {
+ width: 120px;
+ height: 120px;
+ margin-right: 24px;
+ flex-shrink: 0;
+ object-fit: contain;
+}
+
+.order-info {
+ flex: 1;
+ min-width: 0;
+}
+
+.order-name {
+ font-size: 34px;
+ font-weight: 600;
+ line-height: 1.35;
+ word-break: break-word;
+}
+
+.order-meta {
+ margin-top: 16px;
+ font-size: 30px;
+ line-height: 1.4;
+}
+
+.order-profit {
+ position: relative;
+ flex-shrink: 0;
+ padding-right: 36px;
+ text-align: center;
+}
+
+.profit-num {
+ font-size: 44px;
+ font-weight: 700;
+ line-height: 1.2;
+}
+
+.profit-label {
+ margin-top: 12px;
+ font-size: 26px;
+ line-height: 1.3;
+ max-width: 180px;
+}
+
+.order-arrow {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 32px;
+}
</style>
--
Gitblit v1.9.3