fengjun/ag-index
1
0
Fork 0
Code Activity

团建

Browse Source
This commit is contained in:
fengjun
2025-12-19 13:37:06 +08:00
parent 4f88a8441a
commit d8e72093ee
1 changed files with 188 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

277
culture.html
View File

@@ -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 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>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
</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>