From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/components/Transform/deliveryContract/position.vue | 244 +++++++++++++++++++++---------------------------
1 files changed, 109 insertions(+), 135 deletions(-)
diff --git a/src/components/Transform/deliveryContract/position.vue b/src/components/Transform/deliveryContract/position.vue
index f6a1097..a13a92d 100644
--- a/src/components/Transform/deliveryContract/position.vue
+++ b/src/components/Transform/deliveryContract/position.vue
@@ -1,52 +1,52 @@
<template>
- <div id="#cryptos">
+ <div class="delivery-history-position">
<div class="position text-28">
<div class="position-padding" v-for="item in listData" :key="item.order_no">
- <div class="position-tag ">
+ <div class="position-tag">
<div class="position-tag-style" :class="item.direction === 'buy' ? 'green' : 'red'">
- {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</div>
+ {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
+ </div>
<div class="position-tag-title textColor">{{ item.name }} {{ $t('交割') }}</div>
<div class="position-tag-title2">{{ $t('全仓') }}</div>
- <img class="position-tag-img" src="@/assets/image/deliveryContract/Group1042.png" />
+ <img class="position-tag-img" src="@/assets/image/deliveryContract/Group1042.png" alt="" />
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('数量') }}</span>
- <span class="position-text2 textColor">{{ item.volume }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('数量') }}</span>
+ <span class="position-value textColor">{{ item.volume }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('方向') }}</span>
- <span class="position-text2" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
- {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('方向') }}</span>
+ <span class="position-value" :class="item.direction === 'buy' ? 'color-green' : 'color-red'">
+ {{ item.direction === 'buy' ? $t('开多') : $t('开空') }}
+ </span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('交割时间') }}</span>
- <span class="position-text2 textColor">{{ item.time_num + item.time_unit }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('交割时间') }}</span>
+ <span class="position-value textColor">{{ item.time_num + item.time_unit }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('购买价') }}( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
- <span class="position-text2 textColor">{{ item.open_price }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('购买价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
+ <span class="position-value textColor">{{ item.open_price }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('结算价') }}( {{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
- <span class="position-text2 textColor">{{ item.close_price }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('结算价') }}({{ routeType == 'cryptos' ? 'USDT' : 'USD' }})</span>
+ <span class="position-value textColor">{{ item.close_price }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('盈亏') }}</span>
- <span class="position-text2" :class="item.profit > 0 ? 'color-green' : 'color-red'">
+ <div class="position-row">
+ <span class="position-label">{{ $t('盈亏') }}</span>
+ <span class="position-value" :class="item.profit > 0 ? 'color-green' : 'color-red'">
{{ item.profit > 0 ? '+' + item.profit : item.profit }}
</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('到期时间') }}</span>
- <span class="position-text2 textColor"> {{ dayjs(item.close_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('到期时间') }}</span>
+ <span class="position-value textColor">{{ dayjs(item.close_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span>
</div>
- <div class="position-div1">
- <span class="position-text1">{{ $t('操作') }}</span>
- <span class="position-text2 colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
+ <div class="position-row">
+ <span class="position-label">{{ $t('操作') }}</span>
+ <span class="position-value colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
</div>
- <div style="margin-top: 33px;width: 100%;height: 1px;float: left;" class="bgDark"></div>
</div>
-
</div>
<van-popup v-model:show="show">
<popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="show = false" :disabled="true"
@@ -97,126 +97,100 @@
}
}
</script>
-<style lang="scss" scoped >
-#cryptos {
- font-size: 40px;
+<style lang="scss" scoped>
+@import '@/assets/css/variable.scss';
- // .van-popup {
- // position: fixed;
- // top: 30%;
- // z-index: 10000;
- // }
+.delivery-history-position {
+ width: 100%;
+ font-size: 1.75rem;
.position {
width: 100%;
- overflow: auto;
+ }
- .position-tab-flex {
- width: 100%;
- display: flex;
+ .position-padding {
+ padding: 2rem 0;
+ box-sizing: border-box;
+ width: 100%;
+ border-bottom: 2px solid $border_color;
- .position-tab {
- flex: 1;
- }
+ &:last-child {
+ border-bottom: none;
+ }
+ }
- .position-tab-icon {
- width: 38px;
- height: 38px;
- margin-right: 30px;
- margin-top: 22px;
- }
+ .position-tag {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 0.5rem 1rem;
+
+ .position-tag-style {
+ padding: 0.5rem 1.2rem;
+ font-size: 1.6rem;
+ font-weight: 500;
+ color: #fff;
+ border-radius: 8px;
}
- .position-padding {
- //border-bottom: 1px solid #F2F4F9;
- padding: 42px 0 0 0;
- box-sizing: border-box;
- width: 100%;
- overflow: auto;
-
- .position-tag {
- display: flex;
- align-items: center;
-
- .position-tag-style {
- padding: 11px 28px;
- margin-right: 22px;
- font-style: normal;
- font-weight: 400;
- font-size: 26.4981px;
- color: $main-btn-color;
- }
-
- .position-tag-title {
- font-style: normal;
- font-weight: 600;
- font-size: 30.9145px;
- margin-right: 13px;
- }
-
- .position-tag-title2 {
- font-style: normal;
- font-weight: 400;
- font-size: 30.9145px;
- color: $text_color5;
- }
-
- .position-tag-img {
- margin-left: 11px;
- width: 40px;
- height: 31px;
- }
- }
-
- .red {
- background: $red;
- border-radius: 6.6266px;
- }
-
- .green {
- background: $green;
- border-radius: 6.62453px;
- }
-
- .position-div1 {
- margin-top: 20px;
- width: 100%;
- float: left;
-
- .position-text1 {
- float: left;
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- color: $text_color5;
- }
-
- .position-text2 {
- float: right;
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- }
-
- .position-text3 {
- font-style: normal;
- font-weight: 400;
- font-size: 30px;
- }
- }
+ .position-tag-title {
+ font-weight: 600;
+ font-size: 1.9rem;
+ color: $text_color;
}
- .color-red {
- color: $red !important;
+ .position-tag-title2 {
+ font-size: 1.7rem;
+ color: $text_color5;
}
- .color-green {
- color: $green !important;
+ .position-tag-img {
+ margin-left: auto;
+ width: 2.5rem;
+ height: 2rem;
+ object-fit: contain;
+ }
+ }
+
+ .green {
+ background: $green;
+ }
+
+ .red {
+ background: $red;
+ }
+
+ .position-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 1rem;
+ min-height: 2.5rem;
+
+ .position-label {
+ font-size: 1.6rem;
+ color: $text_color5;
+ flex-shrink: 0;
}
- .color-blue {
- color: $color_main !important;
+ .position-value {
+ font-size: 1.7rem;
+ text-align: right;
+ word-break: break-all;
+ margin-left: 1rem;
}
}
+
+ .color-red {
+ color: $red !important;
+ }
+
+ .color-green {
+ color: $green !important;
+ }
+
+ .colorMain {
+ color: $color_main !important;
+ }
}
</style>
--
Gitblit v1.9.3