m2pool_web_frontend/mining-pool/src/views/readOnlyDisplay/index.vue

2882 lines
83 KiB
Vue
Raw Normal View History

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