<template>
  <div class="my">
    <div class="header">
       <div class="header1"><img src="../assets/1.png" alt=""><img src="../assets/5.png" alt="" class="tp" @click="goProfile"></div>
       <div class="header2"><p>名字</p><img src="../assets/6.png" alt=""><span>普通会员</span></div>
    </div>
    <div class="num">
      <li @click="goMeAdmire"><p>0</p><span>我心仪</span></li>
      <li @click="goAdminMe"><p>0</p><span>心仪我</span></li>
    </div>
    <div class="banner">
       <div class="banner1">
          <div class="banner2"><img src="../assets/2.png" alt=""></div>
          <h1>高级会员</h1>
          <p>拥有专属权益</p>
          <div class="banner3"  @click="goSeniorMember">
            <p>了解详情</p>
          </div>
       </div>
  </div>
     <div class="footer">
       <ul>
         <li><i class="iconfont icon-tuku"></i><p>我的相册</p><span @click="handler">></span></li>
         <li><i class="iconfont icon-xiugaimima"></i><p>修改密码</p><span @click="handler1">></span></li>
        <li><i class="iconfont icon-kefudianhua"></i><p>客服热线</p><span @click="handler2">></span></li>
       </ul>
     </div>
     <van-popup v-model="show" position="bottom" round :style="{ height: '22%' }">
         <h1>400-888-8888</h1>
         <p>(服务时间9:00-20:00)</p>
         <div class="btn">取消</div>
     </van-popup>
        <button @click="goShow">退出登录</button>
  </div>
</template>
<script>
export default {
  name: 'my',
  components: {

  }, data() {
    return {
      show: false,
    }
  },
  methods: {
        handler () {

          this.$router.push('/myAlbum')

        },
        handler1 () {
          this.$router.push('/changePassword')
        },
        handler2 () {
          this.show=true;
        },
        goProfile() {
          this.$router.push('/myProfile');
        },
        goShow () {
          this.$router.push('/show');
        },
        goSeniorMember (){
          this.$router.push('/seniorMember')
        },
        goMeAdmire () {
          this.$router.push('/meAdmire')
        },
        goAdminMe () {
          this.$router.push('/admireMe')
        }
      }
}
</script>
<style lang="scss" scoped>
  .my{
    width:100%;
    height:100%;
    background:#11A7FC;
    .header{
      width:100%;
      height:.94rem;
      // background:#fff;
      // margin:30px;
      .header1{
        width:0.64rem;
        height:0.64rem;
        // margin:0 16px;
        margin:0.3rem;
        border-radius:50%;
        // background:#FFF;
        float:left;
        position:relative;
        img{
           width:100%;
           height:100%;
           margin-bottom:0.45rem;
        }
        .tp{
          width:.18rem;
          height:.18rem;
          position:absolute;
           top:.45rem;
           right:.0rem;
        }
      }
      .header2{
        width:2rem;
        height:.68rem;

        float:left;
        margin-top:.36rem;
        float:left;
        p{
          font-size:.2rem;
          color:#fff;
          margin-bottom:.1rem;
        }
        img{
          width:.2rem;
          height:.2rem;
          margin-bottom:.45rem;
          float:left;
        }
        span{
          font-size:.14rem;
          color:#fff;
           margin-bottom:.4rem;
           float:left;
           margin-left:.1rem;

        }

        }
      }
      .num{
      width:100%;
      height:.6rem;
      // background:red;
      display:flex;
      justify-content:space-evenly;
      li{
        list-style:none;
         display:flex;
         width:50%;
         justify-content:center;
         align-items:center;
          flex-direction: column;
          color:#fff;
          p{
             font-size:0.28rem;
          }
          span{
            display:inline-block;
            font-size:0.12rem;
          }
      }
      li:nth-child(1){
        border-right:1px solid #fff;
        // padding-right:60px;
      }

     }
     .banner{
       width:92%;
       height:.61rem;
       margin:.16rem;
       border-radius:.05rem;
       background:#fff;
      background:url(../assets/3.png)  100%;
      .banner1{
        width:90%;
        height:.28rem;
        // background:red;
        margin-top:.28rem;
        padding-top:.20rem;
        margin-left:.15rem;
        .banner2{
          width:.18rem;
          height:.18rem;
          float:left;
          margin:-0.7rem 0.1rem ;
          img{
            width:100%;
            height:100%;
            // margin-right:0.5rem;
          }
        }
        h1{
          float:left;
          font-size:.16rem;
          color:#784700;
          margin:0.01rem 0.05rem 0 0.4rem;
        }
        p{
           float:left;
          font-size:.12rem;
          // margin:0rem 0rem 0.1rem 0.1rem;
          margin-left:.08rem;
          margin-top:.05rem;
          color:#784700;
        }
        .banner3{
          width:0.8rem;
          height:.25rem;
          background:#784700;
          float:left;
          margin-left:9%;
          border-radius:.20rem;
          p{
            font-size:.12rem;
            color:#FFBB6D;
            text-align:center;
            margin-left:0.15rem;
            // line-height:.25rem;
            margin-bottom:.2rem;
          }

        }

      }
     }
     .footer{
       width:90%;
       height:1.8rem;
       background:rgba(255,255,255,0.13);
       margin-left:5%;
       ul{
         width:100%;
         height:1.8rem;
        //  background:red;
         li{
           width:100%;
           height:.6rem;
           list-style:none;
           position:relative;
           .iconfont{
              float:left;
              line-height:.6rem;
              margin: 0 8% 0 8%;
               font-size:.2rem;
               color:#FFF;
           }
           p{
             font-size:0.16rem;
             color:white;
             line-height:.6rem;
             z-index:1;
             float:left;
           }
           span{
            //  display:inline-block;
             font-size:.2rem;
             color:#fff;
             float:left;
             line-height:.6rem;
             position:absolute;
             right:5%;
           }
         }
       }
     }
     .van-popup h1{
         font-size:.4rem;
         color:#11A7FC;
         text-align:center;
         line-height:.5rem;

     }
     .van-popup p{
           font-size:.2rem;
           color:#8C9198;
            text-align:center;
           line-height:.4rem;
         }
         .van-popup .btn{
            width:100%;
            font-size:0.2rem;
            height:.5rem;
            text-align:center;
            line-height:.5rem;
            border-top:1px solid #ccc;

         }
         button{
           width:1.5rem;
           height:.4rem;
           background:#fff;
           font-size:.2rem;
           color:#fff;
           background:#e7dcdc1a;
           border:none;
           margin-left:30%;
           border-radius:.2rem;
          //  opacity:0.3;
         }
    }

</style>