v1.0.0

src/ui/CMarriage.vue

@@ -0,0 +1,67 @@
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+const { data } = props
+
+// 状态映射，包括显示的文字和样式
+const statusMap = {
+  0: { text: '未登记', bgClass: 'bg-yellow-100', textClass: 'text-yellow-700', description: '尚未登记婚姻信息' },
+  1: { text: '已婚', bgClass: 'bg-green-100', textClass: 'text-green-700', description: '已登记婚姻，家庭幸福美满' },
+  2: { text: '离异', bgClass: 'bg-red-100', textClass: 'text-red-700', description: '离异状态，未来生活可期' },
+  3: { text: '离婚冷静期', bgClass: 'bg-blue-100', textClass: 'text-blue-700', description: '目前处于离婚冷静期，请谨慎决策' },
+}
+
+// 根据 `data.status` 确定当前状态，默认值为 “无相关记录”
+const currentStatus = data.status !== undefined ? statusMap[data.status] || statusMap['0'] : { text: '无相关记录', bgClass: 'bg-gray-200', textClass: 'text-gray-500', description: '暂无婚姻相关记录' }
+</script>
+
+<template>
+  <div class="card">
+    <div class="status-info mb-4 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>
+      <p class="status-description mt-3 text-sm text-gray-600">
+        {{ currentStatus.description }}
+      </p>
+    </div>
+
+    <!-- <div class="additional-info mt-6 text-center">
+      <p class="text-xs text-gray-500">
+        <strong>数据更新时间：</strong> {{ lastUpdated }}
+      </p>
+      <p class="text-xs text-gray-500">
+        本数据仅供参考，如有疑问请联系相关部门。
+      </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;
+}
+</style>