<template>
  <div class="panel">
    <div class="logo">
      <img :src="require('@/assets/logo.png')" alt="">
    </div>

    <div class="title">
      <h2>展商{{ isLogin ? '登录' : '注册'}}</h2>

      <h5>请输入{{ isLogin ? '登录' : '注册'}}信息</h5>
    </div>

    <transition name="panel">
      <template v-if="isLogin">
        <login @toRegister="isLogin = false"></login>
      </template>
      <template v-else>
        <register @toLogin="isLogin = true"></register>
      </template>
    </transition>

    <div class="footer">2023 © 盐城东拓国际会展服务有限公司</div>
  </div>
</template>

<script>
import register from "./register.vue";
import login from "./login.vue";
//import { sendSms,login } from "@/api/h5";
export default {
  components: {
    register,
    login
  },
  data() {
    return {
      isLogin: true,
    }
  },
  methods: {

  },
  computed: {},
}
</script>

<style scoped lang="scss">
.panel {
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: left;

  position: absolute;
  top: 40px;
  left: 40px;
  & > img {
    height: 30px;
    object-fit: contain;

  }
}
.title {
  color: $primaryColor;
  text-align: center;

  margin-bottom: 4vh;
  & > h5 {
    color: #999;

    padding-top: 8px;
  }
}
.footer {
  text-align: center;
  font-size: 12px;
  color: #9ba6ac;
  transform: translateX(-50%);
  word-break: keep-all;

  position: absolute;
  bottom: 40px;
  left: 50%;
}

@media (max-width: 768px) {
  .panel {

    padding: 0 20px;
  }
  .logo {
    display: none;
  }
}
@media (min-width: 768px) {
  .panel {

    padding: 0 40px;
  }
  .title {

    margin-top: 20px;
  }
}

.panel-enter-active {
  animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@keyframes fade-in-fwd {
  0% {
    transform: translateZ(-80px);
    opacity: 0;
  }
  100% {
    transform: translateZ(0);
    opacity: 1;
  }
}

.panel-leave-active {
}
</style>
