<template>
	<view class="main">
		<view class="pr">
			<view class="header-content">
				<image src="http://file.supermm.me/miniProgram/images/personal/bg.png" style="width:100%;height:260rpx;"></image>
			</view>
			<view class="pr pt20" style="z-index:2">
				<view class="plr15">
					<!-- 登录切换 -->
					<view v-if="true" class="m-bg-white bdr4 pb20 header-box" style="border-radius: 32rpx;">
						<view class="plr20 pt20 m-dpflex m-justify-start m-align-center">
							<image binderror="_binderror" mode="scaleToFill" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg"
							 style="width: 60px;height: 60px;border-radius: 50%;"></image>
							<view class="">
								<view class="line1 f20 fb plr15 flex justify-center align-center">
									医生名称
									<u-tag v-if="true" style="margin-left: 15rpx;" text="未认证" mode="dark" shape="circle" bg-color="#0B73BA" />
									<u-tag v-else style="margin-left: 15rpx;" text="已认证" mode="dark" shape="circle" bg-color="#0B73BA" />
								</view>
								<view class="margin-left-sm margin-top-xs">
									给患者展示的信息(宣传语)
								</view>
							</view>
							<view class="pr tr m-flex">
								<navigator hoverClass="none">
									<image class="header-img" src="http://file.supermm.me/miniProgram/images/personal/edit.png"></image>
								</navigator>
							</view>
						</view>
						<view class="pr m-bottom-line mt15 mb10"></view>
						<view class="pr m-xcenter mt30 plr20">
							<view class="m-flex tl f14 m-ycenter dpb">
								<view class="m-gray-big f20 fb pr10">0</view>
								<view class="m-gray-letter mt5 f12">服务天数</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">0</view>
								<view class="m-gray-letter mt5 f12">服务人次</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">0</view>
								<view class="m-gray-letter mt5 f12">评价（张）</view>
							</view>
							<view bindtap="" class="m-flex tl f14 m-ycenter">
								<view class="m-gray-big f20 fb">5.0</view>
								<view class="m-gray-letter mt5 f12">评分</view>
							</view>
						</view>
					</view>
					<view v-else class="m-bg-white bdr4 pb20 header-box" style="border-radius: 32rpx;">
						<view class="plr20 pt20 m-dpflex m-justify-start m-align-center">
							<image binderror="_binderror" mode="scaleToFill" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg"
							 style="width: 60px;height: 60px;border-radius: 50%;"></image>
							<view class="">
								<view class="line1 f20 fb plr15 flex justify-center align-center">
									请登录
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding-lr">
				<view class="gridstyle">
					<u-grid :col="4" :border="false">
						<u-grid-item @click="">
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">患者咨询</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">门诊预约</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">门诊排版</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">患者管理</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">意见管理</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">待定模块</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">待定模块</view>
						</u-grid-item>
						<u-grid-item>
							<u-image width="120rpx" height="120rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg" shape="circle"></u-image>
							<view class="grid-text margin-top-xs">服务设置</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<view class="tltleStyle">
				<view class="flex justify-between">
					<u-section title="通知" font-size="40" :show-line="false" :bold="true" :right="false"></u-section>
					<u-button size="mini">全部已读</u-button>
				</view>
				<u-line :hair-line="false" color="#000" margin="20rpx 0" />
			</view>
			<view class="padding-lr">
				<view v-for="(item,index) in 4" :key="index" class="padding-lr-sm padding-tb-sm bg-white margin-top-sm" style="border-radius: 32rpx;">
					<view class="flex justify-start align-center">
						<u-icon name="order"></u-icon>
						<text class="text-lg margin-left-xs">订单通知</text>
						<text class="flex-sub text-right">10:10</text>
					</view>
					<view class="margin-top-sm">
						您接到一个新的图文咨询订单，请尽快确认 (点击查看订单详情)
					</view>
					<view class="text-right" style="position: relative">
						<u-badge size="mini" :absolute="false" type="error" :is-dot="true"></u-badge><text class="margin-left-xs">未读</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</view>
		<view class="lianxiwomen">
			<view class="">
				联系
			</view>
			<view class="">
				我们
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style scoped>
	@import url("./index.css");

	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;
	}

	.tltleStyle {
		padding: 0 30rpx;
		margin-top: 50rpx;
	}

	.header-box {
		box-shadow: 0px 8rpx 34rpx -6rpx rgba(248, 151, 164, 0.13);
	}

	.header-img {
		width: 36rpx;
		height: 36rpx;
	}

	.gridstyle {
		height: 450rpx;
		background-color: #fff;
		/* border-radius: 32rpx; */
		display: flex;
		align-items: center;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		margin-top: 20rpx;
	}

	.lianxiwomen {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #fff;
		position: fixed;
		right: 10rpx;
		bottom: 80rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);
		z-index: 99;
	}

	.tip {
		position: absolute;
		top: 0;
		right: 20%;
		bottom: 0;
		background-color: red;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
	}

	.msg {
		top: -3rpx;
		right: -9rpx;
	}

	swiper {
		height: 320rpx;
	}

	.swiper-wrapper {
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.swiper-item {
		width: 100%;
		height: 300rpx;
		box-shadow: 0 26rpx 40rpx 0 rgba(255, 255, 255, 0.31);
		background: url("http://file.supermm.me/miniProgram/images/personal/bg_doc.png") no-repeat bottom center;
	}

	.dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -40rpx;
		display: flex;
		justify-content: center;
	}

	.dots .dot {
		margin: 0 8rpx;
		width: 14rpx;
		height: 14rpx;
		background: #E4E4E4;
		border-radius: 8rpx;
		transition: all .6s;
	}

	.dots .dot.active {
		width: 24rpx;
		background: #FF7B72;
	}

	.game-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.game-item {
		height: 100%;
		background: url("https://file.supermm.me/h5/wechat-h5/integral/personeBg001.jpg") no-repeat;
		background-size: 100% 100%;
		background-position: center center;
		border-radius: 100rpx;
	}
</style>
