<template>
	<view class="content">
		<image class="banner" mode="widthFix" src="../../static/member_01.jpg"></image>
		<view class="joinBTn" @tap="joinUs">会员福利</view>
		<view class="joinBTn" style="display: none;" @tap="goCarecenter">月子中心</view>


		<view class="menuBox">
			<view class="menuCol" @click="toNav" data-nav="f">
				<image src="../../static/icon_home_huodong@2x.png"></image>
				<view>福利</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_fuwu@2x.png"></image>
				<view>享受服务</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_youhui@2x.png"></image>
				<view>特价优惠</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_shanghu@2x.png"></image>
				<view>优质商户</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_youxuan@2x.png"></image>
				<view>为您优选</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_shangcheng@2x.png"></image>
				<view>母婴商城</view>
			</view>
			<view class="menuCol" @tap="goCarecenter">
				<image src="../../static/icon_home_yuezizhongxin.png"></image>
				<view>月子中心</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_women@2x.png"></image>
				<view>关于我们</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			joinUs() {
				uni.navigateTo({
					url: "../member/member"
				});
			},
			goCarecenter() {
				uni.navigateTo({
					url: "../../packages/packageCarecenter/pages/careCenter/careCenter"
				});
			},
			myOrder() {
				uni.navigateTo({
					url: "../../packages/packageOrder/pages/myOrder/myOrder"
				});
			},
			toNav:function(){
				uni.navigateTo({
					url:"../../packages/packageBuy/pages/shopList/shopList"
				});
			}
		}
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	.banner {
		display: block;
		width: 100%
	}

	.joinBTn {
		width: 690rpx;
		height: 88rpx;
		color: #fff;
		margin: 30rpx auto;
		border-radius: 8px;
		font-size: 28rpx;
		text-align: center;
		line-height: 88rpx;
		background: #FF578A;
	}

	.menuBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		width: 690rpx;
		margin: 0 auto 10rpx auto;
		box-sizing: border-box;

		.menuCol {
			width: 25%;
			text-align: center;
			font-size: 24rpx;
			color: #333;
			margin-top: 34rpx;

			image {
				display: block;
				width: 94rpx;
				height: 94rpx;
				margin: 0 auto 10rpx auto;
			}
		}
	}
</style>
