feat: enhance menu management with three-level hierarchy support, additional metadata fields, and utility scripts for data extraction
This commit is contained in:
@@ -1,53 +1,66 @@
|
||||
<div layout:fragment="content-top">
|
||||
<!-- Content Top (Banner 3 lớp kết hợp Title bài Post) -->
|
||||
<div class="content-top">
|
||||
<div class="lc--layout-container lc--full">
|
||||
<div class="l--layout l--full">
|
||||
<div class="lr--layout-region lr--main">
|
||||
<div class="cc--component-container cc--homepage-hero">
|
||||
<div class="c--component c--homepage-hero"
|
||||
style="position: relative; overflow: hidden; height: 100vh; max-height: 38.125rem;">
|
||||
|
||||
<!-- ====== ẢNH NỀN (Dùng ảnh bài viết hoặc ảnh mặc định) ====== -->
|
||||
<img class="static-fallback-image" th:src="${post.featuredImage != null and !post.featuredImage.isEmpty() ? post.featuredImage : 'https://res.cloudinary.com/ipufdhda/image/upload/v1784534008/BANNER-WEB-scaled_yeox4u.jpg'}" th:alt="${post.title}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;" />
|
||||
|
||||
<!-- ====== TEXT OVERLAY (Nội dung chữ nằm trên ảnh, Hiển thị Tiêu đề bài viết) ====== -->
|
||||
<!-- Thêm một lớp nền mờ (rgba đen) để chữ luôn hiển thị rõ ràng trên mọi hình ảnh -->
|
||||
<div class="text-container centered"
|
||||
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.4);">
|
||||
<div class="slide-text-container-inner" style="pointer-events: auto; text-align: center; padding: 20px;">
|
||||
<div class="f--field f--eyebrow" th:if="${post.category != null}" th:text="${post.category.name}" style="color: white; text-shadow: 0 2px 5px rgba(0,0,0,0.7); margin-bottom: 10px; font-weight: bold; text-transform: uppercase;">
|
||||
University News
|
||||
</div>
|
||||
<div class="f--field f--page-title">
|
||||
<h1 class="hero-post-title" th:text="${post.title}">Post Title</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hero-post-title {
|
||||
color: white;
|
||||
text-shadow: 0 2px 5px rgba(0,0,0,0.7);
|
||||
line-height: 1.2;
|
||||
margin: 0 auto;
|
||||
max-width: 1000px;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.hero-post-title { font-size: 2.8rem; max-width: 800px; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.hero-post-title { font-size: 2.2rem; max-width: 600px; }
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.hero-post-title { font-size: 1.8rem; }
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="submenu-wrapper" style="left: -671.344px;width: 1920px;">
|
||||
<button class="button-back">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 10" width="5" height="10">
|
||||
<polygon fill-rule="evenodd" clip-rule="evenodd" fill="#881c1c" points="0,5 5,0 5,10 "></polygon>
|
||||
</svg> Back </button>
|
||||
<span class="navigation-title">VỀ BỆNH VIỆN</span>
|
||||
|
||||
<!-- Mobile Submenu Layout (Simple List) -->
|
||||
<ul class="submenu mobile-only">
|
||||
<li class="menu-item">
|
||||
<a href="#">GIỚI THIỆU TỔNG QUAN</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">LỊCH SỬ BỆNH VIỆN</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">TẦM NHÌN - SỨ MỆNH - GIÁ TRỊ CỐT LÕI</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">BAN LÃNH ĐẠO</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">CÁC ĐƠN VỊ</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Mega Menu Content Layout -->
|
||||
<div class="mega-menu-content desktop-only">
|
||||
<!-- Column 1: Info (Title and Text) -->
|
||||
<div class="mega-col-info">
|
||||
<h3>VỀ BỆNH VIỆN</h3>
|
||||
<p style="text-transform: math-auto;">Bệnh viện Đột quỵ Quốc tế tự hào là đơn vị tiên phong trong việc cung cấp dịch vụ khám chữa bệnh chất lượng cao, mang lại sự tin cậy và an tâm cho bệnh nhân.</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Column 2: The actual Submenu Links -->
|
||||
<div class="mega-col-links">
|
||||
<ul class="submenu">
|
||||
<li class="menu-item">
|
||||
<a href="#">GIỚI THIỆU TỔNG QUAN</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">LỊCH SỬ BỆNH VIỆN</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">TẦM NHÌN - SỨ MỆNH - GIÁ TRỊ CỐT LÕI</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">BAN LÃNH ĐẠO</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="#">CÁC ĐƠN VỊ</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: Featured Image -->
|
||||
<div class="mega-col-image">
|
||||
<!-- Try to use a hospital-like image if we can, or fallback to logo -->
|
||||
<img src="/theme-assets/umass/images/logo.png" alt="Featured Image" style="object-fit: contain; background: white; padding: 20px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Mega Menu Layout -->
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user