2025-04-28 18:46:21 +08:00

1045 lines
38 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="baidu-site-verification" content="codeva-oXWASlP547" />
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>龙翔工程咨询集团 </title>
<script src="{dreamer-cms:template /}css/tailwindcss.css"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
<link rel="stylesheet" href="{dreamer-cms:template /}css/font-awesome.css">
<!-- 1. 引入 Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 禁止百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<title>{dreamer-cms:global name="title"/}</title>
<meta name="Keywords" content="{dreamer-cms:global name=" keywords"/}" />
<meta name="Description" content="{dreamer-cms:global name=" describe"/}" />
<link rel="stylesheet" href="{dreamer-cms:template /}css/iconfont/iconfont.css">
<link rel="stylesheet" href="{dreamer-cms:template /}css/reset.css">
<link rel="stylesheet" href="{dreamer-cms:template /}css/animate.css">
<link rel="stylesheet" href="{dreamer-cms:template /}css/style.css">
<link rel="stylesheet" href="{dreamer-cms:template /}scripts/theme/default/layer.css">
<script src="{dreamer-cms:template /}scripts/jquery-1.11.3.min.js"></script>
<script src="{dreamer-cms:template /}scripts/jquery.SuperSlide.2.1.1.js"></script>
<script src="{dreamer-cms:template /}scripts/js.js"></script>
<script src="{dreamer-cms:template /}scripts/layer.js"></script>
<style>
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1605152276897-4f618f831968?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.news-container {
display: flex;
height: 500px;
}
.news-image {
flex: 1;
height: 100%;
overflow: hidden;
position: relative;
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-list {
flex: 1;
height: 100%;
overflow-y: auto;
background: white;
position: relative;
}
.news-item {
padding: 16px;
border-bottom: 1px solid #eee;
transition: all 0.3s ease;
}
.news-item:hover {
background: #f8fafc;
}
.divider {
width: 1px;
background-color: #e5e7eb;
}
.page-item {
display: inline-block;
margin: 0 2px;
}
.page-link {
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
}
.page-link:hover {
background-color: #f1f5f9;
}
.page-link.active {
background-color: #3b82f6;
color: white;
}
.pagination-container {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: white;
padding: 12px;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: center;
}
.view-details {
display: inline-flex;
align-items: center;
color: #3b82f6;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
white-space: nowrap;
}
.view-details:hover {
color: #2563eb;
text-decoration: underline;
}
.view-details i {
margin-left: 4px;
font-size: 0.75rem;
}
.service-card {
transition: all 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
/* .timeline-item:not(:last-child)::after {
下方竖线
content: '';
position: absolute;
left: 50%;
bottom: -20px;
transform: translateX(-50%);
width: 2px;
height: 20px;
background-color: #e5e7eb;
} */
.carousel {
position: relative;
height: 500px;
overflow: hidden;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
height: 100%;
}
.carousel-item {
min-width: 100%;
height: 100%;
position: relative;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
max-width: 100% ;
max-height: 100%;
}
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 30px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
color: white;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
z-index: 10;
}
.carousel-control.prev {
left: 20px;
}
.carousel-control.next {
right: 20px;
}
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.carousel-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.carousel-indicator.active {
background: white;
}
#timeline {
height: 235px;
}
</style>
</head>
<body class="font-sans text-gray-800">
<!-- 导航栏 -->
{dreamer-cms:include file='inc/header.html'/}
<!-- 轮播图 -->
<section class="carousel">
<!-- 加载状态 -->
<div id="carousel-loading" class="loading">
<div class="loading-spinner"></div>
</div>
<!-- 轮播内容 -->
<div id="carousel-inner" class="carousel-inner hidden">
<!-- 轮播项将通过JavaScript动态添加 -->
</div>
<!-- 控制按钮 -->
<div class="carousel-control prev" id="carousel-prev">
<i class="fas fa-chevron-left"></i>
</div>
<div class="carousel-control next" id="carousel-next">
<i class="fas fa-chevron-right"></i>
</div>
<!-- 指示器 -->
<div class="carousel-indicators" id="carousel-indicators">
<!-- 指示器将通过JavaScript动态添加 -->
</div>
</section>
<!-- 新闻动态 - 放在轮播图下方 -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-4">新闻动态</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-gray-600 max-w-3xl mx-auto">了解我们的最新动态和资讯</p>
</div>
<div class="news-container bg-white rounded-lg shadow-md overflow-hidden">
<!-- 左侧新闻图片 -->
{dreamer-cms:list typeid="zac9idyl" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="news-image">
<img src="[field:litpic/]" alt="新闻图片">
<div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black to-transparent text-white">
<div class="text-sm text-gray-300 mb-2">
<span>[field:showtime function="format('yyyy-MM-dd HH:mm:ss')" /]</span>
<!-- <span class="mx-2">|</span>
<span>公司新闻</span> -->
</div>
<h3 class="text-xl font-bold mb-3">[field:title/]</h3>
<a href="[field:arcurl/]" class="view-details">
阅读更多 <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
{/dreamer-cms:list}
<!-- 分割线 -->
<div class="divider"></div>
<!-- 右侧新闻列表 -->
<div class="news-list">
<div id="news-list-content">
<!-- News items will be dynamically inserted here -->
</div>
<div class="pagination-container">
<nav>
<ul class="pagination flex" id="pagination">
<!-- Pagination will be dynamically inserted here -->
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<section class="flex flex-col md:flex-row w-full max-w-[1480px] mx-auto gap-8 py-12">
<!-- 左侧区块 -->
<div class="bg-white rounded-xl shadow-md overflow-hidden flex-1 flex flex-col">
<div class="p-6 border-b">
<h3 class="text-xl font-semibold text-gray-700 mb-4">招采信息</h3>
<!-- 表格容器修改 -->
<div class="overflow-hidden"> <!-- 移除滚动条 -->
<table class="w-full table-auto">
<colgroup>
<col span="1" style="width: 70%;">
<col span="1" style="width: 30%;">
</colgroup>
<tbody class="divide-y divide-gray-100">
{dreamer-cms:list typeid="c44273d2" pagenum="1" pagesize="5" cascade="true" sortBy="show_time" sortWay="desc"}
<tr class="hover:bg-gray-50">
<!-- 修改后的单元格 -->
<td class="px-6 py-4 font-medium text-gray-800 text-lg max-w-[30ch] truncate break-words">
[field:title/]
</td>
<td class="px-6 py-4 text-gray-600 text-lg max-w-[30ch] truncate">
[field:showtime function="format('yyyy-MM-dd')" /]
</td>
</tr>
<!-- 其他行保持相同结构 -->
{/dreamer-cms:list}
</tbody>
</table>
</div>
<div class="pt-4 flex justify-end">
<a href="/list-c44273d2/gongsixinwen/1/10">
<button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-lg">
显示更多
</button>
</a>
</div>
</div>
</div>
<!-- 右侧区块(相同修改) -->
<div class="bg-white rounded-xl shadow-md overflow-hidden flex-1 flex flex-col">
<div class="p-6 border-b">
<h3 class="text-xl font-semibold text-gray-700 mb-4">政策法规</h3>
<!-- 表格容器修改 -->
<div class="overflow-hidden"> <!-- 移除滚动条 -->
<table class="w-full table-auto">
<colgroup>
<col span="1" style="width: 70%;">
<col span="1" style="width: 30%;">
</colgroup>
<tbody class="divide-y divide-gray-100">
{dreamer-cms:list typeid="gez4xw34" pagenum="1" pagesize="5" cascade="true" sortBy="show_time" sortWay="desc"}
<tr class="hover:bg-gray-50">
<!-- 修改后的单元格 -->
<td class="px-6 py-4 font-medium text-gray-800 text-lg max-w-[30ch] truncate break-words">
[field:title/]
</td>
<td class="px-6 py-4 text-gray-600 text-lg max-w-[30ch] truncate">
[field:showtime function="format('yyyy-MM-dd')" /]
</td>
</tr>
<!-- 其他行保持相同结构 -->
{/dreamer-cms:list}
</tbody>
</table>
</div>
<div class="pt-4 flex justify-end">
<a href="/list-gez4xw34/ztb/1/10">
<button class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-lg">
显示更多
</button>
</a>
</div>
</div>
</div>
</section>
<!-- 关于我们 -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">关于我们</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-gray-800 text-left text-lg">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龙翔工程咨询集团成立于2005年是一家集工程咨询、投融资咨询、财税鉴证、安全咨询、环保职业卫生、信息化咨询、数据资产、项目管理、勘察设计、监理服务、行业咨询教育为一体的综合性企业。集团管理中心位于北京市西城区集团总部位于青岛西海岸新区现有职工300余人注册类工程师百余人。集团自成立以来始终坚持“专业第一服务第一信誉第一”核心发展理念秉承与恪守“公平、公正、守法”的职业风范为客户提供全方位咨询服务。
</p>
</div>
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<img src="{dreamer-cms:template /}images/photo-1522071820081-009f0129c71c.avif"
alt="关于我们" class="rounded-lg shadow-xl">
</div>
<div class="md:w-1/2">
<h3 class="text-2xl font-bold mb-6">我们的使命与愿景</h3>
<p class="text-gray-600 mb-6">我们致力于通过专业咨询服务推动工程建设行业高质量发展,帮助客户实现项目价值最大化。我们的愿景是成为国内领先的工程咨询企业。</p>
<div class="mb-8">
<div class="flex items-start mb-4">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">20年行业经验</h4>
<p class="text-gray-600">深耕工程咨询行业20年积累了丰富的项目经验</p>
</div>
</div>
<div class="flex items-start mb-4">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">300+客户信赖</h4>
<p class="text-gray-600">服务超过300家企业客户获得一致好评</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-2 rounded-full mr-4">
<i class="fas fa-check text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">80+专业团队</h4>
<p class="text-gray-600">拥有80多名注册咨询工程师、造价工程师等专业人才</p>
</div>
</div>
</div>
<!-- <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">了解更多</button> -->
</div>
</div>
</div>
</section>
<!-- 服务项目 -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-gray-600 max-w-3xl mx-auto">我们提供全方位的工程咨询服务,助力项目顺利实施</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-project-diagram text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">全过程工程咨询</h3>
<p class="text-gray-600 mb-6">提供从项目前期策划到竣工验收的全过程咨询服务</p>
<a href="/list-48385ou5/quanguocheng/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-tasks text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">项目管理服务</h3>
<p class="text-gray-600 mb-6">专业的项目管理团队,确保项目按计划顺利实施</p>
<a href="/list-48385ou5/quanguocheng/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-calculator text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">工程造价咨询</h3>
<p class="text-gray-600 mb-6">专业的造价控制服务,优化项目投资效益</p>
<a href="/list-0723u098/zjzx/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-search text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">BIM咨询</h3>
<p class="text-gray-600 mb-6">BIM咨询赋能智建高效协同</p>
<a href="/list-5dwqhes7/bim/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-file-contract text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">工程监理服务</h3>
<p class="text-gray-600 mb-6">专业的工程监理团队,确保工程质量达标</p>
<a href="/list-v35683wr/gcjl/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-solid fa-user text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">资金申请</h3>
<p class="text-gray-600 mb-6">精准资金规划,体现服务价值</p>
<a href="/list-fjr7p75l/zjsq/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fal fa-city text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">勘察设计</h3>
<p class="text-gray-600 mb-6">精勘设计先行,赋能工程科学决策</p>
<a href="/list-32n9y542/kcsj/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">安全咨询</h3>
<p class="text-gray-600 mb-6">专业安全咨询,护航工程零风险</p>
<a href="/list-8q398bn8/aqzx/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
<div class="service-card bg-white p-8 rounded-lg shadow-md">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-desktop text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4">信息化咨询</h3>
<p class="text-gray-600 mb-6">智能信息化,赋能工程高效决策</p>
<a href="/list-10o2ipu3/xxh/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a>
</div>
</div>
</div>
</section>
<!-- 发展历程 -->
<section class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">发展历程</h2>
<div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<p class="text-gray-600 max-w-3xl mx-auto">从初创探索到行业标杆,多年深耕工程行业,以创新破局,用专业赋能,见证每一次突破与跨越。</p>
</div>
<div class="relative">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md">
<div
class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">
2005</div>
<h3 class="text-xl font-bold mb-3 text-center">公司成立</h3>
<p class="text-gray-600 text-center">龙翔项目管理有限公司成立、会计师事务所成立,公司在行业内崭露头角、树立品牌形象</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md">
<div
class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">
2015</div>
<h3 class="text-xl font-bold mb-3 text-center">蓬勃发展</h3>
<p class="text-gray-600 text-center">公司进入蓬勃发展的黄金时代市场占有率高达30%,用户满意度较高</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md">
<div class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">2018</div>
<h3 class="text-xl font-bold mb-3 text-center">资质升级</h3>
<p class="text-gray-600 text-center">公司造价咨询资质升级为甲级取得工程咨询资质在省内外20多个城市设立分公司</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md" id="timeline">
<div
class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">
2019</div>
<h3 class="text-xl font-bold mb-3 text-center">多核驱动</h3>
<p class="text-gray-600 text-center">公司总部搬迁到青岛、并在北京成立集团管理中心,形成青岛、北京、海南、兰州、杭州五大集团管理中心辐射服务全国</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md" id="timeline">
<div
class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">
2020</div>
<h3 class="text-xl font-bold mb-3 text-center">转型升级</h3>
<p class="text-gray-600 text-center">公司转型成为工程项目全生命周期提供工程服务的专业化、数字化、平台化集团公司</p>
</div>
</div>
<div class="timeline-item relative">
<div class="bg-white p-6 rounded-lg shadow-md" id="timeline">
<div class="bg-blue-600 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4 mx-auto">2023</div>
<h3 class="text-xl font-bold mb-3 text-center">战略纵深</h3>
<p class="text-gray-600 text-center">公司伴随“一带一路”走出中国,形成了植根山东、服务全国、辐射全球的服务网络</p>
</div>
</div>
</div>
</div>
</div>
</section>
{dreamer-cms:include file="inc/footer.html" /}
<script>
// var user = [[{dreamer-cms:list typeid="6j0r9qzq" pagenum="1" pagesize="1" cascade="true"/}]];
// Sample news data for engineering consulting company
const newsData = [
// {
// date: "2023-05-28",
// category: "行业动态",
// title: "2023年工程咨询行业发展论坛在京举行"
// },
// {
// date: "2023-05-10",
// category: "技术前沿",
// title: "BIM技术在大型工程项目中的应用研讨会圆满结束"
// },
// {
// date: "2023-04-22",
// category: "公司新闻",
// title: "我司荣获2023年度优秀工程咨询企业称号"
// },
// {
// date: "2023-03-15",
// category: "行业动态",
// title: "2023年第一季度工程咨询行业发展报告发布"
// },
// {
// date: "2023-02-28",
// category: "技术前沿",
// title: "新型建筑材料在工程中的应用研讨会成功举办"
// },
// {
// date: "2023-01-15",
// category: "行业动态",
// title: "2023年工程咨询行业发展趋势分析"
// },
// {
// date: "2022-12-10",
// category: "公司新闻",
// title: "我司与某大型建筑集团达成战略合作协议"
// },
// {
// date: "2022-11-25",
// category: "技术前沿",
// title: "绿色建筑技术应用研讨会成功举办"
// },
// {
// date: "2022-10-18",
// category: "行业动态",
// title: "2022年第三季度工程咨询行业发展报告发布"
// },
// {
// date: "2022-09-05",
// category: "公司新闻",
// title: "我司成功举办2022年度技术交流会"
// }
];
// Pagination variables
const itemsPerPage = 5;
let currentPage = 1;
// 从接口获取新闻数据
async function fetchNewsData() {
try {
// 显示加载状态
document.getElementById('news-list-content').innerHTML = `
<div class="loading">
<div class="loading-spinner"></div>
</div>
`;
// 实际项目中替换为你的真实API地址
const response = await fetch('/getIndexNews', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
// 如果需要认证,可以添加认证头
// 'Authorization': 'Bearer your_token_here'
}
});
if (!response.ok) {
throw new Error('网络响应不正常');
}
const data = await response.json();
// 假设API返回的数据格式为
// {
// success: true,
// data: [
// { date: "2023-06-15", category: "公司新闻", title: "新闻标题1" },
// { date: "2023-06-10", category: "行业动态", title: "新闻标题2" },
// // 更多新闻...
// ]
// }
if (data.code==200) {
return data.data;
} else {
throw new Error(data.message || '获取新闻数据失败');
}
} catch (error) {
console.error('获取新闻数据失败:', error);
// 显示错误信息
document.getElementById('news-list-content').innerHTML = `
<div class="p-8 text-center text-red-500">
<i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
<p>加载新闻失败: ${error.message}</p>
<button onclick="fetchNewsDataAndDisplay()" class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
重试
</button>
</div>
`;
// 返回空数组或默认数据
return [];
}
}
// 获取新闻数据并显示
async function fetchNewsDataAndDisplay() {
const newsData = await fetchNewsData();
// 如果获取数据成功,初始化分页和显示
if (newsData.length > 0) {
// 初始化分页和显示
displayNewsItems(newsData);
setupPagination(newsData);
} else {
// 如果没有数据,显示提示信息
document.getElementById('news-list-content').innerHTML = `
<div class="p-8 text-center text-gray-500">
<i class="fas fa-info-circle text-2xl mb-2"></i>
<p>暂无新闻数据</p>
</div>
`;
}
}
let currentNewsData = [];
// const newsData =await fetchNewsData();
// Function to display news items for current page
function displayNewsItems(newsData) {
const newsListContent = document.getElementById('news-list-content');
newsListContent.innerHTML = '';
currentNewsData = newsData;
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = Math.min(startIndex + itemsPerPage, newsData.length);
const paginatedData = newsData.slice(startIndex, endIndex);
// <span class="mx-2">|</span>
// <span>${item.title}</span>
paginatedData.forEach(item => {
const newsItem = document.createElement('div');
newsItem.className = 'news-item';
newsItem.innerHTML = `
<div class="flex justify-between items-center">
<div class="flex-1 min-w-0">
<div class="text-sm text-gray-500 mb-1">
<span>${item.showTime}</span>
</div>
<h3 class="text-lg font-medium truncate">${item.title}</h3>
</div>
<div class="ml-4 flex-shrink-0">
<a href="article/${item.id}" class="view-details">
查看详情 <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
`;
newsListContent.appendChild(newsItem);
});
}
// Function to setup pagination
function setupPagination(newsData) {
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
const pageCount = Math.ceil(newsData.length / itemsPerPage);
// Previous button
const prevLi = document.createElement('li');
prevLi.className = 'page-item';
prevLi.innerHTML = `
<a class="page-link ${currentPage === 1 ? 'disabled' : ''}" onclick="changePage(${currentPage - 1})">
<i class="fas fa-chevron-left"></i>
</a>
`;
pagination.appendChild(prevLi);
// Page numbers
for (let i = 1; i <= pageCount; i++) {
const li = document.createElement('li');
li.className = 'page-item';
li.innerHTML = `
<a class="page-link ${i === currentPage ? 'active' : ''}" onclick="changePage(${i})">${i}</a>
`;
pagination.appendChild(li);
}
// Next button
const nextLi = document.createElement('li');
nextLi.className = 'page-item';
nextLi.innerHTML = `
<a class="page-link ${currentPage === pageCount ? 'disabled' : ''}" onclick="changePage(${currentPage + 1})">
<i class="fas fa-chevron-right"></i>
</a>
`;
pagination.appendChild(nextLi);
}
// Function to change page
function changePage(page) {
if (page < 1 || page > Math.ceil(currentNewsData.length / itemsPerPage)) return;
currentPage = page;
displayNewsItems(currentNewsData);
setupPagination(currentNewsData);
// Scroll to top of news list
document.getElementById('news-list-content').scrollTop = 0;
}
// 轮播图功能
// 模拟从后台获取轮播图数据
function fetchCarouselData() {
// 这里模拟一个API请求实际项目中应该是fetch或axios请求真实API
return new Promise((resolve) => {
setTimeout(() => {
resolve({
success: true,
data: [
{
id: 1,
imageUrl: "{dreamer-cms:template /}images/carousel/IMG_202504218658_860x482.png",
title: "专业工程咨询服务",
description: "提供全过程工程咨询解决方案,助力项目成功",
link: "#"
},
{
id: 2,
imageUrl: "{dreamer-cms:template /}images/carousel/img_20250427150419.jpg",
title: "专业项目管理服务",
description: "科学管理,确保项目按时按质完成",
link: "#"
},
{
id: 3,
imageUrl: "{dreamer-cms:template /}images/carousel/photo-1486406146926-c627a92ad1ab.jpg",
title: "工程造价咨询服务",
description: "精准造价控制,优化项目投资",
link: "#"
},
{
id: 4,
imageUrl: "{dreamer-cms:template /}images/carousel/photo-1600585154340-be6161a56a0c.jpg",
title: "工程监理服务",
description: "专业监理团队,确保工程质量",
link: "#"
}
]
});
}, 100); // 模拟网络延迟
});
}
// 初始化轮播图
async function initCarousel() {
try {
// 显示加载状态
document.getElementById('carousel-loading').classList.remove('hidden');
// 从后台获取数据
const response = await fetchCarouselData();
if (response.success) {
const carouselData = response.data;
// 渲染轮播图
renderCarousel(carouselData);
// 隐藏加载状态,显示轮播图
document.getElementById('carousel-loading').classList.add('hidden');
document.getElementById('carousel-inner').classList.remove('hidden');
// 初始化轮播图功能
initCarouselFunctionality();
}
} catch (error) {
console.error('获取轮播图数据失败:', error);
// 可以在这里添加错误处理,比如显示错误信息或默认内容
document.getElementById('carousel-loading').innerHTML =
'<p class="text-red-500">加载轮播图失败,请刷新页面重试</p>';
}
}
// 渲染轮播图内容
function renderCarousel(data) {
const carouselInner = document.getElementById('carousel-inner');
const indicatorsContainer = document.getElementById('carousel-indicators');
// 清空现有内容
carouselInner.innerHTML = '';
indicatorsContainer.innerHTML = '';
// 添加轮播项
data.forEach((item, index) => {
const isActive = index === 0 ? 'active' : '';
// 创建轮播项
const carouselItem = document.createElement('div');
carouselItem.className = `carousel-item ${isActive}`;
carouselItem.innerHTML = `
<img id="carousel" src="${item.imageUrl}" alt="${item.title}">
<div class="carousel-caption">
<h2 class="text-3xl font-bold mb-2">${item.title}</h2>
<p class="text-lg">${item.description}</p>
</div>
`;
// 这段原本在div里 <a href="${item.link}" class="inline-block mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition duration-300">了解更多</a> -->
carouselInner.appendChild(carouselItem);
// 创建指示器
const indicator = document.createElement('div');
indicator.className = `carousel-indicator ${isActive}`;
indicator.dataset.index = index;
indicatorsContainer.appendChild(indicator);
});
}
// 初始化轮播图功能
function initCarouselFunctionality() {
const carousel = document.querySelector('.carousel-inner');
const items = document.querySelectorAll('.carousel-item');
const indicators = document.querySelectorAll('.carousel-indicator');
const prevBtn = document.getElementById('carousel-prev');
const nextBtn = document.getElementById('carousel-next');
let currentIndex = 0;
const itemCount = items.length;
let slideInterval;
function updateCarousel() {
carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
// 更新指示器
indicators.forEach((indicator, index) => {
if (index === currentIndex) {
indicator.classList.add('active');
} else {
indicator.classList.remove('active');
}
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % itemCount;
updateCarousel();
}
function prevSlide() {
currentIndex = (currentIndex - 1 + itemCount) % itemCount;
updateCarousel();
}
// 自动轮播
function startAutoSlide() {
slideInterval = setInterval(nextSlide, 5000);
}
// 停止自动轮播
function stopAutoSlide() {
clearInterval(slideInterval);
}
// 事件监听
nextBtn.addEventListener('click', () => {
stopAutoSlide();
nextSlide();
startAutoSlide();
});
prevBtn.addEventListener('click', () => {
stopAutoSlide();
prevSlide();
startAutoSlide();
});
indicators.forEach((indicator) => {
indicator.addEventListener('click', () => {
stopAutoSlide();
currentIndex = parseInt(indicator.dataset.index);
updateCarousel();
startAutoSlide();
});
});
// 鼠标悬停时暂停自动轮播
carousel.addEventListener('mouseenter', stopAutoSlide);
carousel.addEventListener('mouseleave', startAutoSlide);
// 开始自动轮播
startAutoSlide();
}
// 初始化页面
document.addEventListener('DOMContentLoaded', function () {
// 初始化轮播图
initCarousel();
// 初始化新闻列表
// displayNewsItems();
// setupPagination();
// 初始化新闻列表 - 从API获取数据
fetchNewsDataAndDisplay();
});
</script>
</body>
{dreamer-cms:include file="inc/service.html" /}
</html>