yjxp-web/src/views/worker/eventManagement/index.vue

<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>