<template>
  <view class="system">
    <div class="top-img">
      <u-image src="../static/images/system/top.png" width="351px" height="146px" />
    </div>
    <div class="cont-img">
      <div class="item" @click="handleItem(1)">
				<u-icon name="../static/images/system/1.png" size="38"></u-icon>
        <div>就餐服务</div>
      </div>
      <div class="item">
				<u-icon name="../static/images/system/2.png" size="38"></u-icon>
        <div>志愿者服务</div>
      </div>
      <div class="item">
				<u-icon name="../static/images/system/3.png" size="38"></u-icon>
        <div>驿站服务</div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
	methods: {
		handleItem(index) {
			if (index === 1) {
				this.$tab.reLaunch('/pages/index')
			}
		}
	}
}
</script>

<style lang="scss">
page {
  min-height: 100vh;
	background-image: url("../static/images/system/bg.png");
}
.system {
  padding: 18px;
	.top-img {
		display: flex;
		justify-content: center;
	}
	.cont-img {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
		.item {
			padding: 15px 0;
			width: 109px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			border-radius: 10px;
			div {
				margin-top: 10px;
			}
		}
	}
}
</style>
