sl-sfy-safety/src/views/datamanager/platformdata/PlatformData.vue

<template>
  <div class="platform-content">
    <div class="flex platform-head-tabs">
      <div
        class="flex justify-center items-center tab-item"
        :class="{ 'tab-item-active': activeName === 'count' }"
        @click="activeName = 'count'"
      >
        访问次数统计
      </div>
      <div
        class="flex justify-center items-center tab-item"
        :class="{ 'tab-item-active': activeName === 'score' }"
        @click="activeName = 'score'"
      >
        积分统计
      </div>
    </div>
    <Query v-if="activeName === 'count'" />
    <Score v-else />
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import Query from './components/query/Query.vue';
  import Score from './components/score/Score.vue';

  const activeName = ref('count');
</script>

<style scoped lang="scss">
  .platform-content {
    height: calc(100vh - 64px - 18px);
    background-color: rgba(255, 255, 255, 1);
    padding: 21px;
  }
  .platform-head {
    height: 56px;

    &-name {
      margin-left: 24px;
      font-size: 16px;
      font-weight: 500;
      color: #252525;
    }

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