<style scoped> /* MC玩家信息卡片样式 */ .mc-player-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:15px; padding:10px; } .mc-player-card { display:flex; align-items:center; background:#f8f9fa; border:1px solid #a2a9b1; border-radius:10px; padding:12px; margin:0; text-decoration:none; color:inherit; transition:transform 0.2s,box-shadow 0.2s; } .mc-player-card:hover { transform:translateY(-2px); box-shadow:0 3px 8px rgba(0,0,0,0.15); } .mc-player-avatar { width:50px; height:50px; border-radius:50%; overflow:hidden; margin-right:12px; background:#e0e0e0; border:2px solid #6c757d; transition:transform 0.5s ease; } .mc-player-card:active .mc-player-avatar { transform:rotate(360deg); } .mc-player-avatar img { width:100%; height:100%; object-fit:cover; } .mc-player-info { flex:1; min-width:0; } .mc-player-name { font-size:18px; font-weight:bold; color:#222; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mc-player-chinese { font-size:14px; color:#444; margin-bottom:1px; } .mc-player-english { font-size:12px; color:#666; font-style:italic; } @media (max-width:480px) { .mc-player-grid { grid-template-columns:1fr; } .mc-player-card { flex-direction:column; text-align:center; } .mc-player-avatar { margin-right:0; margin-bottom:10px; } .mc-player-name { white-space:normal; } }
</style>