wms-antdvue/.svn/pristine/b3/b3d20f5728de4bc2025fd6a4c863cdaaea3bef54.svn-base

<template>
  <div class="account">
    <div class="account-container">
      <div class="account-wrap-login">
        <div class="login-pic">
          <h1 class="login-title">云恒WMS</h1>
          <h4 class="login-subtitle">赋能开发者，助力企业发展，全方位提供数据中台解决方案!</h4>
        </div>
        <div class="login-form">
          <div class="login-form-container">
            <div class="account-top">
              <div class="account-top-desc">{{ loginFlag ? '用户登录' : '用户注册' }}</div>
            </div>
            <template v-if="loginFlag">
              <div class="account-tab-box">
                <div
                  :class="activeIndex == index ? 'active' : ''"
                  v-for="(item, index) in tabData"
                  @click="handleClick(index)"
                  :key="index"
                  >{{ item }}</div
                >
              </div>
              <LoginForm v-if="activeIndex === 0" @back-login="goLogin" />
              <PhoneForm v-else-if="activeIndex === 1" />
              <QrcodeForm v-else-if="activeIndex === 2" />
            </template>
            <template v-else>
              <RegisterForm @back-login="goLogin" />
            </template>
          </div>
          <div class="corner-box" @click="handleCornerClick">
            <UserAddOutlined v-if="loginFlag" style="color: #ffffff; font-size: 30px" />

            <RollbackOutlined v-else style="color: #ffffff; font-size: 30px" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import LoginForm from './LoginForm2.vue';
  import PhoneForm from './PhoneForm.vue';
  import QrcodeForm from './QrcodeForm.vue';
  import RegisterForm from './RegisterForm2.vue';
  import { UserAddOutlined, RollbackOutlined } from '@ant-design/icons-vue';
  const loginFlag = ref(true);
  const activeIndex = ref(0);
  const tabData = ref(['账号登录', '手机号登录', '扫码登录']);
  const handleClick = (index) => {
    activeIndex.value = index;
  };
  const handleCornerClick = () => {
    loginFlag.value = !loginFlag.value;
  };
  const goLogin = (type) => {
    loginFlag.value = type;
  };
</script>

<style lang="less" scoped>
  .account {
    width: 100%;
    margin: 0 auto;

    &-container {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      padding: 20px;
      box-sizing: border-box;
      background-image: url('@/assets/images/login-bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    &-wrap-login {
      width: 920px;
      height: 510px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .login-pic {
        flex: 1;
        padding: 32px 8px;
        box-sizing: border-box;
        background-color: #1681fd;
        background-image: url('@/assets/images/login-img.png');
        background-repeat: no-repeat;
        background-position: bottom;
        background-size: contain;
        text-align: center;
        .login-title {
          color: #ffffff;
          font-size: 28px;
          margin: 0 0 6px;
          font-weight: 400;
          letter-spacing: 1.2px;
        }
        .login-subtitle {
          color: #fffc;
          font-size: 16px;
          margin: 0;
          font-weight: 400;
          letter-spacing: 4px;
          letter-spacing: 1.2px;
        }
      }

      img {
        max-width: 100%;
      }

      .login-form {
        width: 400px;
        position: relative;
        &-container {
          margin: auto;
          width: 100%;
          padding: 32px 48px 0;
          box-sizing: border-box;
        }
        &-title {
          padding-bottom: 15px;
          text-align: center;
        }
        .corner-box {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          right: 0;
          top: 0;
          width: 80px;
          height: 80px;
          border-radius: 0 0 0 150%;
          background: #1890ff;
          cursor: pointer;
          > i {
            margin-right: -20px;
            margin-top: -10px;
          }
        }
      }
      :deep(.ant-input) {
        line-height: 31px !important;
      }
      @media (max-width: 680px) {
        .login-pic {
          padding: 20px 12px 100px;
          background-size: auto 100px;
        }

        .login-form {
          width: 100%;
          margin: auto;
        }
      }
      .account-top {
        &-desc {
          font-size: 24px;
          font-weight: bold;
          color: #000000;
          margin-bottom: 18px;
        }
      }
      .account-tab-box {
        display: flex;
        height: 34px;
        margin-bottom: 18px;
        background-color: #f5f5f5;
        border-radius: 4px;
        padding: 3px;
        > div {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          color: rgba(0, 0, 0, 0.6);
          &.active {
            background-color: #ffffff;
            color: rgba(0, 0, 0, 0.92);
          }
          &:hover {
            color: rgba(0, 0, 0, 0.92);
          }
        }
      }
    }

    @media (max-width: 680px) {
      &-container {
        padding: 0;
        display: block;
        background: #fff;
      }
      &-wrap-login {
        display: block;
        height: auto;
        width: 100%;
        background: none;
        box-shadow: none;
        border-radius: 0;
      }
    }
  }
</style>