uniapp的小排版

<template>
  <view class="prefix-home_center_class">
    <view class="prefix-container">
      <view v-for="(item, index) in navList" :key="index" class="prefix-item">
        <view :style="{ backgroundColor: item.color }" class="prefix-color-box"></view>
        <view class="prefix-font_icon">{{ item.class_name }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        { class_name: '海鲜水产', color: '#ff0000' },
        { class_name: '新鲜水果', color: '#00ff00' },
        { class_name: '优品鲜蔬', color: '#0000ff' },
        { class_name: '米面粮油', color: '#ffff00' },
        { class_name: '肉类蛋禽', color: '#ff00ff' },
        { class_name: '厨具用品', color: '#00ffff' },
        { class_name: '高等预制', color: '#999999' },
        { class_name: '奶制品', color: '#ff9999' },
        { class_name: '调味干货', color: '#99ff99' },
        { class_name: '药食同源', color: '#9999ff' }
      ]
    };
  },
  methods: {
    toGoodsList(item, index) {
      // Your method implementation here
    }
  }
};
</script>

<style>
.prefix-home_center_class {
  padding: 16rpx;
}

.prefix-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.prefix-item {
  width: 128rpx;
  height: 148rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prefix-color-box {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 8rpx;
  border-radius: 8rpx;
}

.prefix-font_icon {
  font-size: 14rpx;
}
</style>