admin/lx-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交样式

Browse Source
This commit is contained in:
123 2025-04-30 17:10:58 +08:00
parent 30c3549b51
commit 83d35a1e36
1 changed files with 151 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

379
templates/default_v2/index.html
View File

@ -131,27 +131,42 @@
margin-left: 4px; margin-left: 4px;
font-size: 0.75rem; font-size: 0.75rem;
} }
/* 服务card图片显示 */
.service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
background-size: cover;
background-position: center;
transition: opacity 0.3s ease;
}
.service-card { .service-card {
transition: all 0.3s ease; transition: all 0.3s ease;
/* 服务card图片显示 */
position: relative;
z-index: 1;
}
/* 动态样式注入 */
/* 服务card图片显示 */
.service-card::before {
background-image: var(--bg-image);
} }
.service-card:hover { .service-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
} }
/* 服务card图片显示 */
/* .timeline-item:not(:last-child)::after { .service-card:hover::before {
下方竖线 opacity: 0.35;
content: ''; }
position: absolute;
left: 50%;
bottom: -20px;
transform: translateX(-50%);
width: 2px;
height: 20px;
background-color: #e5e7eb;
} */
.carousel { .carousel {
position: relative; position: relative;
@ -239,105 +254,77 @@
height: 235px; height: 235px;
} }
#projectoutdiv { .custom-btn {
position: relative; position: relative;
width: 100%; display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px;
/* 增加左右内边距 */
min-width: 240px;
/* 设置最小宽度 */
font-size: 18px;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
overflow: visible !important;
z-index: 1; z-index: 1;
} }
#projectoutdiv::before { /* 按钮文字 */
content: ""; .btn-text {
position: relative;
z-index: 2;
color: #1a365d;
transition: color 0.3s ease;
text-align: center;
/* 确保文字居中 */
}
/* 动态背景层 */
.btn-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0.2; background: linear-gradient(135deg,
/* 调整这个值改变背景图透明度 (0=全透明, 1=不透明) */ #3b82f6 0%,
z-index: -1; #8b5cf6 100%);
/* 确保背景在内容下方 */ transform: scale(0.95);
/* background-image: url('{dreamer-cms:template /}images/IMG_20250429150832.png'); */ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background-size: cover; /* 新增：确保图片覆盖 */
background-position: center; /* 新增：居中显示 */
}
#projectindiv {
position: relative;
z-index: 1; z-index: 1;
} }
/* 动态调整透明度（配合JavaScript） */
#projectoutdiv:hover::before { /* 悬停动效 */
opacity: 0.35; /* 鼠标悬停时恢复部分清晰度 */ .custom-btn:hover {
transform: translateY(-3px);
} }
.custom-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 40px; /* 增加左右内边距 */
min-width: 240px; /* 设置最小宽度 */
font-size: 18px;
font-weight: 600;
text-decoration: none;
border-radius: 50px;
overflow: visible !important;
z-index: 1;
}
/* 按钮文字 */ .custom-btn:hover .btn-bg {
.btn-text { transform: scale(1);
position: relative; }
z-index: 2;
color: #1a365d;
transition: color 0.3s ease;
text-align: center; /* 确保文字居中 */
}
/* 动态背景层 */ .custom-btn:hover .btn-text {
.btn-bg { color: #f0f8ff;
position: absolute; }
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
#3b82f6 0%,
#8b5cf6 100%
);
transform: scale(0.95);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
}
/* 悬停动效 */ /* 二级按钮样式 */
.custom-btn:hover { .btn-secondary .btn-bg {
transform: translateY(-3px); background: linear-gradient(135deg,
} #10b981 0%,
#34d399 100%);
}
.custom-btn:hover .btn-bg { /* 点击动效 */
transform: scale(1); .custom-btn:active {
} transform: translateY(1px);
}
.custom-btn:hover .btn-text { /* 平台按钮点击动效 */
color: #f0f8ff; #bbb {
} z-index: 3;
}
/* 二级按钮样式 */
.btn-secondary .btn-bg {
background: linear-gradient(135deg,
#10b981 0%,
#34d399 100%
);
}
/* 点击动效 */
.custom-btn:active {
transform: translateY(1px);
}
/* 平台按钮点击动效 */
#bbb {
z-index: 3;
}
</style> </style>
</head> </head>
@ -508,56 +495,65 @@
<section class="py-16 bg-gray-50"> <section class="py-16 bg-gray-50">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-center gap-8 max-w-6xl mx-auto"> <div class="flex flex-col md:flex-row items-center justify-center gap-8 max-w-6xl mx-auto">
<!-- 加长版招采平台按钮 --> <!-- 加长版招采平台按钮 -->
<a href="http://lxjt.lxxmgl.net/trading#/login?activeName=1" target="_blank" class="custom-btn btn-primary"> <a href="http://lxjt.lxxmgl.net/trading#/login?activeName=1" target="_blank"
<span class="btn-bg"></span> class="custom-btn btn-primary">
<i id="bbb" class="fas fa-search text-blue-600 text-2xl fa-1x ml-2 mr-4" style="position: relative;left:-10px"></i> <span class="btn-bg"></span>
<span class="btn-text">进入招采平台</span> <i id="bbb" class="fas fa-search text-blue-600 text-2xl fa-1x ml-2 mr-4"
</a> style="position: relative;left:-10px"></i>
<span class="btn-text">进入招采平台</span>
<!-- 加长版数字平台按钮 --> </a>
<a href="http://lxjt.lxxmgl.net/trading#/login?activeName=1" target="_blank" class="custom-btn btn-secondary">
<span class="btn-bg"></span> <!-- 加长版数字平台按钮 -->
<i id="bbb" class="fas fal fa-city text-blue-600 text-2xl fa-1x ml-2 mr-4"style="position: relative;left:-10px"></i> <a href="http://lxjt.lxxmgl.net/trading#/login?activeName=1" target="_blank"
<span class="btn-text">进入数字平台</span> class="custom-btn btn-secondary">
</a> <span class="btn-bg"></span>
<i id="bbb" class="fas fal fa-city text-blue-600 text-2xl fa-1x ml-2 mr-4"
style="position: relative;left:-10px"></i>
<span class="btn-text">进入数字平台</span>
</a>
</div> </div>
</div> </div>
</section> </section>
<!-- 服务项目 --> <!-- 服务项目 -->
<section class="py-20 bg-gray-50"> <section class="py-20 bg-gray-50">
<div class="container mx-auto px-6"> <div class="container mx-auto px-6">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2> <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> <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
<h><p class="text-gray-600 max-w-3xl mx-auto"><b>我们提供全方位的工程咨询服务，助力项目顺利实施</b></p></h> <h>
<p class="text-gray-600 max-w-3xl mx-auto"><b>我们提供全方位的工程咨询服务，助力项目顺利实施</b></p>
</h>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{dreamer-cms:list typeid="gez4xw34" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"} {dreamer-cms:list typeid="48385ou5" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div id="projectoutdiv" class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="/resources/uploads/20250411/1910576712700710912.png"> <div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div id="projectindiv">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-project-diagram text-blue-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-4"><strong>全过程工程咨询</strong></h3>
<p class="text-gray-600 mb-6"><b>提供从项目前期策划到竣工验收的全过程咨询服务</b></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>
<h3 class="text-xl font-bold mb-4"><strong>全过程工程咨询</strong></h3>
<p class="text-gray-600 mb-6"><b>提供从项目前期策划到竣工验收的全过程咨询服务</b></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>
{/dreamer-cms:list} {/dreamer-cms:list}
<div id="projectoutdiv" class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="/resources/uploads/20250411/1910576712700710912.png"> {dreamer-cms:list typeid="3m1s0813" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div id="projectindiv" class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<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> <i class="fas fa-tasks text-blue-600 text-2xl"></i>
</div> </div>
<h3 class="text-xl font-bold mb-4"><strong>项目管理服务</strong></h3> <h3 class="text-xl font-bold mb-4"><strong>项目管理服务</strong></h3>
<p class="text-gray-600 mb-6"><b>专业的项目管理团队，确保项目按计划顺利实施</b></p> <p class="text-gray-600 mb-6"><b>专业的项目管理团队，确保项目按计划顺利实施</b></p>
<a href="/list-48385ou5/quanguocheng/1/10" class="text-blue-600 font-medium flex items-center"> <a href="/list-3m1s0813/gongchengzixun/1/10" class="text-blue-600 font-medium flex items-center">
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="0723u098" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-calculator text-blue-600 text-2xl"></i>
</div> </div>
@ -567,7 +563,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="5dwqhes7" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-search text-blue-600 text-2xl"></i>
</div> </div>
@ -577,7 +575,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="v35683wr" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-file-contract text-blue-600 text-2xl"></i>
</div> </div>
@ -587,7 +587,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="fjr7p75l" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-solid fa-user text-blue-600 text-2xl"></i>
</div> </div>
@ -597,7 +599,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="32n9y542" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fal fa-city text-blue-600 text-2xl"></i>
</div> </div>
@ -607,7 +611,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="8q398bn8" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-shield-alt text-blue-600 text-2xl"></i>
</div> </div>
@ -617,7 +623,9 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
<div class="service-card bg-white p-8 rounded-lg shadow-md"> {/dreamer-cms:list}
{dreamer-cms:list typeid="10o2ipu3" pagenum="1" pagesize="1" cascade="true" sortBy="show_time" sortWay="desc"}
<div class="service-card bg-white p-8 rounded-lg shadow-md" data-bg-image="[field:litpic/]">
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-6"> <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> <i class="fas fa-desktop text-blue-600 text-2xl"></i>
</div> </div>
@ -627,6 +635,7 @@
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> 了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i>
</a> </a>
</div> </div>
{/dreamer-cms:list}
</div> </div>
</div> </div>
</section> </section>
@ -684,71 +693,6 @@
</div> </div>
</section> </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" /} {dreamer-cms:include file="inc/footer.html" /}
<script> <script>
// var user = [[{dreamer-cms:list typeid="6j0r9qzq" pagenum="1" pagesize="1" cascade="true"/}]]; // var user = [[{dreamer-cms:list typeid="6j0r9qzq" pagenum="1" pagesize="1" cascade="true"/}]];
@ -794,16 +738,6 @@
// date: "2022-11-25", // date: "2022-11-25",
// category: "技术前沿", // category: "技术前沿",
// title: "绿色建筑技术应用研讨会成功举办" // title: "绿色建筑技术应用研讨会成功举办"
// },
// {
// date: "2022-10-18",
// category: "行业动态",
// title: "2022年第三季度工程咨询行业发展报告发布"
// },
// {
// date: "2022-09-05",
// category: "公司新闻",
// title: "我司成功举办2022年度技术交流会"
// } // }
]; ];
@ -1183,29 +1117,18 @@
}); });
} }
// 动态设置服务背景图 // 一次性绑定所有卡片
document.querySelectorAll('.service-card').forEach(card => { document.addEventListener('DOMContentLoaded', () => {
const bgImage = card.dataset.bgImage; document.querySelectorAll('.service-card').forEach(card => {
// 动态设置背景图
// 创建动态样式 const bgImage = card.dataset.bgImage;
const style = document.createElement('style'); card.style.setProperty('--bg-image', `url('${bgImage}')`);
style.textContent = `
#${card.id}::before {
background-image: ${bgImage ? `url('${bgImage}')` : 'none'};
}
`;
// 插入样式并清理旧样式
card.parentNode.insertBefore(style, card);
card._dynamicStyle = style;
});
// 清理函数（可选） // 动态设置悬停透明度（可选）
window.addEventListener('beforeunload', () => { const hoverOpacity = card.dataset.hoverOpacity || 0.35;
document.querySelectorAll('.service-card').forEach(card => { card.style.setProperty('--hover-opacity', hoverOpacity);
if (card._dynamicStyle) card._dynamicStyle.remove(); });
}); });
});
</script> </script>
</body> </body>