167 lines
4.3 KiB
Plaintext
167 lines
4.3 KiB
Plaintext
section.article-list {
|
|
flex: 1;
|
|
position: relative;
|
|
padding-bottom: 6rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
|
gap: 1.6rem;
|
|
width: 100%;
|
|
height: max-content;
|
|
overflow: hidden;
|
|
|
|
&>.vh-article-item {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 100%;
|
|
border: solid 1px #eee;
|
|
border-radius: 1rem;
|
|
background: #fff;
|
|
overflow: hidden;
|
|
|
|
&>a.vh-article-link {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0.618rem;
|
|
overflow: hidden;
|
|
transition: background 0.16s;
|
|
|
|
&:hover {
|
|
&>.vh-article-banner {
|
|
&>img {
|
|
transform: scale(1.08);
|
|
}
|
|
}
|
|
}
|
|
|
|
&>.vh-article-banner {
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 12rem;
|
|
overflow: hidden;
|
|
|
|
&>img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
// transition公共区域有动画效果
|
|
}
|
|
}
|
|
|
|
|
|
&>.vh-article-desc {
|
|
box-sizing: border-box;
|
|
padding: 1.25rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: max-content;
|
|
overflow: hidden;
|
|
|
|
&>header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.36rem;
|
|
|
|
&>.vh-article-categories {
|
|
box-sizing: border-box;
|
|
width: max-content;
|
|
font-size: 0.875rem;
|
|
font-weight: bold;
|
|
/* 默认渐变色起始 */
|
|
--gradient-color-1: #a32cc4;
|
|
/* 默认渐变色中间 */
|
|
--gradient-color-2: #b65fcf;
|
|
/* 默认渐变色结束 */
|
|
--gradient-color-3: #e39ff6;
|
|
background: linear-gradient(118deg, var(--gradient-color-1), var(--gradient-color-2) 26%, var(--gradient-color-3));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
color: transparent;
|
|
|
|
&.vh-categories-Code {
|
|
/* 默认渐变色起始 */
|
|
--gradient-color-1: #f48600;
|
|
/* 默认渐变色中间 */
|
|
--gradient-color-2: #ffa12e;
|
|
/* 默认渐变色结束 */
|
|
--gradient-color-3: #ffe9c9;
|
|
}
|
|
|
|
&.vh-categories-Daily {
|
|
/* 默认渐变色起始 */
|
|
--gradient-color-1: #6270ee;
|
|
/* 默认渐变色中间 */
|
|
--gradient-color-2: #2b90d9;
|
|
/* 默认渐变色结束 */
|
|
--gradient-color-3: #37dede;
|
|
}
|
|
|
|
&.vh-categories-Software {
|
|
/* 默认渐变色起始 */
|
|
--gradient-color-1: #006633;
|
|
/* 默认渐变色中间 */
|
|
--gradient-color-2: #00cc66;
|
|
/* 默认渐变色结束 */
|
|
--gradient-color-3: #66ff99;
|
|
}
|
|
|
|
&.vh-categories-Share {
|
|
/* 默认渐变色起始 */
|
|
--gradient-color-1: rgb(240, 45, 133);
|
|
/* 默认渐变色中间 */
|
|
--gradient-color-2: #f95ba5;
|
|
/* 默认渐变色结束 */
|
|
--gradient-color-3: #f4bdd0;
|
|
}
|
|
}
|
|
|
|
&>.title {
|
|
margin: 0;
|
|
font-size: 1.18rem;
|
|
font-weight: 600;
|
|
line-height: 1.36;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
&>.vh-article-excerpt {
|
|
margin: 0.88rem 0 0.625rem;
|
|
width: 100%;
|
|
height: max-content;
|
|
font-size: 0.875rem;
|
|
line-height: 1.28rem;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&>footer {
|
|
margin-top: auto;
|
|
font-size: 0.875rem;
|
|
color: #6E6E6E;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&>.vh-article-pagination {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
} |