1

李

7 days ago 4f9044ae2a9f2db03bbb916bc5f6dfd12916361d

 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>