3316 lines
85 KiB
Vue
3316 lines
85 KiB
Vue
<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"
|
||
v-show="item.value !== 'enx'"
|
||
>
|
||
<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;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
.moveCurrencyBox li:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.moveCurrencyBox li:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
.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;
|
||
// background: palegoldenrod;
|
||
|
||
}
|
||
.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> |