123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- <template>
- <div class="container">
- <div class="tabs">
- <div v-for="item in tabs" :key="item.id" class="tab" @click="handleClickTab(item.id)">
- <i :class="item.icon" />
- <div :class="activeIndex === item.id ? 'tab-text text-active' : 'tab-text'">{{ item.name }}</div>
- </div>
- </div>
- <div class="content">
- <eventList v-if="activeIndex === 'event'" @changIndex="handleClickTab" />
- <!--
- <HiddenSource v-else-if="activeIndex === 'task'" />
- <investigationRecords v-else-if="activeIndex === 'job'" />
- -->
- </div>
- </div>
- </template>
- <script setup lang="ts">
- import { ref } from "vue";
- import eventList from "./eventList.vue";
- //import HiddenSource from "./HiddenSource.vue";
- //import dangerousSource from "./dangerousSource.vue";
-
- let activeIndex = ref('event');
- let tabs = ref([
- { id: 'event', name: '事件管理', icon: 'icon1' },
- { id: 'task', name: '任务管理', icon: 'icon2' },
- { id: 'job', name: '工作请示', icon: 'icon3' },
- ]);
-
- // 点击tab
- const handleClickTab = (id) => {
- activeIndex.value = id;
- };
-
- </script>
-
-
- <style lang="scss" scoped>
- .container {
- height: calc(100vh - 55px);
- padding-top: 12px;
- position: relative;
- display: flex;
- flex-direction: column;
- .tabs {
- height: 90px;
- flex-shrink: 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 16px;
- .tab {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- .icon1, .icon2, .icon3, .icon4 {
- display: inline-block;
- width: 48px;
- height: 48px;
- background-color: #9d9d9d;
- }
- .tab-text {
- color: #414F64;
- font-size: 14px;
- margin-top: 8px;
- }
- .text-active {
- color: #2C81FF;
- }
- }
- }
- .content {
- margin-top: 10px;
- height: calc(100vh - 180px);
- overflow-y: auto;
- }
- }
- </style>
-
|