gsytj/pages/applic/appliSystem.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="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>
	export default {
		methods: {
			goblcak() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</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);
		}
		
	}
	.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>