<template>
  <div class="rate">
    <section v-if="$isMobile" class="rateMobile">
        <h4>{{$t(`course.allocationExplanation`)}}</h4>
        <div class="tableBox" >
        <div class="table-title">
          <span :title="$t(`course.currency`)">{{$t(`course.currency`)}}</span>
          <span :title="$t(`course.condition`)" >{{$t(`course.condition`)}}</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>{{$t(item.condition)}}</span>
                    </div>
              </template>
              <section class="contentBox2">
                <div class="belowTable">
              <div >
              <p>{{$t(`course.interval`)}}</p>
              <p >{{$t(item.interval)}} </p>
            </div>
           
            </div>
            
            <div class="belowTable">
              <div>
                <p>{{$t(`course.estimatedTime`)}}</p>
                <p>{{$t(item.estimatedTime)}}</p>
              </div>
         
            </div>
         

            <div class="belowTable describe">
              <div>
                <p>{{$t(`course.describe`)}}</p>
                <p>{{$t(item.describe)}} </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.allocationExplanation`)}}</h2>
            <section class="table">
              <div class="tableTitle">
                <span class="coin">{{$t(`course.currency`)}}</span>
                <span>{{$t(`course.condition`)}}</span>
                <span>{{$t(`course.interval`)}}</span>
                <span>{{$t(`course.estimatedTime`)}}</span>
                <span class="describe">{{$t(`course.describe`)}}</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>{{$t(item.condition) }}</span>
                  <span>{{ $t(item.interval)}}</span>
                  <span>{{$t(item.estimatedTime)}}</span>
                  <span class="describe">{{$t(item.describe)}}</span>
                </li>
               
               
              </ul>
            </section>

          </section>

      </section>

  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: '分配、转账说明,矿池分配,转账说明,Allocation,Transfer,Mining Pool,Pool allocation,Transfer instructions'
      },
      {
        name: 'description',
        content:window.vm.$t(`seo.allocationExplanation`)
      }
    ]
  },
  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%;
      font-size: 18px;
    }
    .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 {
          min-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: 90%;
      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: left;
              padding-left: 2%;
            }

            .coin{
              width: 18%;
              padding-left: 2%;
            }
            .describe{
              width: 35%;
            }
          } 
      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;
          min-height: 50PX;
          background: #F8F8FA;
          margin-top: 8PX;
          font-size: 0.85rem;
          max-height: 200px;
          overflow: hidden;
          span{
            display: inline-block;
              width: calc(100%/5);
              text-align: left;
              padding-left: 2%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
          }
          .coin{
            width: 18%;
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 2%;
            text-transform: uppercase;
            img{
              width: 22px;
              margin-right: 5px;
            }
          }
          .describe{
            width: 35%;
            text-align: left;
            padding-right: 8px;
            font-size: 0.8rem;
            word-wrap: break-word;       /* 允许长单词或URL地址换行到下一行 */
          word-break: break-word;      /* 在单词内换行 */
          white-space: pre-wrap;       /* 保留空白符序列，但是正常地进行换行 */
          overflow-wrap: break-word; 
          }
        }
        // li:nth-child(even) {
        //         background-color: #ffff; /* 甚至可以是你想要的任何颜色 */
        //     }

      }
    }
  }

</style>