SaaS-lib/lib/paas/view/system/login.vue

<!-- @format -->

<template>
  <div id="login-container">
    <a-layout>
      <a-layout-header>
        <img class="logo-img" src="/asset/image/login/logo-paas.png" />
      </a-layout-header>
      <a-layout-content>
        <div class="login-content">
          <div class="login-header">
            <p class="english">NERV STACK</p>
            <p class="chinese">管理平台</p>
          </div>
          <div class="login-user-info">
            <span class="error-info" v-if="errorMsg">{{ errorMsg }}</span>
            <a-input
              class="input"
              placeholder="用户名"
              v-model:value="userName"
              @keyup.enter="submit" />
            <a-input-password placeholder="密码" v-model:value="password" @keyup.enter="submit" />
          </div>
          <div class="login-btn">
            <a-button :loading="loading" @click="submit" type="primary">登录 </a-button>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';

  import { http } from '/nerv-lib/util/http';
  import Cookies from 'js-cookie';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'UserLogin',
    setup() {
      const userName = ref<string>('');
      const password = ref<string>('');
      const errorMsg = ref<string>('');
      const router = useRouter();
      const loading = ref<boolean>(false);

      const submit = async function () {
        try {
          if (userName.value == '') {
            return;
          }
          if (password.value == '') {
            return;
          }
          let data = JSON.stringify({ name: userName.value, password: password.value });
          loading.value = true;
          const result = await http.post('/api/passport/objs/login', data);
          if (result && result['nervsid']) {
            Cookies.set('nervsid', result['nervsid']);
          }
          loading.value = false;

          router.replace({ name: 'root' });
        } catch {
          loading.value = false;
        }
      };
      return {
        userName,
        password,
        loading,
        errorMsg,
        submit,
      };
    },
  });
</script>

<style lang="less" scoped>
  #login-container {
    background: url('/asset/image/login/login-background.jpeg') no-repeat center #f5f6f9;
    height: 100%;
    background-size: auto 100%;
  }

  .ant-layout {
    background: transparent;
  }

  .ant-layout-header {
    height: auto;
    background-color: transparent;
    padding: 0;
  }

  .logo-img {
    margin-top: 24px;
    margin-left: 24px;
    max-width: 130px;
    height: auto;
  }

  .ant-layout-content {
    background-color: transparent;
    margin: 0 auto;
    text-align: center;

    .login-content {
      top: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -66%);
    }

    .login-content .login-header p {
      color: #00acff;
      font-weight: 400;
      line-height: 30px;

      &.english {
        font-size: 25px;
        margin: 30px 0 10px 0;
      }

      &.chinese {
        font-size: 16px;
      }
    }

    .login-content .login-user-info {
      width: 422px;
      margin: 0 auto;

      .error-info {
        color: #e4393c;
        font-size: 14px;
        display: block;
        text-align: left;
        width: 300px;
        margin: 0 auto;
        padding-left: 2px;
      }

      .ant-input,
      .ant-input-password {
        height: 48px;
        margin-bottom: 20px;
        width: 300px;
      }

      .ant-input::-webkit-input-placeholder,
      .ant-input-password::-webkit-input-placeholder {
        font-size: 14px;
      }
      .ant-input-password::-webkit-input-placeholder {
        font-size: 14px;
      }
    }
    .login-btn {
      .ant-btn {
        width: 300px;
        margin-top: 10px;
        height: 40px;
        font-size: 16px;
      }
    }
  }

  @media (min-width: 768px) {
    .ant-layout-content {
      width: 750px;
    }
  }

  @media (min-width: 992px) {
    .ant-layout-content {
      width: 970px;
    }
  }

  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
</style>