<template>
	<view class="app">
		<u-navbar :is-back="false" :background="background" class="u-navbar">
			<image src="@/static/pagesB/fanhui.png" mode="" @tap="goprevious"></image>
			<view class="title" @tap="goprevious">
				服务预约
			</view>
			<view class="inputs">
				<i class="icon"></i>
				<input v-model="goodsName" type="text" name="" id="" class="input" placeholder="搜索服务"
					placeholder-class="placeholder">
			</view>
		</u-navbar>
		<view class="content">
			<view class="big">大生化

			</view>
			<view class="servename">
				高血压个性服务包
			</view>
			<view class="appoint" @tap="goapponint">
				预约
			</view>
		</view>
		<view class="content">
			<view class="big">大生化

			</view>
			<view class="servename">
				高血压个性服务包
			</view>
			<view class="appoint" @tap="goapponint">
				预约
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#26A888',
				},
			};
		},
		methods: {
			goprevious() {
				uni.navigateBack({
					delta: 1
				})
			},
			goapponint() {
				uni.navigateTo({
					url: '/pagesC/ServiceAppointmenttime/ServiceAppointmenttime'
				})
			}
		},
	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		::v-deep .u-navbar-placeholder {
			background-color: #F7F5F5;
			z-index: 999;
		}

		.u-navbar {
			display: block;
			height: 200rpx;

			image {
				margin: 0 4% 0 4%;
				width: 20rpx;
				height: 30rpx;
			}

			.title {
				width: 31%;
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.inputs {
				position: relative;
				// margin-left: 4%;
				box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
				width: 60%;
				height: 65rpx;
				border-radius: 31rpx;
				z-index: 999;
				background: #65c0a9;
				color: #FFFFFF;

				.placeholder {
					color: #FFFFFF;
				}

				.input {
					margin: 0 auto;
					position: absolute;
					height: 65rpx;
					// top: 8%;
					left: 18%;
					width: 80%;
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.icon {
					background: url(@/static/pagesB/sousuo.png) no-repeat;
					width: 30rpx;
					height: 28rpx;
					background-size: cover;
					position: absolute;
					top: 28%;
					left: 4%;
				}
			}
		}

		.content {
			position: relative;
			width: 95%;
			height: 183rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 15rpx auto;

			.servename {
				padding: 0 50rpx 0 50rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #868585;
				line-height: 38rpx;
			}

			.appoint {
				position: absolute;
				right: 5%;
				top: 50%;
				transform: translateY(-50%);
				width: 169rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				line-height: 61rpx;
				text-align: center;
				color: #fff;
			}

			.big {
				padding: 35rpx 50rpx 30rpx 50rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #000000;
				line-height: 38rpx;
			}
		}
	}
</style>