ydl-sampling/sampling-mini-program-master/pages/index/index.vue

<template>
	<view class="">
		<view class="content-header">
			<text>人员采样</text>
		</view>
		<view class="content">
			<view class="content-box" @click="toApply()">
				<view class="content-img">
					<img src="../../static/icon/piao.png" alt="入场申请">
				</view>
				<view class="">
					<text>入场申请</text>
				</view>
			</view>
			<view class="content-box" @click="toSampling()">
				<view class="content-img">
					<img src="../../static/icon/caiyang.png" alt="人员采样">
				</view>
				<view class="">
					<text>人员采样</text>
				</view>
			</view>
			<view class="content-box" @click="toInput()">
				<view class="content-img">
					<img src="../../static/icon/dengji.png" alt="检测结果录入">
				</view>
				<view class="">
					<text>检测结果录入</text>
				</view>
			</view>
			<view class="content-box" @click="toCheck()">
				<view class="content-img">
					<img src="../../static/icon/chaxun.png" alt="检测结果查询">
				</view>
				<view class="">
					<text>检测结果查询</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {

		},
		methods: {
			toApply(){
				uni.navigateTo({
					url:'/pages/admissionApply/admissionApply'
				})
			},
			toSampling(){
				uni.navigateTo({
					url:'/pages/personnelSampling/personnelSampling'
				})
			},
			toInput(){
				uni.navigateTo({
					url:'/pages/inputDetectionResult/inputDetectionResult'
				})
			},
			toCheck(){
				uni.navigateTo({
					url:'/pages/checkResult/checkResult'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content-header{
		text{
			display: block;
			    text-align: center;
			background-color: #1296db;
			color: white;
			margin: 20rpx 20rpx 50rpx;
		}
	}
	.content {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.content-box{
		width: 33%;
		text-align: center; 
		margin-bottom: 30rpx;
		.content-img{
			width:100%;
			img{
				width: 60%;
				height: 150rpx;
			}
		}
	}
</style>