f

2025-11-27 13:19:45 +08:00
commit c85b46c18e
612 changed files with 83497 additions and 0 deletions
--- a/src/ui/CIVYZ81NC.vue
+++ b/src/ui/CIVYZ81NC.vue
@@ -0,0 +1,105 @@
+<script setup>
+const props = defineProps({
+    data: {
+        type: Object,
+        required: false,
+        default: () => null,
+    },
+});
+// 获取实际的数据对象
+const actualData = props.data?.data;
+
+// 日期格式化函数，将 2009-04-16 转换为 2009年04月16日
+const formatDate = (dateStr) => {
+    if (!dateStr) return "";
+    const [year, month, day] = dateStr.split("-");
+    return `${year}年${month}月${day}日`;
+};
+
+// 状态映射，根据 op_type 判断
+const statusMap = {
+    IA: {
+        text: "已婚",
+        bgClass: "bg-green-100",
+        textClass: "text-green-700",
+        description: "已登记婚姻，家庭幸福美满",
+    },
+    IB: {
+        text: "离异",
+        bgClass: "bg-red-100",
+        textClass: "text-red-700",
+        description: "离异状态，未来生活可期",
+    },
+    INR: {
+        text: "未登记",
+        bgClass: "bg-yellow-100",
+        textClass: "text-yellow-700",
+        description: "未进行民政登记婚姻",
+    },
+};
+
+// 无记录时的状态
+const noRecordStatus = {
+    text: "无相关记录",
+    bgClass: "bg-gray-200",
+    textClass: "text-gray-500",
+    description: "暂无婚姻相关记录",
+    opDate: null,
+};
+
+// 根据 op_type 确定当前状态，默认值为 "无相关记录"
+const currentStatus = !actualData
+    ? noRecordStatus
+    : actualData.op_type
+        ? { ...statusMap[actualData.op_type], opDate: formatDate(actualData.op_date) }
+        : noRecordStatus;
+</script>
+
+<template>
+    <div class="card">
+        <div class="status-info flex flex-col items-center">
+            <div
+                :class="`status-label rounded-full px-6 py-3 text-center font-bold shadow-md ${currentStatus.bgClass} ${currentStatus.textClass}`">
+                {{ currentStatus.text }}
+            </div>
+            <div v-if="currentStatus.opDate" class="op-date-container mt-4 px-4 py-2 bg-blue-50 rounded-lg border border-blue-200">
+                <p class="op-date text-sm font-medium text-blue-700">
+                    登记日期：{{ currentStatus.opDate }}
+                </p>
+            </div>
+            <p v-html="currentStatus.description" class="status-description mt-3 text-sm text-gray-600"></p>
+
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.status-info {
+    text-align: center;
+}
+
+.status-label {
+    font-size: 1.25rem;
+    padding: 0.75rem 1.5rem;
+    border-radius: 9999px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.status-description {
+    color: #4a5568;
+    margin-top: 0.5rem;
+    font-weight: 500;
+}
+
+.additional-info p {
+    margin-top: 0.5rem;
+}
+
+.op-date-container {
+    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
+}
+
+.op-date-container:hover {
+    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15);
+}
+</style>