用vue写一个外卖软件尾部

好的，以下是一个简单的外卖软件尾部的Vue组件示例：

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

<script>
export default {
  name: "Footer",
  data() {
    return {
      items: [
        {
          icon: "home.png",
          label: "首页",
        },
        {
          icon: "order.png",
          label: "订单",
        },
        {
          icon: "mine.png",
          label: "我的",
        },
      ],
    };
  },
};
</script>

<style scoped>
.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  background-color: #f8f8f8;
}

.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-icon {
  width: 30px;
  height: 30px;
}

.footer-label {
  font-size: 12px;
  margin-top: 5px;
}
</style>

这个组件会渲染出一个底部导航栏，包含三个图标和标签。你可以根据自己的需要修改图标和标签的内容和样式。