用vue写出一个外卖软件的图标区域

好的，以下是一个简单的外卖软件图标区域的Vue组件示例：

<template>
  <div class="icons">
    <div class="icon-item" v-for="(item, index) in items" :key="index">
      <img :src="item.icon" alt="" class="icon-image" />
      <div class="icon-label">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Icons",
  data() {
    return {
      items: [
        {
          icon: "icon1.png",
          label: "美食",
        },
        {
          icon: "icon2.png",
          label: "商超便利",
        },
        {
          icon: "icon3.png",
          label: "水果生鲜",
        },
        {
          icon: "icon4.png",
          label: "医药健康",
        },
        {
          icon: "icon5.png",
          label: "浪漫鲜花",
        },
        {
          icon: "icon6.png",
          label: "跑腿代购",
        },
        {
          icon: "icon7.png",
          label: "家庭服务",
        },
        {
          icon: "icon8.png",
          label: "洗衣洗鞋",
        },
      ],
    };
  },
};
</script>

<style scoped>
.icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  background-color: #fff;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  margin-bottom: 20px;
}

.icon-image {
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}

.icon-label {
  font-size: 12px;
  text-align: center;
}
</style>

这个组件会渲染出一个包含多个图标和标签的区域，每个图标和标签都可以点击。你可以根据自己的需要修改图标和标签的内容和样式，以及调整布局方式和排列顺序。