<template>
	<view class="container">
		<view style="height:25rpx;"></view>
		<view class="page-block">
			<view class="content">
				<view class="cell flex flex-y-center box-pack-between">
					<view class="title-block">
						<text>营业状态</text>
					</view>
					<view class="switch-btn flex flex-y-center">
						<view class="name">{{type == 1 ?'营业中':'休息'}}</view>
						<switch :checked="type == 1" @change="onTypeChange" color="#247EFF" style="zoom:0.7" />
					</view>
				</view>

			</view>
		</view>
		<view class="page-block">
			<view class="page-title-block">
				<view class="title">营业信息</view>
			</view>
			<view class="content">
				<view class="cell flex flex-y-center arr-r">
					<view class="title-block">
						<text>营业时间</text>
					</view>
					<view class="desc">
						<view class="input-box">08:00~12:00</view>
					</view>
				</view>
				<view class="add-btn flex flex-center">
					添加营业时间段
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				
				type: 0
			}

		},
		methods: {
			onTypeChange(e) {
				this.type = e.detail.value
			},
			
		}
	}
</script>

<style>
	@import url("../static/css/common.css");

	page {
		background-color: #f4f5f7;
	}

	.switch-btn .name {
		font-size: 28rpx;
		color: #247EFF;
		padding-right: 20rpx;
	}

	.add-btn {
		height: 100rpx;
		font-size: 28rpx;
		color: #333;
	}

	.add-btn::before {
		content: "+";
		display: block;
		width: 32rpx;
		height: 32rpx;
		background-color: #247EFF;
		color: #fff;
		border-radius: 50%;
		margin-right: 8rpx;
		text-align: center;
		line-height: 32rpx;
	}

	/*  */
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.picker-view .item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
</style>
