<template>
  <div class="rate">
    <section v-if="$isMobile" class="rateMobile">
        <h4>{{$t(`course.rateRelated`)}}</h4>
        <div class="tableBox" >
        <div class="table-title">
          <span :title="$t(`course.currency`)">{{$t(`course.currency`)}}</span>
          <span :title="$t(`course.miningFeeRate`)" >{{$t(`course.miningFeeRate`)}}</span>             
        </div>
        <el-collapse accordion>     
            <el-collapse-item v-for="item in rateList" :key="item.value" :name="item.value" >
                <template slot="title">
                    <div class="collapseTitle">
                     <span ><img :src="item.img" alt="coin" loading="lazy"> {{item.label}}</span>
                     <span v-if="item.value === 'enx'"> {{ $t(`course.timeLimited`) }} 0%</span>
                     <span v-else>{{item.rate}}</span>
                    </div>
              </template>
              <section class="contentBox2">
                <div class="belowTable">
              <div >
              <p>{{$t(`course.minimumPaymentAmount`)}}</p>
              <p >{{item.quota}} </p>
            </div>
           
            </div>
            
            <div class="belowTable">
              <div>
                <p>{{$t(`course.settlementMode`)}}</p>
                <p>{{item.mode}}</p>
              </div>
             
            </div>


            <div class="belowTable">
              <div>
                <p>{{$t(`course.miningAddress`)}}</p>
                <p>{{item.address}} </p>
              </div>
             
             
            </div>
              </section>
          
          
            </el-collapse-item>
          
          </el-collapse>
    
   

      </div>
    </section>

      <section class="rateBox" v-else>
        
          <section class="leftMenu">
            <ul>
              <li>{{$t(`course.rateRelated`)}}</li>
            </ul>

          </section>
          <section class="rightText">
            <h2>{{$t(`course.rateRelated`)}}</h2>
            <section class="table">
              <div class="tableTitle">
                <span>{{$t(`course.currency`)}}</span>
                <span>{{$t(`course.miningAddress`)}}</span>
                <span>{{$t(`course.miningFeeRate`)}}</span>
                <span>{{$t(`course.settlementMode`)}}</span>
                <span>{{$t(`course.minimumPaymentAmount`)}}</span>
              </div>
              <ul>
                <li v-for="item in rateList" :key="item.value">
                  <span class="coin"><img :src="item.img" alt="coin" loading="lazy"> {{item.label}}</span>
                  <span>{{item.address}}</span>
                  <span v-if="item.value === 'enx'"> {{ $t(`course.timeLimited`) }} 0%</span>
                  <span v-else>{{item.rate}}</span>
                  <span>{{item.mode}}</span>
                  <span>{{item.quota}}</span>
                </li>
               
               
              </ul>
            </section>

          </section>

      </section>

  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '费率页面,挖矿费率,收益计算,全网最低费率,Rate Page,Mining Rates,Revenue Calculation,Lowest Rates on the Net'
      },
      {
        name: 'description',
        content:window.vm.$t(`seo.rate`)
      }
    ]
  },
  mixins:[IndexJs]
}
</script>

<style scoped lang="scss">

  // 手机端适配
  @media screen and (min-width: 220px) and (max-width: 1279px) {

    .rate{
      min-height: 360px !important;
      background: transparent !important;
      padding-top: 20PX !important;
    }
    .rateMobile{
      padding: 10px;
    }
    h4{
      color: rgba(0,0,0,0.8);
      padding-left: 5%;
    }
    .tableBox{
    margin: 0 auto;
    width: 98%;
    min-height: 300px;
    // background: palegoldenrod;
    overflow: hidden;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 2px #ccc;
    margin-top: 10px;
    .table-title{
      height: 50px;
      background: #D2C4E8;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      padding-left: 0 !important;
      span{
        text-align: center;
      }
      span:nth-of-type(1){
        width:30% !important;
      }
      span:nth-of-type(2){
        width:70% !important;
      }
    }
    .collapseTitle{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 0 !important;
      font-size: 0.95rem !important;
      span{
        text-align: center;
      }
      span:nth-of-type(1){
        width:40% !important;
        display: flex;
        align-items: center;
        justify-content: left;
        padding-left: 4%;
        img{
          width: 20px;
          margin-right: 5px;
        }
      }
      span:nth-of-type(2){
        width:60% !important;
      }

    
    }

   ::v-deep .el-collapse-item__wrap{
    background: #F0E9F5;
    }
    .belowTable{   
    
       margin-top: 8px;
      
        div {
          width: 50%;
          height: auto;
          text-align: left;
          padding-left: 8%;  
          font-size: 0.85rem !important; 
          p:nth-of-type(1){
            font-weight: 600;
          }
        }
       
      }


        .paginationBox{
          text-align: center;
        }
  }
  
  }


  .rate{
    width: 100%;
    min-height: 600PX;
    background: #fff;
    background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 30% -15%;
    padding: 0;
    margin: 0;
    padding-top: 60PX;
    font-size: 0.9rem;

  }
  .rateBox{
    width: 80%;
    margin: 0 auto;
    min-height: 700PX;
    display: flex;
    justify-content: center;
  
    border-radius: 8PX;
    overflow: hidden;
    padding: 20PX;
    transition: 0.3S linear;

    .leftMenu{
      width: 18%;
      text-align: center;
      margin-right: 2%;
      padding-top: 50PX;
      box-sizing: border-box;
      box-shadow: 0px 0px 5px 2px #ccc;
      border-radius: 8px;
      overflow: hidden;
      padding: 10px;
      ul{
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0;
        li{
          list-style: none;
          min-height: 40PX;
          display: flex;
          align-items: center;
          justify-content: center;    
          margin-top: 10PX;
          border-radius: 5PX;
          background: rgba(210,195,234,0.3);
    
          width: 90%;
          padding:8px 8px;
          font-size: 0.9rem;
          text-align: left;
        }
      }
    }
    .rightText{
      box-sizing: border-box;
      width: 80%;
      box-shadow: 0px 0px 5px 2px #ccc;
      border-radius: 8px;
      overflow: hidden;
      padding: 10px;
    text-align: center;
    padding-top:30px;
    h2{
      text-align: left;
      padding-left: 50px;
      margin-bottom: 20px;
    }
  
     .table{
      width: 100%;
      text-align: center;
      display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
     }
      .tableTitle{
            width: 90%;
          
            display: flex;
            align-items: center;
            height: 60PX;
            background: #D2C3EA;
            border-radius: 5px 5px 0px 0px;
            span{
              display: inline-block;
              width: calc(100%/5);
              text-align: center;
            }
          } 
      ul{
        width: 90%;
   
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
       
        li{
          width: 100%;
          list-style: none;
          display: flex;
          align-items: center;
          height: 50PX;
          background: #F8F8FA;
          margin-top: 8PX;
          font-size: 0.95rem;
          span{
            display: inline-block;
              width: calc(100%/5);
              text-align: center;
          }
          .coin{
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 4%;
            text-transform: uppercase;
            img{
              width: 22px;
              margin-right: 5px;
            }
          }
        }
        // li:nth-child(even) {
        //         background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
        //     }

      }
    }
  }

</style>