canvasScreen/pages/login/login.vue

<template>
	<view class="main_container">
		<Header></Header>
		<view class="login-bind">
			<view class="login">
				<image class="logo" src="/static/logo.png"></image>
				<form @submit="loginSubmit">
					<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>
		<view class="login_bg"></view>
	</view>
</template>

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

<style scoped>
.login{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo {
	width: 278rpx;
	height: 52rpx;
	margin-bottom: 69.44rpx;
}
.login .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;
}
</style>