index.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <template>
  2. <div class="container">
  3. <div class="tabs">
  4. <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
  5. <i :class="item.icon" />
  6. <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
  7. </div>
  8. </div>
  9. <div class="content">
  10. <eventList v-if="activeIndex === 'event'" @changIndex="handleClickTab" />
  11. <!--
  12. <HiddenSource v-else-if="activeIndex === 'task'" />
  13. <investigationRecords v-else-if="activeIndex === 'job'" />
  14. -->
  15. </div>
  16. </div>
  17. </template>
  18. <script setup lang="ts">
  19. import { ref } from "vue";
  20. import eventList from "./eventList.vue";
  21. //import HiddenSource from "./HiddenSource.vue";
  22. //import dangerousSource from "./dangerousSource.vue";
  23. let activeIndex = ref('event');
  24. let tabs = ref([
  25. { id: 'event', name: '事件管理', icon: 'icon1' },
  26. { id: 'task', name: '任务管理', icon: 'icon2' },
  27. { id: 'job', name: '工作请示', icon: 'icon3' },
  28. ]);
  29. // 点击tab
  30. const handleClickTab = (id) => {
  31. activeIndex.value = id;
  32. };
  33. </script>
  34. <style lang="scss" scoped>
  35. .container {
  36. height: calc(100vh - 55px);
  37. padding-top: 12px;
  38. position: relative;
  39. display: flex;
  40. flex-direction: column;
  41. .tabs {
  42. height: 90px;
  43. flex-shrink: 0;
  44. display: flex;
  45. justify-content: space-between;
  46. align-items: center;
  47. padding: 0 16px;
  48. .tab {
  49. display: flex;
  50. flex-direction: column;
  51. justify-content: center;
  52. align-items: center;
  53. .icon1, .icon2, .icon3, .icon4 {
  54. display: inline-block;
  55. width: 48px;
  56. height: 48px;
  57. background-color: #9d9d9d;
  58. }
  59. .tab-text {
  60. color: #414F64;
  61. font-size: 14px;
  62. margin-top: 8px;
  63. }
  64. .text-active {
  65. color: #2C81FF;
  66. }
  67. }
  68. }
  69. .content {
  70. margin-top: 10px;
  71. height: calc(100vh - 180px);
  72. overflow-y: auto;
  73. }
  74. }
  75. </style>