<template>
  <div class="sign-in">
    <div class="img"></div>
    <div class="fixed">
      <div class="background-left"></div>
      <div class="sign-in-box">
        <!-- 手机+密码登录模块 -->
        <phone-login v-if="showPlg" @SetPassword="
            showPlg = false;
          "></phone-login>
      </div>
    </div>
  </div>
</template>
<script>
import PhoneLogin from "../components/phoneLogin/phoneLogin.vue";
export default {
  data() {
    return {
      showPlg: true //手机登录
    };
  },
  components: {
    PhoneLogin
  }
};
</script>
<style lang="less" scoped>
.sign-in {
  position: relative;
  background: #ececec;
}
.img {
  position: absolute;
  left: 26px;
  top: 14px;
  width: 229px;
  height: 36px;
  background: url("../images/SigIn/logo.png") no-repeat center;
  background-size: 100% 100%;
}
.fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 895px;
  box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.07);
}
.sign-in-box {
  width: 443px;
  height: 554px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  padding: 0 26px;
  float: left;
  position: relative;
}
.background-left {
  background: url("../../../assets/images/SigIn/login_bg.png") no-repeat center;
  background-size: 100%;
  float: left;
  background-color: #faf8fd;
  height: 554px;
  width: 400px;
}
</style>