182 lines
3.4 KiB
Stylus
182 lines
3.4 KiB
Stylus
.articles-container {
|
||
margin: 0 auto;
|
||
padding: 0 16px;
|
||
column-count: 3;
|
||
}
|
||
|
||
.article-card {
|
||
margin: 20px 0;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
cursor: pointer;
|
||
display: flex;
|
||
flex-direction: column;
|
||
break-inside: avoid;
|
||
}
|
||
|
||
.article-card:hover {
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.article-content {
|
||
padding: 1.25rem;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.article-cover {
|
||
width: 100%;
|
||
height: 160px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-cover img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
.article-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
.article-title {
|
||
line-height: var(--mdui-typescale-headline-small-line-height);
|
||
font-size: var(--mdui-typescale-headline-small-size);
|
||
letter-spacing: var(--mdui-typescale-headline-small-tracking);
|
||
font-weight: var(--mdui-typescale-headline-small-weight);
|
||
/* 防止标题过长溢出 */
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.article-content span {
|
||
/* 摘要文本样式 */
|
||
color: var(--mdui-color-on-surface-variant);
|
||
font-size: 1.0rem;
|
||
line-height: 1.5;
|
||
/* 防止摘要溢出 - 限制最多显示6行（约120字） */
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 6;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-height: 9em;
|
||
/* 确保文本换行 */
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: normal;
|
||
}
|
||
|
||
.article-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.5rem;
|
||
margin-top: auto;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.article-date {
|
||
color: var(--mdui-color-on-surface-variant);
|
||
font-size: 0.8rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.25rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.25rem;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
}
|
||
|
||
.article-tags mdui-chip {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-side {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
margin-top: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.article-read-more {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.no-articles {
|
||
text-align: center;
|
||
padding: 3rem 2rem;
|
||
border-radius: 16px;
|
||
min-height: 200px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.articles-container {
|
||
column-count: 2;
|
||
}
|
||
|
||
.article-content span {
|
||
-webkit-line-clamp: 5;
|
||
max-height: 7.5em;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.articles-container {
|
||
column-count: 1;
|
||
}
|
||
|
||
.article-meta {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.article-tags {
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
}
|
||
|
||
.article-content span {
|
||
-webkit-line-clamp: 4;
|
||
max-height: 6em;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 500px) {
|
||
.article-content {
|
||
padding: 1rem;
|
||
gap: 12px;
|
||
}
|
||
|
||
.article-content span {
|
||
-webkit-line-clamp: 3;
|
||
max-height: 4.5em;
|
||
}
|
||
} |