84 lines
2.3 KiB
Plaintext
84 lines
2.3 KiB
Plaintext
<div class="w-annc widget-announcement-26">
|
|
<h3 class="w-annc__widget-title">
|
|
<span>{{widget-title}}</span>
|
|
</h3>
|
|
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
|
<li class="w-annc__item">
|
|
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}" class="widget-title-a">
|
|
<div class="w-annc__img-wrap ">
|
|
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
|
</div>
|
|
<div class="w-annc__content-wrap card">
|
|
<div class="w-annc__meta">
|
|
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
|
<i class="fa-regular fa-calendar"></i>
|
|
<span class="w-annc__postdate">{{postdate}}</span>
|
|
</span>
|
|
<span class="w-annc__category-wrap">
|
|
<i class="fa-solid fa-list"></i>
|
|
<span class="w-annc__category">{{category}}</span>
|
|
</span>
|
|
</div>
|
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
|
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
|
</span>
|
|
<h4 class="w-annc__entry-title">
|
|
<span class="w-annc__title">{{title}}</span>
|
|
</h4>
|
|
<p class="w-annc__subtitle">{{subtitle}}</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="w-annc__more-wrap clearfix">
|
|
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.widget-announcement-26 {
|
|
|
|
.w-annc__list {
|
|
// 讓 grid 的 row 有高度
|
|
@media(min-width: $screen-sm) {
|
|
grid-template-rows: 1fr 1fr; // 兩列平均分配
|
|
}
|
|
}
|
|
|
|
.w-annc__item {
|
|
// li 撐滿 grid 格子
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// a 撐滿 li
|
|
.widget-title-a {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
// img-wrap 撐滿 a
|
|
.w-annc__img-wrap {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
position: relative;
|
|
height: 100%; // 配合 img height: 100%
|
|
}
|
|
|
|
.w-annc__img {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
object-fit: cover; // 關鍵：讓圖片填滿並裁切
|
|
position: absolute !important;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
// card 固定在底部
|
|
.w-annc__content-wrap.card {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
|
|
</style> |