canvasScreen/pages/login/login.vue

<template>
	<view class="main_container">
		<Header></Header>
		<view class="login">
			<image class="logo" src="/static/logo.png"></image>
			<form @submit="formSubmit">
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="phone" type="number" placeholder="登录账号" />
				</view>
				<view class="uni-form-item uni-column">
					<input class="uni-input" name="password" placeholder="密码" password="true" />
				</view>
				<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
			</form>
		</view>
		<view class="login_bg"></view>
	</view>
</template>

<script>
import Header from '@/pages/header.vue'
export default {
	components: {
		Header
	},
	data() {
		return {
		};
	},
	methods: {
		formSubmit: function(e) {
			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
			var formdata = e.detail.value;
			// uni.showModal({
			// 	content: '表单数据内容：' + JSON.stringify(formdata),
			// 	showCancel: false
			// });
		}
	}
};
</script>

<style scoped>
.main_container {
	width: 100%;
	height: 100vh;
	background: url(../../static/images/bg.png) no-repeat left top;
	background-size: cover;
}
.login_bg {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 530rpx;
	height: 648rpx;
	margin: -423rpx 0 0 -265rpx;
	background-color: #fcf4e8;
	border-radius: 30rpx 30rpx 0 0;
	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
	z-index: 9;
}
.login {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 625rpx;
	height: 764rpx;
	margin: -382rpx 0 0 -312rpx;
	background-color: #fff;
	border-radius: 30rpx;
	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
	z-index: 99;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo {
	width: 278rpx;
	height: 52rpx;
	margin-bottom: 69.44rpx;
	/* margin: 132rpx auto 70rpx auto; */
}
.uni-input {
	width: 520rpx;
	height: 86rpx;
	margin-bottom: 41.66rpx;
	text-align: center;
	border: 1px solid #cbcbcb;
	border-radius: 86rpx;
	background-color: #f6f6f6;
}
.fouce_txt{
	border-color: #363538;
}
.uni-login-btn {
	width: 520rpx;
	height: 86rpx;
	margin-top: 69.44rpx;
	font-size: 30.55rpx;
	line-height: 86rpx;
	background-color: #0096ff;
	border-radius: 86rpx;
	color: #fff;
}
</style>