DropBoxApp/app/DropBox/pages/index/index.vue

<template>
	<view class="container">
		<view class='top-container'>
			<image class='bg-img' src='../../static/bg.jpg'></image>
		</view>
        <view class="banner">
			
			<view v-for="(item,index) in lists" :key="index"  class="panel">
				<navigator :open-type="item.openType" :url="item.routerPath" >
					<view class="imgbox"><image :src="item.imgPath" /></view>
			        <text class="text">{{item.title}}</text>
				 </navigator>
			</view>
		</view> 
	</view>
</template>

<script> 
	export default { 
		data() {
			return {
				code: 'Hello',
				lists: [{
					title: '客户业务',
					openType: 'navigate',
					routerPath: '../customer/customer',
					imgPath: '../../static/truck.png',
					type:'1'
				},
				{
					title: '班列业务',
					openType: 'navigate',
					routerPath: '../train/train',
					imgPath: '../../static/train.png',
					type:'1'
				},
				{
					title: '箱号移位',
					openType: 'navigate',
					routerPath: '../move/move',
					imgPath: '../../static/move.png',
					type:'1'
				},
				{
					title: '装卸明细',
					openType: 'navigate',
					routerPath: '../workdetail/workdetail',
					imgPath: '../../static/workdetail.png',
					type:'1'
				},
				]
			}
		},
		onLoad: function() { 
			//检测登录授权TOKEN
			var loginRes = this.checkLogin('../index/index', 2)
			if (!loginRes) {
				return;
			}
		},
		onShow: function() {
			 
		}, 
		methods: {

		}
	}
</script>

<style>
	.container {
		position: relative;
	}

	.top-container {
		height: 440rpx;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.bg-img {
		position: absolute;
		width: 100%;
		height: 440rpx;
	}
	.banner:after {
	            content: "";
	            width: 30%;
	            height: 0px;
	            visibility: hidden;
	        }
	.banner {
		display: flex;  
	    flex-wrap: wrap;
		text-align: center;
		padding: 0 40upx;
		justify-content: space-between;
		}
	.panel {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 200upx;
		height: 200upx;
		margin-bottom: 60upx;
	    justify-content: center;
		border-radius: 15%;
		/* box-shadow: 0 0 3px #00a0e9; */
		/* background-color: rgba(0,160, 233, 0.6); */
	    /* background-color: rgba(162, 217, 192, 0.2); */
	  }
	  .imgbox {
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 width: 110upx;
		 height: 110upx;
		 line-height: 150upx;
		 border-radius: 8px;
		 background-color: white;
	  }
	  .imgbox image {
		  width: 70upx;
		  height: 70upx;
		  margin: 0;
		  padding: 0;
		  box-sizing: border-box;
	  }
	  .text {
	    text-align: center;
	  }
</style>