288 lines
17 KiB
HTML
288 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="author" content="irstheme">
|
||
|
||
<title> 公司团建 </title>
|
||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||
<meta name="title" content="岸基网络企业文化｜员工团建户外活动团队建设员工关怀纪实 - 岸基网络">
|
||
<meta name="Description" content="岸基网络企业文化页面展示丰富团队活动，包含户外徒步、旅游团建、篮球竞技、真人 CS、节日花艺、轰趴聚餐等员工活动，完善员工福利与人文关怀，打造有温度的港航数字化科技团队。">
|
||
<meta name="Keywords" content="岸基网络企业文化，科技公司团建活动，IT 企业员工关怀，烟台港航企业团队建设，企业户外拓展纪实">
|
||
<link href="assets/css/themify-icons.css" rel="stylesheet">
|
||
<link href="assets/css/flaticon.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="assets/css/bootstrap-3.3.4.css">
|
||
<link href="assets/css/animate.css" rel="stylesheet">
|
||
<link href="assets/css/owl.carousel.css" rel="stylesheet">
|
||
<link href="assets/css/owl.theme.css" rel="stylesheet">
|
||
<link href="assets/css/slick.css" rel="stylesheet">
|
||
<link href="assets/css/slick-theme.css" rel="stylesheet">
|
||
<link href="assets/css/swiper.min.css" rel="stylesheet">
|
||
<link href="assets/css/owl.transitions.css" rel="stylesheet">
|
||
<link href="assets/css/odometer-theme-default.css" rel="stylesheet">
|
||
<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.webp') 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.98); color: #1481ff; font-size: 12px; font-weight: 600; z-index: 2; }
|
||
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
|
||
.culture-card .badge {
|
||
background: rgba(255,255,255,0.95);
|
||
-webkit-backdrop-filter: blur(5px);
|
||
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>
|
||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- start page-wrapper -->
|
||
<div class="page-wrapper">
|
||
|
||
<!-- start preloader -->
|
||
<div class="preloader">
|
||
<div class="sk-folding-cube">
|
||
<div class="sk-cube1 sk-cube"></div>
|
||
<div class="sk-cube2 sk-cube"></div>
|
||
<div class="sk-cube4 sk-cube"></div>
|
||
<div class="sk-cube3 sk-cube"></div>
|
||
</div>
|
||
</div>
|
||
<!-- end preloader -->
|
||
|
||
<!-- Start header -->
|
||
<div id="header"></div>
|
||
<!-- end of header -->
|
||
|
||
|
||
<!-- start page-title -->
|
||
<section class="page-title page-title5 ">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-xs-12">
|
||
<h2>有温度的团队</h2>
|
||
<p>不止有代码和方案，还有球场、烧烤与山海</p>
|
||
</div>
|
||
</div> <!-- end row -->
|
||
</div> <!-- end container -->
|
||
</section>
|
||
<!-- end page-title -->
|
||
|
||
<!-- TAB 选项卡区域 -->
|
||
<div class="service-tab-nav-fullwidth">
|
||
<div class="service-tab-nav">
|
||
<div class="widget service-list-widget">
|
||
<ul>
|
||
<li><a href="contact.html">关于岸基</a></li>
|
||
<li><a href="new.html">新闻动态</a></li>
|
||
<li class="current"><a href="culture.html">团队建设</a></li>
|
||
<li><a href="joinus.html">人才招聘</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 活动卡片网格 -->
|
||
<section class="section-padding">
|
||
<div class="container">
|
||
<div class="culture-grid" id="cultureGrid">
|
||
<a class="culture-card" data-category="travel" href="assets/images/about/3.webp" data-fancybox="gallery">
|
||
<span class="badge">旅行</span>
|
||
<div class="img-wrap"><img src="assets/images/about/3.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">聚餐</span>
|
||
<div class="img-wrap"><img src="assets/images/about/12.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">运动</span>
|
||
<div class="img-wrap"><img src="assets/images/about/11.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">运动</span>
|
||
<div class="img-wrap"><img src="assets/images/about/10.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">运动</span>
|
||
<div class="img-wrap"><img src="assets/images/about/4.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">节日</span>
|
||
<div class="img-wrap"><img src="assets/images/about/1.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">聚餐</span>
|
||
<div class="img-wrap"><img src="assets/images/about/2.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">旅行</span>
|
||
<div class="img-wrap"><img src="assets/images/about/6.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">旅行</span>
|
||
<div class="img-wrap"><img src="assets/images/about/7.png.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">聚餐</span>
|
||
<div class="img-wrap"><img src="assets/images/about/8.webp" 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.webp" data-fancybox="gallery">
|
||
<span class="badge">节日</span>
|
||
<div class="img-wrap"><img src="assets/images/about/13.webp" 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>
|
||
|
||
|
||
<!-- start site-footer -->
|
||
<div id="footer"></div>
|
||
<!-- end site-footer -->
|
||
</div>
|
||
<!-- end of page-wrapper -->
|
||
|
||
|
||
|
||
<!-- All JavaScript files
|
||
================================================== -->
|
||
<script src="assets/js/jquery-1.11.0.js"></script>
|
||
<script src="assets/js/bootstrap.min.js"></script>
|
||
<script type="text/javascript">
|
||
$("#footer").load("footer.html");
|
||
$("#header").load("header.html");
|
||
</script>
|
||
<script src="assets/js/kefu.js"></script>
|
||
<script src="assets/js/jquery-plugin-collection.js"></script>
|
||
<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)');
|
||
});
|
||
|
||
// 滚动显示卡片
|
||
if ('IntersectionObserver' in window) {
|
||
var observer = new IntersectionObserver(function(entries){
|
||
for (var i = 0; i < entries.length; i += 1) {
|
||
if(entries[i].isIntersecting){
|
||
(function(entry, delayIndex){
|
||
setTimeout(function(){ $(entry.target).addClass('visible'); }, delayIndex * 100);
|
||
observer.unobserve(entry.target);
|
||
}(entries[i], i));
|
||
}
|
||
}
|
||
}, {threshold: 0.1});
|
||
$('.culture-card').each(function(){ observer.observe(this); });
|
||
} else {
|
||
$('.culture-card').addClass('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>
|