<template>
	<view style="width: 100%;height: 100%;">
		<view class="header-content">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/mybanner.png" style="width:100%;height:260rpx;"></image>
		</view>
		<view style="padding: 50rpx 30rpx;">
			<!-- 头像 名字 按钮 -->
			<view class="flex" style="margin-bottom: 50rpx;">
				<!-- 头像 -->
				<view style="width: 20%;display: flex;align-items: center;">
					<image :src="img" mode="aspectFit" style="height: 100rpx;width: 100rpx;border-radius: 50%;"></image>
				</view>
				<!-- 名字 -->
				<view style="width: 55%;color: #FFFFFF;display: grid;align-items: center;">
					<view style="font-weight: bold;font-size: 36rpx;">{{name}}</view>
					<view style="font-size: 28rpx;">{{bz}}</view>
				</view>
				<!-- 按钮 -->
				<view style="width: 25%;display: flex;align-items: center;">
					<button class="b">设置备注</button>
				</view>
			</view>
			<!-- 用户资料 -->
			<view class="zl">
				16:31:10.394 开始差量编译...
				16:31:10.756 DONE Build complete. Watching for changes...
				16:31:10.759 项目 'dortor' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
				16:31:33.184 开始差量编译...
			</view>
			<view style="">
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">已购服务</view>
				<view v-for="(item,index) in tclist" style="margin-bottom: 20rpx;">
					<view class="taocan">
						<view class="tc_left">
							{{item.id}}
						</view>
						<view class="tc_right">

						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		mounted() {

		},
		data() {
			return {
				//头像路径
				img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png',
				//名字
				name: '渣渣宝',
				bz: '备注备注备注备注',
				tclist: [{
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '', //开始时间
					endTime: '' //结束时间
				}, {
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '', //开始时间
					endTime: '' //结束时间
				}, {
					id: '套餐一',
					fw: '疫苗接种+门诊预约+儿保预约', //服务
					dd: '成都所有社区医院，十名医生专业团队', //地点
					startTime: '', //开始时间
					endTime: '' //结束时间
				}]
			}
		},
		methods: {

		}
	};
</script>

<style scoped lang="scss">
	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;
	}

	.b {
		width: 100%;
		height: 80rpx;
		background-color: #3a8fc5;
		color: #FFFFFF;
		font-size: 30rpx;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zl {
		padding: 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		text-indent: 2em;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0.04, 0.04);
		margin-bottom: 30rpx;
	}

	.taocan {
		width: 710rpx;
		height: 230rpx;
		position: relative;
		display: flex;
		border-radius: 10rpx;
		border-right: 1rpx dashed #555555 ;
		background: radial-gradient(circle at right top, transparent 15rpx, #ffffff 0) top left / 152rpx 51% no-repeat,
			radial-gradient(circle at right bottom, transparent 15rpx, #ffffff 0) bottom left /152rpx 51% no-repeat,
			radial-gradient(circle at left top, transparent 15rpx, #ffffff 0) top right /560rpx 51% no-repeat,
			radial-gradient(circle at left bottom, transparent 15rpx, #ffffff 0) bottom right /560rpx 51% no-repeat;
		filter: drop-shadow(0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.04));
	}


	.tc_left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 151rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.tc_right {
		display: flex;
		align-items: center;
		width: 550rpx;
		padding: 0 20rpx;
		font-size: 26rpx;

		.text {
			padding: 10rpx 0rpx;
			width: 100%;
		}
	}

	//定位
	.a {
		height: 40rpx;
		width: 40rpx;
		border-radius: 50rpx;
		background-color: #ff5826;
		position: absolute;
		left:30%;
		
	}
</style>
