fengjun/ag-index
1
0
Fork 0
Code Activity
Files
ddc0af0821fb18b7fc474d24936cb80e2402a1e8
ag-index/culture.html

274 lines
17 KiB
HTML
Raw Normal View History

init:origin
2025-12-11 10:06:21 +08:00
<!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>
<meta name="title" content="烟台岸基网络科技有限公司">
<meta name="Description" content="烟台岸基网络科技有限公司是从事于全程物流链科技服务的互联网软件公司，致力于打造港航企业的互联网生态圈，研发出了航运电子商务平台系统、多码头智能操作系统、全程物流链管理系统等软件产品。">
<meta name="Keywords" content="烟台岸基网络科技有限公司,岸基网络,烟台岸基科技,岸基网络科技,船舶代理管理系统,船代系统,船代软件,货运代理管理系统,货代系统,货代软件,物流平台开发,码头管理系统,航运电子商务平台系统,智慧物流,协同运输,物流平台开发,O2O物流平台,航运">
<link href="assets/css/themify-icons.css" rel="stylesheet">
<link href="assets/css/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="https://www.jq22.com/jquery/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">
团建
2025-12-19 13:37:06 +08:00
<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>
init:origin
2025-12-11 10:06:21 +08:00
<!-- 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 -->
关于我们
2025-12-19 13:48:51 +08:00
<section class="page-title page-title3 ">
init:origin
2025-12-11 10:06:21 +08:00
<div class="container">
<div class="row">
<div class="col col-xs-12">
关于我们
2025-12-19 13:48:51 +08:00
<h2>成就客户 共创辉煌</h2>
<p>与港航企业一起在快速发展的物流行业中共同成长、共创辉煌</p>
init:origin
2025-12-11 10:06:21 +08:00
</div>
</div> <!-- end row -->
</div> <!-- end container -->
关于我们
2025-12-19 13:48:51 +08:00
</section>
init:origin
2025-12-11 10:06:21 +08:00
<!-- end page-title -->
关于我们
2025-12-19 13:48:51 +08:00
<!-- 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>
init:origin
2025-12-11 10:06:21 +08:00
团建
2025-12-19 13:37:06 +08:00
<!-- 活动卡片网格 -->
<section class="section-padding">
init:origin
2025-12-11 10:06:21 +08:00
<div class="container">
团建
2025-12-19 13:37:06 +08:00
<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>
init:origin
2025-12-11 10:06:21 +08:00
</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.10.2.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>
团建
2025-12-19 13:37:06 +08:00
<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); });
// 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>
init:origin
2025-12-11 10:06:21 +08:00
</body>
</html>
Copy Permalink