1

李凌

5 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/components/Transform/assetsCenter/contract.vue

@@ -1,85 +1,64 @@
<template>
  <div class="contract">
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="onTap(0)" :class="{ active: tapIndex === 0 }"
        class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('永续合约') }}</div>
      <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
        {{ $t('交割合约') }}</div>
  <div class="funds-contract">
    <div class="sub-tabs">
      <div @click="onTap(0)" :class="{ active: tapIndex === 0 }" class="sub-tab-item">{{ $t('永续合约') }}</div>
      <div @click="onTap(1)" :class="{ active: tapIndex === 1 }" class="sub-tab-item">{{ $t('交割合约') }}</div>
    </div>
    <div>
      <div class="box-border px-30 mt-42">
        <div class="flex justify-between text-grey relative">
          <div class="flex">
            <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span>
            <div @click.stop="changeEyes">
              <img :src="handleImage('../../../assets/image/assets-center/eye-open.png')" class="w-32 h-18"
                v-show="!eyetel" />
              <img :src="handleImage('../../../assets/image/assets-center/eye-close.png')" class="w-32 h-18"
                v-show="eyetel" />
            </div>
          </div>
          <div class="right-clock">
            <img @click="goHistory" :src="handleImage('../../../assets/image/assets-center/Subtract.png')"
              class="w-34 h-40" />

    <div class="balance-hero">
      <div class="balance-hero-top">
        <div class="balance-label">
          <span>{{ $t('总资产') }}（USDT）</span>
          <div class="eye-btn" @click.stop="changeEyes">
            <img :src="handleImage('../../../assets/image/assets-center/eye-open.png')" v-show="!eyetel" />
            <img :src="handleImage('../../../assets/image/assets-center/eye-close.png')" v-show="eyetel" />
          </div>
        </div>
        <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
          {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
          <span class="font-39 text-grey">≈{{ currency.currency_symbol }}{{ funds.money_contract ? (((tapIndex === 0 ?
            funds.money_contract :
            funds.money_futures) * currency.rate).toFixed(2)) : ' --' }}</span>
        </div>
        <div class="font-70 font-66 mt-18 textColor" v-else>******** </div>
        <div class="flex font-26 lh-32 mb-35 mt-40">
          <div class="flex flex-col ">
            <div>{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}（USDT）</div>
            <template v-if="!eyetel">
              <div class="font-40 mt-17 mb-9 textColor">{{ tapIndex === 0 ? funds.money_contract_deposit :
                funds.money_futures_profit }}</div>
              <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_deposit ? (((tapIndex === 0 ?
                funds.money_contract_deposit :
                funds.money_futures_profit) * currency.rate).toFixed(2)) : ' --' }}</div>
            </template>
            <template v-else>
              <div class="font-40 mt-17 mb-9 textColor">*********</div>
            </template>
          </div>
          <div class="flex flex-col ml-110">
            <div>{{ $t('钱包余额(USDT)') }}</div>
            <template v-if="!eyetel">
              <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_wallet }}</div>
              <div>≈{{ currency.currency_symbol }}{{ funds.money_wallet ? (funds.money_wallet * currency.rate).toFixed(2)
                :
                ' --' }}</div>
            </template>
            <template v-else>
              <div class="font-40 mt-17 mb-9 textColor">*********</div>
            </template>
          </div>
        </div>
        <div v-if="tapIndex === 0" class="flex flex-col lh-32 mb-35 ">
          <template v-if="!eyetel">
            <div>{{ $t('全部未实现盈亏') }}（USDT）</div>
            <div class="font-40 mt-17 mb-9 textColor">{{ funds.money_contract_profit }}</div>
            <div>≈{{ currency.currency_symbol }}{{ funds.money_contract_profit ? (funds.money_contract_profit *
              currency.rate).toFixed(2) : ' --' }}</div>
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">*********</div>
          </template>
        <div class="history-btn" @click="goHistory">
          <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
        </div>
      </div>
      <div class="w-full h-13 contBackground"></div>
      <!--永续合约持有仓位-->
      <div class="px-30">
        <template v-if="tapIndex === 0">
          <PerpetualPositionList :list-data="orderHold" @sell="onRecall"></PerpetualPositionList>
        </template>
        <!--交割合约持有仓位-->
        <template v-else>
          <futrue-hold-list :list-data="futrueHold" />
        </template>
      <div class="balance-amount" v-if="!eyetel">
        {{ tapIndex === 0 ? funds.money_contract : funds.money_futures }}
      </div>
      <div class="balance-amount" v-else>********</div>
      <div class="balance-fiat" v-if="!eyetel">
        ≈{{ currency.currency_symbol }}{{
          (tapIndex === 0 ? funds.money_contract : funds.money_futures)
            ? (((tapIndex === 0 ? funds.money_contract : funds.money_futures) * currency.rate).toFixed(2))
            : ' --'
        }}
      </div>
      <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>

      <div class="stats-grid">
        <div class="stat-block">
          <div class="stat-block-label">{{ tapIndex === 0 ? $t('保证金余额') : $t('全部未实现盈亏') }}（USDT）</div>
          <div class="stat-block-value" v-if="!eyetel">
            {{ tapIndex === 0 ? funds.money_contract_deposit : funds.money_futures_profit }}
          </div>
          <div class="stat-block-value" v-else>********</div>
        </div>
        <div class="stat-block">
          <div class="stat-block-label">{{ $t('钱包余额(USDT)') }}</div>
          <div class="stat-block-value" v-if="!eyetel">{{ funds.money_wallet }}</div>
          <div class="stat-block-value" v-else>********</div>
        </div>
        <div class="stat-block" v-if="tapIndex === 0">
          <div class="stat-block-label">{{ $t('全部未实现盈亏') }}（USDT）</div>
          <div class="stat-block-value" v-if="!eyetel">{{ funds.money_contract_profit }}</div>
          <div class="stat-block-value" v-else>********</div>
        </div>
      </div>
    </div>

    <div class="position-section">
      <template v-if="tapIndex === 0">
        <PerpetualPositionList :list-data="orderHold" @sell="onRecall" />
      </template>
      <template v-else>
        <futrue-hold-list :list-data="futrueHold" />
      </template>
    </div>
  </div>
</template>
@@ -205,74 +184,114 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos {
  .w-370 {
    border: 1px solid #EAEDF2;
    color: $text_color1;
.funds-contract {
  padding-top: 16px;
  padding-bottom: 40px;
}

.sub-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.sub-tab-item {
  flex: 1;
  text-align: center;
  padding: 20px 16px;
  border-radius: 16px;
  font-size: 28px;
  transition: all 0.2s ease;
  @include themify() {
    background: themed('cont_background');
    color: themed('text_color1');
  }

  .active {
    color: $text_color;
    background: $btn_main;
    border-color: $btn_main;
  }

  .lh-32 {
    color: $text_color5;
  }

  .font-40 {
    font-weight: 700;
  }

  .cl {
    color: $text_color4;
    background: #EBECF0;
  }

  .mr-13 {
  &.active {
    color: #fff;
    background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
    font-weight: 600;
    color: $text_color4;
    box-shadow: 0 6px 16px rgba(0, 74, 238, 0.28);
  }
}

  .col {
    color: $text_color5;
  }
.balance-hero {
  padding: 36px 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
  margin-bottom: 28px;
}

  .num {
    font-weight: 600;
    color: $text_color4;
  }
.balance-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

  .font-4 {
    font-weight: 400;
    color: $text_color4;
  }
.balance-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 26px;
  opacity: 0.9;
}

  .blue {
    color: $color_main;
  }
.eye-btn img {
  width: 36px;
  height: 22px;
}

  .active_green {
    color: $green;
  }
.history-btn img {
  width: 36px;
  height: 42px;
  opacity: 0.85;
}

  .active_red {
    color: $red;
  }
.balance-amount {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.15;
}

  .active_tab1 {
    background: $red;
    color: $text_color;
  }
.balance-fiat {
  margin-top: 8px;
  font-size: 26px;
  opacity: 0.85;
}

  .active_tab2 {
    background: $green;
    color: $text_color;
  }
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

  .font-6 {
    font-weight: 600;
  }
.stat-block {
  flex: 1;
  min-width: 40%;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
}

.stat-block-label {
  font-size: 22px;
  opacity: 0.85;
  line-height: 1.3;
}

.stat-block-value {
  margin-top: 8px;
  font-size: 28px;
  font-weight: 600;
}

.position-section {
  margin-top: 8px;
}
</style>