68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
|
<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>
|