<template>
<div class="my">
  <div class="logo">
    <img src="http://121.5.58.50:8088/logo.png" alt="">
  </div>
  <div class="header">
    <div class="left">
      <span class="title">{{ userInfo.mobile }}</span>
      <span class="des">{{ userInfo.houseAddress || '未绑定房产信息'  }}</span>
    </div>
    <img class="img" src="http://121.5.58.50:8088/sport.png" alt="">
  </div>
  <div class="join" @click="goBinding">
    <img class="img" src="http://121.5.58.50:8088/sport.png" alt="">
    <div class="right">
      <span class="title">绑定房屋信息，完善业主档案，参与业主委员会投票！</span>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "my",
  data(){
    return {
      userInfo:{}
    }
  },
  mounted() {
    this.getUserInfo()
  },
  methods:{
    getUserInfo(){
      this.$api.getUserInfo().then(res=>{
        this.userInfo = res.content
      })
    },
    goBinding(){
      this.$router.push({name:'binding'})
    }
  }
}
</script>

<style scoped lang="less">
.my{
  .logo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    img{
      width: 40px;
      height: 40px;
      border-radius: 100%;
    }
  }
  .header{
    display: flex;
    margin: 36px;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 72px);
    .left{
      display: flex;
      flex-direction: column;
      span{
        display: inline-block;
        width: 100%;
        text-align: left;
      }
      .title{
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #01040D;
        line-height: 32px;
      }
      .des{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #75818F;
        line-height: 22px;
        margin-top: 10px;
      }
    }
    .img{
        width: 48px;
      height: 48px;
      border-radius: 20px;
    }
  }
  .join{
    width: 327px;
    height: 95px;
    background: #9586FB;
    margin: 0 auto;
    box-shadow: 0px 13px 40px 0px rgba(27,25,86,0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    color: white;
    .img{
      width: 60px;
      height: 60px;
      padding: 15px;
      border-radius: 20px;
    }
    .right{
      display: flex;
      flex-direction: column;
      .title{
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: white;
        text-align: left;
      }
      .des{
        margin-top: 10px;
        display: inline-block;
        white-space: nowrap;

        //display: -webkit-box;
        //　 overflow: hidden;
        //　　text-overflow:ellipsis;
        //　　white-space: nowrap;

        word-break: break-all;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        height: 40px;
        font-size: 13px;
        font-weight: 400;
        color: #75818F;
        text-shadow: 0px 13px 40px rgba(27,25,86,0.06);

      }
    }
  }

}
</style>