studytour-front/components/home/recommendView.vue

<template>
  <view class="recommend">
    <view class="flex recommend-item" v-for="item in recommendList" :key="item.id">
      <image class="img" :src="item.icon" mode="widthFix"></image>
      <view>
        <view class="label">{{ item.label }}</view>
        <view :class="['desc', item.highlight ? 'highlight' : '']">{{ item.desc }}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
		data() {
			return {
				recommendList: [],
			}
		},
		created() {
      this.getData()
    },
    methods: {
      getData() {

        // todo: fetch

        this.recommendList = [
          {
            id: '001',
            icon: '/static/image/temp-11.png',
            label: '限时优惠',
            desc: '速抢折扣',
            highlight: true,
          },
          {
            id: '002',
            icon: '/static/image/temp-12.png',
            label: '口碑爆款',
            desc: '热销推荐',
          },
          {
            id: '003',
            icon: '/static/image/temp-13.png',
            label: '新上线路',
            desc: '全新上线',
          },
        ]

      },
    },
  }
</script>

<style scoped lang="scss">

	.recommend {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 12rpx;

		&-item {
			justify-content: flex-start;
			column-gap: 8rpx;
			padding: 16rpx;
			box-sizing: border-box;
			background: linear-gradient(to right, #FFF5EA, #FFFCF9 70%, #FFFCF9);
			border-radius: 16rpx;
			
			.img {
				width: 56rpx;
				height: auto;
			}

			.label {
				font-size: 26rpx;
				color: #181818;
			}

			.desc {
				font-size: 22rpx;
				color: #9B9B9B;

				&.highlight {
					color: #FF9035;
				}
			}
		}
	}
</style>