add

src/ui/DWBG9FB3/components/OverdueBlacklistSection.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="gamma-card">
+    <div class="gamma-title"><span>🚫</span> 逾期黑名单</div>
+    <div class="gamma-subtitle"><span>⧉</span> 命中结果</div>
+    <div class="blacklist-row">
+      <div class="blacklist-label">是否命中黑名单</div>
+      <div class="blacklist-value">{{ isHit(data.black_list) ? '是' : '否' }}</div>
+    </div>
+    <div class="gamma-subtitle"><span>⧉</span> 疑似标签</div>
+    <div class="tags-grid">
+      <div v-for="tag in BLACKLIST_TAGS" :key="tag.key" class="tag-item">
+        <div class="tag-label">{{ tag.label }}</div>
+        <div class="tag-value">{{ isHit(data[tag.key]) ? '命中' : '未命中' }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { BLACKLIST_TAGS, isHit } from '../reportHelper';
+
+defineProps({
+  data: { type: Object, default: () => ({}) },
+});
+</script>
+
+<style lang="scss" scoped>
+.blacklist-row {
+  display: flex;
+  align-items: center;
+  max-width: 400px;
+  margin-bottom: 16px;
+}
+
+.blacklist-label {
+  width: 160px;
+  font-size: 14px;
+  color: #666;
+  background: #f5f7fa;
+  padding: 8px 12px;
+  border-radius: 4px 0 0 4px;
+}
+
+.blacklist-value {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #eee;
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  text-align: center;
+}
+
+.tags-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16px;
+}
+
+.tag-item { display: flex; align-items: center; }
+
+.tag-label {
+  width: 200px;
+  font-size: 14px;
+  color: #666;
+  background: #f9fafc;
+  padding: 8px 12px;
+  border-radius: 4px 0 0 4px;
+}
+
+.tag-value {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #eee;
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  text-align: center;
+}
+
+@media (max-width: 768px) {
+  .tags-grid { grid-template-columns: 1fr; }
+  .tag-label { width: 140px; }
+}
+</style>