sq_manage/src/views/bidMonitor/TenderPool.vue

<template>
  <div class="pool-page">
    <div class="page-tabs">
      <span 
        v-for="tab in tabs" 
        :key="tab.value"
        :class="['page-tab', { active: activeTab === tab.value }]"
        @click="handleTabClick(tab.value)"
      >
        {{ tab.label }}
      </span>
    </div>
    <div class="pool-content">
      <Monitor v-if="activeTab === 'monitor'" :historyProjectData="(historyProjects as any)"></Monitor>
      <!-- <Notice v-if="activeTab === 'notice'"></Notice> -->
      <Intention v-if="activeTab === 'intention'" :historyProjectData="(historyProjects as any)"></Intention>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import Monitor from '@/components/tenderpool/Monitor.vue'
// import Notice from '@/components/tenderpool/Notice.vue'
import Intention from '@/components/tenderpool/Intention.vue'
import api from '@/api/common'

const historyProjects = ref<any[]>([])

const activeTab = ref('monitor')
const tabs = ref([
  { label: '招标监测', value: 'monitor' },
  // { label: '招标公告', value: 'notice' },
  { label: '招标意向', value: 'intention' },
])

onMounted(() => {
  initData()
})
const initData = () => {
  getHistoryProjects()
}

const getHistoryProjects = () => {
  api.getHistoryPartner().then(res => {
    historyProjects.value = (res as any).content || []
  })
}

const handleTabClick = (tab: string) => {
  activeTab.value = tab
}

</script>

<style scoped>

.pool-page {
  width: 100%;
}

.pool-content {
  width: 100%;
  height: 100%;
}

.page-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e8ecef;
  /* justify-content: space-between; */
  align-items: center;
}

.btn-right {
  margin-left: auto;
}

.page-tab {
  padding: 10px 18px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: #5c6f82;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.page-tab.active {
  color: #0d9488;
  border-bottom-color: #0d9488;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .pool-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>