You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
5.4 KiB
180 lines
5.4 KiB
2 years ago
|
<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>
|