JiangxiMiniProgram/pages/indexEntry/examines/examines.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="找考场"></topNavbar>
		<view class="pad">
			<view class="card">
				<view class="navBox">
					<view class="nav" v-for="(item,index) in navList" :key="index">
						<view class="icon">
							<image :src="item.icon" mode=""></image>
						</view>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>
			<view class="h1_row">
				<view class="h1">附近考场</view>
				<moreRight text="查看全部考场" @click.native="$goPage('/pages/indexEntry/examines/allExamines/allExamines')"></moreRight>
			</view>
			<view class="card">
				<examineItem></examineItem>
			</view>
		</view>
	</view>
</template>

<script>
	import examineItem from './comp/examineItem.vue'
	export default {
		components: { examineItem },
		data() {
			return {
				navList: [
					{text: '我要模拟', icon: require('../../../static/images/index/btn_moni.png'), id: 1 },
					{text: '考场取号', icon: require('../../../static/images/index/btn_quhao.png'), id: 2 },
					{text: '领证宣誓', icon: require('../../../static/images/index/btn_xuanshi.png'), id: 3 },
					{text: '警示教育', icon: require('../../../static/images/index/btn_jiaoyu.png'), id: 4 },
					{text: '驾照邮寄', icon: require('../../../static/images/index/btn_youjix.png'), id: 5 },
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navBox {
		display: flex;
	  .nav {
		  flex: 2;
	    .icon {
	      width: 92rpx;
	      height: 92rpx;
		  margin: 0 auto;
	    }
	
	    .text {
			font-size: 26rpx;
			margin-top: 22rpx;
			text-align: center;
	    }
	  }
	}
	.h1_row {
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.card {
		padding: 32rpx 24rpx 28rpx 24rpx;
		margin-bottom: 20rpx;
	}
	.redBox {
		
	}
</style>