用vue写一个外卖软件首页的页面

好，以下是一个简单的外卖软件首页的页面代码示例：

<template>
  <div>
    <h1>外卖软件</h1>
    <div>
      <h2>推荐菜品</h2>
      <ul>
        <li v-for="food in recommendedFoods">{{ food.name }} - {{ food.price }}</li>
      </ul>
    </div>
    <div>
      <h2>促销活动</h2>
      <ul>
        <li v-for="promotion in promotions">{{ promotion.name }} - {{ promotion.discount }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recommendedFoods: [], // 推荐菜品
      promotions: [], // 促销活动
    }
  },
  created() {
    // 从后端API获取推荐菜品和促销活动数据
    // ...
  },
}
</script>

<style>
h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

ul {
  list-style: none;
  padding-left: 0;
}

li {
  margin-bottom: 1rem;
}
</style>

以上代码仅供参考，具体实现根据需求和设计进行调整。