From d8e72093eebf5a534f98fd2177c9fa3ab2e68625 Mon Sep 17 00:00:00 2001
From: fengjun <jianrenjun8798@gmail.com>
Date: Fri, 19 Dec 2025 13:37:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=A2=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 culture.html | 281 ++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 188 insertions(+), 93 deletions(-)

diff --git a/culture.html b/culture.html
index 42e8e8b..66306db 100644
--- a/culture.html
+++ b/culture.html
@@ -24,6 +24,60 @@
     <link href="assets/css/jquery.fancybox.css" rel="stylesheet">
     <link href="assets/css/style.css" rel="stylesheet">
 
+    <style>
+        /* 视差 Banner */
+        .culture-hero { position: relative; height: 400px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
+        .culture-hero .bg { position: absolute; top: -50px; left: 0; width: 100%; height: calc(100% + 100px); background: url('assets/images/page-title6.png') center/cover; will-change: transform; }
+        .culture-hero .overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20,129,255,0.85), rgba(10,23,43,0.9)); }
+        .culture-hero .content { position: relative; z-index: 2; text-align: center; color: #fff; }
+        .culture-hero h1 { font-size: 48px; font-weight: 700; margin-bottom: 15px; opacity: 0; transform: translateY(30px); animation: heroIn 0.8s 0.2s forwards; }
+        .culture-hero p { font-size: 18px; opacity: 0.9; max-width: 600px; margin: 0 auto; opacity: 0; transform: translateY(20px); animation: heroIn 0.8s 0.4s forwards; }
+        @keyframes heroIn { to { opacity: 1; transform: translateY(0); } }
+
+        /* 筛选标签 */
+        .filter-tabs { text-align: center; margin: 40px 0 30px; }
+        .filter-tabs .tab { display: inline-block; padding: 10px 24px; margin: 5px; border-radius: 30px; background: #f5f7fa; color: #666; cursor: pointer; transition: all 0.3s; font-weight: 500; }
+        .filter-tabs .tab:hover, .filter-tabs .tab.active { background: linear-gradient(135deg, #1481ff, #0066dd); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 20px rgba(20,129,255,0.3); }
+
+        /* 瀑布流网格 */
+        .culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; padding: 0 15px; }
+        @media(max-width:991px) { .culture-grid { grid-template-columns: repeat(2, 1fr); } }
+        @media(max-width:576px) { .culture-grid { grid-template-columns: 1fr; } }
+
+        /* 卡片 */
+        .culture-card { position: relative; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.08); cursor: pointer; opacity: 0; transform: translateY(40px); transition: opacity 0.6s, transform 0.6s, box-shadow 0.4s; }
+        .culture-card.visible { opacity: 1; transform: translateY(0); }
+        .culture-card.large { grid-column: span 2; }
+        @media(max-width:576px) { .culture-card.large { grid-column: span 1; } }
+        .culture-card:hover { box-shadow: 0 20px 60px rgba(20,129,255,0.2); transform: translateY(-8px) scale(1.02); }
+        .culture-card.hidden { opacity: 0; transform: scale(0.8); pointer-events: none; position: absolute; }
+
+        /* 图片容器 */
+        .culture-card .img-wrap { position: relative; overflow: hidden; height: 220px; }
+        .culture-card.large .img-wrap { height: 300px; }
+        .culture-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
+        .culture-card:hover .img-wrap img { transform: scale(1.1); }
+        .culture-card .img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,23,43,0.7) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; }
+        .culture-card:hover .img-wrap::after { opacity: 1; }
+
+        /* 标签徽章 */
+        .culture-card .badge { position: absolute; top: 15px; left: 15px; padding: 6px 14px; border-radius: 20px; background: rgba(255,255,255,0.95); color: #1481ff; font-size: 12px; font-weight: 600; z-index: 2; backdrop-filter: blur(5px); }
+
+        /* 卡片信息 */
+        .culture-card .info { padding: 20px; }
+        .culture-card .info h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: #102541; transition: color 0.3s; }
+        .culture-card:hover .info h4 { color: #1481ff; }
+        .culture-card .info .meta { font-size: 13px; color: #888; display: flex; align-items: center; gap: 5px; }
+        .culture-card .info .meta i { color: #1481ff; }
+
+        /* 查看图标 */
+        .culture-card .view-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 60px; height: 60px; background: #1481ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; transition: transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275); z-index: 3; }
+        .culture-card:hover .view-icon { transform: translate(-50%, -50%) scale(1); }
+
+        /* 3D 倾斜效果 */
+        .culture-card { transform-style: preserve-3d; perspective: 1000px; }
+    </style>
+
     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
@@ -66,94 +120,94 @@
         </section>        
         <!-- end page-title -->
 
+        <!-- 筛选标签 -->
+        <div class="filter-tabs">
+            <span class="tab active" data-filter="all">全部活动</span>
+            <span class="tab" data-filter="travel">旅行</span>
+            <span class="tab" data-filter="sport">运动</span>
+            <span class="tab" data-filter="party">聚餐</span>
+            <span class="tab" data-filter="holiday">节日</span>
+        </div>
 
-        <!-- start service-single-section -->
-        <section class=" blog-pg-section service-single-section section-padding">
+        <!-- 活动卡片网格 -->
+        <section class="section-padding">
             <div class="container">
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="col col-xs-12">
-                            <div class="mission-vision-grids clearfix">
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/3.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>泰山+曲阜旅行</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/12.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>海边音乐餐厅聚餐</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/11.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>真人cs比赛</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/10.JPG" alt  style="height: 180px">
-                                    </div>
-                                    <h4>第一届篮球比赛</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                <div class="img-holder">
-                                    <img src="assets/images/about/4.jpg" alt  style="height: 180px">
-                                </div>
-                                <h4>养马岛徒步18公里越野赛</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/1.jpg"  alt style="height: 180px">
-                                    </div>
-                                    <h4>女神节插画活动</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/2.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>密室逃脱女士场</h4>
-                                </div>
-
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/6.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>沂蒙山旅游</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/7.png" alt  style="height: 180px">
-                                    </div>
-                                    <h4>河南云台山旅游</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/8.jpg" alt  style="height: 180px">
-                                    </div>
-                                    <h4>轰趴+烧烤团建活动</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/13.JPG" alt  style="height: 180px">
-                                    </div>
-                                    <h4>三八妇女节家属暖心送礼品</h4>
-                                </div>
-                                <div class="grid col-md-4 bottom">
-                                    <div class="img-holder">
-                                        <img src="assets/images/about/14.JPG" alt  style="height: 180px">
-                                    </div>
-                                    <h4>公司素质拓展训练</h4>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div> <!-- end row -->
-            </div> <!-- end container -->
+                <div class="culture-grid" id="cultureGrid">
+                    <a class="culture-card" data-category="travel" href="assets/images/about/3.jpg" data-fancybox="gallery">
+                        <span class="badge">旅行</span>
+                        <div class="img-wrap"><img src="assets/images/about/3.jpg" alt="泰山+曲阜旅行"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>泰山+曲阜旅行</h4><div class="meta"><i class="ti-location-pin"></i>山东泰安</div></div>
+                    </a>
+                    <a class="culture-card" data-category="party" href="assets/images/about/12.jpg" data-fancybox="gallery">
+                        <span class="badge">聚餐</span>
+                        <div class="img-wrap"><img src="assets/images/about/12.jpg" alt="海边音乐餐厅聚餐"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>海边音乐餐厅聚餐</h4><div class="meta"><i class="ti-location-pin"></i>烟台海边</div></div>
+                    </a>
+                    <a class="culture-card" data-category="sport" href="assets/images/about/11.jpg" data-fancybox="gallery">
+                        <span class="badge">运动</span>
+                        <div class="img-wrap"><img src="assets/images/about/11.jpg" alt="真人cs比赛"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>真人CS比赛</h4><div class="meta"><i class="ti-game"></i>团队竞技</div></div>
+                    </a>
+                    <a class="culture-card" data-category="sport" href="assets/images/about/10.JPG" data-fancybox="gallery">
+                        <span class="badge">运动</span>
+                        <div class="img-wrap"><img src="assets/images/about/10.JPG" alt="第一届篮球比赛"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>第一届篮球比赛</h4><div class="meta"><i class="ti-cup"></i>体育竞技</div></div>
+                    </a>
+                    <a class="culture-card" data-category="sport" href="assets/images/about/4.jpg" data-fancybox="gallery">
+                        <span class="badge">运动</span>
+                        <div class="img-wrap"><img src="assets/images/about/4.jpg" alt="养马岛徒步18公里越野赛"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>养马岛徒步18公里越野赛</h4><div class="meta"><i class="ti-flag-alt"></i>户外挑战</div></div>
+                    </a>
+                    <a class="culture-card" data-category="holiday" href="assets/images/about/1.jpg" data-fancybox="gallery">
+                        <span class="badge">节日</span>
+                        <div class="img-wrap"><img src="assets/images/about/1.jpg" alt="女神节插画活动"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>女神节插画活动</h4><div class="meta"><i class="ti-heart"></i>三八女神节</div></div>
+                    </a>
+                    <a class="culture-card" data-category="party" href="assets/images/about/2.jpg" data-fancybox="gallery">
+                        <span class="badge">聚餐</span>
+                        <div class="img-wrap"><img src="assets/images/about/2.jpg" alt="密室逃脱女士场"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>密室逃脱女士场</h4><div class="meta"><i class="ti-key"></i>益智娱乐</div></div>
+                    </a>
+                    <a class="culture-card" data-category="travel" href="assets/images/about/6.jpg" data-fancybox="gallery">
+                        <span class="badge">旅行</span>
+                        <div class="img-wrap"><img src="assets/images/about/6.jpg" alt="沂蒙山旅游"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>沂蒙山旅游</h4><div class="meta"><i class="ti-location-pin"></i>山东临沂</div></div>
+                    </a>
+                    <a class="culture-card" data-category="travel" href="assets/images/about/7.png" data-fancybox="gallery">
+                        <span class="badge">旅行</span>
+                        <div class="img-wrap"><img src="assets/images/about/7.png" alt="河南云台山旅游"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>河南云台山旅游</h4><div class="meta"><i class="ti-location-pin"></i>河南焦作</div></div>
+                    </a>
+                    <a class="culture-card" data-category="party" href="assets/images/about/8.jpg" data-fancybox="gallery">
+                        <span class="badge">聚餐</span>
+                        <div class="img-wrap"><img src="assets/images/about/8.jpg" alt="轰趴+烧烤团建活动"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>轰趴+烧烤团建活动</h4><div class="meta"><i class="ti-home"></i>团队聚会</div></div>
+                    </a>
+                    <a class="culture-card" data-category="holiday" href="assets/images/about/13.JPG" data-fancybox="gallery">
+                        <span class="badge">节日</span>
+                        <div class="img-wrap"><img src="assets/images/about/13.JPG" alt="三八妇女节家属暖心送礼品"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>三八妇女节家属暖心送礼品</h4><div class="meta"><i class="ti-gift"></i>员工关怀</div></div>
+                    </a>
+                    <a class="culture-card" data-category="sport" href="assets/images/about/14.JPG" data-fancybox="gallery">
+                        <span class="badge">运动</span>
+                        <div class="img-wrap"><img src="assets/images/about/14.JPG" alt="公司素质拓展训练"></div>
+                        <div class="view-icon"><i class="ti-fullscreen"></i></div>
+                        <div class="info"><h4>公司素质拓展训练</h4><div class="meta"><i class="ti-flag-alt"></i>团队建设</div></div>
+                    </a>
+                </div>
+            </div>
         </section>
-        <!-- end service-single-section -->
 
 
         <!-- start site-footer -->
@@ -169,19 +223,60 @@
     <script src="assets/js/jquery-1.10.2.js"></script>
     <script src="assets/js/bootstrap.min.js"></script>
     <script type="text/javascript">
-
         $("#footer").load("footer.html");
         $("#header").load("header.html");
-
-        //如果想要操作header.html中的元素，就得等到header.html加载完成后操作
-        $("#footer").load("footer.html", function(){
-        });
     </script>
     <script src="assets/js/kefu.js"></script>
-    <!-- Plugins for this template -->
     <script src="assets/js/jquery-plugin-collection.js"></script>
-
-    <!-- Custom script for this template -->
     <script src="assets/js/script.js"></script>
+    <script>
+    $(function(){
+        // 视差滚动
+        var $bg = $('#parallaxBg');
+        $(window).on('scroll', function(){
+            var scrolled = $(window).scrollTop();
+            $bg.css('transform', 'translateY(' + scrolled * 0.4 + 'px)');
+        });
+
+        // 滚动显示卡片
+        var observer = new IntersectionObserver(function(entries){
+            entries.forEach(function(entry, i){
+                if(entry.isIntersecting){
+                    setTimeout(function(){ $(entry.target).addClass('visible'); }, i * 100);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {threshold: 0.1});
+        $('.culture-card').each(function(){ observer.observe(this); });
+
+        // 筛选功能
+        $('.filter-tabs .tab').on('click', function(){
+            var filter = $(this).data('filter');
+            $('.filter-tabs .tab').removeClass('active');
+            $(this).addClass('active');
+            $('.culture-card').each(function(){
+                var cat = $(this).data('category');
+                if(filter === 'all' || cat === filter){
+                    $(this).removeClass('hidden').addClass('visible');
+                } else {
+                    $(this).addClass('hidden').removeClass('visible');
+                }
+            });
+        });
+
+        // 3D 倾斜效果
+        $('.culture-card').on('mousemove', function(e){
+            var rect = this.getBoundingClientRect();
+            var x = (e.clientX - rect.left) / rect.width - 0.5;
+            var y = (e.clientY - rect.top) / rect.height - 0.5;
+            $(this).css('transform', 'translateY(-8px) scale(1.02) rotateY(' + x*10 + 'deg) rotateX(' + -y*10 + 'deg)');
+        }).on('mouseleave', function(){
+            $(this).css('transform', '');
+        });
+
+        // Fancybox 初始化
+        if($.fancybox) $('[data-fancybox="gallery"]').fancybox({ loop: true });
+    });
+    </script>
 </body>
 </html>