<template>
	<view class="container">
		<view class="main" style="padding-top: 150rpx;">
			<u-grid :border="false" col="2" align="center" @click="onGrid">
				<u-grid-item v-for="(item,index) in list" :key="index">
					<view class="demo-layout bg-purple-light" :style="`background-color: ${item.background};`">
						<image class="icon" :src="item.icon"></image>
						<text>{{ item.title }}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	const list = [{
		name: 'lock',
		title: '代他人取餐',
		path: 'pages/order/delivery/others',
		background: 'abd5f8',
		icon: '../../../static/icon/05.svg'
	}, {
		name: 'lock',
		title: '取消代餐',
		path: 'pages/order/delivery/cancel',
		background: '#bee9d3',
		icon: '../../../static/icon/04.svg'
	}];

	export default {
		data() {
			return {
				list,
				isLogin: false
			}
		},
		onLoad() {},
		onShow() {},
		methods: {
			onGrid(index) {
				this.$navTo(this.list[index].path)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: calc(100vh - var(--window-top) - 9vh);
		// background: #fff;
		background: url('https://file.wsdns.cn/20230417/3d70ff20e2044977a872f867cfe7e570.png');
		background-position: bottom;
	}

	.main {
		width: 600rpx;
		margin: auto;

		.demo-layout {
			background-color: #ffffff;
			margin: 15rpx auto;
			width: 220rpx;
			color: #4c4c4c;
			padding: 27rpx;
			border-radius: 15rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;

			.icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 15rpx;
			}
		}
	}
</style>
