1

李凌

8 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/components/Transform/assetsCenter/financial.vue

@@ -1,91 +1,67 @@
<template>
  <div class="financial">
    <div class="flex justify-between box-border px-30 mt-43">
      <div @click="onTab(0)" :class="{ active: tapIndex === 0 }"
        class=" w-370 h-75 lh-75 rounded-lg font-27 text-center mr-20">{{ $t('货币理财') }}</div>
      <div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class=" w-370 h-75 lh-75 rounded-lg font-27 text-center">
        {{ $t('矿池理财') }}</div>
  <div class="funds-financial">
    <div class="sub-tabs">
      <div @click="onTab(0)" :class="{ active: tapIndex === 0 }" class="sub-tab-item">{{ $t('货币理财') }}</div>
      <div @click="onTab(1)" :class="{ active: tapIndex === 1 }" class="sub-tab-item">{{ $t('矿池理财') }}</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 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="right-clock">
          <img v-if="tapIndex === 0" @click="$router.push({ path: '/cryptos/financialHistory', query: { type: 0 } })"
            :src="handleImage('../../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
          <img v-if="tapIndex === 1" @click="$router.push({ path: '/cryptos/financialHistory', query: { type: 1 } })"
            :src="handleImage('../../../assets/image/assets-center/Subtract.png')" class="w-36 h-40" />
        <div class="history-btn" @click="goHistory">
          <img :src="handleImage('../../../assets/image/assets-center/Subtract.png')" />
        </div>
      </div>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
      <div class="balance-amount" v-if="!eyetel">
        <template v-if="tapIndex === 0">{{ funds.money_finance || '--' }}</template>
        <template v-if="tapIndex === 1">{{ funds.money_miner || '--' }}</template>
        <span class="font-39 text-grey" v-if="tapIndex === 0">≈{{ currency.currency_symbol }}{{ funds.money_finance ?
          (funds.money_finance *
            currency.rate).toFixed(2) : ' --' }}</span>
        <span class="font-39 text-grey" v-if="tapIndex === 1">≈{{ currency.currency_symbol }}{{ funds.money_miner ?
          (funds.money_miner *
            currency.rate).toFixed(2) : ' --' }}</span>
      </div>
      <div class="font-70 font-66 mt-18" v-else>********</div>
      <div class="flex font-26 lh-32 mb-35 mt-40">
        <div class="flex flex-col ">
          <div>{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <template v-if="!eyetel">
            <div class="font-40 mt-17 mb-9 textColor">{{ finData.today_profit || '--' }}</div>
            <!-- <div>≈{{currency.currency_symbol}}{{ finData.today_profit ? (finData.today_profit *
            currency.rate).toFixed(2) : ' --' }}</div> -->
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">********</div>
          </template>
      <div class="balance-amount" v-else>********</div>
      <div class="balance-fiat" v-if="!eyetel">
        ≈{{ currency.currency_symbol }}{{
          tapIndex === 0
            ? (funds.money_finance ? (funds.money_finance * currency.rate).toFixed(2) : ' --')
            : (funds.money_miner ? (funds.money_miner * currency.rate).toFixed(2) : ' --')
        }}
        </div>
        <div class="flex flex-col ml-110">
          <div>{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <template v-if="!eyetel">
            <div class="font-40 mt-17 mb-9 textColor">{{ finData.aready_profit || '0.00' }}</div>
            <!-- <div>≈{{currency.currency_symbol}}{{ finData.aready_profit ? (finData.aready_profit *
            currency.rate).toFixed(2) : '0.00' }}</div> -->
          </template>
          <template v-else>
            <div class="font-40 mt-17 mb-9 textColor">********</div>
          </template>
      <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>

      <div class="stats-grid">
        <div class="stat-block">
          <div class="stat-block-label">{{ $t('预计日收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <div class="stat-block-value" v-if="!eyetel">{{ finData.today_profit || '--' }}</div>
          <div class="stat-block-value" v-else>********</div>
        </div>
        <div class="stat-block">
          <div class="stat-block-label">{{ $t('累计收益') }}（{{ finData.outputCurrency ? finData.outputCurrency.toUpperCase() : 'USDT' }}）</div>
          <div class="stat-block-value" v-if="!eyetel">{{ finData.aready_profit || '0.00' }}</div>
          <div class="stat-block-value" v-else>********</div>
        </div>
        <div class="stat-block">
          <div class="stat-block-label">{{ $t('托管中总订单') }}</div>
          <div class="stat-block-value" v-if="!eyetel">{{ finData.order_sum || 0 }}</div>
          <div class="stat-block-value" v-else>********</div>
        </div>
      </div>
      <div class="flex flex-col lh-32 mb-35 ">
        <div>{{ $t('托管中总订单') }}</div>
        <template v-if="!eyetel">
          <div class="font-40 mt-17 mb-9 textColor">{{ finData.order_sum || 0 }}</div>
        </template>
        <template v-else>
          <div class="font-40 mt-17 mb-9 textColor">********</div>
        </template>
      </div>
    </div>
    <div class="w-full h-13 contBackground"></div>
    <div class="px-30">
      <div class="flex justify-between h-36 mt-37">
        <div v-if="tapIndex === 0" class=" font-6 h-36 lh-36 textColor">{{ $t('所有理财') }}</div>
        <div v-if="tapIndex === 0" class="font-26 blue h-36 lh-36 colorMain"
          @click="$router.push({ path: '/cryptos/fund-rule', query: { back: 0 } })">{{ $t('规则') }}</div>
        <div v-if="tapIndex === 1" class=" font-6 h-36 lh-36 textColor">{{ $t('所有矿机') }}</div>
        <div v-if="tapIndex === 1" class="font-26 blue h-36 lh-36 colorMain"
          @click="$router.push({ path: '/cryptos/machine-rule', query: { back: 0 } })">{{ $t('规则') }}</div>

    <div class="order-section">
      <div class="section-header">
        <span class="section-title">{{ tapIndex === 0 ? $t('所有理财') : $t('所有矿机') }}</span>
        <span v-if="tapIndex === 0" class="section-link" @click="goRule">{{ $t('规则') }}</span>
      </div>
      <template v-if="tapIndex === 0">
        <financial-list :list="finList" :type="tapIndex" :btnShow="true"></financial-list>
        <financial-list :list="finList" :type="tapIndex" :btnShow="true" />
      </template>
      <template v-else>
        <financial-list :list="machineList" :type="tapIndex" :btnShow="true"></financial-list>
        <financial-list :list="machineList" :type="tapIndex" :btnShow="true" />
      </template>

    </div>
  </div>
</template>
@@ -166,58 +142,153 @@
      })
    },
    changeEyes() {
      this.eyetel = !this.eyetel;
      this.eyetel = !this.eyetel
    },
    goHistory() {
      this.$router.push({ path: '/cryptos/financialHistory', query: { type: this.tapIndex } })
    },
    goRule() {
      if (this.tapIndex === 0) {
        this.$router.push({ path: '/cryptos/fund-rule', query: { back: 0 } })
      } else {
        this.$router.push({ path: '/cryptos/machine-rule', query: { back: 0 } })
      }
    }
  }
}
</script>

<style  lang="scss" scoped>
@import "@/assets/init.scss";
@import '@/assets/init.scss';

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

  .active {
    color: $text_color;
    background: $btn_main;
    border-color: $btn_main;
.sub-tabs {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  }

  .lh-32 {
    color: $text_color5;
.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');
  }

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

.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;
}

.balance-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.balance-label {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 26px;
  opacity: 0.9;
}

.eye-btn img {
  width: 36px;
  height: 22px;
}

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

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

  .cl {
    color: $text_color4;
    background: #EBECF0;
.balance-fiat {
  margin-top: 8px;
  font-size: 26px;
  opacity: 0.85;
  }

  .mr-13 {
    font-weight: 600;
    color: $text_color4;
.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);
  }

  .col {
    color: $text_color5;
.stat-block {
  flex: 1;
  min-width: 40%;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  }

  .font-6 {
.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;
  }

  .font-4 {
    font-weight: 400;
.order-section {
  margin-top: 8px;
  }

  .cl-33 {
    color: $text_color4;
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  }
}</style>

.section-title {
  font-size: 32px;
  font-weight: 600;
  @include themify() {
    color: themed('text_color');
  }
}

.section-link {
  font-size: 26px;
  color: #004aee;
}
</style>