43 lines
1.4 KiB
Vue
43 lines
1.4 KiB
Vue
<template>
|
||
<view class="wrap login">
|
||
<!-- 顶部：背景图 -->
|
||
<view class="login-header">
|
||
<image class="login-header__bg" src="/static/images/bg.jpg" mode="widthFix" />
|
||
</view>
|
||
|
||
<!-- 登录表单卡片 -->
|
||
<view class="login-card">
|
||
<view class="login-card__brand">
|
||
<image class="login-logo" src="/static/images/logo.png" mode="aspectFit" />
|
||
<view class="sys-name">管道安装管理系统</view>
|
||
</view>
|
||
<view class="login-form">
|
||
<u-form :model="form" ref="uFormRef">
|
||
<u-form-item prop="account">
|
||
<template #leftIcon>
|
||
<u-icon name="account" size="32" color="#2979ff" />
|
||
</template>
|
||
<u-input v-model="loginForm.account" placeholder="请输入账号" />
|
||
</u-form-item>
|
||
<u-form-item prop="password">
|
||
<template #leftIcon>
|
||
<u-icon name="lock" size="32" color="#2979ff" />
|
||
</template>
|
||
<u-input v-model="loginForm.password" type="password" :password-icon="true" placeholder="请输入密码" />
|
||
</u-form-item>
|
||
<view class="u-margin-top-60">
|
||
<u-button type="primary" :loading="loading" @click="fetchLogin">登录</u-button>
|
||
</view>
|
||
</u-form>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { useUserStore } from '@/store';
|
||
const userStore = useUserStore();
|
||
const {loginForm, fetchLogin} = userStore;
|
||
</script>
|