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>
|