jg_app/src/pages/keyVehicle/detail.vue

<template>
  <div class="detail-page">
    <!-- 顶部导航栏 -->
    <div class="nav-bar">
      <van-icon name="arrow-left" class="nav-back" @click="goBack" />
      <div class="nav-title">重点车辆详情</div>
      <div class="nav-placeholder"></div>
    </div>

    <!-- 车辆信息卡片 -->
    <div class="vehicle-card">
      <div class="vehicle-plate">
        <div class="plate-bg">
          <span class="plate-prefix">鄂</span>
          <span class="plate-number">{{ vehicle.plateNumber }}</span>
        </div>
        <div class="vehicle-info">
          <div class="info-item">
            <span class="label">车辆类型：</span>
            <span class="value">{{ vehicle.vehicleType }}</span>
          </div>
          <div class="info-item">
            <span class="label">车身颜色：</span>
            <span class="value">{{ vehicle.vehicleColor }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 监控原因 -->
    <div class="detail-card">
      <div class="card-title">监控原因</div>
      <div class="reason-content">
        <van-icon name="warning" class="reason-icon" />
        <span>{{ vehicle.reason }}</span>
      </div>
    </div>

    <!-- 违章统计 -->
    <div class="detail-card">
      <div class="card-title">违章统计</div>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">{{ vehicle.violationCount }}</div>
          <div class="stat-label">总违章次数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value warning">{{ vehicle.pendingCount }}</div>
          <div class="stat-label">待处理</div>
        </div>
        <div class="stat-item">
          <div class="stat-value success">{{ vehicle.completedCount }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>
    </div>

    <!-- 违章历史 -->
    <div class="detail-card">
      <div class="card-title">违章历史</div>
      <div class="history-list">
        <div v-for="(item, index) in vehicle.violationHistory" :key="index" class="history-item">
          <div class="history-date">{{ item.date }}</div>
          <div class="history-type">{{ item.type }}</div>
          <div class="history-location">{{ item.location }}</div>
        </div>
      </div>
    </div>

    <!-- 底部操作按钮 -->
    <div class="action-bar">
      <van-button block round type="primary" class="action-btn" @click="handleReport">
        上报处理结果
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";

const router = useRouter();
const route = useRoute();

// 车辆详情数据
const vehicle = ref({
  id: "",
  plateNumber: "鄂A88888",
  vehicleType: "小型汽车",
  vehicleColor: "蓝色",
  reason: "该车辆为重点监控对象，发现请立即上报处理",
  violationCount: 5,
  pendingCount: 2,
  completedCount: 3,
  violationHistory: [
    { date: "2026/03/25", type: "超速行驶", location: "长江大桥" },
    { date: "2026/03/20", type: "违规停车", location: "江汉路" },
    { date: "2026/03/15", type: "闯红灯", location: "解放大道" }
  ]
});

// 返回
function goBack() {
  router.back();
}

// 上报处理结果
function handleReport() {
  router.push("/dataReport");
}

onMounted(() => {
  const vehicleData = route.query;
  if (vehicleData.id) {
    vehicle.value.id = vehicleData.id;
  }
});
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 100px;
}

.nav-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  border-bottom: 1px solid #e5e5e5;
  padding: 12px 16px;

  .nav-back {
    font-size: 20px;
    color: #333;
  }

  .nav-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }

  .nav-placeholder {
    width: 20px;
  }
}

.vehicle-card {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  margin: 16px;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.vehicle-plate {
  .plate-bg {
    display: inline-flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 16px;

    .plate-prefix {
      background: #2563eb;
      color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 8px;
    }

    .plate-number {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      letter-spacing: 2px;
    }
  }

  .vehicle-info {
    .info-item {
      display: flex;
      margin-bottom: 8px;
      font-size: 14px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: rgba(255, 255, 255, 0.8);
        width: 80px;
      }

      .value {
        color: white;
      }
    }
  }
}

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

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.reason-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  background: #fff7ed;
  border-radius: 12px;
  font-size: 14px;
  color: #d97706;
  line-height: 1.5;

  .reason-icon {
    font-size: 20px;
    flex-shrink: 0;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;

  .stat-item {
    text-align: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      margin-bottom: 4px;

      &.warning {
        color: #ea580c;
      }

      &.success {
        color: #16a34a;
      }
    }

    .stat-label {
      font-size: 12px;
      color: #666;
    }
  }
}

.history-list {
  .history-item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .history-date {
      font-size: 12px;
      color: #999;
      margin-bottom: 4px;
    }

    .history-type {
      font-size: 14px;
      color: #333;
      margin-bottom: 2px;
    }

    .history-location {
      font-size: 13px;
      color: #666;
    }
  }
}

.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e5e5;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

.action-btn {
  height: 44px;
  font-size: 16px;
  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  border: none;
}
</style>