tropsCode/src/views/login/index.vue

<template>
  <div class="login">
    <div class="logo"> <img src="@/assets/images/logo.png">
      </img></div>
    <transition :enter-active-class="proxy?.animate.error.enter">
      <div class="login-content" :key="key">
        <div class="login-content-center">
          <div class="login-title"> <img src="@/assets/images/login.png" /></div>
          <div class="login-input-box">
            <div class="login-item">
              <input class="login-input login-input-username" type="text" placeholder="请输入帐号"
                v-model.trim="loginForm.username" />
            </div>
            <div class="login-item">
              <input class="login-input login-input-password" type="password" autocomplete="off" placeholder="请输入密码"
                v-model.trim="loginForm.password" />
            </div>
            <div @click="getLogin" class="login-btn">登 录</div>
          </div>
        </div>
      </div>
    </transition>
    <div class="erweima"> <img src="@/assets/images/erweima.png" />
      <span>扫码登录</span>
    </div>
  </div>
</template>

<script setup name="Login" lang="ts">
const { proxy } = getCurrentInstance() as any;
const router = useRouter();

const loginForm = ref<{
  username?: string;
  password?: string;
}>({
  username: '',
  password: ''
}) as any;

const data = reactive<any>({
  key: 0,
});

const { key } = toRefs(data);

// 登录
const getLogin = () => {
  let username = loginForm.value.username;
  let password = loginForm.value.password;
  if (!username || !password) {
    return false;
  }
  proxy?.$modal.loading();
  let params = {
    username,
    password,
  };
  proxy?.$http.common.login(params).then((res: any) => {
    if (res.access_token) {
      //保存token
      let token = 'JWT ' + res.access_token;
      localStorage.setItem("token", token);
      //跳转
      router.push({ path: '/' });
      getUserInfo();
    }
  }).catch(() => {
    key.value++;
  }).finally(() => proxy?.$modal?.closeLoading());
};

//获取个人信息
const getUserInfo = () => {
  let params = {};
  proxy?.$http.common.getUserInfo(params).then((res: any) => {
    //保存信息
    if (res.data.length) {
      let info = JSON.stringify(res.data[0]);
      localStorage.setItem("userInfo", info);
    }
  });
};

onMounted(() => {
  //测试环境默认密码
  if (import.meta.env.DEV) {
    loginForm.value.username = 'manage1';
    loginForm.value.password = 'trops@2022';
  }
})
</script>

<style lang="scss" scoped>
$waiPadding: 6.51rem;

.logo {
  img {
    width: 14.563rem;
  }

  position: absolute;
  left: $waiPadding;
  top: 5.19rem;
}

.login-title {
  img {
    width: 9.88rem;
  }

  margin-bottom: 1.8rem;
}

.login-input {
  width: 10rem;
}

.login-content {
  width: 45%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-content-center {
    display: flex;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;

    .login-input-box {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      padding: 6.8vh 0;
      border-radius: 1.42rem;
      opacity: 1;
      background: linear-gradient(68deg, #1D2F3D -85%, #304453 96%);
      box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);

      .login-item {
        width: 100%;
        margin-bottom: 2rem;

        .login-input {
          width: 52.6%;
          height: 2.9rem;
          line-height: 2.9rem;
          border-radius: 0.83rem;
          padding: 0 1rem;
          text-align: center;
          font-size: 1.65rem;
          opacity: 1;
          background: #EAEAEA;
          box-sizing: border-box;
          border: 1px solid #FFFFFF;
          box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.5899);
        }
      }


      .login-btn {
        width: 36.7%;
        height: 3.59rem;
        line-height: 3.59rem;
        border-radius: 0.83rem;
        font-size: 2rem;
        opacity: 1;
        cursor: pointer;
        background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
        box-shadow: inset 0px 1px 0px 2px rgba(255, 255, 255, 0.5577);
      }
    }
  }
}

.erweima {
  position: absolute;
  right: 3.87rem;
  bottom: 3.87rem;
  text-align: center;

  img {
    width: 6.625rem;
  }

  span {
    display: block;
    color: #FFFFFF;
    font-size: 1.1rem;
    padding-top: 3px;
  }
}

@media screen and (max-width: 1450px) {
  $waiPadding: 13rem;

  .logo {
    left: $waiPadding;
  }

}
</style>