测试3
/* Template:首页卡片2026/styles.css
首页卡片版样式。适合放到 TemplateStyles,也可以追加到 MediaWiki:Common.css。
- /
.xq-home {
max-width: 1120px; margin: 0 auto; color: #172033;
}
.xq-home-hero {
display: grid; gap: 12px; margin: 10px 0 24px; padding: 22px 0 8px;
}
.xq-home-hero h2 {
margin: 0; color: #121826; font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", serif; font-size: clamp(28px, 4vw, 46px); line-height: 1.22; border: 0;
}
.xq-home-hero p {
max-width: 760px; margin: 0; color: #6b7280; font-size: 17px; line-height: 1.8;
}
.xq-home-section {
margin: 28px 0;
}
.xq-home-section--nav {
margin-top: 8px;
}
.xq-home-feed {
margin-top: 18px;
}
.xq-home-section__head {
display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 14px;
}
.xq-home-section h2 {
margin: 0; color: #111827; font-size: 22px; line-height: 1.35; border: 0;
}
.xq-home-section__more {
flex: 0 0 auto; color: #2f5aa8; font-size: 14px; font-weight: 700;
}
.xq-home-card-grid {
max-width: 860px;
}
.xq-home-nav-grid {
margin-right: -8px; margin-bottom: 4px; overflow: hidden;
}
.xq-home-nav-card {
box-sizing: border-box; float: left; width: 12.5%; padding: 0 8px 8px 0;
}
.xq-home-nav-card a {
display: block; padding: 8px 4px; overflow: hidden; color: #334155; font-size: 13px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 999px;
}
.xq-home-nav-card a:hover {
color: #2f5aa8; text-decoration: none; border-color: #cbd5e1;
}
.xq-home-card {
box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 14px; min-height: 104px; margin: 0 0 10px; padding: 10px 14px 10px 10px; overflow: hidden; background: #ffffff; border: 1px solid #e3e7ee; border-radius: 8px; box-shadow: 0 3px 10px rgba(31, 41, 55, 0.035); cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.xq-home-card::before {
content: "";
}
.xq-home-card:hover {
border-color: #cbd5e1; box-shadow: 0 8px 18px rgba(31, 41, 55, 0.07); transform: translateY(-1px);
}
.xq-home-card__image {
flex: 0 0 84px; width: 84px; height: 84px; overflow: hidden; background: #eef2f7; border-radius: 8px;
}
.xq-home-card__image a, .xq-home-card__image .image, .xq-home-card__image img {
display: block; width: 100%; height: 100%;
}
.xq-home-card__image img {
object-fit: cover;
}
.xq-home-card__body {
flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.xq-home-card__title {
overflow: hidden; color: #111827; font-size: 17px; font-weight: 800; line-height: 1.32; max-height: 45px;
}
.xq-home-card__title a {
color: #111827 !important; text-decoration: none !important;
}
.xq-home-card__title a:hover {
color: #2f5aa8 !important; text-decoration: none !important;
}
.xq-home-card__title a:focus {
outline: 0;
}
.xq-home-card__title a::after {
position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; content: "";
}
.xq-home-card__title a:focus::after {
outline: 2px solid #2f5aa8; outline-offset: 2px;
}
.xq-home-card__meta {
margin-top: 6px; overflow: hidden; color: #6b7280; font-size: 13px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap;
}
.xq-home-card__text {
margin-top: 6px; overflow: hidden; color: #6b7280; font-size: 13px; line-height: 1.5; max-height: 39px;
}
.xq-home-manual {
padding: 16px; background: #f7f8fb; border: 1px solid #e3e7ee; border-radius: 8px;
}
@media (max-width: 768px) {
.xq-home {
max-width: none;
}
.xq-home-hero {
margin-top: 0;
padding-top: 8px;
}
.xq-home-section__head {
align-items: flex-start;
}
.xq-home-card-grid {
max-width: none;
}
.xq-home-nav-grid {
margin-right: -6px;
}
.xq-home-nav-card {
width: 25%;
padding: 0 6px 6px 0;
}
.xq-home-nav-card a {
padding: 7px 2px;
font-size: 12px;
}
.xq-home-card {
min-height: 92px;
gap: 10px;
margin-bottom: 8px;
padding: 10px;
}
.xq-home-card__image {
flex-basis: 72px;
width: 72px;
height: 72px;
}
.xq-home-card__title {
font-size: 15px;
line-height: 1.32;
max-height: 40px;
}
.xq-home-card__meta {
display: none;
}
.xq-home-card__text {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.35;
max-height: 32px;
}
}