<template>
  <div class="personalCenter">


    <section v-if="$isMobile" class="personalBox2">
        <div   v-show="$route.path === `/${$i18n.locale}/personalCenter`"  @click="handelMenuItem(item.path)" class="menuItem"  v-for="item in menuList" :key="item.label">
          <i :class="item.icon" class="ic"></i>
          <span class="titleText" slot="title">{{ $t(item.label) }}</span>
        </div>

        <router-view v-show="$route.path !== `/${$i18n.locale}/personalCenter`"></router-view>
    </section>


    <div class="personalBox  " v-else>
      <div class="personalLeft">
        <div class="LeftHead">
          <div class="Avatar">
            <i class="iconfont icon-morentouxiang headIcon"></i>          
          </div>
          <p class="emailBox">{{ userEmail }}</p>
        </div>
        <div class="LeftMenu">
          <el-menu
          
            :default-active="activePath"
            class="el-menu-vertical-demo"
         
          
          >
            <el-menu-item style="padding-left: 18px;" :index="item.path" v-for="item in menuList" :key="item.path"   @click="handelMenuItem(item.path)">
              <i :class="item.icon" class="ic"></i>
              <span class="titleText" slot="title">{{ $t(item.label) }}</span>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="personalRight">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import IndexJs from "./index";

export default {
  mixins: [IndexJs],
};
</script>

<style lang="scss" scoped>

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

  .personalCenter{
    height: auto !important;
    min-height: 200px !important;
    background: transparent !important;
    padding:0px !important;
  }
  .personalBox2{
    width: 100% !important;
    height: auto !important;
    // display: inline-block !important;
    padding: 15px !important;
    min-height: 360px;
   
  }
  .menuItem{
    width: 95%;
    height: 45px;
    background: #D2C3EA;
    margin-top: 18px;
    line-height: 45px;
    padding: 0px 18px;
    font-size: 0.9rem;
    border-radius: 5px;
    overflow: hidden;
    .titleText{
      margin-left: 8px;
    }
  }

}




.personalCenter {
  width: 100%;
  min-height: 800PX;
  display: flex;
  justify-content: center;
  padding: 30PX 0PX;
  // background: #f5f9fd;
  background: #FFF;
  background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 30% -15%;  
    padding-top: 60PX;
  .personalBox {
    width:100%;
    display: flex;
    justify-content:center;
    height: 800PX;
    padding: 0px 10%;
   
    flex-wrap: nowrap;
    position: relative;
    overflow: hidden;
    .personalLeft {
   
      // background: #fff;
      // box-shadow: 0 0 10PX 0 rgba(0, 0, 0, 0.1);
      // background: palegoldenrod;
      display: flex;
      flex-direction: column;
      // background: gold;
      // width: 15%;
     
      .LeftHead {
        height: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      
        .Avatar {
          width: 100PX;
          height: 100PX;
          border: 1PX solid rgba(0, 0, 0, 0.1);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          .headIcon{
            font-size: 100PX;
            text-align: center;
          }
        }
        .emailBox{
          // padding-right: 5px;
          font-size: 0.95rem;
          margin-top: 8px;
          max-width: 230px;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(0, 0, 0, 0.8);
          
        }
      }

      .LeftMenu {
       width: 100%;
       min-width: 160px;
       padding-left: 8px;
        .ic {
          font-size: 16PX;
          color: #409EFF;
          font-weight: bold;
          border:1PX solid #409EFF;
          padding: 3PX;
          border-radius: 50%;
        }
        .titleText {
          margin-left: 5PX;
        }
      }
    }
    .personalRight {
      width:78%;
      background: #FFF;
      padding: 10PX;
      height: 80%;
      border-radius: 20PX;
    //  overflow-y: auto;
    //  overflow: hidden;
     border:2PX solid #885bcd;
     box-shadow: 5PX 3PX 3PX 3PX rgba(190, 160, 223, 0.5);
     /* 隐藏滚动条 */
      scrollbar-width: none;
      -ms-overflow-style: none;
      border-right: none;
      overflow: hidden;
    }
    .personalRight::-webkit-scrollbar{
      width: 0;
      height: 0;
    }
  }
}
.personalCenter::after{
  content: "";
  width: 100%;
  height: 180PX;
  position: absolute;
  bottom: 25%;
  left: 0;
  // background: red;
  //  background-image: url(../../assets/img/miningAccount/btm.png);
    // background-size:100% 53%;
    // background-repeat: no-repeat;
    // background-position: 0% 138%;
 
}


.el-menu{
  background-color: transparent; /* 设置背景色为透明 */
}
.el-menu-item{
  position: relative;
  border-radius: 30PX 0PX 0PX 30PX ;
  transition: all 0.2s linear;
  width: 101%;
 
 
}
.el-menu-item:hover{
  width: 100%;
  box-shadow: 0PX 3PX 0PX 0PX rgba(190, 160, 223, 0.5);
}


.el-menu-item.is-active{
  width: 101%;
  border:2PX solid  #885bcd;
  border-radius: 30PX 0PX 0PX 30PX ;
  border-right: none;
  box-shadow: 0PX 5PX 0PX 0PX rgba(190, 160, 223, 0.5);
  .el-menu-item::after{
    display: block;
  }
}
.el-menu-item.is-active.el-menu-item::after
{
      content: "";
      width: 6PX ;
      height: 100%;
      // background: palegoldenrod;
      background: #fff;
      position: absolute;
      top: 0;
      right: -3PX;
      z-index: 99;
     
    }


</style>