| | |
| | | <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 { |
| | |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | font-size: 26.4981px; |
| | | color: #FFFFFF; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | .position-tag-title { |
| | |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | font-size: 30.9145px; |
| | | color: #848E9C; |
| | | color: #848e9c; |
| | | } |
| | | |
| | | .position-tag-img { |
| | |
| | | } |
| | | |
| | | .red { |
| | | background: #F6465D; |
| | | background: #f6465d; |
| | | border-radius: 6.6266px; |
| | | } |
| | | |
| | | .green { |
| | | background: #5EBA89; |
| | | background: #5eba89; |
| | | border-radius: 6.62453px; |
| | | } |
| | | |
| | |
| | | font-style: normal; |
| | | font-weight: 400; |
| | | font-size: 30px; |
| | | color: #848E9C; |
| | | color: #848e9c; |
| | | } |
| | | |
| | | .position-text2 { |
| | |
| | | } |
| | | |
| | | .color-red { |
| | | color: #F6465D !important; |
| | | color: #f6465d !important; |
| | | } |
| | | |
| | | .color-green { |
| | | color: #5EBA89 !important; |
| | | color: #5eba89 !important; |
| | | } |
| | | |
| | | .color-blue { |
| | | color: #1D91FF !important; |
| | | color: #1d91ff !important; |
| | | } |
| | | } |
| | | |