gsytj/pages/applic/know.vue

<template>
	<view class="content">
		<view class="flex black">
			<image src="../../static/icon/goblack.png" mode="" class="goblack" @click="goblcak"></image>
			<view class="tit">
				捐献造血干细胞你了解多少？
			</view>
			<view class="goblack">
				
			</view>
		</view>
		<view class="header-title">
			捐献造血干细胞你了解多少？
		</view>
		<view class="list-box">
			<view class="list-item">
				<view class="list-tpl">
					很多有爱心的小伙伴在后台问小编：什么是造血干细胞造血干细胞能治疗什么病、联系哪进行登记捐献造血干细胞等等。本期细胞日志为大家普及一下，捐献造血干细胞的流程。让爱生根，让爱发芽。
				</view>
			</view>	
		</view>
		<!-- <view class="vediobg">
			<video id="myVideo" src="http://xuebang.oss-cn-beijing.aliyuncs.com/edf7pyxpng4ns63sr1w3l443619vpvlh.mp4"
			      @error="videoErrorCallback"  controls autoplay show-mute-btn>
			</video>
		</view> -->
		
		<view class="box-1">
			伸出你我双手点燃生命希望
		</view>
		<view class="box-1">
			奉献爱心 重铸生命
		</view>
			<view class="title">
				<view class="title-1">
					捐献造血干细胞的流程
				</view>
			</view>
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-1.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						检测
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						入库年龄在18-45周岁,捐献年龄在18~55周岁,身体健康,符合无偿献血条件,可与所在地省级管理中心或红十字会联系。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/lianxi.webp" mode=""></image>
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-2.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						HLA分型检验
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						可以直接到献血车上抽取约8毫升血液，进行HLA分型检验。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/HLA.webp" mode=""></image>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						<view class="title-1">
							HLA低分辨分型
						</view>
						反映了HLA抗原水平的等位基因类型，用于骨髓、器官移植组织配型的初筛。
					</view>
				</view>	
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-3.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						录入骨髓库
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						数据资料将在"静思期"过后,被录入中国造血干细胞捐献者资料库等待患者查询。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img03.webp" mode=""></image>
			</view>
			
			<view class="remarks">
				<view class="details">
					<text style="font-weight: 700;">注</text>：由于配型相合受供患双方HLA基因影响，作为志愿捐献者等待捐献的时间，可能很短，也可能要等若干年。
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						<view class="title-1">
							静思期？
						</view>
						抽取血样后,我们留给您一周时间。一周内如果您改变主意，请立即通知所在地省级管理中心或当地红十字会，终止HLA分型检测及数据录入,从而避免资源浪费及未来可能对患者造成的伤害。
					</view>
				</view>	
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-4.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						配型成功
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						如果一旦检索配型成功,在征得捐献者的同意后,将会对捐献者和患者的血样进行<text style="font-weight: 700;">HLA高分辨检测</text>。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img04.webp" mode=""></image>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						<view class="title-1">
							HLA高分辨分型
						</view>
						<view class="paragraph">
							抽取患者和捐献者的静脉血样本,提取DNA,测出各自DNA碱基的顺序,最后通过软件比对分析得出HLA型别。
						</view>
						<view class="paragraph">
							分型的作用就是要找到排列一致的样本,配型的精度决定了患者在术后的康复效果和生存质量，是如何快速、准确地找到与患者一致的干细胞。
						</view>
					</view>
				</view>	
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-5.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						注射动员剂
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						完成体检并完成注射动员剂,每天打两针动员剂,上午一针,下午一针,一共打四天,第五天进行采集。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img05.webp" mode=""></image>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						<view class="title-1">
							为什么要注射动员剂？
						</view>
						<view class="paragraph">
							在正常生理条件下，外周血的造血干细胞量少，不能满足采集需求,通过注射动员剂,可使外周血造血干细胞增加20-30倍。
						</view>
						<view class="paragraph">
							据多年的临床观察和国际报道，至今<text style="font-weight: 700;">并未发现动员剂对人体健康的危害</text>。
						</view>
					</view>
				</view>	
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-6.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						采集
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						<view class="title-1">
							为什么要注射动员剂？
						</view>
							进行外周造血干细胞采集。在采集时，从一处静脉引出血，通过仪器把<text style="font-weight: 700;">造血干细胞提取出来</text>用于移植，不需要的成分再<text style="font-weight: 700;">"送"</text>回供者的体内。		
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img06.webp" mode=""></image>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						注:移植前,尤其是签署捐献同意书后就不能改变捐献的决定，因为在这个时候,患者为准备移植已经进行了大剂量的放疗和化疗，丧失了造血能力，此期间若终止捐献，再临时寻找配型相合者已来不及，患者将有生命危险。
					</view>
				</view>	
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-7.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						移植手术
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						医护人员将造血干细胞输注患者体内完成移植手术。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img07.jpeg" mode=""></image>
			</view>
			
			<view class="main">
				<view class="number">
					<view class="number-1">
						<image src="../../static/img/number-8.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					<view class="name-1">
						健康追踪
					</view>
				</view>
			</view>
			
			<view class="list-box">
				<view class="list-item">
					<view class="list-tpl">
						在捐献后30天到半年之内,将会对捐献者的健康状况进行<text style="font-weight: 700;">跟踪随访</text>，还会为捐献者提供一年的相关保险。
					</view>
				</view>	
			</view>
			
			<view class="contact">
				<image src="../../static/img/img08.jpeg" mode=""></image>
			</view>
			
			<view class="boundary">
				<view class="boundary-1">
				</view>
				<view class="boundary-bg">
					<image src="../../static/img/img09.webp" mode=""></image>
				</view>
				<view class="boundary-1">
				</view>
			</view>
			
			<view class="end">
				<view class="end-1">
					以上就是捐献造血干细胞的流程
				</view>
				<view class="end-1">
					请支持造血干细胞捐献
				</view>
				<view class="end-1">
					点燃生命希望
				</view>
				<view class="end-1">
					播撒爱的种子
				</view>
				<view class="end-1">
					捐干没有那么可怕
				</view>
				<view class="end-1">
					英雄就在你我身边
				</view>
				<view class="end-1">
					为英雄点赞
				</view>
				<view class="end-1">
					下期再见
				</view>
			</view>
			<view class="footer">
				<view class="footer-left">
					
				</view>
				<view class="footer-main">
					
				</view>
				<view class="footer-right">
					<view class="footer-1">
						未
					</view>
					<view class="footer-1">
						完
					</view>
					<view class="footer-1">
						待
					</view>
					<view class="footer-1">
						续
					</view>
				</view>
			</view>
			
			
		
		
		
		
	</view>
</template>

<script>
	export default {
		methods: {
			goblcak() {
				// uni.navigateTo({
				// 	url: '/pages/index/index'
				// })
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.black {
		background-color: #FFFFFF;
		padding: (40vw/7.5) (30vw/7.5) (30vw/7.5);
		.goblack {
			flex-shrink: 0;
			width: (20vw/7.5);
			height: (40vw/7.5);
		}
		.tit {
			flex-grow: 1;
			text-align: center;
			font-weight: bold;
			font-size: (34vw/7.5);
		}
		
	}
	page{
		background-color: #FFFFFF;
	}
	.content{
		// padding: 25vw/7.5);
		background-color: #FFFFFF;
		padding-bottom: (64vw/7.5);
		.header-title{
			margin-top: (45vw/7.5);
			font-size: (36vw/7.5);
			text-align: center;
		}
		.list-box{
			padding:(25vw/7.5) (25vw/7.5);
		}
		.list-item{
			padding-bottom: (15vw/7.5);
			.list-title{
				font-size: (34vw/7.5);
				display: flex;
				image{
					width: (56vw/7.5);
					height: (44vw/7.5);
					margin-right: (15vw/7.5);
				}
			}
			.list-tpl{
				margin: (25vw/7.5) (0vw/7.5);
				padding: (25vw/7.5) (25vw/7.5);
				background-color: #FEF6F7;
				border:(4vw/7.5) solid #C53335;
				color: #222222;
				font-size: (28vw/7.5);
				border-radius: (25vw/7.5);
				text-align: justify;
				.title-1{
					font-size: (32vw/7.5);
					text-align: center;
					margin-bottom: (15vw/7.5);
				}
				
			}
		}
		video{
			width: (750vw/7.5);
		}
		.main{
			// padding: 25vw/7.5);
		}
		.box-1{
			margin-top: (15vw/7.5);
			text-align: center;
			font-size: (32vw/7.5);
		}
		.title{
			margin-top: (55vw/7.5);
			width: 100%;	
					display: flex;
					justify-content: center;
			.title-1{
				padding: (12vw/7.5) (15vw/7.5);
				// width: 400vw/7.5);
				border:(4vw/7.5) solid #C53335;
				border-radius: (25vw/7.5);
				font-size: (28vw/7.5);
				
			}
		}
		.number{
			margin-top: (35vw/7.5);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			.number-1{
				display: flex;
				justify-content: center;
				align-items: center;
				width: (60vw/7.5);
				height: (60vw/7.5);
				border-radius: (60vw/7.5);
				background-color: #C53335;
				image{
					width: (46vw/7.5);
					height: (46vw/7.5);
				}
			}
		
			
		}
		.remarks{
			width: 100%;
			padding: (25vw/7.5) (25vw/7.5) 0;
			font-size: (28vw/7.5);
			line-height: (44vw/7.5);
			.details{
				
			}
		}
		.name{
			margin-top: (35vw/7.5);
			font-size: (32vw/7.5);
			width: 100%;
			display: flex;
			
			justify-content: center;
			.name-1{
				padding: (8vw/7.5) (35vw/7.5);
				border-radius: (25vw/7.5);
				background-color: #C53335;
				// border:4vw/7.5) solid #C53335;
				
				color: #FFFFFF;
			}
		}
		.contact{
			width: (750vw/7.5);
			height: (600vw/7.5);
			image{
				width: (750vw/7.5);
				height: (560vw/7.5);
			}
		}
		.boundary{
			display: flex;
			justify-content: center;
			align-items: center;
			.boundary-1{
				width: (104vw/7.5);
				border-top: (1vw/7.5) dashed #C53335;
				box-sizing: border-box;
			}
			.boundary-bg{
				width: (88vw/7.5);
				height: (88vw/7.5);
				margin: 0 (12vw/7.5);
				image{
					width: (88vw/7.5);
					height: (88vw/7.5);
				}
			}
		}
		.end{
			margin-top: (22vw/7.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: (30vw/7.5);
			.end-1{
				line-height: (64vw/7.5);
			}
			
		}
		.footer{
			margin-top: (84vw/7.5);
			display: flex;
			align-items: center;
			padding: 0 (25vw/7.5);
			.footer-left{
				width: (30vw/7.5);
				height: (25vw/7.5);
				background-color: #C53335;
				border-radius: (25vw/7.5);
			}
			.footer-main{
				width: 100%;
				border: (1vw/7.5) solid #C53335;
			}
			.footer-right{
				display: flex;
				
				.footer-1{
					display: flex;
					align-items: center;
					justify-content: center;
					width: (44vw/7.5);
					height: (44vw/7.5);
					font-size: (32vw/7.5);
					background-color: #C53335;
					color: #FFFFFF;
					border-radius: 50%;
				}
			}
		}
	}
	.paragraph{
		margin-top: (2vw/7.5);
		// text-indent:52vw/7.5);
	}page{
		background-color: #FFFFFF;
	}
	.content{
		// padding: 25vw/7.5);
		background-color: #FFFFFF;
		padding-bottom: (64vw/7.5);
		.header-title{
			margin-top: (45vw/7.5);
			font-size: (36vw/7.5);
			text-align: center;
		}
		.list-box{
			padding:(25vw/7.5) (25vw/7.5);
		}
		.list-item{
			padding-bottom: (15vw/7.5);
			.list-title{
				font-size: (34vw/7.5);
				display: flex;
				image{
					width: (56vw/7.5);
					height: (44vw/7.5);
					margin-right: (15vw/7.5);
				}
			}
			.list-tpl{
				margin: (25vw/7.5) (0vw/7.5);
				padding: (25vw/7.5) (25vw/7.5);
				background-color: #FEF6F7;
				border:(4vw/7.5) solid #C53335;
				color: #222222;
				font-size: (28vw/7.5);
				border-radius: (25vw/7.5);
				text-align: justify;
				.title-1{
					font-size: (32vw/7.5);
					text-align: center;
					margin-bottom: (15vw/7.5);
				}
				
			}
		}
		video{
			width: (750vw/7.5);
		}
		.main{
			// padding: 25vw/7.5);
		}
		.box-1{
			margin-top: (15vw/7.5);
			text-align: center;
			font-size: (32vw/7.5);
		}
		.title{
			margin-top: (55vw/7.5);
			width: 100%;	
					display: flex;
					justify-content: center;
			.title-1{
				padding: (12vw/7.5) (15vw/7.5);
				// width: 400vw/7.5);
				border:(4vw/7.5) solid #C53335;
				border-radius: (25vw/7.5);
				font-size: (28vw/7.5);
				
			}
		}
		.number{
			margin-top: (35vw/7.5);
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			.number-1{
				display: flex;
				justify-content: center;
				align-items: center;
				width: (60vw/7.5);
				height: (60vw/7.5);
				border-radius: (60vw/7.5);
				background-color: #C53335;
				image{
					width: (46vw/7.5);
					height: (46vw/7.5);
				}
			}
		
			
		}
		.remarks{
			width: 100%;
			padding: (25vw/7.5) (25vw/7.5) 0;
			font-size: (28vw/7.5);
			line-height: (44vw/7.5);
			.details{
				
			}
		}
		.name{
			margin-top: (35vw/7.5);
			font-size: (32vw/7.5);
			width: 100%;
			display: flex;
			
			justify-content: center;
			.name-1{
				padding: (8vw/7.5) (35vw/7.5);
				border-radius: (25vw/7.5);
				background-color: #C53335;
				// border:4vw/7.5) solid #C53335;
				
				color: #FFFFFF;
			}
		}
		.contact{
			width: (750vw/7.5);
			height: (600vw/7.5);
			image{
				width: (750vw/7.5);
				height: (560vw/7.5);
			}
		}
		.boundary{
			display: flex;
			justify-content: center;
			align-items: center;
			.boundary-1{
				width: (104vw/7.5);
				border-top: (1vw/7.5) dashed #C53335;
				box-sizing: border-box;
			}
			.boundary-bg{
				width: (88vw/7.5);
				height: (88vw/7.5);
				margin: 0 (12vw/7.5);
				image{
					width: (88vw/7.5);
					height: (88vw/7.5);
				}
			}
		}
		.end{
			margin-top: (22vw/7.5);
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: (30vw/7.5);
			.end-1{
				line-height: (64vw/7.5);
			}
			
		}
		.footer{
			margin-top: (84vw/7.5);
			display: flex;
			align-items: center;
			padding: 0 (25vw/7.5);
			.footer-left{
				width: (30vw/7.5);
				height: (25vw/7.5);
				background-color: #C53335;
				border-radius: (25vw/7.5);
			}
			.footer-main{
				width: 100%;
				border: (1vw/7.5) solid #C53335;
			}
			.footer-right{
				display: flex;
				
				.footer-1{
					display: flex;
					align-items: center;
					justify-content: center;
					width: (44vw/7.5);
					height: (44vw/7.5);
					font-size: (32vw/7.5);
					background-color: #C53335;
					color: #FFFFFF;
					border-radius: 50%;
				}
			}
		}
	}
	.paragraph{
		margin-top: (2vw/7.5);
		// text-indent:52vw/7.5);
	}
	
</style>