<template>
  <div class="dataMain">

     <section class="content">
        <!-- <p class="title">m2pool <span>矿池</span> </p> -->
        <p class="title2" >{{ $t(`chooseUs.why`) }}</p>
         <section class="topBox">
            <div class="top top1">
                <div class="icon">
                    <img style="width:45px" src="../../assets/img/miningAccount/钱包.svg" alt="wallet" loading="lazy">
                    <h4 >{{ $t(`chooseUs.title1`) }}</h4>
                </div>
              
              
                <p>&nbsp;&nbsp;&nbsp; {{ $t(`chooseUs.text1`) }}</p>

            </div>
            <div class=" top top2">
                    <div class="icon">
                        <img src="../../assets/img/miningAccount/安全.svg" alt="security" loading="lazy">
                        <h4>{{ $t(`chooseUs.title2`) }}</h4>
                    </div>
                
               
                <p> &nbsp;&nbsp;&nbsp; {{ $t(`chooseUs.text2`) }}</p>

            </div>
            <div class=" top top3">
                    <div class="icon">
                    <img src="../../assets/img/miningAccount/客服.svg" alt="customer service" loading="lazy">
                    <h4>{{ $t(`chooseUs.title3`) }}</h4>
                    </div>
              
             
                <p> &nbsp;&nbsp;&nbsp; {{ $t(`chooseUs.text3`) }}</p>

            </div>
         </section>

         <!-- <section class="currencyDisplay">
          

            <div class="currency" v-for="item in currencyList" :key="item.value">
                <h3><img :src="item.imgUrl" alt="coin" loading="lazy"> {{item.label}}</h3>
                <p class="describe">{{item.describe}}</p>
              
              
            </div>

         </section> -->

     </section>
  </div>
</template>

<script>
import IndexJs from "./index";
export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>
.dataMain{
    width: 100%;
    // min-height: 100vh;
    background: #fff;
  background-image: url(../../assets/img/miningAccount/top.png);
  background-size: 100% 30%;
  background-repeat: no-repeat;
  background-position: 10% -15%;
  padding: 0;
  margin: 0;
  padding-top: 60PX;
  .content{
    width: 85%;
    min-height: 300px;
    margin: 0 auto ;
    // background: palegoldenrod;
    padding: 20px;
    border-radius: 5px;
  
    .title{
       font-size: 30px;
       color:#651FFF ;
     font-weight: 600;
        
    span{
       color: rgba(0,0,0,0.7); 
    }
    }
    .title2{
        font-size: 28px;
        color: rgba(0,0,0,0.7);
        width: 100%;
        text-align: center;
        letter-spacing: 3px;
        color:#651FFF ;
        font-weight: 600;
    }
    .topBox{
        width: 100%;
        min-height: 230px;
        // background: palegoldenrod;
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .top{
            width: 360px;            
            height: 440px;
            // background: paleturquoise;
            border-radius: 18px;
            box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.1);
            transition: all 0.2s linear;
            padding: 18px;
            box-shadow: 0px 0px 5px 2px #d2c3ea;
            padding-top: 30px;
          
            h4{
                color: #651FFF;
                margin-top: 18px;
            }
            p{
                margin-top: 10px;
                font-size: 0.9rem;
                line-height: 25px;
                
               
            }
            .icon{
                width: 100%;
                text-align: center;
                img{
                    width: 50px;
                }
            }
        }
     
    }

    .currencyDisplay{
        width: 100%;
        min-height: 300px;
        border-radius: 5px ;
        border:1px solid #ccc;
        margin-top: 30px;
        padding: 18PX 28px;
        .currency{
            width: 100%;
            min-height: 200px;
            padding: 10px 0px;
            margin-top: 20px;
            h3{
                margin-bottom: 8px;
                color: rgba(0,0,0,0.8);
                display: flex;
                align-items: center;
              text-transform: uppercase;
                img{
                    width: 25px;
                    margin-right: 8px;
                }
            }
            .describe{
                width: 100%;
                margin: 10px 0px;
                font-size: 0.9rem;
                padding-left: 8px;
            }
            .currencyTitle{
                width: 100%;
                height: 60px;
                background: #d2c3ea;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 18px;
                font-size: 0.95rem;
                border-radius: 5px;
                overflow: hidden;
                span{
                    width: 15%;
                 
                }
            }
            .currencyContent{
                width: 100%;
                min-height: 60px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0px 18px;
                font-size: 0.9rem;
                border-bottom: 1px solid #ccc;
                span{
                    width: 15%;
                 
                }
            }
            .charts{
                width: 100%;
                min-height: 300px;
                padding: 0px 18px;
                text-align: center;
            }
        }
    }
  }

}



</style>