<template>
  <div>

    <div class="titlepic_w">
      <img src="../../assets/sytitle_4.jpg" class="bgpic"></img>
    </div>

    <div class="btn" v-if="iflogin==0">
      <div style="margin-right:10px;">登录</div>
      <div>注册</div>
    </div>

    <div class="login" v-if="iflogin==1">
      <div class="loginfrom">
        <span style="font-size:20px"> <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-account"></use>
          </svg></span>
        请输入手机号</div>
      <div class="loginfrom">
        <span style="font-size:18px"> <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-lock"></use>
          </svg></span>
        请输入密码</div>
      <div class="loginbtn">登录</div>
      <div style="display:flex;padding:5px 0">
        <div style="flex:0 0 50%;color: #888;font-size: 14px;">用户注册</div>
        <div style="flex:0 0 50%" class="forgetpsw">忘记密码</div>
      </div>
    </div>

    <div class="bgpic_w">
      <img src="../../assets/syopen_3.jpg" class="bgpic"></img>
    </div>
  </div>
</template>
<script>
  export default {
    name: "syopen",
    data() {
      return {
        iflogin: 1
      }
    }

  }

</script>
<style>
  body {
    margin: 0;
    padding: 0;
    background-color: #64C1C8;
    font-family: "微软雅黑";
  }

  .login {
    background-color: #ffffff;
    border-radius: 20px;
    margin: 0px 20px 0% 20px;
    padding: 10px;
    z-index: 9999;
    /* position:absolute; */
    /* width:80% */
  }

  .loginfrom {
    margin: 10px 0;
    padding: 10px;
    z-index: 9999;
    border: 1px solid #e5e5e5;
    color: #888
  }

  .loginbtn {
    margin: 10px 0;
    padding: 10px;
    color: #fff;
    background-color: #8dc026;
    text-align: center;
    z-index: 9999;
  }

  .forgetpsw {
    color: #888;
    font-size: 14px;
    text-align: right;
    margin-right: 20px
  }

  .titlepic_w {
    margin: 20px 40px 10px 40px;
    z-index: 9999;
  }

  .btn {
    display: flex;
    margin: 30% auto 100px auto;
    justify-content: center;
    font-weight: bold;
    color: #888
  }

  .btn div {
    padding: 10px 50px;
    background: #ffffff;
    border-radius: 30px;
    z-index: 9999;
  }

  /* .bgpic_w {
    position:fixed;
    bottom: 0px;
  } */

  .bgpic {
    display: inline-block;
    height: auto;
    max-width: 100%;

  }

</style>
