jxzhp/pages/applic/appliSystem.vue

<template>
	<view class="content">
		<view class="box">
			<view class="box-1">
				<navigator url="/pages/applic/toknowledge">
					<view class="img">
						<image src="../../static/img/ack.png" mode=""></image>
					</view>
					<view class="title">
						造血干细胞-相关知识
					</view>
				</navigator>

			</view>
			<view class="box-1">
				<navigator url="/pages/applic/know">
					<view class="img">
						<image src="../../static/img/timg01.jpeg"></image>
					</view>
					<view class="title">
						捐献造血干细胞你了解多少？
					</view>
				</navigator>
			</view>
			<!-- <view class="box-1">
				<navigator url="/pages/applic/applic">
					<view class="img">
						<image src="../../static/img/spread.png"></image>
					</view>
					<view class="title">
						造血干细胞入库申请表
					</view>
				</navigator>
				
			</view> -->
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss">
	.content {
		background-color: #F8F8F8;

		.box {
			padding: 0 (24vw/7.5);

			.box-1 {
				margin-top: (24vw/7.5);
				width: 100%;
				height: (442vw/7.5);
				background-color: #FFFFFF;
				border-radius: (16vw/7.5);

				.img {
					width: 100%;
					height: (300vw/7.5);

					// border-radius: 16vw/7.5) 16vw/7.5) 0 0;
					image {
						border-radius: (16vw/7.5) (16vw/7.5) 0 0;
						width: 100%;

						height: (300vw/7.5);
					}
				}

				.title {
					height: (142vw/7.5);
					padding-left: (24vw/7.5);
					line-height: (142vw/7.5);
					font-size: (34vw/7.5);
				}
			}
		}
	}
</style>