用vue实现一个包含横向主菜单和左侧菜单的菜单界面

以下是一个简单的示例代码，包含横向主菜单和左侧菜单的菜单界面：

<template>
  <div class="menu-container">
    <div class="main-menu">
      <ul>
        <li v-for="(menu, index) in mainMenus" :key="index">{{ menu }}</li>
      </ul>
    </div>
    <div class="left-menu">
      <ul>
        <li v-for="(menu, index) in leftMenus" :key="index">{{ menu }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainMenus: ['首页', '新闻', '产品', '关于'],
      leftMenus: ['产品列表', '产品详情', '关于我们', '联系我们']
    }
  }
}
</script>

<style>
.menu-container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.main-menu {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.main-menu li {
  margin: 0 10px;
  cursor: pointer;
}

.main-menu li:hover {
  color: #409eff;
}

.left-menu {
  width: 200px;
  height: 100%;
  background-color: #f5f5f5;
}

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

.left-menu li {
  margin: 10px;
  cursor: pointer;
}

.left-menu li:hover {
  color: #409eff;
}
</style>

在这个示例中，我们使用了两个 `div` 分别表示横向主菜单和左侧菜单，并在 `data` 里定义了主菜单和左侧菜单的数据。我们使用 `v-for` 指令来遍历数据，生成菜单列表，并使用 CSS 样式来美化菜单界面。

注意，这只是一个简单的示例，实际项目中可能需要更复杂的菜单结构和样式，我们需要根据具体需求进行设计和开发。