Merge branch 'dev6.19' of http://124.156.157.155:8060/r/composite_h5-main i...

lxf

2025-07-11 fd66f3c47027795370f363d74f2258491dd38542

Merge branch 'dev6.19' of http://124.156.157.155:8060/r/composite_h5-main into dev6.19

 src/assets/img/icon-arrow-down.png

 src/assets/img/icon-arrow-up.png

 src/assets/img/icon-dollar.png

 src/assets/img/icon-foldline.png

 src/assets/init.scss

@@ -502,6 +502,7 @@

  .rounded-2xl {
    border-radius: 16px;
    // width: 100%;
  }

  .rounded-full {

 src/components/Transform/assetsCenter/assets.vue

@@ -15,32 +15,27 @@
      </div>
      <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
        {{ funds.money_all_coin || '--' }}
        <span class="font-40 text-grey">≈{{ currency.currency_symbol
        }}{{
  funds.money_all_coin
  ? Number(funds.money_all_coin * currency.rate).toFixed(2)
  : ' --'
}}</span>
        
      </div>
      <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
    </div>
    <div class="pl-33 pr-33 btn-box flex justify-between">
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
        <div class="word-wrap">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/up.png`)" alt="" />
          <span> {{ $t('充币') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/up.png`)" alt="" />
          <span style="color: #000;"> {{ $t('充币') }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
        <div class="word-wrap">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
          <span>{{ $t('提币') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/down.png`)" alt="" />
          <span style="color: #000;">{{ $t('提币') }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
        <div class="word-wrap">
          <img :src="handImg(`../../../assets/theme/${THEME}/image/assets/l_r.png`)" alt="" />
          <span>{{ $t('闪兑') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/l_r.png`)" alt="" />
          <span style="color: #000;">{{ $t('闪兑') }}</span>
        </div>
      </div>
    </div>

 src/components/Transform/assetsCenter/overview.vue

@@ -24,20 +24,20 @@
    <div class="pl-33 pr-33 btn-box flex justify-between">
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
        <div class="word-wrap">
          <img :src="handleImage(`../../../assets/theme/dark/image/assets/up.png`)" alt="">
          <span> {{ $t('充币') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/up.png`)" alt="" />
          <span style="color: #000;"> {{ $t('充币') }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
        <div class="word-wrap">
          <img :src="handleImage(`../../../assets/theme/dark/image/assets/down.png`)" alt="">
          <span>{{ $t('提币') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/down.png`)" alt="" />
          <span style="color: #000;">{{ $t('提币') }}</span>
        </div>
      </div>
      <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
        <div class="word-wrap">
          <img :src="handleImage(`../../../assets/theme/dark/image/assets/l_r.png`)" alt="">
          <span>{{ $t('闪兑') }}</span>
          <img :src="handImg(`../../../assets/theme/white/image/assets/l_r.png`)" alt="" />
          <span style="color: #000;">{{ $t('闪兑') }}</span>
        </div>
      </div>
    </div>
@@ -90,7 +90,7 @@
        { id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' },
        { id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' },
        { id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' },
        { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
        // { id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
        { id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' },
      ]
    },
@@ -100,6 +100,9 @@
    // this.getList();
  },
  methods: {
      handImg(url) {
        return new URL(url, import.meta.url).href
      },
    handleImage(url) {
      return new URL(url, import.meta.url).href
    },

 src/components/Transform/contract-futrue/index.vue

@@ -7,14 +7,14 @@
        <!-- initFutrue: {{ initFutrue.para }} -->
        <li v-for="(item, index) in initFutrue.para" :key="index"
          class="h-92 flex items-center mb-22" @click="onSelect(item, index)">
          <p class="w-95 h-full flex justify-center items-center font-22 flex-1"
          <p class="w-280 h-full flex justify-center items-center font-22 flex-1"
            :class="active === item.para_id ? 'bg-light-blue text-white' : 'delivery_left_tab_background textColor'"
            >{{ item.time_num +
              item.time_unit.substr(0, 1) }}</p>
          <p class="w-125 h-full flex justify-center items-center font-22 flex-1"
          <!-- <p class="w-140 h-full flex justify-center items-center font-22 flex-1"
            :class="active === item.para_id ? 'bg-dark-blue text-white' : 'delivery_tab_background textColor'"
            >{{ 
              item.profit_ratio }}%</p>
              item.profit_ratio }}%</p> -->
        </li>
      </ul>
    </div>

 src/components/Transform/contract-header/index.vue

@@ -14,6 +14,8 @@
            <div class="pl-10 w-160  font-28" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range || '--' }}%</div>
              <!-- 右上角小图标 -->
            <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="klineJump()">
            <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 record-img"
              @click="goHistory" />
          </div>
          <!-- <div class="flex items-center">
                        <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@@ -144,6 +146,21 @@
    }
  },
  methods: {
      goHistory() {
        if (this.$store.state.user.userInfo.token) {
          let type = 'cryptos'
          if (this.$route.query.type) {
            type = this.$route.query.type
          }
          const url = this.topIndex / 1 === 1 ? '/cryptos/perpetualHistory' : '/cryptos/deliveryContractHistory'
          this.$router.push({
            path: url, query: { symbol: this.symbol, type: type }
          });
        } else {
          this.$router.push('/login')
        }
	  
      },
    onRoute(item) {
      if (this.$route.params.symbol !== item.symbol) {
        this.$router.push(`/cryptos/perpetualContract/${item.symbol}?selectIndex=${this.selectIndex}`)

 src/components/Transform/kline-charts/index.vue

@@ -26,7 +26,7 @@
          <van-loading type="spinner"></van-loading>
        </div>
      </div>
      <ul class="flex  px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
      <!-- <ul class="flex  px-32 py-20 box-border justify-between text-grey font-26" v-if="showBottom"
        style="border-top:1px solid rgba(68,75,88,0.2);">
        <template v-if="!isChange">
          <li v-for="item in subTechnicalIndicatorTypes" :key="item" class="mr-20"
@@ -42,7 +42,7 @@
              :class="{ 'text-black': typeValue === item }" @click="choiceType(item)">{{ item }}</li>
          </template>
        </template>
      </ul>
      </ul> -->
    </div>
  </div>
</template>
@@ -164,7 +164,7 @@
  },
  methods: {
    initData() {
      this.timeValue = this.timeList[0]
      this.timeValue = this.timeList[1]
      chart = init('kline', config);
      chart.setOffsetRightSpace(25)
      chart.setDataSpace(10)

 src/components/Transform/perpetual-open/index.vue

@@ -1,7 +1,7 @@
<template>
  <!-- 永续合约开仓页 -->
  <div id="cryptos">
    <div class="perpetual-open">
    <div class="perpetual-open" style="width: 280px;">
      <div class="flex pt-34  ">
        <div class="w-180 h-60 lh-60 text-center rounded tabBackground textColor">{{ $t('全仓') }} </div>
        <div class="w-140 h-60 lh-60 ml-29 rounded tabBackground textColor" v-if="selectIndex / 1 === 1">
@@ -21,7 +21,7 @@
      </div>
      <div class="pt-30 pb-20">
        <div class="flex">
          <div class="w-440 flex flex-col">
          <div class=" flex flex-col">
            <template v-if="selectIndex == 1">
              <div class="flex items-center h-66 rounded-lg text-grey">
                <p class="font-28 flex-1 flex items-center justify-center h-66 "
@@ -53,7 +53,7 @@
              <span class="ml-20">{{ queryType === 'cryptos' ? 'USDT' : 'USD' }}</span>
            </div>

            <div class="w-440 flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
            <div class=" flex items-center greyBg h-76 lh-76 rounded-lg" style="background-color:#f5f5f5;" v-if="initFutrue" >
              <!-- <div v-if="selectIndex == 1 && initFutrue.para && initFutrue.para.length > 0"
                class="w-80 flex items-center justify-center" style="height:100%;" @click="onReduce">
                <img src="../../../assets/image/public/reduce.png" alt="add" class="w-30 h-6" />
@@ -62,7 +62,7 @@
                style="width: 156px;" v-model="form.amount" type="number" @input="onInput" /> -->
              <input v-if="selectIndex == 2 && JSON.stringify(initFutrue.para) != '[]'"
                :placeholder="($t('最少') + initFutrue && initFutrue.para ? $t('最小金额') + initFutrue.para[paraIndex].buy_min : '')"
                class="border-none greyBg text-center textColor" style="width: 156px;background-color:#f5f5f5;" v-model="form.amount" type="number"
                class="border-none greyBg text-center textColor" style="width: 226px;background-color:#f5f5f5;" v-model="form.amount" type="number"
                @input="onInput" />
              <div class="w-80 flex items-center justify-center" style="height:100%;background-color:#f5f5f5;">
                <template v-if="selectIndex == 1">
@@ -198,7 +198,7 @@
                @click="$router.push('/login')">{{ $t('logIn') }}</div>
            </div>
          </div>
          <div class="ml-30">
          <!-- <div class="ml-30">
            <div class="w-290 flex justify-between text-grey font-22">
              <div>
                <div>{{ $t("价格") }}</div>
@@ -267,7 +267,6 @@
            <div class="flex k-select-box">
              <div class="mt-22 mb-22 select-box" style="position: relative">
                <div class="flex justify-between items-center w-full h-70" @click="selectArryBtn">
                  <!-- <img src="@/assets/image/public/warn.png" alt="warn-icon" class="w-25 h-25 pl-20"/> -->
                  <div class="pl-16 font-28 textColor" style="width: 80%">
                    {{ dataArrTitle }}
                  </div>
@@ -283,11 +282,11 @@
                <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30 ml-10" />
              </div>
            </div>
          </div>
          </div> -->
        </div>
      </div>
      <van-popup v-model:show="show" class="rounded-2xl">
        <popup-delivery showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
        <popup-delivery style="padding: 10px;" showBtns :detailData="detailData" :key="detailData.order_no" @close="onClose"
          @continueToBuy="continueTobuy" @timeEnd="handleTimeEnd" :price="price" />
      </van-popup>
      <van-action-sheet v-model:show="isSelectShow" @select="onSelect" :actions="actions" :cancel-text="$t('取消')"

 src/components/Transform/popup-delivery/index.vue

@@ -1,9 +1,9 @@
<template>
  <div id="cryptos">
    <div class="popup-delivery w-700 font-28 rounded-2xl overflow-hidden">
    <div class="popup-delivery w-500 font-28 rounded-2xl overflow-hidden" style="padding: 10px;height: 90%;">
      <div class="border-b-color pt-54 pb-36 relative textColor">
        <h1 class="font-38 px-32">{{ detailData.name }} {{ $t('交割') }}</h1>
        <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-10 top-10" @click="onClose" />
        <!-- <img src="@/assets/image/icon-close.png" class="w-38 h-38 absolute right-10 top-10" @click="onClose" /> -->
      </div>
      <div class="flex justify-center mt-45" v-if="!(detailData.state === 'created')">
        <!-- {{detailData.time_num}} -->

 src/components/Transform/trade-head/index.vue

@@ -42,6 +42,9 @@
              v-if="isCollect" />
            <img v-else src="../../../assets/image/icon-star.png" class="w-30 h-30 mr-10 ml-20" @click="openCurrency" />
          </div>
          <img src="../../../assets/image/public/record.png" alt="record-img" class="w-44 h-44  "
              @click="goHistory" />
		  
          <img v-if="isTrade" src="../../../assets/image/kline.png" class="w-44 h-44 right" alt=""
            @click="$router.push(`/cryptos/trendDetails/${symbol}?kineType=trade`)">
        </div>
@@ -223,6 +226,17 @@
      }
      this.show = false
    },
    goHistory() {
        if (this.$store.state.user.userInfo.token) {
            let type = 'cryptos'
            if (this.$route.query.type) {
                type = this.$route.query.type
            }
            this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
        } else {
            this.$router.push('/login')
        }
    },
    async onSidebar() { // 侧边栏打开
      // console.log(this.userInfo)
     // 优先用本地缓存的 coins

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

@@ -1,5 +1,5 @@
<template>
  <div class="flex flex-col flex-1 font-28">
  <div class="flex flex-col flex-1 font-28" style="width: 280px;">
    <div class="flex items-center h-66 tabBackground text-grey">
      <p class="font-28 flex-1 flex items-center justify-center h-66 buy-item"
        :class="currentType == 'open' ? 'open' : ''" @click="changeTab('open')">{{ $t('买入') }}</p>
@@ -30,9 +30,9 @@
      <div class="total-div" :class="[!isTotal ? 'active-bg' : '']" @click="checkIsTotal(false)">
        {{ $t('数量') }}
      </div>
      <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
      <!-- <div class="total-div" :class="[isTotal ? 'active-bg' : '']" @click="checkIsTotal(true)">
        {{ $t('总额') }}
      </div>
      </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"
@@ -90,6 +90,7 @@
    [Tab.name]: Tab
  },
  props: {
	
    symbol: {
      type: String,
      default: ''
@@ -166,7 +167,7 @@
        order_price_type: 'opponent', // 市价or限价
      },
      type: "1",//选中市价或限价类型
      currentType: "open", //开仓类型
      // currentType: "close", //开仓类型
      interval: 0.001,
      marks: (val) => val % 25 === 0,
      isTotal: false,
@@ -180,6 +181,7 @@
    ]
    this.title = this.selectData[0].title
    this.type = this.selectData[0].type
    // this.currentType = this.currentTypes
    this.form.order_price_type = 'opponent'
  },
  methods: {
@@ -470,15 +472,17 @@
}

.open {
  background-color: $green;
  background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  // background-color: $green;
  background-color: #2EBD85;
  // background: url(@/assets/image/public/open-bg.png) no-repeat right center;
  background-size: 100% 100%;
  color: white;
}

.close {
  background-color: $green;
  background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  background-color: #DE5D56;
  // background: url(@/assets/image/public/close-bg.png) no-repeat left center;
  
  background-size: 100% 100%;
  color: white;
}

 src/config/index.js

@@ -35,8 +35,8 @@

// const ENV_DEV = 'zhapi.coinbtcs.com' // dev
// const ENV_DEV = 'openapi.yanshiz.com' // dev
// const ENV_DEV = '192.168.10.24:8086' // dev
const ENV_DEV = 'aa.yanshiz.com' // dev
// const ENV_DEV = 'aa.yanshiz.com' // dev


// const ENV_PRO = 'qheufhj.site' //  app域名

 src/service/trade.api.js

@@ -1,7 +1,7 @@
import request from './request';
import { METHODS } from '@/config';
import { API_PREFIX } from '@/config';

import { getStorage, setStorage, handleImage } from '@/utils/utis.js'
/**
 * 获取 支付币种（法币） 列表
 * @returns {*}
@@ -306,6 +306,9 @@

// 获取k线
export const _getKline = (symbol, line) => { // 1min, 5min, 15min, 30min, 60min, 4hour, 1day, 1mon, 1week, 1分钟,5分钟,1天,1月
    if (!symbol) {
        symbol = getStorage('symbol')
    }
  return request({
    url: `${API_PREFIX}/hobi!getKline.action`,
    method: 'GET',

 src/views/cryptos/Funds/index.vue

@@ -12,13 +12,13 @@
      <div class="flex mt-17">
        <span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
        <span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
        <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
        <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
        <!-- <span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span> -->
        <!-- <span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span> -->
      </div>
      <over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
      <as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
      <contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
      <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>
      <!-- <contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract> -->
      <!-- <financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial> -->
    </div>
  </div>
</template>
@@ -53,13 +53,13 @@
        {
          type: this.$t('现货账户'),
        },
        {
          type: this.$t('合约'),
        // {
        //   type: this.$t('合约'),

        },
        {
          type: this.$t('理财'),
        },
        // },
        // {
        //   type: this.$t('理财'),
        // },
      ]
    }
  },

 src/views/cryptos/PerpetualContract/index.vue

@@ -5,6 +5,7 @@
      <ContractHeader :symbol="symbol" :range="range" :selectIndex="selectIndex" :symbolName="symbolName"
        :balance="userInfo.balance" @tab="onTopTab" @update-coin="onUpdate">
      </ContractHeader>
      <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
      <p class="status-info" v-if="chartData.market && chartData.market.status">
        <span>{{ chartData.market.status && $t(chartData.market.status) }},</span>
        <span class="time">{{ chartData.market.time_str }}</span>&nbsp;
@@ -171,55 +172,81 @@
            </div>
          </div>
        </section>
        <div class="mainBackground rounded-view" key="y">
        <div class="btns" style="margin-top:20px;">
            <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
            <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
        </div>
		
        <div class="ws_box">
            <div class="ws_box_box">
                <div class="ws_box_box_box">
                    <div class="ws_box_box_box_top">
                        <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
                        <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
                    </div>
                    <div class="ws_box_box_box_btn">{{quote.open}}</div>
                </div>
                <div class="ws_box_box_box">
                    <div class="ws_box_box_box_top">
                        <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
                        <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
                    </div>
                    <div class="ws_box_box_box_btn">{{quote.high}}</div>
                </div>
            </div>
            <div class="ws_box_box" style="padding-bottom: 10px;">
                <div class="ws_box_box_box">
                    <div class="ws_box_box_box_top">
                        <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
                        <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
                    </div>
                    <div class="ws_box_box_box_btn">{{quote.low}}</div>
                </div>
                <div class="ws_box_box_box">
                    <div class="ws_box_box_box_top">
                        <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
                        <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
                    </div>
                    <div class="ws_box_box_box_btn">{{quote.amount}}</div>
                </div>
            </div>
        </div>
        <van-popup v-model:show="showPopup"  :round="true">
          <div class="popup-content" >
            <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
              :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
              :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
            </PerpetualOpen>
            <!-- <van-button @click="showPopup = false">关闭</van-button> -->
          </div>
        </van-popup>
        <!-- <div class="mainBackground rounded-view" key="y">
          <PerpetualOpen class="pl-30 pr-30" :key="symbol" :selectIndex="selectIndex" :symbol="symbol"
            :green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
            :init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
          </PerpetualOpen>
          <div class="line"></div>
          <!-- 委托/持仓-->
          <PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
            :order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
            :futrue-histroy="futrueHistroy" @tab="onTab" @recall="onRecall">
          </PerpetualOrder>
        </div>
        </div> -->
      </div>

    </div>
    <div class="fixed-box">
    <!-- <div class="fixed-box">
      <div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
        <span class="font-30  textColor2" style="color:#fff;">{{ symbol.toUpperCase() }}&nbsp;&nbsp;{{ $t('k线图表') }}</span>
        <van-icon class="font-30" style="color:#fff;" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
      </div>
      <!-- <section class="indicator-index-container" v-if="showKlineChart">
        <div class="indicator-index-box">
          <div class="flex-l">
            <ul>
              <li v-for="(item, index) in filterOne" :key="item" @click="handleClickSelectTime(item, index)"
                :class="[item.index === timeLabelActive ? 'active' : '']">{{
                  item.name
                }}</li>
              <li @click="handleClickMoreBtn">{{ $t('更多') }}</li>
            </ul>
          </div>
        </div>
        <div class="indicator-index-box-second" v-if="showMore">
          <ul>
            <li v-for="(item, index) in filterTwo" :key="item" @click="handleClickSelectTime(item, index)"
              :class="[item.index === timeLabelActive ? 'active' : '']">{{
                item.name
              }}</li>
          </ul>
        </div>
      </section> -->
    
      <div class="kline-container flex" v-if="showKlineChart">
        <div class="chart-index">
          <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
            :key="`${symbol}-${timeValue}`" /> -->
          
          <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
        </div>
      </div>
    </div>
    </div> -->
  </div>
</template>

@@ -296,6 +323,7 @@
    return {
      quote: {},
      initTimer: null,
      showPopup:false,
      keyIndex: 0,
      timeout: null,
      timer: null, // 底部持仓等的公用定时器
@@ -322,6 +350,7 @@
      show: false, // popup
      animated1: false,
      animated2: false,
      _symbol:'',
      currentType: 'open',
      showCharts: false,
      type: 'cryptos',
@@ -380,6 +409,10 @@
      this.symbol = symbol
      this.init(symbol)
    },
    showPopupclick(e){
        this.showPopup = !this.showPopup
        // this.$refs.TradeOrderArea.changeTab(e);
    },
    changeCurrentType(type) {
      this.currentType = type
    },
@@ -464,6 +497,7 @@
      // this.clearTimeout()
      this.initParam(this.symbol, evt) // 重新初始化
        // 判断方法是否存在
        this.showPopup = false
      const fn = this[this.curTab];
      if (typeof fn === 'function') {
        fn.call(this, this.symbol);
@@ -474,7 +508,7 @@
      //console.log('下单后更新数据')
    },
    onTab(evt) { // 点击tab后的回调
      console.log('evt2', evt)
      // console.log('evt2', evt)
      this.clearTimer()
      // this.clearTimeout()
      this.curTab = evt
@@ -483,13 +517,13 @@
    fetchQoutes(symbol) { // 获取当前行情
      _getHomeList(symbol).then(data => { // 获取行情
        this.symbolName = data[0].name
        console.log(data[0].name)
        // console.log(data[0].name)
        this.handleQoutes(data)
        this.startQuoteSocket() // socket
      })
    },
    handleQoutes(data) {
      console.log('handleQoutes: ', data);
      // console.log('handleQoutes: ', data);
      if (data && data.length) {
        const cur = data[0]
        this.price = cur.close
@@ -688,9 +722,15 @@
      this.clearTimer()

      const _symbol = symbol || this.symbol
	  
      if(this.symbol){
          this._symbol = this.symbol
      }else{
          this._symbol =  symbol
      }
      console.log('init: ',this.symbol, symbol)
      this.fetchQoutes(_symbol)
      this.fetchDeepData(_symbol)
      // this.fetchDeepData(_symbol)
      this.initParam(_symbol) // 'open'
      // this.clearTimer()
      //if (this.curTab === 'fetchOrderListCur') {
@@ -779,6 +819,71 @@
</script>

<style lang="scss">
    .ws_box_box_box_btn{
        font-size: 35px;
        font-weight: bold;
        padding-bottom: 20px;
    }
    .ws_box_box_box_top_img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    .ws_box_box_box_top{
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
        color: #8c8883;
    }
    .ws_box_box_box{
        width: 50%;
        display: flex;
        flex-direction: column;
        padding-top: 40px;
        padding-left: 40px;
    }
    .ws_box_box{
        display: flex;
    }
    .ws_box{
        display: flex;
        flex-direction: column;
        background-color: #F6F7F9;
        border-radius:24px;
        color:#333;
        margin:30px;
    }
    .tbns_mr {
        font-weight: bold;
        font-size: 35px;
        text-align:center;
        background-color: #3A7FF6;
        color: #fff;
        width: 350px;
        line-height: 100px;
        height: 100px;
        border-radius: 50px;
    }
    .tbns_mc {
        font-weight: bold;
        font-size: 35px;
        text-align:center;
        background-color: #DE5D57;
        color: #fff;
        width: 350px;
        line-height: 100px;
        height: 100px;
        border-radius: 50px;
    }
	
    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 20px;
        // width: 100%;
    }
//.list-enter-active, .list-leave-active {
//  transition: all .5s;
//  transform: translateY(30px)

 src/views/cryptos/Trade/index.vue

@@ -1,8 +1,8 @@
<template>
  <div id="cryptos">
    <!-- 调节跳动深度 -->
    <div class="pb-108 no_touch">
      <!-- <div class="px-30 pt-20">
    <div id="cryptos">
        <!-- 调节跳动深度 -->
        <div class="pb-108 no_touch">
            <!-- <div class="px-30 pt-20">
        <div class="flex h-88 w-full box-border border-solid-grey rounded-lg">
          <div @click="$router.push('/cryptos/exchangePage')"
            class="font-bold font-32 flex justify-center items-center flex-1">
@@ -13,112 +13,162 @@
          </div>
        </div>
      </div> -->
      <trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
        :price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />

      <div class="trade-buy-sell flex justify-between px-30 py-30">
        <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
            <trade-head :isReturn="true" :backFunc="() => $router.push('/')" :symbolName="symbolName" :symbol="symbol"
                :price="price" :range="range" :isTrade="true" @update-coin="onUpdate" @data="quote = $event" />
            <div class="chart-index" style="margin-top: 30px;">
                <k-line-charts v-if="symbol" :update-key="updateKey" :update-data="quote" :symbol="symbol"
                    :showBottom="true" />
            </div>
            <div class="trade-buy-sell flex justify-between px-30 py-30">
                <!-- <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
          :price="price" @ordered="onOrdered" />
        <keep-alive>
          <cryptos-trade-deep-data :selectValue="selectValue" @getList="getList" :showType="showType" :symbol="symbol"
            v-if="symbol" :price="price" class="w-290 ml-30" />
        </keep-alive>
      </div>
      <div class="flex k-select-box">
        <div class="mt-20 mb-22 select-box" style="position:relative;">
          <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 font-28 textColor" style="width:80%;color: #333;">{{ title }}</div>
            <img src="../../../assets/image/public/grey-select.png" alt="select-icon" class="w-22 h-11 mr-20" />
          </div>
          <div class="option-box" v-show="isShow">
            <div class="font-28" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
        </keep-alive> -->
                <!-- <trade-order-area :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
          :price="price" @ordered="onOrdered" /> -->
                <div class="btns" style="margin-top:20px;">
                    <div class="tbns_mc" @click="showPopupclick('close')">{{$t('卖出')}}</div>
                    <div class="tbns_mr" @click="showPopupclick('open')">{{$t('买入')}}</div>
                </div>
				
            </div>
			
                <van-popup v-model:show="showPopup"  :round="true">
                  <div class="popup-content" style="padding: 20px;">
                    <trade-order-area  ref="TradeOrderArea" :symbol="symbol" :symbolName="symbolName" :init-open="initOpen" :init-close="initClose"
                    :price="price" @ordered="onOrdered"  />
                  </div>
                </van-popup>
            <div class="ws_box">
                <div class="ws_box_box">
                    <div class="ws_box_box_box">
                        <div class="ws_box_box_box_top">
                            <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-dollar.png"/>
                            <div class="ws_box_box_box_top_txt">{{$t('开')}}</div>
                        </div>
                        <div class="ws_box_box_box_btn">{{quote.open}}</div>
                    </div>
                    <div class="ws_box_box_box">
                        <div class="ws_box_box_box_top">
                            <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-up.png"/>
                            <div class="ws_box_box_box_top_txt">{{$t('高')}}</div>
                        </div>
                        <div class="ws_box_box_box_btn">{{quote.high}}</div>
                    </div>
                </div>
                <div class="ws_box_box" style="padding-bottom: 10px;">
                    <div class="ws_box_box_box">
                        <div class="ws_box_box_box_top">
                            <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-arrow-down.png"/>
                            <div class="ws_box_box_box_top_txt">{{$t('低')}}</div>
                        </div>
                        <div class="ws_box_box_box_btn">{{quote.low}}</div>
                    </div>
                    <div class="ws_box_box_box">
                        <div class="ws_box_box_box_top">
                            <img class="ws_box_box_box_top_img" src="../../../assets/img/icon-foldline.png"/>
                            <div class="ws_box_box_box_top_txt">{{$t('24h成交量')}}</div>
                        </div>
                        <div class="ws_box_box_box_btn">{{quote.amount}}</div>
                    </div>
                </div>
            </div>
			
            <!-- <div class="flex k-select-box">
                <div class="mt-20 mb-22 select-box" style="position:relative;">
                    <div class=" flex justify-between  items-center w-full h-70" @click="selectBtn">
                        <div class="pl-16 font-28 textColor" style="width:80%;color: #333;">{{ title }}</div>
                        <img src="../../../assets/image/public/grey-select.png" alt="select-icon"
                            class="w-22 h-11 mr-20" />
                    </div>
                    <div class="option-box" v-show="isShow">
                        <div class="font-28" v-for="(item, index) in sortList" :key="index" @click="selectItem(item)">{{
              item.name
            }}
            </div>
          </div>
        </div>
        <div class="ml-10" @click="isSelectShow = true">
          <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
        </div>
      </div>
      <div class="h-16 diviLine"></div>
      <div>
        <div class="flex justify-between border-b-color items-center">
          <div class="flex  pl-30">
                        </div>
                    </div>
                </div>
                <div class="ml-10" @click="isSelectShow = true">
                    <img src="../../../assets/image/selectIcon.png" alt="warn-icon" class="w-36 h-30" />
                </div>
            </div> -->
            <!-- <div class="h-16 diviLine"></div>
            <div>
                <div class="flex justify-between border-b-color items-center">
                    <div class="flex  pl-30">

            <div class="px-10 py-10 flex items-center text-grey font-28" @click="tabClick('1')"
              :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'">({{
                        <div class="px-10 py-10 flex items-center text-grey font-28" @click="tabClick('1')"
                            :class="tabType == '1' ? 'active-line' : ''">{{ $t('当前委托') }}<span v-if="tabType == '1'">({{
                entrustList.length }})</span></div>
            <div class="px-10  ml-50  py-10 flex  items-center text-grey font-28" @click="tabClick('2')"
              :class="tabType == '2' ? 'active-line' : ''">{{ $t('历史委托') }}</div>
            <div class="px-10 py-10 flex items-center  ml-50 text-grey font-28" @click="tabClick('3')"
              :class="tabType == '3' ? 'active-line' : ''">{{ $t('资产') }}</div>
          </div>
          <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 "
            @click="goHistory" />
        </div>
      </div>
      <div class="py-20 px-20" v-if="tabType == '1'">
        <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
          @cancelOrder="cancelOrder" />
      </div>
      <div class="py-20 px-20" v-else-if="tabType == '2'">
        <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice" :entrust="item"
          :state="item.state" @cancelOrder="cancelOrder" />
      </div>
      <div class="py-20 px-20" v-else>
        <div class="mb-20 border-b">
          <p class="font-28 text-grey mt-24 mb-22">{{ $t('当前币对资产') }}</p>
          <ul>
            <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
              <div class="flex items-center">
                <img
                  :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
                  class="w-52 h-52 rounded-full mr-16" />
                <p class="flex flex-col">
                  <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                  <span class="font-20 text-grey">{{ item.full_name }}</span>
                </p>
              </div>
              <div class="flex flex-col items-end">
                <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
                        <div class="px-10  ml-50  py-10 flex  items-center text-grey font-28" @click="tabClick('2')"
                            :class="tabType == '2' ? 'active-line' : ''">{{ $t('历史委托') }}</div>
                        <div class="px-10 py-10 flex items-center  ml-50 text-grey font-28" @click="tabClick('3')"
                            :class="tabType == '3' ? 'active-line' : ''">{{ $t('资产') }}</div>
                    </div>
                    <img src="../../../assets/image/public/record.png" alt="record-img" class="w-64 h-35 pr-30 "
                        @click="goHistory" />
                </div>
            </div> -->
            <div class="py-20 px-20" v-if="tabType == '1'">
                <entrust-item v-for="item in entrustList" :key="item.order_no" :entrust="item" state="submitted"
                    @cancelOrder="cancelOrder" />
            </div>
            <div class="py-20 px-20" v-else-if="tabType == '2'">
                <history-item unit="USDT" v-for="item in entrustList" :key="item.order_no" :coinPrice="coinPrice"
                    :entrust="item" :state="item.state" @cancelOrder="cancelOrder" />
            </div>
            <div class="py-20 px-20" v-else>
                <div class="mb-20 border-b">
                    <p class="font-28 text-grey mt-24 mb-22">{{ $t('当前币对资产') }}</p>
                    <ul>
                        <li v-for="item in pairsList" :key="item.symbol" class="flex justify-between py-10">
                            <div class="flex items-center">
                                <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
                                    class="w-52 h-52 rounded-full mr-16" />
                                <p class="flex flex-col">
                                    <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                    <span class="font-20 text-grey">{{ item.full_name }}</span>
                                </p>
                            </div>
                            <div class="flex flex-col items-end">
                                <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                                <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
                  item.usdt).toFixed(2) :
                  '--') }}</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="mb-20 border-b">
          <p class="font-28 text-grey mt-14 mb-42">{{ $t('其他非0资产') }}</p>
          <ul>
            <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
              <div class="flex items-center">
                <img
                  :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
                  class="w-52 h-52 rounded-full mr-16" />
                <p class="flex flex-col">
                  <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                  <span class="font-20 text-grey">{{ item.full_name }}</span>
                </p>
              </div>
              <div class="flex flex-col items-end">
                <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="mb-20 border-b">
                    <p class="font-28 text-grey mt-14 mb-42">{{ $t('其他非0资产') }}</p>
                    <ul>
                        <li v-for="item in no_zeroList" :key="item.symbol" class="flex justify-between py-10">
                            <div class="flex items-center">
                                <img :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handleImage('../../../assets/loading-default.png')"
                                    class="w-52 h-52 rounded-full mr-16" />
                                <p class="flex flex-col">
                                    <strong class="font-28 textColor mb-6">{{ item.symbol.toUpperCase() }}</strong>
                                    <span class="font-20 text-grey">{{ item.full_name }}</span>
                                </p>
                            </div>
                            <div class="flex flex-col items-end">
                                <strong class="font-28 textColor mb-6">{{ item.volume }}</strong>
                                <span class="font-20 text-grey">{{ currency.currency_symbol }} {{ (item.usdt ? (currency.rate *
                  item.usdt).toFixed(2) :
                  '--') }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div v-if="tabType == '1' && entrustList.length === 0"
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- <div v-if="tabType == '1' && entrustList.length === 0"
        class="flex flex-col justify-center items-center pt-185 pb-100">
        <img src="../../../assets/image/assets-center/no-data.png" alt="no-date" class="w-120 h-120" />
        <p class="textColor">{{ $t('暂无数据') }}</p>
      </div> -->
      <!-- <div class="fixed w-full shadow-box z-100 inputBackground">
            <!-- <div class="fixed w-full shadow-box z-100 inputBackground">
        <div class="flex justify-between px-30 py-10">
          <span class="font-24 textColor2">{{ symbol.toUpperCase() }}/USDT&nbsp;{{ $t('k线图表') }}</span>
          <van-icon class="textColor" :name="showCharts ? 'arrow-down' : 'arrow-up'"
@@ -127,12 +177,15 @@
        <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" v-if="symbol && showCharts"
          :showBottom="false" />
      </div> -->
      <div class="fixed-box">
            <!-- <div class="fixed-box">
        <div class="flex justify-between items-center px-30 py-20" @click.stop="handleClickShowKlineChart()">
          <span class="font-30  textColor2" style="">{{ symbol.toUpperCase() }}&nbsp;&nbsp;{{ $t('k线图表') }}</span>
          <van-icon class="textColor font-28" :name="showCharts ? 'arrow-down' : 'arrow-up'"></van-icon>
        </div>
        <!-- <section class="indicator-index-container" v-if="showKlineChart">
        <div class="kline-container flex" v-if="showKlineChart">
		
        </div> -->
            <!-- <section class="indicator-index-container" v-if="showKlineChart">
          <div class="indicator-index-box">
            <div class="flex-l">
              <ul>
@@ -153,668 +206,863 @@
            </ul>
          </div>
        </section> -->
        <div class="kline-container flex" v-if="showKlineChart">
          <div class="chart-index">
            <!-- <fx-kline :height="500" :symbol="symbol" :isShowsolid="true" :chartType="chartType" v-if="symbol" @data="onData"
            :key="`${symbol}-${timeValue}`" /> -->
            <k-line-charts :update-key="updateKey" :update-data="quote" :symbol="symbol" :showBottom="true" />
          </div>
        </div>
      </div>
      <van-action-sheet class="action-sheet" v-model:show="isSelectShow" @select="onSelect" :actions="actions"
        :cancel-text="$t('取消')" close-on-click-action @cancel="onCancel" />

    </div>
            <!-- </div> -->
            <van-action-sheet class="action-sheet" v-model:show="isSelectShow" @select="onSelect" :actions="actions"
                :cancel-text="$t('取消')" close-on-click-action @cancel="onCancel" />

  </div>
        </div>

    </div>
</template>

<script>
import TradeHead from '@/components/Transform/trade-head/index.vue'
import TradeOrderArea from '@/components/Transform/trade-order-area/index.vue'
import CryptosTradeDeepData from '@/components/Transform/cryptos-trade-deep-data/index.vue'
import EntrustItem from '@/components/Transform/entrust-item/index.vue'
import KLineCharts from '@/components/Transform/kline-charts/index.vue'
import historyItem from '@/components/Transform/history-item/index.vue'
import fxKline from '@/components/fx-kline/index.vue'
    import TradeHead from '@/components/Transform/trade-head/index.vue'
    import TradeOrderArea from '@/components/Transform/trade-order-area/index.vue'
    import CryptosTradeDeepData from '@/components/Transform/cryptos-trade-deep-data/index.vue'
    import EntrustItem from '@/components/Transform/entrust-item/index.vue'
    import KLineCharts from '@/components/Transform/kline-charts/index.vue'
    import historyItem from '@/components/Transform/history-item/index.vue'
    import fxKline from '@/components/fx-kline/index.vue'

import Axios from '@/service/trading'
import { _getHomeList } from '@/service/home.api'
import { Popup, Swipe, SwipeItem, Circle, Icon, showSuccessToast, showFailToast } from 'vant';
import { mapActions, mapGetters } from 'vuex'
import { SET_COIN_LIST } from '@/store/const.store'
import { WS_URL, HOST_URL } from '@/config'
import TradeApi from "@/service/trading.js";
import { getStorage, handleImage } from '@/utils/utis'
import { useQuotesStore } from '@/store/quotes.store'
import { SET_STAGE } from '@/store/types.store';
import { _getExchangeRate } from '@/service/cryptos.api'
const quotesStore = useQuotesStore()
export default {
  name: "TradePage",
  components: {
    TradeHead,
    TradeOrderArea,
    CryptosTradeDeepData,
    [Popup.name]: Popup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Circle.name]: Circle,
    [Icon.name]: Icon,
    EntrustItem,
    KLineCharts,
    historyItem,
    fxKline,
    KLineCharts
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
    ...mapGetters({
      coinList: 'home/coinList',
    }),
  },
  data() {
    const initArr = []
    for (let i = 0; i < 8; i++) {
      initArr.push({
        volume: '--',
        price: '--'
      })
    }
    return {
      HOST_URL,
      quote: {},
      showCharts: false,
      updateKey: 1,
      initTimer: null,
      keyIndex: 0,
      timeout: null,
      timer: null, // 底部持仓等的公用定时器
      timer2: null, // 交割合约底部持仓等的公用定时器
      symbol: '',
      price: '',
      range: '',
      initOpen: {},
      initClose: {},
      asks: initArr, // 卖单
      bids: initArr, // 买单
      orderCur: [], // 当前委托
      orderHold: [], // 持有仓位
      futrueHold: [], // 交割持仓
      futrueHistroy: [], // 交割历史
      socket: null, // 行情
      sockets: {
        quotes: null, // 行情
        deep: null /// 深度
      },
      curTab: '', // 当前委托还是持有仓位
      selectIndex: 1, // 当前tab
      initFutrue: {}, /// 交割合约
      show: false, // popup
      entrustList: [], //当前委托订单
      tabType: 1,
      no_zeroList: [], //其他非0资产数组
      pairsList: {}, //当前资产
      // curRequest: [], //
      isShow: false,
      title: 1,
      isSelectShow: false,
      actions: [{ name: this.$t('默认'), value: 0, className: 'actions-active' }, { name: this.$t('展示买单'), value: 1, className: "" }, { name: this.$t('展示卖单'), value: 2, className: '' }],
      showType: 0,
      sortList: [],
      selectValue: 0,
      coinPrice: 0,
      type: 'cryptos',
      filterOne: [
        { name: this.$t('分时'), paramsValue: 'timeSharing', seconds: 1 * 60 * 1000, index: 0, },
        { name: '1' + this.$t('天'), paramsValue: '1day', seconds: 1 * 24 * 60 * 60 * 1000, index: 1, },
        { name: '1' + this.$t('周'), paramsValue: '1week', seconds: 7 * 24 * 60 * 60 * 1000, index: 2, },
        { name: '1' + this.$t('月'), paramsValue: '1mon', seconds: 30 * 24 * 60 * 60 * 1000, index: 3, },
        { name: '5' + this.$t('天'), paramsValue: '5day', seconds: 5 * 24 * 60 * 60 * 1000, index: 4, },
        { name: this.$t('season'), paramsValue: '1quarter', seconds: 3 * 30 * 24 * 60 * 60 * 1000, index: 5, },
        { name: this.$t('Year'), paramsValue: '1year', seconds: 12 * 30 * 24 * 60 * 60 * 1000, index: 6, },
      ],
      filterTwo: [
        { name: '120' + this.$t('分'), paramsValue: '120min', seconds: 2 * 60 * 60 * 1000, index: 7, },
        { name: '60' + this.$t('分'), paramsValue: '60min', seconds: 1 * 60 * 60 * 1000, index: 8, },
        { name: '30' + this.$t('分'), paramsValue: '30min', seconds: 30 * 60 * 1000, index: 9, },
        { name: '15' + this.$t('分'), paramsValue: '15min', seconds: 15 * 60 * 1000, index: 10, },
        { name: '5' + this.$t('分'), paramsValue: '5min', seconds: 5 * 60 * 1000, index: 11, },
        { name: '1' + this.$t('分'), paramsValue: '1min', seconds: 1 * 60 * 1000, index: 12, },
      ],
      showKlineChart: false,
      chartType: '',
      timeValue: '',
      chartData: {},
      timeLabelActive: 1,
      showMore: false,
      symbolName: '',
      updateKey: 1,
      currency: {},
      timer3: null
    }
  },
  async created() {
    if (this.$route.query.type) {
      this.type = this.$route.query.type
    }
    await this.SET_COIN_LIST(this.type)
    this.getExchangeRate()
  },
  methods: {
    handleImage,
    ...mapActions('home', [SET_COIN_LIST]),
    onUpdate(symbol) { // 更新
      this.symbol = symbol
      this.closeSocket()
      this.init(symbol)
    },
    getExchangeRate() {
      _getExchangeRate({}).then((res) => {
        this.currency = res
      })
    },
    handleClickShowKlineChart() {
      this.showKlineChart = !this.showKlineChart
    },
    handleClickSelectTime(params) {
      const { paramsValue, seconds, index } = params;
      this.timeLabelActive = index;
      quotesStore[SET_STAGE]({ stage: paramsValue, seconds })
      this.onSelectTime(paramsValue)
    },
    onSelectTime(evt) {
      this.timeValue = evt
      if (evt == 'timeSharing') {
        this.chartType = 'area'
      } else {
        this.chartType = 'candle_solid'
      }
    },
    // 事件
    onData(data) {
      this.chartData = data
    },
    handleClickMoreBtn() {
      this.showMore = !this.showMore
    },
    getCoinPrce(val) {
      _getHomeList(val).then((res) => {
        this.symbolName = res[0].name
        this.coinPrice = res[0].close
      })
    },
    tabClick(type) {
      this.tabType = type;
      this.entrustList = []
      if (type == 3) {
        if (!this.userInfo.token) {
          this.$router.push('/login')
        } else {
          this.getWallet()
        }
      } else {
        if (!this.userInfo.token) {
          this.$router.push('/login')
        } else {
          this.getOrderList()
        }
      }
    },
    onOrdered(evt) { // 下单过后的回调
      this.clearTimer()
      // this.clearTimeout()
      this.initParam(this.symbol, evt) // 重新初始化
      //console.log('下单后更新数据')
    },
    onTab(evt) { // 点击tab后的回调
      // console.log('evt', evt)
      this.clearTimer()
      // this.clearTimeout()
      this.curTab = evt
      this[evt](this.symbol)
    },
    handleQoutes(data) {
      if (data && data.length) {
        const cur = data[0]
        this.price = cur.close
        this.range = cur.change_ratio_str || cur.changeRatioStr
        this.quote = cur
        this.updateKey++
      }
    },
    startQuoteSocket() { // 行情socket
      // console.log('symbol', this.symbol)
      if (!this.symbol) {
        return
      }
      this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
      this.socket.onmessage = (evt) => {
        const { data } = evt
        const { code, data: _data } = JSON.parse(data)
        if (code / 1 === 0) {
          this.handleQoutes(_data)
        }
      }
    },
    initParam(symbol, type) { // 初始化参数
      if (this.userInfo.token) {
        if (type === 'open' || !type) {
          //console.log('开仓数据')
          Axios.tradeBuyToken({})
            .then(res => {
              this.initOpen = res
              // console.log(this.initOpen.volume, res.data.volume, type)
            })
        }
        if (type === 'close' || !type) {
          Axios.tradeSellToken({
            symbol
          }).then(res => {
            this.initClose = res
          })
        }
    import Axios from '@/service/trading'
    import {
        _getHomeList
    } from '@/service/home.api'
    import {
        Popup,
        Swipe,
        SwipeItem,
        Circle,
        Icon,
        showSuccessToast,
        showFailToast
    } from 'vant';
    import {
        mapActions,
        mapGetters
    } from 'vuex'
    import { ref } from 'vue';
    import {
        SET_COIN_LIST
    } from '@/store/const.store'
    import {
        WS_URL,
        HOST_URL
    } from '@/config'
    import TradeApi from "@/service/trading.js";
    import {
        getStorage,
        handleImage
    } from '@/utils/utis'
    import {
        useQuotesStore
    } from '@/store/quotes.store'
    import {
        SET_STAGE
    } from '@/store/types.store';
    import {
        _getExchangeRate
    } from '@/service/cryptos.api'
    const quotesStore = useQuotesStore()
    export default {
        name: "TradePage",
        components: {
            TradeHead,
            TradeOrderArea,
            CryptosTradeDeepData,
            [Popup.name]: Popup,
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem,
            [Circle.name]: Circle,
            [Icon.name]: Icon,
            EntrustItem,
            KLineCharts,
            historyItem,
            fxKline,
            KLineCharts
        },
        computed: {
            ...mapGetters('user', ['userInfo']),
            ...mapGetters({
                coinList: 'home/coinList',
            }),
        },
        data() {
            const initArr = []
            for (let i = 0; i < 8; i++) {
                initArr.push({
                    volume: '--',
                    price: '--'
                })
            }
            return {
                HOST_URL,
                showPopup:false,
                quote: {},
                showCharts: false,
                updateKey: 1,
                initTimer: null,
                currentType:null,
                keyIndex: 0,
                timeout: null,
                timer: null, // 底部持仓等的公用定时器
                timer2: null, // 交割合约底部持仓等的公用定时器
                symbol: '',
                price: '',
                range: '',
                initOpen: {},
                initClose: {},
                asks: initArr, // 卖单
                bids: initArr, // 买单
                orderCur: [], // 当前委托
                orderHold: [], // 持有仓位
                futrueHold: [], // 交割持仓
                futrueHistroy: [], // 交割历史
                socket: null, // 行情
                sockets: {
                    quotes: null, // 行情
                    deep: null /// 深度
                },
                curTab: '', // 当前委托还是持有仓位
                selectIndex: 1, // 当前tab
                initFutrue: {}, /// 交割合约
                show: true, // popup
                entrustList: [], //当前委托订单
                tabType: 1,
                no_zeroList: [], //其他非0资产数组
                pairsList: {}, //当前资产
                // curRequest: [], //
                isShow: false,
                title: 1,
                isSelectShow: false,
                actions: [{
                    name: this.$t('默认'),
                    value: 0,
                    className: 'actions-active'
                }, {
                    name: this.$t('展示买单'),
                    value: 1,
                    className: ""
                }, {
                    name: this.$t('展示卖单'),
                    value: 2,
                    className: ''
                }],
                showType: 0,
                sortList: [],
                selectValue: 0,
                coinPrice: 0,
                type: 'cryptos',
                filterOne: [{
                        name: this.$t('分时'),
                        paramsValue: 'timeSharing',
                        seconds: 1 * 60 * 1000,
                        index: 0,
                    },
                    {
                        name: '1' + this.$t('天'),
                        paramsValue: '1day',
                        seconds: 1 * 24 * 60 * 60 * 1000,
                        index: 1,
                    },
                    {
                        name: '1' + this.$t('周'),
                        paramsValue: '1week',
                        seconds: 7 * 24 * 60 * 60 * 1000,
                        index: 2,
                    },
                    {
                        name: '1' + this.$t('月'),
                        paramsValue: '1mon',
                        seconds: 30 * 24 * 60 * 60 * 1000,
                        index: 3,
                    },
                    {
                        name: '5' + this.$t('天'),
                        paramsValue: '5day',
                        seconds: 5 * 24 * 60 * 60 * 1000,
                        index: 4,
                    },
                    {
                        name: this.$t('season'),
                        paramsValue: '1quarter',
                        seconds: 3 * 30 * 24 * 60 * 60 * 1000,
                        index: 5,
                    },
                    {
                        name: this.$t('Year'),
                        paramsValue: '1year',
                        seconds: 12 * 30 * 24 * 60 * 60 * 1000,
                        index: 6,
                    },
                ],
                filterTwo: [{
                        name: '120' + this.$t('分'),
                        paramsValue: '120min',
                        seconds: 2 * 60 * 60 * 1000,
                        index: 7,
                    },
                    {
                        name: '60' + this.$t('分'),
                        paramsValue: '60min',
                        seconds: 1 * 60 * 60 * 1000,
                        index: 8,
                    },
                    {
                        name: '30' + this.$t('分'),
                        paramsValue: '30min',
                        seconds: 30 * 60 * 1000,
                        index: 9,
                    },
                    {
                        name: '15' + this.$t('分'),
                        paramsValue: '15min',
                        seconds: 15 * 60 * 1000,
                        index: 10,
                    },
                    {
                        name: '5' + this.$t('分'),
                        paramsValue: '5min',
                        seconds: 5 * 60 * 1000,
                        index: 11,
                    },
                    {
                        name: '1' + this.$t('分'),
                        paramsValue: '1min',
                        seconds: 1 * 60 * 1000,
                        index: 12,
                    },
                ],
                showKlineChart: false,
                chartType: '',
                timeValue: '',
                chartData: {},
                timeLabelActive: 1,
                showMore: false,
                symbolName: '',
                updateKey: 1,
                currency: {},
                timer3: null
            }
        },
		
        async created() {
            if (this.$route.query.type) {
                this.type = this.$route.query.type
            }
            await this.SET_COIN_LIST(this.type)
            this.getExchangeRate()
        },
        methods: {
            onReady(){
                if (this.$refs.TradeOrderArea) {
                      this.$refs.TradeOrderArea.changeTab();
                }
            },
            handleImage,
            ...mapActions('home', [SET_COIN_LIST]),
            onUpdate(symbol) { // 更新
                this.symbol = symbol
                this.closeSocket()
                this.init(symbol)
            },
            showPopupclick(e){
                this.showPopup = !this.showPopup
                // this.currentType = e
                this.$refs.TradeOrderArea.changeTab(e);
            },
            getExchangeRate() {
                _getExchangeRate({}).then((res) => {
                    this.currency = res
                })
            },
            handleClickShowKlineChart() {
                this.showKlineChart = !this.showKlineChart
            },
            handleClickSelectTime(params) {
                const {
                    paramsValue,
                    seconds,
                    index
                } = params;
                this.timeLabelActive = index;
                quotesStore[SET_STAGE]({
                    stage: paramsValue,
                    seconds
                })
                this.onSelectTime(paramsValue)
            },
            onSelectTime(evt) {
                this.timeValue = evt
                if (evt == 'timeSharing') {
                    this.chartType = 'area'
                } else {
                    this.chartType = 'candle_solid'
                }
            },
            // 事件
            onData(data) {
                this.chartData = data
            },
            handleClickMoreBtn() {
                this.showMore = !this.showMore
            },
            getCoinPrce(val) {
                _getHomeList(val).then((res) => {
                    this.symbolName = res[0].name
                    this.coinPrice = res[0].close
                })
            },
            tabClick(type) {
                this.tabType = type;
                this.entrustList = []
                if (type == 3) {
                    if (!this.userInfo.token) {
                        this.$router.push('/login')
                    } else {
                        this.getWallet()
                    }
                } else {
                    if (!this.userInfo.token) {
                        this.$router.push('/login')
                    } else {
                        this.getOrderList()
                    }
                }
            },
            onOrdered(evt) { // 下单过后的回调
                this.clearTimer()
                // this.clearTimeout()
                this.initParam(this.symbol, evt) // 重新初始化
                //console.log('下单后更新数据')
            },
            onTab(evt) { // 点击tab后的回调
                // console.log('evt', evt)
                this.clearTimer()
                // this.clearTimeout()
                this.curTab = evt
                this[evt](this.symbol)
            },
            handleQoutes(data) {
                if (data && data.length) {
                    const cur = data[0]
                    this.price = cur.close
                    this.range = cur.change_ratio_str || cur.changeRatioStr
                    this.quote = cur
                    this.updateKey++
                }
            },
            startQuoteSocket() { // 行情socket
                // console.log('symbol', this.symbol)
                if (!this.symbol) {
                    return
                }
                this.socket = new WebSocket(`${WS_URL}/1/${this.symbol}`)
                this.socket.onmessage = (evt) => {
                    const {
                        data
                    } = evt
                    const {
                        code,
                        data: _data
                    } = JSON.parse(data)
                    if (code / 1 === 0) {
                        this.handleQoutes(_data)
                    }
                }
            },
            initParam(symbol, type) { // 初始化参数
                if (this.userInfo.token) {
                    if (type === 'open' || !type) {
                        //console.log('开仓数据')
                        Axios.tradeBuyToken({})
                            .then(res => {
                                this.initOpen = res
                                // console.log(this.initOpen.volume, res.data.volume, type)
                            })
                    }
                    if (type === 'close' || !type) {
                        Axios.tradeSellToken({
                            symbol
                        }).then(res => {
                            this.initClose = res
                        })
                    }

        if (this.userInfo.token) {
          this.getWallet()
          this.timer3 = setInterval(() => {
            this.getOrderList();
          }, 2000)
        }
      }
    },
    init(symbol) { // 初始化页面
      this.symbol = symbol
      if (!this.socket) {
        this.startQuoteSocket()
      }
      this.initParam(symbol) // 'open'
      this.clearTimer()
      this.getCoinPrce(symbol)
    },
    closeSocket() {
      this.socket && this.socket.close()
      this.socket = null
    },
    clearTimer() {
      clearInterval(this.timer)
      clearInterval(this.timer3)
      this.timer = null
    },
    tradeBuy() {
      Axios.tradeBuy({
        volume: 1,
        session_token: '',
        symbol: '',
        price: 1,
        order_price_type: '' //limit限价  opponent市价
      }).then((res) => {
        console.log(res);
      }).catch((error) => {
        if (error.code === 'ECONNABORTED') { showFailToast(this.$t('网络超时！')); }
        else if (error.msg !== undefined) { showFailToast(this.$t(error.msg)); }
      });
    },
    getOrderList() {
      TradeApi.tradeRecord({
        page_no: 1,
        symbol: this.$route.params.symbol,
        type: this.tabType == 1 ? 'orders' : 'hisorders'
      }).then(res => {
        console.log(res);
        this.entrustList = res
      }).catch(() => {
                    if (this.userInfo.token) {
                        this.getWallet()
                        this.timer3 = setInterval(() => {
                            this.getOrderList();
                        }, 2000)
                    }
                }
            },
            init(symbol) { // 初始化页面
                this.symbol = symbol
                if (!this.socket) {
                    this.startQuoteSocket()
                }
                this.initParam(symbol) // 'open'
                this.clearTimer()
                this.getCoinPrce(symbol)
            },
            closeSocket() {
                this.socket && this.socket.close()
                this.socket = null
            },
            clearTimer() {
                clearInterval(this.timer)
                clearInterval(this.timer3)
                this.timer = null
            },
            tradeBuy() {
                Axios.tradeBuy({
                    volume: 1,
                    session_token: '',
                    symbol: '',
                    price: 1,
                    order_price_type: '' //limit限价  opponent市价
                }).then((res) => {
                    console.log(res);
                }).catch((error) => {
                    if (error.code === 'ECONNABORTED') {
                        showFailToast(this.$t('网络超时！'));
                    } else if (error.msg !== undefined) {
                        showFailToast(this.$t(error.msg));
                    }
                });
            },
            getOrderList() {
                TradeApi.tradeRecord({
                    page_no: 1,
                    symbol: this.$route.params.symbol,
                    type: this.tabType == 1 ? 'orders' : 'hisorders'
                }).then(res => {
                    console.log(res);
                    this.entrustList = res
                }).catch(() => {

      })
    },
    cancelOrder(order) {
      TradeApi.tradeCancel({
        order_no: order,
      }).then(res => {
        this.initParam(this.symbol)
        showSuccessToast(this.$t('成功'))
      }).catch(() => {
                })
            },
            cancelOrder(order) {
                TradeApi.tradeCancel({
                    order_no: order,
                }).then(res => {
                    this.initParam(this.symbol)
                    showSuccessToast(this.$t('成功'))
                }).catch(() => {

      })
    },
    getWallet() {
      TradeApi.getPairs({
        pairs: `${this.symbol}/usdt`,
        symbolType: 'cryptos'
      })
        .then(res => {
          this.pairsList = res.pairs;
          this.no_zeroList = res.no_zero;
        })
    },
    goHistory() {
      if (this.userInfo.token) {
        let type = 'cryptos'
        if (this.$route.query.type) {
          type = this.$route.query.type
        }
        this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
      } else {
        this.$router.push('/login')
      }
    },
    //价格类型下拉框切换
    selectBtn() {
      this.isShow = !this.isShow;
    },
    //选择价格类型
    selectItem(item) {
      this.title = item.name;
      this.isShow = false;
      this.selectValue = item.value
    },
    onSelect(item) {
      this.showType = item.value
      this.actions.map((item) => {
        item.className = ''
      })
      item.className = 'actions-active'
    },
    onCancel() {
      this.isSelectShow = false
    },
    getList(val) {
      if (val.numberLength <= 2) {
        this.title = val.arry[0].name
      } else {
        this.title = val.arry[val.arry.length - 1].name
      }
      this.sortList = val.arry
    }
  },
  beforeRouteEnter(to, from, next) {
    let { params: { symbol } } = to
    // console.log('to', to)
    // let catchTradeSymbol = getStorage('tradeSymbol') || null
    // if (catchTradeSymbol != null) {
    //   symbol = catchTradeSymbol
    // }
    if (symbol) {
      next(vm => {
        vm.symbol = symbol
        vm.init(symbol)
      })
    } else {
      next()
    }
  },
  activated() {
    // if (!this.socket) {
    //     this.startQuoteSocket()
    // }
  },
  deactivated() {
    this.closeSocket()
    this.clearTimer()
  },
  beforeUnmount() {
    this.closeSocket()
    // this.clearTimeout(true)
    this.clearTimer()
  }
}

                })
            },
            getWallet() {
                TradeApi.getPairs({
                        pairs: `${this.symbol}/usdt`,
                        symbolType: 'cryptos'
                    })
                    .then(res => {
                        this.pairsList = res.pairs;
                        this.no_zeroList = res.no_zero;
                    })
            },
            goHistory() {
                if (this.userInfo.token) {
                    let type = 'cryptos'
                    if (this.$route.query.type) {
                        type = this.$route.query.type
                    }
                    this.$router.push(`/cryptos/tradeRecord/${this.symbol}/?type=${type}`)
                } else {
                    this.$router.push('/login')
                }
            },
            //价格类型下拉框切换
            selectBtn() {
                this.isShow = !this.isShow;
            },
            //选择价格类型
            selectItem(item) {
                this.title = item.name;
                this.isShow = false;
                this.selectValue = item.value
            },
            onSelect(item) {
                this.showType = item.value
                this.actions.map((item) => {
                    item.className = ''
                })
                item.className = 'actions-active'
            },
            onCancel() {
                this.isSelectShow = false
            },
            getList(val) {
                if (val.numberLength <= 2) {
                    this.title = val.arry[0].name
                } else {
                    this.title = val.arry[val.arry.length - 1].name
                }
                this.sortList = val.arry
            }
        },
        beforeRouteEnter(to, from, next) {
            let {
                params: {
                    symbol
                }
            } = to
            // console.log('to', to)
            // let catchTradeSymbol = getStorage('tradeSymbol') || null
            // if (catchTradeSymbol != null) {
            //   symbol = catchTradeSymbol
            // }
            if (symbol) {
                next(vm => {
                    vm.symbol = symbol
                    vm.init(symbol)
                })
            } else {
                next()
            }
        },
        activated() {
            // if (!this.socket) {
            //     this.startQuoteSocket()
            // }
        },
        deactivated() {
            this.closeSocket()
            this.clearTimer()
        },
        beforeUnmount() {
            this.closeSocket()
            // this.clearTimeout(true)
            this.clearTimer()
        }
    }
</script>

<style lang="scss" scoped>
@import "@/assets/init.scss";
    .ws_box_box_box_btn{
        font-size: 35px;
        font-weight: bold;
        padding-bottom: 20px;
    }
    .ws_box_box_box_top_img{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }
    .ws_box_box_box_top{
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: bold;
        color: #8c8883;
    }
    .ws_box_box_box{
        width: 50%;
        display: flex;
        flex-direction: column;
        padding-top: 40px;
        padding-left: 40px;
    }
    .ws_box_box{
        display: flex;
    }
    .ws_box{
        display: flex;
        flex-direction: column;
        background-color: #F6F7F9;
        border-radius:24px;
        color:#333;
        margin:30px;
    }
    @import "@/assets/init.scss";
    .tbns_mr {
        font-weight: bold;
        font-size: 35px;
        text-align:center;
        background-color: #3A7FF6;
        color: #fff;
        width: 350px;
        line-height: 100px;
        height: 100px;
        border-radius: 50px;
    }
    .tbns_mc {
        font-weight: bold;
        font-size: 35px;
        text-align:center;
        background-color: #DE5D57;
        color: #fff;
        width: 350px;
        line-height: 100px;
        height: 100px;
        border-radius: 50px;
    }

#cryptos {
  :v-deep(.px-4) {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
    .btns {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // margin: 10px;
        width: 100%;
    }

  :v-deep(.py-4) {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
    #cryptos {
        :v-deep(.px-4) {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }

        :v-deep(.py-4) {
            padding-top: 30px !important;
            padding-bottom: 30px !important;
        }


  //.list-enter-active, .list-leave-active {
  //  transition: all .5s;
  //  transform: translateY(30px)
  //}
  //.list-enter, .list-leave-to
  //  /* .list-leave-active for below version 2.1.8 */ {
  //  transform: translateY(0)
  //}
  :deep(.action-sheet .van-popup) {
    height: 100%;
    width: 670px;
  }
        //.list-enter-active, .list-leave-active {
        //  transition: all .5s;
        //  transform: translateY(30px)
        //}
        //.list-enter, .list-leave-to
        //  /* .list-leave-active for below version 2.1.8 */ {
        //  transform: translateY(0)
        //}
        :deep(.action-sheet .van-popup) {
            height: 100%;
            width: 770px;
        }

  .no_touch {
    -webkit-user-select: none;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
  }
        .no_touch {
            -webkit-user-select: none;
            user-select: none;
            -ms-user-select: none;
            -moz-user-select: none;
        }

  .list-enter-active,
  .list-leave-active {
    will-change: transform;
    transition: all 250ms;
  }
        .list-enter-active,
        .list-leave-active {
            will-change: transform;
            transition: all 250ms;
        }

  .list-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
        .list-enter {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }

  .list-leave {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
        .list-leave {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }

  .rounded-view {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 0 30px;
    box-sizing: border-box;
  }
        .rounded-view {
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            padding: 0 30px;
            box-sizing: border-box;
        }

  .my-swipe {
    width: 100%;
  }
        .my-swipe {
            width: 100%;
        }

  .active-line {
    position: relative;
    // padding-bottom: 18px;
    color: #fff;
    background-color: $btn_main;
  }
        .active-line {
            position: relative;
            // padding-bottom: 18px;
            color: #fff;
            background-color: $btn_main;
        }

  .active-line::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background-color: $btn_main;
  }
        .active-line::after {
            content: '';
            position: absolute;
            left: 0px;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 4px;
            background-color: $btn_main;
        }

  .shadow-box {
    bottom: 0;
  }
}
        .shadow-box {
            bottom: 0;
        }
    }

.border-b {
  border-color: $border_color;
}
    .border-b {
        border-color: $border_color;
    }

.k-select-box {
  position: relative;
  top: -30px;
  justify-content: flex-end;
  padding: 0 30px !important;
  align-items: center;
    .k-select-box {
        position: relative;
        top: -30px;
        justify-content: flex-end;
        padding: 0 30px !important;
        align-items: center;

  .select-box {
    width: 220px;
        .select-box {
            width: 220px;

    background: #f5f5f5;
            background: #f5f5f5;

    margin-right: 20px;
  }
            margin-right: 20px;
        }

}
    }

.z-100 {
  z-index: 100;
}
    .z-100 {
        z-index: 100;
    }

.option-box {
  z-index: 99;
  background-color: #f5f5f5;
  box-shadow: 0px 0px 0.1875rem 0.1875rem #f5f5f5;
}
    .option-box {
        z-index: 99;
        background-color: #f5f5f5;
        box-shadow: 0px 0px 0.1875rem 0.1875rem #f5f5f5;
    }

:deep(.van-action-sheet__content) {
  background: transparent;
    :deep(.van-action-sheet__content) {
        background: transparent;

  .van-action-sheet__item {
    background: transparent;
    color: $text_color;
  }
        .van-action-sheet__item {
            background: transparent;
            color: $text_color;
        }

}
    }

:deep(.van-action-sheet__gap) {
  background: transparent;
}
    :deep(.van-action-sheet__gap) {
        background: transparent;
    }

:deep(.van-action-sheet__cancel) {
  background: transparent;
}
    :deep(.van-action-sheet__cancel) {
        background: transparent;
    }

.fixed-box {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: #141417;
}
    .fixed-box {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 1000;
        background: #141417;
    }

.indicator-index-container {
  .indicator-index-box {
    padding: 24px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    .indicator-index-container {
        .indicator-index-box {
            padding: 24px;
            display: flex;
            // justify-content: space-between;
            align-items: center;



    ul {
      display: flex;
      flex-wrap: wrap;
            ul {
                display: flex;
                flex-wrap: wrap;

      li {
        text-align: center;
        margin: 0 8px;
        padding: 0px 8px;
        font-size: 24px;
        border-radius: 8px;
      }
    }
                li {
                    text-align: center;
                    margin: 0 8px;
                    padding: 0px 8px;
                    font-size: 24px;
                    border-radius: 8px;
                }
            }


    .flex-r {
      display: flex;
      justify-content: flex-end;
      width: 80px;
            .flex-r {
                display: flex;
                justify-content: flex-end;
                width: 80px;

      img {
        width: 12px;
        height: 16px;
      }
                img {
                    width: 12px;
                    height: 16px;
                }

    }
  }
            }
        }

  .active {
    background: $btn_main;
  }
}
        .active {
            background: $btn_main;
        }
    }

.indicator-index-box-second {
  ul {
    display: flex;
    border: 1px solid $border_color;
    align-items: center;
    border-right: none;
  }
    .indicator-index-box-second {
        ul {
            display: flex;
            border: 1px solid $border_color;
            align-items: center;
            border-right: none;
        }

  li {
    flex: 1;
    height: 64px;
    line-height: 64px;
    text-align: center;
    font-size: 12px;
    border-right: 1px solid $border_color;
  }
}
        li {
            flex: 1;
            height: 64px;
            line-height: 64px;
            text-align: center;
            font-size: 12px;
            border-right: 1px solid $border_color;
        }
    }

.kline-container {
  margin-top: 10px;
    .kline-container {
        margin-top: 10px;

  .order-book-container {
    padding: 100px 2px 0 6px;
    width: 130px;
    border-left: 1px solid $border_color;
  }
        .order-book-container {
            padding: 100px 2px 0 6px;
            width: 130px;
            border-left: 1px solid $border_color;
        }

  .chart-index {
    flex: 1;
    min-width: 200px;
  }
        .chart-index {
            flex: 1;
            min-width: 200px;
        }


  .text-sm {
    position: relative;
  }
        .text-sm {
            position: relative;
        }

  .select-div {
    width: 100px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 100;
        .select-div {
            width: 100px;
            position: absolute;
            top: 30px;
            left: 0;
            z-index: 100;

    ul {
      box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);
            ul {
                box-shadow: 0px 3px 11px 0px rgb(0 0 0 / 10%);

      li {
        background: $mainbgWhiteColor;
        text-align: center;
        padding: 10px 0;
        font-size: 16px;
      }
                li {
                    background: $mainbgWhiteColor;
                    text-align: center;
                    padding: 10px 0;
                    font-size: 16px;
                }

      li:not(:last-child) {
        border-bottom: 1px solid $border-grey;
      }
    }
  }
                li:not(:last-child) {
                    border-bottom: 1px solid $border-grey;
                }
            }
        }

  .active {
    background: $btn_main !important;
    color: $text_color;
  }
}
        .active {
            background: $btn_main !important;
            color: $text_color;
        }
    }

.diviLine{
  background-color: #f5f5f5;
}
.textColor2, .textColor{
  color: #fff;
}
</style>
    .diviLine {
        background-color: #f5f5f5;
    }

    .textColor2,
    .textColor {
        color: #fff;
    }
</style>

 src/views/news/index.vue

@@ -62,7 +62,7 @@
      <div class="w-40 h-40 rounded-full flex items-center justify-center">
        <img class="w-33 h-33" src="@/assets/a.jpg" draggable="false">
      </div>
      <div class="text-center">{{ t('理财') }}</div>
      <div class="text-center">{{t('理财')}}</div>
    </div>
    <div class="flex-1 flex flex-col items-center" @click="goToPage('/cryptos/trade/USDSGD')">
      <div class="w-40 h-40 rounded-full flex items-center justify-center">

 src/views/optional/index.vue

@@ -13,6 +13,9 @@
      <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/exchangePage')">
        <div class="text-13 font-bold">{{ t('兑换') }}</div>
      </div>
      <div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/funds')">
        <div class="text-13 font-bold">{{ t('资产') }}</div>
      </div>
      <div class="flex flex-1 justify-end">
        <!-- <img src="@/assets/imgs/icon-order.png" class="w-14 h-15" draggable="false"> -->
      </div>

 yarn.lock

@@ -1128,9 +1128,9 @@
  dependencies:
    "is-arrayish" "^0.2.1"

"esbuild-darwin-64@0.15.18":
  "integrity" "sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg=="
  "resolved" "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.15.18.tgz"
"esbuild-windows-64@0.15.18":
  "integrity" "sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw=="
  "resolved" "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.15.18.tgz"
  "version" "0.15.18"

"esbuild@^0.15.9":
@@ -1420,11 +1420,6 @@
  "integrity" "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
  "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
  "version" "1.0.0"

"fsevents@~2.3.2":
  "integrity" "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="
  "resolved" "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
  "version" "2.3.2"

"function-bind@^1.1.1":
  "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="