From 7fc6bfe900790ec7c92bce85d5b20a95fbc06e65 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Wed, 15 Oct 2025 10:29:30 +0800
Subject: [PATCH] 其他人改的版本
---
src/components/Transform/perpetual-position-list/index.vue | 158 ++++++++++++++++++++++++++++++++++++----------------
1 files changed, 108 insertions(+), 50 deletions(-)
diff --git a/src/components/Transform/perpetual-position-list/index.vue b/src/components/Transform/perpetual-position-list/index.vue
index 0207f3c..53cc458 100644
--- a/src/components/Transform/perpetual-position-list/index.vue
+++ b/src/components/Transform/perpetual-position-list/index.vue
@@ -10,71 +10,93 @@
<!-- <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="onSellAll">{{ $t('一键平仓') }}</button>-->
<!-- </div>-->
<div class="border-b-color" v-for="item in listData" :key="item.order_no">
- <div class="flex justify-between pt-44 pb-44">
- <div class="flex flex-col">
- <div class="flex items-center">
- <div class="pl-18 pr-18 pt-3 pb-3 text-white open-btn font-28"
- :class="item.direction == 'buy' ? ' bg-green' : 'bg-red'">
- {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
- </div>
- <div class="ml-22 font-31 font-600 ">
- <span class="textColor">{{ item.name }} {{ $t('永续') }}</span>
- <span class="text-grey font-28 font-400 ml-17 mr-17">
- {{ item.locationType == 1 ? $t('全仓') : $t('逐仓') }}
- {{ item.lever_rate }}x</span>
- </div>
- <img v-if="item.direction == 'buy'" src="@/assets/image/public/green-leverage.png" alt=""
- class="w-32 h-32" />
- <img v-else src="@/assets/image/public/red-leverage.png" alt="" class="w-32 h-32" />
+<!-- <div class="flex justify-between pt-44 pb-44">-->
+<!-- <div class="flex flex-col">-->
+<!-- <div class="flex-centerY">-->
+<!-- <div class="ml-22 font-31 ">-->
+<!--<!– <span class="textColor">{{ item.name }} {{ $t('永续') }}</span>–>-->
+<!-- <span class="textColor">{{ item.name }} </span>-->
+<!--<!– <span class="text-grey font-28 font-400 ml-17 mr-17">–>-->
+<!--<!– {{ item.locationType == 1 ? $t('全仓') : $t('逐仓') }}–>-->
+<!--<!– {{ item.lever_rate }}x</span>–>-->
+<!-- </div>-->
+<!-- <div-->
+<!-- :class="item.direction == 'buy' ? ' bg-green1' : 'bg-red'">-->
+<!-- {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}-->
+<!-- </div>-->
+<!--<!– <img v-if="item.direction == 'buy'" src="@/assets/image/public/green-leverage.png" alt=""–>-->
+<!--<!– class="w-32 h-32" />–>-->
+<!--<!– <img v-else src="@/assets/image/public/red-leverage.png" alt="" class="w-32 h-32" />–>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+ <div class="flex-centerY flex-position-between" style="margin-top: 15px">
+ <div class="flex-centerY">
+ <div class="textColor font-30">{{ item.name }} </div>
+ <div
+ :class="item.direction == 'buy' ? ' bg-green1' : 'bg-red1'">
+ {{ item.direction == 'buy' ? $t('开多') : $t('开空') }}
</div>
</div>
+ <div class="font-30 font-bold flex-centerY">
+ {{ item.lever_rate }}
+ <div style="margin-left: 5px">x</div>
+ </div>
</div>
- <div class="flex justify-between font-28">
+ <div class="flex font-28" style="margin-top: 20px">
<div class="flex-1">
- <div class="text-grey">{{ routeType == 'cryptos' ? $t('未实现盈亏（USDT）') : $t('未实现盈亏（USD）') }}</div>
- <div class="mt-20" :class="item.profit > 0 ? 'text-green' : 'text-red'">
+ <div class="text-grey" style="font-size: 10px">{{ routeType == 'cryptos' ? $t('未实现盈亏（USDT）') : $t('未实现盈亏（USD）') }}</div>
+ <div class="" :class="item.profit > 0 ? 'text-green' : 'text-red'">
{{ item.profit > 0 ? '+' + item.profit.toFixed(4) : item.profit.toFixed(4) }}</div>
</div>
- <div class="flex-1">
- <div class="text-grey text-center">ROE</div>
- <div class="mt-20 text-center" :class="item.change_ratio / 1 > 0 ? 'text-green' : 'text-red'">{{
+ <div class="flex-1 font-28">
+ <div class="text-grey" style="font-size: 10px">ROE</div>
+ <div class="" :class="item.change_ratio / 1 > 0 ? 'text-green' : 'text-red'" >{{
item.change_ratio
}}%
</div>
</div>
- <div class="flex-1 flex justify-end">
- <button class="font-30 detail-btn border-light-blue greyBg colorMain w-125 h-60" @click="goDetail(item)">{{
- $t('详情') }}</button>
+ <div class="flex-1">
+ <div class="text-grey" style="font-size: 10px">{{ $t('持仓数量') }}</div>
+ <div class="textColor">{{ reserve(item.volume / (item.lever_rate ? item.lever_rate : 1),4) }}*{{
+ item.lever_rate ? item.lever_rate : 1 }}x</div>
+ </div>
+<!-- <div class="flex-1 flex justify-end">-->
+<!-- <button class="font-30 detail-btn border-light-blue greyBg colorMain w-125 h-60" @click="goDetail(item)">{{-->
+<!-- $t('详情') }}</button>-->
+<!-- </div>-->
+ </div>
+ <div class="flex-centerY mt-10">
+ <div class="flex-1 font-28">
+ <div class="text-grey" style="font-size: 10px">{{ $t('交易金额') }} ( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</div>
+ <div class=" textColor">{{ item.deposit }}</div>
+ </div>
+ <div class="flex-1 font-28">
+ <div class="text-grey" style="font-size: 10px">{{ $t('开仓价格') }}</div>
+ <div class=" textColor">{{ item.trade_avg_price }}</div>
+ </div>
+ <div class="flex-1 font-28">
+ <div class="text-grey" style="font-size: 10px">{{ $t('标记价格') }}</div>
+ <div class=" textColor">{{ item.mark_price }}</div>
</div>
</div>
- <div class="flex pt-44 pb-32 font-28">
- <div class="flex-1">
- <div class="text-grey">{{ $t('持仓数量') }}</div>
- <div class="mt-20 textColor">{{ reserve(item.volume / (item.lever_rate ? item.lever_rate : 1),4) }}*{{
- item.lever_rate ? item.lever_rate : 1 }}x</div>
+ <div class="flex-centerY mt-10">
+ <div class="flex-1 font-28">
+ <div class="text-grey " style="font-size: 10px">{{ $t('强平价格') }}</div>
+ <div class="textColor">{{ item.force_close_rice }}</div>
</div>
- <div class="flex-1 text-center font-28">
- <div class="text-grey">{{ $t('交易金额') }} ( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</div>
- <div class="mt-20 textColor">{{ item.deposit }}</div>
- </div>
- <div class="flex-1 flex flex-col items-end font-28">
- <div class="text-grey">{{ $t('开仓价格') }}</div>
- <div class="mt-20 textColor">{{ item.trade_avg_price }}</div>
- </div>
+
</div>
- <div class="flex pb-32 font-28">
- <div class="flex-1">
- <div class="text-grey">{{ $t('标记价格') }}</div>
- <div class="mt-20 textColor">{{ item.mark_price }}</div>
+ <div class="flex-centerY flex-position-end-to-start">
+ <div class=" flex flex-col items-end justify-end">
+ <div class="bg-green2"
+ @click="onSell(item.order_no)" >
+ {{ $t('平仓') }}</div>
</div>
- <div class="flex-1">
- <div class="text-grey text-center">{{ $t('强平价格') }}</div>
- <div class="mt-20 textColor text-center">{{ item.force_close_rice }}</div>
- </div>
- <div class="flex-1 flex flex-col items-end justify-end">
- <button class="greyBg textColor border-none pl-34 pr-34 pt-10 pb-10 rounded-ban"
- @click="onSell(item.order_no)">
- {{ $t('平仓') }}</button>
+ <div class=" flex flex-col items-end justify-end">
+ <div class="bg-green3"
+ @click="goDetail(item)" >
+ {{ $t('详情') }}</div>
</div>
</div>
<!-- <div class="flex pb-32 font-28">
@@ -165,4 +187,40 @@
color: #06AD95;
}
}
+
+.bg-green1{
+ color: $green;
+ font-size: 14px;
+ margin-left: 10px;
+ border-radius: 6px;
+ padding: 0 10px;
+ border: $green 1px solid;
+}
+
+.bg-red1{
+ color: $red;
+ font-size: 14px;
+ margin-left: 10px;
+ border-radius: 6px;
+ padding: 0 10px;
+ border: $red 1px solid;
+}
+
+.bg-green2{
+ color: $green;
+ font-size: 16px;
+ margin-left: 12px;
+ border-radius: 6px;
+ padding: 0 20px;
+ border: $green 1px solid;
+}
+
+.bg-green3{
+ color: orange;
+ font-size: 16px;
+ margin-left: 12px;
+ border-radius: 6px;
+ padding: 0 20px;
+ border: orange 1px solid;
+}
</style>
--
Gitblit v1.9.3