1

jhzh

2026-05-22 ef52095f5e9f0a9fe2da779bb1573947d77d75b6

 src/views/cryptos/TrendDetails/index.vue

@@ -1,17 +1,17 @@
<template>
  <div id="cryptos">
    <div class="trend-detail pb-90" :class="isNight ? 'bg-night' : 'bg-white'">
  <div id="cryptos" :class="{ 'trend-detail-white': kineType === 'trade' }">
    <div class="trend-detail pb-90" >
      <trade-head :backFunc="() => $router.push('/')" :symbol="symbol" :islevel="true" @update-coin="onUpdate"
        @data="quote = $event" :title="$t('永续')" @changeLine="onChangeLine" :isNight="isNight" :isChange="isChange"
        :kineType="kineType" :tabIndex="tab" @changeNight="OnchangeNight" :symbolName="quote.name" />
      <div class="flex justify-between px-32 pt-40" v-if="!kineType">
      <!-- <div class="flex justify-between px-32 pt-40" v-if="!kineType">
        <div class="w-368 h-80 mr-32 font-28 flex justify-center items-center rounded-ban box-border tabBtn"
          :class="tab === '1' ? 'activeBtn' : ''" @click="onTab('1')">{{ $t('永续合约') }}</div>
        <div class="w-368 h-80  font-28 flex justify-center items-center rounded-ban box-border tabBtn"
          :class="tab === '2' ? 'activeBtn' : ''" @click="onTab('2')">{{ queryType == 'cryptos' ? $t('交割合约') :
            $t('期货交易')
          }}</div>
      </div>
      </div> -->
      <!-- 数据区 -->
      <div :class="{ slide2: animated1, slide1: animated2 }">
        <div class="data-index">
@@ -57,9 +57,9 @@
          <kline-charts :update-key="updateKey" :update-data="quote" :isChangeLine="isChangeLine" :symbol="symbol"
            v-if="symbol" @updataLine="isChangeLine = false" :isNight="isNight" :isChange="isChange" />
        </div>
        <div class="w-full h-20 " :class="isNight ? 'bg-black' : 'bg-grey'"></div>
        <div class="w-full h-20 " ></div>
        <!-- tab 区域-->
        <div class="pb-180 tabContent">
        <div class="pb-180 tabContent" style="background-color: #fff !important;">
          <van-tabs v-model:active="active">
            <van-tab :title="$t('entrustOrder')" name="1">
              <div class="flex px-32 justify-between px-32">
@@ -104,102 +104,12 @@
                </ul>
              </div>
            </van-tab>
            <van-tab :title="$t('最新交易')" name="2">
              <ul class="px-32 font-28 text-grey">
                <li class="flex justify-between mt-30">
                  <span class="flex-1">{{ $t('时间') }}</span>
                  <span class="flex-1">{{ $t('方向') }}</span>
                  <span class="flex-1">{{ $t('价格') }}{{ queryType == 'cryptos' ? '(USDT)' : '(USD)' }}</span>
                  <span class="flex-1 flex justify-center buy-title">{{ $t('数量') }}({{ symbolData.toUpperCase()
                  }})</span>
                </li>
                <li v-for="(item, index) in deals" :key="item.ts + item.price + item.amount || index"
                  class="flex  justify-between mt-30">
                  <span class="flex-1">{{ item.current_time ? item.current_time : '--' }}</span>
                  <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'" class="flex-1">{{
                    item.direction === 'buy' ? $t('买入') : $t('卖出') }}</span>
                  <span :class="item.direction === 'buy' ? 'text-green' : 'text-red'"
                    class="flex-1 flex-justify-center">{{ item.price || '--' }}</span>
                  <span class="flex-1 flex justify-center">{{ item.amount || '--' }}</span>
                </li>
              </ul>
            </van-tab>
            <van-tab :title="$t('深度图')" name="3">
              <div class="buy-sell-box">
                <div class="buy-item font-28">
                  <div class="bg-line"></div>
                  {{ $t('买盘') }}
                </div>
                <div class="sell-item font-28">
                  <div class="bg-line"></div>
                  {{ $t('卖盘') }}
                </div>
              </div>
              <div class="deep-chart-box">
                <deep-chart :deepBuy="deepBuy" :deepSell="deepSell"></deep-chart>
              </div>
            </van-tab>
            <!-- <van-tab :title="$t('数据分析')" name="4">
                        <div class="capital-box">
                            <div class="capital-flows">
                                <span class="title">资金流向分析</span><van-icon name="warning-o" />
                            </div>
                            <div class="tab-box">
                                <div class="tab-item" v-for="(item, index) in 10">
                                    15M
                                </div>
                            </div>
                            <div class="pie-box">
                                <pie-chart></pie-chart>
                            </div>
                            <div class="order-box">
                                <div class="order-header">
                                    <div class="flex-item">订单类型</div>
                                    <div class="flex-item">买入</div>
                                    <div class="flex-item">卖出</div>
                                    <div class="flex-item">净流入</div>
                                </div>
                                <div class="order-main flex" v-for="(item, index) in 4" :key="index">
                                    <div class="flex-item">大单</div>
                                    <div class="flex-item text-red">9.3720</div>
                                    <div class="flex-item text-red">3.0200</div>
                                    <div class="flex-item text-green">6.3400</div>
                                </div>
                            </div>

                            <div class="capital-title">
                                <span class="title">5*24小时大单流入（{{ symbol.toUpperCase() }}）</span>
                                <div class="text">5日主力净流入 -348.9411</div>
                            </div>
                            <div class="cylinder-kline">
                                <cylinder-chart></cylinder-chart>
                            </div>
                            <div class="capital-title">
                                <span class="title">24小时资金流入（{{ symbol.toUpperCase() }}）</span>
                            </div>
                            <div class="inflow-kline">
                                <inflow-kline></inflow-kline>
                            </div>
                        </div>
                    </van-tab> -->
            <!--                     <van-tab  :title="$t('币种简介')" name="3" class="border-t-color" v-if="this.$te(`${symbol}简介`)">-->
            <!--                        <div class="px-20 py-20 font-40 text-grey">-->
            <!--                           {{  $t('关于名称',{'symbol':symbol.toUpperCase() }) }}-->
            <!--                        </div>-->
            <!--                        <div class="px-20 py-20 font-32 text-grey">-->
            <!--                            {{  $t(`${symbol}简介`,{'symbol':symbol.toUpperCase() }) }}-->
            <!--                        </div>-->
            <!--                    </van-tab>-->
          </van-tabs>
        </div>
        <!-- 按钮区 -->
        <div
          class="flex pl-40 pt-20 pb-11 pr-32 text-white justify-between fixed w-full box-border h-90-px z-10 buttonSafe"
          v-if="!kineType" :class="isNight ? 'bg-night1' : 'bg-grey'">
          <!-- <div class="flex flex-col mx-30 items-center" @click="onRoute('/cryptos/exchangeRate')">
            <img src="@/assets/image/icon-rate.png" class="w-38 h-38" />
            <p class="font-25 text-grey mt-8 text-center">{{ $t('汇率') }}</p>
          </div> -->
          v-if="!kineType" style="background-color: #fff !important;">
          <div ref="toBuy" class="w-360 h-70 bg-green flex justify-center items-center rounded-ban font-28"
            @click=" onSubmit('buy')">
            {{ tab == 1 ? $t('开多') : $t('买多') }}
@@ -538,10 +448,23 @@
<style lang="scss" scoped>
@import "@/assets/init.scss";

#cryptos.trend-detail-white {
  background: #fff;
  min-height: 100%;
  :deep(.van-tabs__nav) {
    background-color: #fff !important;
  }
  :deep(.van-tabs__content) {
    background-color: #fff;
  }
}

#cryptos {
  background-color: #fff !important;
  :deep(.van-tabs__wrap) {
    height: 60px !important;
  background-color: #fff !important;

  }
}

@@ -550,7 +473,7 @@
}

:deep(.van-tabs__nav) {
  background-color: $night !important;
  // background-color: $night !important;
  // background-color: $inp-b !important;
}

@@ -623,6 +546,7 @@
}

.pb-180 {
  background-color: #fff !important;
  :deep(.van-tab) {
    flex: initial;
    padding: 0 2rem !important;