<template>
 <div class="home">
      <div class="header">
           <h2 @click="back1"><</h2><h1>心仪我的</h1>
         </div>
         <router-link  to='/xiangQing'  class="details1" v-for="item in arr" :key="item.id">
      <!-- <div class="details1" v-for="item in arr" :key="item.id" > -->
           <div class="details2">
              <img :src="item.avatar"  alt="" @click="goFangDa">
           </div>

           <p>{{item.nickname}}</p>
           <div class="block">{{item.about_me}}</div>
      <!-- </div> -->
    </router-link>
  </div>
</template>
<script>

export default {
  name: 'home',
  components: {

  },
  data () {
    return {
       arr:[]
    }
  },
   mounted: function(){
       this.getData()

    },
    created () {

    },
    methods: {
      goFangDa () {
        this.$router.push("/fangDa");
      },
      back1 () {
        this.$router.go(-1);
      },
       getData () {
        let that = this

        this.$axios.post('/api/Center/like_me', {}).then((res) => {
           that.arr = res.data
           console.log(res.data)
        }).catch((error) => {
          console.log(error)
        })
      }
    }
}
</script>
<style lang="scss" scoped>
 .home{
    width:100%;
    // height:100%;
    background:#11A7FC;
    padding-top:10%;
    padding-left:5%;
     flex-wrap:wrap;
    //  min-height:0rem;
     overflow-y:scroll;
     display:flex;
    //  flex: 1;
      .header{
       width:90%;
       height:.3rem;
      //  background:red;
      margin-bottom:.3rem;
       h1{
         font-size:.2rem;
         line-height:.3rem;
         color:#fff;
        //  text-align:center;
        margin-left:35%;
       }
       h2{
      font-size:.2rem;
      color:#fff;
      // margin-bottom:.5rem;
      line-height:.3rem;
      float:left;
      }

     }
      .details1{
       width:35%;
       height:1.4rem;
       background:#fff;
       border-radius:.25rem;
      margin:0.04rem 0.08rem  0.03rem 0rem;
      padding:5%;
      display:block;
       .details2{
         width:.4rem;
         height:.4rem;
         border-radius:.5rem;
        //  background:red;
         float:left;
         margin-right:.1rem;

         img{
           width:100%;
           height:100%;
           border-radius:.5rem;
            float:left;
            margin-right:.1rem;

         }
       }
       p{
         font-size:.14rem;
         line-height:.4rem;

       }
       .block{
          width:1.3rem;
          height:1rem;
          // background:blue;
          font-size:.15rem;
          color:#3D444C;
          margin-top:.1rem;
       }
        }
  }
</style>