<div class="ul-post-block-list">
<div class="ul-post-block-item" data-repeat="4">
<div class="ul-post-block-item__poster ul-demo-view"></div>
<div class="ul-post-block-item__title">PHP基金会年预算已达300万元 </div>
<div class="ul-post-block-item__desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
<div class="ul-post-block-item">
<div class="ul-post-block-item__poster ul-demo-view"></div>
<div class="ul-post-block-item__title">PHP基金会年预算已达300万元 </div>
<div class="ul-post-block-item__desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </div>
</div>
</div>
.ul-post-block-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: $space-lg;
align-items: start; // 默认情况下，项目高度自适应
// 固定高度模式
&.fixed-height {
align-items: stretch; // 拉伸项目以填充网格区域
.ul-post-block-item {
display: flex;
flex-direction: column;
&__desc {
flex-grow: 1; // 描述区域填充剩余空间
}
}
}
}
.ul-post-block-item {
background-color: $color-white;
border-radius: $radius-md;
overflow: hidden;
box-shadow: $shadow-sm;
transition: all .3s;
&:hover {
box-shadow: $shadow-lg;
transform: translateY(-4px);
}
&__poster {
width: 100%;
padding-top: 56.25%; // 16:9 aspect ratio
background-size: cover;
background-position: center;
background-color: $color-main-light;
}
&__title {
font-size: $font-size-lg;
color: $color-text;
font-weight: bold;
padding: $space-md $space-md 0;
@include text-ellipsis;
}
&__desc {
font-size: $font-size-base;
color: $color-text-secondary;
margin: $space-sm $space-md $space-md;
line-height: 1.6;
@include text-ellipsis(3);
}
}
.ul-post-block-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
align-items: start;
}
.ul-post-block-list.fixed-height {
align-items: stretch;
}
.ul-post-block-list.fixed-height .ul-post-block-item {
display: flex;
flex-direction: column;
}
.ul-post-block-list.fixed-height .ul-post-block-item__desc {
flex-grow: 1;
}
.ul-post-block-item {
background-color: var(--ul-color-white);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
transition: all 0.3s;
}
.ul-post-block-item:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
transform: translateY(-4px);
}
.ul-post-block-item__poster {
width: 100%;
padding-top: 56.25%;
background-size: cover;
background-position: center;
background-color: var(--ul-color-main-light);
}
.ul-post-block-item__title {
font-size: 16px;
color: var(--ul-color-text);
font-weight: bold;
padding: 16px 16px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ul-post-block-item__desc {
font-size: 14px;
color: var(--ul-color-text-secondary);
margin: 8px 16px 16px;
line-height: 1.6;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
<view class="ul-post-block-list">
<view class="ul-post-block-item" data-repeat="4">
<view class="ul-post-block-item__poster ul-demo-view"></view>
<view class="ul-post-block-item__title">PHP基金会年预算已达300万元 </view>
<view class="ul-post-block-item__desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
<view class="ul-post-block-item">
<view class="ul-post-block-item__poster ul-demo-view"></view>
<view class="ul-post-block-item__title">PHP基金会年预算已达300万元 </view>
<view class="ul-post-block-item__desc">PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元.PHP基金会在2021年11月23日上线运营,目前已经$411,184.29,换算人民币260万元,年度预算达到$488,021.00,算换人民币300万元. </view>
</view>
</view>