canvasScreen/pages/login/login.vue

<template>
	<view class="main_container">
		<Header></Header>
		<view class="login-bind">
			<view v-if="!isLogin" 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 v-else class="bind">
				<text class="bind-title">设备信息</text>
				<form @submit="bindSubmit">
					<view class="uni-form-item uni-column">
						<view class="title">设备账号：</view>
						<input class="uni-input" name="phone" type="text" placeholder="设备账号" disabled />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">设备名称：</view>
						<input class="uni-input" name="name" placeholder="设备名称" />
					</view>
					<view class="uni-form-item uni-column">
						<view class="title">选择设备方向</view>
						<image class="select_img" src="../../static/images/bind-select.png"></image>
						<view class="device_radio">
							<radio-group>
								<label class="radio"><radio value="r1" checked="true" />竖屏</label>
								<label class="radio"><radio value="r2" />横屏</label>
							</radio-group>
						</view>
					</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 {
			isLogin: false
		};
	},
	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'
			// });
			this.isLogin = true
		},
		bindSubmit: function(e){
			console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
		}
	}
};
</script>

<style scoped>
.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-bind {
	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;
}
.login{
	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; */
}
.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;
}
.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;
}
.bind-title{
	display: block;
	margin-bottom: 37.5rpx;
	font-size: 37.5rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
}
.bind .uni-form-item{
	position: relative;
	display: flex;
	justify-content: space-between;
	width: 409.72rpx;
	height: 86.11rpx;
	padding: 0 55.55rpx;
	line-height: 86.11rpx;
	margin-bottom: 27.77rpx;
	font-size: 27.77rpx;
	background-color: #f6f6f6;
	border-radius: 86.11rpx;
}
.bind .uni-form-item .title{
	min-width: 138.88rpx;
}
.bind .uni-input{
	width: auto;
	height: 86.11rpx;
	font-size: 27.77rpx;
}
.select_img{
	display: block;
	width: 21.52rpx;
	height: 13.88rpx;
	margin-top: 36.8rpx;
}
.device_radio{
	position: absolute;
	bottom: -145.83rpx;
	left: 0;
	z-index: 99;
}
.device_radio uni-radio-group{
	width: 520.83rpx;
	height: 145.83rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25rpx;
	background-color: #FFFFFF;
	border-radius: 13.88rpx;
	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
}
.device_radio .radio {
	width: 50%;
	text-align: center;
}
.device_radio /deep/ uni-radio .uni-radio-input{
	width: 27.77rpx;
	height: 27.77rpx;
	background: url(../../static/images/an-wx.png) no-repeat left top;
	background-size: 100% 100%;
	border: none;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
	background: none !important;
	border: none !important;
}
.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
	content: "";
	width: 27.77rpx;
	height: 27.77rpx;
	background: url(../../static/images/an-xz.png) no-repeat left top;
	background-size: 100% 100%;
	transform: translate(-50%,-50%) scale(1);
}
</style>