jg_app/src/pages/keyDetection/index.vue

<template>
  <div class="key-detection-page">
    <!-- 顶部导航栏 -->
    <TopNav title="重点检测推送"></TopNav>
    <!-- 标签筛选 -->
    <div class="filter-tabs">
      <div
        v-for="tab in tabs"
        :key="tab.value"
        class="tab-btn"
        :class="{ active: activeTab === tab.value }"
        @click="handleTabChange(tab.value)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 检测列表 -->
    <div class="detection-list">
      <div
        v-for="item in filteredDetections"
        :key="item.id"
        class="detection-card"
        @click="goToDetail(item)"
      >
        <div class="card-header">
          <h3 class="card-title">{{ item.title }}</h3>
          <span class="status-tag" :class="item.statusClass">
            {{ item.statusText }}
          </span>
        </div>
        <p class="card-description">{{ item.description }}</p>
        <div class="card-footer">
          <div class="footer-item">
            <van-icon name="clock-o" class="footer-icon" />
            <span>{{ item.issueTime }}</span>
          </div>
          <div class="footer-item">
            <span>{{ item.issuer }}</span>
            <van-icon name="arrow" class="footer-icon" />
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <BottomTabs />
  </div>
</template>

<script setup>
import TopNav from "@/components/topNav.vue";
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import BottomTabs from "@/components/bottomTabs.vue";

const router = useRouter();

const activeTab = ref("all");

const tabs = [
  { label: "全部", value: "all" },
  { label: "未读", value: "unread" },
  { label: "已读", value: "read" }
];

const detections = ref([
  {
    id: 1,
    title: "重点车辆监控",
    description: "鄂A88888号车辆为重点监控对象，发现请立即上报",
    issuer: "指挥中心",
    issueTime: "2026/03/27 10:30",
    status: "unread",
    objectType: "vehicle",
    statusText: "未读",
    statusClass: "status-unread"
  },
  {
    id: 2,
    title: "重点人员预警",
    description: "张某经系统分析为重点关注人员，请各巡逻队员注意发现并上报",
    issuer: "情报中心",
    issueTime: "2026/03/26 14:20",
    status: "read",
    objectType: "person",
    statusText: "已读",
    statusClass: "status-read"
  },
  {
    id: 3,
    title: "异常行为检测",
    description: "辖区内发现可疑人员聚集，请附近队员前往核查",
    issuer: "指挥中心",
    issueTime: "2026/03/25 09:15",
    status: "unread",
    objectType: "behavior",
    statusText: "未读",
    statusClass: "status-unread"
  }
]);

const filteredDetections = computed(() => {
  if (activeTab.value === "all") {
    return detections.value;
  }
  return detections.value.filter(item => item.status === activeTab.value);
});

function handleTabChange(value) {
  activeTab.value = value;
}

function goToDetail(item) {
  router.push({
    path: "/keyDetection/detail",
    query: { id: item.id }
  });
}
</script>

<style lang="scss" scoped>
.key-detection-page {
  background: #f5f5f5;
}

.filter-tabs {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #f5f5f5;

  .tab-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    background: white;
    transition: all 0.2s;

    &.active {
      background: #2563eb;
      color: white;
    }
  }
}
.detection-list {
  height: calc(100vh - 13vw - 60px - 67px);
  padding: 10px 16px;
  box-sizing: border-box;
  overflow: hidden;
  overflow-y: auto;
}

.detection-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 8px;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;

  &.status-unread {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
  }

  &.status-read {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #e5e5e5;
  }
}

.card-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;

  .footer-icon {
    font-size: 14px;
  }
}
</style>