Jinan_app/pages/login/login.vue

<template>
	<view class="page">
		<view class="top">
			<img src="@/static/login/banner.jpg" alt="">
			<view class="tops">

			</view>
		</view>

		<view class="items">
			<view class="title">
				<img mode="widthFix" src="@/static/login/title.png" alt="">
				<view class="text">
					欢迎登录防消一体化综合治理平台
				</view>
			</view>

			<view class="item username">
				<view class="label">
					账号
				</view>
				<view class="input">
					<input v-model="form.name" type="text" placeholder="请输入账号">
				</view>
			</view>

			<view class="item password">
				<view class="label">
					密码
				</view>
				<view class="input">
					<input v-model="form.password" type="password" placeholder="请输入密码">
				</view>
			</view>
			<!-- 			<view class="item">
				<label>
					<checkbox :value="form.auto" /><text>自动登录</text>
				</label>
			</view> -->
			<view class="button">
				<button type="default" @tap="getUserInfo()">登录</button>
				<!-- <button @tap="getToken()">登录</button> -->
			</view>


		</view>
		<view class="bottom">
			<image src="../../static/login/bottom.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import store from '@/store.js'
	export default {
		data() {
			return {
				title: 'Hello',

				form: {
					name: "",
					password: "",
					auto: false,
				}
			}
		},
		onLoad() {
			if (store.state.token) {
				console.log(store.state.token);
				uni.reLaunch({
					url: "/pages/index/index",
					success: res => {},
					fail: () => {},
					complete: () => {},
				})
			}
		},
		methods: {
			getUserInfo() {
				let body = {}
				if (!this.form.name) {
					return this.$alert.showError("请输入用户账号")
				}
				if (!this.form.password) {
					return this.$alert.showError("请输入密码")
				}
				this.$auth.login(this.form)
				return
			},

		}

	}
</script>

<style lang="scss">
	.page {
		overflow: hidden;
		background-color: #FAFBFF;
		color: #808080;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.top {
		width: 100%;
		height: 200rpx;
		position: relative;

		img {
			width: 100%;
			height: 200rpx;
		}

		.tops {
			width: 100%;
			height: 40rpx;
			border-radius: 20rpx 20rpx 0 0;
			position: absolute;
			z-index: 10;
			background-color: #FAFBFF;
			bottom: 0rpx;
			left: 0;
		}
	}



	.items {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 999;

		.title {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-top: 58rpx;

			.text {
				margin-top: 20rpx;
				font-size: 26rpx;
				text-align: center;
				color: #939393;
			}
		}



		.item {
			width: 80%;

			.label {
				font-size: 32rpx;
				margin: 26rpx 0;
			}

			label {
				color: #4963F4;

				checkbox {
					border: #4963F4;
				}
			}

			input {
				box-sizing: border-box;
				padding: 0 16rpx;
				height: 80rpx;
				background: #ECF2FF;
				border-radius: 3px;
				font-size: 26rpx;

				input {
					height: 100%;
				}
			}
		}

		.username {
			margin-top: 58rpx;
		}

		.password {
			margin-bottom: 76rpx;
		}
	}

	.button {
		width: 100%;

		button {
			width: 80%;
			color: #fff;
			border-radius: 100rpx;
			background: #4963F4;
			box-shadow: 2px rgba(73, 99, 244, 0.8);
		}

	}

	.bottom {
		width: 100%;
		height: 200rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>