|
|
@@ -101,26 +101,54 @@
|
|
|
<!-- 技术亮点 -->
|
|
|
<section class="technical-highlights">
|
|
|
<h2 class="section-title">技术亮点</h2>
|
|
|
- <div class="horizontal-accordion-container">
|
|
|
- <div
|
|
|
- v-for="(item, index) in Object.values(currentProject.technicalHighlights)"
|
|
|
- :key="index"
|
|
|
- class="accordion-item"
|
|
|
- :class="{ 'active': activeAccordion === index }"
|
|
|
- @mouseenter="handleItemHover(index)"
|
|
|
- >
|
|
|
- <div class="accordion-header">
|
|
|
- <el-icon class="collapse-icon"><Star /></el-icon>
|
|
|
+ <div class="highlights-container">
|
|
|
+ <!-- 左侧分类列表 -->
|
|
|
+ <div class="highlights-menu">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in Object.values(currentProject.technicalHighlights)"
|
|
|
+ :key="index"
|
|
|
+ class="menu-item"
|
|
|
+ :class="{ 'active': activeHighlight === index }"
|
|
|
+ @click="handleHighlightClick(index)"
|
|
|
+ >
|
|
|
+ <el-icon class="menu-icon"><Star /></el-icon>
|
|
|
<span>{{ item.title }}</span>
|
|
|
</div>
|
|
|
- <div class="accordion-content">
|
|
|
- <p class="collapse-description">{{ item.description }}</p>
|
|
|
- <ul class="collapse-features">
|
|
|
- <li v-for="(feature, idx) in item.features" :key="idx">
|
|
|
- <el-icon class="feature-icon"><Check /></el-icon>
|
|
|
- {{ feature }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧图片展示 -->
|
|
|
+ <div class="highlights-content">
|
|
|
+ <div v-if="currentHighlight" class="highlight-detail">
|
|
|
+ <!-- 大图展示 -->
|
|
|
+ <div class="highlight-image">
|
|
|
+ <img
|
|
|
+ :src="currentHighlight.images[activeImageIndex]"
|
|
|
+ :alt="currentHighlight.title"
|
|
|
+ class="detail-image"
|
|
|
+ loading="lazy"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <!-- 缩略图小图集 -->
|
|
|
+ <div class="thumbnail-gallery">
|
|
|
+ <div
|
|
|
+ v-for="(image, index) in currentHighlight.images"
|
|
|
+ :key="index"
|
|
|
+ class="thumbnail-item"
|
|
|
+ :class="{ 'active': activeImageIndex === index }"
|
|
|
+ @click="handleImageClick(index)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="image"
|
|
|
+ :alt="`${currentHighlight.title} - 图${index + 1}`"
|
|
|
+ class="thumbnail-image"
|
|
|
+ loading="lazy"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else class="no-selection">
|
|
|
+ <el-icon class="no-selection-icon"><Star /></el-icon>
|
|
|
+ <p>请选择一个技术亮点查看</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -443,12 +471,29 @@ import { allProjects, getProjectById } from '@/data/projects'
|
|
|
const videoPlaying = ref(false)
|
|
|
const viewerVideoPlaying = ref(false)
|
|
|
|
|
|
-// 手风琴组件状态
|
|
|
-const activeAccordion = ref(0)
|
|
|
+// 技术亮点选中状态
|
|
|
+const activeHighlight = ref(null)
|
|
|
+// 当前图集的图片索引
|
|
|
+const activeImageIndex = ref(0)
|
|
|
+
|
|
|
+// 当前选中的技术亮点
|
|
|
+const currentHighlight = computed(() => {
|
|
|
+ if (activeHighlight.value !== null) {
|
|
|
+ const highlights = Object.values(currentProject.value.technicalHighlights)
|
|
|
+ return highlights[activeHighlight.value]
|
|
|
+ }
|
|
|
+ return null
|
|
|
+})
|
|
|
+
|
|
|
+// 处理技术亮点点击
|
|
|
+const handleHighlightClick = (index) => {
|
|
|
+ activeHighlight.value = index
|
|
|
+ activeImageIndex.value = 0 // 切换分类时重置图片索引
|
|
|
+}
|
|
|
|
|
|
-// 鼠标悬停触发面板展开（手风琴模式自动收起其他）
|
|
|
-const handleItemHover = (key) => {
|
|
|
- activeAccordion.value = key
|
|
|
+// 处理图片点击
|
|
|
+const handleImageClick = (index) => {
|
|
|
+ activeImageIndex.value = index
|
|
|
}
|
|
|
|
|
|
// 控制案例展示视频播放
|
|
|
@@ -503,14 +548,27 @@ const handleViewerVideoPause = () => {
|
|
|
viewerVideoPlaying.value = false
|
|
|
}
|
|
|
|
|
|
-// 当前选中的案例索引（默认显示视频）
|
|
|
-const selectedCaseIndex = ref(3)
|
|
|
+// 当前选中的案例索引（自动判断是否有视频）
|
|
|
+const selectedCaseIndex = ref(null)
|
|
|
|
|
|
// 当前选中的案例
|
|
|
const selectedCase = computed(() => {
|
|
|
+ // 如果已经手动选择了案例，直接返回
|
|
|
if (selectedCaseIndex.value !== null && currentProject.value.caseStudies[selectedCaseIndex.value]) {
|
|
|
return currentProject.value.caseStudies[selectedCaseIndex.value]
|
|
|
}
|
|
|
+
|
|
|
+ // 自动判断：如果有视频案例，返回第一个视频案例
|
|
|
+ const videoCase = currentProject.value.caseStudies.find(caseItem => caseItem.type === 'video')
|
|
|
+ if (videoCase) {
|
|
|
+ return videoCase
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果没有视频案例，返回第一个图片案例
|
|
|
+ if (currentProject.value.caseStudies.length > 0) {
|
|
|
+ return currentProject.value.caseStudies[0]
|
|
|
+ }
|
|
|
+
|
|
|
return null
|
|
|
})
|
|
|
|
|
|
@@ -949,173 +1007,354 @@ const goToHome = () => {
|
|
|
/* 技术亮点 */
|
|
|
.technical-highlights {
|
|
|
background: white;
|
|
|
- padding: 2rem;
|
|
|
- border-radius: 16px;
|
|
|
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
|
- margin-bottom: 2rem;
|
|
|
+ padding: 1.5rem;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
}
|
|
|
|
|
|
-/* 横向手风琴容器 */
|
|
|
-.horizontal-accordion-container {
|
|
|
- width: 100%;
|
|
|
- height: 400px;
|
|
|
+/* 技术亮点容器 */
|
|
|
+.highlights-container {
|
|
|
display: flex;
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
- border-radius: 8px;
|
|
|
- overflow: hidden;
|
|
|
- margin-top: 1.5rem;
|
|
|
- background: #fff;
|
|
|
+ gap: 0.75rem;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ min-height: 500px;
|
|
|
}
|
|
|
|
|
|
-/* 单个手风琴项 */
|
|
|
-.accordion-item {
|
|
|
- flex: 1;
|
|
|
- min-width: 150px;
|
|
|
- max-width: 150px;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- background-repeat: no-repeat;
|
|
|
- border-right: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
- transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
+/* 左侧菜单 */
|
|
|
+.highlights-menu {
|
|
|
+ width: 14%;
|
|
|
+ max-width: 170px;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0.375rem;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0.125rem;
|
|
|
+}
|
|
|
+
|
|
|
+/* 菜单项目 */
|
|
|
+.menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0.5rem 0.625rem;
|
|
|
+ background: white;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ border: 1px solid transparent;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
+ font-size: 0.85rem;
|
|
|
}
|
|
|
|
|
|
-/* 为每个手风琴项设置不同的背景图片 */
|
|
|
-.accordion-item:nth-child(1) {
|
|
|
- background-image: url('@/assets/images/太浦河全景2.png');
|
|
|
+.menu-item::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 0;
|
|
|
+ background: linear-gradient(90deg, rgba(50, 110, 226, 0.1), rgba(50, 110, 226, 0));
|
|
|
+ transition: width 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-.accordion-item:nth-child(2) {
|
|
|
- background-image: url('@/assets/images/四预.png');
|
|
|
+.menu-item:hover::before {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
|
|
|
-.accordion-item:nth-child(3) {
|
|
|
- background-image: url('@/assets/images/历史洪水.png');
|
|
|
+.menu-item:hover {
|
|
|
+ background: #f0f5ff;
|
|
|
+ border-color: #326ee2;
|
|
|
+ transform: translateX(4px);
|
|
|
+ box-shadow: 0 2px 8px rgba(50, 110, 226, 0.2);
|
|
|
}
|
|
|
|
|
|
-.accordion-item:nth-child(4) {
|
|
|
- background-image: url('@/assets/images/抗咸保供.png');
|
|
|
+.menu-item.active {
|
|
|
+ background: #326ee2;
|
|
|
+ color: white;
|
|
|
+ border-color: #326ee2;
|
|
|
+ box-shadow: 0 4px 12px rgba(50, 110, 226, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.menu-item.active::before {
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
|
|
|
}
|
|
|
|
|
|
-/* 背景图片增强文字可读性 */
|
|
|
-.accordion-item::before {
|
|
|
+.menu-icon {
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.menu-item span {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 缩略图小图集 */
|
|
|
+.thumbnail-gallery {
|
|
|
+ display: flex;
|
|
|
+ gap: 0.25rem;
|
|
|
+ margin-top: 0.5rem;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding-bottom: 0.125rem;
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: #326ee2 #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-gallery::-webkit-scrollbar {
|
|
|
+ height: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-gallery::-webkit-scrollbar-track {
|
|
|
+ background: #f0f0f0;
|
|
|
+ border-radius: 1.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-gallery::-webkit-scrollbar-thumb {
|
|
|
+ background: #326ee2;
|
|
|
+ border-radius: 1.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-gallery::-webkit-scrollbar-thumb:hover {
|
|
|
+ background: #64b5f6;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-item {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 70px;
|
|
|
+ height: 45px;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid transparent;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-item:hover {
|
|
|
+ transform: translateY(-1px);
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
|
+ border-color: #64b5f6;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-item.active {
|
|
|
+ border-color: #326ee2;
|
|
|
+ box-shadow: 0 2px 8px rgba(50, 110, 226, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-item.active::after {
|
|
|
content: '';
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
- background: linear-gradient(to right, rgba(0, 0, 0, 1), transparent); /* 渐变黑色到透明，左侧完全不透明 */
|
|
|
- transition: all 0.3s ease;
|
|
|
+ background: rgba(50, 110, 226, 0.1);
|
|
|
}
|
|
|
|
|
|
-.accordion-item:last-child {
|
|
|
- border-right: none;
|
|
|
+.thumbnail-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.thumbnail-item:hover .thumbnail-image {
|
|
|
+ transform: scale(1.1);
|
|
|
}
|
|
|
|
|
|
-/* 手风琴项激活状态（展开） */
|
|
|
-.accordion-item.active {
|
|
|
- flex: 4;
|
|
|
- max-width: none;
|
|
|
+/* 右侧内容 */
|
|
|
+.highlights-content {
|
|
|
+ flex: 1;
|
|
|
+ background: #f8f9fa;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0.5rem;
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
|
|
+ min-height: 480px;
|
|
|
}
|
|
|
|
|
|
-/* 手风琴头部 */
|
|
|
-.accordion-header {
|
|
|
+/* 技术亮点详情 */
|
|
|
+.highlight-detail {
|
|
|
+ width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-image {
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+ position: relative;
|
|
|
+ min-height: 400px;
|
|
|
+ max-height: 450px;
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- padding: 1.5rem;
|
|
|
- text-align: center;
|
|
|
- transition: all 0.3s ease;
|
|
|
- color: white;
|
|
|
- font-weight: 500;
|
|
|
- position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.highlight-image::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.1));
|
|
|
z-index: 1;
|
|
|
}
|
|
|
|
|
|
-.accordion-item:hover .accordion-header {
|
|
|
- background: rgba(255, 255, 255, 0.1);
|
|
|
- color: white;
|
|
|
+.detail-image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
}
|
|
|
|
|
|
-.accordion-item.active .accordion-header {
|
|
|
- opacity: 0;
|
|
|
- visibility: hidden;
|
|
|
- transform: translateX(-100%);
|
|
|
+.highlight-image:hover .detail-image {
|
|
|
+ transform: scale(1.05);
|
|
|
}
|
|
|
|
|
|
-.collapse-icon {
|
|
|
- color: white;
|
|
|
- font-size: 1.5rem;
|
|
|
- margin-bottom: 1rem;
|
|
|
- transition: transform 0.3s ease;
|
|
|
+/* 响应式设计 */
|
|
|
+@media (max-width: 768px) {
|
|
|
+ .highlights-container {
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 450px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlights-menu {
|
|
|
+ width: 100%;
|
|
|
+ max-width: none;
|
|
|
+ flex-direction: row;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ white-space: nowrap;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlights-content {
|
|
|
+ min-height: 380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-detail {
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-image {
|
|
|
+ min-height: 320px;
|
|
|
+ max-height: 380px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail-item {
|
|
|
+ width: 70px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.accordion-item:hover .collapse-icon {
|
|
|
- transform: scale(1.1);
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .technical-highlights {
|
|
|
+ padding: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-content {
|
|
|
+ padding: 0.75rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-image {
|
|
|
+ min-height: 250px;
|
|
|
+ max-height: 300px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail-item {
|
|
|
+ width: 60px;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ padding: 0.625rem 0.75rem;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-icon {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-/* 手风琴内容 */
|
|
|
-.accordion-content {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 150px;
|
|
|
- height: 100%;
|
|
|
- width: calc(100% - 150px);
|
|
|
- padding: 2rem;
|
|
|
- opacity: 0;
|
|
|
- visibility: hidden;
|
|
|
- transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
|
- overflow-y: auto;
|
|
|
+.highlight-info {
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
-.accordion-item.active .accordion-content {
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- opacity: 1;
|
|
|
- visibility: visible;
|
|
|
+.detail-title {
|
|
|
+ font-size: 1.75rem;
|
|
|
+ color: #2c3e50;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 1.4;
|
|
|
}
|
|
|
|
|
|
-.collapse-description {
|
|
|
- font-size: 1rem;
|
|
|
- color: white;
|
|
|
- line-height: 1.8;
|
|
|
+.detail-description {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ color: #7f8c8d;
|
|
|
margin-bottom: 1.5rem;
|
|
|
- font-weight: 400;
|
|
|
+ line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
-.collapse-features {
|
|
|
+.detail-features {
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
-.collapse-features li {
|
|
|
+.detail-features li {
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
- gap: 0.75rem;
|
|
|
- font-size: 0.95rem;
|
|
|
- color: white;
|
|
|
- padding: 0.75rem 0;
|
|
|
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ gap: 0.5rem;
|
|
|
+ margin-bottom: 0.75rem;
|
|
|
+ font-size: 1rem;
|
|
|
+ color: #34495e;
|
|
|
line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
-.collapse-features li:last-child {
|
|
|
- border-bottom: none;
|
|
|
-}
|
|
|
-
|
|
|
.feature-icon {
|
|
|
- color: #28a745;
|
|
|
- font-size: 0.9rem;
|
|
|
- margin-top: 0.2rem;
|
|
|
+ margin-top: 0.25rem;
|
|
|
+ color: #326ee2;
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
|
|
|
+/* 无选择状态 */
|
|
|
+.no-selection {
|
|
|
+ text-align: center;
|
|
|
+ color: #7f8c8d;
|
|
|
+}
|
|
|
+
|
|
|
+.no-selection-icon {
|
|
|
+ font-size: 4rem;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ color: #bdc3c7;
|
|
|
+}
|
|
|
+
|
|
|
+.no-selection p {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
/* 项目成果 */
|
|
|
.project-achievements {
|
|
|
margin-bottom: 2rem;
|
|
|
@@ -1767,6 +2006,51 @@ const goToHome = () => {
|
|
|
padding: 2rem;
|
|
|
}
|
|
|
|
|
|
+ /* 技术亮点区域响应式调整 */
|
|
|
+ .highlights-container {
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlights-menu {
|
|
|
+ width: 100%;
|
|
|
+ max-width: none;
|
|
|
+ flex-direction: row;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding: 0.5rem;
|
|
|
+ gap: 0.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item {
|
|
|
+ padding: 0.75rem 1rem;
|
|
|
+ white-space: nowrap;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item:hover {
|
|
|
+ transform: translateY(-3px);
|
|
|
+ translateX: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlights-content {
|
|
|
+ min-height: 300px;
|
|
|
+ padding: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight-image {
|
|
|
+ margin-bottom: 1.5rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-image {
|
|
|
+ min-height: 250px;
|
|
|
+ max-height: 350px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .thumbnail-item {
|
|
|
+ width: 100px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
.features-grid,
|
|
|
.case-study-grid {
|
|
|
grid-template-columns: 1fr;
|
BAI
