<template name="index">
	<view class="index">
		<view class="temp">
			<view class="btnList">
				<button class="btnNormal" type="primary" @click="normal">体温正常</button>
				<button class="btnAbnormal" type="primary" @click="abnormal">体温异常</button>
			</view>
			<view v-show="abnormalFlag">
				<view class="cu-form-group">
					<view class="title">体温值：</view>
					<input class="text-left" placeholder="请输入体温" type="number" :value="temperature" name="input" @input="updateInputVal($event,'temperature')"></input>
				</view>
				<view class="btnList" style="padding-top: 55upx;">
					<button class="btnSubmit" type="primary" @click="submit">提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		name: "home",
		data() {
			return {
				temperature:'',
				abnormalFlag:false
			};
		},
		onLoad: function(option) {
			
		},
		onShow() {},
		methods: {
			// 体温正常
			normal() {
				uni.showToast({
					icon: 'success',
					title: "允许通行！"
				})
			},
			// 体温异常
			abnormal() {
				this.abnormalFlag = true
			},
			// 更新输入框绑定的表单内容
			updateInputVal(event, props) {
				this.temperature = event.target.value
			},
			// 提交异常体温
			submit(){
				uni.showToast({
					icon: 'none',
					title: "提交异常体温！"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.temp {
		font-size: 40px;
		text-align: center;
		height: 100vh;
		width: 100vw;
		background-color: #24A1E3;
		.btnList{
			padding-top: 305upx;
			.btnNormal,.btnAbnormal,.btnSubmit{
				background-color: #92d0f1;
				color: #FFFFFF;
				border-radius: 60upx;
				width: 52%;
				text-align: center;
			}
			.btnAbnormal{
				margin-top:95upx;
			}
		}
		.cu-form-group{
			margin-top:55upx;
			padding: 1upx 150upx;
			background-color: #24A1E3;
			.title,.text-left{
				font-size: 40upx;
				color:#FFFFFF;
			}
			.text-left{
				border-bottom: 2upx solid #FFFFFF;
			}
		}
	}
</style>
