<template>
 <div class="home">
      <div class="header">
           <h2 @click="back1"><</h2><h1>我的资料</h1>
         </div>
         <div class="banner" @click="goMyAlbum" ></div>
          <p>点击修改头像</p>
          <div class="nav">
            <span>确保头像照片为本人清晰正脸照,一个良好的头像更能吸引到别人哦~</span>
          </div>
          <div class="main">
              <div class="main1">
                 <div class="left">自我介绍</div>
                 <div class="right" @click="goIntroduction" >去修改> </div>
              </div>
              <div class="main2">
                 在百忙之于还会想念着他心爱的女人那才是真正的好男人。被风吹到眼睛想你看到闪烁的路灯想你。
              </div>

              <div class="data">
                <div class="data1">
                      <div class="left">详细资料</div>
                      <div class="right" @click="goData">去修改></div>
                </div>
                <div class="data2">
                       <div class="x1">女</div><div class="x2">23岁</div>
                       <div class="x3">牛</div><div class="x4">狮子座</div>
                       <div class="x5">汉族</div><div class="x6">185cm</div>
                       <div class="x7">60kg</div><div class="x8">本科</div>
                       <div class="x9">年收入:2千 以下</div>
                </div>
                <div class="data3">
                    <div class="t1">
                       <span>毕业学校</span><p>北京科技大学</p>
                    </div>
                     <div class="t1">
                       <span>专业</span><p>工程</p>
                    </div>
                     <div class="t1">
                       <span>户籍地</span><p>背景</p>
                    </div>
                     <div class="t1">
                       <span>婚姻状态</span><p>未婚</p>
                    </div>
                     <div class="t1">
                       <span>工作单位</span><p>北京科技大学</p>
                    </div>
                    <div class="t1">
                       <span>职务</span><p>会计</p>
                    </div>

                </div>

              </div>
          </div>
           <div class="photo">
              <div class="photo1">
                <div class="left">我的证件</div>
                <div class="right" @click="goPhotoz">去修改></div>
              </div>
              <div class="photo2">
                <li></li>
              <li></li>
              <li></li>
              <li></li>
              </div>
           </div>
           <div class="footer">
             <div class="footer1">
                  <div class="left">择偶条件</div>
                <div class="right" @click="goCondition">去修改></div>
             </div>
             <div class="footer2">年龄和我同岁或者比我小，在加拿大这边或者国内的愿意来加拿大生活的，性格内向和外向都好，偏内向的话，两个人一样，偏外向的话两个人互补，主要看感觉。</div>
           </div>
  </div>
</template>
<script>

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

  },
 mounted: function () {
    //  this. goIntroduction()
  },
  methods: {
    goMyAlbum () {
      this.$router.push('/myAlbum')
    },
    back1 () {
      this.$router.go(-1)
    },
    goIntroduction () {
        let that = this
        let params = {
            about_me: that.about_me
        }
        that.$axios.post('/api/Center/up_about', params).then((res) =>{
             that. about_me = res.data
             console.log(that. about_me)
            this.$router.push('/introduction')
        }).catch((err) =>{
            console.log(err)
        })

    },
    goData () {
      let that= this
      let params = {
          sex: that.sex,
          age: that.age,
          born: that.born,
          star: that.star,
          minzu: that.minzu,
          height: that.height,
          weight: that.wieght,
          education: that.education,
          school: that.school,
          specialities: that.specialities,
          old_city: that.old_city,
          marriage: that.marriage,
          work_address: that.work_address,
          work: that.work,
          year_money: that.year_money,
          wechat: that.wechat
      }
      that.$axios.post('/api/Center/up_ziliao', params).then((res) => {
         that.sex = res.data
         console.log(that.sex)
        this.$router.push('/data')
      }).catch((err) => {
          console.log(err)
      })

    },
    goPhotoz () {
      let that = this
      let params = {
         card_zheng_avatar: that.card_zheng_avatar,
         card_fan_avatar: that.card_fan_avatar,
         card_school_avatar: that.card_school_avatar,
         card_marriage_avatar: that.card_marriage_avatar
      }
      that.$axios.post('/api/Center/user_card_up',params,{
          headers: {
            'token': 'e1a824615a889772dc554ab5a44e5f7c'
          }
      }).then((res) => {
           that.card_zheng_avatar = res.data
           this.$router.push('/photoz')
           console.log(that.card_zheng_avatar)
      }).catch((err) => {
          console.log(err)
      })

    },
    goCondition () {
      this.$router.push('/condition')
    }
  }
}
</script>
<style lang="scss" scoped>
  .home{
    width:100%;
    height:185%;
    background:#11A7FC;
    padding-top:10%;
    // padding-left:5%;
    .header{
       width:90%;
       height:.3rem;
       margin-left:5%;

      margin-bottom:.3rem;
      h2{
        font-size:.2rem;
        color:#fff;
        margin-bottom:.5rem;
        line-height:.3rem;
        float:left;
      }
       h1{
         font-size:.2rem;
         line-height:.3rem;
         color:#fff;
         text-align:center;
       }
    }
    .banner{
      width:.64rem;
      height:.64rem;
      background:#fff;
      border-radius:50%;
      margin-left:42%;
    }
    p{
      width:1.68rem;
      height:.4rem;
      font-size:.16rem;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(255,255,255,1);
      line-height:.4rem;
      margin-left:38%;

    }
    .nav{
       width:90%;
       height:.6rem;
       background:rgba(255,255,255,0.3);
       margin-left:5%;
       border-radius:.2rem;
       padding:0.2rem 0rem;
       span{
         color:#fff;
         font-size:.15rem;
         line-height:.3rem;
         margin-left:.1rem;
        display:block;

       }
    }
    .main{
      width:100%;
      height:1.3rem;
      background:rgba(255,255,255,0.3);
      margin-top:0.1rem;
      padding-top:.01rem;
      .main1{
          width:90%;
          height:.3rem;
          // background:#ccc;
          display:flex;
          justify-content:space-between;
          padding: 0  5%;
          margin-top:.2rem;


         .left{
            font-size:.18rem;
            color:#fff;
            font-weight:bold;
            line-height:.3rem;
         }
         .right{
             font-size:.18rem;
            color:#fff;
            font-weight:bold;
            line-height:.3rem;
         }
      }
      .main2{
           width:90%;
          height:.6rem;
          font-size:.15rem;
            color:#D9F1FF;
            padding: 0  5%;
            line-height:.3rem;
            margin-top:.1rem;
      }

    }
    .data{
        width:100%;
      height:5rem;
      background:rgba(255,255,255,0.3);
      margin-top:.2rem;
       .data1{
         width:90%;
         height:.4rem;
        //  background:red;
         display:flex;
         justify-content:space-between;
         padding:0 5%;
         .left{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
         .right{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
       }
       .data2{
         width:90%;
         height:.8rem;
        //  background:pink;
          padding:0 5%;
          .x1{
            width:.4rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
          .x2{
            width:.4rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x3{
            width:.4rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x4{
            width:.6rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x5{
            width:.4rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x6{
            width:.6rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x7{
            width:.5rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x8{
            width:.4rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
           .x9{
            width:1.2rem;
            height:.2rem;
            border-radius:28px;
            border:1px solid rgba(142,214,255,1);
            font-size:.15rem;
            line-height:.2rem;
            text-align:center;
            float:left;
            margin-top:.1rem;
            margin-right:.1rem;
            color:#D9F1FF;
          }
       }
       .data3{
          width:90%;
         height:3.8rem;
        //  background:pink;
          padding:0 5%;
          .t1{
            width:100%;
            height:.6rem;
            // background:salmon;

             span{
               color:#D9F1FF;
               font-size:.14rem;
               float:left;
               line-height:.6rem;
             }
             p{
                color:#D9F1FF;
              font-size:.14rem;
              font-weight:bold;
             line-height:.6rem;
              // float:left;
              // display:block;
             }

          }

       }

    }
    .photo{
      width:100%;
      height:1.5rem;
      background:rgba(255,255,255,0.3);
      margin-top:5.2rem;
      .photo1{
          width:90%;
         height:.4rem;
         display:flex;
         justify-content:space-between;
         padding:0 5%;
         .left{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
         .right{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
    }
    .photo2{
      width:90%;
      height:1.1rem;

       padding:0 5%;
       display:flex;
       justify-content:space-evenly;
       li{width:20%;height:.8rem;background:#fff;list-style:none;float:left;margin-top:.15rem;
       }
    }
  }
   .footer{
      width:100%;
      height:1.5rem;
       background:rgba(255,255,255,0.3);
      margin-top:.1rem;

       .footer1{
          width:90%;
         height:.4rem;
         display:flex;
         justify-content:space-between;
         padding:0 5%;
         .left{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
         .right{
             font-size:0.14rem;
             color:#fff;
             line-height:.4rem;
         }
       }
       .footer2{
         width:90%;
         height:1.1rem;
        //  display:flex;
        //  justify-content:space-between;
         padding:0 5%;

         font-size:.14rem;
         color:#D9F1FF;
         line-height:.25rem;

       }
     }

  }
</style>