NFT/pages/index/appointment.vue

<template>
	<view class="appointment">


		<view class="appointment-top">
			<view class="button">
				自动预约
				<u-switch v-model="checked" active-color="#44969D" inactive-color="#eee"></u-switch>
			</view>
			<view class="setting">
				每轮抢购设置
				<view class="select">
					每期最大预约份数
					<view class="select-img">
						<image src="../../static/img/appointment1.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="appointment-between">
			开启后讲自动预约，默认最大份额预约。可设置自定义预约份额。
			可开启自动预约
		</view>
		<view class="commit">
			提交修改
		</view>
	</view>
</template>

<script>
	// import uSwitch from 
	export default {
		data() {
			return {
				checked: false
			};
		},
		methods: {
			//switch打开或者关闭时触发，值为true或者false
			//即使不监听此事件，this.checked此时也会相应的变成true或者false
		}
	}
</script>

<style lang="scss">
	.appointment {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		padding: 0 30rpx;

		.appointment-top {
			width: 690rpx;
			height: 200rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 25rpx auto;

			.button {
				border-bottom:2rpx solid #ECECEC;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0F253A;
				line-height: 42rpx;

			}

			.setting {
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0F253A;
				line-height: 42rpx;

				.select {
					display: flex;

					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #44969D;
					line-height: 42rpx;
					border: 1px solid #44969D;
					border-radius: 1rpx;

					.select-img {
						width: 40rpx;
						height: 48rpx;
						background: #44969D;
						display: flex;
						justify-content: center;
						align-items: center;


						image {
							width: 22rpx;
							height: 11rpx;

						}
					}
				}
			}
		}

		.appointment-between {
			margin: 50rpx 25rpx 0 25rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #6D7C88;
			line-height: 30rpx;
		}

		.commit {
			margin-top: 200rpx;
			width: 688rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 88rpx;
			background: linear-gradient(90deg,  #60BAB0, #45969B);
			border-radius: 10rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 30rpx;
		}
	}
</style>