husq
2023-09-13 4473382ddd15af3767edf0b4c8becd8ffbd186f9
src/pages/page-web/index.vue
@@ -1,52 +1,33 @@
<template>
  <div
    class="login flex-column flex-justify-center flex-align-center m0 b0">
    <a-image
      style="width: 17vw; height: 10vw; margin-bottom: 50px"
      :src="djiLogo"
    />
    <p class="fz35 pb50" style="color: #2d8cf0">Cloud API Demo</p>
    <a-form
      layout="inline"
      :model="formState"
      class="flex-row flex-justify-center flex-align-center"
    >
  <div class="login flex-column flex-justify-center flex-align-center m0 b0">
    <a-image :preview="false" style="width: 17vw; height: 10vw; margin-bottom: 50px" :src="djiLogo" />
    <p class="fz35 pb50" style="color: #2d8cf0">无人机操作系统</p>
    <a-form layout="inline" :model="formState" class="flex-row flex-justify-center flex-align-center">
      <a-form-item>
        <a-input v-model:value="formState.username" placeholder="Username">
          <template #prefix
            ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="formState.password"
          type="password"
          placeholder="Password"
        >
          <template #prefix
            ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
          /></template>
        <a-input v-model:value="formState.password" type="password" placeholder="Password">
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button
          class="m0"
          type="primary"
          html-type="submit"
          :disabled="loginBtnDisabled"
          @click="onSubmit"
        >
          Login
        <a-button class="m0" type="primary" html-type="submit" :disabled="loginBtnDisabled" @click="onSubmit">
          登录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import djiLogo from '/@/assets/icons/dji_logo.png'
import djiLogo from '/@/assets/loginBg.jpg'
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { reactive, computed, UnwrapRef } from 'vue'
@@ -83,6 +64,7 @@
<style lang="scss" scoped>
@import '/@/styles/index.scss';
.login {
  background-color: $dark-highlight;
  height: 100vh;