697 lines
24 KiB
Vue
697 lines
24 KiB
Vue
<script setup>
|
||
import { computed } from 'vue';
|
||
import { useRiskNotifier } from '@/composables/useRiskNotifier';
|
||
|
||
import xlIcon from '@/assets/images/report/xl.png';
|
||
import zymcIcon from '@/assets/images/report/zymc.png';
|
||
import xxxsIcon from '@/assets/images/report/xxxs.png';
|
||
import xxlxIcon from '@/assets/images/report/xxlx.png';
|
||
import bysjIcon from '@/assets/images/report/bysj.png';
|
||
import dictionaries from '@/data/ivyz3p9m-dictionary.json';
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: [Array, Object],
|
||
default: () => [],
|
||
},
|
||
apiId: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
notifyRiskStatus: {
|
||
type: Function,
|
||
default: () => { },
|
||
},
|
||
});
|
||
|
||
const riskScore = computed(() => 100);
|
||
useRiskNotifier(props, riskScore);
|
||
defineExpose({ riskScore });
|
||
const educationLevelMap = dictionaries.educationLevel ?? {};
|
||
const learningFormMap = dictionaries.learningForm ?? {};
|
||
const schoolDictionary = dictionaries.schools ?? {};
|
||
const specialtyDictionary = dictionaries.specialties ?? {};
|
||
|
||
const educationTagColorMap = {
|
||
'1': 'bg-emerald-50 text-emerald-700 border-emerald-200',
|
||
'2': 'bg-blue-50 text-blue-700 border-blue-200',
|
||
'3': 'bg-indigo-50 text-indigo-700 border-indigo-200',
|
||
'4': 'bg-purple-50 text-purple-700 border-purple-200',
|
||
'5': 'bg-amber-50 text-amber-700 border-amber-200',
|
||
};
|
||
|
||
const learningFormColorMap = {
|
||
'1': 'bg-sky-50 text-sky-700 border-sky-200',
|
||
'2': 'bg-blue-50 text-blue-700 border-blue-200',
|
||
'3': 'bg-blue-50 text-blue-700 border-blue-200',
|
||
'4': 'bg-cyan-50 text-cyan-700 border-cyan-200',
|
||
'5': 'bg-orange-50 text-orange-700 border-orange-200',
|
||
'6': 'bg-lime-50 text-lime-700 border-lime-200',
|
||
'7': 'bg-indigo-50 text-indigo-700 border-indigo-200',
|
||
'8': 'bg-violet-50 text-violet-700 border-violet-200',
|
||
'9': 'bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200',
|
||
};
|
||
|
||
const normalizeCode = (value) => {
|
||
if (value === null || value === undefined) return '';
|
||
return String(value).trim();
|
||
};
|
||
|
||
const getEducationLevelText = (code) => {
|
||
const normalized = normalizeCode(code);
|
||
if (!normalized) return '未知';
|
||
return educationLevelMap[normalized] || '未知';
|
||
};
|
||
|
||
const getLearningFormText = (code) => {
|
||
const normalized = normalizeCode(code);
|
||
if (!normalized) return '未知';
|
||
return learningFormMap[normalized] || '未知';
|
||
};
|
||
|
||
const getSchoolNameText = (code, fallback) => {
|
||
const normalized = normalizeCode(code);
|
||
if (!normalized) return fallback || '未知学校';
|
||
return schoolDictionary[normalized] || fallback || '未知学校';
|
||
};
|
||
|
||
const getSpecialtyNameText = (code, fallback) => {
|
||
const normalized = normalizeCode(code);
|
||
if (!normalized) return fallback || '未知专业';
|
||
return specialtyDictionary[normalized] || fallback || '未知专业';
|
||
};
|
||
|
||
const getEducationLevelClass = (code) => {
|
||
const normalized = normalizeCode(code);
|
||
return educationTagColorMap[normalized] || 'bg-gray-50 text-gray-700 border-gray-200';
|
||
};
|
||
|
||
const getLearningFormClass = (code) => {
|
||
const normalized = normalizeCode(code);
|
||
return learningFormColorMap[normalized] || 'bg-gray-50 text-gray-700 border-gray-200';
|
||
};
|
||
|
||
const maskIdNumber = (idNumber) => {
|
||
if (!idNumber) return '未知';
|
||
const normalized = String(idNumber).trim();
|
||
if (normalized.length <= 6) {
|
||
return `${normalized.slice(0, 1)}****${normalized.slice(-1)}`;
|
||
}
|
||
return `${normalized.slice(0, 3)}********${normalized.slice(-4)}`;
|
||
};
|
||
|
||
const formatDate = (dateStr) => {
|
||
if (!dateStr) return '未知';
|
||
const normalized = String(dateStr).trim();
|
||
if (!/^\d+$/.test(normalized)) return '未知';
|
||
|
||
if (normalized.length === 8) {
|
||
const year = normalized.substring(0, 4);
|
||
const month = normalized.substring(4, 6);
|
||
const day = normalized.substring(6, 8);
|
||
return `${year}年${month}月${day}日`;
|
||
}
|
||
|
||
if (normalized.length === 6) {
|
||
const year = normalized.substring(0, 4);
|
||
const month = normalized.substring(4, 6);
|
||
return `${year}年${month}月`;
|
||
}
|
||
|
||
if (normalized.length === 4) {
|
||
const shortYear = normalized.substring(0, 2);
|
||
const month = normalized.substring(2, 4);
|
||
return `20${shortYear}年${month}月`;
|
||
}
|
||
|
||
return '未知';
|
||
};
|
||
|
||
const parseDate = (value) => {
|
||
if (!value) return null;
|
||
const normalized = String(value).trim();
|
||
if (!/^\d+$/.test(normalized)) return null;
|
||
|
||
let year;
|
||
let month;
|
||
let day = 1;
|
||
|
||
if (normalized.length === 8) {
|
||
year = Number(normalized.substring(0, 4));
|
||
month = Number(normalized.substring(4, 6));
|
||
day = Number(normalized.substring(6, 8));
|
||
} else if (normalized.length === 6) {
|
||
year = Number(normalized.substring(0, 4));
|
||
month = Number(normalized.substring(4, 6));
|
||
} else if (normalized.length === 4) {
|
||
year = Number(`20${normalized.substring(0, 2)}`);
|
||
month = Number(normalized.substring(2, 4));
|
||
} else {
|
||
return null;
|
||
}
|
||
|
||
if (!year || !month) return null;
|
||
return new Date(year, month - 1, day);
|
||
};
|
||
|
||
const calculateStudyDuration = (start, end) => {
|
||
const startDate = parseDate(start);
|
||
const endDate = parseDate(end);
|
||
|
||
if (!startDate || !endDate || endDate < startDate) {
|
||
return '时长未知';
|
||
}
|
||
|
||
const totalMonths =
|
||
(endDate.getFullYear() - startDate.getFullYear()) * 12 +
|
||
(endDate.getMonth() - startDate.getMonth());
|
||
|
||
if (totalMonths <= 0) {
|
||
return '不足 1 个月';
|
||
}
|
||
|
||
const years = Math.floor(totalMonths / 12);
|
||
const months = totalMonths % 12;
|
||
|
||
const parts = [];
|
||
if (years > 0) parts.push(`${years}年`);
|
||
if (months > 0) parts.push(`${months}个月`);
|
||
|
||
return parts.length > 0 ? `约 ${parts.join('')}` : '约 1 个月';
|
||
};
|
||
|
||
const educationRecords = computed(() => {
|
||
const source = props.data;
|
||
if (Array.isArray(source)) return source;
|
||
if (Array.isArray(source?.data)) return source.data;
|
||
if (Array.isArray(source?.records)) return source.records;
|
||
if (Array.isArray(source?.list)) return source.list;
|
||
return [];
|
||
});
|
||
|
||
const enhancedRecords = computed(() =>
|
||
educationRecords.value.map((record, index) => {
|
||
const educationLevelCode = normalizeCode(record.educationLevel);
|
||
const learningFormCode = normalizeCode(record.learningForm);
|
||
const schoolCode = normalizeCode(record.schoolName);
|
||
const specialtyCode = normalizeCode(record.specialtyName);
|
||
|
||
const schoolName = getSchoolNameText(schoolCode, record.schoolName);
|
||
const specialtyName = getSpecialtyNameText(specialtyCode, record.specialtyName);
|
||
|
||
return {
|
||
index: index + 1,
|
||
studentName: record.studentName || '未知',
|
||
idNumber: record.idNumber || '',
|
||
maskedIdNumber: maskIdNumber(record.idNumber),
|
||
schoolName,
|
||
specialtyName,
|
||
isUnknownSchool: schoolName === '未知学校' || (!schoolCode && !record.schoolName),
|
||
isUnknownSpecialty: specialtyName === '未知专业' || (!specialtyCode && !record.specialtyName),
|
||
educationLevelCode,
|
||
educationLevel: getEducationLevelText(educationLevelCode),
|
||
learningFormCode,
|
||
learningForm: getLearningFormText(learningFormCode),
|
||
enrollmentDate: formatDate(record.enrollmentDate),
|
||
graduationDate: formatDate(record.graduationDate),
|
||
rawEnrollmentDate: record.enrollmentDate || '',
|
||
rawGraduationDate: record.graduationDate || '',
|
||
studyDuration: calculateStudyDuration(record.enrollmentDate, record.graduationDate),
|
||
};
|
||
})
|
||
);
|
||
|
||
const getTimestamp = (value) => {
|
||
const date = parseDate(value);
|
||
return date ? date.getTime() : null;
|
||
};
|
||
|
||
const orderedRecords = computed(() => {
|
||
if (enhancedRecords.value.length <= 1) return enhancedRecords.value;
|
||
|
||
return [...enhancedRecords.value].sort((a, b) => {
|
||
const startA =
|
||
getTimestamp(a.rawEnrollmentDate) ??
|
||
getTimestamp(a.rawGraduationDate) ??
|
||
Number.MAX_SAFE_INTEGER;
|
||
const startB =
|
||
getTimestamp(b.rawEnrollmentDate) ??
|
||
getTimestamp(b.rawGraduationDate) ??
|
||
Number.MAX_SAFE_INTEGER;
|
||
|
||
if (startA === startB) {
|
||
const endA = getTimestamp(a.rawGraduationDate) ?? Number.MAX_SAFE_INTEGER;
|
||
const endB = getTimestamp(b.rawGraduationDate) ?? Number.MAX_SAFE_INTEGER;
|
||
return endA - endB;
|
||
}
|
||
|
||
return startA - startB;
|
||
});
|
||
});
|
||
|
||
const educationRankMap = {
|
||
'1': 1,
|
||
'2': 2,
|
||
'3': 3,
|
||
'4': 4,
|
||
'5': 2.5,
|
||
};
|
||
|
||
const getEducationRank = (code) => {
|
||
const normalized = normalizeCode(code);
|
||
return educationRankMap[normalized] ?? 0;
|
||
};
|
||
|
||
const summaryRecord = computed(() => {
|
||
if (orderedRecords.value.length === 0) return null;
|
||
|
||
return orderedRecords.value.reduce((best, current) => {
|
||
if (!best) return current;
|
||
|
||
const currentRank = getEducationRank(current.educationLevelCode);
|
||
const bestRank = getEducationRank(best.educationLevelCode);
|
||
|
||
if (currentRank > bestRank) return current;
|
||
if (currentRank < bestRank) return best;
|
||
|
||
const currentGrad = getTimestamp(current.rawGraduationDate) ?? Number.NEGATIVE_INFINITY;
|
||
const bestGrad = getTimestamp(best.rawGraduationDate) ?? Number.NEGATIVE_INFINITY;
|
||
|
||
return currentGrad >= bestGrad
|
||
? current
|
||
: best;
|
||
}, null);
|
||
});
|
||
|
||
const latestGraduationText = computed(() => {
|
||
if (orderedRecords.value.length === 0) return '未知';
|
||
|
||
const latest = orderedRecords.value.reduce((latestRecord, current) => {
|
||
if (!latestRecord) return current;
|
||
const currentGrad = getTimestamp(current.rawGraduationDate) ?? Number.NEGATIVE_INFINITY;
|
||
const latestGrad = getTimestamp(latestRecord.rawGraduationDate) ?? Number.NEGATIVE_INFINITY;
|
||
return currentGrad >= latestGrad
|
||
? current
|
||
: latestRecord;
|
||
}, null);
|
||
|
||
return latest?.graduationDate || '未知';
|
||
});
|
||
|
||
const hasData = computed(() => orderedRecords.value.length > 0);
|
||
</script>
|
||
|
||
<template>
|
||
<div v-if="hasData" class="card max-w-4xl mx-auto">
|
||
<div class="flex flex-col gap-6">
|
||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 flex items-center justify-center">
|
||
<img :src="xlIcon" alt="学历信息" class="w-12 h-12" />
|
||
</div>
|
||
<div>
|
||
<h2 class="text-2xl font-bold text-gray-900">学历信息查询</h2>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col items-start md:items-end gap-1">
|
||
<div class="text-lg font-semibold text-blue-600">
|
||
共 {{ orderedRecords.length }} 条记录
|
||
</div>
|
||
<div v-if="summaryRecord" class="summary-meta text-sm text-gray-500">
|
||
<span class="summary-meta__item">最高学历：{{ summaryRecord.educationLevel }}</span>
|
||
<span v-if="latestGraduationText" class="summary-meta__divider">·</span>
|
||
<span class="summary-meta__item">最新毕业时间：{{ latestGraduationText }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="summaryRecord" class="summary-banner">
|
||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
||
<div class="flex items-center gap-4">
|
||
<div class="w-14 h-14 rounded-full bg-white/80 flex items-center justify-center shadow-inner">
|
||
<img :src="xlIcon" alt="学历图标" class="w-10 h-10" />
|
||
</div>
|
||
<div>
|
||
<div class="text-xl font-semibold text-gray-900">{{ summaryRecord.studentName }}</div>
|
||
<div class="text-sm text-slate-600">身份证：{{ summaryRecord.maskedIdNumber }}</div>
|
||
<div class="summary-highlight">
|
||
<span class="summary-highlight__badge">{{ summaryRecord.educationLevel }}</span>
|
||
<div class="summary-highlight__text flex flex-col gap-1">
|
||
<span class="flex items-center gap-2">
|
||
{{ summaryRecord.schoolName }}
|
||
<span v-if="summaryRecord.isUnknownSchool" class="unknown-hint">
|
||
<svg class="unknown-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
<span v-if="summaryRecord.isUnknownSchool" class="unknown-text">该学校名称信息未找到，可能是学校已改名</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="flex flex-wrap items-center gap-3">
|
||
<div class="summary-chip">
|
||
<span class="chip-label">入学时间</span>
|
||
<span class="chip-value">{{ summaryRecord.enrollmentDate }}</span>
|
||
</div>
|
||
<div class="summary-chip">
|
||
<span class="chip-label">毕业时间</span>
|
||
<span class="chip-value">{{ summaryRecord.graduationDate }}</span>
|
||
</div>
|
||
<div class="summary-chip">
|
||
<span class="chip-label">学习时长</span>
|
||
<span class="chip-value">{{ summaryRecord.studyDuration }}</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-5">
|
||
<div v-for="record in orderedRecords" :key="record.index" class="record-card">
|
||
<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4">
|
||
<div class="record-header">
|
||
<div class="record-index">
|
||
{{ record.index }}
|
||
</div>
|
||
<div class="record-title">
|
||
<div class="record-title__name flex flex-col gap-1">
|
||
<span class="flex items-center gap-2">
|
||
{{ record.schoolName }}
|
||
<span v-if="record.isUnknownSchool" class="unknown-hint">
|
||
<svg class="unknown-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
<span v-if="record.isUnknownSchool" class="unknown-text">该学校名称信息未找到，可能是学校已改名</span>
|
||
</div>
|
||
<div class="record-title__meta" v-if="record.enrollmentDate !== '未知' || record.graduationDate !== '未知'">
|
||
<span v-if="record.enrollmentDate !== '未知'">{{ record.enrollmentDate }}</span>
|
||
<span v-if="record.enrollmentDate !== '未知' && record.graduationDate !== '未知'"> - </span>
|
||
<span v-if="record.graduationDate !== '未知'">{{ record.graduationDate }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-3">
|
||
<span :class="['tag', getEducationLevelClass(record.educationLevelCode)]">
|
||
{{ record.educationLevel }}学历
|
||
</span>
|
||
<span :class="['tag', getLearningFormClass(record.learningFormCode)]">
|
||
学习形式：{{ record.learningForm }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img :src="zymcIcon" alt="专业名称" class="w-7 h-7" />
|
||
</div>
|
||
<div>
|
||
<div class="info-label">专业名称</div>
|
||
<div class="info-value flex flex-col gap-1">
|
||
<span class="flex items-center gap-2">
|
||
{{ record.specialtyName }}
|
||
<span v-if="record.isUnknownSpecialty" class="unknown-hint">
|
||
<svg class="unknown-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
<span v-if="record.isUnknownSpecialty" class="unknown-text">该专业名称信息未找到，可能是该学校专业已受到变动</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img :src="xxxsIcon" alt="学习形式" class="w-7 h-7" />
|
||
</div>
|
||
<div>
|
||
<div class="info-label">学习形式</div>
|
||
<div class="info-value">
|
||
{{ record.learningForm }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img :src="xxlxIcon" alt="入学时间" class="w-7 h-7" />
|
||
</div>
|
||
<div>
|
||
<div class="info-label">入学时间</div>
|
||
<div class="info-value">{{ record.enrollmentDate }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-block">
|
||
<div class="info-icon">
|
||
<img :src="bysjIcon" alt="毕业时间" class="w-7 h-7" />
|
||
</div>
|
||
<div>
|
||
<div class="info-label">毕业时间</div>
|
||
<div class="info-value">{{ record.graduationDate }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="card max-w-3xl mx-auto">
|
||
<div class="flex flex-col items-center py-12 text-center">
|
||
<div class="w-20 h-20 flex items-center justify-center mb-4">
|
||
<img :src="xlIcon" alt="学历图标" class="w-20 h-20 opacity-40" />
|
||
</div>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-2">暂无学历记录</h3>
|
||
<p class="text-sm text-gray-500 max-w-md">
|
||
未查询到相关的学历信息，可能是数据正在更新或尚未录入。建议稍后重试或联系数据提供方确认。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.card {
|
||
padding: 1.5rem;
|
||
box-shadow: 0px 0px 24px 0px #3f3f3f0f;
|
||
border-radius: 12px;
|
||
background: white;
|
||
}
|
||
|
||
.summary-banner {
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(79, 70, 229, 0.12));
|
||
border: 1px solid rgba(59, 130, 246, 0.25);
|
||
}
|
||
|
||
.summary-chip {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
gap: 0.15rem;
|
||
padding: 0.5rem 0.75rem;
|
||
border-radius: 0.75rem;
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
border: 1px solid rgba(148, 163, 184, 0.3);
|
||
}
|
||
|
||
.chip-label {
|
||
font-size: 0.7rem;
|
||
color: #64748b;
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.chip-value {
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.summary-meta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.35rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.summary-meta__divider {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.summary-highlight {
|
||
margin-top: 0.35rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.summary-highlight__badge {
|
||
padding: 0.2rem 0.6rem;
|
||
border-radius: 9999px;
|
||
background: rgba(59, 130, 246, 0.12);
|
||
color: #2563eb;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.summary-highlight__text {
|
||
font-size: 0.9rem;
|
||
color: #1e293b;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.record-card {
|
||
position: relative;
|
||
padding: 1.5rem;
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(226, 232, 240, 0.9);
|
||
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
|
||
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
|
||
transition: all 0.25s ease;
|
||
}
|
||
|
||
.record-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, rgba(59, 130, 246, 0.75), rgba(129, 140, 248, 0.75));
|
||
border-radius: 12px 12px 0 0;
|
||
}
|
||
|
||
.record-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 16px 35px rgba(59, 130, 246, 0.16);
|
||
}
|
||
|
||
.record-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 1rem;
|
||
}
|
||
|
||
.record-index {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
border-radius: 999px;
|
||
background: rgba(59, 130, 246, 0.18);
|
||
color: #2563eb;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.05rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.record-title {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.2rem;
|
||
}
|
||
|
||
.record-title__name {
|
||
font-size: 1.125rem;
|
||
font-weight: 600;
|
||
color: #0f172a;
|
||
}
|
||
|
||
.record-title__meta {
|
||
font-size: 0.85rem;
|
||
color: #64748b;
|
||
}
|
||
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
padding: 0.4rem 0.85rem;
|
||
border-radius: 9999px;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
border-width: 1px;
|
||
border-style: solid;
|
||
}
|
||
|
||
.info-block {
|
||
display: flex;
|
||
gap: 0.75rem;
|
||
padding: 1rem;
|
||
border-radius: 12px;
|
||
background-color: rgba(248, 250, 252, 0.9);
|
||
border: 1px solid rgba(226, 232, 240, 0.8);
|
||
transition: border-color 0.2s ease, transform 0.2s ease;
|
||
}
|
||
|
||
.info-block:hover {
|
||
border-color: rgba(59, 130, 246, 0.3);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.info-icon {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
border-radius: 0.75rem;
|
||
background: rgba(59, 130, 246, 0.12);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.info-label {
|
||
font-size: 0.75rem;
|
||
color: #64748b;
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: 1rem;
|
||
font-weight: 500;
|
||
color: #0f172a;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.unknown-hint {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.unknown-icon {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
color: #f59e0b;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.unknown-text {
|
||
font-size: 0.75rem;
|
||
color: #f59e0b;
|
||
line-height: 1.4;
|
||
margin-top: 0.125rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.record-card {
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.info-block {
|
||
padding: 0.85rem;
|
||
}
|
||
}
|
||
</style>
|
||
|