nherp-shop/pages/commponent/home/fourSquares.vue

<template>
	<view  class="grid  col-2 h-100 m-3 justify-between" style=" height: 500rpx;margin-top: 20rpx;box-shadow: 0px 0px 5px #d0d0d0;border-radius: 20rpx;">
			<view class="flex flex-wrap item" v-for="(item,index) in tileList"  :key="index" style="flex-direction: row; justify-content: space-between;">
				<view class="w-100 text-lg">{{item.title}}</view>
				<view class="w-100 text-sm" v-if="item.subTitle" :style="{color:item.subTitleColor}">{{item.subTitle}}</view>
				<view class="grid col-2 w-100">
					<view class="w-100 " v-for="(good,index) in item.itemList" :key="index">
						<image style="height: 120rpx;  " :src="good.picUrl" mode="aspectFit"></image>
						<view class="padding-left-xs">
							<text v-if="good.sellPrice" class="text-bold" style="color: #FF1929;">{{good.sellPrice.text}}</text>
							<text v-if="good.dashPrice" class="text-gray text-xs padding-left-xs" style="text-decoration: line-through;">{{good.dashPrice.text}}</text>
						</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tileList: [
					{
						"tileId": 0,
						"title": "秒杀",
						"jumpUrl": "imaicai://www.maicai.com/web?wkwebview=1&future=1&url=https%3A%2F%2Fmall.meituan.com%2Ffe%2Fc%2Factivity%2Fseckill.html",
						"appletJumpUrl": "",
						"subjectId": 0,
						"position": 3,
						"titleColor": "#121924",
						"subTitleColor": "#FF1929",
						"tagPic": "",
						"itemList": [
							{
								"skuId": 75121,
								"picUrl": "https://p1.meituan.net/mallimages/afc8635ad295f03c99d50945f35544e0158519.jpg",
								"tagType": 4,
								"sellPrice": {
									"text": "¥22.7"
								},
								"dashPrice": {
									"text": "¥25.9",
									"styleId": "dp"
								},
								"baseCategoryId": 57
							},
							{
								"skuId": 92874,
								"picUrl": "https://p0.meituan.net/mallimages/ce107e631de932c7a572f9bfd7fe296c240498.png",
								"tagType": 4,
								"sellPrice": {
									"text": "¥7.7"
								},
								"dashPrice": {
									"text": "¥11.8",
									"styleId": "dp"
								},
								"baseCategoryId": 23
							}
						],
						"tagType": 4,
						"seckillVO": {
							"timeInterval": 1610985599000,
							"seckillingType": 1
						},
						"jumpTargetType": 10
					},
					{
						"tileId": 1152,
						"title": "新品发现",
						"subTitle": "精选好货抢鲜购",
						"jumpUrl": "imaicai://www.maicai.com/web?wkwebview=1&url=https%3A%2F%2Fmall.meituan.com%2Ffe%2Fc%2Fseasonal-skus.html",
						"appletJumpUrl": "",
						"subjectId": 0,
						"position": 5,
						"titleColor": "#121924",
						"subTitleColor": "#CC6A00",
						"tagPic": "",
						"itemList": [{
								"skuId": 61006,
								"picUrl": "https://p0.meituan.net/mallimages/275b1af3fc453162b7e405ceb38c4806241570.jpg",
								"tagType": 1,
								"baseCategoryId": 311
							},
							{
								"skuId": 1949,
								"picUrl": "https://p1.meituan.net/waimaidpoipicmining/ea9cff3d5456a862eb23e03f9f704b1a102360.jpg",
								"tagType": 1,
								"baseCategoryId": 448
							}
						],
						"tagType": 1,
						"jumpTargetType": 27
					},
					{
						"tileId": 1156,
						"title": "品质肉蛋",
						"subTitle": "猪汤骨17.9元",
						"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F8d3f7baded5060a2964b%2F103729%2Findex.html%3FpoiId%3D2423",
						"appletJumpUrl": "",
						"subjectId": 0,
						"position": 6,
						"titleColor": "#121924",
						"subTitleColor": "#158A50",
						"tagPic": "",
						"itemList": [{
								"skuId": 93724,
								"picUrl": "https://p1.meituan.net/mallimages/4c7592faa7245c9518779b2ed036ca6f959671.png",
								"tagType": 1,
								"baseCategoryId": 568
							},
							{
								"skuId": 84873,
								"picUrl": "https://p1.meituan.net/mallimages/c8dfdf4fb55a839b61f25640287e2bee277992.png",
								"tagType": 1,
								"baseCategoryId": 55
							}
						],
						"tagType": 1,
						"jumpTargetType": 16
					},
					{
						"tileId": 1155,
						"title": "大寒节气餐单",
						"subTitle": "应季而食必吃榜",
						"jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fe9105f026a8f066445b0%2F103559%2Findex.html%3FpoiId%3D2423",
						"appletJumpUrl": "",
						"subjectId": 0,
						"position": 7,
						"titleColor": "#121924",
						"subTitleColor": "#FF1929",
						"tagPic": "",
						"itemList": [{
								"skuId": 74132,
								"picUrl": "https://p1.meituan.net/mallimages/d4ca8cb05b0f8bdce33c11a657c222d591452.jpg",
								"tagType": 1,
								"baseCategoryId": 36
							},
							{
								"skuId": 67612,
								"picUrl": "https://p0.meituan.net/mallimages/92ee6d6f97d72a79af056df53fcfcce5152802.jpg",
								"tagType": 1,
								"baseCategoryId": 39
							}
						],
						"tagType": 1,
						"jumpTargetType": 16
					}
				],
			}
		}
	}
</script>

<style>
	.item{
		position: relative;
		padding: 15rpx 15rpx;
	}
	.item:after{
		    position: absolute;
		        top: 0;
		        left: 0;
		        box-sizing: border-box;
		        width: 200%;
		        height: 200%;
		        border-right: 1px solid rgba(0,0,0,.1);
		        border-bottom: 1px solid rgba(0,0,0,.1);
		        border-radius: inherit;
		        content: " ";
		        -webkit-transform: scale(.5);
		        transform: scale(.5);
		        -webkit-transform-origin: 0 0;
		        transform-origin: 0 0;
		        pointer-events: none;
		    
	}
</style>