<template>
  <div>
    <section v-if="$isMobile">
      <!-- <HorizontalBroadcast 
          :broadcast-data="broadcastListForLoop"
          :auto-fetch="false"
          :lang="$i18n.locale"
          title="提示"
          :clickable="true"
          @item-click="handleCustomClick"
          @error="handleBroadcastError"
        /> -->

          <!-- 广播 -->
      <!-- <section class="describeBox">
        <p class="describe-row">
          <i class="iconfont icon-tishishuoming"></i>
          <span class="describeTitle">{{ $t(`home.describeTitle`) }}</span>
          <span class="broadcast-scroll-wrap">
            <div
              class="broadcast-scroll-list"
              :style="scrollStyle"
              ref="scrollList"
            >
              <div
                v-for="(item, idx) in broadcastListForLoop"
                :key="item.id + '-' + idx"
                class="broadcast-scroll-item"
              >
                {{ item.content }}
              </div>
            </div>
          </span>
          <span class="view" @click="handelJump(`/allocationExplanation`)">
            {{ $t(`home.view`) }}
          </span>
        </p>
      </section> -->

      <section class="describeBox">
        <div class="describe-row">
          <div class="broadcast-scroll-wrap">
            <div
              class="broadcast-scroll-list"
              @mouseenter="stopScroll"
              @mouseleave="startScroll"
              :style="scrollStyle"
            >
              <div
                v-for="item in broadcastList"
                :key="item.id"
                class="broadcast-scroll-item"
              >
                <i class="iconfont icon-tishishuoming"></i>
                <span class="describeTitle">{{
                  $t(`home.describeTitle`)
                }}</span>
                <span class="describeContent" :title="item.content"> {{ item.content }}</span>    
             
   
                <!-- 动态渲染多个按钮 -->
                <div
                  class="button-group"
                  v-if="item.buttonContent && Array.isArray(item.buttonContent) && item.buttonContent.length > 0"
                >
                 
                  <span
                    v-for="(buttonText, buttonIndex) in item.buttonContent"
                    :title="buttonText"
                    :key="`button-${item.id}-${buttonIndex}`"
                    class="view"
                     @click.stop="handelJumpBroadcast(item.buttonPath[buttonIndex])"
                  >
                    {{ buttonText || $t(`home.view`) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <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 style="width: 20px;" :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>
    

      <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 style="width: 35px;" :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">
        <div class="describe-row">
          <div class="broadcast-scroll-wrap">
            <div
              class="broadcast-scroll-list"
              @mouseenter="stopScroll"
              @mouseleave="startScroll"
              :style="scrollStyle"
            >
              <div
                v-for="item in broadcastList"
                :key="item.id"
                class="broadcast-scroll-item"
              >
                <i class="iconfont icon-tishishuoming"></i>
                <span class="describeTitle">{{
                  $t(`home.describeTitle`)
                }}</span>
                <span class="describeContent" :title="item.content"> {{ item.content }}</span>    
             
   
                <!-- 动态渲染多个按钮 -->
                <div
                  class="button-group"
                  v-if="item.buttonContent && Array.isArray(item.buttonContent) && item.buttonContent.length > 0"
                >
                 
                  <span
                    v-for="(buttonText, buttonIndex) in item.buttonContent"
                    :title="buttonText"
                    :key="`button-${item.id}-${buttonIndex}`"
                    class="view"
                    @click.stop="handelJumpBroadcast(item.buttonPath[buttonIndex])"
                  >
                    {{ buttonText || $t(`home.view`) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- 
      <HorizontalBroadcast 
           style="width: 72%;margin: 0 auto;margin-bottom: 10px;border-radius: 8px;"
          :broadcast-data="broadcastListForLoop"
          :auto-fetch="false"
          :lang="$i18n.locale"
          title="提示"
          :clickable="true"
          @item-click="handleCustomClick"
          @error="handleBroadcastError"
        /> -->

      <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";
import HorizontalBroadcast from "../../components/HorizontalBroadcast.vue";
export default {
  components: {
    HorizontalBroadcast,
  },
  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;
  }


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

  // .describe-row {
  //   width: 96% !important;
  //   font-size: 0.8rem;
  //   padding: 0 10px;
  //   span {
  //     display: inline-block;
  //   }
  // }
  .describeBox {
  width: 100%;
  text-align: center;
  margin: 0 !important;
  font-size: 0.85rem;
  overflow: hidden;
  max-height: 100px;

  p {
    margin: 0 auto;
    width: 100% !important;
    text-align: left;
    padding: 2px 5px  !important;
    // background: #e7dff3;
    border-radius: 0px !important;
    display: flex;
    align-items: center !important;
    // background: palegoldenrod !important;
    .describeTitle {
      font-weight: bold;
      margin-right: 8px;
      color: #5721e4;
      max-width: 63px;
      min-width: 41px !important;
    }
    i {
      color: #6e3edb;
      margin-right: 5px;
      line-height: 18px;
    }
    // letter-spacing: 2px;
    .view {
      cursor: pointer;
      margin-left: 8px;
      color: #6e3edb;
      // background: palegoldenrod;
      text-transform: uppercase ;
  

    }
    .view:hover {
      color: #000;
    }
 
  }
}


.describe-row {
      width:100% !important;
      margin: 0 auto;
      // background: #e7dff3;
      border-radius: 0px !important;
      // padding: 8px 20px;
      display: flex;
      justify-content: left;
      // align-items: center;
      // overflow: hidden;
      padding: 5px 0px;
    }


.broadcast-scroll-item {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // background: papayawhip;
}

.describeContent{
      display: inline-block;
      max-width: 70%;
      min-width: 100px !important;
      // background: palegoldenrod;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top; /* 修复 baseline 对齐问题 */
     }

.broadcast-scroll-list {

  padding-left: 5px !important;

}


.view{
    color: #5721e4;
    // font-size: 0.85rem;
    // margin-left: 5px;
    cursor: pointer;
    padding: 2px 2px;
  
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    max-width: 8vw !important;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: capitalize;

    
    &:hover {
      background-color: #5721e4;
      color: #fff;
      // border-color: #5721e4;
      transform: translateY(-1px);
      border-radius: 8px;
    }


}







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


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

  .describeBox {
  width: 100%;
  text-align: center;
  margin: 0 !important;
  font-size: 0.85rem;
  overflow: hidden;
  max-height: 100px;

  p {
    margin: 0 auto;
    width: 100% !important;
    text-align: left;
    padding: 2px 5px  !important;
    // background: #e7dff3;
    border-radius: 0px !important;
    display: flex;
    align-items: center !important;
    // background: palegoldenrod !important;
    .describeTitle {
      font-weight: bold;
      margin-right: 8px;
      color: #5721e4;
      max-width: 63px;
      min-width: 41px !important;
    }
    i {
      color: #6e3edb;
      margin-right: 5px;
      line-height: 18px;
    }
    // letter-spacing: 2px;
    .view {
      cursor: pointer;
      margin-left: 8px;
      color: #6e3edb;
      // background: palegoldenrod;
     text-transform: capitalize;

    }
    .view:hover {
      color: #000;
    }
 
  }
}


.describe-row {
      width:100% !important;
      margin: 0 auto;
      // background: #e7dff3;
      border-radius: 0px !important;
      // padding: 8px 20px;
      display: flex;
      justify-content: left;
      // align-items: center;
      // overflow: hidden;
      padding: 5px 0px;
    }


.broadcast-scroll-item {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // background: papayawhip;
}

.describeContent{
      display: inline-block;
      max-width: 70%;
      min-width: 100px !important;
      // background: palegoldenrod;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top; /* 修复 baseline 对齐问题 */
     }

.broadcast-scroll-list {

  padding-left: 5px !important;

}


.view{
    color: #5721e4;
    // font-size: 0.85rem;
    // margin-left: 5px;
    cursor: pointer;
    padding: 2px 2px;
  
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    max-width: 8vw !important;
    
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   text-transform: capitalize;

    
    &:hover {
      background-color: #5721e4;
      color: #fff;
      // border-color: #5721e4;
      transform: translateY(-1px);
      border-radius: 8px;
    }


}

}

@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;
 
  .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: capitalize;
        }
      }
      .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: capitalize;
//       // 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;
     text-transform: capitalize;

    }
    .view:hover {
      color: #000;
    }
  }
}


.describe-row {
  width: 73%;
  margin: 0 auto;
  background: #e7dff3;
  border-radius: 8px;
  // padding: 8px 20px;
  display: flex;
  justify-content: left;
  // align-items: center;
  // overflow: hidden;
  padding: 5px 0px;
}
.describeTitle {
  font-weight: bold;
  margin-right: 8px;
  color: #5721e4;
}
.broadcast-scroll-wrap {
  display: inline-block;
  min-width: 0;

  height: 30px; /* 必须和JS一致 */
  // overflow: hidden;
  position: relative;
  // background: palegoldenrod;
}
.broadcast-scroll-list {
  display: flex;
  flex-direction: column;
  // background: paleturquoise;
  // height: 28px;
  text-align: left;
  padding: 0;
  // margin-left: 8px;
  padding-left: 18px;
}
.broadcast-scroll-item {
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  height: 30px;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // background: papayawhip;
}

.describeContent{
      display: inline-block;
      max-width: 70%;
      // background: palegoldenrod;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: top; /* 修复 baseline 对齐问题 */
     }

.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;
 text-transform: capitalize;

}
.view:hover {
  color: #000;
}


  /* 按钮组样式 */
  .button-group {
    display: inline-flex;
    align-items: center;
    // margin-left: 10px;
    gap: 0px; /* 按钮之间的间距 */
  }
  
  .horizontal-item-separator {
    color: #ccc;
    margin: 0 15px;
    font-size: 12px;
  }

  .view{
    color: #5721e4;
    // font-size: 0.85rem;
    // margin-left: 5px;
    cursor: pointer;
    padding: 2px 2px;
  
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   text-transform: capitalize;

    
    &:hover {
      background-color: #5721e4;
      color: #fff;
      // border-color: #5721e4;
      transform: translateY(-1px);
      border-radius: 8px;
    }


}


.imgIcon img{
  max-width: 100px;
}
</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>