二三给的

李凌

2025-10-09 631dc512b226b346fefaebbedf1ddd79c06cab71

 src/components/Transform/trade-order-area/index.vue

@@ -11,7 +11,7 @@
      <div class=" flex justify-between  items-center w-full h-70" @click="selectBtn">
        <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
        <div class="pl-16 textColor" style="width:80%;">{{ title }}</div>
        <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 pr-20" />
        <img src="@/assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
      </div>
      <div class="option-box" v-if="isShow">
        <div class="font-30" v-for="item in selectData" :key="item.type" @click="selectItem(item)">{{ item.title }}
@@ -26,52 +26,57 @@
    <div class="h-70 lh-70  inputBackground mb-25 flex justify-center px-16 textColor2">
      <span>{{ title }}</span>
    </div>
    <div class="flex total-list">
      <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
        {{ $t('数量') }}
      </div>
      <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
        {{ $t('总额') }}
      </div>
    </div>
    <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
      <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
        @input="onInput" />
      <span class="textColor font-28">{{ symbol.toLocaleUpperCase() }}</span>
    </div>
    <div v-if="isTotal" class="h-70 lh-70 inputBackground  mb-36 flex justify-center px-16">
      <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
        @input="onInputTotal" />
      <span class="textColor font-28">{{ 'USDT' }}</span>
    </div>
    <div class="font-24 w-full flex justify-between items-center textColor1">
      <!-- <span class="flex-1 text-left">0%</span> -->
      <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
        @click="exchangeVal(25)">25%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
        @click="exchangeVal(50)">50%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
        @click="exchangeVal(75)">75%</span>
      <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
        @click="exchangeVal(100)">100%</span>
    </div>
    <div class="flex justify-between items-center mt-40">
      <div class="flex flex-col font-24">
        <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
            {{ initOpen.volume }}&nbsp;USDT</span>
        </p>
        <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume }}&nbsp;{{
          symbol.toLocaleUpperCase() }}</span></p>
      </div>
      <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
      <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
    </div>
    <div style="border-radius: 3.5rem;"
      class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
      :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
      {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
    </div>

    <template v-if="initClose.status / 1 === 0">
      <div class="flex justify-center items-center h-66 buy-item">{{ $t('停牌中,禁止交易') }}</div>
    </template>
    <template v-else>
      <div class="flex total-list">
        <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
          {{ $t('数量') }}
        </div>
        <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
          {{ $t('总额') }}
        </div>
      </div>
      <div v-if="!isTotal" class="h-70 lh-70 inputBackground mb-36 flex justify-center px-16">
        <input :placeholder="$t('数量')" class=" w-full h-70 border-none textColor font-28" v-model="form.volume"
          @input="onInput" />
        <span class="textColor font-28">{{ symbol.toLocaleUpperCase() }}</span>
      </div>
      <div v-if="isTotal" class="h-70 lh-70 inputBackground  mb-36 flex justify-center px-16">
        <input :placeholder="$t('总额')" class=" w-full h-70 border-none textColor font-28" v-model="form.total"
          @input="onInputTotal" />
        <span class="textColor font-28">{{ 'USDT' }}</span>
      </div>
      <div class="font-24 w-full flex justify-between items-center textColor1">
        <!-- <span class="flex-1 text-left">0%</span> -->
        <span class="flex-1 tab-item" :class="[percentageVal == 25 ? 'select-active' : '']"
          @click="exchangeVal(25)">25%</span>
        <span class="flex-1 tab-item" :class="[percentageVal == 50 ? 'select-active' : '']"
          @click="exchangeVal(50)">50%</span>
        <span class="flex-1 tab-item" :class="[percentageVal == 75 ? 'select-active' : '']"
          @click="exchangeVal(75)">75%</span>
        <span class="flex-1 tab-item" :class="[percentageVal == 100 ? 'select-active' : '']"
          @click="exchangeVal(100)">100%</span>
      </div>
      <div class="flex justify-between items-center mt-40">
        <div class="flex flex-col font-24">
          <p class="text-grey" v-if="this.currentType === 'open'">{{ $t('可用') }}<span class="textColor ml-8">
              {{ initOpen.volume }}&nbsp;USDT</span>
          </p>
          <p class="text-grey" v-else>{{ $t('可卖') }}<span class="textColor ml-8">{{ initClose.volume }}&nbsp;{{
            symbol.toLocaleUpperCase() }}</span></p>
        </div>
        <van-icon name="add-o" @click="$router.push('/cryptos/exchangePage')" class="font-30 add-icon" />
        <!-- <img @click="$router.push('/exchange/exchangePage')" src="@/assets/image/public/switch.png" class="w-24 h-24" /> -->
      </div>
      <div style="border-radius: 6px;"
        class="w-full h-90 lh-90 flex justify-center text-white text-center rounded buyandSell mt-70"
        :class="currentType === 'open' ? 'bg-green' : 'bg-red'" @click="order()">
        {{ currentType == 'open' ? $t('买入') : $t('卖出') }}
      </div>
    </template>
  </div>
</template>

@@ -364,19 +369,19 @@
@import "@/assets/init.scss";

.area_tabs {
  border-radius: 2.5rem;
  // border-radius: 2.5rem;

  .open,
  .close {
    border-radius: 2.5rem;
    // border-radius: 2.5rem;
  }

  .open {
    background: #06CDA5;
    background: #07c160;
  }

  .close {
    background: #f43368;
    background: #ee0a24;
  }
}

@@ -521,7 +526,7 @@
}

.option-box>div:hover {
    background-color: rgba($color: $bg_yellow, $alpha: 0.6);
  background-color: rgba($color: $bg_yellow, $alpha: 0.6);
}

.num-text-color {
@@ -555,7 +560,8 @@
}

.inputBackground {
  border-radius: 2.5rem;
  // border-radius: 2.5rem;

  input {
    background: transparent !important;
  }
@@ -565,35 +571,41 @@
  display: flex;
  align-items: center;
  justify-content: center;
  background: $input_background;
  border-radius: 2.5rem;
  // background: $input_background;
  // border-radius: 2.5rem;
  margin-right: 10px !important;
  padding: 10px 0;

  @include themify() {
    background: themed("input_background");
  }
}

.total-list {
  background: transparent;

  display: flex;

  color: $text_color;

  font-size: 26px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px !important;
  position: relative;

  .total-div {
    flex: 1;
    text-align: center;
    padding: 20px 0 !important;
  @include themify() {
    color: themed("text_color1");
  }
}

.total-div {
  flex: 1;
  text-align: center;
  padding: 20px 0 !important;
}

.active-bg {
  background: $input_background;
  border-radius: 2.5rem;
  @include themify() {
    background: themed("input_background");
    color: themed("text_color");
  }
}

.buyandSell {
@@ -602,6 +614,8 @@
}

.select-active {
  color: $text_color;
  @include themify() {
    color: themed("text_color");
  }
}
</style>