<template>
<div>
<section v-if="$isMobile">
<div class="imgTop">
<img src="../../assets/mobile/home/home.png" alt="mining" loading="lazy" />
<!--
<img v-if="lang == 'zh'" src="../../assets/img/enx推广.png" alt="mining" loading="lazy"/>
<img v-else src="../../assets/img/enx英文推广.png" alt="mining" loading="lazy"/> -->
</div>
<div class="currencySelect">
<el-menu class="el-menu-demo" mode="horizontal">
<el-submenu index="1" style="background: transparent">
<template slot="title">
<span ref="coinSelect" class="coinSelect">
<img :src="currencyPath" alt="coin" />
<span>{{handelLabel(params.coin)}}</span>
</span>
</template>
<ul class="moveCurrencyBox" >
<li @click="clickCurrency(item)" v-for="item in currencyList" :key="item.value">
<img :src="item.img" alt="coin" loading="lazy"/>
<p>{{ item.label }}</p>
</li>
</ul>
</el-submenu>
</el-menu>
</div>
<div class="miningPoolLeft" v-loading="minerChartLoading">
<div class="interval">
<div class="chartBth">
<div class="slideBox">
<span
@click="handelPower"
:class="{ slideActive: powerActive }"
>{{ $t(`home.CurrencyPower`) }}</span
>
<span
@click="handelMiner"
:class="{ slideActive: !powerActive }"
>{{ $t(`home.networkPower`) }}</span
>
</div>
</div>
<div class="timeBox">
<span
:class="{ timeActive: timeActive == item.value }"
class="times"
@click="intervalChange(item.value)"
v-for="item in intervalList"
:key="item.value"
>{{ $t(item.label) }}</span
>
</div>
</div>
<div
id="chart"
v-if="powerActive"
style="width: 100%; height: 100%; min-width: 200px"
></div>
<div
id="minerChart"
v-if="!powerActive"
style="width: 100%; height: 100%;min-width: 200px;min-height: 380px;"
></div>
</div>
<section class="describeBox2">
<p> <i class="iconfont icon-tishishuoming "></i><span class="describeTitle">{{ $t(`home.describeTitle`) }}</span>{{ $t(`home.describe`) }} <span class="view" @click="handelJump(`/allocationExplanation`)"> {{ $t(`home.view`) }} </span> </p>
</section>
<div class="miningPoolRight">
<ul class="dataBlockBox">
<li class="dataBlock">
<div class="text">
<p :title="$t(`home.power`)">{{ $t(`home.power`) }}</p>
<p class="content" :title="CoinData.poolPower">
{{ CoinData.poolPower }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/power1.svg" alt="power" loading="lazy"/>
</div>
</li>
<li class="dataBlock" v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.networkPower`)">
{{ $t(`home.networkPower`) }}
</p>
<p class="content" :title="CoinData.totalPower">
{{ CoinData.totalPower }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/算力.svg" alt="Computing power" loading="lazy"/>
</div>
</li>
<li class="dataBlock" v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.networkDifficulty`)">
{{ $t(`home.networkDifficulty`) }}
</p>
<p :title="CoinData.totalDifficulty" class="content">
{{ CoinData.totalDifficulty }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/难度.svg" alt="difficulty" loading="lazy"/>
</div>
</li>
<!-- <li>
<div class="text">
<p :title="$t(`home.miner`)">{{ $t(`home.miner`) }}</p>
<p :title="CoinData.poolMc" class="content">
{{ CoinData.poolMc }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/矿工数资源 22.svg" alt="" />
</div>
</li> -->
<li>
<div class="text">
<p :title="$t(`home.algorithm`)">
{{ $t(`home.algorithm`) }}
</p>
<p :title="CoinData.algorithm" class="content">
{{ CoinData.algorithm }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/算法资源 24.svg" alt="algorithm" />
</div>
</li>
<li v-if="this.params.coin !== 'enx'">
<div class="text" >
<p :title="$t(`home.height`)">{{ $t(`home.height`) }}</p>
<p :title="CoinData.height" class="content">
{{ CoinData.height }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/高度资源 26.svg" alt="height" loading="lazy"/>
</div>
</li>
<li v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.coinValue`)">
{{ $t(`home.coinValue`) }}
</p>
<p :title="CoinData.price" class="content">
{{ CoinData.price }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/币价资源 19.svg" alt="Currency price" loading="lazy"/>
</div>
</li>
<li>
<div class="text">
<p :title="$t(`home.mode`)">
{{ $t(`home.mode`) }}
</p>
<p :title="CoinData.model" class="content">
{{ CoinData.model }} / {{ CoinData.fee }}%
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/费率.svg" alt="Currency price" loading="lazy"/>
</div>
</li>
<li
id="myDiv"
class="profitCalculation"
@click="handelProfitCalculation"
>
<div class="text">
<p :title="$t(`home.profitCalculation`)">
{{ $t(`home.profitCalculation`) }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/计算器.svg" alt="Profit Calculator" loading="lazy"/>
</div>
</li>
<li
class="ConnectMiningPool"
@click="handelJump(`/AccessMiningPool`)"
>
<div class="text">
<p :title="$t(`home.ConnectMiningPool`)">
{{ $t(`home.ConnectMiningPool`) }}
</p>
<p class="content"></p>
</div>
<div class="imgIcon">
<img src="../../assets/img/接入矿池.svg" alt="Connect to the mining pool" loading="lazy"/>
</div>
</li>
</ul>
</div>
<div class="reportBlock">
<div class="reportBlockBox" v-loading="reportBlockLoading">
<div class="belowTable">
<ul>
<li class="table-title2">
<span class="block-Height" :title="$t(`home.blockHeight`)">{{
$t(`home.blockHeight`)
}}</span>
<span class="block-Time" :title="$t(`home.blockingTime`)">{{
$t(`home.blockingTime`)
}}</span>
</li>
<li
@click="clickReportBlock"
class="currency-list2"
v-for="item in newBlockInfoData"
:key="item.hash"
>
<span class="block-height">{{ item.height }}</span>
<span class="block-time">{{ item.date }}</span>
<!-- <span class="hash" :title="item.hash">{{ item.hash }}</span>
<span>{{ item.reward }}</span>
<span>{{ item.fees }}</span> -->
</li>
</ul>
</div>
</div>
</div>
<!-- 收益计算器 -->
<section class="Calculator" v-show="showCalculator">
<div class="prop">
<div class="titleBox">
<span>{{ $t(`home.profitCalculation`) }}</span>
<i class="iconfont icon-guanbi close" @click="handelClose"></i>
</div>
<div class="cautionBox">
<span>{{ $t(`home.caution`) }}</span>
{{ $t(`home.calculatorTips`) }}
</div>
<div class="selectCurrency">
<div class="Currency2">
<el-select
v-model="value"
ref="select"
@change="changeSelection(value)"
>
<el-option
v-for="item in currencyList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<div style="display: flex; align-items: center">
<img :src="item.imgUrl" style="float: left; width: 20px" />
<span style="float: left; margin-left: 5px">
{{ item.label }}</span
>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="content2">
<div class="item">
<p class="power">{{ $t(`home.Power`) }}: </p>
<el-input
@change="handelCalculation"
style="width: 90%; height: 30px"
v-model="inputPower"
class="input-with-select"
>
<el-select
style="width: 100px"
@change="handelCalculation"
v-model="select"
slot="append"
>
<el-option label="MH/s" value="MH/s"></el-option>
<el-option label="GH/s" value="GH/s"></el-option>
<el-option label="TH/s" value="TH/s"></el-option>
</el-select>
</el-input>
</div>
<div class="item">
<p class="time">{{ $t(`home.time`) }}: </p>
<el-select
@change="handelCalculation"
style="width: 90%"
v-model="time"
>
<el-option
v-for="item in selectTime"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
</div>
<div class="item">
<p class="profit">{{ $t(`home.profit`) }}: </p>
<el-input
v-model="profit"
style="width: 90%; height: 20px"
disabled
:placeholder="$t(`mining.profit`)"
></el-input>
</div>
</div>
</div>
</section>
</section>
<div class="content" v-else v-loading="minerChartLoading">
<div class="bgBox">
<!--
<img v-if="lang == 'zh'" class="bgBoxImg2Img" src="../../assets/img/enx推广.png" alt="mining" loading="lazy"/>
<img v-else class="bgBoxImg2Img" src="../../assets/img/enx英文推广.png" alt="mining" loading="lazy"/> -->
<img class="bgImg" src="../../assets/img/home.png" alt="mining" loading="lazy"/>
</div>
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<el-card>
<div class="monitor-list">
<div class="btn left" @click="scrollLeft">
<i class="iconfont icon-icon-prev" />
</div>
<div id="list-box" class="list-box">
<div id="list" class="list">
<div
v-for="item in currencyList"
:key="item.value"
@click="clickCurrency(item)"
class="list-item"
>
<img :src="item.img" alt="coin" />
<span :class="{ active: itemActive === item.value }">
{{ item.label }}</span
>
</div>
</div>
</div>
<div class="btn right" @click="scrollRight">
<i class="iconfont icon-zuoyoujiantou1" />
</div>
</div>
</el-card>
</el-col>
</el-row>
<section class="describeBox">
<p> <i class="iconfont icon-tishishuoming "></i><span class="describeTitle">{{ $t(`home.describeTitle`) }}</span>{{ $t(`home.describe`) }} <span class="view" @click="handelJump(`/allocationExplanation`)"> {{ $t(`home.view`) }} </span> </p>
</section>
<div class="contentBox">
<!-- 算力图 -->
<el-row>
<div class="currencyDescription2">
<section class="miningPoolBox">
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="miningPoolLeft" v-loading="minerChartLoading" v-loading-recovery="{ loading: 'minerChartLoading', recovery: ['getPoolPowerData', 'fetchNetPower'] }">
<div class="interval">
<div class="chartBth">
<div class="slideBox">
<span
@click="handelPower"
:class="{ slideActive: powerActive }"
>{{ $t(`home.CurrencyPower`) }}</span
>
<span
@click="handelMiner"
:class="{ slideActive: !powerActive }"
>{{ $t(`home.networkPower`) }}</span
>
</div>
</div>
</div>
<div class="timeBox" style="text-align: right;padding-right: 35px;margin-bottom: 8px;">
<span
:class="{ timeActive: timeActive == item.value }"
class="times"
@click="intervalChange(item.value)"
v-for="item in intervalList"
:key="item.value"
>{{ $t(item.label) }}</span
>
</div>
<div
id="chart"
v-if="powerActive"
style="width: 100%; height: 100%; min-width: 200px"
></div>
<div
id="minerChart"
v-if="!powerActive"
style="width: 100%; height: 100%"
></div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<div class="miningPoolRight">
<ul class="dataBlockBox">
<li :class="{'dataBlock': this.params.coin !== 'enx'}">
<div class="text">
<p :title="$t(`home.power`)">{{ $t(`home.power`) }}</p>
<p class="content" :title="CoinData.poolPower">
{{ CoinData.poolPower }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/power1.svg" alt="power" />
</div>
</li>
<li class="dataBlock" v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.networkPower`)">
{{ $t(`home.networkPower`) }}
</p>
<p class="content" :title="CoinData.totalPower">
{{ CoinData.totalPower }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/算力.svg" alt="Computing power" />
</div>
</li>
<li class="dataBlock" v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.networkDifficulty`)">
{{ $t(`home.networkDifficulty`) }}
</p>
<p :title="CoinData.totalDifficulty" class="content">
{{ CoinData.totalDifficulty }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/难度.svg" alt="difficulty" />
</div>
</li>
<!-- <li>
<div class="text">
<p :title="$t(`home.miner`)">{{ $t(`home.miner`) }}</p>
<p :title="CoinData.poolMc" class="content">
{{ CoinData.poolMc }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/矿工数资源 22.svg" alt="" />
</div>
</li> -->
<li>
<div class="text">
<p :title="$t(`home.algorithm`)">
{{ $t(`home.algorithm`) }}
</p>
<p :title="CoinData.algorithm" class="content">
{{ CoinData.algorithm }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/算法资源 24.svg" alt="algorithm" />
</div>
</li>
<li v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.height`)">
{{ $t(`home.height`) }}
</p>
<p :title="CoinData.height" class="content">
{{ CoinData.height }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/高度资源 26.svg" alt="height" />
</div>
</li>
<li v-if="this.params.coin !== 'enx'">
<div class="text">
<p :title="$t(`home.coinValue`)">
{{ $t(`home.coinValue`) }}
</p>
<p :title="CoinData.price" class="content">
{{ CoinData.price }} </p>
</div>
<div class="imgIcon">
<img src="../../assets/img/币价资源 19.svg" alt="Currency price" />
</div>
</li>
<li >
<div class="text">
<p :title="$t(`home.mode`)">
{{ $t(`home.mode`) }}
</p>
<p :title="CoinData.price" class="content" style="font-size: 0.8rem;margin-right: 5px;">
{{ CoinData.model }} / {{ CoinData.fee }}%</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/费率.svg" alt="Profit Calculator" />
</div>
</li>
<li
id="myDiv"
class="profitCalculation"
@click="handelProfitCalculation"
>
<div class="text">
<p :title="$t(`home.profitCalculation`)">
{{ $t(`home.profitCalculation`) }}
</p>
</div>
<div class="imgIcon">
<img src="../../assets/img/计算器.svg" alt="Profit Calculator" />
</div>
</li>
<li
class="ConnectMiningPool"
@click="handelJump(`/AccessMiningPool`)"
>
<div class="text">
<p :title="$t(`home.ConnectMiningPool`)">
{{ $t(`home.ConnectMiningPool`) }}
</p>
<p class="content"></p>
</div>
<div class="imgIcon">
<img src="../../assets/img/接入矿池.svg" alt="Connect to the mining pool" />
</div>
</li>
</ul>
</div>
</el-col>
</section>
</div>
</el-row>
<!-- <el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="reportBlock">
<div class="reportBlockBox" v-loading="reportBlockLoading">
<div class="belowTable">
<ul>
<li class="table-title">
<span :title="$t(`home.blockHeight`)">{{$t(`home.blockHeight`)}}</span>
<span :title="$t(`home.blockingTime`)">{{$t(`home.blockingTime`)}}</span>
<span class="hash" :title="$t(`home.blockHash`)">{{$t(`home.blockHash`)}}</span>
<div class="blockRewards" :title="$t(`home.blockRewards`)">{{$t(`home.blockRewards`)}} ({{params.coin}})
<div id="boxTitle2" class="reward" :data-title="$t(`mining.blockRewards`)">
<img style="width:18PX" src="../../assets/img/profit.svg" alt="">
</div>
</div>
<div class="transactionFee" :title="$t(`home.transactionFee`)">{{$t(`home.transactionFee`)}} ({{params.coin}})
<div id="boxTitle2" :data-title="$t(`mining.transactionFeeExplanation`)">
<img style="width:18PX" src="../../assets/img/profit.svg" alt="">
</div>
</div>
</li>
<li @click="clickReportBlock" class="currency-list" v-for="item in newBlockInfoData" :key="item.hash">
<span>{{ item.height }}</span>
<span>{{ item.date }}</span>
<span class="hash" :title="item.hash">{{ item.hash }}</span>
<span>{{ item.reward }}</span>
<span>{{ item.fees }}</span>
</li>
</ul>
</div>
</div>
</div>
</el-col>
</el-row> -->
</div>
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
<div class="reportBlock">
<div class="reportBlockBox" v-loading="reportBlockLoading" v-loading-recovery="{ loading: 'reportBlockLoading', recovery: ['getBlockInfoData'] }">
<div class="belowTable">
<ul>
<li class="table-title">
<span :title="$t(`home.blockHeight`)">{{
$t(`home.blockHeight`)
}}</span>
<span :title="$t(`home.blockingTime`)">{{
$t(`home.blockingTime`)
}}</span>
<span class="hash" :title="$t(`home.blockHash`)">{{
$t(`home.blockHash`)
}}</span>
<div class="blockRewards" :title="$t(`home.blockRewards`)">
{{ $t(`home.blockRewards`) }} ({{ handelLabel2(params.coin) }})
<!-- <div
id="boxTitle2"
class="reward"
:data-title="$t(`mining.blockRewards`)"
>
<img
style="width: 18px"
src="../../assets/img/profit.svg"
alt=""
/>
</div> -->
</div>
<!-- <div
v-show="FeeShow"
class="transactionFee"
:title="$t(`home.transactionFee`)"
>
{{ $t(`home.transactionFee`) }} ({{ handelLabel2(params.coin) }})
</div> -->
</li>
<li
@click="clickReportBlock"
class="currency-list"
v-for="item in newBlockInfoData"
:key="item.hash"
>
<span>{{ item.height }}</span>
<span>{{ item.date }}</span>
<span class="hash" :title="item.hash">{{ item.hash }}</span>
<span :title="item.reward" class="reward">{{ item.reward }}</span>
<!-- <span v-show="FeeShow">{{ item.fees }}</span> -->
</li>
</ul>
</div>
</div>
</div>
</el-col>
</el-row>
<!-- 收益计算器 -->
<section class="Calculator" v-show="showCalculator">
<div class="prop">
<div class="titleBox">
<span>{{ $t(`home.profitCalculation`) }}</span>
<i class="iconfont icon-guanbi close" @click="handelClose"></i>
</div>
<div class="cautionBox">
<span>{{ $t(`home.caution`) }}</span>
{{ $t(`home.calculatorTips`) }}
</div>
<div class="selectCurrency">
<div class="Currency2">
<el-select
v-model="value"
ref="select"
@change="changeSelection(value)"
>
<el-option
v-for="item in currencyList"
:key="item.value"
:label="item.label"
:value="item.value"
>
<div style="display: flex; align-items: center">
<img :src="item.imgUrl" style="float: left; width: 20px" />
<span style="float: left; margin-left: 5px">
{{ item.label }}</span
>
</div>
</el-option>
</el-select>
</div>
</div>
<div class="content2">
<div class="titleS">
<span class="power">{{ $t(`home.Power`) }}</span>
<span class="time">{{ $t(`home.time`) }}</span>
<span class="profit">{{ $t(`home.profit`) }}</span>
</div>
<div class="computingPower">
<el-input
@change="handelCalculation"
style="width: 40%; height: 50px"
v-model="inputPower"
class="input-with-select"
>
<el-select
style="width: 100px"
@change="handelCalculation"
v-model="select"
slot="append"
>
<el-option label="MH/s" value="MH/s"></el-option>
<el-option label="GH/s" value="GH/s"></el-option>
<el-option label="TH/s" value="TH/s"></el-option>
</el-select>
</el-input>
<el-select
@change="handelCalculation"
style="width: 15%"
v-model="time"
>
<el-option
v-for="item in selectTime"
:key="item.value"
:label="$t(item.label)"
:value="item.value"
></el-option>
</el-select>
<el-input
v-model="profit"
style="width: 40%; height: 50px"
disabled
:placeholder="$t(`mining.profit`)"
></el-input>
</div>
</div>
</div>
</section>
</div>
</div>
</template>
<script>
import IndexJs from "./index";
export default {
metaInfo: {
meta: [
{
name: 'keywords',
content: 'M2Pool 矿池,首页,热门币种挖矿,稳定收益,Home,Popular Coins Mining,Stable Income Permission Levels,Account Privileges,Member Level Rates'
},
{
name: 'description',
content:window.vm.$t(`seo.Home`)
}
]
},
mixins: [IndexJs],
};
</script>
<style scoped lang="scss">
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 800px) {
.imgTop {
width: 100%;
// padding-left: 10%;
text-align: center;
img {
width: 100%;
}
}
#chart {
height: 400px !important;
}
.describeBox2{
width: 100%;
font-size: 0.9rem;
padding: 8px;
margin: 0 auto;
p{
width: 100% ;
background: transparent ;
padding-left: 8px;
}
i{
color: #5721e4;
margin-right: 5px;
}
.describeTitle{
color: #5721e4;
font-weight: 600;
font-size: 0.95rem;
}
.view{
color: #5721e4;
margin-left: 5px;
}
}
.moveCurrencyBox {
margin: 0;
padding: 0;
width: 100%;
display: flex;
min-height: 200px;
flex-wrap: wrap;
padding: 10px 18px;
margin: 0 auto;
background: #fff;
li {
list-style: none;
// width: calc(100% / 5);
display: flex;
flex-direction: column;
align-items: center !important;
margin-left: 10px;
// background: #D2C4E8;
// align-items: center;
// overflow: hidden;
padding: 5px 5px;
box-sizing: border-box;
// background: palegoldenrod;
img {
width: 25px;
}
p {
min-width: 50px;
margin-top: 8px;
font-size: 0.85rem;
word-wrap: break-word;
word-break: break-all;
text-align: center;
text-transform: capitalize;
}
}
}
.currencySelect{
display: flex;
align-items: center;
margin-bottom: 10px;
padding-left: 8px;
font-size: 0.85rem;
.el-menu-demo {
flex: 1;
}
.el-menu{
background: transparent;
}
// .title{
// width: 30%;
// }
.coinSelect{
img{
width: 25px;
}
span{
text-transform: capitalize;
margin-left: 5px;
}
}
}
.miningPoolLeft {
margin: 0 auto;
width: 95%;
min-height: 300px;
box-shadow: 0px 0px 1px 1px #ccc;
padding-top: 18px;
border-radius: 10px;
overflow: hidden;
background: #fff;
.interval {
padding: 0px 8px;
font-size: 0.7rem;
width: 100%;
display:block;
.timeBox {
padding: 0px 10px;
}
.times {
// background: #D2C3E9;
width: 15%;
text-align: center;
border-radius: 10px;
// padding: 0PX 20PX;
line-height: 30px;
}
.times:hover {
color: #5721e4;
}
.timeActive {
color: #5721e4;
}
.chartBth {
.slideBox {
// width: 30%;
background-image: linear-gradient(to right, #b6e6f1 0%, #f8bbd0 100%);
padding: 0px 2px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: left;
height: 30px;
width:auto;
span {
// width: 50%;
text-align: center;
border-radius: 20px;
height: 80%;
line-height: 25px;
// background: palegreen;
margin: 0;
transition: all 0.3s linear;
padding: 0px 5px;
}
}
.slideActive {
background: #5721e4;
color: #fff;
}
}
}
.timeBox{
width: 100%;
text-align: right;
}
}
.miningPoolRight {
// width: 45%;
// width: 100%;
// height: 80%;
// margin-left: 55PX;
display: flex;
justify-content: center;
margin-top: 10px;
// background: #2EAEFF;
min-width: 300px;
ul {
padding: 0;
padding: 0px 2%;
margin: 0;
height: 100%;
display: flex;
// justify-content: end;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
// padding-right: 10px;
// .dataBlock {
// margin: 0;
// margin-left: 3%;
// }
li {
list-style: none;
width:160px;
height: 80px;
background: #fff;
border-radius: 5%;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 3px 3px 5px 2px #ccc;
margin-top: 18px;
transition: all 0.2s linear;
// margin-left: 3%;
// margin-left: 2%;
.text {
height: 90%;
width: 70%;
padding-left: 5%;
overflow: hidden;
p {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
font-size: 0.9rem;
}
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
margin-top: 23%;
}
}
.imgIcon {
height: 90%;
width: 30%;
padding-top: 5%;
img {
width: 80%;
}
}
}
li:hover {
box-shadow: 0px 0px 5px 2px #d2c3ea;
}
.profitCalculation {
cursor: pointer;
}
.ConnectMiningPool {
cursor: pointer;
}
}
}
.reportBlock {
width: 100%;
// height: 900%;
display: flex;
justify-content: center;
max-height: 700px;
margin-top: 3%;
// margin-bottom: 1%;
padding-bottom: 2%;
// background: #fff;
// background-image: url(../../assets/img/miningAccount/btm.png);
// background-size: 100% 20%;
// background-repeat: no-repeat;
// background-position: 0% 109%;
background: transparent !important;
.reportBlockBox {
width: 96% !important;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
// padding: 10PX 10PX;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s linear;
// background: palegoldenrod !important;
padding: 0 !important;
height: auto !important;
margin-top: 20px;
.belowTable {
width: 100%;
// height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
ul {
width: 100%;
max-height: 650px;
min-height: 200px;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 10px !important;
border: 1px solid #ccc !important;
li {
margin: 0 !important;
border: none !important;
// background: #fff !important;
}
.table-title2 {
position: sticky;
top: 0px;
background: #d2c3ea !important;
// padding: 0px 10px;
color: #433278;
font-weight: 600;
height: 40px;
display: flex;
justify-content: space-around;
// padding: 0px 30px;
padding-right: 10px !important;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9rem;
line-height: 40px;
text-align: center;
}
.block-Height{
width: 50%;
}
.block-Time{
width: 50%;
}
}
li:nth-child(even) {
background-color: #ffff;
background: #f8f8fa !important;
}
.currency-list2 {
width: 100%;
list-style: none;
display: flex;
cursor: pointer;
justify-content: space-around;
align-items: center;
height: 40px;
padding-right: 20px !important;
// background: rgba(0, 0, 0, 0.05);
span {
height: 100%;
width: 50%;
// line-height: 40px;
font-weight: 600;
text-align: center;
font-size: 0.85rem;
line-height: 40px;
}
}
.currency-list2 {
background: #efefef;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
// margin-top: 0.5%;
padding: 0px 10px;
margin-top: 10px;
background: #f8f8fa;
border: 1px solid #efefef;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .block-height{
// width: 50%;
// }
// .block-time{
// width: 50%;
// }
}
}
}
}
.reportBlockBox:hover {
box-shadow: 3px 3px 10px 4px #d2c3e9;
}
}
.Calculator {
width: 100%;
min-height:400px;
background: rgba(0, 0, 0, 0.5);
position: fixed;
padding: 20px;
top: 10%;
left: 0;
z-index: 2001;
display: flex;
align-items: center;
justify-content: center;
.prop {
width: 98%;
height: 98%;
background: #fafbff;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px;
padding-bottom: 50px;
.titleBox {
display: flex;
justify-content: space-between;
align-items: center;
// background: #2eaeff;
width: 100%;
height: 35px;
position: relative;
span {
width: 100%;
text-align: left;
font-size: 0.95rem;
color: rgba(0, 0, 0, 0.7);
padding-left: 3%;
}
.close {
font-size: 1.5rem;
cursor: pointer;
position: absolute;
top: 1px;
right: 10px;
}
.close:hover {
color: #6e3edb;
}
}
.selectCurrency {
width: 100%;
display: flex;
justify-content: center;
.Currency2 {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 5px;
margin-top: 3%;
img {
width: 28px;
}
}
}
.cautionBox {
padding: 10px 10px;
margin-left: 3%;
font-size: 0.85rem;
color: rgba(0, 0, 0, 0.7);
span {
color: #8d72db;
font-weight: 600;
}
}
.content2 {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 100%;
.item{
width: 100%;
margin-top: 10px;
p{
margin-bottom: 8px;
font-size: 0.9rem;
}
}
}
}
}
// .el-card{
// padding: 0 !important;
// }
// ::v-deep .el-card__body, .el-main{
// padding: 10px !important;
// }
// .monitor-list{
// width: 100% !important;
// .left{
// width: 25px !important;
// }
// .right{
// width: 25px !important;
// }
// i{
// font-size: 14px !important;
// }
// }
// .list-item{
// img{
// width: 25px !important;
// }
// span{
// font-size: 0.75rem !important;
// }
// }
}
@media screen and (min-width:800px) and (max-width: 1279px) {
.imgTop {
width: 100%;
padding-left: 20%;
text-align: left;
img {
width: auto ;
height:300px;
}
}
#chart {
height: 400px !important;
}
.describeBox2{
width: 100%;
font-size: 0.9rem;
padding: 8px;
margin: 0 auto;
p{
width: 100% ;
background: transparent ;
padding-left: 8px;
}
i{
color: #5721e4;
margin-right: 5px;
}
.describeTitle{
color: #5721e4;
font-weight: 600;
font-size: 0.95rem;
}
.view{
color: #5721e4;
margin-left: 5px;
}
}
.moveCurrencyBox {
margin: 0;
padding: 0;
width: 100%;
display: flex;
min-height: 200px;
flex-wrap: wrap;
padding: 10px 18px;
margin: 0 auto;
background: #fff;
li {
list-style: none;
// width: calc(100% / 5);
display: flex;
flex-direction: column;
align-items: center !important;
margin-left: 10px;
// background: #D2C4E8;
// align-items: center;
// overflow: hidden;
padding: 5px 5px;
box-sizing: border-box;
// background: palegoldenrod;
img {
width: 25px;
}
p {
min-width: 50px;
margin-top: 8px;
font-size: 0.85rem;
word-wrap: break-word;
word-break: break-all;
text-align: center;
text-transform: capitalize;
}
}
}
.currencySelect{
display: flex;
align-items: center;
margin-bottom: 10px;
padding-left: 8px;
font-size: 0.85rem;
.el-menu-demo {
flex: 1;
}
.el-menu{
background: transparent;
}
// .title{
// width: 30%;
// }
.coinSelect{
img{
width: 25px;
}
span{
text-transform: capitalize;
margin-left: 5px;
}
}
}
.miningPoolLeft {
margin: 0 auto;
width: 95%;
min-height: 300px;
box-shadow: 0px 0px 1px 1px #ccc;
padding-top: 18px;
border-radius: 10px;
overflow: hidden;
background: #fff;
.interval {
padding: 0px 8px;
font-size: 0.7rem;
width: 100%;
display:block;
.timeBox {
padding: 0px 10px;
}
.times {
// background: #D2C3E9;
width: 15%;
text-align: center;
border-radius: 10px;
// padding: 0PX 20PX;
line-height: 30px;
}
.times:hover {
color: #5721e4;
}
.timeActive {
color: #5721e4;
}
.chartBth {
.slideBox {
// width: 30%;
background-image: linear-gradient(to right, #b6e6f1 0%, #f8bbd0 100%);
padding: 0px 2px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: left;
height: 30px;
width:auto;
span {
// width: 50%;
text-align: center;
border-radius: 20px;
height: 80%;
line-height: 25px;
// background: palegreen;
margin: 0;
transition: all 0.3s linear;
padding: 0px 5px;
}
}
.slideActive {
background: #5721e4;
color: #fff;
}
}
}
.timeBox{
width: 100%;
text-align: right;
}
}
.miningPoolRight {
// width: 45%;
// width: 100%;
// height: 80%;
// margin-left: 55PX;
display: flex;
justify-content: center;
margin-top: 10px;
// background: #2EAEFF;
min-width: 300px;
ul {
padding: 0;
padding: 0px 2%;
margin: 0;
height: 100%;
display: flex;
// justify-content: end;
align-items: center;
flex-wrap: wrap;
justify-content: left;
// padding-right: 10px;
// .dataBlock {
// margin: 0;
// margin-left: 3%;
// }
li {
list-style: none;
width:160px;
height: 80px;
background: #fff;
border-radius: 5%;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 3px 3px 5px 2px #ccc;
margin-top: 18px;
transition: all 0.2s linear;
// margin-left: 3%;
margin-left: 2%;
.text {
height: 90%;
width: 70%;
padding-left: 5%;
overflow: hidden;
p {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
font-size: 0.9rem;
}
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.8rem;
margin-top: 23%;
}
}
.imgIcon {
height: 90%;
width: 30%;
padding-top: 5%;
img {
width: 80%;
}
}
}
li:hover {
box-shadow: 0px 0px 5px 2px #d2c3ea;
}
.profitCalculation {
cursor: pointer;
}
.ConnectMiningPool {
cursor: pointer;
}
}
}
.reportBlock {
width: 100%;
// height: 900%;
display: flex;
justify-content: center;
max-height: 700px;
margin-top: 3%;
// margin-bottom: 1%;
padding-bottom: 2%;
// background: #fff;
// background-image: url(../../assets/img/miningAccount/btm.png);
// background-size: 100% 20%;
// background-repeat: no-repeat;
// background-position: 0% 109%;
background: transparent !important;
.reportBlockBox {
width: 96% !important;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
// padding: 10PX 10PX;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s linear;
// background: palegoldenrod !important;
padding: 0 !important;
height: auto !important;
margin-top: 20px;
.belowTable {
width: 100%;
// height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
ul {
width: 100%;
max-height: 650px;
min-height: 200px;
padding: 0;
margin: 0;
overflow: hidden;
border-radius: 10px !important;
border: 1px solid #ccc !important;
li {
margin: 0 !important;
border: none !important;
// background: #fff !important;
}
.table-title2 {
position: sticky;
top: 0px;
background: #d2c3ea !important;
// padding: 0px 10px;
color: #433278;
font-weight: 600;
height: 40px;
display: flex;
justify-content: space-around;
// padding: 0px 30px;
padding-right: 10px !important;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9rem;
line-height: 40px;
text-align: center;
}
.block-Height{
width: 50%;
}
.block-Time{
width: 50%;
}
}
li:nth-child(even) {
background-color: #ffff;
background: #f8f8fa !important;
}
.currency-list2 {
width: 100%;
list-style: none;
display: flex;
cursor: pointer;
justify-content: space-around;
align-items: center;
height: 40px;
padding-right: 20px !important;
// background: rgba(0, 0, 0, 0.05);
span {
height: 100%;
width: 50%;
// line-height: 40px;
font-weight: 600;
text-align: center;
font-size: 0.85rem;
line-height: 40px;
}
}
.currency-list2 {
background: #efefef;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
// margin-top: 0.5%;
padding: 0px 10px;
margin-top: 10px;
background: #f8f8fa;
border: 1px solid #efefef;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// .block-height{
// width: 50%;
// }
// .block-time{
// width: 50%;
// }
}
}
}
}
.reportBlockBox:hover {
box-shadow: 3px 3px 10px 4px #d2c3e9;
}
}
.Calculator {
width: 100%;
min-height:400px;
background: rgba(0, 0, 0, 0.5);
position: fixed;
padding: 20px;
top: 10%;
left: 0;
z-index: 2001;
display: flex;
align-items: center;
justify-content: center;
.prop {
width: 98%;
height: 98%;
background: #fafbff;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px;
padding-bottom: 50px;
.titleBox {
display: flex;
justify-content: space-between;
align-items: center;
// background: #2eaeff;
width: 100%;
height: 35px;
position: relative;
span {
width: 100%;
text-align: left;
font-size: 0.95rem;
color: rgba(0, 0, 0, 0.7);
padding-left: 3%;
}
.close {
font-size: 1.5rem;
cursor: pointer;
position: absolute;
top: 1px;
right: 10px;
}
.close:hover {
color: #6e3edb;
}
}
.selectCurrency {
width: 100%;
display: flex;
justify-content: center;
.Currency2 {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 5px;
margin-top: 3%;
img {
width: 28px;
}
}
}
.cautionBox {
padding: 10px 10px;
margin-left: 3%;
font-size: 0.85rem;
color: rgba(0, 0, 0, 0.7);
span {
color: #8d72db;
font-weight: 600;
}
}
.content2 {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 100%;
.item{
width: 100%;
margin-top: 10px;
p{
margin-bottom: 8px;
font-size: 0.9rem;
}
}
}
}
}
// .el-card{
// padding: 0 !important;
// }
// ::v-deep .el-card__body, .el-main{
// padding: 10px !important;
// }
// .monitor-list{
// width: 100% !important;
// .left{
// width: 25px !important;
// }
// .right{
// width: 25px !important;
// }
// i{
// font-size: 14px !important;
// }
// }
// .list-item{
// img{
// width: 25px !important;
// }
// span{
// font-size: 0.75rem !important;
// }
// }
}
@media screen and (min-width: 500px) and (max-width: 800px) {
.Calculator {
width: 100%;
min-height:400px;
padding: 20px;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 25%;
left: 0;
z-index: 2001;
display: flex;
align-items: center;
justify-content: center;
.prop {
width: 80%;
background: #fafbff;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px;
padding-bottom: 50px;
.titleBox {
display: flex;
justify-content: space-between;
align-items: center;
// background: #2eaeff;
width: 100%;
height: 35px;
position: relative;
span {
width: 100%;
text-align: left;
font-size: 0.95rem;
color: rgba(0, 0, 0, 0.7);
padding-left: 3%;
}
.close {
font-size: 1.5rem;
cursor: pointer;
position: absolute;
top: 1px;
right: 10px;
}
.close:hover {
color: #6e3edb;
}
}
.selectCurrency {
width: 100%;
display: flex;
justify-content: center;
.Currency2 {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 5px;
margin-top: 3%;
img {
width: 28px;
}
}
}
.cautionBox {
padding: 10px 10px;
margin-left: 3%;
font-size: 0.85rem;
color: rgba(0, 0, 0, 0.7);
span {
color: #8d72db;
font-weight: 600;
}
}
.content2 {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
width: 100%;
.item{
width: 100%;
margin-top: 10px;
p{
margin-bottom: 8px;
font-size: 0.9rem;
}
}
}
}
}
}
/*修改提示框*/
#boxTitle2[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.8em;
// white-space: nowrap;
visibility: hidden;
opacity: 0;
text-align: center;
overflow-wrap: break-word !important;
}
}
.content {
width: 100%;
// min-height: 100vh;
// display: flex;
// flex-direction: column;
overflow-y: auto;
.Calculator {
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
z-index: 2001;
display: flex;
align-items: center;
justify-content: center;
.prop {
width: 52%;
height: 45%;
background: #fafbff;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 20px 5px;
.titleBox {
display: flex;
justify-content: space-between;
align-items: center;
// background: #2eaeff;
width: 100%;
height: 35px;
position: relative;
span {
width: 100%;
text-align: left;
font-size: 1.8em;
color: rgba(0, 0, 0, 0.7);
padding-left: 3%;
}
.close {
font-size: 2em;
cursor: pointer;
position: absolute;
top: 1px;
right: 10px;
}
.close:hover {
color: #6e3edb;
}
}
.selectCurrency {
width: 100%;
display: flex;
justify-content: center;
.Currency2 {
display: flex;
justify-content: space-between;
align-items: center;
justify-content: center;
padding: 5px;
margin-top: 3%;
img {
width: 28px;
}
}
}
.cautionBox {
padding: 10px 10px;
margin-left: 3%;
font-size: 1.2em;
color: rgba(0, 0, 0, 0.7);
span {
color: #8d72db;
font-weight: 600;
}
}
.content2 {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
.titleS {
display: flex;
justify-content: space-around;
width: 90%;
margin-top: 5%;
span {
text-align: left;
font-size: 1.2em;
color: rgba(0, 0, 0, 0.7);
}
.power {
width: 40%;
}
.time {
width: 15%;
}
.profit {
width: 40%;
}
}
.computingPower {
display: flex;
height: 50px;
justify-content: space-around;
width: 90%;
margin-top: 1%;
}
}
}
}
.bgBox {
// background: gold;
width: 100%;
height: 300px;
box-sizing: border-box;
// background-position: 50% 28%;
// background-size: cover;
position: relative;
// background: palegoldenrod;
// background-image: url(../../assets/img/enx推广.png) !important;
// background-size: 73vw auto !important;
// background-position: 13.2vw 0 ;
// background-repeat: no-repeat;
// margin-top: 50px;
// margin: 30px 0px;
text-align: left;
.bgImg{
height: 100%;
width: auto ;
position: absolute;
left: 25vw;
top: 0;
}
.bgBoxImg {
height: 100%;
width: auto;
position: absolute;
left: 23%;
transition: all 0.3s linear;
}
}
.bgBoxImg2Img{
width:73vw;
height: 40vh;
margin: 0 auto;
// background-image: url(../../assets/img/enx推广.png) !important;
// background-size: cover;
// background-position: 13.2vw 0 ;
// background-repeat: no-repeat;
// background: palegreen;
overflow: hidden;
}
// .bgBoxImg2 .bgBoxImg2Img{
// width:73vw;
// // object-fit: cover;
// }
.bgBoxImg:hover {
height: 98%;
position: absolute;
left: 23%;
}
.container {
width: 100%;
display: flex;
justify-content: center;
height: 80px;
.containerBox {
width: 80%;
display: flex;
background: palevioletred;
justify-content: center;
.image-list {
display: flex;
padding: 0px 20px;
.imageBOX {
margin-left: 10px;
background: green;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 8px 10px;
}
img {
width: 30px;
}
span {
text-align: center;
}
}
}
}
.contentBox {
width: 100%;
}
}
// ::v-deep.el-color-picker__icon,.el-input,.el-textarea{
// width: 50% !important;
// }
.Currency2 .el-select {
width: 80% !important;
}
::v-deep .el-input__inner {
height: 50px ;
}
@media screen and (min-width: 220px) and (max-width: 1279px) {
::v-deep .el-input__inner {
height: 40px ;
}
}
// ::v-deep .el-select-dropdown .el-popper{
// min-width: inherit;
// }
.contentBox {
width: 100%;
display: flex;
justify-content: start;
align-items: center;
flex-direction: column;
// background: #2EAEFF;
// .currencyBox {
// width: 75%;
// // background: palegoldenrod;
// // background: gold;
// display: flex;
// justify-content: center;
// align-items: center;
// boRder:1PX solid #ccc;
// box-shadow: 5PX 5PX 10PX 2PX #ccc;
// padding: 5PX 40PX;
// position: relative;
// border-radius:10PX;
// // overflow: auto;
// // background: #B6E6F1;
// .list-box{
// width: calc(100vw - 100PX);
// // overflow: hidden;
// // background: #5721E4;
// }
// .rollingBox{
// display: flex;
// width: calc(100vw - 100PX);
// // background: #433278;
// // min-width: 130%;
// justify-content: center;
// transform: all 2s;
// position: relative;
// left: 0;
// transition: left 1s;
// }
// .leftSliding{
// position:absolute;
// left: 0;
// top: 0;
// width: 3%;
// height: 100%;
// background: #D2C3E9;
// display: flex;
// align-items: center;
// justify-content: center;
// z-index: 99;
// i{
// font-size: 1.5em;
// }
// }
// .rightSliding{
// position:absolute;
// top: 0;
// right: 0;
// width: 3%;
// height: 100%;
// background: #D2C3E9;
// display: flex;
// align-items: center;
// justify-content: center;
// i{
// font-size: 1.5em;
// }
// }
// .sunCurrency {
// width: 7%;
// display: flex;
// justify-content: space-between;
// align-items: center;
// flex-direction: column;
// padding: 5PX 2PX;
// border-radius: 22PX;
// // border: 1PX solid rgba(223, 83, 52, 0.3);
// cursor: pointer;
// font-weight: 600;
// margin-left: 5PX;
// // width: 9%;
// // background: rgba(223, 83, 52, 0.05);
// height: 70PX;
// font-size: 0.7em;
// transition: all 0.2s linear;
// // background: #433278;
// img {
// width: 35PX;
// margin-left: 5%;
// }
// span{
// text-transform: uppercase;
// // margin-top: 5PX;
// // background: gold;
// width:90%;
// text-align: center;
// // height: 25PX;
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 5PX 3PX;
// border-radius: 5PX;
// }
// }
// .sunCurrency:hover {
// // background: rgba(223, 83, 52, 0.05);
// // background: #D2C3E9;
// // font-size: 0.8em;
// span{
// background: #6E3EDB;
// color: #fff;
// }
// img {
// width: 30PX;
// margin-left: 5%;
// }
// // box-shadow: 0PX 0PX 5PX 3PX rgba(223, 83, 52, 0.05);
// // span{
// // background: #621BFF;
// // color: #fff;
// // border-radius: 10%;
// // }
// }
// }
.currencyDescription2 {
width: 100%;
// height: 900%;
// background: gold;
display: flex;
justify-content: center;
align-items: center;
// margin-top: 2%;
// background: #433278;
.miningPoolBox {
width: 75%;
// height: 430PX;
// display: flex;
// align-items: center;
padding: 0px 20px;
// background: #2EAEFF;
margin: 0 auto;
font-size: 0.9rem;
.miningPoolLeft {
// width: 50%;
width: 100%;
height: 80%;
box-shadow: 0px 0px 10px 3px #ccc;
padding: 20px 10px;
border-radius: 10px;
transition: all 0.3s linear;
// background: #433278;
height: 380px;
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 10px;
min-width: 300px;
.interval {//111
// background: fuchsia;
display: flex;
justify-content: space-between;
padding: 2px 10px;
.chartBth {
// width: 75%;
.slideBox {
// width: 30%;
background-image: linear-gradient(
to right,
#b6e6f1 0%,
#f8bbd0 100%
);
padding: 0px 2px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
span {
// width: 50%;
text-align: center;
border-radius: 20px;
height: 80%;
line-height: 25px;
// background: palegreen;
margin: 0;
transition: all 0.3s linear;
padding: 0px 5px;
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
}
}
.slideActive {
background: #5721e4;
color: #fff;
}
}
}
.timeBox {
padding: 0px 10px;
span{
margin-left: 8px;
cursor: pointer;
}
}
.times {
// background: #D2C3E9;
width: 15%;
text-align: center;
border-radius: 10px;
font-size: 0.9rem;
// padding: 0PX 20PX;
line-height: 30px;
}
.times:hover {
color: #5721e4;
}
.timeActive {
color: #5721e4;
}
}
.miningPoolLeft:hover {
box-shadow: 3px 3px 10px 5px #d2c3e9;
}
.miningPoolRight {
// width: 45%;
width: 100%;
// height: 80%;
// margin-left: 55PX;
display: flex;
justify-content: center;
margin-top: 10px;
// background: #2EAEFF;
min-width: 300px;
ul {
padding: 0;
padding: 0px 10px;
margin: 0;
height: 100%;
display: flex;
// justify-content: end;
align-items: center;
flex-wrap: wrap;
.dataBlock {
margin: 0;
margin-left: 3%;
}
li {
list-style: none;
width: calc(90% / 3);
height: 110px;
background: #fff;
border-radius: 5%;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 3px 3px 5px 2px #ccc;
margin-top: 3%;
transition: all 0.2s linear;
margin-left: 3%;
overflow: hidden;
text-overflow: ellipsis;
.text {
height: 90%;
width: 70%;
padding-left: 5%;
overflow: hidden;
p {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
font-size: 0.85rem;
margin-top: 5px;
}
.content {
overflow: hidden;
word-wrap:break-word;
text-overflow: ellipsis;
// white-space: nowrap;
margin-top: 5px;
}
}
.imgIcon {
height: 90%;
width: 30%;
padding-top: 5%;
img {
width: 80%;
}
}
}
li:hover {
box-shadow: 0px 0px 5px 2px #d2c3ea;
}
.profitCalculation {
cursor: pointer;
}
.ConnectMiningPool {
cursor: pointer;
}
}
}
}
.currencyDescriptionBox {
width: 90%;
height: 600px;
// background: palevioletred;
// border: 1PX solid rgba(0,0,0,0.1);
box-shadow: 0px 0px 3px 1px #ccc;
margin-top: 2%;
display: flex;
justify-content: start;
flex-direction: column;
align-items: center;
position: relative;
.titleBOX {
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px 10px;
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
h3 {
width: 90%;
font-size: 1rem;
// background: #ccc;
text-align: center;
}
.titleCurrency:hover {
background: rgba(223, 83, 52, 0.05);
font-size: 13px;
box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
}
}
.titleCurrency {
// width: 7%;
// background: paleturquoise;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
padding: 8px 10px;
border-radius: 22px;
// border: 1PX solid rgba(223, 83, 52, 0.3);
// cursor: pointer;
font-weight: 600;
margin-left: 30px;
font-size: 1.1em;
margin-right: 1%;
position: absolute;
top: 10px;
right: 60px;
transition: all 0.2s linear;
img {
width: 35px;
margin-left: 1%;
}
span {
margin-top: 10px;
text-transform: uppercase;
}
}
.computationalPower {
height: 15%;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 1.3em;
margin: 10px 10px;
.PowerBox {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
span {
cursor: pointer;
width: 100%;
// background: forestgreen;
text-align: center;
transition: all 0.2s linear;
}
span:hover {
// color: rgba(0, 0, 0, 0.9);
color: #df5334;
font-weight: 600;
}
.Power {
font-size: 1.5em;
}
// background: red;
}
p {
width: 80%;
margin: 0;
font-size: 1em;
margin-top: 3px;
margin-left: 5%;
// background: rgba(255,192,203,0.5);
text-align: left;
height: 8%;
padding: 0px 10px;
line-height: 50px;
box-shadow: 0px 0px 2px 1px #ccc;
margin-top: 1%;
}
}
}
.reportBlock {
width: 100%;
// height: 900%;
display: flex;
justify-content: center;
max-height: 700px;
margin-top: 1%;
// margin-bottom: 1%;
padding-bottom: 2%;
// background-image: url(../../assets/img/miningAccount/btm.png);
// background-size: 100% 20%;
// background-repeat: no-repeat;
// background-position: 0% 109%;
background: #433278;
.reportBlockBox {
width: 75%;
// height: 90%;
// background: papayawhip;
// box-shadow: 0PX 0PX 10PX 3PX #ccc;
// background: #f5f9fd;
// background: #fff;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
// padding: 10PX 10PX;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s linear;
// .top {
// width: 100%;
// height: 28%;
// display: flex;
// align-items: center;
// justify-content: center;
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
// padding: 20px 0px;
// color: #fff;
// font-weight: 600;
// font-size: 1.2em;
// .lucky {
// display: flex;
// align-items: center;
// flex-direction: column;
// justify-content: center;
// .luckyNum {
// font-size: 1.8em;
// }
// .luckyText {
// font-size: 1em;
// margin-top: 5%;
// }
// }
// div {
// width: 20%;
// background: #2eaeff;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: space-around;
// margin-left: 3%;
// border-radius: 15px;
// box-shadow: 0px 8px 20px 0px rgba(46, 174, 255, 0.5);
// }
// }
// .belowTable {
// width: 100%;
// // height: 100%;
// display: flex;
// justify-content: center;
// flex-direction: column;
// align-items: center;
// margin-bottom: 100px;
// ul {
// width: 100%;
// max-height: 650px;
// min-height: 200px;
// // height: 100%;
// // background: #2EAEFF;
// // padding: 20PX 0PX;
// padding: 0;
// margin: 0;
// overflow: hidden;
// // overflow-y: auto;
// .table-title {
// position: sticky;
// top: 0px;
// background: #d2c3ea;
// padding: 0px 10px;
// color: #433278;
// .hash {
// width: 50%;
// }
// .blockRewards {
// width: 18%;
// font-weight: 600;
// font-size: 1.1em;
// }
// .transactionFee {
// width: 18%;
// font-weight: 600;
// font-size: 1.1em;
// }
// span {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// }
// li:nth-child(even) {
// background-color: #ffff;
// background: #f8f8fa;
// }
// li {
// width: 100%;
// list-style: none;
// display: flex;
// cursor: pointer;
// justify-content: space-around;
// align-items: center;
// height: 60px;
// // background: rgba(0, 0, 0, 0.05);
// span {
// height: 100%;
// width: calc(100% / 5);
// line-height: 60px;
// font-size: 1.1em;
// font-weight: 600;
// text-align: center;
// }
// }
// .currency-list {
// background: #efefef;
// box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
// // margin-top: 0.5%;
// padding: 0px 10px;
// margin-top: 10px;
// background: #f8f8fa;
// border: 1px solid #efefef;
// span {
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
// }
// .hash {
// width: 50%;
// }
// }
// }
// }
}
.reportBlockBox:hover {
box-shadow: 3px 3px 10px 4px #d2c3e9;
}
}
.EchartsBox {
width: 80%;
min-height: 300px;
.chart {
height: 300px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 2%;
}
}
.formBox {
width: 80%;
min-height: 300px;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-top: 2%;
}
}
.reportBlock {
width: 100%;
// height: 900%;
display: flex;
justify-content: center;
max-height: 700px;
margin-top: 3%;
// margin-bottom: 1%;
padding-bottom: 2%;
// background-image: url(../../assets/img/miningAccount/btm.png);
// background-size: 100% 20%;
// background-repeat: no-repeat;
// background-position: 0% 109%;
.reportBlockBox {
width: 75%;
// height: 90%;
// background: papayawhip;
// box-shadow: 0PX 0PX 10PX 3PX #ccc;
// background: #f5f9fd;
// background: #fff;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
// padding: 10PX 10PX;
border-radius: 10px;
overflow: hidden;
transition: all 0.2s linear;
.top {
width: 100%;
height: 28%;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding: 20px 0px;
color: #fff;
font-weight: 600;
font-size: 1.2em;
.lucky {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.luckyNum {
font-size: 1.8em;
}
.luckyText {
font-size: 1em;
margin-top: 5%;
}
}
div {
width: 20%;
background: #2eaeff;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
margin-left: 3%;
border-radius: 15px;
box-shadow: 0px 8px 20px 0px rgba(46, 174, 255, 0.5);
}
}
.belowTable {
width: 100%;
// height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin-bottom: 100px;
ul {
width: 100%;
max-height: 650px;
min-height: 200px;
// height: 100%;
// background: #2EAEFF;
// padding: 20PX 0PX;
padding: 0;
margin: 0;
overflow: hidden;
// overflow-y: auto;
// background: #2EAEFF;
.table-title {
position: sticky;
top: 0px;
background: #d2c3ea;
padding: 0px 10px;
color: #433278;
font-weight: 600;
.hash {
width: 58%;
text-align: left;
margin-left: 5%;
}
.blockRewards {
width: 18%;
font-weight: 600;
font-size: 0.95em;
text-align: left;
margin-left: 1%
}
.transactionFee {
width: 18%;
font-weight: 600;
font-size: 0.95em;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.95em;
}
}
li:nth-child(even) {
background-color: #ffff;
background: #f8f8fa;
}
li {
width: 100%;
list-style: none;
display: flex;
cursor: pointer;
justify-content: space-around;
align-items: center;
height: 60px;
// background: rgba(0, 0, 0, 0.05);
span {
height: 100%;
width: calc(100% / 5);
line-height: 60px;
font-weight: 600;
text-align: center;
font-size: 0.95rem;
}
}
.currency-list {
background: #efefef;
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
// margin-top: 0.5%;
padding: 0px 10px;
margin-top: 10px;
background: #f8f8fa;
border: 1px solid #efefef;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hash {
width: 58%;
margin-left: 5%;
text-align: left;
}
.reward{
width: 18%;
text-align: left;
margin-left: 1%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
}
}
.reportBlockBox:hover {
box-shadow: 3px 3px 10px 4px #d2c3e9;
}
}
.interval {
// display: flex;
// background: red;
// width: 100%;
// height: 30PX;
span {
margin-left: 10px;
cursor: pointer;
transition: all 0.2s linear;
}
span:hover {
color: #2eaeff;
}
}
.footerBox {
display: flex;
justify-content: space-around;
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(204, 204, 204, 0.1);
// margin-top: 1%;
}
.footerSon {
width: calc(100% / 3);
height: 80%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
// background: greenyellow;
}
.active {
background: #6e3edb;
color: #fff;
}
.el-card {
background: transparent;
padding-left: 12%;
box-shadow: none;
border: none;
}
.monitor-list {
display: flex;
justify-content: space-between;
// align-items: center;
height: 9vh;
width: 86%;
// background: #fff;
box-shadow: 0px 0px 10px 3px #ccc;
border-radius: 5px;
background: #fff;
// background: #2eaeff;
i {
font-size: 0.8em;
}
.btn {
// border: 1PX solid #b3d8ff;
width: 50px;
height: 100%;
line-height: 9vh;
text-align: center;
cursor: pointer;
background-color: #ecf5ff;
// icon
font-size: 24px;
color: #000;
background: #d2c3e9;
transition: all 0.3s linear;
&:hover {
background-color: #e0dfff;
}
}
.left {
border-radius: 5px 0px 0px 5px;
box-shadow: 0px 0px 5px 1px #ccc;
}
.right {
border-radius: 0px 5px 5px 0px;
box-shadow: 0px 0px 5px 1px #ccc;
}
.list-box {
width: calc(100vw - 100px);
overflow: hidden;
display: flex;
align-items: center;
justify-items: center;
.list {
// width: calc(100vw - 100PX);
width: 100%;
display: flex;
transform: all 2s;
display: flex;
align-items: center;
justify-items: center;
padding-left: 2%; //添加币种的时候取消
height: 90%;
.list-item {
width: 120px;
height: 95%;
text-align: center;
// background: palegoldenrod;
// padding: 10PX;
cursor: pointer;
margin-left: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
border-radius: 10px;
transition: all 0.3s linear;
padding: 5px;
span {
width: 100%;
height: 25%;
border-radius: 5px;
padding: 0px 2px;
text-transform: capitalize;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 2.3vw;
}
}
.list-item:hover {
font-size: 1rem;
box-shadow: 0px 0px 3px 1px rgba(210, 195, 234, 0.8);
// padding: 5PX;
span {
background: #6e3edb;
color: #fff;
}
img {
width: 38px;
}
}
position: relative;
left: 0;
transition: left 1s;
}
}
}
// -----------------------
// .currencyBox {
// width: 75%;
// // background: palegoldenrod;
// // background: gold;
// display: flex;
// justify-content: center;
// align-items: center;
// border: 1px solid #ccc;
// box-shadow: 5px 5px 10px 2px #ccc;
// padding: 5px 20px;
// position: relative;
// border-radius: 10px;
// overflow: hidden;
// .leftSliding {
// position: absolute;
// left: 0;
// top: 0;
// width: 3%;
// height: 100%;
// background: #D2C3E9;
// display: flex;
// align-items: center;
// justify-content: center;
// i {
// font-size: 1.5em;
// }
// }
// .rightSliding {
// position: absolute;
// top: 0;
// right: 0;
// width: 3%;
// height: 100%;
// background: #D2C3E9;
// display: flex;
// align-items: center;
// justify-content: center;
// i {
// font-size: 1.5em;
// }
// }
// .currencyContent {
// width: 94%; // 调整为扣除左右滑动模块后的宽度
// overflow: auto;
// display: flex;
// flex-wrap: nowrap;
// }
// .sunCurrency {
// width: 7%;
// display: flex;
// justify-content: space-between;
// align-items: center;
// flex-direction: column;
// padding: 5px 2px;
// border-radius: 22px;
// // border: 1px solid rgba(223, 83, 52, 0.3);
// cursor: pointer;
// font-weight: 600;
// margin-left: 5px;
// // width: 9%;
// // background: rgba(223, 83, 52, 0.05);
// height: 70px;
// font-size: 0.7em;
// transition: all 0.2s linear;
// // background: #433278;
// img {
// width: 35px;
// margin-left: 5%;
// }
// span {
// text-transform: uppercase;
// // margin-top: 5px;
// // background: gold;
// width: 90%;
// text-align: center;
// // height: 25px;
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 5px 3px;
// border-radius: 5px;
// }
// }
// .sunCurrency:hover {
// // background: rgba(223, 83, 52, 0.05);
// // background: #D2C3E9;
// // font-size: 0.8em;
// span {
// background: #6E3EDB;
// color: #fff;
// }
// img {
// width: 30px;
// margin-left: 5%;
// }
// // box-shadow: 0px 0px 5px 3px rgba(223, 83, 52, 0.05);
// // span{
// // background: #621BFF;
// // color: #fff;
// // border-radius: 10%;
// // }
// }
// }
.timeActive {
color: #5721e4;
}
.describeBox{
width: 100%;
text-align: center;
margin-top: 30px;
font-size: 0.85rem;
overflow: hidden;
max-height: 100px;
p{
margin: 0 auto;
width: 72%;
text-align: left;
padding: 0px 20px;
background: #e7dff3;
border-radius: 8px;
padding: 10px 20px;
display: flex;
align-items: start;
.describeTitle{
font-weight: 600;
color: #6E3EDB;
}
i{
color: #6E3EDB;
margin-right: 5px;
line-height: 18px;
}
// letter-spacing: 2px;
.view{
cursor: pointer;
margin-left: 8px;
color: #6E3EDB;
}
.view:hover{
color: #000;
}
}
}
</style>
<style>
.el-input.is-disabled .el-input__inner {
color: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 220px) and (max-width: 1279px) {
.el-menu--horizontal {
width: 100%;
}
}
</style>