<script setup>
import { computed } from "vue";

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
});
onMounted(() => {
    console.log("data", props.data);
});
// 格式化日期，从YYMM格式转换为YYYY年MM月格式
const formatDate = (dateStr) => {
    if (!dateStr || dateStr.length !== 4) return "未知";

    const yearShort = dateStr.substring(0, 2);
    const month = dateStr.substring(2, 4);

    // 假设都是21世纪的年份
    const fullYear = `20${yearShort}`;

    return `${fullYear}年${month}月`;
};

// 获取学历等级对应的描述
const getEducationDesc = (education) => {
    const descriptions = {
        大学专科:
            "专科学历是高等教育的重要组成部分，培养具有专业知识和技能的应用型人才。",
        大学本科:
            "本科学历是高等教育的基础学位，培养具有系统专业知识和基本技能的高级人才。",
        硕士研究生:
            "硕士学位是较高层次的学位，培养具有较深厚理论基础和专业技能的高级专门人才。",
        博士研究生:
            "博士学位是最高学位，培养能够独立从事科学研究工作、具有创新能力的高级专门人才。",
        博士后: "博士后是在获得博士学位后进行的进一步研究和深造，是学术界的高级研究人员。",
    };
    return descriptions[education] || "";
};

// 根据学校类型获取不同的样式类
const getSchoolTypeClass = (type) => {
    const classes = {
        "985学校": "border-amber-500 bg-amber-50",
        "211学校": "border-blue-500 bg-blue-50",
        双一流学校: "border-green-500 bg-green-50",
        其他: "border-gray-300 bg-gray-50",
    };
    return classes[type] || "border-gray-300 bg-gray-50";
};

// 根据学历等级获取时间线点的样式类
const getTimelinePointClass = (education) => {
    const classes = {
        大学专科: "bg-gray-500",
        大学本科: "bg-blue-500",
        硕士研究生: "bg-green-500",
        博士研究生: "bg-amber-500",
        博士后: "bg-amber-500",
    };
    return classes[education] || "bg-blue-500";
};

// 获取学校类型对应的标语
const getSchoolSlogan = (type) => {
    if (type === "985学校") return "国家重点建设的高水平大学";
    if (type === "211学校") return "面向21世纪重点建设的高等学校";
    if (type === "双一流学校") return "世界一流大学和一流学科建设高校";
    return "";
};

// 获取学历等级
const getEducationLevel = (education) => {
    const levels = {
        大学专科: 1,
        大学本科: 2,
        硕士研究生: 3,
        博士研究生: 4,
        博士后: 5,
    };
    return levels[education] || 0;
};

// 获取学历图标SVG（根据学历类型返回不同的图标）
const getEducationSvgIcon = (education) => {
    // 默认图标 - 毕业帽
    let svgIcon = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
    </svg>`;

    if (education === "大学本科") {
        // 本科 - 文凭
        svgIcon = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
        </svg>`;
    } else if (education === "硕士研究生") {
        // 硕士 - 书和毕业帽
        svgIcon = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
        </svg>`;
    } else if (education === "博士研究生" || education === "博士后") {
        // 博士/博士后 - 灯泡(创新)
        svgIcon = `<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
        </svg>`;
    }

    return svgIcon;
};

// 计算排序后的学历数据
const sortedEducations = computed(() => {
    const educationList = props.data?.data || [];

    if (educationList.length <= 1) return educationList;

    // 按照入学日期从早到晚排序
    return [...educationList].sort((a, b) => {
        // 假设ksrq是MMDD格式，转为数字比较
        const dateA = parseInt(a.ksrq || "0000");
        const dateB = parseInt(b.ksrq || "0000");
        return dateA - dateB;
    });
});

// 判断是否有学历数据
const hasEducationData = computed(() => {
    return props.data?.status === 1 && sortedEducations.value.length > 0;
});

// 判断是否有多个学历
const hasMultipleEducations = computed(() => {
    return sortedEducations.value.length > 1;
});
</script>

<template>
    <div
        class="w-full max-w-md mx-auto bg-white rounded-xl overflow-hidden font-sans shadow-md"
    >
        <div v-if="hasEducationData" class="p-6 pl-2">
            <!-- 学历时间线 -->
            <div class="relative pb-4">
                <!-- 垂直时间线 -->
                <div
                    v-if="hasMultipleEducations"
                    class="absolute left-0 top-14 h-[calc(100%-44px)] w-0.5 bg-gradient-to-b from-blue-400 to-blue-200 rounded-full ml-5"
                ></div>

                <!-- 学历卡片列表 -->
                <div class="space-y-10 relative">
                    <div
                        v-for="(education, index) in sortedEducations"
                        :key="index"
                        class="relative"
                    >
                        <!-- 时间线点 -->
                        <div
                            v-if="hasMultipleEducations"
                            :class="[
                                'absolute left-5 w-10 h-10 rounded-full border-4 border-white shadow-md flex items-center justify-center text-white transform -translate-x-1/2',
                                getTimelinePointClass(education.xl),
                            ]"
                        >
                            <span class="text-sm font-bold">{{
                                index + 1
                            }}</span>
                        </div>

                        <!-- 学历卡片 -->
                        <div
                            :class="[
                                'relative rounded-lg transition-all duration-300 ml-12',
                                'p-6 hover:-translate-y-1 hover:shadow-lg',
                                getSchoolTypeClass(education.xxlx),
                            ]"
                        >
                            <!-- 顶部彩色条 -->
                            <div
                                :class="[
                                    'absolute top-0 left-0 w-full h-1.5 rounded-t-lg',
                                    education.xxlx === '985学校'
                                        ? 'bg-gradient-to-r from-amber-500 to-amber-300'
                                        : education.xxlx === '211学校'
                                        ? 'bg-gradient-to-r from-blue-500 to-blue-300'
                                        : education.xxlx === '双一流学校'
                                        ? 'bg-gradient-to-r from-green-500 to-green-300'
                                        : 'bg-gradient-to-r from-gray-400 to-gray-300',
                                ]"
                            ></div>

                            <!-- 时间和学校类型标签 -->
                            <div
                                class="flex flex-col sm:flex-row sm:justify-between mb-5 pt-2"
                            >
                                <!-- 学校类型标签 -->
                                <div
                                    v-if="education.xxlx !== '其他'"
                                    class="bg-gradient-to-r from-yellow-400 to-yellow-500 text-white text-sm font-medium px-4 py-1.5 rounded-full shadow-sm inline-flex items-center mb-3 sm:mb-0 max-w-fit"
                                >
                                    <svg
                                        class="w-4 h-4 mr-1.5"
                                        fill="currentColor"
                                        viewBox="0 0 20 20"
                                    >
                                        <path
                                            fill-rule="evenodd"
                                            d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                            clip-rule="evenodd"
                                        ></path>
                                    </svg>
                                    {{ education.xxlx }}
                                </div>

                                <!-- 时间信息 -->
                                <div
                                    class="flex items-center text-gray-600 text-sm sm:text-base mt-1 sm:mt-0"
                                >
                                    <svg
                                        class="w-4 h-4 text-blue-500 mr-2 flex-shrink-0"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                                        ></path>
                                    </svg>
                                    <span
                                        >{{ formatDate(education.ksrq) }} -
                                        {{ formatDate(education.jsrq) }}</span
                                    >
                                </div>
                            </div>

                            <!-- 学历标题区域 -->
                            <div class="flex items-start mb-6">
                                <div
                                    class="w-14 h-14 rounded-full bg-blue-50 flex items-center justify-center mr-5 flex-shrink-0 text-blue-500"
                                >
                                    <span
                                        v-html="
                                            getEducationSvgIcon(education.xl)
                                        "
                                    ></span>
                                </div>

                                <div class="flex-1">
                                    <div
                                        class="flex justify-between items-start"
                                    >
                                        <h3
                                            class="text-xl font-semibold text-gray-800 mb-1"
                                        >
                                            {{ education.xl }}
                                        </h3>

                                        <!-- 高级学历标签 -->
                                        <div
                                            v-if="
                                                getEducationLevel(
                                                    education.xl
                                                ) >= 4
                                            "
                                            class="bg-red-500 text-white text-xs font-bold px-2.5 py-1 rounded-md shadow ml-2 animate-pulse"
                                        >
                                            顶级
                                        </div>
                                    </div>

                                    <p
                                        v-if="education.xxlx !== '其他'"
                                        class="text-sm text-yellow-600 italic"
                                    >
                                        "{{ getSchoolSlogan(education.xxlx) }}"
                                    </p>
                                </div>
                            </div>

                            <!-- 分隔线 -->
                            <div class="w-full h-px bg-gray-200 my-5"></div>

                            <!-- 学历详情 -->
                            <div class="space-y-4 mb-6">
                                <!-- 入学和毕业时间（改为两行布局） -->
                                <!-- 入学时间 -->
                                <div class="flex items-center text-gray-700">
                                    <svg
                                        class="w-5 h-5 text-green-500 mr-3 flex-shrink-0"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                                        ></path>
                                    </svg>
                                    <span
                                        class="text-gray-500 mr-3 text-sm sm:text-base"
                                        >入学时间：</span
                                    >
                                    <span
                                        class="text-gray-700 text-sm sm:text-base font-medium"
                                        >{{ formatDate(education.ksrq) }}</span
                                    >
                                </div>

                                <!-- 毕业时间 -->
                                <div class="flex items-center text-gray-700">
                                    <svg
                                        class="w-5 h-5 text-red-500 mr-3 flex-shrink-0"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                                        ></path>
                                    </svg>
                                    <span
                                        class="text-gray-500 mr-3 text-sm sm:text-base"
                                        >毕业时间：</span
                                    >
                                    <span
                                        class="text-gray-700 text-sm sm:text-base font-medium"
                                        >{{ formatDate(education.jsrq) }}</span
                                    >
                                </div>

                                <!-- 专业 -->
                                <div class="flex items-center text-gray-700">
                                    <svg
                                        class="w-5 h-5 text-blue-400 mr-3 flex-shrink-0"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                                        ></path>
                                    </svg>
                                    <span
                                        class="text-gray-500 mr-3 text-sm sm:text-base"
                                        >专业：</span
                                    >
                                    <span
                                        class="text-gray-700 text-sm sm:text-base"
                                        >{{ education.zymc }}</span
                                    >
                                </div>

                                <!-- 学习方式 -->
                                <div class="flex items-center text-gray-700">
                                    <svg
                                        class="w-5 h-5 text-blue-400 mr-3 flex-shrink-0"
                                        fill="none"
                                        stroke="currentColor"
                                        viewBox="0 0 24 24"
                                    >
                                        <path
                                            stroke-linecap="round"
                                            stroke-linejoin="round"
                                            stroke-width="2"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                                        ></path>
                                    </svg>
                                    <span
                                        class="text-gray-500 mr-3 text-sm sm:text-base"
                                        >学习方式：</span
                                    >
                                    <span
                                        class="text-gray-700 text-sm sm:text-base"
                                        >{{ education.xxxs }}</span
                                    >
                                </div>
                            </div>

                            <!-- 学历描述 -->
                            <div
                                class="relative overflow-hidden rounded-lg mt-5"
                            >
                                <!-- 背景效果 -->
                                <div
                                    class="absolute inset-0 bg-gradient-to-br from-blue-50 to-gray-50 rounded-lg"
                                ></div>

                                <!-- 装饰性元素 - 只在高级学历显示 -->
                                <div
                                    v-if="getEducationLevel(education.xl) >= 4"
                                    class="absolute -right-4 -top-4 w-16 h-16 bg-yellow-100 rounded-full opacity-50"
                                ></div>
                                <div
                                    v-if="getEducationLevel(education.xl) >= 4"
                                    class="absolute -left-4 -bottom-4 w-12 h-12 bg-blue-100 rounded-full opacity-50"
                                ></div>

                                <!-- 内容 -->
                                <div class="relative z-10 p-5">
                                    <h4
                                        class="font-medium text-base text-gray-700 mb-2 flex items-center"
                                    >
                                        <span class="mr-2"
                                            >{{ education.xl }}学历</span
                                        >
                                        <span
                                            v-if="
                                                getEducationLevel(
                                                    education.xl
                                                ) >= 4
                                            "
                                            class="text-xs bg-yellow-400 text-white px-2 py-0.5 rounded"
                                            >高级</span
                                        >
                                    </h4>
                                    <p
                                        class="text-gray-600 text-sm leading-relaxed"
                                    >
                                        {{ getEducationDesc(education.xl) }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无数据状态 -->
        <div
            v-else
            class="flex flex-col items-center py-10 px-5 text-center bg-gray-50"
        >
            <svg
                class="w-16 h-16 text-gray-400 mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
            >
                <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                ></path>
            </svg>
            <div class="text-gray-600 text-sm max-w-md">
                暂无学历信息记录。这可能是因为：
                <ul class="text-left mt-3 pl-5">
                    <li
                        class="mb-2 relative before:content-['•'] before:absolute before:left-[-15px] before:text-blue-500"
                    >
                        学历信息不公开
                    </li>
                    <li
                        class="mb-2 relative before:content-['•'] before:absolute before:left-[-15px] before:text-blue-500"
                    >
                        暂无高等教育学历
                    </li>
                    <li
                        class="mb-2 relative before:content-['•'] before:absolute before:left-[-15px] before:text-blue-500"
                    >
                        学历较早，暂未被教育部门数字化收录
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<style scoped>
.education-history {
    padding: 24px;
    border-radius: 16px;
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    position: relative;
    overflow: hidden;
}

.education-history::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(
        circle at top right,
        rgba(64, 158, 255, 0.05),
        transparent 70%
    );
    border-radius: 0 0 0 100%;
    z-index: 0;
}

.education-content {
    padding: 10px 0;
    position: relative;
    z-index: 1;
}

.decoration-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

.decoration-line {
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(64, 158, 255, 0.5),
        transparent
    );
    flex-grow: 1;
}

.decoration-icon {
    font-size: 22px;
    margin: 0 15px;
    background-color: #f0f7ff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.decoration-bottom {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.decoration-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #409eff;
    margin: 0 3px;
    opacity: 0.5;
}

.timeline {
    position: relative;
    padding-left: 20px;
}

.timeline-item {
    position: relative;
    padding-bottom: 40px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-point {
    position: absolute;
    left: -10px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #409eff;
    border: 4px solid #fff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
    z-index: 2;
    transition: all 0.3s ease;
}

.edu-associate .timeline-point {
    background-color: #909399;
}

.edu-bachelor .timeline-point {
    background-color: #409eff;
}

.edu-master .timeline-point {
    background-color: #67c23a;
}

.edu-doctor .timeline-point,
.edu-postdoc .timeline-point {
    background-color: #ff9900;
}

.timeline-item:hover .timeline-point {
    transform: scale(1.2);
}

.timeline-line {
    position: absolute;
    left: 0;
    top: 20px;
    height: calc(100% - 20px);
    width: 2px;
    background: linear-gradient(to bottom, #409eff, #67c23a);
    z-index: 1;
}

.education-card {
    margin-left: 20px;
    padding: 20px;
    border-radius: 12px;
    background-color: #f5f7fa;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border-left: none;
}

.education-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #409eff, #67c23a);
    opacity: 0.7;
}

.school-985::after {
    background: linear-gradient(to right, #ff9900, #ffba56);
}

.school-211::after {
    background: linear-gradient(to right, #409eff, #6ac0ff);
}

.school-double-first-class::after {
    background: linear-gradient(to right, #67c23a, #95d475);
}

.education-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.card-corner {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(
        to bottom right,
        transparent 49%,
        rgba(64, 158, 255, 0.1) 50%
    );
}

.school-985 .card-corner {
    background: linear-gradient(
        to bottom right,
        transparent 49%,
        rgba(255, 153, 0, 0.1) 50%
    );
}

.school-211 .card-corner {
    background: linear-gradient(
        to bottom right,
        transparent 49%,
        rgba(64, 158, 255, 0.1) 50%
    );
}

.school-double-first-class .card-corner {
    background: linear-gradient(
        to bottom right,
        transparent 49%,
        rgba(103, 194, 58, 0.1) 50%
    );
}

.education-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.education-time {
    font-size: 16px;
    color: #606266;
    display: flex;
    align-items: center;
}

.time-icon {
    margin-right: 5px;
    font-style: normal;
}

.education-level {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
    padding: 4px 12px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.03);
}

.education-details {
    margin-bottom: 16px;
    position: relative;
}

.school-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    background-color: #409eff;
    color: white;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.badge-icon {
    margin-right: 5px;
}

.school-985 .school-type-badge {
    background-color: #ff9900;
    box-shadow: 0 2px 6px rgba(255, 153, 0, 0.3);
}

.school-211 .school-type-badge {
    background-color: #409eff;
    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.school-double-first-class .school-type-badge {
    background-color: #67c23a;
    box-shadow: 0 2px 6px rgba(103, 194, 58, 0.3);
}

.education-major,
.education-mode {
    margin-bottom: 10px;
    font-size: 15px;
    color: #606266;
    display: flex;
    align-items: center;
}

.label {
    color: #909399;
    margin-right: 8px;
    display: flex;
    align-items: center;
}

.major-icon,
.mode-icon {
    font-style: normal;
    margin-right: 5px;
}

.value {
    color: #303133;
    font-weight: 500;
}

.education-description {
    margin-top: 16px;
    padding: 14px;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    border-left: 3px solid rgba(64, 158, 255, 0.3);
}

.school-985 .education-description {
    border-left: 3px solid rgba(255, 153, 0, 0.3);
}

.school-211 .education-description {
    border-left: 3px solid rgba(64, 158, 255, 0.3);
}

.school-double-first-class .education-description {
    border-left: 3px solid rgba(103, 194, 58, 0.3);
}

.desc-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #303133;
}

.desc-content {
    font-size: 14px;
    color: #606266;
    line-height: 1.6;
}

/* 不同学历等级的样式 */
.edu-associate .education-level {
    color: #909399;
    background-color: rgba(144, 147, 153, 0.1);
}

.edu-bachelor .education-level {
    color: #409eff;
    background-color: rgba(64, 158, 255, 0.1);
}

.edu-master .education-level {
    color: #67c23a;
    background-color: rgba(103, 194, 58, 0.1);
}

.edu-doctor .education-level,
.edu-postdoc .education-level {
    color: #ff9900;
    background-color: rgba(255, 153, 0, 0.1);
    position: relative;
}

.edu-doctor .education-level:after,
.edu-postdoc .education-level:after {
    content: "🎓";
    position: absolute;
    right: -24px;
    top: -2px;
}

.edu-postdoc .education-level:after {
    content: "🏆";
}

/* 无数据样式 */
.no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(to bottom, #ffffff, #f5f7fa);
    border-radius: 12px;
}

.no-data-icon {
    font-size: 54px;
    margin-bottom: 20px;
    opacity: 0.6;
    background: linear-gradient(to bottom, #409eff, #67c23a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.no-data-text {
    color: #606266;
    font-size: 15px;
    max-width: 400px;
}

.no-data-text ul {
    text-align: left;
    margin-top: 10px;
    padding-left: 20px;
}

.no-data-text li {
    margin-bottom: 8px;
    position: relative;
}

.no-data-text li:before {
    content: "•";
    position: absolute;
    left: -15px;
    color: #409eff;
}

/* 适配移动端 */
@media screen and (max-width: 768px) {
    .education-history {
        padding: 16px;
    }

    .education-card {
        margin-left: 10px;
        padding: 16px;
    }

    .timeline-point {
        left: -8px;
        width: 16px;
        height: 16px;
    }

    .education-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .education-level {
        margin-top: 8px;
    }
}
</style>
