index.vue 960 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div id="app">
  3. <div class="nav">
  4. <button @click="currentView = 'dashboard'">实时大屏</button>
  5. <button @click="currentView = 'console'">中控台</button>
  6. </div>
  7. <component :is="currentView" :liveId="liveId"></component>
  8. </div>
  9. </template>
  10. <script>
  11. import LiveDashboard from './LiveDashboard.vue';
  12. import LiveConsole from './LiveConsole.vue';
  13. export default {
  14. name: 'LiveConsole',
  15. components: {
  16. dashboard: LiveDashboard,
  17. console: LiveConsole
  18. },
  19. data() {
  20. return {
  21. liveId: this.$route.params.liveId,
  22. currentView: 'dashboard'
  23. };
  24. },
  25. created() {
  26. }
  27. };
  28. </script>
  29. <style>
  30. body {
  31. margin: 0;
  32. font-family: 'Arial', sans-serif;
  33. }
  34. .nav {
  35. display: flex;
  36. background: #1e3a8a;
  37. color: white;
  38. }
  39. .nav button {
  40. padding: 15px 20px;
  41. border: none;
  42. background: none;
  43. color: white;
  44. cursor: pointer;
  45. font-size: 16px;
  46. }
  47. .nav button:hover {
  48. background: #3b82f6;
  49. }
  50. </style>