From 3ed2cb78a690b64c3b2646d35e1500081186dfa3 Mon Sep 17 00:00:00 2001
From: huzheng12 <52150713+huzheng12@users.noreply.github.com>
Date: Mon, 06 May 2024 00:21:32 +0800
Subject: [PATCH] first commit
---
src/page/deliveryContract/position.vue | 127 ++++++++++++++++++++++++++---------------
1 files changed, 80 insertions(+), 47 deletions(-)
diff --git a/src/page/deliveryContract/position.vue b/src/page/deliveryContract/position.vue
index 117418a..aedbf29 100644
--- a/src/page/deliveryContract/position.vue
+++ b/src/page/deliveryContract/position.vue
@@ -1,90 +1,123 @@
<template>
<div class="position">
<div class="position-padding" v-for="item in listData" :key="item.order_no">
- <div class="position-tag ">
- <div class="position-tag-style" :class="item.direction === 'buy' ? 'green' : 'red'">
- {{ 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" />
+ <div class="position-tag">
+ <div
+ class="position-tag-style"
+ :class="item.direction === 'buy' ? 'green' : 'red'"
+ >
+ {{ 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"
+ />
</div>
<div class="position-div1">
- <span class="position-text1">{{ $t('数量') }}</span>
+ <span class="position-text1">{{ $t("数量") }}</span>
<span class="position-text2 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>
+ <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>
<div class="position-div1">
- <span class="position-text1">{{ $t('交割时间') }}</span>
- <span class="position-text2 textColor">{{ item.time_num + item.time_unit }}</span>
+ <span class="position-text1">{{ $t("交割时间") }}</span>
+ <span class="position-text2 textColor">{{
+ item.time_num + item.time_unit
+ }}</span>
</div>
<div class="position-div1">
- <span class="position-text1">{{ $t('购买价') }}（USDT）</span>
+ <span class="position-text1">{{ $t("购买价") }}（USDT）</span>
<span class="position-text2 textColor">{{ item.open_price }}</span>
</div>
<div class="position-div1">
- <span class="position-text1">{{ $t('结算价') }}（USDT）</span>
+ <span class="position-text1">{{ $t("结算价") }}（USDT）</span>
<span class="position-text2 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'">
- {{ item.profit > 0 ? '+' + item.profit : item.profit }}
+ <span class="position-text1">{{ $t("盈亏") }}</span>
+ <span
+ class="position-text2"
+ :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-text1">{{ $t("到期时间") }}</span>
<span class="position-text2 textColor">{{ item.close_time }}</span>
</div>
<div class="position-div1">
- <span class="position-text1">{{ $t('操作') }}</span>
- <span class="position-text2 colorMain" @click="onDetail(item)">{{ $t('详情') }}</span>
+ <span class="position-text1">{{ $t("操作") }}</span>
+ <span class="position-text2 colorMain" @click="onDetail(item)">{{
+ $t("详情")
+ }}</span>
</div>
- <div style="margin-top: 33px;width: 100%;height: 1px;float: left;" class="bgDark"></div>
+ <div
+ style="margin-top: 33px; width: 100%; height: 1px; float: left"
+ class="bgDark"
+ ></div>
</div>
- <div class="text-grey text-center py-300" v-if="!listData.length && $route.name == 'perpetualContract'">{{
- $t('您目前没有持仓') }}</div>
+ <div
+ class="text-grey text-center py-300"
+ v-if="!listData.length && $route.name == 'perpetualContract'"
+ >
+ {{ $t("您目前没有持仓") }}
+ </div>
<van-popup v-model="show">
- <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="show = false"
- :disabled="true" />
+ <popup-delivery
+ showBtns
+ :detailData="detailData"
+ :key="detailData.order_no"
+ @close="show = false"
+ :disabled="true"
+ />
</van-popup>
</div>
</template>
<script>
-import { Tab, Tabs, Popup } from 'vant';
-import PopupDelivery from '@/components/popup-delivery'
+import { Tab, Tabs, Popup } from "vant";
+import PopupDelivery from "@/components/popup-delivery";
export default {
data() {
return {
active: 2,
show: false,
- detailData: {}
- }
+ detailData: {},
+ };
},
props: {
listData: {
type: Array,
default() {
- return []
- }
- }
+ return [];
+ },
+ },
},
components: {
[Tab.name]: Tab,
[Tabs.name]: Tabs,
[Popup.name]: Popup,
- PopupDelivery
+ PopupDelivery,
},
methods: {
- onDetail(item) { // 详细界面
- this.show = true
- this.detailData = item
- }
- }
-}
+ onDetail(item) {
+ // 详细界面
+ this.show = true;
+ this.detailData = item;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.position {
@@ -124,7 +157,7 @@
font-style: normal;
font-weight: 400;
font-size: 26.4981px;
- color: #FFFFFF;
+ color: #ffffff;
}
.position-tag-title {
@@ -138,7 +171,7 @@
font-style: normal;
font-weight: 400;
font-size: 30.9145px;
- color: #848E9C;
+ color: #848e9c;
}
.position-tag-img {
@@ -149,12 +182,12 @@
}
.red {
- background: #F6465D;
+ background: #f6465d;
border-radius: 6.6266px;
}
.green {
- background: #5EBA89;
+ background: #5eba89;
border-radius: 6.62453px;
}
@@ -168,7 +201,7 @@
font-style: normal;
font-weight: 400;
font-size: 30px;
- color: #848E9C;
+ color: #848e9c;
}
.position-text2 {
@@ -187,15 +220,15 @@
}
.color-red {
- color: #F6465D !important;
+ color: #f6465d !important;
}
.color-green {
- color: #5EBA89 !important;
+ color: #5eba89 !important;
}
.color-blue {
- color: #1D91FF !important;
+ color: #1d91ff !important;
}
}
--
Gitblit v1.9.3