xiaodou-ai-admin/src/pages/login/index.vue

<template>
  <a-row
    style="width: 100vw; height: 100vh, overflow: hidden"
    justify="center"
  >
    <a-col :span="16" style="height: 100vh;" >
      <img
        style="width: 100%; height: 100%; object-fit: cover"
        :src='staticImg.loginBg'
        alt=""
      />
    </a-col>
    <a-col
      :span="8"
      style="display: flex; justify-content: center;align-items: center"
      >
      <a-row :gutter="[8, 8]" >
        <a-col class="app-name" :span="24" style="display: flex;justify-content: center;">
          蛟龙云联
        </a-col>
        <a-col :span="24" >
          <a-form
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
          >
            <a-form-item
              label="账号"
              name="userAccount"
              :rules="[{ required: true, message: '请填写账号' }]"
            >
              <a-input style="width: 328px;height: 42px;"  v-model:value="state.userAccount" />
            </a-form-item>

            <a-form-item
              label="密码"
              name="password"
              :rules="[{ required: true, message: '请输入密码' }]"
            >
              <a-input-password  style="width: 328px;height: 42px;"   v-model:value="state.password" />
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="24" style="display: flex;justify-content: center;">
          <a-button @click="login" style="width: 200px;" type="primary" >登录</a-button>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>
<script lang='ts' setup >
import { useUserStore } from '@/store/index'
import { onUnmounted, reactive } from 'vue'
import { useStaticImg } from '@/utils/static'

// const { redirct_url } = useRoute().query

const userStore = useUserStore()

const staticImg = useStaticImg()

window.addEventListener('keypress', event => {
  if (event.key === 'Enter') login()
})

const state = reactive({
  userAccount: '',
  password: ''
})

const login = () => {
  userStore.login(state)
}

onUnmounted(() => {
  window.removeEventListener('keypress', () => {})
})

</script>
<style lang='less' scoped >
.app-name {
  font: 40px 'Italiana', sans-serif;
  text-transform: lowercase;
  text-align: center;
}
</style>