/* 核心成员页专属样式 */ .member-banner { height: 200px; position: relative; overflow: hidden; margin-bottom: 40px; background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(images/member-banner.jpg) center/cover no-repeat; transition: background 0.3s ease; } body.night-mode .member-banner { background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url(images/member-banner-night.jpg) center/cover no-repeat; } .member-banner-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; z-index: 10; } .member-banner-text h1 { font-size: 28px; margin-bottom: 8px; letter-spacing: 1px; } .member-banner-text p { font-size: 16px; opacity: 0.9; } /* 成员列表 */ .member-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 40px; } .member-card { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(22,93,255,0.08); padding: 20px; text-align: center; transition: all 0.3s ease; } body.night-mode .member-card { background-color: #2C3036; box-shadow: 0 2px 12px rgba(0,0,0,0.3); } .member-card:hover { transform: translateY(-3px); box-shadow: 0 4px 16px rgba(22,93,255,0.12); } body.night-mode .member-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.5); } .member-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background-color: #F2F3F5; display: flex; align-items: center; justify-content: center; color: #86909C; font-size: 14px; } body.night-mode .member-avatar { background-color: #373B41; color: #C0C4CC; } .member-avatar img { width: 100%; height: 100%; object-fit: cover; } .member-info h3 { font-size: 16px; color: #000; margin-bottom: 8px; font-weight: 600; } body.night-mode .member-info h3 { color: #fff; } .member-info p { font-size: 12px; color: #4E5969; line-height: 1.6; margin-bottom: 4px; text-align: left; padding: 0 8px; } body.night-mode .member-info p { color: #E5E6EB; } .member-more { display: inline-block; margin-top: 12px; font-size: 12px; color: #165DFF; cursor: pointer; } .member-more>a{ color: rgb(70, 70, 251); text-decoration: none; } .member-more>a:hover { color: red; } /* 分页导航 */ .pagination { text-align: right; margin-bottom: 40px; } /* 核心:.kun-page-link 样式 */ .kun-page-link { display: inline-block; padding: 8px 16px; margin: 0 4px; /* 缩小间距更紧凑 */ border-radius: 4px; background: #fff; color: #4E5969; border: none; cursor: pointer; transition: all 0.3s ease; font-size: 14px; text-decoration: none; /* 去掉a标签默认下划线 */ } /* 夜间模式下的kun-page-link */ body.night-mode .kun-page-link { background-color: #2C3036; color: #E5E6EB; } /* 禁用状态 */ .kun-page-link.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; /* 禁用点击 */ } /* 激活状态(当前页) */ .kun-page-link.active { background-color: #165DFF; color: #fff; } /* 悬浮状态(非禁用/非激活) */ .kun-page-link:hover:not(.disabled):not(.active) { background-color: #165DFF; color: #fff; } /* 保留分页中的span样式(省略号) */ .pagination span { display: inline-block; padding: 8px 8px; margin: 0 4px; color: #4E5969; font-size: 14px; } body.night-mode .pagination span { color: #E5E6EB; } /* 移动端适配 */ @media (max-width: 768px) { .member-banner { height: 150px; } .member-banner-text h1 { font-size: 22px; } .member-list { grid-template-columns: repeat(2, 1fr); gap: 16px; } .member-avatar { width: 100px; height: 100px; } .pagination { text-align: center; } }