完成了登录功能

This commit is contained in:
周添峰 2024-08-26 13:57:19 +08:00
parent ba59c4231d
commit 56eb647655
23 changed files with 457 additions and 370 deletions

3
.gitignore vendored
View File

@ -1 +1,2 @@
/OM/unpackage/
/unpackage/

View File

View File

@ -1,60 +0,0 @@
<template>
<view class="container">
<view class="container-top">
欢迎登录物业管理系统
</view>
<view class="container-title">
<view class="container-title-view">登录</view>
</view>
<view class="container-bottom">
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
$globalWidth: 600rpx;
$buttonColor: #0e7ff5;
.container {
display: flex;
background: -webkit-linear-gradient(270deg,
rgba(227, 239, 249, 1) 0%,
rgba(245, 245, 247, 1) 100%);
flex-direction: column;
/* align-items: center; */
width: 100%;
height: 100vh;
align-items: center;
.container-top {
margin-top: 200rpx;
width: $globalWidth;
font-size: 50rpx;
font-weight: 400;
}
.container-title {
width: $globalWidth;
margin-top: 80rpx;
font-size: 35rpx solid $buttonColor;
.container-title-view {
border-bottom: 6rpx solid $buttonColor;
width: 70rpx;
text-align: center;
border-radius: 15rpx;
}
}
.container-bottom {
width: $globalWidth;
margin-top: 80rpx;
}
}
</style>

View File

@ -1,4 +1,4 @@
import App from './App'
import App from './App.vue'
// #ifndef VUE3
import Vue from 'vue'

146
pages/login/login.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<view class="container">
<view class="container-top">
欢迎{{status?"登录":"注册"}}物业管理系统
</view>
<view class="container-title">
<view class="container-title-view" >{{status?"登录":"注册"}}</view>
</view>
<view class="container-bottom">
<label class="container-text">账号</label>
<input class="container-input" type="text" v-model="username" placeholder="请输入您的账号" />
<label class="container-text">密码</label>
<input class="container-input" type="password" v-model="password" placeholder="请输入您的密码"
safe-password-time-stamp="fef" />
</view>
<view class="container-button" @click="handleClick">
{{status?"登录":"注册"}}
</view>
<view class="container-change" @click="status = !status">{{status?"前往注册":"前往登录"}}</view>
</view>
</template>
<script setup>
import {
ref
} from 'vue';
//
const status = ref(true)
//
const username = ref('')
//
const password = ref('')
const handleClick = () => {
if (status.value) {
console.log('登录成功')
uni.navigateTo({
url:'/pages/index/index'
})
} else {
console.log('注册成功')
}
}
</script>
<style lang="scss">
$globalWidth: 600rpx;
$buttonColor: #0e7ff5;
.container {
display: flex;
background: -webkit-linear-gradient(270deg,
rgba(227, 239, 249, 1) 0%,
rgba(245, 245, 247, 1) 100%);
flex-direction: column;
/* align-items: center; */
width: 100%;
height: 100vh;
align-items: center;
.container-top {
margin-top: 200rpx;
width: $globalWidth;
font-size: 50rpx;
font-weight: 400;
}
.container-title {
width: $globalWidth;
margin-top: 80rpx;
display: flex;
font-size: 35rpx solid $buttonColor;
.container-title-view {
border-bottom: 6rpx solid $buttonColor;
width: 70rpx;
text-align: center;
border-radius: 15rpx;
}
}
.container-bottom {
width: $globalWidth;
margin-top: 120rpx;
/*
文字样式
*/
.container-text {
font-size: 40rpx;
font-weight: bold;
}
/*
输入框样式
*/
.container-input {
width: $globalWidth;
height: 100rpx;
background-color: #fafafa;
border-radius: 20rpx;
margin-top: 25rpx;
margin-bottom: 25rpx;
padding-left: 20rpx;
margin-right: 20rpx;
margin-left: -10rpx;
}
}
/*
登录按钮
*/
.container-button {
margin-top: 30rpx;
width: $globalWidth;
color: white;
margin-top: 120rpx;
text-align: center;
height: 100rpx;
line-height: 100rpx;
background-color: $buttonColor;
border: none;
border-radius: 60rpx;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.container-change {
text-align: right;
margin-right: 20rpx;
margin-top: 50rpx;
width: $globalWidth;
color: $buttonColor;
font-size: 35rpx;
}
}
</style>

View File

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB