完成餐饮配套页面UI

components/index-nav/index-nav.vue

@@ -54,7 +54,7 @@ export default {
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '活动报名'
 		},{
-			link: '',
+			link: '/pages/index/cateringFacilities/cateringFacilities',
 			image: 'https://cdn.guojiang.club/storage/uploads/images/2020_06_05/rNCqCVUgi5GFYntpqmevHEaO1NYt5PZ2tgjEXRMU.png',
 			name: '餐饮配套'
 		},{

pages.json

@@ -879,6 +879,13 @@
 				"navigationBarTitleText": "订单详情",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/index/cateringFacilities/cateringFacilities",
+			"style" : {
+				"navigationBarTitleText": "餐饮配套",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {

pages/index/cateringFacilities/cateringFacilities.vue

@@ -0,0 +1,121 @@
+<template>
+	<view>
+		<lf-nav title="餐饮配套" :showIcon="true" bgColor="transparent" titleColor="#fff" :spreadOut="false"></lf-nav>
+		<view class="head">
+			<image class="img" src="https://picsum.photos/200/300"></image>
+		</view>
+		<view class="content">
+			<view v-for="(t_item, t_index) in 3" :key="t_index">
+				<view class="title">正餐</view>
+				<view class="list">
+					<view class="item" v-for="(item, index) in 6" :key="index">
+						<view class="img">
+							<image src="https://picsum.photos/200/300" mode="aspectFill"></image>
+							<view class="float-layer">
+								<image src="../../../static/recommend-r.png"></image>
+							</view>
+						</view>
+						<view class="name">海底捞</view>
+						<view class="desc">火锅L3</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.head{
+		width: 750rpx;
+		height: 520rpx;
+		.img{
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.content{
+		padding: 20rpx 32rpx 40rpx;
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		.title{
+			font-size: 36rpx;
+			color: #15716E;
+			font-weight: bold;
+			padding: 20rpx 0;
+			// border-bottom: 4rpx dashed;
+			background-image: linear-gradient(to right, #15716E 0%, #15716E 50%, transparent 50%);
+			background-size: 28rpx 4rpx;
+			background-repeat: repeat-x;
+			background-position-y: bottom;
+		}
+		.list{
+			display: flex;
+			flex-wrap: wrap;
+			.item{
+				width: 200rpx;
+				height: max-content;
+				padding: 20rpx 0;
+				margin-right: 43rpx;
+				&:nth-child(3n){
+					margin-right: 0rpx;
+				}
+				.img{
+					width: 200rpx;
+					height: 200rpx;
+					border-radius: 10rpx;
+					overflow: hidden;
+					position: relative;
+					&>image{
+						width: 100%;
+						height: 100%;
+						background-color: #EEEEEE;
+					}
+					.float-layer{
+						position: absolute;
+						left: 0;
+						top: 0;
+						width: 100%;
+						height: 100%;
+						background-color: rgba(0,0,0,0.5);
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						&>image{
+							width: 100rpx;
+							height: 100rpx;
+							border-radius: 50%;
+						}
+					}
+				}
+				.name{
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #222222;
+					margin-top: 10rpx;
+				}
+				.desc{
+					font-size: 24rpx;
+					color: #777777;
+				}
+			}
+		}
+	}
+</style>