SMANAGE/TempLate/members.html

<section class="container mx-auto px-4 pt-8 pb-10 md:pb-12 relative w-full overflow-x-hidden">
    <div class="max-w-7xl mx-auto relative z-10 px-4 md:px-8">
        <div class="absolute top-0 -right-20 w-80 h-80 bg-primary/5 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>
        <div class="absolute bottom-0 -left-20 w-96 h-96 bg-primary/8 dark:bg-blue-900/10 rounded-full blur-3xl -z-10"></div>
        <div class="mb-6 md:mb-8 relative pl-2 md:pl-6">
            <span class="inline-block px-4 py-1 mb-3 text-sm font-semibold text-primary bg-primary/10 dark:bg-blue-900/20 dark:text-blue-300 rounded-full ml-4 md:ml-0 transform -translate-y-1">核心团队 · 成员风采</span>
            <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-text-primary dark:text-white mb-3 leading-tight relative">
                <span class="block transform translate-x-2 md:translate-x-4">银河锋锐筑梦人</span>
                <span class="block text-primary/90 dark:text-blue-400 text-lg md:text-xl font-medium mt-1 ml-8 md:ml-12">每一位成员都是团队的星光（由于信息收集难度大，只展示四个人的信息）</span>
            </h2>
            <p class="text-gray-600 dark:text-gray-400 max-w-xl md:max-w-2xl text-base md:text-lg border-l-2 border-primary/30 dark:border-blue-500/30 pl-4 py-1 ml-6">以专业与热爱共筑技术星河</p>
        </div>
        <div class="mb-6 flex flex-wrap gap-2 justify-center" id="filter-buttons"></div>
        <div id="members-container" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6"></div>
        <div class="mt-8 md:mt-10 flex justify-end pr-4 md:pr-8">
            <button class="bg-white dark:bg-slate-800 border-2 border-primary dark:border-blue-500 text-primary dark:text-blue-400 hover:bg-primary hover:text-white dark:hover:bg-blue-600 dark:hover:text-white px-6 py-2.5 rounded-lg font-medium transition-all duration-300 flex items-center gap-2 transform hover:scale-105 hover:shadow-lg hover:shadow-primary/10 dark:hover:shadow-blue-500/20">
                <i class="fa fa-user-plus transform hover:rotate-180 transition-transform duration-300"></i> 
                <span>加入我们</span>
            </button>
        </div>
    </div>
    <div id="chart-modal" class="fixed inset-0 bg-black/60 dark:bg-black/80 z-50 hidden overflow-y-auto backdrop-blur-sm">
        <div class="flex items-start justify-center min-h-screen p-4 pt-16">
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-xl dark:shadow-black/40 max-w-7xl w-full max-h-[85vh] overflow-y-auto transform transition-all duration-300 translate-y-full opacity-0" id="modal-content">
                <div class="sticky top-0 bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 px-6 py-4 rounded-t-xl flex justify-between items-center z-10">
                    <h3 class="text-2xl font-bold text-text-primary dark:text-white" id="modal-title">成员贡献详情</h3>
                    <button id="close-modal" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors"><i class="fa fa-times text-xl"></i></button>
                </div>
                <div class="p-6 md:p-8">
                    <div class="bg-gray-50 dark:bg-slate-700/50 p-4 rounded-lg mb-6 border border-gray-100 dark:border-slate-600">
                        <div class="flex flex-col md:flex-row gap-4">
                            <div class="md:w-1/3">
                                <img id="modal-avatar" src="" alt="" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-gray-200 dark:border-slate-600">
                                <h4 id="modal-name" class="text-xl font-bold text-center mb-2 text-gray-900 dark:text-white"></h4>
                                <p id="modal-position" class="text-gray-600 dark:text-gray-400 text-center mb-2"></p>
                                <p id="modal-role" class="text-primary dark:text-blue-400 text-center font-medium"></p>
                            </div>
                            <div class="md:w-2/3">
                                <h5 class="font-semibold mb-2 text-gray-900 dark:text-white">个人简介</h5>
                                <p id="modal-description" class="text-gray-600 dark:text-gray-300 mb-4"></p>
                                <div id="dynamic-info" class="grid grid-cols-2 gap-4 mb-4"></div>
                                <div>
                                    <h5 class="font-semibold mb-2 text-gray-900 dark:text-white">联系方式</h5>
                                    <div id="modal-contacts" class="flex gap-2 flex-wrap"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="dynamic-charts" class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
section {
    position: relative;
}

section .absolute.left-0,
section .absolute.right-0 {
    overflow: hidden;
}
@media (max-width: 768px) {
    section {
        padding-top: 30px;
    }
    section .absolute.left-0,
    section .absolute.right-0 {
        width: 25%;
        opacity: 0.7;
        top: 30px;
        height: calc(100% - 30px);
    }
}
@media (max-width: 640px) {
    section {
        padding-top: 20px;
    }
    
    section .absolute.left-0,
    section .absolute.right-0 {
        width: 20%;
        opacity: 0.5;
        top: 20px;
        height: calc(100% - 20px);
    }
}
@media (max-width: 768px) {
    .max-w-7xl.mx-auto.relative {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (max-width: 640px) {
    .max-w-7xl.mx-auto.relative {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}
</style>

<script src="/assets/js/member.js"></script>
<style type="text/tailwindcss">
@layer utilities {
    .card-hover {
        @apply hover:shadow-lg hover:shadow-primary/10 dark:hover:shadow-blue-500/10;
    }
}
.card-hover {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
</style>