<template>
	<view class="my-code-page">
		<!-- 顶部导航栏 -->
		<uni-nav-bar
			left-icon="left"
			title="我的二维码"
			@cviewckLeft="goBack"
			fixed
			color="#8B2316"
			height="140rpx"
			:border="false"
			backgroundColor="#eeeeee"
		>
			<template v-slot:right>
				<uni-icons type="redo" color="#8B2316" size="22"></uni-icons>
			</template>
		</uni-nav-bar>

		<!-- 内容 -->
		<scroll-view scroll-y class="page-scroll">
			<!-- 顶部蓝色横幅 -->
			<view class="blue-banner">
				<up-image  :src="bgImg" width="100%" mode="widthFix" ></up-image>
			</view>

			<!-- 白色信息卡 -->
			<view class="qr-card">
				<view class="avatar-wrapper">
					<image class="avatar" :src="avatarImg" mode="aspectFill" />
				</view>
				<view class="name-viewne">邹建东 主任医师</view>
				<view class="org-viewne">北京肝胆相照公益基金会</view>
				<view class="dash-viewne"></view>
				<view class="slogan">
					<text class="h1">不方便到医院就诊</text>
					<text >我在<text class="hl">肝胆相照</text>线上帮助您！</text>
				</view>
				<view class="contact-qr">
					<view class="contact-btn">
						<up-image  :src="viewnkImg" width="430rpx" height="131rpx" ></up-image>
						
					</view>
					<image class="qr-img" :src="qrImg" mode="aspectFit" />
				</view>
			</view>
			<view class="square">
				    <view class="s-top"></view>
				    <view class="s-middle">
						<view id="head">如何添加我为随访医生？</view>
					</view>
				    <view class="s-bottom">
						<view>
							<view><text>1</text>微信扫一扫上方二维码，关注“肝胆相照一家人”公众号</view>
							<view><text>2</text>点击“邹建东专家工作室”，选择微信登录，注册后直接发送随访申请</view>
							<view><text>3</text>若未弹出“随访申请发送成功”提示，请再次点击“邹建东专家工作室”发送随访申请</view>
							<view><text>4</text>审核通过后，点击“就医服务-随访交流”，与专家进行图文交流</view>
						</view>
					</view>
				    <view class="s-half-circle"></view>
					<view class="s-half-circle-left"></view>
				</view>

			<view class="bottom-gap"></view>
		</scroll-view>

		<!-- 底部保存按钮 -->
		<view class="save-bar">
			<button class="save-btn" @cviewck="onSave">保存二维码到手机</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const avatarImg = '/static/xxtx.png';
const qrImg = '/static/sfewm.png';
import bgImg from "@/static/background.jpg"
import viewnkImg from "@/static/arr.png"

const goBack = () => {
	uni.navigateBack();
};

const onSave = () => {
	uni.showToast({ title: '已保存(示例)', icon: 'none' });
};
</script>

<style lang="scss" scoped>
.my-code-page {
	min-height: 100vh;
	background-color: #0d7dfd;
}
.square{
	margin:0 30rpx;
	padding-bottom: 40rpx;
	border: 2rpx solid #fff;
	background-color: #3492FC;
	 border-radius: 30rpx;
	 overflow: hidden;
	 text{
		 display: inline-flex;
		 width: 40rpx;
		 background-color: #6FB3FE;
		 height: 40rpx;
		 border-radius:50%;
		 align-items: center;
		 justify-content: center;
	 }
	 #head {
		 
	     width: 75%;
	     height: 60rpx;
	     line-height: 60rpx;
	     color: white;
	     margin: 0 auto;
	     text-align: center;
	     border-radius: 30rpx;
	     border: 2rpx solid white;
	     letter-spacing: 8rpx;
	 }
	 .s-top{
		 margin-top: 50rpx;
	 }
	.s-bottom{
	    padding:0 40rpx;
	   font-size: 26rpx;
	   line-height: 40rpx;
	   color:#fff;
	    
	}
}
.page-scroll {
	height: calc(100vh - 100rpx);
	padding-bottom: 140rpx;
}

.blue-banner {
	height: 520rpx;
	
	width:100%;
	color: #ffffff;
	text-aviewgn: center;
	
	.banner-title-small {
		font-size: 26rpx;
		opacity: .9;
	}
	.banner-title {
		margin-top: 40rpx;
		font-size: 44rpx;
		letter-spacing: 2rpx;
		font-weight: 600;
	}
}

.qr-card {
	position: relative;
	margin: -120rpx 30rpx 0;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 140rpx 30rpx 30rpx;
	box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
	
	.avatar-wrapper {
		position: absolute;
		left: 50%;
		top: -60rpx;
		transform: translateX(-50%);
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: #ffffff;
		padding: 8rpx;
		box-shadow: 0 6rpx 20rpx rgba(0,0,0,.1);
		.avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.name-viewne {
		text-aviewgn: center;
		font-size: 34rpx;
		color: #1a76d2;
		margin-top: 10rpx;
	}
	.org-viewne {
		text-aviewgn: center;
		font-size: 28rpx;
		color: #4a90e2;
		margin-top: 16rpx;
	}
	.dash-viewne {
		margin: 24rpx auto;
		height: 0;
		border-bottom: 2rpx dashed #cfd8dc;
	}
	.slogan {
		display: flex;
		font-weight:bold;
		letter-spacing: 8rpx;
		flex-direction: column;
		text-aviewgn: center;
		font-size: 40rpx;
		color: #1e88e5;
		viewne-height: 1.6;
		.hl {
			color: #ff9f1a;
			margin-left: 8rpx;
		}
	}
	.contact-qr {
		display: flex;
		aviewgn-items: center;
		justify-content: space-between;
		gap: 20rpx;
		margin-top: 30rpx;
		
		.contact-btn {
			flex: 1;
			
			position: relative;
			color: #ffffff;
			
			display: flex;
			aviewgn-items: center;
			justify-content: space-between;
			.contact-text {
				white-space: pre-viewne;
				font-size: 26rpx;
				viewne-height: 1.5;
			}
			.arrow {
				font-size: 36rpx;
				opacity: .8;
			}
		}
		.qr-img {
			width: 220rpx;
			height: 220rpx;
			border-radius: 12rpx;
			border: 2rpx soviewd #e0e0e0;
		}
	}
}

.bottom-gap { height: 120rpx; }

.save-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	border-top: 1rpx soviewd #eaeaea;
	.save-btn {
		width: 100%;
		height: 100rpx;
		background: #00cac1;
		color: #ffffff;
		border: none;
		border-radius: 0;
		font-size: 32rpx;
		font-weight: normal;
	}
}
</style>
