zzzz
2024-04-23 b6d88ca4a4b0d74c007fb4c574b1baee4aae062e
src/page/user/Warehouse copy.vue
@@ -1,7 +1,7 @@
<template>
   <div class="warehouse_page">
      <div class="content">
         <!-- <div class="search">
  <div class="warehouse_page">
    <div class="content">
      <!-- <div class="search">
        <div class="search_content">
          <div class="left_search">
            <div class="search_img">
@@ -14,18 +14,28 @@
          </div>
        </div>
      </div> -->
         <div style="width: 100%;height: 10px;"></div>
         <div class="top_class">
            <div class="top_class_box">
               <div :class="typeindex==0?'top_class_box_left':'top_class_box_right'" @click="typeclick(0)">
                  {{$t('ydgs')}}
               </div>
               <div :class="typeindex==1?'top_class_box_left':'top_class_box_right'" @click="typeclick(1)">
                  {{$t('mggs')}}
               </div>
            </div>
         </div>
         <!-- <div class="top_title" :class="titleDialog ? 'active' : ''" ref="topTitle">
      <div style="width: 100%; height: 10px"></div>
      <div class="top_class">
        <div class="top_class_box">
          <div
            :class="
              typeindex == 0 ? 'top_class_box_left' : 'top_class_box_right'
            "
            @click="typeclick(0)"
          >
            {{ $t("ydgs") }}
          </div>
          <div
            :class="
              typeindex == 1 ? 'top_class_box_left' : 'top_class_box_right'
            "
            @click="typeclick(1)"
          >
            {{ $t("mggs") }}
          </div>
        </div>
      </div>
      <!-- <div class="top_title" :class="titleDialog ? 'active' : ''" ref="topTitle">
        <div class="titles">
          <div class="left_title" @click="handleOpenDialog()">
            <div class="title">
@@ -62,1853 +72,2018 @@
          </div>
        </div>
      </div> -->
         <div class="warehouse_card">
            <div class="top_card" v-if="typeindex == 0">
               <div class="card_content">
                  <div class="t_title">
                     <span>{{ $t('ihj49') }}</span>
                  </div>
                  <div class="t_price">
                     <p class="price">{{$store.state.userInfo.userAmt}}</p>
                     <img src="../../../static/img/ydgq.png"
                        style="width: 17px;height: 17px;border-radius: 25px;" />
                  </div>
                  <div class="ydy_box">≈${{$store.state.userInfo.userAmtToUsdt}}</div>
                  <div class="balance">
                     <div class="left_titles">
                        {{ $t('disan') }}
                     </div>
                     <div class="right_titles">
                        {{ $t('disana') }}
                     </div>
                  </div>
                  <div class="num">
                     <div class="left_price">
                        <span>${{$store.state.userInfo.enableAmt}}</span>
                     </div>
                     <div class="right_margin">
                        <span>${{$store.state.userInfo.allFreezAmt}}</span>
                     </div>
                  </div>
                  <div style="width: 100%;display: flex;">
                     <div class="ydy_box" style="width: 50%;">≈${{$store.state.userInfo.enableAmtToUsdt}}</div>
                     <div class="ydy_box" style="width: 50%;">≈${{$store.state.userInfo.allFreezAmtToUsdt}}</div>
                  </div>
      <div class="warehouse_card">
        <div class="top_card" v-if="typeindex == 0">
          <div class="card_content">
            <div class="t_title">
              <span>{{ $t("ihj49") }}</span>
            </div>
            <div class="t_price">
              <p class="price">{{ $store.state.userInfo.userAmt }}</p>
              <img
                src="../../../static/img/ydgq.png"
                style="width: 17px; height: 17px; border-radius: 25px"
              />
            </div>
            <div class="ydy_box">
              ≈${{ $store.state.userInfo.userAmtToUsdt }}
            </div>
            <div class="balance">
              <div class="left_titles">
                {{ $t("disan") }}
              </div>
              <div class="right_titles">
                {{ $t("disana") }}
              </div>
            </div>
            <div class="num">
              <div class="left_price">
                <span>${{ $store.state.userInfo.enableAmt }}</span>
              </div>
              <div class="right_margin">
                <span>${{ $store.state.userInfo.allFreezAmt }}</span>
              </div>
            </div>
            <div style="width: 100%; display: flex">
              <div class="ydy_box" style="width: 50%">
                ≈${{ $store.state.userInfo.enableAmtToUsdt }}
              </div>
              <div class="ydy_box" style="width: 50%">
                ≈${{ $store.state.userInfo.allFreezAmtToUsdt }}
              </div>
            </div>
                  <div class="margin">
                     <div class="left_titles">
                        {{ $t('aym') }}
                     </div>
                     <div class="right_titles">
                        {{ $t('ysa') }}
                     </div>
                  </div>
                  <div class="prices">
                     <div class="left_titles">
                        <span class="numDemo">$0.00</span>
                     </div>
                     <div class="right_titles">
                        <span>$0.00</span>
                     </div>
                  </div>
                  <div style="width: 100%;display: flex;">
                     <div class="ydy_box" style="width: 50%;">≈$0.00</div>
                     <div class="ydy_box" style="width: 50%;">≈$0.00</div>
                  </div>
               </div>
            </div>
            <div class="top_card" v-else>
               <div class="card_content">
                  <div class="t_title">
                     <span>{{ $t('uszzcaa') }}</span>
                  </div>
                  <div class="t_price">
                     <p class="price">{{$store.state.userInfo.userIndexAmt}}</p>
                     <img src="../../../static/img/usgq.png"
                        style="width: 17px;height: 17px;border-radius: 25px;" />
                  </div>
                  <div class="balance">
                     <div class="left_titles">
                        {{ $t('uszzc') }}
                     </div>
                     <div class="right_titles">
                        {{ $t('djzjmg') }}
                     </div>
                  </div>
                  <div class="num">
                     <div class="left_price">
                        <span>{{$store.state.userInfo.enableIndexAmt}}</span>
                     </div>
                     <div class="right_margin">
                        <span>{{ $store.state.userInfo.usAllFreezAmt }}</span>
                     </div>
                  </div>
            <div class="margin">
              <div class="left_titles">
                {{ $t("aym") }}
              </div>
              <div class="right_titles">
                {{ $t("ysa") }}
              </div>
            </div>
            <div class="prices">
              <div class="left_titles">
                <span class="numDemo">$0.00</span>
              </div>
              <div class="right_titles">
                <span>$0.00</span>
              </div>
            </div>
            <div style="width: 100%; display: flex">
              <div class="ydy_box" style="width: 50%">≈$0.00</div>
              <div class="ydy_box" style="width: 50%">≈$0.00</div>
            </div>
          </div>
        </div>
        <div class="top_card" v-else>
          <div class="card_content">
            <div class="t_title">
              <span>{{ $t("uszzcaa") }}</span>
            </div>
            <div class="t_price">
              <p class="price">{{ $store.state.userInfo.userIndexAmt }}</p>
              <img
                src="../../../static/img/usgq.png"
                style="width: 17px; height: 17px; border-radius: 25px"
              />
            </div>
            <div class="balance">
              <div class="left_titles">
                {{ $t("uszzc") }}
              </div>
              <div class="right_titles">
                {{ $t("djzjmg") }}
              </div>
            </div>
            <div class="num">
              <div class="left_price">
                <span>{{ $store.state.userInfo.enableIndexAmt }}</span>
              </div>
              <div class="right_margin">
                <span>{{ $store.state.userInfo.usAllFreezAmt }}</span>
              </div>
            </div>
            <div class="margin">
              <div class="left_titles">
                {{ $t("accumbn") }}
              </div>
              <div class="right_titles">
                {{ $t("tolaszasdf") }}
              </div>
            </div>
            <div class="prices">
              <div class="left_titles">
                <span>{{ $store.state.userInfo.usAllProfitAndLose }}</span>
              </div>
              <div class="right_titles">
                <span class="numDemo">0.00</span>
              </div>
            </div>
          </div>
        </div>
        <div class="click_box">
          <div
            :class="zjtype == 0 ? 'click_box_left' : 'click_box_right'"
            @click="clickzj(0)"
          >
            {{ $t("nwetitle") }}
            <div v-if="zjtype == 0" class="click_box_g"></div>
          </div>
          <div
            :class="zjtype == 1 ? 'click_box_left' : 'click_box_right'"
            @click="clickzj(1)"
          >
            {{ $t("nwetitlea") }}
            <div v-if="zjtype == 1" class="click_box_g"></div>
          </div>
        </div>
        <div class="tabs_card">
          <div class="tabs_card_content">
            <!-- 持仓 currentIndex: 0 -->
            <div class="over">
              <van-list
                v-model="loading"
                :finished="finished"
                v-if="zjtype == 0 && cclist.length"
                :finished-text="$t('hj43')"
                :loading-text="$t('hj430')"
                @load="onLoad"
              >
                <div v-if="cclist.length > 0" class="tabs_o">
                  <div
                    class="tabs_o_items"
                    v-for="item in cclist"
                    :key="item.buyOrderId"
                  >
                    <div class="tabs_o_title">
                      <div style="width: calc(100% - 3.5rem); display: flex">
                        <div>
                          <span class="title">{{
                            item.stockName ? item.stockName : item.indexName
                          }}</span>
                        </div>
                  <div class="margin">
                     <div class="left_titles">
                        {{ $t('accumbn') }}
                     </div>
                     <div class="right_titles">
                        {{ $t('tolaszasdf') }}
                     </div>
                  </div>
                  <div class="prices">
                     <div class="left_titles">
                        <span>{{$store.state.userInfo.usAllProfitAndLose}}</span>
                     </div>
                     <div class="right_titles">
                        <span class="numDemo">0.00</span>
                     </div>
                  </div>
               </div>
            </div>
            <div class="click_box">
               <div :class="zjtype==0?'click_box_left':'click_box_right'" @click="clickzj(0)">{{$t('nwetitle')}}
                  <div v-if="zjtype==0" class="click_box_g"></div>
               </div>
               <div :class="zjtype==1?'click_box_left':'click_box_right'" @click="clickzj(1)">{{$t('nwetitlea')}}
                  <div v-if="zjtype==1" class="click_box_g"></div>
               </div>
            </div>
            <div class="tabs_card">
               <div class="tabs_card_content">
                  <!-- 持仓 currentIndex: 0 -->
                  <div class="over">
                     <van-list v-model="loading" :finished="finished" v-if="zjtype==0&&cclist.length"
                        :finished-text="$t('hj43')" @load="onLoad" >
                        <div v-if="cclist.length>0" class="tabs_o">
                           <div class="tabs_o_items"  v-for="(item) in cclist"
                              :key="item.buyOrderId">
                              <div class="tabs_o_title">
                                 <div style="width: calc(100% - 3.5rem);display: flex;">
                                    <div>
                                       <span
                                          class="title">{{ item.stockName ? item.stockName : item.indexName }}</span>
                        <div>
                          <div
                            class="buy_to_sell"
                            :class="
                              item.orderDirection == '买跌' ? 'maichu' : 'mairu'
                            "
                          >
                            {{
                              item.orderDirection == "买跌"
                                ? $t("hj84")
                                : $t("hj85")
                            }}
                          </div>
                        </div>
                      </div>
                                    </div>
                      <div
                        class="right_btn pingbtn"
                        @click="getpingcang(item.positionSn)"
                      >
                        <span style="margin-right: 0; width: 110px">{{
                          $t("hj121")
                        }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="start_price">
                        <span>P/L(INR)</span>
                      </div>
                      <div class="new_price">
                        <span>{{ $t("shou") }}</span>
                      </div>
                    </div>
                    <div class="center_price">
                      <div class="start_price">
                        <span
                          :style="
                            item.profitAndLose > 0
                              ? 'color: rgb(3, 173, 143);'
                              : 'color:rgb(208, 75, 100);'
                          "
                          >{{ item.profitAndLose }}</span
                        >
                      </div>
                      <div class="new_price">
                        <span>{{ item.orderNum }}</span>
                      </div>
                    </div>
                                    <div>
                                       <div class="buy_to_sell"
                                          :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'">
                                          {{ item.orderDirection == "买跌" ? $t('hj84') : $t('hj85') }}
                                       </div>
                                    </div>
                                 </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("ssdd") }}</span>
                      </div>
                      <div class="start_price" style="width: 123px">
                        <span style="color: #000"
                          >{{ item.buyOrderPrice }}
                          <span style="color: #bdbdbd"
                            >/{{ item.now_price }}</span
                          >
                        </span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("whpb") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.orderTotalPrice }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("gmsj") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.buyOrderTime | gettime }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
                                 <div class="right_btn pingbtn" @click="getpingcang(item.positionSn)">
                                    <span style="margin-right: 0;width: 110px;">{{ $t('hj121') }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="start_price">
                                    <span>P/L(INR)</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ $t('shou') }}</span>
                                 </div>
                              </div>
                              <div class="center_price">
                                 <div class="start_price">
                                    <span
                                       :style="item.profitAndLose>0?'color: rgb(3, 173, 143);':'color:rgb(208, 75, 100);'">{{ item.profitAndLose }}</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ item.orderNum }}</span>
                                 </div>
                              </div>
              <van-list
                v-model="loading"
                v-if="zjtype == 1"
                :finished="finished"
                :finished-text="$t('hj43')"
                @load="onLoad"
                :immediate-check="immediate"
              >
                <div class="tabs_o">
                  <div
                    class="tabs_o_items"
                    v-if="cclist.length > 0"
                    v-for="item in cclist"
                    :key="item.buyOrderId"
                  >
                    <div class="tabs_o_title">
                      <div style="width: calc(100% - 3.5rem); display: flex">
                        <div>
                          <span class="title">{{
                            item.stockName ? item.stockName : item.indexName
                          }}</span>
                        </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('ssdd')}}</span>
                                 </div>
                                 <div class="start_price" style="width: 123px;">
                                    <span style="color: #000;">{{ item.buyOrderPrice }}
                                       <span style="color: #bdbdbd;">/{{ item.now_price }}</span>
                                    </span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('whpb')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.orderTotalPrice }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('gmsj')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.buyOrderTime | gettime }}</span>
                                 </div>
                              </div>
                        <div>
                          <div
                            class="buy_to_sell"
                            :class="
                              item.orderDirection == '买跌' ? 'maichu' : 'mairu'
                            "
                          >
                            {{
                              item.orderDirection == "买跌"
                                ? $t("hj84")
                                : $t("hj85")
                            }}
                          </div>
                        </div>
                      </div>
                           </div>
                        </div>
                     </van-list>
                     <van-list v-model="loading" v-if="zjtype==1" :finished="finished"
                        :finished-text="$t('hj43')" @load="onLoad" :immediate-check="immediate">
                        <div class="tabs_o">
                           <div class="tabs_o_items" v-if="cclist.length>0" v-for="(item) in cclist"
                              :key="item.buyOrderId">
                              <div class="tabs_o_title">
                                 <div style="width: calc(100% - 3.5rem);display: flex;">
                                    <div>
                                       <span
                                          class="title">{{ item.stockName ? item.stockName : item.indexName }}</span>
                                    </div>
                                    <div>
                                       <div class="buy_to_sell"
                                          :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'">
                                          {{ item.orderDirection == "买跌" ? $t('hj84') : $t('hj85') }}
                                       </div>
                                    </div>
                                 </div>
                                 <!-- <div class="right_btn pingbtn" @click="getpingcang(item.positionSn)">
                      <!-- <div class="right_btn pingbtn" @click="getpingcang(item.positionSn)">
                                    <span style="margin-right: 0;">{{ $t('hj121') }}</span>
                                 </div> -->
                              </div>
                              <div class="bottom_price_title">
                                 <div class="start_price">
                                    <span>P/L(INR)</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ $t('shou') }}</span>
                                 </div>
                              </div>
                              <div class="center_price">
                                 <div class="start_price">
                                    <span
                                       :style="item.profitAndLose>0?'color: rgb(3, 173, 143);':'color:rgb(208, 75, 100);'">{{ item.profitAndLose }}</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ item.orderNum }}</span>
                                 </div>
                              </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="start_price">
                        <span>P/L(INR)</span>
                      </div>
                      <div class="new_price">
                        <span>{{ $t("shou") }}</span>
                      </div>
                    </div>
                    <div class="center_price">
                      <div class="start_price">
                        <span
                          :style="
                            item.profitAndLose > 0
                              ? 'color: rgb(3, 173, 143);'
                              : 'color:rgb(208, 75, 100);'
                          "
                          >{{ item.profitAndLose }}</span
                        >
                      </div>
                      <div class="new_price">
                        <span>{{ item.orderNum }}</span>
                      </div>
                    </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('ssdd')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span style="color: #000;">{{ item.buyOrderPrice }}
                                    </span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('whpb')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.orderTotalPrice }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('whpb')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.sellOrderPrice }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('gmsj')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.buyOrderTime | gettime }}</span>
                                 </div>
                              </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("ssdd") }}</span>
                      </div>
                      <div class="start_price">
                        <span style="color: #000"
                          >{{ item.buyOrderPrice }}
                        </span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("whpb") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.orderTotalPrice }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("whpb") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.sellOrderPrice }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("gmsj") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.buyOrderTime | gettime }}</span>
                      </div>
                    </div>
                              <div class="bottom_price_title">
                                 <div class="new_price">
                                    <span>{{$t('gbsj')}}</span>
                                 </div>
                                 <div class="start_price">
                                    <span>{{ item.sellOrderTime | gettime }}</span>
                                 </div>
                              </div>
                    <div class="bottom_price_title">
                      <div class="new_price">
                        <span>{{ $t("gbsj") }}</span>
                      </div>
                      <div class="start_price">
                        <span>{{ item.sellOrderTime | gettime }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <div class="waiting" v-if="total == 0 && tabsCurrentIndex === 0">
                <div class="waiting_box">
                  <div class="img_cont">
                    <img src="../../assets/img/zhaobudao.png" alt />
                    <span class="gd">{{ $t("hj122") }}</span>
                    <div class="trading" @click="$router.push('/trading-list')">
                      <span>{{ $t("hj123") }}</span>
                    </div>
                  </div>
                </div>
              </div>
                           </div>
                        </div>
                     </van-list>
                     <div class="waiting" v-if="total == 0 && tabsCurrentIndex === 0">
                        <div class="waiting_box">
                           <div class="img_cont">
                              <img src="../../assets/img/zhaobudao.png" alt />
                              <span class="gd">{{ $t('hj122') }}</span>
                              <div class="trading" @click="$router.push('/trading-list')">
                                 <span>{{ $t('hj123') }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- 挂单 -->
                     <div class="waiting" v-if="totalss == 0 && tabsCurrentIndex === 1">
                        <div class="waiting_box">
                           <div class="img_cont">
                              <img src="../../assets/img/zhaobudao.png" alt />
                              <span class="gd">{{ $t('hj124') }}</span>
                              <div class="trading" @click="$router.push('/trading-list')">
                                 <span>{{ $t('hj123') }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
                     <van-list v-model="loadingss" :finished="finishedss" :finished-text="$t('hj43')"
                        v-if="tabsCurrentIndex === 1 && totalss != 0" :immediate-check="immediate">
                        <div class="tabs_o">
                           <div class="tabs_o_items" v-if="tabsOrderList.length>0"
                              v-for="(item) in tabsOrderList" :key="item.id">
                              <div class="tabs_o_title">
                                 <div>
                                    <span
                                       class="title">{{ item.stockName ? item.stockName : item.indexName }}</span>
                                    <span class="buy_to_sell"
                                       :class="item.buyType == 1 ? 'maichu' : 'mairu'">{{
                          item.buyType == 1 ? $t('hj84') : $t('hj85')
              <!-- 挂单 -->
              <div
                class="waiting"
                v-if="totalss == 0 && tabsCurrentIndex === 1"
              >
                <div class="waiting_box">
                  <div class="img_cont">
                    <img src="../../assets/img/zhaobudao.png" alt />
                    <span class="gd">{{ $t("hj124") }}</span>
                    <div class="trading" @click="$router.push('/trading-list')">
                      <span>{{ $t("hj123") }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <van-list
                v-model="loadingss"
                :finished="finishedss"
                :finished-text="$t('hj43')"
                :loading-text="$t('hj430')"
                v-if="tabsCurrentIndex === 1 && totalss != 0"
                :immediate-check="immediate"
              >
                <div class="tabs_o">
                  <div
                    class="tabs_o_items"
                    v-if="tabsOrderList.length > 0"
                    v-for="item in tabsOrderList"
                    :key="item.id"
                  >
                    <div class="tabs_o_title">
                      <div>
                        <span class="title">{{
                          item.stockName ? item.stockName : item.indexName
                        }}</span>
                                    <span class="buy_to_sell"
                                       :class="item.status == 1 ? 'mairu' : 'maichu'">{{
                          item.status == 1 ? $t('hj254') : $t('hj255')
                        <span
                          class="buy_to_sell"
                          :class="item.buyType == 1 ? 'maichu' : 'mairu'"
                          >{{
                            item.buyType == 1 ? $t("hj84") : $t("hj85")
                          }}</span
                        >
                        <span
                          class="buy_to_sell"
                          :class="item.status == 1 ? 'mairu' : 'maichu'"
                          >{{
                            item.status == 1 ? $t("hj254") : $t("hj255")
                          }}</span
                        >
                        <span class="multiple">{{ item.lever }}X</span>
                        <span class="nums">{{
                          item.buyNum + $t("hj117")
                        }}</span>
                                    <span class="multiple">{{ item.lever }}X</span>
                                    <span class="nums">{{ item.buyNum + $t('hj117') }}</span>
                                 </div>
                      </div>
                                 <div class="right_btn pingbtn" @click="gdClose(item)">
                                    <span style="margin-right: 0;">{{ $t('hj126') }}</span>
                                 </div>
                              </div>
                              <div class="center_price">
                                 <div class="start_price jiantou">
                                    <span>{{ item.targetPrice }}</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ item.nowPrice }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="start_price">
                                    <span>{{ $t('hj125') }}</span>
                                 </div>
                                 <div class="new_price">
                                    <span>{{ $t('hj120') }}</span>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </van-list>
                      <div class="right_btn pingbtn" @click="gdClose(item)">
                        <span style="margin-right: 0">{{ $t("hj126") }}</span>
                      </div>
                    </div>
                    <div class="center_price">
                      <div class="start_price jiantou">
                        <span>{{ item.targetPrice }}</span>
                      </div>
                      <div class="new_price">
                        <span>{{ item.nowPrice }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="start_price">
                        <span>{{ $t("hj125") }}</span>
                      </div>
                      <div class="new_price">
                        <span>{{ $t("hj120") }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
                     <!-- 平仓 -->
                     <div class="waiting" v-if="totals == 0 && tabsCurrentIndex === 2">
                        <div class="waiting_box">
                           <div class="img_cont">
                              <img src="../../assets/img/zhaobudao.png" alt />
                              <span class="gd">{{ $t('hj127') }}</span>
                              <div class="trading" @click="$router.push('/trading-list')">
                                 <span>{{ $t('hj123') }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
              <!-- 平仓 -->
              <div class="waiting" v-if="totals == 0 && tabsCurrentIndex === 2">
                <div class="waiting_box">
                  <div class="img_cont">
                    <img src="../../assets/img/zhaobudao.png" alt />
                    <span class="gd">{{ $t("hj127") }}</span>
                    <div class="trading" @click="$router.push('/trading-list')">
                      <span>{{ $t("hj123") }}</span>
                    </div>
                  </div>
                </div>
              </div>
                     <van-list v-model="loadings" :finished="finisheds" :finished-text="$t('hj43')"
                        @load="onLoads" :immediate-check="immediate"
                        v-if="tabsCurrentIndex === 2 && totals != 0">
                        <div class="tabs_o">
                           <div class="tabs_o_items oes" v-if="tabsPcArr.length>0"
                              v-for="(item, index) in tabsPcArr" :key="index">
                              <div class="tabs_o_title">
                                 <div>
                                    <span
                                       class="title">{{ item.stockName ? item.stockName : item.indexName }}</span>
                                    <span class="buy_to_sell"
                                       :class="item.orderDirection == '买跌' ? 'maichu' : 'mairu'">{{
                          item.orderDirection == "买跌" ?
                          $t('hj84') : $t('hj85')
              <van-list
                v-model="loadings"
                :finished="finisheds"
                :finished-text="$t('hj43')"
                :loading-text="$t('hj430')"
                @load="onLoads"
                :immediate-check="immediate"
                v-if="tabsCurrentIndex === 2 && totals != 0"
              >
                <div class="tabs_o">
                  <div
                    class="tabs_o_items oes"
                    v-if="tabsPcArr.length > 0"
                    v-for="(item, index) in tabsPcArr"
                    :key="index"
                  >
                    <div class="tabs_o_title">
                      <div>
                        <span class="title">{{
                          item.stockName ? item.stockName : item.indexName
                        }}</span>
                                    <span class="multiple">{{ item.allProfitAndLose }}</span>
                                    <span class="nums">{{ item.orderNum + $t('hj117') }}</span>
                                 </div>
                                 <div class="right_count"
                                    :class="item.profitAndLose > 0 ? 'red' : item.profitAndLose == 0 ? '' : 'green'">
                                    <span style="margin-right: 0;">{{ item.profitAndLose }}</span>
                                 </div>
                              </div>
                              <div class="bottom_price_title">
                                 <div class="profit_res">
                                    <span>{{ $t('hj128') }}: {{ item.buyOrderTime | gettime }}</span>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </van-list>
                     <!-- 新股 -->
                     <div class="waiting" v-if="xgTotal == 0 && tabsCurrentIndex === 3">
                        <div class="waiting_box">
                           <div class="img_cont">
                              <img src="../../assets/img/zhaobudao.png" alt />
                              <span class="gd">{{ $t('hj129') }}</span>
                              <div class="trading"
                                 @click="$router.push({ path: '/trading-list', query: { listid: 5 } })">
                                 <span>{{ $t('hj123') }}</span>
                              </div>
                           </div>
                        </div>
                     </div>
                     <van-list v-model="loadingXg" :finished="finishedXg" :finished-text="$t('hj43')"
                        v-show="tabsCurrentIndex === 3 && xgTotal != 0" @load="onLoadXg"
                        :immediate-check="immediate">
                        <div class="tabs_o">
                           <div class="tabs_o_items" v-for="(item) in tabsXgArr" :key="item.id">
                              <div class="tabs_o_title">
                                 <span class="title">{{ item.newName }}</span>
                                 <span class="buy_to_sell" :class="item.type == 1 ? 'mairu' : 'maichu'">{{
                        item.type == 1 ? $t('hj45') : $t('hj46')
                      }}</span>
                                 <!-- <span class="multiple">{{ item.lever  }}X</span>
                        <span
                          class="buy_to_sell"
                          :class="
                            item.orderDirection == '买跌' ? 'maichu' : 'mairu'
                          "
                          >{{
                            item.orderDirection == "买跌"
                              ? $t("hj84")
                              : $t("hj85")
                          }}</span
                        >
                        <span class="multiple">{{
                          item.allProfitAndLose
                        }}</span>
                        <span class="nums">{{
                          item.orderNum + $t("hj117")
                        }}</span>
                      </div>
                      <div
                        class="right_count"
                        :class="
                          item.profitAndLose > 0
                            ? 'red'
                            : item.profitAndLose == 0
                            ? ''
                            : 'green'
                        "
                      >
                        <span style="margin-right: 0">{{
                          item.profitAndLose
                        }}</span>
                      </div>
                    </div>
                    <div class="bottom_price_title">
                      <div class="profit_res">
                        <span
                          >{{ $t("hj128") }}:
                          {{ item.buyOrderTime | gettime }}</span
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
              <!-- 新股 -->
              <div
                class="waiting"
                v-if="xgTotal == 0 && tabsCurrentIndex === 3"
              >
                <div class="waiting_box">
                  <div class="img_cont">
                    <img src="../../assets/img/zhaobudao.png" alt />
                    <span class="gd">{{ $t("hj129") }}</span>
                    <div
                      class="trading"
                      @click="
                        $router.push({
                          path: '/trading-list',
                          query: { listid: 5 },
                        })
                      "
                    >
                      <span>{{ $t("hj123") }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <van-list
                v-model="loadingXg"
                :finished="finishedXg"
                :finished-text="$t('hj43')"
                v-show="tabsCurrentIndex === 3 && xgTotal != 0"
                @load="onLoadXg"
                :immediate-check="immediate"
              >
                <div class="tabs_o">
                  <div
                    class="tabs_o_items"
                    v-for="item in tabsXgArr"
                    :key="item.id"
                  >
                    <div class="tabs_o_title">
                      <span class="title">{{ item.newName }}</span>
                      <span
                        class="buy_to_sell"
                        :class="item.type == 1 ? 'mairu' : 'maichu'"
                        >{{ item.type == 1 ? $t("hj45") : $t("hj46") }}</span
                      >
                      <!-- <span class="multiple">{{ item.lever  }}X</span>
                      <span class="nums">{{ item.buyNum / 100 + '手' }}</span> -->
                              </div>
                              <div style="display: flex;align-items: center;justify-content: space-between;">
                                 <div style="width: 100%;">
                                    <div class="center_price">
                                       <div class="start_price jiantou">
                                          <span>{{ item.buyPrice }}</span>
                                       </div>
                                       <div class="new_price" v-if="item.status != 3">
                                          <span>{{ item.applyNums }}</span>
                                       </div>
                                       <div class="new_price" v-else>
                                          <span>{{ item.applyNumber }}</span>
                                       </div>
                                    </div>
                                    <div class="bottom_price_title">
                    </div>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                      "
                    >
                      <div style="width: 100%">
                        <div class="center_price">
                          <div class="start_price jiantou">
                            <span>{{ item.buyPrice }}</span>
                          </div>
                          <div class="new_price" v-if="item.status != 3">
                            <span>{{ item.applyNums }}</span>
                          </div>
                          <div class="new_price" v-else>
                            <span>{{ item.applyNumber }}</span>
                          </div>
                        </div>
                        <div class="bottom_price_title">
                          <div class="start_price">
                            <span>{{ $t("hj130") }}</span>
                          </div>
                          <div class="new_price" v-if="item.status != 3">
                            <span>{{ $t("hj57") }}</span>
                          </div>
                          <div class="new_price" v-else>
                            <span>{{ $t("hj253") }}</span>
                          </div>
                        </div>
                      </div>
                                       <div class="start_price">
                                          <span>{{ $t('hj130') }}</span>
                                       </div>
                                       <div class="new_price" v-if="item.status != 3">
                                          <span>{{ $t('hj57') }}</span>
                                       </div>
                                       <div class="new_price" v-else>
                                          <span>{{ $t('hj253') }}</span>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="right_btn" style="padding: 0 0.2rem;" @click="zcsg(item)"
                                    :class="item.status == 1 ? 'pink' : item.status == 2 ? 'red'
                          : (item.status == 3 && item.type != 1) ? 'green' : item.status == 4 ? 'blue' : item.status == 5 ? 'purple' : ''"
                                    v-if="!(item.type == 1 && item.status == 3)">
                                    <span>{{ item.status == 1 ?
                          $t('hj131') : item.status == 2 ? $t('hj132')
                            : (item.status == 3 && item.type != 1) ? $t('hj133') : item.status == 4 ? $t('hj134') :
                              item.status == 5 ?
                                $t('hj135')
                                : ''
                      <div
                        class="right_btn"
                        style="padding: 0 0.2rem"
                        @click="zcsg(item)"
                        :class="
                          item.status == 1
                            ? 'pink'
                            : item.status == 2
                            ? 'red'
                            : item.status == 3 && item.type != 1
                            ? 'green'
                            : item.status == 4
                            ? 'blue'
                            : item.status == 5
                            ? 'purple'
                            : ''
                        "
                        v-if="!(item.type == 1 && item.status == 3)"
                      >
                        <span>{{
                          item.status == 1
                            ? $t("hj131")
                            : item.status == 2
                            ? $t("hj132")
                            : item.status == 3 && item.type != 1
                            ? $t("hj133")
                            : item.status == 4
                            ? $t("hj134")
                            : item.status == 5
                            ? $t("hj135")
                            : ""
                        }}</span>
                                 </div>
                                 <div v-if="item.type == 1 && item.status == 3" class="right_btn pingbtn"
                                    style="width: 2rem !important;" @click="getrenjiao(item.id)">
                                    {{ $t('hj250') }}
                                 </div>
                              </div>
                           </div>
                        </div>
                     </van-list>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="dialog" v-if="titleDialog" @click="titleDialog = false"></div>
   </div>
                      </div>
                      <div
                        v-if="item.type == 1 && item.status == 3"
                        class="right_btn pingbtn"
                        style="width: 2rem !important"
                        @click="getrenjiao(item.id)"
                      >
                        {{ $t("hj250") }}
                      </div>
                    </div>
                  </div>
                </div>
              </van-list>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog" v-if="titleDialog" @click="titleDialog = false"></div>
  </div>
</template>
<script>
   import {
      Toast
   } from 'vant'
   import {
      MessageBox
   } from 'mint-ui'
   import * as api from '@/axios/api'
   export default {
      data() {
         return {
            zjtype: 0,
            tabsArr: [this.$t('hj2'), this.$t('hj109'), this.$t('hj136'), this.$t('hj3')],
            tabsCurrentIndex: 0,
            titleName: this.$t('hj114'),
            indexSettingInfo: {},
            futuresSettingInfo: {},
            tabsPositionNumArr: [],
            titleIndex: 0,
            settingInfo: {},
            tabsPcArr: [],
            typeindex: 0,
            titleDialog: false,
            total: 0,
            totals: 0,
            totalss: 0,
            loading: false,
            finished: false,
            finisheds: false,
            finishedss: false,
            page: 1,
            pages: 1,
            pagess: 1,
            state: 0,
            pageSize: 15,
            pageNum: 1,
            immediate: false,
            loadings: false,
            loadingss: false,
            tabsOrderList: [],
            xgTotal: 0,
            tabsXgArr: [],
            cclist: [],
            loadingXg: false,
            finishedXg: false
         }
      },
      mounted() {
         this.getListDetail()
         this.getUserInfo()
         this.getIndexSettingInfo()
         this.getSettingInfo()
         this.getFuturesSetting()
         this.getListDetails()
         this.getorderList()
         this.getNewXg()
         this.newchicang()
      },
      created() {
         if (this.$route.query.index) {
            this.tabsCurrentIndex = Number(this.$route.query.index)
         }
      },
      methods: {
         async newchicang() {
            let opt = {
               state: this.zjtype == 0 ? '0' : '1',
               stockType: this.typeindex == 0 ? 'IN' : 'US',
               pageNum: this.pageNum,
               pageSize: this.pageSize
            }
            let data = await api.getchicang(opt)
            if (data.status === 0) {
               this.cclist = data.data.list
            } else {
               Toast(data.msg)
            }
         },
         getrenjiao(val) {
            MessageBox.confirm(this.$t('hj251') + '?', this.$t('hj165'), {
               confirmButtonText: this.$t('hj161'),
               cancelButtonText: this.$t('hj106')
            }).then(async () => {
               let opt = {
                  id: val
               }
               let data = await api.submitSubscribe(opt)
               if (data.status === 0) {
                  Toast(data.msg)
                  this.finishedXg = false
                  this.getNewXg()
                  this.getUserInfo()
               } else {
                  Toast(data.msg)
               }
            }).catch(() => {
import { Toast } from "vant";
import { MessageBox } from "mint-ui";
import * as api from "@/axios/api";
export default {
  data() {
    return {
      zjtype: 0,
      tabsArr: [
        this.$t("hj2"),
        this.$t("hj109"),
        this.$t("hj136"),
        this.$t("hj3"),
      ],
      tabsCurrentIndex: 0,
      titleName: this.$t("hj114"),
      indexSettingInfo: {},
      futuresSettingInfo: {},
      tabsPositionNumArr: [],
      titleIndex: 0,
      settingInfo: {},
      tabsPcArr: [],
      typeindex: 0,
      titleDialog: false,
      total: 0,
      totals: 0,
      totalss: 0,
      loading: false,
      finished: false,
      finisheds: false,
      finishedss: false,
      page: 1,
      pages: 1,
      pagess: 1,
      state: 0,
      pageSize: 15,
      pageNum: 1,
      immediate: false,
      loadings: false,
      loadingss: false,
      tabsOrderList: [],
      xgTotal: 0,
      tabsXgArr: [],
      cclist: [],
      loadingXg: false,
      finishedXg: false,
    };
  },
  mounted() {
    this.getListDetail();
    this.getUserInfo();
    this.getIndexSettingInfo();
    this.getSettingInfo();
    this.getFuturesSetting();
    this.getListDetails();
    this.getorderList();
    this.getNewXg();
    this.newchicang();
  },
  created() {
    if (this.$route.query.index) {
      this.tabsCurrentIndex = Number(this.$route.query.index);
    }
  },
  methods: {
    async newchicang() {
      let opt = {
        state: this.zjtype == 0 ? "0" : "1",
        stockType: this.typeindex == 0 ? "IN" : "US",
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let data = await api.getchicang(opt);
      if (data.status === 0) {
        this.cclist = data.data.list;
      } else {
        Toast(data.msg);
      }
    },
    getrenjiao(val) {
      MessageBox.confirm(this.$t("hj251") + "?", this.$t("hj165"), {
        confirmButtonText: this.$t("hj161"),
        cancelButtonText: this.$t("hj106"),
      })
        .then(async () => {
          let opt = {
            id: val,
          };
          let data = await api.submitSubscribe(opt);
          if (data.status === 0) {
            Toast(data.msg);
            this.finishedXg = false;
            this.getNewXg();
            this.getUserInfo();
          } else {
            Toast(data.msg);
          }
        })
        .catch(() => {});
    },
    getpingcang(val) {
      if (!this.$store.state.userInfo.idCard) {
        Toast(this.$t("hj138"));
        this.$router.push("/authentication");
        return;
      }
      if (this.titleIndex === 0) {
        // 沪深京
        MessageBox.confirm(this.$t("hj139") + "?", this.$t("hj165"), {
          confirmButtonText: this.$t("hj161"),
          cancelButtonText: this.$t("hj106"),
        })
          .then(async () => {
            let opt = {
              positionSn: val,
            };
            let data = await api.sell(opt);
            if (data.status === 0) {
              Toast(data.msg);
            })
         },
         getpingcang(val) {
            if (!this.$store.state.userInfo.idCard) {
               Toast(this.$t('hj138'))
               this.$router.push('/authentication')
               return
            }
            if (this.titleIndex === 0) {
               // 沪深京
               MessageBox.confirm(this.$t('hj139') + '?', this.$t('hj165'), {
                  confirmButtonText: this.$t('hj161'),
                  cancelButtonText: this.$t('hj106')
               }).then(async () => {
                  let opt = {
                     positionSn: val
                  }
                  let data = await api.sell(opt)
                  if (data.status === 0) {
                     Toast(data.msg)
              // 沪深京持仓
              this.finished = false;
              this.getListDetail();
              this.tabsPositionNumArr = [];
              // 沪深京平仓
              this.finisheds = false;
              this.tabsPcArr = [];
              this.getListDetails();
            } else if (data.msg.indexOf("不在交易时段内") > -1) {
              Toast(this.$t("hj140"));
            } else {
              Toast(data.msg);
            }
          })
          .catch(() => {});
      } else {
        // 指数
        MessageBox.confirm(this.$t("hj139") + "?", this.$t("hj165"), {
          confirmButtonText: this.$t("hj161"),
          cancelButtonText: this.$t("hj106"),
        })
          .then(async () => {
            let opt = {
              positionSn: val,
            };
            let data = await api.sellIndex(opt);
            if (data.status === 0) {
              Toast(data.msg);
              // 指数持仓
              this.finished = false;
              this.getzhishuListDetail();
              this.tabsPositionNumArr = [];
              // 指数平仓
              this.finisheds = false;
              this.tabsPcArr = [];
              this.getzhishuListDetails();
            } else if (data.msg.indexOf("不在交易时段内") > -1) {
              Toast(this.$t("hj140"));
            } else {
              Toast(data.msg);
            }
          })
          .catch(() => {});
      }
    },
    onLoad() {
      // 持仓
      this.page++;
      switch (this.titleIndex) {
        case 0:
          // 沪深京持仓
          this.getListDetail();
          break;
        case 1:
          // 指数持仓
          this.getzhishuListDetail();
          break;
                     // 沪深京持仓
                     this.finished = false
                     this.getListDetail()
                     this.tabsPositionNumArr = []
                     // 沪深京平仓
                     this.finisheds = false
                     this.tabsPcArr = []
                     this.getListDetails()
                  } else if (data.msg.indexOf('不在交易时段内') > -1) {
                     Toast(this.$t('hj140'))
                  } else {
                     Toast(data.msg)
                  }
               }).catch(() => {
        default:
          break;
      }
    },
    onLoads() {
      // 平仓
      this.pages++;
      switch (this.titleIndex) {
        case 0:
          // 沪深京平仓
          this.getListDetails();
          break;
        case 1:
          // 指数平仓
          this.getzhishuListDetails();
          break;
        default:
          break;
      }
    },
    onLoadss() {
      this.pagess++;
      switch (this.titleIndex) {
        case 1:
          this.getorderList();
          break;
        default:
          break;
      }
    },
    onLoadXg() {
      // this.getNewXg();
    },
    async gdClose(item) {
      let opts = {
        id: item.id,
      };
      let data = await api.delGuaDan(opts);
      if (data.status === 1) {
        Toast(this.$t("hj137"));
        this.page = 1;
        this.pages = 1;
        this.finished = false;
        this.finisheds = false;
        this.finishedss = false;
        this.tabsPositionNumArr = [];
        this.tabsPcArr = [];
        this.tabsOrderList = [];
        switch (this.titleIndex) {
          case 0:
            this.titleName = this.$t("hj114");
            this.getListDetail();
            this.getListDetails();
            this.getorderList();
            break;
          case 1:
            this.titleName = this.$t("hj115");
            this.getzhishuListDetail();
            this.getzhishuListDetails();
            this.getorderList();
            break;
          case 2:
            this.titleName = this.$t("hj116");
               })
            } else {
               // 指数
               MessageBox.confirm(this.$t('hj139') + '?', this.$t('hj165'), {
                  confirmButtonText: this.$t('hj161'),
                  cancelButtonText: this.$t('hj106')
               }).then(async () => {
                  let opt = {
                     positionSn: val
                  }
                  let data = await api.sellIndex(opt)
                  if (data.status === 0) {
                     Toast(data.msg)
                     // 指数持仓
                     this.finished = false
                     this.getzhishuListDetail()
                     this.tabsPositionNumArr = []
                     // 指数平仓
                     this.finisheds = false
                     this.tabsPcArr = []
                     this.getzhishuListDetails()
                  } else if (data.msg.indexOf('不在交易时段内') > -1) {
                     Toast(this.$t('hj140'))
                  } else {
                     Toast(data.msg)
                  }
               }).catch(() => {
               })
            }
         },
         onLoad() {
            // 持仓
            this.page++
            switch (this.titleIndex) {
               case 0:
                  // 沪深京持仓
                  this.getListDetail()
                  break
               case 1:
                  // 指数持仓
                  this.getzhishuListDetail()
                  break
               default:
                  break
            }
         },
         onLoads() {
            // 平仓
            this.pages++
            switch (this.titleIndex) {
               case 0:
                  // 沪深京平仓
                  this.getListDetails()
                  break
               case 1:
                  // 指数平仓
                  this.getzhishuListDetails()
                  break
               default:
                  break
            }
         },
         onLoadss() {
            this.pagess++
            switch (this.titleIndex) {
               case 1:
                  this.getorderList()
                  break
               default:
                  break
            }
         },
         onLoadXg() {
            // this.getNewXg();
         },
         async gdClose(item) {
            let opts = {
               id: item.id
            }
            let data = await api.delGuaDan(opts)
            if (data.status === 1) {
               Toast(this.$t('hj137'))
               this.page = 1
               this.pages = 1
               this.finished = false
               this.finisheds = false
               this.finishedss = false
               this.tabsPositionNumArr = []
               this.tabsPcArr = []
               this.tabsOrderList = []
               switch (this.titleIndex) {
                  case 0:
                     this.titleName = this.$t('hj114')
                     this.getListDetail()
                     this.getListDetails()
                     this.getorderList()
                     break
                  case 1:
                     this.titleName = this.$t('hj115')
                     this.getzhishuListDetail()
                     this.getzhishuListDetails()
                     this.getorderList()
                     break
                  case 2:
                     this.titleName = this.$t('hj116')
                     // this.getQhListDetail();
                     // this.getQhListDetails();
                     this.getorderList()
                     break
                  default:
                     break
               }
            } else {
               Toast(data.msg)
            }
         },
         clickzj(e) {
            console.log(e);
            this.zjtype = e
            this.newchicang()
         },
         zcsg(item) {
            this.$router.push({
               path: '/trading-list',
               query: {
                  listid: 5
               }
            })
         },
         SetTitleIndex(index) {
            // 账户选项卡
            this.titleIndex = index
            this.page = 1
            this.pages = 1
            this.finished = false
            this.finisheds = false
            this.finishedss = false
            this.tabsPositionNumArr = []
            this.tabsPcArr = []
            this.tabsOrderList = []
            switch (index) {
               case 0:
                  this.titleName = this.$t('hj114')
                  this.getListDetail()
                  this.getListDetails()
                  this.getorderList()
                  this.handleTabsClick('', 0)
                  break
               case 1:
                  this.titleName = this.$t('hj115')
                  this.getzhishuListDetail()
                  this.getzhishuListDetails()
                  this.getorderList()
                  this.handleTabsClick('', 0)
                  break
               case 2:
                  this.totalss = 0
                  this.totals = 0
                  this.total = 0
                  this.titleName = this.$t('hj116')
                  this.handleTabsClick('', 3)
                  // this.getQhListDetail();
                  // this.getQhListDetails();
                  // this.getorderList();
                  break
               default:
                  break
            }
            this.titleDialog = false
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         handleTabsClick(item, index) {
            // 持仓已平仓选项卡
            this.tabsCurrentIndex = index
            if (index === 3) {
               this.finishedXg = false
               this.getNewXg()
            }
            if (navigator.vibrate) {
               // 支持
               navigator.vibrate([55])
            }
         },
         handleOpenDialog() {
            this.titleDialog = !this.titleDialog
         },
         // 挂单
         async getorderList() {
            let opts = {}
            let data = await api.getorderList(opts)
            this.loadingss = false
            if (data.status === 0) {
               data.data.forEach(element => {
                  this.tabsOrderList.push(element)
               })
               this.totalss = data.data.length
               this.finishedss = true // 只有一页,所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁
            } else {
               Toast(data.msg)
            }
         },
         typeclick(e) {
            console.log(e);
            this.typeindex = e
            this.newchicang()
         },
         async getIndexSettingInfo() {
            // 网站设置信息 指数
            let data = await api.getIndexSetting()
            if (data.status === 0) {
               // 成功
               this.indexSettingInfo = data.data
            } else {
               Toast(data.msg)
            }
         },
         async getFuturesSetting() {
            // 网站设置信息 期货
            let data = await api.getFuturesSetting()
            if (data.status === 0) {
               // 成功
               this.futuresSettingInfo = data.data
            } else {
               Toast(data.msg)
            }
         },
         async getSettingInfo() {
            let data = await api.getSetting()
            if (data.status === 0) {
               // 成功
               this.settingInfo = data.data
            } else {
               Toast(data.msg)
            }
         },
         async getUserInfo() {
            // 获取用户信息
            //   let showcookie = this.getCookie('USER_TOKEN');
            let data = await api.getUserInfo()
            if (data.status === 0) {
               // this.getProductSetting()
               this.$store.state.userInfo = data.data
            } else {
               Toast(data.msg)
            }
            this.$store.state.user = this.user
         },
         async getListDetail() {
            // 获取沪深我的持仓列表
            this.loading = true
            let opt = {
               state: 0,
               stockCode: '', // 代码
               stockSpell: '', // 简拼
               pageNum: this.page,
               pageSize: 15
            }
            let data = await api.getOrderList(opt)
            this.loading = false
            if (data.status === 0) {
               if (data.data.list.length < 15) {
                  this.finished = true
               }
               data.data.list.forEach(element => {
                  this.tabsPositionNumArr.push(element)
               })
               this.total = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getzhishuListDetail() {
            // 获取指数持仓
            this.loading = true
            let opt = {
               state: 0,
               stockCode: '', // 代码
               stockSpell: '', // 简拼
               pageNum: this.pageNum,
               pageSize: this.pageSize
            }
            let data = await api.getIndexOrderList(opt)
            this.loading = false
            if (data.status === 0) {
               if (data.data.list.length < 15) {
                  this.finished = true
               }
               data.data.list.forEach(element => {
                  this.tabsPositionNumArr.push(element)
               })
               this.total = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getQhListDetail() {
            // 获取期货持仓
            this.loading = true
            let opt = {
               state: 0,
               fnCode: '', // 代码
               fnName: '', // 简拼
               pageNum: this.pageNum,
               pageSize: this.pageSize
            }
            let data = await api.getFuturesOrderList(opt)
            this.loading = false
            if (data.status === 0) {
               if (data.data.list.length < 15) {
                  this.finished = true
               }
               data.data.list.forEach(element => {
                  this.tabsPositionNumArr.push(element)
               })
               this.total = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getListDetails() {
            // 获取沪深我的平仓列表
            this.loadings = true
            let opt = {
               state: 1,
               stockCode: '', // 代码
               stockSpell: '', // 简拼
               pageNum: this.pages,
               pageSize: 15
            }
            let data = await api.getOrderList(opt)
            this.loadings = false
            if (data.status === 0) {
               if (data.data.list.length < 15) {
                  this.finisheds = true
               }
               data.data.list.forEach(element => {
                  this.tabsPcArr.push(element)
               })
               this.totals = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getzhishuListDetails() {
            // 获取指数平仓
            this.loadings = true
            let opt = {
               state: 1,
               stockCode: '', // 代码
               stockSpell: '', // 简拼
               pageNum: this.pageNum,
               pageSize: 15
            }
            let data = await api.getIndexOrderList(opt)
            this.loadings = false
            if (data.data.list.length < 15) {
               this.finisheds = true
            }
            if (data.status === 0) {
               data.data.list.forEach(element => {
                  this.tabsPcArr.push(element)
               })
               this.totals = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getQhListDetails() {
            // 获取期货平仓
            this.loadings = true
            let opt = {
               state: 1,
               fnCode: '', // 代码
               fnName: '', // 简拼
               pageNum: this.pageNum,
               pageSize: this.pageSize
            }
            let data = await api.getFuturesOrderList(opt)
            this.loadings = false
            if (data.status === 0) {
               if (data.data.list.length < 15) {
                  this.finisheds = true
               }
               data.data.list.forEach(element => {
                  this.tabsPcArr.push(element)
               })
               this.totals = data.data.total
            } else {
               Toast(data.msg)
            }
         },
         async getNewXg() {
            // 获取新股
            this.loadingXg = true
            let opt = {}
            let data = await api.getUserNewGuList(opt)
            this.loadingXg = false
            if (data.status === 0) {
               this.tabsXgArr = data.data
               // data.data.list.forEach(element => {
               //   this.tabsXgArr.push(element)
               // })
               this.xgTotal = data.data.length
               this.finishedXg = true // 只有一页,所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁
            } else {
               Toast(data.msg)
            }
         }
      },
      filters: {
         gettime(time) {
            if (!time) {
               return ''
            }
            var nd = new Date(time)
            var y = nd.getFullYear()
            var mm = nd.getMonth() + 1
            var d = nd.getDate()
            var h = nd.getHours()
            var m = nd.getMinutes()
            var c = nd.getSeconds()
            if (mm < 10) {
               mm = '0' + mm
            }
            if (d < 10) {
               d = '0' + d
            }
            if (h < 10) {
               h = '0' + h
            }
            if (m < 10) {
               m = '0' + m
            }
            if (c < 10) {
               c = '0' + c
            }
            // 17:35:2922-06-2022
            // return y + '/' + mm + '/' + d + ' ' + h + ':' + m + ':' + c
            return mm + '/' + d + '/' + y + ' ' + h + ':' + m + ':' + c
         }
      }
   }
            // this.getQhListDetail();
            // this.getQhListDetails();
            this.getorderList();
            break;
          default:
            break;
        }
      } else {
        Toast(data.msg);
      }
    },
    clickzj(e) {
      console.log(e);
      this.zjtype = e;
      this.newchicang();
    },
    zcsg(item) {
      this.$router.push({
        path: "/trading-list",
        query: {
          listid: 5,
        },
      });
    },
    SetTitleIndex(index) {
      // 账户选项卡
      this.titleIndex = index;
      this.page = 1;
      this.pages = 1;
      this.finished = false;
      this.finisheds = false;
      this.finishedss = false;
      this.tabsPositionNumArr = [];
      this.tabsPcArr = [];
      this.tabsOrderList = [];
      switch (index) {
        case 0:
          this.titleName = this.$t("hj114");
          this.getListDetail();
          this.getListDetails();
          this.getorderList();
          this.handleTabsClick("", 0);
          break;
        case 1:
          this.titleName = this.$t("hj115");
          this.getzhishuListDetail();
          this.getzhishuListDetails();
          this.getorderList();
          this.handleTabsClick("", 0);
          break;
        case 2:
          this.totalss = 0;
          this.totals = 0;
          this.total = 0;
          this.titleName = this.$t("hj116");
          this.handleTabsClick("", 3);
          // this.getQhListDetail();
          // this.getQhListDetails();
          // this.getorderList();
          break;
        default:
          break;
      }
      this.titleDialog = false;
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    handleTabsClick(item, index) {
      // 持仓已平仓选项卡
      this.tabsCurrentIndex = index;
      if (index === 3) {
        this.finishedXg = false;
        this.getNewXg();
      }
      if (navigator.vibrate) {
        // 支持
        navigator.vibrate([55]);
      }
    },
    handleOpenDialog() {
      this.titleDialog = !this.titleDialog;
    },
    // 挂单
    async getorderList() {
      let opts = {};
      let data = await api.getorderList(opts);
      this.loadingss = false;
      if (data.status === 0) {
        data.data.forEach((element) => {
          this.tabsOrderList.push(element);
        });
        this.totalss = data.data.length;
        this.finishedss = true; // 只有一页,所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁
      } else {
        Toast(data.msg);
      }
    },
    typeclick(e) {
      console.log(e);
      this.typeindex = e;
      this.newchicang();
    },
    async getIndexSettingInfo() {
      // 网站设置信息 指数
      let data = await api.getIndexSetting();
      if (data.status === 0) {
        // 成功
        this.indexSettingInfo = data.data;
      } else {
        Toast(data.msg);
      }
    },
    async getFuturesSetting() {
      // 网站设置信息 期货
      let data = await api.getFuturesSetting();
      if (data.status === 0) {
        // 成功
        this.futuresSettingInfo = data.data;
      } else {
        Toast(data.msg);
      }
    },
    async getSettingInfo() {
      let data = await api.getSetting();
      if (data.status === 0) {
        // 成功
        this.settingInfo = data.data;
      } else {
        Toast(data.msg);
      }
    },
    async getUserInfo() {
      // 获取用户信息
      //   let showcookie = this.getCookie('USER_TOKEN');
      let data = await api.getUserInfo();
      if (data.status === 0) {
        // this.getProductSetting()
        this.$store.state.userInfo = data.data;
      } else {
        Toast(data.msg);
      }
      this.$store.state.user = this.user;
    },
    async getListDetail() {
      // 获取沪深我的持仓列表
      this.loading = true;
      let opt = {
        state: 0,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.page,
        pageSize: 15,
      };
      let data = await api.getOrderList(opt);
      this.loading = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true;
        }
        data.data.list.forEach((element) => {
          this.tabsPositionNumArr.push(element);
        });
        this.total = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getzhishuListDetail() {
      // 获取指数持仓
      this.loading = true;
      let opt = {
        state: 0,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let data = await api.getIndexOrderList(opt);
      this.loading = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true;
        }
        data.data.list.forEach((element) => {
          this.tabsPositionNumArr.push(element);
        });
        this.total = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getQhListDetail() {
      // 获取期货持仓
      this.loading = true;
      let opt = {
        state: 0,
        fnCode: "", // 代码
        fnName: "", // 简拼
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let data = await api.getFuturesOrderList(opt);
      this.loading = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finished = true;
        }
        data.data.list.forEach((element) => {
          this.tabsPositionNumArr.push(element);
        });
        this.total = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getListDetails() {
      // 获取沪深我的平仓列表
      this.loadings = true;
      let opt = {
        state: 1,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.pages,
        pageSize: 15,
      };
      let data = await api.getOrderList(opt);
      this.loadings = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finisheds = true;
        }
        data.data.list.forEach((element) => {
          this.tabsPcArr.push(element);
        });
        this.totals = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getzhishuListDetails() {
      // 获取指数平仓
      this.loadings = true;
      let opt = {
        state: 1,
        stockCode: "", // 代码
        stockSpell: "", // 简拼
        pageNum: this.pageNum,
        pageSize: 15,
      };
      let data = await api.getIndexOrderList(opt);
      this.loadings = false;
      if (data.data.list.length < 15) {
        this.finisheds = true;
      }
      if (data.status === 0) {
        data.data.list.forEach((element) => {
          this.tabsPcArr.push(element);
        });
        this.totals = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getQhListDetails() {
      // 获取期货平仓
      this.loadings = true;
      let opt = {
        state: 1,
        fnCode: "", // 代码
        fnName: "", // 简拼
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      let data = await api.getFuturesOrderList(opt);
      this.loadings = false;
      if (data.status === 0) {
        if (data.data.list.length < 15) {
          this.finisheds = true;
        }
        data.data.list.forEach((element) => {
          this.tabsPcArr.push(element);
        });
        this.totals = data.data.total;
      } else {
        Toast(data.msg);
      }
    },
    async getNewXg() {
      // 获取新股
      this.loadingXg = true;
      let opt = {};
      let data = await api.getUserNewGuList(opt);
      this.loadingXg = false;
      if (data.status === 0) {
        this.tabsXgArr = data.data;
        // data.data.list.forEach(element => {
        //   this.tabsXgArr.push(element)
        // })
        this.xgTotal = data.data.length;
        this.finishedXg = true; // 只有一页,所以锁住翻页。有需要刷新数据的时候在调用方法前重新解锁
      } else {
        Toast(data.msg);
      }
    },
  },
  filters: {
    gettime(time) {
      if (!time) {
        return "";
      }
      var nd = new Date(time);
      var y = nd.getFullYear();
      var mm = nd.getMonth() + 1;
      var d = nd.getDate();
      var h = nd.getHours();
      var m = nd.getMinutes();
      var c = nd.getSeconds();
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (d < 10) {
        d = "0" + d;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (c < 10) {
        c = "0" + c;
      }
      // 17:35:2922-06-2022
      // return y + '/' + mm + '/' + d + ' ' + h + ':' + m + ':' + c
      return mm + "/" + d + "/" + y + " " + h + ":" + m + ":" + c;
    },
  },
};
</script>
<style scoped lang="less">
   /deep/ .mint-msgbox-title {
      font-size: 0.4rem !important;
   }
/deep/ .mint-msgbox-title {
  font-size: 0.4rem !important;
}
   .pingbtn {
      width: auto !important;
      height: auto !important;
      background: rgb(45, 106, 233);
      color: rgb(255, 255, 255);
      padding: 0.2rem 0.4rem;
      border-radius: 0.2rem !important;
   }
.pingbtn {
  width: auto !important;
  height: auto !important;
  background: rgb(45, 106, 233);
  color: rgb(255, 255, 255);
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem !important;
}
   .pink {
      color: #eb2f96;
      background: #fff0f6;
      border-color: #ffadd2;
   }
.pink {
  color: #eb2f96;
  background: #fff0f6;
  border-color: #ffadd2;
}
   .red {
      color: #f5222d;
      background: #fff1f0;
      border-color: #ffa39e;
   }
.red {
  color: #f5222d;
  background: #fff1f0;
  border-color: #ffa39e;
}
   .blue {
      color: #1890ff;
      background: #e6f7ff;
      border-color: #91d5ff;
   }
.blue {
  color: #1890ff;
  background: #e6f7ff;
  border-color: #91d5ff;
}
   .green {
      color: #52c41a;
      background: #f6ffed;
      border-color: #b7eb8f;
   }
.green {
  color: #52c41a;
  background: #f6ffed;
  border-color: #b7eb8f;
}
   .purple {
      color: #722ed1;
      background: #f9f0ff;
      border-color: #d3adf7;
   }
.purple {
  color: #722ed1;
  background: #f9f0ff;
  border-color: #d3adf7;
}
   @boxCenter: {
      display: flex;
      justify-content: center;
      align-items: center;
   }
@boxCenter: {
  display: flex;
  justify-content: center;
  align-items: center;
};
   ;
   @topCardColor: #bdbdbd;
@topCardColor: #bdbdbd;
   .warehouse_page {
      width: 100%;
      height: calc(100% - 1.2974rem);
      background: linear-gradient(to bottom, #3160FD, #ffffff);
   }
.warehouse_page {
  width: 100%;
  height: calc(100% - 1.2974rem);
  background: linear-gradient(to bottom, #3160fd, #ffffff);
}
   .content {
      width: 100%;
      height: 100%;
      position: relative;
   }
.content {
  width: 100%;
  height: 100%;
  position: relative;
}
   .top_title.active {
      height: 6.5rem;
   }
.top_title.active {
  height: 6.5rem;
}
   .top_title {
      width: 100%;
      height: 0.9231rem;
      position: absolute;
      top: 0.6rem;
      z-index: 10;
      overflow: hidden;
      transition: all 0.3s;
      padding: 0 .3rem;
.top_title {
  width: 100%;
  height: 0.9231rem;
  position: absolute;
  top: 0.6rem;
  z-index: 10;
  overflow: hidden;
  transition: all 0.3s;
  padding: 0 0.3rem;
      .titles {
         width: 100%;
         height: 0.9231rem;
         display: flex;
         padding: 0 0.1rem;
      }
  .titles {
    width: 100%;
    height: 0.9231rem;
    display: flex;
    padding: 0 0.1rem;
  }
      .left_title,
      .right_box {
         // width: 50%;
         height: 100%;
         display: flex;
      }
  .left_title,
  .right_box {
    // width: 50%;
    height: 100%;
    display: flex;
  }
      .title {
         width: auto;
         height: 100%;
         font-size: 0.4897rem;
         display: flex;
         align-items: center;
  .title {
    width: auto;
    height: 100%;
    font-size: 0.4897rem;
    display: flex;
    align-items: center;
         span {
            font-size: 0.4897rem;
            font-weight: 600;
         }
      }
    span {
      font-size: 0.4897rem;
      font-weight: 600;
    }
  }
      .img {
         // width: 40%;
         height: 100%;
         display: flex;
         align-items: center;
  .img {
    // width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
         img {
            width: 0.6rem;
            height: 0.6rem;
         }
      }
   }
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
   .top_class_box_right {
      font-size: 0.4rem;
   }
.top_class_box_right {
  font-size: 0.4rem;
}
   .click_box_rightclick {
      margin-right: 10px;
      // font-size: 10px;
      font-size: 0.4rem;
      color: #409eff;
      padding: 8px 12px;
      border-radius: 12px;
      border: 0.5px solid #409eff;
   }
.click_box_rightclick {
  margin-right: 10px;
  // font-size: 10px;
  font-size: 0.4rem;
  color: #409eff;
  padding: 8px 12px;
  border-radius: 12px;
  border: 0.5px solid #409eff;
}
   .search {
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.3rem;
      position: relative;
      top: 10px;
      background-color: #fff;
      z-index: 3000;
.search {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.3rem;
  position: relative;
  top: 10px;
  background-color: #fff;
  z-index: 99;
      .search_content {
         width: 100%;
         height: 90%;
         display: flex;
         align-items: center;
      }
  .search_content {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
  }
      .left_search {
         width: 100%;
         height: 100%;
         background: #f6f6f6;
         border-radius: 100px;
         display: flex;
  .left_search {
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    border-radius: 100px;
    display: flex;
         .search_img {
            width: 1rem;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
    .search_img {
      width: 1rem;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
            img {
               width: 0.5rem;
               height: 0.5rem;
            }
         }
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
    }
         .search_input {
            width: 100%;
            overflow: hidden;
            height: 100%;
            display: flex;
         }
      }
    .search_input {
      width: 100%;
      overflow: hidden;
      height: 100%;
      display: flex;
    }
  }
      .right_search_class {
         width: 13%;
         height: 100%;
         display: flex;
         justify-content: flex-end;
         align-items: center;
  .right_search_class {
    width: 13%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
         img {
            width: 0.6rem;
            height: 0.6rem;
         }
      }
   }
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
  }
}
   .ydy_box {
      margin-top: 5px;
      font-size: 0.4rem;
      color: #9ea3ae;
   }
.ydy_box {
  margin-top: 5px;
  font-size: 0.4rem;
  color: #9ea3ae;
}
   .warehouse_card {
      width: 100%;
      height: calc(100% - 1rem);
      position: absolute;
      top: 60px;
      // top: 1.5231rem;
      z-index: 100;
      padding: 0 0.3333rem;
      // background: rgb(242, 243, 247);
.warehouse_card {
  width: 100%;
  height: calc(100% - 1rem);
  position: absolute;
  top: 60px;
  // top: 1.5231rem;
  z-index: 100;
  padding: 0 0.3333rem;
  // background: rgb(242, 243, 247);
      .top_card {
         width: 100%;
         // height: 4.2308rem;
         border-radius: 0.15rem;
         margin-top: 0.3rem;
         background: #fff;
  .top_card {
    width: 100%;
    // height: 4.2308rem;
    border-radius: 0.15rem;
    margin-top: 0.3rem;
    background: #fff;
         .card_content {
            width: 100%;
            height: 100%;
            padding: 0.4rem;
    .card_content {
      width: 100%;
      height: 100%;
      padding: 0.4rem;
            .t_title {
               width: 100%;
               height: 0.5128rem;
               display: flex;
               align-items: center;
               font-size: 0.4rem;
      .t_title {
        width: 100%;
        height: 0.5128rem;
        display: flex;
        align-items: center;
        font-size: 0.4rem;
               span {
                  font-size: 0.4rem;
                  font-weight: bold;
               }
            }
        span {
          font-size: 0.4rem;
          font-weight: bold;
        }
      }
            .t_price {
               width: 100%;
               height: 0.5128rem;
               display: flex;
               align-items: center;
               justify-content: space-between;
      .t_price {
        width: 100%;
        height: 0.5128rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
               .price {
                  font-weight: 600;
                  font-size: 0.4246rem;
                  margin-top: 0.07rem;
               }
        .price {
          font-weight: 600;
          font-size: 0.4246rem;
          margin-top: 0.07rem;
        }
               .profits {
                  font-weight: 800;
                  font-size: 0.4rem;
                  color: #dd2c34;
                  margin-top: 0.2rem;
                  margin-left: 0.2rem;
               }
            }
        .profits {
          font-weight: 800;
          font-size: 0.4rem;
          color: #dd2c34;
          margin-top: 0.2rem;
          margin-left: 0.2rem;
        }
      }
            .balance {
               width: 100%;
               height: 0.3846rem;
               margin-top: 0.428rem;
               display: flex;
               font-size: 0.4rem;
      .balance {
        width: 100%;
        height: 0.3846rem;
        margin-top: 0.428rem;
        display: flex;
        font-size: 0.4rem;
               >div {
                  width: 50%;
                  height: 100%;
                  color: @topCardColor;
                  font-size: 0.4rem;
        > div {
          width: 50%;
          height: 100%;
          color: @topCardColor;
          font-size: 0.4rem;
                  span {
                     font-weight: 600;
                     font-size: 0.4rem;
                  }
               }
            }
          span {
            font-weight: 600;
            font-size: 0.4rem;
          }
        }
      }
            .num {
               width: 100%;
               height: 0.3846rem;
               margin-top: 0.1rem;
               display: flex;
      .num {
        width: 100%;
        height: 0.3846rem;
        margin-top: 0.1rem;
        display: flex;
               >div {
                  width: 50%;
                  height: 100%;
        > div {
          width: 50%;
          height: 100%;
                  span {
                     font-weight: 600;
                  }
               }
          span {
            font-weight: 600;
          }
        }
               .right_margin {
        .right_margin {
          span {
            font-weight: normal !important;
          }
        }
      }
                  span {
                     font-weight: normal !important;
                  }
               }
            }
      .margin {
        width: 100%;
        height: 0.3846rem;
        margin-top: 0.428rem;
        display: flex;
            .margin {
               width: 100%;
               height: 0.3846rem;
               margin-top: 0.428rem;
               display: flex;
        > div {
          width: 50%;
          height: 100%;
          color: @topCardColor;
               >div {
                  width: 50%;
                  height: 100%;
                  color: @topCardColor;
          span {
            font-weight: 600;
          }
        }
      }
                  span {
                     font-weight: 600;
                  }
               }
            }
      .prices {
        width: 100%;
        height: 0.3846rem;
        margin-top: 0.1rem;
        display: flex;
            .prices {
               width: 100%;
               height: 0.3846rem;
               margin-top: 0.1rem;
               display: flex;
        > div {
          width: 50%;
          height: 100%;
               >div {
                  width: 50%;
                  height: 100%;
          span {
            font-weight: 600;
          }
        }
      }
    }
  }
}
                  span {
                     font-weight: 600;
                  }
               }
            }
         }
      }
   }
.over {
  width: 100%;
  height: calc(100% - 0.7179rem);
  overflow: auto;
  padding: 0 0.3rem;
}
   .over {
      width: 100%;
      height: calc(100% - 0.7179rem);
      overflow: auto;
      padding: 0 0.3rem;
   }
.tabs_card {
  width: 100%;
  height: calc(100% - 4.24rem - 4rem - 0.6rem);
  margin-top: 0.3rem;
  background: #fff;
  border-radius: 0.2rem;
  padding-top: 0.15rem;
}
   .tabs_card {
      width: 100%;
      height: calc(100% - 4.24rem - 4rem - 0.6rem);
      margin-top: 0.3rem;
      background: #fff;
      border-radius: 0.2rem;
      padding-top: 0.15rem;
   }
.over::-webkit-scrollbar {
  display: none;
}
   .over::-webkit-scrollbar {
      display: none;
   }
.click_box {
  margin-top: 10px;
  width: 100%;
  border-radius: 0.15rem;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  font-size: 0.4rem;
}
   .click_box {
      margin-top: 10px;
      width: 100%;
      border-radius: 0.15rem;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      font-size: 0.4rem;
   }
.click_box_left {
  width: 50%;
  text-align: center;
  color: rgb(64, 158, 255);
  position: relative;
  font-size: 0.4rem;
}
   .click_box_left {
      width: 50%;
      text-align: center;
      color: rgb(64, 158, 255);
      position: relative;
      font-size: 0.4rem;
   }
.click_box_g {
  position: absolute;
  width: 20px;
  height: 4px;
  left: 2.07037rem;
  bottom: -10px;
  background-color: #3460f6;
}
   .click_box_g {
      position: absolute;
      width: 20px;
      height: 4px;
      left: 2.07037rem;
      bottom: -10px;
      background-color: #3460F6;
   }
.click_box_right {
  font-size: 0.4rem;
  position: relative;
  text-align: center;
  width: 50%;
}
   .click_box_right {
      font-size: 0.4rem;
      position: relative;
      text-align: center;
      width: 50%;
   }
.tabs_card_content {
  width: 100%;
  height: 100%;
   .tabs_card_content {
      width: 100%;
      height: 100%;
      .tabs_top_title {
         width: 100%;
         height: 1rem;
         border-bottom: 0.01rem solid #ececec;
         display: flex;
         align-items: center;
         font-size: 0.4103rem;
         padding: 0.2rem 0.3rem 0;
         justify-content: space-between;
         overflow-x: scroll;
         background-color: #F2F3F7;
         &::-webkit-scrollbar {
            display: none;
         }
         >div {
            // width: 20%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            padding: 0 0.3rem;
            span {
               display: inline-block;
               height: 100%;
               font-weight: 550;
               // line-height: 0.7179rem;
               text-align: center;
            }
            span.active {
               color: rgb(62, 121, 226);
               text-align: center;
               // border-bottom: 0.1rem solid rgb(62, 121, 226);
  .tabs_top_title {
    width: 100%;
    height: 1rem;
    border-bottom: 0.01rem solid #ececec;
    display: flex;
    align-items: center;
    font-size: 0.4103rem;
    padding: 0.2rem 0.3rem 0;
    justify-content: space-between;
    overflow-x: scroll;
    background-color: #f2f3f7;
            }
    &::-webkit-scrollbar {
      display: none;
    }
            span.active::after {
               content: '';
               width: 80%;
    > div {
      // width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      padding: 0 0.3rem;
               height: 0.001rem;
               display: block;
               margin: 0 auto;
               margin-top: 0.3rem;
               border-bottom: 0.06rem solid rgb(62, 121, 226);
            }
      span {
        display: inline-block;
        height: 100%;
        font-weight: 550;
        // line-height: 0.7179rem;
        text-align: center;
      }
         }
      }
      span.active {
        color: rgb(62, 121, 226);
        text-align: center;
        // border-bottom: 0.1rem solid rgb(62, 121, 226);
      }
      .tabs_o {
         width: 100%;
         margin-top: 0.3rem;
      span.active::after {
        content: "";
        width: 80%;
         >.tabs_o_items {
            width: 100%;
            // height: 2.2rem;
            position: relative;
            border-bottom: 0.01rem solid #ececec;
            // margin-bottom: 0.1rem;
            padding: 0.3rem 0;
        height: 0.001rem;
        display: block;
        margin: 0 auto;
        margin-top: 0.3rem;
        border-bottom: 0.06rem solid rgb(62, 121, 226);
      }
    }
  }
            .tabs_o_title {
               width: 100%;
               // height: 0.7179rem;
               display: flex;
               align-items: center;
               justify-content: space-between;
  .tabs_o {
    width: 100%;
    margin-top: 0.3rem;
               span {
                  display: inline-block;
                  margin-right: 0.2rem;
               }
    > .tabs_o_items {
      width: 100%;
      // height: 2.2rem;
      position: relative;
      border-bottom: 0.01rem solid #ececec;
      // margin-bottom: 0.1rem;
      padding: 0.3rem 0;
               .title {
                  font-weight: 600;
                  font-size: 0.4059rem;
               }
      .tabs_o_title {
        width: 100%;
        // height: 0.7179rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
               .buy_to_sell {
        span {
          display: inline-block;
          margin-right: 0.2rem;
        }
                  width: 80px;
                  text-align: center;
                  padding: 0.08rem 0.1rem;
        .title {
          font-weight: 600;
          font-size: 0.4059rem;
        }
                  font-weight: 600;
               }
        .buy_to_sell {
          width: 80px;
          text-align: center;
          padding: 0.08rem 0.1rem;
               .multiple {
                  padding: 0.08rem 0.1rem;
                  background: rgb(236, 243, 252);
                  color: rgb(42, 108, 230);
                  font-weight: 600;
               }
          font-weight: 600;
        }
               .nums {
                  color: @topCardColor;
               }
            }
        .multiple {
          padding: 0.08rem 0.1rem;
          background: rgb(236, 243, 252);
          color: rgb(42, 108, 230);
          font-weight: 600;
        }
            .center_price {
               width: 100%;
               // height: 0.3846rem;
               justify-content: space-between;
               display: flex;
               align-items: center;
               margin-top: 0.3rem;
        .nums {
          color: @topCardColor;
        }
      }
               >div {
                  // width: 28%;
                  height: 100%;
      .center_price {
        width: 100%;
        // height: 0.3846rem;
        justify-content: space-between;
        display: flex;
        align-items: center;
        margin-top: 0.3rem;
                  span {
                     font-weight: 600;
                  }
               }
        > div {
          // width: 28%;
          height: 100%;
               .profit .lv {
                  color: #27ab63;
               }
          span {
            font-weight: 600;
          }
        }
               .profit .red {
                  color: #ff0000;
               }
            }
        .profit .lv {
          color: #27ab63;
        }
            .bottom_price_title {
               width: 100%;
               // height: 0.4rem;
               margin-top: 0.2rem;
               display: flex;
               align-items: center;
               justify-content: space-between;
               font-size: 0.4rem;
        .profit .red {
          color: #ff0000;
        }
      }
               >div {
                  height: 100%;
                  color: @topCardColor;
      .bottom_price_title {
        width: 100%;
        // height: 0.4rem;
        margin-top: 0.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.4rem;
                  span {
                     font-weight: 600;
                  }
               }
            }
         }
      }
   }
        > div {
          height: 100%;
          color: @topCardColor;
   .waiting {
      width: 100%;
      margin-top: 0.3rem;
      position: relative;
          span {
            font-weight: 600;
          }
        }
      }
    }
  }
}
      .waiting_box {
         width: 100%;
         height: 4rem;
         display: flex;
         align-items: center;
         justify-content: center;
         margin-top: 1rem;
.waiting {
  width: 100%;
  margin-top: 0.3rem;
  position: relative;
         >div {
            width: 60%;
            height: 100%;
  .waiting_box {
    width: 100%;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
            img {
               width: 100%;
               height: 100%;
            }
    > div {
      width: 60%;
      height: 100%;
            .gd {
               display: inline-block;
               width: 100%;
               text-align: center;
               color: rgb(133, 133, 133);
            }
      img {
        width: 100%;
        height: 100%;
      }
            .trading {
               width: 100%;
               height: 2rem;
               display: flex;
               align-items: center;
               justify-content: center;
      .gd {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: rgb(133, 133, 133);
      }
               span {
                  display: inline-block;
                  width: 4.1026rem;
                  height: 1.0256rem;
                  background: #f7f7f7;
                  color: #3773dd;
                  font-weight: 600;
                  font-size: 0.4615rem;
                  text-align: center;
                  line-height: 1.0256rem;
                  border-radius: 0.2rem;
               }
            }
         }
      }
   }
      .trading {
        width: 100%;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
   .right_btn {
      width: 1.9949rem;
      height: 0.6667rem;
      // line-height: 0.6667rem;
      // position: absolute;
      right: 1%;
      top: 27%;
      // background: #f7f7f7;
      // color: #3773dd;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.15rem;
        span {
          display: inline-block;
          width: 4.1026rem;
          height: 1.0256rem;
          background: #f7f7f7;
          color: #3773dd;
          font-weight: 600;
          font-size: 0.4615rem;
          text-align: center;
          line-height: 1.0256rem;
          border-radius: 0.2rem;
        }
      }
    }
  }
}
      span {
         font-weight: 600;
         font-size: 0.4rem;
      }
   }
.right_btn {
  width: 1.9949rem;
  height: 0.6667rem;
  // line-height: 0.6667rem;
  // position: absolute;
  right: 1%;
  top: 27%;
  // background: #f7f7f7;
  // color: #3773dd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.15rem;
   .right_count {
      width: 1.7949rem;
      height: 0.6667rem;
      position: absolute;
      right: 1%;
      top: 20%;
  span {
    font-weight: 600;
    font-size: 0.4rem;
  }
}
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.3rem;
.right_count {
  width: 1.7949rem;
  height: 0.6667rem;
  position: absolute;
  right: 1%;
  top: 20%;
      span {
         font-weight: 600;
         font-size: 0.4rem;
      }
   }
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
   .profit_res {
      width: 100% !important;
      margin-top: .2rem;
   }
  span {
    font-weight: 600;
    font-size: 0.4rem;
  }
}
   .oes {
      // height: 1.5rem !important;
   }
.profit_res {
  width: 100% !important;
  margin-top: 0.2rem;
}
   .dialog {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      background: rgba(0, 0, 0, .5);
      z-index: 9;
   }
.oes {
  // height: 1.5rem !important;
}
   .overflow_box {
      width: 100%;
      height: 1.5rem;
      border-radius: .2rem;
      padding: 0 .3rem;
      margin: .3rem 0;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
.dialog {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
      >div {
         height: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
      }
.overflow_box {
  width: 100%;
  height: 1.5rem;
  border-radius: 0.2rem;
  padding: 0 0.3rem;
  margin: 0.3rem 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
      .left_titles {
         color: rgb(129, 131, 133);
         font-size: 0.4rem;
  > div {
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
         span {
            font-weight: normal !important;
  .left_titles {
    color: rgb(129, 131, 133);
    font-size: 0.4rem;
         }
      }
    span {
      font-weight: normal !important;
    }
  }
      .right_price {
         color: rgb(128, 135, 145);
      }
   }
  .right_price {
    color: rgb(128, 135, 145);
  }
}
   .top_class_box_left {
      color: #fff;
      border-radius: 50px;
      background: #409eff;
      font-size: 0.4rem;
      padding: 4px 12px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
.top_class_box_left {
  color: #fff;
  border-radius: 50px;
  background: #409eff;
  font-size: 0.4rem;
  padding: 4px 12px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
   .kuan {
      width: auto !important;
      // padding-left: 0.5rem;
      letter-spacing: 0.02rem;
   }
.kuan {
  width: auto !important;
  // padding-left: 0.5rem;
  letter-spacing: 0.02rem;
}
   .kuans {
      width: auto !important;
      padding-left: 0.5rem;
      letter-spacing: 0.02rem;
   }
.kuans {
  width: auto !important;
  padding-left: 0.5rem;
  letter-spacing: 0.02rem;
}
   .left_price {
      font-weight: normal;
      font-size: 0.4rem;
.left_price {
  font-weight: normal;
  font-size: 0.4rem;
      span {
         font-size: 0.4rem;
         color: #000;
         font-weight: 500 !important;
         ;
      }
   }
  span {
    font-size: 0.4rem;
    color: #000;
    font-weight: 500 !important;
  }
}
   .left_price {
      font-weight: normal;
      font-size: 0.4rem;
.left_price {
  font-weight: normal;
  font-size: 0.4rem;
      span {
         font-size: 0.4rem;
         color: #000;
         font-weight: 500 !important;
         ;
      }
   }
  span {
    font-size: 0.4rem;
    color: #000;
    font-weight: 500 !important;
  }
}
   .numDemo {
      font-size: 0.3rem;
      color: #000;
      font-weight: 500 !important;
      ;
   }
.numDemo {
  font-size: 0.3rem;
  color: #000;
  font-weight: 500 !important;
}
   .maichu {
      color: rgb(225, 57, 65);
      background: rgb(252, 238, 240);
   }
.maichu {
  color: rgb(225, 57, 65);
  background: rgb(252, 238, 240);
}
   .mairu {
      color: rgb(109, 175, 125);
      background: rgb(215, 243, 235);
   }
.mairu {
  color: rgb(109, 175, 125);
  background: rgb(215, 243, 235);
}
   .jiantou {
      // position: relative;
   }
.jiantou {
  // position: relative;
}
   .top_class_box {
      padding: 0 0.3333rem;
      background: #fff;
      width: 100%;
      height: 50px;
      border-radius: 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 4px 0;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
   }
.top_class_box {
  padding: 0 0.3333rem;
  background: #fff;
  width: 100%;
  height: 50px;
  border-radius: 8px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}
   .top_class {
      display: flex;
      justify-content: center;
      padding: 0 0.3333rem;
      align-items: center;
   }
.top_class {
  display: flex;
  justify-content: center;
  padding: 0 0.3333rem;
  align-items: center;
}
   .jiantou::before {
      content: '';
      background-image: url('../../assets/img/youyou.png');
      background-size: 100% 100%;
      width: 0.6rem;
      height: 0.2rem;
      font-size: 0.8rem;
      position: absolute;
      right: 0.5rem;
      top: calc(50% - 0.15rem);
   }
.jiantou::before {
  content: "";
  background-image: url("../../assets/img/youyou.png");
  background-size: 100% 100%;
  width: 0.6rem;
  height: 0.2rem;
  font-size: 0.8rem;
  position: absolute;
  right: 0.5rem;
  top: calc(50% - 0.15rem);
}
</style>