<template>
  <div id="app">
    <div class="nav">
      <button @click="currentView = 'dashboard'">实时大屏</button>
      <button @click="currentView = 'console'">中控台</button>
    </div>
    <component :is="currentView" :liveId="liveId"></component>
  </div>
</template>

<script>
import LiveDashboard from './LiveDashboard.vue';
import LiveConsole from './LiveConsole.vue';

export default {
  name: 'LiveConsole',
  components: {
    dashboard: LiveDashboard,
    console: LiveConsole
  },
  data() {
    return {
      liveId: this.$route.params.liveId,
      currentView: 'dashboard'
    };
  },
  created() {

  }
};
</script>

<style>
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
}

.nav {
  display: flex;
  background: #1e3a8a;
  color: white;
}

.nav button {
  padding: 15px 20px;
  border: none;
  background: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

.nav button:hover {
  background: #3b82f6;
}
</style>
