| | |
| | | <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' |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | @import '/@/styles/index.scss'; |
| | | |
| | | .login { |
| | | background-color: $dark-highlight; |
| | | height: 100vh; |