sl-sfy-safety/src/views/message/reportmessage/ReportMessage.vue

<template>
  <div class="report-message">
    <div class="flex reportmessage-head-tabs">
      <div
        class="flex justify-center items-center tab-item"
        :class="{ 'tab-item-active': type === item.value }"
        @click="switchTable(item.value)"
        v-for="item in typeName"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
    <Form />
  </div>
</template>
  
  <script setup lang="ts">
import Form from './components/Form.vue';
import { typeName } from '@/views/message/constant';
import { storeToRefs } from 'pinia';
import useFormList from './store/useFormList';
const formStore = useFormList();
const { type } = storeToRefs(formStore);
const switchTable = (value) => {
  type.value = value;
};
</script>
  
  <style scoped lang="scss">
.report-message {
  height: calc(100vh - 64px - 18px);
  background-color: rgba(255, 255, 255, 1);
  padding: 21px;
}
.reportmessage-head {
  height: 56px;

  &-tabs {
    margin: 18px 0;

    .tab-item {
      width: 188px;
      height: 38px;
      background: #fafafa;
      border: 1px solid #d9d9d9;
      cursor: pointer;

      &-active {
        color: rgba(22, 119, 255, 1);
        background: #e2eefe;
        border: 1px solid #1890ff;
      }
    }

    :first-child {
      border-radius: 8px 0px 0px 8px;
    }

    :last-child {
      border-radius: 0px 8px 8px 0px;
    }
  }
}
</style>