Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@zw785129
zw785129 authored Nov 26, 2024
1 parent 2989b27 commit bf5a44c
Showing 1 changed file with 139 additions and 61 deletions.
200 changes: 139 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -563,7 +563,7 @@
text-align: center;
}

/* Banner文字大小调整 */
/* Banner文字大小整 */
.banner-content h1 {
font-size: 20px;
padding: 0 15px;
Expand Down Expand Up @@ -808,7 +808,7 @@
gap: 5px;
}

/* 调整二维码按钮容器 */
/* 调整二维按钮容器 */
.qr-wrapper {
margin: 3px 0;
padding: 0;
Expand Down Expand Up @@ -997,7 +997,11 @@
display: flex;
justify-content: space-between;
align-items: center;
position: static; /* 保持静态定位 */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

Expand Down Expand Up @@ -1133,7 +1137,7 @@
/* 添加或修改语言选择器相关的样式 */
.language-selector {
position: relative;
z-index: 1000; /* 确保在轮播图之上 */
z-index: 1000; /* 确在轮播之上 */
}

.language-menu {
Expand Down Expand Up @@ -1320,51 +1324,6 @@
}
}

/* 导航按钮样式优化 */
.nav-btn {
background: linear-gradient(45deg, #2193b0, #6dd5ed);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 15px rgba(33, 147, 176, 0.2);
font-weight: 500;
letter-spacing: 0.5px;
}

.nav-btn:before {
content: '📍'; /* 改用定位图标 */
font-size: 16px;
}

.nav-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(33, 147, 176, 0.3);
background: linear-gradient(45deg, #6dd5ed, #2193b0);
}

.nav-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(33, 147, 176, 0.2);
}

@media (max-width: 768px) {
.nav-btn {
padding: 8px 16px;
font-size: 13px;
}

.nav-btn:before {
font-size: 14px;
}
}

/* 位置信息样式 */
.location-info {
background: rgba(255,255,255,0.1);
Expand Down Expand Up @@ -1398,12 +1357,67 @@
font-size: 14px;
}
}

.slideshow-container {
position: relative;
}

.slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 16px;
border: none;
cursor: pointer;
font-size: 18px;
border-radius: 4px;
transition: background 0.3s;
z-index: 2;
}

.slide-nav:hover {
background: rgba(0, 0, 0, 0.8);
}

.prev {
left: 20px;
}

.next {
right: 20px;
}

.slides-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
}

@media (max-width: 768px) {
.slide-nav {
padding: 12px;
font-size: 16px;
}

.prev {
left: 10px;
}

.next {
right: 10px;
}
}

/* 为了防止内容被固定导航栏遮挡，给 body 添加上边距 */
body {
padding-top: 90px;
}
</style>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<link rel="preconnect" href="https://assets.salesmartly.com">
<link rel="dns-prefetch" href="https://assets.salesmartly.com">
<link rel="preload" href="https://assets.salesmartly.com/chat/widget/code/fonts/iconfont.15dabac4.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
<header>
Expand All @@ -1415,9 +1429,6 @@
<li><a href="#applications" data-translate="nav_applications">应用领域</a></li>
<li><a href="#about" data-translate="nav_about">关于我们</a></li>
<li><a href="#contact" data-translate="nav_contact">联系我们</a></li>
<li class="nav-location">
<button onclick="openNavigation()" class="nav-btn" data-translate="nav_to_us">导航到我们</button>
</li>
<li class="lang-switch">
<div id="language-selector" class="language-selector">
<div class="current-language">
Expand Down Expand Up @@ -1469,6 +1480,10 @@ <h3 data-translate="slide5_title">品质管控体系</h3>
</div>
</div>
</div>

<button class="slide-nav prev" onclick="plusSlides(-1)">&#10094;</button>
<button class="slide-nav next" onclick="plusSlides(1)">&#10095;</button>

<div class="dots-container">
<span class="dot active"></span>
<span class="dot"></span>
Expand Down Expand Up @@ -1546,7 +1561,7 @@ <h3 data-translate="construction_field">建筑领域</h3>
<h3 data-translate="industrial_field">工业领域</h3>
<div class="application-details">
<p><i class="fas fa-angle-right"></i> <span data-translate="industrial_detail1">钢铁冶金造剂</span></p>
<p><i class="fas fa-angle-right"></i> <span data-translate="industrial_detail2">化工原料生产</span></p>
<p><i class="fas fa-angle-right"></i> <span data-translate="industrial_detail2">化原料生产</span></p>
<p><i class="fas fa-angle-right"></i> <span data-translate="industrial_detail3">工业废水处理</span></p>
</div>
</div>
Expand Down Expand Up @@ -1577,7 +1592,7 @@ <h2 class="section-title" data-translate="about_title">关于我们</h2>
<div class="about-content">
<div class="about-text">
<h3>Muxungue Slaked lime</h3>
<p data-translate="about_desc">我们是一家专注于<strong>熟石灰和石灰生产</strong>的现代化企业，拥有业内领的生设备和经验丰富的团队。公司位于<strong>莫桑比克索拉省穆雄盖地区</strong>，占地面积超过<strong>10万平方米</strong>，配备了全自化生产线和格的品质管控系统。凭借<strong>50万吨的年产能</strong>和稳定可靠的产品质量，我们已成为<strong>南部非洲地区重要的石灰产品供应商</strong>，为数百家工业、建筑和农业域的企业提供优质的产品和服务</p>
<p data-translate="about_desc">我们是一家专注于<strong>熟石灰和石灰生产</strong>的现代化企业，拥有业内领的生设备和经验丰富的团队。公司位于<strong>莫桑比克索拉省穆雄盖地区</strong>，占地面积超过<strong>10万平方米</strong>，配备了全自化生产线和格的品质管控系统。凭借<strong>50万吨的年产能</strong>和稳定可靠的产品质量，我们已成为<strong>南部非洲地区重要的石灰产品供应商</strong>，数百家工业、建筑和农业域的企业提供优质的产品和服务</p>
<p data-translate="about_quality">多年来，我们始终坚持<strong>"质量为本、服务至上"</strong>的经营理念，不断引进国际先进技术和管理经验，建立了完善的质量管理体系。我们的产品不仅在本土市场得广泛认可，还远销周边多个国家，在行业内树立了良好的品牌形象和信誉口碑。</p>
<div class="about-features">
<div class="feature">
Expand All @@ -1592,7 +1607,7 @@ <h4 data-translate="fast_delivery">快配送</h4>
</div>
<div class="feature">
<i class="fas fa-handshake"></i>
<h4 data-translate="professional_service">专业服务</h4>
<h4 data-translate="professional_service">专业���务</h4>
<p data-translate="service_desc">专业的技术支持团队，为客户提供全方位解决方案</p>
</div>
</div>
Expand Down Expand Up @@ -1664,7 +1679,7 @@ <h3>WhatsApp</h3>
<div class="social-item facebook">
<i class="fab fa-facebook"></i>
<h3>Facebook</h3>
<p class="contact-desc" data-translate="facebook_desc">关注我们的 Facebook 主页，了解公司最新动态和产品信息</p>
<p class="contact-desc" data-translate="facebook_desc">关注我们的 Facebook 主页，了解公司最新态和产品信息</p>
<div class="social-account">
<span class="label" data-translate="account">账号</span>
<span class="account-text">https://www.facebook.com/profile.php?id=100003553415676&mibextid=ZbWKwL</span>
Expand Down Expand Up @@ -1710,7 +1725,7 @@ <h3 data-translate="email">电子邮箱</h3>
<div class="footer-logo">
<h3>Muxungue Slaked lime</h3>
<p data-translate="footer_supplier">高品质熟石灰与石灰粉供应商</p>
<p data-translate="footer_products">专业生产96%、93%熟石灰粉，熟石灰块等产品</p>
<p data-translate="footer_products">专业生产96%、93%熟石灰粉，熟石灰等产品</p>
<p data-translate="footer_solutions">为建筑、冶金、环保、农业等行业提供优质解决方案</p>
</div>
<div class="footer-center">
Expand All @@ -1727,14 +1742,14 @@ <h4 data-translate="footer_title">产品认证</h4>
<div class="footer-map">
<h4 data-translate="company_location">公司位置</h4>
<div class="location-info">
<p class="coordinates"><span data-translate="coordinates">坐标</span>: 20°21'42.4"S 33°44'24.0"E</p>
<p class="coordinates"><span data-translate="coordinates">标</span>: 20°21'42.4"S 33°44'24.0"E</p>
<p class="address" data-translate="company_address">莫桑比克索法拉省穆雄盖地区</p>
<p class="nav-tip" data-translate="nav_tip">复制坐标到谷歌地图即可导航</p>
</div>
</div>

<div class="footer-bottom">
<p data-translate="copyright">© 2024 Muxungue Slaked lime. 版权所有 | 莫桑比克索法拉省穆雄盖地区先的石灰产品供应商</p>
<p data-translate="copyright">© 2024 Muxungue Slaked lime. 版权所 | 莫桑比克索法拉省穆雄盖区的石灰产品供应商</p>
</div>
</div>
</footer>
Expand All @@ -1744,7 +1759,7 @@ <h4 data-translate="company_location">公司位置</h4>
var clipboard = new ClipboardJS('.copy-btn');

clipboard.on('success', function(e) {
// 先检查并移除已存在的提示
// 先检查并移已存在的提示
const existingTooltip = e.trigger.querySelector('.copy-tooltip');
if (existingTooltip) {
existingTooltip.remove();
Expand Down Expand Up @@ -1849,5 +1864,68 @@ <h3 id="modalTitle" data-translate="modal_wechat_title"></h3>

<!-- 添加客服系统脚本 -->
<script src="https://assets.salesmartly.com/js/project_178388_184508_1732617381.js"></script>

<!-- 在 </body> 标签前添加轮播图控制脚本 -->
<script>
let slideIndex = 1;
let slideInterval;

function showSlides(n) {
const slides = document.querySelectorAll('.slides');
const dots = document.querySelectorAll('.dot');

if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}

// 计算移动距离
const wrapper = document.querySelector('.slides-wrapper');
const moveDistance = -(slideIndex - 1) * 20; // 每张图片宽度为20%
wrapper.style.transform = `translateX(${moveDistance}%)`;

// 更新圆点状态
dots.forEach(dot => dot.classList.remove('active'));
dots[slideIndex - 1].classList.add('active');
}

// 切换到下一张或上一张
function plusSlides(n) {
clearInterval(slideInterval);
showSlides(slideIndex += n);
startAutoSlide();
}

// 直接切换到指定幻灯片
function currentSlide(n) {
clearInterval(slideInterval);
showSlides(slideIndex = n);
startAutoSlide();
}

// 自动播放函数
function startAutoSlide() {
slideInterval = setInterval(() => {
slideIndex++;
showSlides(slideIndex);
}, 5000); // 每5秒切换一次
}

// 初始化轮播图
document.addEventListener('DOMContentLoaded', function() {
showSlides(slideIndex);
startAutoSlide();

// 为圆点添加点击事件
const dots = document.querySelectorAll('.dot');
dots.forEach((dot, index) => {
dot.addEventListener('click', () => {
currentSlide(index + 1);
});
});
});
</script>
</body>
</html>

0 comments on commit bf5a44c

Please sign in to comment.