<template>
  <div class="jurisdictionPage">


    <section v-if="$isMobile"  v-loading="jurisdictionLoading"  :element-loading-text="loadingText">
    
      <div class="accountInformation">
        <img :src="jurisdiction.img" alt="coin" loading="lazy"/>
        <span class="coin">{{ jurisdiction.coin }} </span>
        <i class="iconfont icon-youjiantou"></i>
        <span class="ma"> {{ jurisdiction.account }}</span>
      </div>
    
      <div class="profitTop">
        <div class="box">
          <span
            >{{ $t(`mining.totalRevenue`) }}
            <div class="boxTitle" :data-title="$t(`mining.totalRevenueTips`)">
              <img src="../../assets/img/profit.svg" alt="profit" loading="lazy"/>
            </div>
          </span>
          <span class="text">{{ MinerAccountData.totalProfit }}</span>
        </div>
        <div class="box">
          <span
            >{{ $t(`mining.totalExpenditure`) }}

            <div
              class="boxTitle"
              :data-title="$t(`mining.totalExpenditureTips`)"
            >
              <img src="../../assets/img/profit.svg" alt="profit" loading="lazy"/>
            </div>
          </span>
          <span class="text">{{ MinerAccountData.expend }}</span>
        </div>
        <div class="box">
          <span
            >{{ $t(`mining.yesterdaySEarnings`) }}

            <div
              class="boxTitle"
              :data-title="$t(`mining.yesterdaySEarningsTips`)"
            >
              <img src="../../assets/img/profit.svg" alt="profit" loading="lazy"/>
            </div>
          </span>
          <span class="text">{{ MinerAccountData.preProfit }}</span>
        </div>
        <div class="box">
          <span
            >{{ $t(`mining.diggedToday`) }}
            <div class="boxTitle" :data-title="$t(`mining.diggedTodayTips`)">
              <img src="../../assets/img/profit.svg" alt="profit" loading="lazy"/>
            </div>
          </span>
          <span class="text">{{ MinerAccountData.todayPorfit }}</span>
        </div>
        <div class="accountBalance">
          <div class="box2">
            <span class="paymentSettings"
              >{{ $t(`mining.accountBalance`) }}

              <div class="boxTitle" :data-title="$t(`mining.balanceReminder`)">
                <img src="../../assets/img/profit.svg" alt="profit" loading="lazy"/>
              </div>
            </span>
            <span class="text">{{ MinerAccountData.balance }}</span>
          </div>
        </div>
      </div>

      <div class="profitBtm2" v-loading="powerChartLoading">
        <div class="right">
          <div class="intervalBox">
            <div class="title">{{ $t(`mining.algorithmicDiagram`) }}</div>
            <div class="times">
              <span
                :class="{ timeActive: timeActive == item.value }"
                @click="handleInterval(item.value)"
                v-for="item in intervalList"
                :key="item.value"
                >{{ $t(item.label) }}</span
              >
            </div>
          </div>
          <div
            id="powerChart"
            style="width: 100%; height: 100%; padding: 0"
          ></div>
        </div>
      </div>
      <div class="barBox" v-loading="barChartLoading">
        <div class="lineBOX">
          <div class="intervalBox">
            <div class="title">{{ $t(`mining.computingPower`) }}</div>
            <div class="timesBox">
              <div class="times2">
              <span
                :class="{ timeActive: barActive == item.value }"
                @click="distributionInterval(item.value)"
                v-for="item in AccountPowerDistributionintervalList"
                :key="item.value"
                >{{ $t(item.label) }}</span
              >
            </div>
            </div>
          
          </div>
          <div id="barChart" style="width: 100%; height: 90%; padding: 0"></div>
        </div>
      </div>
      <div class="searchBox">
                <input
                  type="text"
                  class="inout"
                  v-model="search"
                  :placeholder="$t(`personal.pleaseEnter2`)"
                />
                <i @click="handelSearch" class="el-icon-search"></i>
              </div>
      <div class="top3Box">
        <section class="tabPageBox">
          <div class="tabPageTitle">
            <div class="TitleS minerTitle" @click="handleClick2(`power`)">
              <span
                class="trapezoid"
                :class="{ activeHeadlines: activeName2 == `power` }"
              >
                <span>{{ $t(`mining.miner`) }}</span></span
              >
            </div>
            <div
              class="TitleS profitTitle"
              @click="handleClick2(`miningMachine`)"
              v-show="profitShow"
            >
              <span
                class="trapezoid"
                :class="{ activeHeadlines: activeName2 == `miningMachine` }"
              >
                <span>{{ $t(`mining.profit`) }}</span></span
              >
            </div>
            <div class="TitleS paymentTitle" v-show="paymentShow" @click="handleClick2(`payment`)">
              <span
                class="trapezoid"
                :class="{ activeHeadlines: activeName2 == `payment` }"
              >
                <span>{{ $t(`mining.payment`) }}</span></span
              >
            </div>
          </div>

          <section
            v-if="activeName2 == `power`"
            class="page"
            v-loading="MinerListLoading"
          >
            <div class="minerTitleBox">
              <div class="TitleOnLine">
                <span @click="onlineStatus(`all`)"
                  ><span
                    class="circularDots3"
                    :class="{ activeCircular: sunTabActiveName == `all` }"
                  ></span>
                  {{ $t(`mining.all`) }} {{ MinerListData.all }}</span
                >
                <span @click="onlineStatus(`onLine`)"
                  ><div
                    class="circularDots2"
                    :class="{ activeCircular: sunTabActiveName == `onLine` }"
                  ></div>
                  {{ $t(`mining.onLine`) }} {{ MinerListData.online }}</span
                >
                <span @click="onlineStatus(`off-line`)">
                  <div
                    class="circularDots2"
                    :class="{ activeCircular: sunTabActiveName == `off-line` }"
                  ></div>
                  {{ $t(`mining.offLine`) }} {{ MinerListData.offline }}</span
                >
              </div>
             
            </div>

            <div class="publicBox all" v-if="sunTabActiveName == `all`">
              <div class="TitleAll" style="font-weight: 600">
                <span> {{ $t(`mining.miner`) }}</span>
                <span>
                  {{ $t(`mining.Minutes`) }} MH/s
                  <i
                    @click="handleSort(`30m`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <span
                  >{{ $t(`mining.dayPower`) }} MH/s
                  <i
                    @click="handleSort(`24h`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <!-- <span>{{ $t(`mining.submitTime`) }}</span>
                <span>{{ $t(`mining.state`) }}</span> -->
              </div>
              <div class="totalTitleAll">
                <span
                  ><div class="circularDots"></div>
                  {{ $t(`mining.total`) }}</span
                >
                <span>{{ this.formatNumber(MinerListData.rate) }} </span>
                <span>{{ MinerListData.dailyRate }} </span>
                <!-- <span> &nbsp; --- </span> -->
                <!-- <span></span> -->
              </div>

              <el-collapse
                v-model="Accordion"
                accordion
                style="max-height: 800px; overflow: auto"
              >
                <div
                  v-for="(item, index) in MinerListTableData"
                  :key="item.miner"
                  :class="`item-${index % 2 === 0 ? 'even' : 'odd'}`"
                >
                  <el-collapse-item
                    :name="item.id"
                    @click.native="handelMiniOffLine(item.id, item.miner)"
                  >
                    <template slot="title">
                      <div class="accordionTitleAll">
                        <span :class="{ activeState: item.status == `2` }">
                          <div
                            v-if="item.status == `1`"
                            class="circularDotsOnLine"
                          ></div>
                          <div
                            v-if="item.status == `2`"
                            class="circularDotsOffLine"
                          ></div>
                          {{ item.miner }}</span
                        >
                        <span>{{ item.rate }}</span>
                        <span>{{ item.dailyRate }}</span>
                      
                      </div>
                    </template>
                      <div class="table-item">
                        <div>
                          <p>{{ $t(`mining.submitTime`) }}</p>
                          <p> <span
                          :title="item.submit"
                          class="offlineTime"
                          :class="{ activeState: item.status == `2` }"
                        >
                          <span>{{ item.submit }} </span>
                          <span
                            :title="handelTimeInterval(item.offline)"
                            v-if="item.status == `2`"
                            class="timeTips"
                            >{{ handelTimeInterval(item.offline) }}</span
                          >
                        </span></p>
                        </div>
                        <div>
                          <p>{{ $t(`mining.state`) }}</p>
                          <p>   <span
                          :title="$t(handelStateList(item.status))"
                          :class="{ activeState: item.status == `2` }"
                          >{{ $t(handelStateList(item.status)) }}
                        </span></p>
                        </div>
                     
                      

                      </div>
                     


                    <p class="chartTitle">
                      {{ $t(`mining.miner`) }}{{ item.miner }}&nbsp;
                      {{ $t(`mining.power24H`) }}
                    </p>
                    <div
                      :id="'SmallOff' + item.id"
                      v-loading="miniLoading"
                      style="width: 100%; height: 300px"
                    ></div>
                  </el-collapse-item>
                </div>
              </el-collapse>
            </div>

            <div
              class="publicBox onLine"
              v-else-if="sunTabActiveName == `onLine`"
            >
              <div class="TitleAll" style="font-weight: 600">
                <span> {{ $t(`mining.miner`) }}</span>
                <span
                  >{{ $t(`mining.Minutes`) }} MH/s
                  <i
                    @click="handleSort(`30m`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <span
                  >{{ $t(`mining.dayPower`) }} MH/s
                  <i
                    @click="handleSort(`24h`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <!-- <span>{{ $t(`mining.submitTime`) }}</span> -->
              </div>
              <div class="totalTitleAll">
                <span
                  ><div class="circularDots"></div>
                  {{ $t(`mining.total`) }}
                </span>
                <span>{{ MinerListData.rate }} </span>
                <span>{{ MinerListData.dailyRate }} </span>
                <!-- <span> &nbsp; --- </span> -->
              </div>
              <el-collapse
                v-model="Accordion"
                accordion
                style="max-height: 800px; overflow: auto"
              >
                <div
                  v-for="(item, index) in MinerListTableData"
                  :key="sunTabActiveName + item.miner"
                  :class="`item-${index % 2 == 0 ? 'even' : 'odd'}`"
                >
                  <el-collapse-item
                    :name="item.id"
                    @click.native="handelOnLineMiniChart(item.id, item.miner)"
                  >
                    <template slot="title">
                      <div class="accordionTitleAll">
                        <span
                          ><div class="circularDotsOnLine"></div>
                          {{ item.miner }}</span
                        >
                        <span>{{ item.rate }}</span>
                        <span>{{ item.dailyRate }}</span>
                        <!-- <span>{{ item.submit }}</span> -->
                        </div>
                      </template>

                      <div class="table-itemOn" >
                        <div>
                          <p>{{ $t(`mining.submitTime`) }}</p>
                          <p> <span
                          :title="item.submit"
                          class="offlineTime"
                          :class="{ activeState: item.status == `2` }"
                        >
                          <span>{{ item.submit }} </span>
                          <span
                            :title="handelTimeInterval(item.offline)"
                            v-if="item.status == `2`"
                            class="timeTips"
                            >{{ handelTimeInterval(item.offline) }}</span
                          >
                        </span></p>
                        </div>                   
                      </div>
                     
                      




                    <p class="chartTitle">
                      {{ $t(`mining.miner`) }}{{ item.miner }}&nbsp;{{
                        $t(`mining.power24H`)
                      }}
                    </p>
                    <div
                      :id="'Small' + item.id"
                      v-loading="miniLoading"
                      style="width: 100%; height: 300px"
                    ></div>
                  </el-collapse-item>
                </div>
              </el-collapse>
            </div>

            <div
              class="publicBox off-line"
              v-else-if="sunTabActiveName == `off-line`"
            >
              <div class="TitleAll" style="font-weight: 600">
                <span> {{ $t(`mining.miner`) }}</span>
                <span
                  >{{ $t(`mining.Minutes`) }} MH/s
                  <i
                    @click="handleSort(`30m`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <span
                  >{{ $t(`mining.dayPower`) }} MH/s
                  <i
                    @click="handleSort(`24h`)"
                    class="iconfont icon-paixu sort"
                  ></i
                ></span>
                <!-- <span>{{ $t(`mining.submitTime`) }}</span> -->
              </div>
              <div class="totalTitleAll">
                <span
                  ><div class="circularDots"></div>
                  {{ $t(`mining.total`) }}
                </span>
                <span>{{ MinerListData.rate }} </span>
                <span>{{ MinerListData.dailyRate }} </span>
                <!-- <span> &nbsp; --- </span> -->
              </div>
              <el-collapse
                v-model="Accordion"
                accordion
                style="max-height: 800px; overflow: auto"
              >
                <div
                  v-for="(item, index) in MinerListTableData"
                  :key="item.miner"
                  :class="`item-${index % 2 === 0 ? 'even' : 'odd'}`"
                >
                  <el-collapse-item
                    :name="item.id"
                    @click.native="handelMiniOffLine(item.id, item.miner)"
                  >
                    <template slot="title">
                      <div class="accordionTitleAll">
                        <span :class="{ activeState: item.status == `2` }"
                          ><div class="circularDotsOffLine"></div>
                          {{ item.miner }}</span
                        >
                        <span>{{ item.rate }}</span>
                        <span>{{ item.dailyRate }}</span>
                       
                        <!-- <span
                          :title="item.submit"
                          class="offlineTime"
                          :class="{ activeState: item.status == `2` }"
                        >
                          <span>{{ item.submit }} </span>
                          <span
                            :title="handelTimeInterval(item.offline)"
                            v-if="item.status == `2`"
                            class="timeTips"
                            >{{ handelTimeInterval(item.offline) }}</span
                          >
                        </span> -->
                      </div>
                    </template>

                    <div class="table-itemOn" >
                        <div>
                          <p>{{ $t(`mining.submitTime`) }}</p>
                          <p> <span
                          :title="item.submit"
                          class="offlineTime"
                          :class="{ activeState: item.status == `2` }"
                        >
                          <span>{{ item.submit }} </span>
                          <span
                            :title="handelTimeInterval(item.offline)"
                            v-if="item.status == `2`"
                            class="timeTips"
                            >{{ handelTimeInterval(item.offline) }}</span
                          >
                        </span></p>
                        </div>                   
                      </div>



                    <p class="chartTitle">
                      {{ $t(`mining.miner`) }}{{ item.miner }}&nbsp;{{
                        $t(`mining.power24H`)
                      }}
                    </p>
                    <div
                      :id="'SmallOff' + item.id"
                      v-loading="miniLoading"
                      style="width: 100%; height: 300px"
                    ></div>
                  </el-collapse-item>
                </div>
              </el-collapse>
            </div>
            <!-- <el-pagination
              class="minerPagination"
              @size-change="handleSizeMiner"
              @current-change="handleCurrentMiner"
              :current-page.sync="currentPageMiner"
              :page-sizes="[50, 100, 200, 400]"
              :page-size="MinerListParams.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="minerTotal"
            >
            </el-pagination> -->

            <el-pagination 
               style="margin-top: 10px;margin-bottom: 10px;"            
              @size-change="handleSizeMiner"
              @current-change="handleCurrentMiner"
              :current-page.sync="currentPageMiner"
              :page-sizes="[50, 100, 200, 400]"
              :page-size="MinerListParams.limit"
              layout="sizes, prev, pager, next"
              :total="minerTotal">
            </el-pagination>



          </section>

          <section class="miningMachine" v-if="activeName2 == `miningMachine`">
            <div class="belowTable">
              <ul>
                <li class="table-title">
                  <span :title="$t(`mining.settlementDate`)">{{
                    $t(`mining.settlementDate`)
                  }}</span>
                  <span>{{ $t(`mining.dayPower`) }} MH/s</span>
                  <span :title="$t(`mining.profit`)">{{
                    $t(`mining.profit`)
                  }}</span>
                  <!-- <span >{{$t(`mining.remarks`)}}
                     
                        <div class="boxTitle"  :data-title="$t(`mining.mature`)">
                          <i style="font-size:1.3em" class="iconfont icon-kongxinwenhao"></i>
                        </div>   

                      </span> -->
                </li>

                <li
                  class="currency-list"
                  v-for="(item, index) in HistoryIncomeData"
                  :key="index"
                >
                  <span :title="item.date">{{ item.date }}</span>
                  <span :title="item.mhs">{{ item.mhs }} </span>
                  <span :title="item.amount"
                    >{{ item.amount }}
                    <span
                      style="
                        color: rgba(0, 0, 0, 0.5);
                        text-transform: capitalize;
                      "
                      >{{ accountItem.coin }}</span
                    ></span
                  >
                  <!-- <span :title="item.comment">{{item.comment }}</span> -->
                </li>
              </ul>
              <!-- <el-pagination
                @size-change="handleSizeChangeIncome"
                @current-change="handleCurrentChangeIncome"
                :current-page.sync="currentPageIncome"
                :page-sizes="[10, 50, 100, 400]"
                :page-size="IncomeParams.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="HistoryIncomeTotal"
              >
              </el-pagination> -->

              <el-pagination
              class="pageBox"
                @size-change="handleSizeChangeIncome"
                @current-change="handleCurrentChangeIncome"             
                :current-page.sync="currentPageIncome"
                 :page-sizes="[10, 50, 100, 400]"
                  :page-size="IncomeParams.limit"
                layout="sizes, prev, pager, next"
                :total="HistoryIncomeTotal"
              >
              </el-pagination>


            </div>
          </section>

          <section class="payment" v-if="activeName2 == `payment`">
            <div class="belowTable">

              <div class="table-title">
                <span :title="$t(`mining.withdrawalTime`)">{{
                    $t(`mining.withdrawalTime`)
                  }}</span>
                  <!-- <span :title="$t(`mining.withdrawalAddress`)">{{
                    $t(`mining.withdrawalAddress`)
                  }}</span> -->
                  <span :title="$t(`mining.withdrawalAmount`)">{{
                    $t(`mining.withdrawalAmount`)
                  }}</span>
                  <span :title="$t(`mining.paymentStatus`)">{{
                    $t(`mining.paymentStatus`)
                  }}</span>

              </div>             

              <el-collapse >     
                    <el-collapse-item class="collapseItem" :name="index"   v-for="(item,index) in HistoryOutcomeData"  :key="item.txid">
                        <template slot="title">
                            <div class="paymentCollapseTitle">
                              <span >{{  item.date }}</span>
                              <span>{{ item.amount }}</span>
                              <span>{{ $t(handelPayment(item.status)) }}</span>
                            </div>
                      </template>

                      <div class="dropDownContent">
                        <div v-if="item.address">
                          <p>{{$t(`mining.withdrawalAddress`) }}</p>
                    
                 
                          <p >{{item.address}}  <span class="copy" @click="clickCopy(item.address)">{{$t(`personal.copy`)}}</span></p>
                        </div>
                        <div v-if="item.txid">
                          <p>Txid</p>
                          <p > <span style="cursor: pointer;text-decoration:underline;color:#433278" @click="handelTxid(item.txid)"> {{item.txid}} </span> <span @click="clickCopy(item.txid)"  class="copy">{{$t(`personal.copy`)}}</span></p>
                        </div>
                      </div>

                 
                    </el-collapse-item>
                  
              </el-collapse>

              <el-pagination 
               style="margin-top: 10px;margin-bottom: 10px;"            
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
               :page-sizes="[10, 50, 100, 400]"
               :page-size="OutcomeParams.limit"
              layout="sizes, prev, pager, next"
              :total="HistoryOutcomeTotal">
            </el-pagination>

            </div>
          </section>
        </section>
      </div>

    </section>


    <section class="miningAccount" v-else v-loading="jurisdictionLoading"  :element-loading-text="loadingText">
       <div class="accountInformation">
          <img :src="jurisdiction.img" alt="coin" loading="lazy">
          <span class="coin">{{jurisdiction.coin}}  </span>
          <i class="iconfont icon-youjiantou"></i>
          <span  class="ma"> {{jurisdiction.account}}</span>
       </div>

      <div class="profitBox">
        <div class="profitTop">
          <div class="box">

            <span>{{$t(`mining.totalRevenue`)}}             
              <!-- <div class="boxTitle" :data-title="$t(`mining.totalRevenueTips`)">
                 <img  src="../../assets/img/profit.svg" alt="">
              </div> -->
            
            </span>
            <span class="text">{{ MinerAccountData.totalProfit }}</span>
          </div>
          <div class="box">
            <span>{{$t(`mining.totalExpenditure`)}}
              
              <!-- <div class="boxTitle" :data-title="$t(`mining.totalExpenditureTips`)">
                 <img  src="../../assets/img/profit.svg" alt="">
              </div>               -->
             </span>
            <span class="text">{{ MinerAccountData.expend }}</span>
          </div>
          <div class="box">
            <span>{{$t(`mining.yesterdaySEarnings`)}} 
              
              <!-- <div class="boxTitle" :data-title="$t(`mining.yesterdaySEarningsTips`)">
                 <img  src="../../assets/img/profit.svg" alt="">
              </div>                  -->
             </span>
            <span class="text">{{ MinerAccountData.preProfit }}</span>
          </div>
          <div class="box">
            <span>{{$t(`mining.diggedToday`)}} 
              <div class="boxTitle" :data-title="$t(`mining.diggedTodayTips`)">
                 <img  src="../../assets/img/profit.svg" alt="profit" loading="lazy">
              </div>   
            </span>
            <span class="text">{{ MinerAccountData.todayPorfit }}</span>
          </div>
          <div class="box">
            <!-- ({{$t(`mining.Withdrawable`)}}) -->
            <span class="paymentSettings">{{$t(`mining.accountBalance`)}}

              <div class="boxTitle" :data-title="$t(`mining.balanceReminder`)">
                 <img  src="../../assets/img/profit.svg" alt="profit" loading="lazy">
              </div>   

            </span>
            <!-- ({{ MinerAccountData.withdrawable ||0 }}) -->
            <span class="text">{{ MinerAccountData.balance }} </span>
          </div>
       
        </div>
    
        
        <div class="profitBtm"  v-loading="powerChartLoading">
          <!-- <div class="left">
            <div class="box">
              <span>帐户余额 (SC)</span>
              <span class="text">{{ MinerAccountData.balance }}</span>
            </div>
            <div class="bth">
              <el-button>付款设置</el-button>
            </div>
          </div> -->
          <div class="right">
            <div class="intervalBox">
              <div class="title">{{$t(`mining.algorithmicDiagram`)}}</div>
              <div class="times">
              <span :class="{ 'timeActive': timeActive== item.value}"  @click="handleInterval(item.value)" v-for="item in intervalList" :key="item.value">{{ $t(item.label) }}</span>
            </div>
            </div>
               <div id="powerChart" style="width:100%; height: 100%;padding: 0;"></div>
          </div>
        </div>
      </div>

     

      
      <div class="top2Box" v-loading="barChartLoading">
        <div class="lineBOX">
          <div class="intervalBox">
            <div class="title">{{$t(`mining.computingPower`)}}</div>
            <div class="times">
            <span :class="{ 'timeActive': barActive== item.value}"  @click="distributionInterval(item.value)" v-for="item in AccountPowerDistributionintervalList" :key="item.value">{{ $t(item.label) }}</span>
            </div>
          </div>
              <div id="barChart"  style="width: 100%; height: 90%;padding: 0;"></div>
        </div>
        
      </div>
      <div class="top3Box">
          <section class="tabPageBox">
            <div class="tabPageTitle">
              <div class="TitleS minerTitle " @click="handleClick2(`power`)"><span class="trapezoid " :class="{ 'activeHeadlines': activeName2 == `power` }"> <span>{{ $t(`mining.miner`) }}</span></span></div>
              <div class="TitleS profitTitle" v-show="profitShow" @click="handleClick2(`miningMachine`)"><span class="trapezoid " :class="{ 'activeHeadlines': activeName2 == `miningMachine` }"> <span>{{ $t(`mining.profit`) }}</span></span></div>
              <div class="TitleS paymentTitle"  v-show="paymentShow"  @click="handleClick2(`payment`)"><span class="trapezoid " :class="{ 'activeHeadlines': activeName2 == `payment` }"> <span>{{ $t(`mining.payment`) }}</span></span></div>
            </div>

            <section v-if="activeName2 == `power`" class="page" v-loading="MinerListLoading" >
              <div class="minerTitleBox">
                <div class="TitleOnLine">
                <span @click="onlineStatus(`all`)"><span class="circularDots3 " :class="{ 'activeCircular': sunTabActiveName == `all` }" ></span>  {{$t(`mining.all`)}} {{ MinerListData.all }}</span>
                <span @click="onlineStatus(`onLine`)"><div class="circularDots2" :class="{ 'activeCircular': sunTabActiveName == `onLine` }"></div> {{$t(`mining.onLine`)}} {{ MinerListData.online }}</span>
                <span @click="onlineStatus(`off-line`)"> <div class="circularDots2" :class="{ 'activeCircular': sunTabActiveName == `off-line` }"></div> {{$t(`mining.offLine`)}} {{ MinerListData.offline }}</span>
                </div>
                <div   class="searchBox">
                    <input type="text" class="inout"  v-model="search" :placeholder="$t(`personal.pleaseEnter2`)">
                    <i  @click="handelSearch" class="el-icon-search"></i>
                  
                  </div>
              </div>

             

              <div class="publicBox all" v-if="sunTabActiveName == `all`">
                <div class="TitleAll" style="font-weight: 600;">
                   <span> {{$t(`mining.miner`)}}</span>
                  <span>{{$t(`mining.Minutes`)}} MH/s <i  @click="handleSort(`30m`)" class="iconfont icon-paixu sort"></i></span>
                  <span>{{$t(`mining.dayPower`)}} MH/s  <i @click="handleSort(`24h`)" class="iconfont icon-paixu sort"></i></span>
                  <!-- <span>{{$t(`mining.refusalRate`)}}</span> -->
                  <span>{{$t(`mining.submitTime`)}}</span>
                  <span>{{$t(`mining.state`)}}</span>
                 
                 </div> 
                 <div class="totalTitleAll">
                      <span><div class="circularDots"></div> {{ $t(`mining.total`) }}</span>
                      <span>{{MinerListData.rate}} </span>
                      <span>{{MinerListData.dailyRate}} </span>
                      <span>{{MinerListData.submit}} </span>
                      <span></span>
                    </div>
            
                  <el-collapse v-model="Accordion" accordion  style=" max-height:800PX;overflow: auto;">

                      <div  v-for="(item, index) in sortedMinerListTableData"  :key="item.miner"  :class="`item-${index % 2 === 0 ? 'even' : 'odd'}`">
                        <el-collapse-item :name="item.id" @click.native="handelMiniOffLine(item.id, item.miner)"   >
                        <template slot="title">
                          <div class="accordionTitleAll">
                            <span :class="{ 'activeState' :item.status ==`2` }"> <div v-if="item.status ==`1`" class="circularDotsOnLine"></div> <div v-if="item.status ==`2`" class="circularDotsOffLine" ></div> {{item.miner}}</span>
                            <span>{{item.rate}}</span>
                            <span>{{item.dailyRate}}</span>
                            <!-- <span>{{item.reject}}</span> -->
                            <span :title="item.submit" class="offlineTime"  :class="{ 'activeState' :item.status ==`2` }"> <span>{{item.submit}} </span> <span :title="handelTimeInterval(item.offline)" v-if="item.status ==`2`" class="timeTips">{{ handelTimeInterval(item.offline) }}</span> </span>
                            <span :class="{ 'activeState' :item.status ==`2` }">{{ $t(handelStateList(item.status)) }} </span>
                          </div>
                        </template>
                        <p class="chartTitle">{{$t(`mining.miner`)}}{{item.miner  }}&nbsp; {{$t(`mining.power24H`)}}</p>
                        <div :id="'SmallOff' + item.id" v-loading ="miniLoading" style="width:100%; height: 300PX;"></div>
                      </el-collapse-item>
                      </div>
                    
                    </el-collapse>


              </div>

              <div class="publicBox onLine" v-else-if="sunTabActiveName == `onLine`" >
                <div class="Title" style="font-weight: 600;">
                   <span> {{$t(`mining.miner`)}}</span>
                  <span>{{$t(`mining.Minutes`)}} MH/s <i  @click="handleSort(`30m`)" class="iconfont icon-paixu sort"></i></span>
                  <span>{{$t(`mining.dayPower`)}} MH/s <i @click="handleSort(`24h`)" class="iconfont icon-paixu sort"></i></span>
                  <!-- <span>{{$t(`mining.refusalRate`)}}</span> -->
                  <span>{{$t(`mining.submitTime`)}}</span>
                 </div>   
                 <div class="totalTitle">
                      <span><div class="circularDots"></div> {{ $t(`mining.total`) }} </span>
                      <span>{{MinerListData.rate}} </span>
                      <span>{{MinerListData.dailyRate}} </span>
                      <span>{{MinerListData.submit}} </span>
                    </div>  
                 <el-collapse  v-model="Accordion" accordion  style=" max-height:800PX;overflow: auto;">
                            <div  v-for="(item, index) in MinerListTableData" :key="sunTabActiveName+item.miner" :class="`item-${index % 2 == 0 ? 'even' : 'odd'}`">
                              <el-collapse-item :name="item.id" @click.native="handelOnLineMiniChart(item.id, item.miner)"  >
                                <template slot="title">
                                  <div class="accordionTitle">
                                <span><div class="circularDotsOnLine"></div> {{item.miner}}</span>
                                <span>{{item.rate}}</span>
                                <span>{{item.dailyRate}}</span>
                                <!-- <span>{{item.reject}}</span> -->
                                <span>{{item.submit}}</span>
                                </div>
                                </template>
                                <p class="chartTitle">  {{$t(`mining.miner`)}}{{item.miner  }}&nbsp;{{$t(`mining.power24H`)}}</p>
                                <div :id="'Small' + item.id" v-loading ="miniLoading" style="width:100%; height: 300PX;"></div>
                              </el-collapse-item>                           
                        </div>
                  </el-collapse>
              </div>

              <div class="publicBox off-line" v-else-if="sunTabActiveName == `off-line`">
                <div class="Title" style="font-weight: 600;">
               
                   <span> {{$t(`mining.miner`)}}</span>
                  <span>{{$t(`mining.Minutes`)}} MH/s <i  @click="handleSort(`30m`)" class="iconfont icon-paixu sort"></i></span>
                  <span>{{$t(`mining.dayPower`)}} MH/s <i @click="handleSort(`24h`)" class="iconfont icon-paixu sort"></i></span>
                  <!-- <span>{{$t(`mining.refusalRate`)}}</span> -->
                  <span>{{$t(`mining.submitTime`)}}</span>
                 </div>     
                 <div class="totalTitle">
                      <span><div class="circularDots"></div> {{ $t(`mining.total`) }} </span>
                      <span>{{MinerListData.rate}} </span>
                      <span>{{MinerListData.dailyRate}} </span>
                      <span>{{MinerListData.submit}} </span>
                    </div>
                 <el-collapse v-model="Accordion" accordion  style=" max-height:800PX;overflow: auto;">
                          <div v-for="(item, index) in MinerListTableData"  :key="item.miner" :class="`item-${index % 2 === 0 ? 'even' : 'odd'}`">
                          <el-collapse-item :name="item.id" @click.native="handelMiniOffLine(item.id, item.miner)"   >
                          
                            <template slot="title">
                              <div class="accordionTitle">
                                <span :class="{ 'activeState' :item.status ==`2` }"><div class="circularDotsOffLine"></div> {{item.miner}}</span>
                                <span>{{item.rate}}</span>
                             <span>{{item.dailyRate}}</span>
                             <!-- <span>{{item.reject}}</span> -->
                             <span :title="item.submit" class="offlineTime"  :class="{ 'activeState' :item.status ==`2` }"> <span>{{item.submit}} </span> <span :title="handelTimeInterval(item.offline)" v-if="item.status ==`2`" class="timeTips">{{ handelTimeInterval(item.offline) }}</span> </span>
                            </div>
                            </template>
                            <p class="chartTitle">{{$t(`mining.miner`)}}{{item.miner  }}&nbsp;{{$t(`mining.power24H`)}}</p>
                            <div :id="'SmallOff' + item.id" v-loading ="miniLoading" style="width:100%; height: 300PX;"></div>
                          </el-collapse-item>
                        </div>
                        
                  </el-collapse>
             
              </div>
              <el-pagination
                    class="minerPagination"
                    @size-change="handleSizeMiner"
                    @current-change="handleCurrentMiner"
                    :current-page.sync="currentPageMiner"
                    :page-sizes="[50, 100, 200, 400]"
                    :page-size=MinerListParams.limit
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="minerTotal"
                  >
                </el-pagination>
            </section>

            <section class="miningMachine" v-if="activeName2 == `miningMachine`">              
              <div class="belowTable">
                  <ul>
                    <li class="table-title">
                      <span :title="$t(`mining.settlementDate`)">{{$t(`mining.settlementDate`)}}</span>
                      <span>{{$t(`mining.dayPower`)}} MH/s</span>
                      <span :title="$t(`mining.profit`)">{{$t(`mining.profit`)}}</span>
                      <!-- <span >{{$t(`mining.remarks`)}}
                     
                        <div class="boxTitle"  :data-title="$t(`mining.mature`)">
                          <i style="font-size:1.3em" class="iconfont icon-kongxinwenhao"></i>
                        </div>   

                      </span> -->
                    </li>
                 
                    <li class="currency-list" v-for="(item,index) in HistoryIncomeData" :key="index">
                  
                       <span :title="item.date">{{item.date }}</span>
                       <span :title="item.mhs">{{item.mhs }} </span>
                      <span :title="item.amount">{{item.amount }}   <span style="color: rgba(0,0,0,0.5);text-transform: capitalize;">{{jurisdiction.coin.includes(`dgb`)?`dgb`:jurisdiction.coin}}</span></span>
                      <!-- <span :title="item.comment">{{item.comment }}</span> -->
                    </li>
                 
                   
                  </ul>
                  <el-pagination
                    @size-change="handleSizeChangeIncome"
                    @current-change="handleCurrentChangeIncome"
                    :current-page.sync="currentPageIncome"
                    :page-sizes="[10, 50, 100, 400]"
                    :page-size=IncomeParams.limit
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="HistoryIncomeTotal"
                  >
                  </el-pagination>
             </div>

            </section>

            <section class="payment" v-if="activeName2 == `payment`">
              <div class="belowTable">
                  <ul>
                    <li class="table-title">
                      <span :title="$t(`mining.withdrawalTime`)">{{$t(`mining.withdrawalTime`)}}</span>
                      <span :title="$t(`mining.withdrawalAddress`)">{{$t(`mining.withdrawalAddress`)}}</span>
                      <!-- <span :title="$t(`mining.currency`)">{{$t(`mining.currency`)}}</span> -->
                      <span :title="$t(`mining.withdrawalAmount`)">{{$t(`mining.withdrawalAmount`)}}</span>
                      <span :title="$t(`mining.paymentStatus`)">{{$t(`mining.paymentStatus`)}}</span>
                    </li>
                    <li class="currency-list" v-for="item in HistoryOutcomeData"  :key="item.txid">
                      <span :title=" item.date">{{ item.date }}</span>
                      <span style="text-align: left;" :title=" item.address">{{ item.address }}</span>
                      <!-- <span :title=" item.coin">{{ item.coin }}</span> -->
                      <span  :title=" item.amount">{{ item.amount }}  <span style="color: rgba(0,0,0,0.5);text-transform: capitalize;">{{jurisdiction.coin.includes(`dgb`)?`dgb`:jurisdiction.coin}}</span></span>
                      
                      <span class="txidBox">
                        <span style="font-size: 0.8rem;">{{$t(handelPayment(item.status)) }}  </span>
                        <span class="txid" v-if="item.status !== 0">
                        
                        <el-popover placement="top" width="300" trigger="hover">
                        
                          <span :id="`id${item.txid}`" ref="txidRef">{{ item.txid }}</span>
                          <div style="text-align: right; margin: 0">
                            <el-button  size="mini" style="border-radius:5PX" @click="copyTxid(item.txid)">{{$t(`personal.copy`)}}</el-button>
                          </div>
                          <div slot="reference" @click="handelTxid(item.txid)" >Txid</div>
                        </el-popover>
                      </span>
                        
                        </span>
                    </li>
                  
                  </ul>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 50, 100, 400]"
                    :page-size=OutcomeParams.limit
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="HistoryOutcomeTotal"
                  >
                  </el-pagination>
              </div>

            </section>

          </section>






      </div>
    

    </section>

  </div>
</template>

<script>
import Index from "./index";
import Tooltip from "../../components/promptBox.vue";//引入组件
export default {
  components: {
    Tooltip,
  },
  mixins: [Index],
 
}
</script>
<style   scoped lang="scss">

  // 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  // 隐藏滚动条
  ::-webkit-scrollbar {
  width: 0PX !important; /* 宽度 */
  height: 0px; /* 高度 */

}
 
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #D2C3E9; /* 滑块颜色 */
  border-radius: 20PX; /* 圆角 */
}
 
/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #f0f0f0; /* 轨道颜色 */
}

.accountInformation {

  width: 100% !important;
  height: 33px !important;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 61px !important;
  left: 0;
  display: flex;
  align-items: center;
  padding: 1% 5%;
  z-index: 2001;
  line-height: 33px !important;

  img {
    width: 18px !important;
  }
  i {
    color: #fff;
    font-size: 0.95rem !important;
    margin-left: 10px;
  }
  .coin {
    margin-left: 5px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    font-size: 0.8rem !important;
  }
  .ma {
    font-weight: normal !important;
    color: #fff;
    margin-left: 10px;
    font-size: 0.9rem !important;
  }
}
  .profitTop {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 40px;
    .box {
      width: 45%;
      height: 80px;
      background: #fff;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: space-around;
      padding: 8px;
      font-size: 0.9rem;
      border-radius: 5px;
      box-shadow: 0px 0px 3px 1px #ccc;
    }
    .accountBalance {
      width: 95%;
      display: flex;
      justify-content: space-between;
      padding: 15px 15px;

      background: #fff;
      margin: 0 auto;
      margin-top: 18px;
      border-radius: 5px;
      box-shadow: 0px 0px 3px 1px #ccc;

      .box2 {
        display: flex;
        flex-direction: column;
        align-items: left;
        font-size: 0.9rem;
      }
      .el-button {
        background: #661fff;
        color: #fff;
      }
    }
  }
  .profitBtm2 {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    margin-top: 18px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 1px #ccc;
    padding: 8px;
    font-size: 0.95rem;
    background: #fff;
    .right {
      width: 100%;
      height: 95%;
      background: #fff;
      // padding: 10px 10px;
      transition: all 0.2s linear;
      .intervalBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 10px;
        
        .title {
          // width: 10%;
          text-align: center;
          font-size: 0.95rem;
          color: rgba(0, 0, 0, 0.8);
        }
        .times {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 20px;
          padding: 1px 1px;
          border: 1px solid #5721e4;
          cursor: pointer;
          font-size: 0.8rem;
          margin-top: 5px;
          span {
            min-width: 55px;
            text-align: center;

            border-radius: 20px;
            margin: 0;
          
          }
        }
        .timeActive {
          background: #7245e8;
          color: #fff;
        }
      }
    }
  }
  .barBox{
    width: 95%;
    height: 400px;
    margin: 0 auto;
    margin-top: 18px;
    border-radius: 5px;
    box-shadow: 0px 0px 3px 1px #ccc;
    // padding: 8px;
    font-size: 0.95rem;
    background: #fff;
    .lineBOX {
    // background: #0BB7BF;
    width: 100%;
    height: 98%;
    padding: 10px 20px;
    // box-shadow: 0px 0px 10px 3px #ccc;
    transition: all 0.2s linear;
  

    .intervalBox {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
    
      font-size: 0.9rem;
      .title {
        // width: 10%;
        text-align: left;
        font-size: 0.95rem;
        color: rgba(0, 0, 0, 0.8);

      }
      .timesBox{
        width: 100%;
        text-align: right;
        display: flex;
        justify-content: right;
        .times2 {
          max-width: 47%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 20px;
        padding: 1px 1px;
        border: 1px solid #5721e4;
        font-size: 0.8rem;
    
       

        span {
          // width: 49%;
          text-align: center;
          padding: 0px 15px;
          border-radius: 20px;
          margin: 0;
        }
      }
      }
     
      .timeActive {
        background: #7245e8;
        color: #fff;
      }
    }
  }
  }

  .searchBox {
          width: 92%;
          // position: absolute;
          // right: 0;
          // top: 0PX;
          border: 2px solid #641fff;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          //  background: #0BB7BF;
          border-radius: 25px;
          overflow: hidden;
          margin: 0 auto;
          margin-top: 25px;
          .inout {
            border: none;
            outline: none;
            padding: 0px 10px;
            background: transparent;
          }
          i {
            width: 15%;
            height: 101%;
            background: #641fff;
            color: #fff;
            font-size: 1.2em;
            line-height: 25px;
            text-align: center;
          }
        }
  .top3Box {
  margin-top: 8px !important;
  width: 100%;
  display: flex;
  justify-content: center;
  // margin-bottom: 1%;
  flex-direction: column;
  align-items: center;
  
  padding: 0px 1%;
  padding-bottom: 5%;
  font-size: 0.95rem;

  .tabPageBox {
    width: 98% !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 10px;


    .activeHeadlines {
      background: #651efe !important;
      color: #fff;
    }
    .tabPageTitle {
      width: 100% !important;
      height: 60px;
     
      display: flex;
      align-items: end;
      position: relative;
        padding: 0 !important;
      font-weight: 600;
      .TitleS {
        position: relative;
        // border-radius: 300PX 260PX 0PX  0PX;
        // overflow: hidden;
        // clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);
        display: inline-block;
        filter: drop-shadow(0px -5px 10px rgba(0, 0, 0, 0.3)); /* 添加阴影 */
        // background: #0BB7BF !important;
        cursor: pointer;
        margin: 0;

        background: transparent;
        .trapezoid {
          display: inline-block;

          width: 130px !important;
          height: 40px;
          background: #f9bbd0;
          clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .TitleS:hover {
        font-weight: bold;
      }
      .ces {
        width: 10%;
        height: 60px;
        position: absolute;
        left: 50%;
        // background: #0BB7BF;
        clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);
        filter: drop-shadow(20px 20px 10px 10px rgba(0, 0, 0, 0.6)) !important;
      }
      .minerTitle {
        z-index: 99;
      }
      .profitTitle {
        position: absolute;
        left: -37px !important;
        z-index: 98;
        margin: 0 !important;
       
      }
      .paymentTitle {
        position: absolute;
        left: -72px !important;
        z-index: 97;
        margin: 0 !important;
      }
    }
    .page {
      width: 100%;
      min-height: 380px !important;
      // background: #0BB7BF;
      box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1) !important;
      z-index: 999;
      margin-top: -3px;
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
      .publicBox {
        min-height: 300px !important;
      }
      .minerPagination {
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 30px;
      }
      .minerTitleBox {
        width: 100%;
        height: 40px;
        background: #efefef;
        padding: 0px !important;
       
       
        .TitleOnLine {
          width: 100% !important;
          font-weight: 600;
          display: flex;
          justify-content:left;
          span {
            // width: 20%;
            display: inline-block;
            cursor: pointer;
            margin-left: 18 !important;
            padding: 0 !important;
            font-size: 0.9rem;
           
          
          }
        }
       
      }
      .TitleAll{
        display:flex;
        width: 100% !important;
        padding: 0px !important;
        padding-left: 5px !important;
        border-radius: 0px !important;
        span:nth-of-type(1){
          width: 19% !important;
          text-align: center;
        }
        span:nth-of-type(2){
          width: 38% !important;
        }
        span:nth-of-type(3){
          width: 43% !important;
        }
        span{
         
          font-size: 0.8rem;
          text-align: left;
        }

      }
    }
  }

  .elTabs3 {
    width: 70%;
    // font-size: 1em;
    position: relative;
    .searchBox {
      width: 25%;
      position: absolute;
      right: 0;
      top: -5px;
      z-index: 99999;
      border: 2px solid #641fff;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      //  background: #0BB7BF;
      border-radius: 25px;
      overflow: hidden;
      .ipt {
        border: none;
        outline: none;
        padding: 0px 10px;
      }
      i {
        width: 15%;
        height: 101%;
        background: #641fff;
        color: #fff;
        font-size: 1.2em;
        line-height: 25px;
        text-align: center;
      }
    }
    .minerTabs {
      width: 98%;
      margin-left: 2%;
      margin-top: 1%;
      min-height: 600px;
    }
  }

  .accordionTitle {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 20px;

    span {
      width: calc(100% / 4);
      // background: #0BB7BF;
      text-align: left;
    }
  }

  .accordionTitleAll {
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px !important;
    padding-left: 5px !important;
    span:nth-of-type(1){
          width: 25% !important;
        }
        span:nth-of-type(2){
          width: 35% !important;
        }
        span:nth-of-type(3){
          width: 40% !important;
        }
        span{
         
          font-size: 0.8rem;
          text-align: center;
          padding-left: 5px !important;
          overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
        }
   
  }

  .Title {
    height: 60px;
    background: #d2c3ea;
    border-radius: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 30px;
    span {
      width: 24.5%;
      color: #433278;
      text-align: left;
    }
  }
  .TitleAll {
    height: 60px;
    background: #d2c3ea;
    border-radius: 5px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 35px;
    span {
      width: calc(100% / 5);
      color: #433278;
      text-align: left;
    }
  }


  .totalTitleAll {
    height: 40px !important;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px !important;
    background: #efefef;
    padding-left: 5px !important;
    span:nth-of-type(1){
          width: 25% !important;
        }
        span:nth-of-type(2){
          width: 35% !important;
        }
        span:nth-of-type(3){
          width: 40% !important;
        }
        span{
         
          font-size: 0.8rem;
          text-align: center;
          padding-left: 5px !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

   
  }

  .totalTitle {
    height: 60px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 20px;
    background: #efefef;
    span {
      width: calc(97% / 4);

      text-align: left;
      // background: #0BB7BF;
    }
  }
  .miningMachine{
    background: #fff;
    box-shadow: 0px 0px  3px 1px #ccc;
    overflow: hidden;
    border-radius: 5px;
    .belowTable{
      border-radius: 5px !important;
      width: 100% !important;
      margin-bottom: 20px !important;
    }

  }

  .payment{
    .belowTable{
      box-shadow: 0px 0px 3px 1px #ccc;

      
      .table-title{
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #D2C3EA;
        color: #433278;
        font-weight: 600;
        width: 100%;
        font-size: 0.8rem !important;
        span{
          display: inline-block;
        }
        span:nth-of-type(1){
          width: 35%;
          padding-left: 10px;
        }
        span:nth-of-type(2){
          width: 35%;
          text-align: left;
        }
        span:nth-of-type(3){
          width: 27%;
          text-align: center;
         
        }
      }
      .el-collapse{
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
      }
      .paymentCollapseTitle{
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
        span{
          display: inline-block;
        }
        span:nth-of-type(1){
          width: 35%;
          padding-left: 10px;
        }
        span:nth-of-type(2){
          width: 32%;
          text-align: center;
        }
        span:nth-of-type(3){
          width: 27%;
          text-align:right;
        }
      }
      .dropDownContent{
        width: 100%;
        padding: 0px 10px;
        word-wrap: break-word;
        div{
          margin-top: 8px;
        }
      }
      .copy{
        padding: 0px 5px;
        display: inline-block;
        cursor: pointer;
        border:1px solid #D1C2E9;
        border-radius: 5px;
        margin-left: 10px;
        font-size: 0.8rem;
      }
    }


    
  }


}

.el-collapse{
  max-height: 500px !important;
  overflow-y: auto;
}
.table-item{
  display: flex;
  height: 59px;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  // background: palegoldenrod;
  padding: 8px;
  div{
   width: 50%;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
   p{
    text-align: left;
   }
  }
}

.table-itemOn{
  display: flex;
  height: 59px;
  width: 100%;
  align-items: center;
  justify-content: left;
  // background: palegoldenrod;
  padding: 8px;
  div{
   width: 50%;
   display: flex;
   align-items: left;
   flex-direction: column;
   justify-content: space-around;
   height: 100%;
   p{
    text-align: left;
   }
  }
}


.chartTitle {
  padding-left: 3%;
  font-weight: 600;
  color: #7245e8;
  color: rgba(0, 0, 0, 0.6);

  font-size: 0.9rem !important;
}
::v-deep .el-collapse-item__header{
  height: 45px !important;
}

.belowTable {
  width: 99%;
  display: flex;
  // justify-content: center;
  flex-direction: column;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  margin-top: -1px;
  margin-bottom: 50px;

  ul {
    width: 100%;
    min-height: 200px;
    max-height: 690px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
    margin: 0;
    margin-bottom: 50px;
    

    .table-title {
      position: sticky;
      top: 0px;
      background: #d2c3ea;
      padding: 0px 5px !important;
      color: #433278;
      font-weight: 600;
      // background: #0BB7BF;  
     height: 50px !important; 
    }
    li {
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 40px !important;
      background: #f8f8fa;
      span {
        width: calc(100% / 3) !important;
        font-size: 0.8rem !important;
        text-align: center;
        word-wrap: break-word; /* 允许在单词内换行 */
        overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
        white-space: normal; /* 允许换行 */
      }
    }
    li:nth-child(even) {
      background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
      background: #f8f8fa;
    }

    .currency-list {
      background: #efefef;
      // box-shadow: 0PX 0PX 2PX 1PX rgba(0, 0, 0, 0.02);
      // margin-top: 1%;
      padding: 0 !important;
      background: #f8f8fa;
      margin-top: 5px !important;
      border: 1px solid #efefef;
      color: rgba(0, 0, 0, 0.9);
      .txidBox {
        display: flex;
        justify-content: left;
        box-sizing: border-box;
        // padding-right: 35px;
        span:nth-of-type(1) {
          width: 50%;
          text-align: right;
          display: inline-block;
          box-sizing: border-box;
          margin-right: 10px;
        }
      }
      .txid {
        border-left: 2px solid rgba(0, 0, 0, 0.1);
        margin-left: 5px;
      }

      .txid:hover {
        cursor: pointer;
        color: #2889fc;
        font-weight: 600;
      }
    }
  }
}


::v-deep .el-pager li{
   min-width: 19px;
  
  }

  ::v-deep .el-pagination .el-select .el-input{
    margin: 0;
  }
  ::v-deep .el-pagination .btn-next{
    padding: 0px !important;
    min-width: auto;
  }

 
}





 .activeState{
  color: red !important;
 }
  /*修改提示框*/
.boxTitle[data-title] {
  position: relative;
  display: inline-block;
  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }
  // 背景的样式 位置 字体等
  &:after {
    min-width: 180PX;
    max-width: 300PX;
    content: attr(data-title);
    position: absolute;
    padding: 5PX 10PX;
    right: 28PX; 
    // bottom: -1.5em;
    border-radius: 4PX;
    color: rgba(255,255,255,0.8);
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4PX rgba(0, 0, 0, 0.16);
    font-size: 0.8rem;
    // white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    z-index: 999;
   

  }
}
::v-deep .el-collapse-item__header{
  background: transparent;
  height: 60PX;
}

.item-even {
  background-color: #fff; /* 偶数行背景色 */
}
.item-odd {
  background-color: #EFEFEF; /* 奇数行背景色 */
}
// .el-collapse-item:nth-child(even){
//   background: #0BB7BF;
// }
// ::v-deep .el-collapse-item__header{
//   background: #0BB7BF !important;
// }

// .el-collapse-item__header:nth-child(odd) {
//     background-color: #ff0000; /* 奇数项背景色 */
// }


  .miningAccount{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // background: #F5F9FD;
    background: #fff;
    background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: 0% -8%;
    // background-position: 30% -9%;
    padding-top: 60PX;
  }
 
  .accountInformation{
    width: 100%;
    height: 30PX;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 8%;
    left: 0;
    display: flex;
    align-items: center;
    padding: 1% 5%;
    z-index: 2001;

    img{
     width: 23PX;
    }
    i{
      color: #fff;
      font-size: 0.9rem;
      margin-left: 10PX;
    
    }
    .coin{
      margin-left: 5PX;
      font-weight: 600;
      color: #fff;
      text-transform: capitalize;
    }
    .ma{
      font-weight: 600;
      color: #fff;
      margin-left: 10PX;
      font-size: 0.9rem;
    }


  }
 
  .DropDownChart{
    width: 100%;
    height: 500PX;
  }
  .circularDots2{
          width: 11PX !important;
          height: 11PX !important;
          border-radius: 50%;
          display: inline-block;
          border:2PX solid #ccc;
   }
   .circularDots3.circularDots3{
          display: inline-block;
          width: 11PX !important;
          height: 11PX !important;
          margin: 0;
          padding: 0 !important;
          border-radius: 50%;
          display: inline-block;
          border:2PX solid #ccc;
   }
   .activeCircular{
      width: 11PX !important;
      height: 11PX !important;
      border-radius: 50%;
      border: none !important;
      background: radial-gradient(circle at center, #EBACE3, #9754F1);
    }
 
  .chartTitle{
    padding-left: 3%;
    font-size: 1.3em;
    font-weight: 600;
    color: #7245E8;
    color: rgba(0,0,0,0.6);
   
    
  }
  .circularDots{
      display: inline-block;
      width: 10PX;
      // background: #7592e9;
      // border:2PX solid #CCC;
      height: 10PX;
      border-radius: 50%;
      background: radial-gradient(circle at center, #EBACE3, #9754F1);
    }
 
    .circularDotsOnLine{
      display: inline-block;
      width: 8PX;
      background: #17CAC7;
      height: 8PX;
      border-radius: 50%;
    }
    .circularDotsOffLine{
      display: inline-block;
      width: 8PX;
      background: #FF6565;
      height: 8PX;
      border-radius: 50%;
    }

  .profitBox{
    width: 70%;
    min-height: 650PX;
    // background: #8484BF;
    padding: 20PX 1%;
    .paymentSettingBth{
      width: 100%;
      text-align: right;
       .el-button{
        background: #7245E8;
        color: #fff;
        padding: 13PX 40PX;
        border-radius: 8PX;
       }
      
      }
    .profitTop{
      // background: paleturquoise;
      display: flex;
      min-height: 20%;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto ;
      flex-wrap: wrap;
     
      .box{
        width: 230px;
        height: 100px;
        background: #fff;
        box-shadow: 0PX 0PX 10PX 1PX #CCC;
        border-radius: 3%;
        transition: all 0.2s linear;
        padding:0;
       font-size: 0.95rem;
       margin: 5px;
       
       
        .paymentSettings{
          display: flex;
          // justify-content: space-between;
       
          // background: gold;
          span{
            width: 45%;           
            background: #661FFF;
            text-align: center;
            color: #fff;
            border-radius: 5PX;
            cursor: pointer;
            font-size: 0.8em;
            text-align: center;
            // padding: 0PX 2PX;
            padding: 0;
            display: inline-block;
            line-height: 25PX;
        
          
          }
          span:hover{
            background: #7A50E7;
            color: #FFF;

          }
        }
        span{
          display: inline-block;
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          padding: 0PX 20PX;
          span{
            width: 8%;
            
          }
          img{
              width: 18PX;
              margin-left: 5PX;
              
            }
        
           
            
        }
        .text{
          justify-content: right;
          font-weight: 600;
        }
    
      }
      .box:hover{
        box-shadow: 10PX 5PX 10PX 3PX #E4DBF3;
      }
    }
    .profitBtm{
      height: 600px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left{
        width: 23%;
        height: 90%;
        background: #fff;
        box-shadow: 0PX 0PX 5PX 2PX #CCC;
        border-radius: 3%;
        display: flex;
        flex-direction: column;
        .box{
        width: 100%;
        height: 80%;
        background: #fff;
       
        border-radius: 3%;
        span{
          display: inline-block;
          width: 100%;
          height: 50%;
          display: flex;
          align-items: center;
          padding: 0PX 25PX;
        }
        .text{
          justify-content: right;
          font-weight: 600;
        }
        }
        .bth{
          width: 100%;
          text-align: center;
          .el-button{
            width: 60%;
            background: #661FFF;
            color: #fff;
          }
        }
      }
      .right{
        width: 100%;
        height: 90%;
        background: #fff;
        box-shadow: 0PX 0PX 10PX 3PX #CCC;
        border-radius: 15PX;
        padding: 10PX 10PX;
        transition: all 0.2s linear;
        .intervalBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10PX 20PX;
          font-size: 0.95rem;
         
          .title{
            // width: 10%;
            text-align: center;
            font-size: 1.1em;

          }
          .times{
            // width: 10%;           
            display: flex;
            align-items: center;
           justify-content: space-between;
           border-radius: 20PX;
           padding: 1PX 1PX;
           border:1PX solid #5721E4;         
          cursor: pointer;

            span{
              min-width: 55px;
              text-align: center;
           
              border-radius: 20PX;
              margin: 0;
             
             

            }
            
          }
          .timeActive{
            background: #7245E8;
            color: #FFF;
          }
        }
      }
      .right:hover{
        box-shadow: 0PX 0PX 20PX 3PX #E4DBF3;
      }
    }
   
  }
  .top1Box{
    width: 90%;
    height: 400PX;
    background-image: linear-gradient(to right, #1E52E8 0%, #1E52E8 80%, #0BB7BF 100%);
    border-radius: 10PX;
    color: #fff;
    font-size: 1.3em;
    display: flex;
    flex-direction: column;  
    
    .top1BoxOne{
      height: 12%;
      background: rgba(0,0,0,0.3);
      border-radius: 28PX 1PX 100PX 1PX;
      width:800PX;
      padding: 5PX 20PX;
      line-height: 40PX;
    }
    .top1BoxTwo{
      flex: 1;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
      align-items: center;
      padding: 0PX 100PX;
      div{
        display: flex;
       flex-direction: column; 
        
        .income{
          margin-top: 20PX;
          font-size: 1.5em;
        }
       
      }
      .content{
        position: relative;
     padding: 0PX 50PX;
        width:calc(100% / 4)
      }
      .iconLine{
       
          width: 1PX;
          background: rgba(255,255,255,0.6);
          height: 50%;
          position: absolute;
          right: 0PX;
          top: 25% ;

      }
    
    }
    .top1BoxThree{
      height: 13%;
      background: rgba(0,0,0,0.4);
      display: flex;
      justify-content: center;
      align-items: center;
      .onlineSituation{
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.8em;
        div{
          width: calc(100% / 3);
          text-align: center;
        }
        .whole{
          color: #fff;
        }
        .onLine{
          color: #04C904;
        }
        .off-line{
          color: #EF6565
        }


      }
    }
   
  }

  .top2Box{
    margin-top: 1%;
    width: 70%;
    height: 500PX;
    display: flex;
    justify-content: center;
    margin-bottom: 2%;
    padding: 0PX 1%;
   
    .lineBOX{
      // background: #0BB7BF;
      width: 100%;
      padding: 10PX 20PX;
      border-radius: 15PX;
      box-shadow: 0PX 0PX 10PX 3PX #CCC;
      transition: all 0.2s linear;
      background: #fff;

       .intervalBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10PX 20PX;
          font-size: 0.95rem;
          .title{
            // width: 10%;
            text-align: center;
            font-size: 1.1em;
            
          }
          .times{
            // width: 10%;           
            display: flex;
            align-items: center;
           justify-content: space-between;
           border-radius: 20PX;
           padding: 1PX 1PX;
           border:1PX solid #5721E4;
       
            span{
              // width: 49%;
              text-align: center;
              padding: 0PX 15PX;
              border-radius: 20PX;
              margin: 0;
              
            }
          }
          .timeActive{
            background: #7245E8;
            color: #FFF;
          }
        }
    }
    .lineBOX:hover{
      box-shadow: 0PX 0PX 20PX 3PX #E4DBF3;
    }
    .elTabs{
      width: 100%;
      font-size: 1em;
    }
    .intervalBox{
      display: flex;
      width: 100%;
      // background: #04C904;
      justify-content: right;
      span{
        margin-left: 1%;
        cursor: pointer;
      }
      span:hover{
        color: #7245E8;
      }
    }
  }
  .top3Box{
    margin-top: 1%;
    width: 100%;
    display: flex;
    justify-content: center;
    // margin-bottom: 1%;
    flex-direction: column;
    align-items: center;
    
    // background-image: url(../../assets/img/miningAccount/btm.png);
    // background-size: 100% 40%;
    // background-repeat: no-repeat;
    // background-position: 30% 125%;
  
    padding: 0PX 1%;
    padding-bottom: 5%;
 

 
    .tabPageBox{
      width: 70%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 10PX;
    
      .activeHeadlines{
        background: #651EFE !important;
        color: #fff;
      }
      .tabPageTitle{
            width: 70%;
            height: 60PX;
            // background: #0BB7BF;
            display: flex;
            align-items: end;
            position: relative;
            // z-index: 99;
            // background: #0BB7BF;
            padding: 0;
            padding-left: 1%;
            font-weight: 600;
          .TitleS{       
              position: relative;
              // border-radius: 300PX 260PX 0PX  0PX;
              // overflow: hidden;
              // clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);  
              display: inline-block;
              filter: drop-shadow(0PX -5PX 10PX  rgba(0, 0, 0, 0.3)); /* 添加阴影 */
              // background: #0BB7BF !important;
              cursor: pointer;
              margin: 0;

            background: transparent;
          .trapezoid{
              display: inline-block;
              width: 150PX;
              height: 40PX;        
              background: #F9BBD0;
              clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);
              display: flex;
              justify-content: center;
              align-items: center;
              // span{
              //   position: absolute;
              //   top:10PX;
              //   left: 40%;
              // }
              font-size: 0.95rem;

          }
         
         
         }
         .TitleS:hover{
           font-weight: bold;
         }
         .ces{
          width: 10% ;
          height: 60PX;
          position: absolute;
          left: 50%;         
          clip-path: polygon(22% 0%, 79% 0%, 94% 100%, 10% 100%);  
          filter: drop-shadow(20PX 20PX 10PX 10PX rgba(0,0,0,.6)) !important;
        
        
         }
         .minerTitle{
            z-index: 99;
       
           
         }
         .profitTitle{
        
            // position: absolute;
            // left: 120PX;
            z-index: 98;
            margin-left: -40PX;
         
          }
          .paymentTitle{         
            // position: absolute;
            // left: 230PX;
            z-index: 97;         
            margin-left: -45PX;
           
          }
            
        
      }
      .page{
      width: 100%;
      min-height: 730PX;
      // background: #0BB7BF;
      box-shadow: 5PX 4PX 8PX 5PX rgba(0, 0, 0, 0.1);
      z-index: 999;
      margin-top: -3PX;
      border-radius: 20PX;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
 
      .publicBox{
        min-height: 600PX;
      }
      .minerPagination{
     
        margin: 0 auto;
        margin-top: 30PX;
        margin-bottom: 30PX;
      }
      .minerTitleBox{
        width: 100%;
        height: 40PX;
        background: #EFEFEF;
        padding: 0PX 30PX;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.9rem;
        .TitleOnLine{
          width: 60%;
          font-weight: 600;
          span{
          // width: 20%;
          display: inline-block;
          cursor: pointer;
          margin-left: 20PX;
          padding: 0PX 5PX;
        }
        }
        .searchBox{
          width: 260px;
          // position: absolute;
          // right: 0;
          // top: 0PX;    
          border:2PX solid #641FFF;
          height: 30PX;
          display: flex;
          align-items: center;
          justify-content: space-between;
          //  background: #0BB7BF;
          border-radius: 25PX;
          overflow: hidden;        
         
          margin: 0;
          margin-right: 10px;
          .inout{
            border:none;
            outline: none;
            padding: 0PX 10PX;
            background: transparent;
          }
          i{
            width: 35px;
            height: 29px;
            background:#641FFF ;
            color: #fff;
            font-size: 1.2em;
            line-height: 29PX;
            text-align: center;
          }
     }
       
      
      }
    }
     
    }
   
    



    .elTabs3{
      width: 70%;
      font-size: 1em;
      position: relative;
      .searchBox{
      width: 25%;
      position: absolute;
      right: 0;
       top: -5PX;
       z-index: 99999;
       border:2PX solid #641FFF;
       height: 30PX;
       display: flex;
       align-items: center;
       justify-content: space-between;
      //  background: #0BB7BF;
      border-radius: 25PX;
      overflow: hidden;
       .ipt{
        border:none;
        outline: none;
        padding: 0PX 10PX;
       }
       i{
        width: 15%;
        height: 101%;
        background:#641FFF ;
        color: #fff;
        font-size: 1.2em;
        line-height: 25PX;
        text-align: center;
       }
     }
      .minerTabs{
        width: 98%;
        margin-left: 2%;
        margin-top: 1%;
        min-height: 600PX;
       
         
      }
    }
   
    .accordionTitle{
      width: 100%;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 20PX;
      span{
        width: calc(100% / 4);
        // background: #0BB7BF;
        text-align: left;
      }
    }

    .accordionTitleAll{
      width: 100%;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 20PX;
    
      span{
        // width: calc(100% / 4) !important;
        // background: #0BB7BF;
        width: 24%;
        text-align: left;
        padding-left: 1.5%;
      }
    }


   
  
    .Title{
      height: 60PX;
      background: #D2C3EA;
      border-radius: 5PX;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 30PX;
     
      span{
        width:24.5%;
        color: #433278;
        text-align: left;

       
      }
    }
    .TitleAll{
      height: 60PX;
      background: #D2C3EA;
      border-radius: 5PX;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 35PX;
      font-size: 0.95rem;
      span{
        width:calc(100% /5);
        color: #433278;
        text-align: left;
        
       
      }
    }
    .totalTitleAll{
      height: 60PX;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 35PX;
      background: #EFEFEF;
      font-size: 0.95rem;
      span{
        width:calc(100% /5);
     
        text-align: left;
        
       
      }
    }
    

    .totalTitle{
      height: 60PX;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 0PX 20PX;
      background: #EFEFEF;
      font-size: 0.95rem;
      span{
        width:calc(97% /4);
     
        text-align: left;
        // background: #0BB7BF;
       
      }
    }
  }

  


    .belowTable {
        width: 99%;
        // max-height: 750PX;
      
        display: flex;
        // justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 10PX;
        // box-shadow: 0PX 0PX 10PX 3PX #CCC;
        // background: goldenrod;
        overflow: hidden;
        // border: 1PX solid #CCC;
        // background: #1E52E8;
        margin: 0 auto;
        padding: 0;
        margin-top: -1PX;
        margin-bottom: 50PX;
        // z-index: 9999999;
     
        font-size: 0.95rem;
        ul {
          width: 100%;
          min-height: 200PX;
          max-height:690PX;
          padding: 0;
          overflow: hidden;
          overflow-y: auto;
          margin: 0;
          margin-bottom: 50PX;
          //隐藏滚动条
        //   scrollbar-width: none;
        // -ms-overflow-style: none;
        // border-right: none;
        
          .table-title {
            position: sticky;
            top: 0PX;
            background: #D2C3EA;
            padding: 0PX 10PX;
            color: #433278;
            font-weight: 600;
          }
          li {
            width: 100%;
            list-style: none;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 60PX;
            background:#F8F8FA ;
            span {
              width: calc(100% / 4);
              font-size: 0.95rem;
              text-align: center;
              word-wrap: break-word; /* 允许在单词内换行 */
              overflow-wrap: break-word; /* 同上，现代浏览器推荐使用 */
              white-space: normal; /* 允许换行 */
              

            }
          }
          li:nth-child(even) {
                background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
                background:#F8F8FA ;
            }

          .currency-list {
            background: #EFEFEF;
            // box-shadow: 0PX 0PX 2PX 1PX rgba(0, 0, 0, 0.02);
            // margin-top: 1%;
            padding: 10PX 10PX;
            background:#F8F8FA ;
            margin-top: 10PX;
            border:1PX solid #EFEFEF;
            color: rgba(0,0,0,0.9);
            .txidBox{
              display: flex;
              justify-content: left;
              box-sizing: border-box;
              // padding-right: 35px;
              span:nth-of-type(1){           
                width: 50%;
                text-align: right;
                display: inline-block;
                box-sizing: border-box;
                margin-right: 10px;               
              }
            }
            .txid{
              border-left:2px solid rgba(0, 0, 0, 0.1);
              margin-left: 5px;
            }
           
            .txid:hover{
              cursor: pointer;
              color: #2889FC;
              font-weight: 600;
            }

          }
        }
      }
      .currency-list2.currency-list2.currency-list2{
       
        background: #EFEFEF;
        padding: 10PX 10PX;
      }
      .el-input-group__append button.el-button, .el-input-group__append div.el-select .el-input__inner, .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button, .el-input-group__prepend div.el-select .el-input__inner, .el-input-group__prepend div.el-select:hover .el-input__inner{
    background: #631FFC;
    color: #fff;
  }


  .offlineTime{

display: flex;
flex-direction: column;
justify-content: center;
// align-items: center;
//  background: #04C904;
span{
  width: 100% !important;
  display:inline-block ;
  line-height: 15PX !important;
}
// .timeTips{
//   display:inline-block ;
//   text-align: right !important;
//   background: #0BB7BF;
//   margin-top: 1%;
//   padding-right: 45% !important;
// }

}
.sort{
  font-size: 1.3em;
  cursor: pointer;
  color: #1E52E8;
 }
 .sort:hover{
  color: #433299;
 }
 ::v-deep .el-loading-spinner{
  top: 25% !important;
 }
  
</style>

<style >
  /* .el-collapse-item{
    min-height: 70PX;
  } */
</style>