studytour-front/components/home/categoryView.vue

<template>
  <view class="category">
    <view class="flex flex-column category-item" v-for="item in categoryOptions" :key="item.id">
      <image class="img" :src="item.icon" mode="widthFix"></image>
      <view>{{ item.label }}</view>
    </view>
  </view>
</template>

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

        // todo: fetch
        
        this.categoryOptions = [
          {
            id: '001',
            icon: '/static/image/temp-1.png',
            label: '主题研学',
          },
          {
            id: '002',
            icon: '/static/image/temp-2.png',
            label: '社会实践',
          },
          {
            id: '003',
            icon: '/static/image/temp-3.png',
            label: '研学交流',
          },
          {
            id: '004',
            icon: '/static/image/temp-4.png',
            label: '周末研学',
          },
          {
            id: '005',
            icon: '/static/image/temp-5.png',
            label: '假期专项',
          },
          {
            id: '006',
            icon: '/static/image/temp-6.png',
            label: '研学日记',
          },
          {
            id: '007',
            icon: '/static/image/temp-7.png',
            label: '研学政策',
          },
          {
            id: '008',
            icon: '/static/image/temp-8.png',
            label: '本地研学',
          },
          {
            id: '009',
            icon: '/static/image/temp-9.png',
            label: '公司动态',
          },
          {
            id: '010',
            icon: '/static/image/temp-10.png',
            label: '全部',
          },
        ]

      },
    },
  }
</script>

<style scoped lang="scss">

	.category {
		margin-top: 158rpx;
		width: 100%;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		column-gap: 16rpx;
		row-gap: 4rpx;
		background: linear-gradient(#DAF3FF, #FBFEFF 50rpx, #FBFEFF);
		border: 2rpx solid #FFFFFF;
		border-radius: 32rpx;
		
		&-item {
			padding: 16rpx 0;
			row-gap: 12rpx;
			font-size: 22rpx;
			color: #9B9B9B;
			
			.img {
				width: 72rpx;
				height: auto;
			}
		}
	}

</style>