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

<template>
 <view class="category-list">
		<view v-for="(item, index) in homepageCategoryList" :key="index" class="category" @tap="jumpList(item)">
			<view class="class_img"><image :class="item.jumpTargetType==16? 'mix':''" :src="item.iconUrl" class="imgs "></image></view>
			<view class="text" :style="item.jumpTargetType==16? 'font-size:11px':''" >{{ item.name }}</view>
		</view>
</view>
</template>
<script>

export default {
  data() {
    return {
           "homepageCategoryList": [
             {
               "iconUrl": "https://p0.meituan.net/mallimages/7725f825efb14c613a7ef53882bf2fc342550.png",
               "name": "蔬菜豆制品",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40488",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/65a404f1fb66da5eae1b43adac8794da41080.png",
               "name": "肉禽蛋",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40581",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/2a9d96c2b396d97e425d60e182a5a8da13882.png",
               "name": "海鲜水产",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40652",
               "jumpTargetType": 3,
               "bubble": {
                 "id": 1011,
                 "type": 1,
                 "text": "抢波龙",
                 "priority": 1,
                 "utime": 1610624525256
               }
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/8bf2a444e426d0205f1e7a50a034e2d234560.png",
               "name": "水果",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40532",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/6a5bba31dd8720e66ac5c90399b647f430483.png",
               "name": "乳品烘焙",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40461",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p1.meituan.net/mallimages/752d4d5ed15ea9b418268dbbb58f730838543.png",
               "name": "速食冻品",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40478",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/cc71321c6617da6b7b941763208a011332548.png",
               "name": "粮油调味",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40472",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/ac948daefceb0c71735868d1accbe22031714.png",
               "name": "酒水饮料",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40455",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/a59a09667218f46722803f78ef720e5910801.png",
               "name": "休闲零食",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40485",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p1.meituan.net/mallimages/4f6e7f3657a9741571ad809c021ad98b48763.png",
               "name": "餐饮熟食",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40916",
               "jumpTargetType": 3
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/61c91165616fcecb6148f841b35c85c46003.png",
               "name": "年货大街",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=41755",
               "jumpTargetType": 16
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/5d24618a6160c550ccfe13942ba620c36288.png",
               "name": "美团奶站",
               "jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2Fe7b70154317467246531%2F93534%2Findex.html%3FpoiId%3D1865",
               "jumpTargetType": 16
             },
             {
               "iconUrl": "https://p1.meituan.net/mallimages/4799fc4c5ed9e7b06e3eb01d5f73ae0432224.png",
               "name": "打边炉",
               "jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F56eae497a65b9470558c%2F97032%2Findex.html%3FpoiId%3D1865",
               "jumpTargetType": 16
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/adf27d98c79b4ee210381b85bdb0121228333.png",
               "name": "煲靓汤",
               "jumpUrl": "imaicai://www.maicai.com/web?future=1&url=https%3A%2F%2Fi.meituan.com%2Fawp%2Fhfe%2Fblock%2F121e7c13425aa76e8d97%2F97034%2Findex.html%3FpoiId%3D1865",
               "jumpTargetType": 16
             },
             {
               "iconUrl": "https://p0.meituan.net/mallimages/36d8e40e80ead870bce26f6a5311c4996010.png",
               "name": "家居个护",
               "jumpUrl": "imaicai://www.maicai.com/category_list?category_id=40482",
               "jumpTargetType": 16
             }
           ],
    };
  },
  props: {

  },
  methods: {
    jumpList(item) {
      uni.navigateTo({
        url: '/pages/views/home/classList?classId=' + item.id
      });
    }
  }
};
</script>
<style scoped lang="scss">
.category-list {
  width: 94%;
  margin: 0 3%;
  padding: 0 0 30upx 0;
  border-bottom: solid 2rpx #f6f6f6;
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0upx 0upx 10rpx #d0d0d0;
  margin-top: 20upx;
  border-radius: 10upx;
}
.category {
  width: 20%;
  margin-top: 50upx;
  display: flex;
  flex-wrap: wrap;
}
.category:active{
  opacity: 0.8;
}
.category .class_img {
  width: 100%;
  display: flex;
  justify-content: center;
  .imgs {
    width: 12vw;
    height: 12vw;
  }
}
.mix{
	width: 9vw !important;
	height: 9vw !important;
}
.text {
  margin-top: 16upx;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 24upx;
  color: #3c3c3c;
  font-weight: 500;
}
</style>