无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
/* 网格容器 */ | /* 网格容器 */ | ||
.mc | .mc-grid { | ||
display: grid; | |||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |||
gap: 15px; | |||
padding: 15px; | |||
} | } | ||
/* | /* 横向卡片主体 */ | ||
.mc-card { | |||
display: flex; | |||
align-items: center; | |||
background: #f5f7fa; | |||
border: 1px solid #dee2e6; | |||
border-radius: 15px; | |||
box-shadow: 0 3px 6px rgba(0,0,0,0.04); | |||
padding: 12px 15px; | |||
text-decoration: none; | |||
color: #333; | |||
transition: all 0.3s ease; | |||
} | |||
/* | /* 卡片悬停效果 */ | ||
.mc | .mc-card:hover { | ||
transform: translateY(-3px); | |||
box-shadow: 0 8px 15px rgba(0,0,0,0.1); | |||
border-color: #3498db; | |||
} | } | ||
.mc- | /* 头像容器 */ | ||
.mc-avatar { | |||
width: 50px; | |||
height: 50px; | |||
border-radius: 50%; | |||
overflow: hidden; | |||
margin-right: 15px; | |||
border: 2px solid #e9ecef; | |||
} | } | ||
/* | /* 头像图片 */ | ||
.mc | .mc-avatar img { | ||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
transition: transform 0.5s ease; | |||
} | } | ||
.mc | /* 头像点击旋转 */ | ||
.mc-card:active .mc-avatar img { | |||
transform: rotate(360deg); | |||
} | } | ||
.mc- | /* 文字内容容器 */ | ||
.mc-info { | |||
flex: 1; | |||
min-width: 0; | |||
} | } | ||
/* | /* 玩家名称 */ | ||
.mc- | .mc-name { | ||
font-size: 16px; | |||
font-weight: bold; | |||
margin: 0 0 4px 0; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
.mc- | /* 中文描述 */ | ||
.mc-cn { | |||
font-size: 13px; | |||
color: #555; | |||
margin: 0 0 2px 0; | |||
} | } | ||
.mc- | /* 英文描述 */ | ||
.mc-en { | |||
font-size: 12px; | |||
color: #777; | |||
font-style: italic; | |||
margin: 0; | |||
} | } | ||
.mc- | /* 响应式布局 */ | ||
@media (max-width: 768px) { | |||
.mc-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | } |
2025年7月26日 (六) 00:01的版本
/* 网格容器 */
.mc-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
padding: 15px;
}
/* 横向卡片主体 */
.mc-card {
display: flex;
align-items: center;
background: #f5f7fa;
border: 1px solid #dee2e6;
border-radius: 15px;
box-shadow: 0 3px 6px rgba(0,0,0,0.04);
padding: 12px 15px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
/* 卡片悬停效果 */
.mc-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
border-color: #3498db;
}
/* 头像容器 */
.mc-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
margin-right: 15px;
border: 2px solid #e9ecef;
}
/* 头像图片 */
.mc-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* 头像点击旋转 */
.mc-card:active .mc-avatar img {
transform: rotate(360deg);
}
/* 文字内容容器 */
.mc-info {
flex: 1;
min-width: 0;
}
/* 玩家名称 */
.mc-name {
font-size: 16px;
font-weight: bold;
margin: 0 0 4px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 中文描述 */
.mc-cn {
font-size: 13px;
color: #555;
margin: 0 0 2px 0;
}
/* 英文描述 */
.mc-en {
font-size: 12px;
color: #777;
font-style: italic;
margin: 0;
}
/* 响应式布局 */
@media (max-width: 768px) {
.mc-grid {
grid-template-columns: 1fr;
}
}