1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 src/components/Transform/mining-account/index.vue

@@ -1,37 +1,32 @@
<template>
   <div id="cryptos">
      <div id="mining-account">
         <div style="position: relative" class="px-30 pb-104">
            <div class="account_card">
               <mining-exchange-input :title="$t('从')" :value1="form.volume" :actions="actions"
                  @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
                  :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
                  :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="true" />
               <!-- <div v-if="show" class="font-28 text-grey">
            {{ $t('可用数量') }}：
            <span class="textColor">{{ amountAvailable }}&nbsp;{{ form.symbol.toUpperCase() }}</span>
          </div> -->
            </div>

            <div class="flex justify-center convert-box">
               <img src="../../../assets/image/assets-center/convert-two.png" alt="" @click="onSwitch" />
            </div>

            <div class="account_card">
               <mining-exchange-input :title="$t('至')"
                  :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
                  @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
                  :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
                  :iconImg2="form.iconImg2" />
            </div>

            <div class="exchange-btn w-full flex justify-center mt-116">
               <p class="h-100 btnMain mx-auto flex justify-center items-center text-white w-768"
                  @click="onConfirm">
                  {{ $t('询价') }}
               </p>
            </div>
   <div id="cryptos" class="mining-account-wrap">
      <div id="mining-account" class="mining-account-inner">
         <!-- 上卡片：from user wallet -->
         <div class="exchange-card exchange-card-from">
            <mining-exchange-input :title="$t('from user wallet')" :value1="form.volume" :actions="actions"
               @select="onSelect('symbol', $event)" @input="onInput" :type="1" @max="onMax" :coin="form.symbol"
               :coin1="form.symbol_to" :tips="[]" :iconImg1="form.iconImg1" :iconImg2="form.iconImg2"
               :available="`${amountAvailable} ${form.symbol.toUpperCase()}`" :showMax="false" />
         </div>

         <!-- 中间：紫色互换图标 -->
         <div class="exchange-swap-circle" @click="onSwitch">
            <van-icon name="exchange" size="22" color="#fff" />
         </div>

         <!-- 下卡片：至用户钱包（与目标图一致） -->
         <div class="exchange-card exchange-card-to">
            <mining-exchange-input :title="$t('to user wallet')"
               :value="form.volume ? (form.volume * form.rate).toFixed(5) : ''" :actions="actions"
               @select="onSelect('symbol_to', $event)" :disabled="true" :type="2" :coin="form.symbol"
               :coin1="form.symbol_to" :tips="[]" :showMax="false" :iconImg1="form.iconImg1"
               :iconImg2="form.iconImg2" :available="toWalletBalance" />
         </div>

         <!-- 提交按钮 -->
         <button class="exchange-submit-btn" @click="onConfirm">
            {{ $t('提交') }}
         </button>
      </div>
   </div>
</template>
@@ -109,6 +104,10 @@
         }

         return res
      },
      toWalletBalance() {
         let dataInfo = this.wallets.find(item => item.symbol_data.toUpperCase() == this.form.iconImg2.toUpperCase())
         return dataInfo ? `${dataInfo.usable} ${(this.form.symbol_to || '').toUpperCase()}` : `0 ${(this.form.symbol_to || '').toUpperCase()}`
      },
   },
   data() {
@@ -263,66 +262,51 @@
</script>

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

#cryptos {
   .account_card {
      background: $inp-b !important;
      border-radius: 2.5rem;
      padding: 1.2rem 2.5rem;

      div {
         background: $inp-b !important;
      }
   }

   .exchange-btn {
      bottom: 48px;
      left: 0;

      font-size: 36px;

      p {
         border-radius: 4rem;
      }
   }

   .active {
      color: $black;

      &:after {
         content: '';
         display: block;
         position: absolute;
         bottom: 0;
         width: 140px;
         height: 8px;
         background: $active_line;
         margin: 0 auto;
      }
   }

   .convert-box {
      background: $mainbgWhiteColor;
      margin: -2rem auto;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 6rem;
      height: 6rem;
      position: relative;

      img {
         width: 50%;
         height: 50%;
      }
   }

   .btnMain {
      background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%);
      border-radius: 5px;
      font-weight: bold;
   }
.mining-account-wrap {
   background: transparent;
}
.mining-account-inner {
   position: relative;
   padding-bottom: 0;
}
.exchange-card {
   background: #fff;
   border-radius: 14px;
   padding: 24px 24px 29px;
   box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}
.exchange-card-from {
   margin-bottom: 0;
}
.exchange-swap-circle {
   width: 84px;
   height: 84px;
   margin: -42px auto 0;
   position: relative;
   z-index: 2;
   background: linear-gradient(135deg, #a443cf, #5e2bc8);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 5px 14px rgba(94, 43, 200, 0.35);
   cursor: pointer;
}
.exchange-card-to {
   margin-top: 0;
   padding-top: 42px;
}
.exchange-submit-btn {
   width: 100%;
   height: auto;
   padding: 18px 0;
   margin: 38px 0 48px;
   border: none;
   border-radius: 14px;
   background: linear-gradient(90deg, #a443cf, #5e2bc8);
   color: #fff;
   font-size: 2rem;
   font-weight: 600;
   cursor: pointer;
}
</style>