<template>
  <div class="miningAccountMain">
    <section v-if="$isMobile">
      <div class="accountInformation">
        <img :src="accountItem.img" alt="coin" />
        <span class="coin">{{ accountItem.coin }} </span>
        <i class="iconfont icon-youjiantou"></i>
        <span class="ma"> {{ accountItem.ma }}</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>
            <!-- ({{ MinerAccountData.withdrawable ||0 }}) -->
            <span class="text">{{ MinerAccountData.balance }}</span>
          </div>

          <el-button @click="jumpPage">{{
            $t(`mining.paymentSettings`)
          }}</el-button>
        </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`)"
            >
              <span
                class="trapezoid"
                :class="{ activeHeadlines: activeName2 == `miningMachine` }"
              >
                <span>{{ $t(`mining.profit`) }}</span></span
              >
            </div>
            <div class="TitleS paymentTitle" @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>{{ 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 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>
                      
                      </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:0 auto;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.includes(`dgb`)?`dgb`: 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 accordion>     
                    <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="clickCopyAddress(item)">{{$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="clickCopyTxid(item)"  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>
      <div class="accountInformation">
        <img :src="accountItem.img" alt="coin" />
        <span class="coin">{{ accountItem.coin }} </span>
        <i class="iconfont icon-youjiantou"></i>
        <span class="ma"> {{ accountItem.ma }}</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="paymentSettingBth">
          <el-button @click="jumpPage">{{
            $t(`mining.paymentSettings`)
          }}</el-button>
        </div>

        <div class="profitBtm" 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>

      <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"
              @click="handleClick2(`miningMachine`)"
            >
              <span
                class="trapezoid"
                :class="{ activeHeadlines: activeName2 == `miningMachine` }"
              >
                <span>{{ $t(`mining.profit`) }}</span></span
              >
            </div>
            <div class="TitleS paymentTitle" @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> &nbsp; --- </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
                          :title="$t(handelStateList(item.status))"
                          :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> &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="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> &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="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;
                      "
                      >{{ accountItem.coin.includes(`dgb`)?`dgb`: 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>
            </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;
                      "
                      >{{ accountItem.coin.includes(`dgb`)?`dgb`: accountItem.coin }}</span
                    >
                  </span>
                  <!-- {{ item.txid }} -->

                  <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%;
  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;
        margin-top: 5px;
    
       

        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;
      // z-index: 99;
      // background: #0BB7BF;

        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: 94px !important;
        z-index: 98;
      }
      .paymentTitle {
        position: absolute;
        left: 188px !important;
        z-index: 97;
      }
    }
    .page {
      width: 100%;
      min-height: 380px !important;
      // 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: 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 {
    background: #D2C3EA;
    height: 60px !important;
    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;
          padding-left: 0px !important;
        }
        span{
         
          font-size: 0.9rem;
          text-align: left;
          padding-left: 5px !important;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
  }
    }
  }

  .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;
    }
  }



  .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;
      
        align-items: center;
        background: #D2C3EA;
        color: #433278;
        font-weight: 600;
        width: 100%;
        font-size: 0.8rem !important;
        overflow: hidden;

        span{
          display: inline-block;
          text-align: left;
        }
        span:nth-of-type(1){
          width:200px;
          padding-left: 10px;
        }
        span:nth-of-type(2){
          width:300px;
          text-align: left;
        }
        span:nth-of-type(3){
          width: 300px;
        
         
        }
      }
      .el-collapse{
        width: 100%;
        max-height: 500px;
        overflow-y: auto;
        min-height: 200px;
      }
      .paymentCollapseTitle{
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
        overflow: hidden;
        span{
          display: inline-block;
          text-align: left;
        }
        span:nth-of-type(1){
          width: 200px;
          padding-left: 10px;
        }
        span:nth-of-type(2){
          width: 300px;
         
        }
        span:nth-of-type(3){
          width: 260px;
     
        }
      }
      .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;
}
.sort {
  font-size: 0.95rem;
  cursor: pointer;
  color: #1e52e8;
}
.sort:hover {
  color: #433299;
}
/*修改提示框*/
.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: 1.5em;
    margin-left: 10px;
  }
  .coin {
    margin-left: 5px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
  }
  .ma {
    font-weight: 600;
    color: #fff;
    margin-left: 10px;
  }
}

.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, #c763c7, #4B0082);
  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;
    margin-top: 18px;
    .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;
    font-size: 0.95rem;
    .box {
      width: 230px;
      height: 100px;
      background: #fff;
      box-shadow: 0px 0px 10px 1px #ccc;
      border-radius: 3%;
      transition: all 0.2s linear;
      padding: 0;
      margin-left: 8px;

      .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.9rem;
        .title {
          // width: 10%;
          text-align: center;
          font-size: 1.1em;
        }
        .times {
          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.9rem;
      .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%;
  font-size: 0.95rem;

  .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%;
          // }
        }
      }
      .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: 120px;
        z-index: 98;
      }
      .paymentTitle {
        position: absolute;
        left: 230px;
        z-index: 97;
      }
    }
    .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;
        .TitleOnLine {
          width: 60%;
          font-weight: 600;

          span {
            // width: 20%;
            display: inline-block;
            cursor: pointer;
            margin-left: 20px;
            padding: 0px 5px;
            font-size: 0.9rem;
          }
        }
        .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%;
      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: 60px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 0px 35px;
    background: #efefef;
    span {
      width: calc(100% / 5);

      text-align: left;
    }
  }

  .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;
    }
  }
}

.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;

  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;
      // background: #0BB7BF;
      font-size: 0.95rem;
    }
    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; /* 允许换行 */
      }
      span:nth-of-type(4) {
        width: 28%;

      }
    }
    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;
  // }
}
</style>


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