查看“模板:MCPlayerInfo/style.css”的源代码

/* ======================
   Flex容器：确保均匀分配
====================== */
.mc-player-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important; /* 左对齐，避免自动拉伸不均 */
}

/* ======================
   卡片宽度强制统一范围
====================== */
.home-card.mc-player-card {
    /* 核心：固定最小和最大宽度，确保同行列宽一致 */
    flex: 0 0 calc(50% - 15px) !important; /* 中屏幕默认2列，减去间距 */
    max-width: calc(50% - 15px) !important;
    min-width: 300px !important; /* 最小宽度，避免过窄 */
    
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 15px !important;
    margin: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 15px !important;
    background: #f5f7fa !important;
    min-height: 80px !important;
    box-sizing: border-box !important;
}

/* 屏幕适配：不同尺寸下的列数控制 */
/* 小屏幕（手机）：1列，宽度100% */
@media (max-width: 600px) {
    .home-card.mc-player-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* 大屏幕（桌面）：3列 */
@media (min-width: 1000px) {
    .home-card.mc-player-card {
        flex: 0 0 calc(33.333% - 15px) !important;
        max-width: calc(33.333% - 15px) !important;
    }
}

/* 超大屏幕：4列 */
@media (min-width: 1300px) {
    .home-card.mc-player-card {
        flex: 0 0 calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
    }
}

/* ======================
   文字区域溢出处理
====================== */
.mc-player-info {
    flex: 1 !important;
    min-width: 0 !important; /* 允许文字区域收缩 */
}

/* 长文字自动省略，避免撑开卡片 */
.mc-player-info .home-card__header,
.mc-player-chinese,
.mc-player-english {
    white-space: nowrap !important; /* 不换行 */
    overflow: hidden !important; /* 溢出隐藏 */
    text-overflow: ellipsis !important; /* 显示省略号 */
}

/* 其他样式保持不变 */
.mc-player-avatar {
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}