72 lines
1.7 KiB
Vue
72 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<!-- 登录页面 -->
|
||
|
|
<view class="login">
|
||
|
|
<uni-forms :modelValue="loginForm" label-position="top" class="login-form">
|
||
|
|
<h1>用户登录</h1>
|
||
|
|
<uni-forms-item label="用户名">
|
||
|
|
<uni-easyinput
|
||
|
|
v-model="loginForm.userName"
|
||
|
|
placeholder="请输入账户"
|
||
|
|
></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
<uni-forms-item required label="密码">
|
||
|
|
<uni-easyinput
|
||
|
|
v-model="loginForm.passWord"
|
||
|
|
placeholder="请输入密码"
|
||
|
|
></uni-easyinput>
|
||
|
|
</uni-forms-item>
|
||
|
|
|
||
|
|
<view class="login-btn" @tap="onHandleLogin">登录</view>
|
||
|
|
</uni-forms>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { reactive, ref } from 'vue'
|
||
|
|
|
||
|
|
const loginForm = reactive({
|
||
|
|
userName: '',
|
||
|
|
passWord: '',
|
||
|
|
})
|
||
|
|
const onHandleLogin = () => {
|
||
|
|
console.log('登录---')
|
||
|
|
uni.switchTab({
|
||
|
|
url: '/pages/index/index',
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.login {
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #ccc;
|
||
|
|
|
||
|
|
.login-form {
|
||
|
|
width: 90%;
|
||
|
|
padding: 15rpx;
|
||
|
|
border: 1px solid #333;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
text-align: center;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-btn {
|
||
|
|
padding: 18rpx 0;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #1989fa;
|
||
|
|
color: #fff;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|