<template>
  <div>
    <el-dialog
      :visible="bindVisible"
      @update:visible="$emit('update:bindVisible',false)"
      width="636px"
      :before-close="toLogin"
      :close-on-click-modal="false"
      append-to-body
      center
    >
      <div class="contact_tip">绑定手机或电子邮箱，更方便账号登录！</div>
      <div class="contact_method layout justify_center">
        <div class="bind_now" @click="toPerson()">马上绑定</div>
        <div class="jump" @click="toLogin()">跳过</div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ["bindVisible"],
  methods: {
    // 登录
    toLogin(){
      this.$router.replace({ path: "/Index",query:{active:0} });
    },
    // 绑定手机 邮箱
    toPerson(){
      this.isBlue = 1;
      this.num = -1;
      this.$router.push({ path: "/personal"});
    }
  }
};
</script>
<style scoped>
/* 提示 */
.contact_tip {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 26px;
  color: #34485e;
  opacity: 1;
  margin-top:50px;
}
/* 按钮 */
.contact_method{
    margin-top:65px;
    text-align: center;
    margin-bottom:40px;
    text-align: center
}
.contact_method div{
  width:114px;
  height:38px;
  border:1px solid #409eff;
  line-height:40px;
  border-radius:3px;
  font-size:14px;
  text-align: center
}
/* 马上绑定 */
.bind_now{
  background-color:#409eff;
  color:#fff;
  margin-right:25px
}
/* 跳过 */
.jump{
  color:#409eff
}
</style>