feat: implement Bento layout support and Editor.js integration for dynamic post lists
This commit is contained in:
@@ -0,0 +1,382 @@
|
||||
<!doctype html>
|
||||
<html lang="vi">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Thành tựu và Bài viết Bệnh viện</title>
|
||||
<style>
|
||||
/* ===================================================
|
||||
1. RESET CSS & FONT CƠ BẢN
|
||||
=================================================== */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8fafc;
|
||||
color: #1e293b;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.news-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
2. FILTER TABS (THANH LỌC DANH MỤC)
|
||||
=================================================== */
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 8px 18px;
|
||||
border: none;
|
||||
background-color: #e2e8f0;
|
||||
color: #475569;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background-color: #cbd5e1;
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background-color: #0284c7; /* Màu xanh chủ đạo y tế */
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
3. CARD GRID (LƯỚI 3 CỘT chuẩn UI)
|
||||
=================================================== */
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
cursor: pointer;
|
||||
border: 1px solid #f1f5f9;
|
||||
}
|
||||
|
||||
.news-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* THUMBNAIL & BADGE NĂM */
|
||||
.card-thumb {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9; /* Cố định tỉ lệ hình ảnh */
|
||||
overflow: hidden;
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.card-thumb img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.year-badge {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #0284c7;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* NỘI DUNG CARD */
|
||||
.card-body {
|
||||
padding: 16px 18px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #0284c7; /* Chữ xanh y tế */
|
||||
line-height: 1.45;
|
||||
|
||||
/* Cắt bớt văn bản thành 3 dòng kèm dấu ... */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
4. PHÂN TRANG (PAGINATION)
|
||||
=================================================== */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #e2e8f0;
|
||||
background-color: #ffffff;
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.page-link:hover {
|
||||
border-color: #0284c7;
|
||||
color: #0284c7;
|
||||
}
|
||||
|
||||
.page-link.active {
|
||||
background-color: #0284c7;
|
||||
color: #ffffff;
|
||||
border-color: #0284c7;
|
||||
}
|
||||
|
||||
.page-dots {
|
||||
padding: 0 4px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
5. RESPONSIVE
|
||||
=================================================== */
|
||||
@media (max-width: 992px) {
|
||||
.news-grid {
|
||||
grid-template-columns: repeat(2, 1fr); /* Tablet chia 2 cột */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr; /* Mobile hiển thị 1 cột */
|
||||
}
|
||||
.filter-tabs {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="news-container">
|
||||
<!-- 1. TAB LỌC NỘI DUNG -->
|
||||
<div class="filter-tabs">
|
||||
<button class="tab-btn active">Tất cả</button>
|
||||
<button class="tab-btn">Điều trị</button>
|
||||
<button class="tab-btn">Đào tạo - Nghiên cứu khoa học</button>
|
||||
<button class="tab-btn">Quản trị Bệnh viện</button>
|
||||
</div>
|
||||
|
||||
<!-- 2. DANH SÁCH BÀI VIẾT dạng LƯỚI GRID -->
|
||||
<div class="news-grid">
|
||||
<!-- Card 1 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=1"
|
||||
alt="Bài viết 1"
|
||||
/>
|
||||
<span class="year-badge">2026</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh ghi dấu ấn tại giải
|
||||
thưởng "Đại sứ truyền thông...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=2"
|
||||
alt="Bài viết 2"
|
||||
/>
|
||||
<span class="year-badge">2026</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Tác phẩm "Tuyển tập những bệnh án lâm sàng đặc sắc" đạt giải B
|
||||
giải thưởng sách quốc gia...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=3"
|
||||
alt="Bài viết 3"
|
||||
/>
|
||||
<span class="year-badge">2026</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Trái tim từ bắc vào nam hồi sinh sự sống cho bệnh nhi ngày đầu
|
||||
xuân mới
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=4"
|
||||
alt="Bài viết 4"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Ca ghép tim xuyên đêm tại Bệnh viện Đại học Y Dược TP. Hồ Chí
|
||||
Minh: Cuộc chạy đua sinh tử...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=5"
|
||||
alt="Bài viết 5"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Đại học Y Dược TP. Hồ Chí Minh công nhận 02 nhóm nghiên cứu tiềm
|
||||
năng mạnh đầu tiên
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=6"
|
||||
alt="Bài viết 6"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh - Điển hình tiên tiến
|
||||
Ngành Y tế tại Đại hội Thi đ...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 7 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=7"
|
||||
alt="Bài viết 7"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh tổ chức lễ kỷ niệm 100 ca
|
||||
TAVI thành công trao...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 8 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=8"
|
||||
alt="Bài viết 8"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Bệnh viện Đại học Y Dược TP. Hồ Chí Minh đạt giải "Vệ sinh tay
|
||||
xuất sắc năm 2025"
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Card 9 -->
|
||||
<article class="news-card">
|
||||
<div class="card-thumb">
|
||||
<img
|
||||
src="https://picsum.photos/400/250?random=9"
|
||||
alt="Bài viết 9"
|
||||
/>
|
||||
<span class="year-badge">2025</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">
|
||||
Tiến bộ trong y học bào thai: Can thiệp thành công cứu sống thai
|
||||
nhi mắc khối u nhau thai...
|
||||
</h3>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<!-- 3. THANH PHÂN TRANG -->
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="page-link">«</a></li>
|
||||
<li><a href="#" class="page-link">‹</a></li>
|
||||
<li><a href="#" class="page-link active">1</a></li>
|
||||
<li><a href="#" class="page-link">2</a></li>
|
||||
<li><a href="#" class="page-link">3</a></li>
|
||||
<li><span class="page-dots">...</span></li>
|
||||
<li><a href="#" class="page-link">6</a></li>
|
||||
<li><a href="#" class="page-link">›</a></li>
|
||||
<li><a href="#" class="page-link">»</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user