408 lines
17 KiB
HTML
408 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BETMAY</title>
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/index.css">
|
||
<link rel="icon" href="./img/LOGO.svg" type="image/svg+xml">
|
||
</head>
|
||
|
||
<body>
|
||
<div>
|
||
<div class="headerBg">
|
||
<section class="headerBox">
|
||
|
||
<header class="header">
|
||
<section class="logoBox">
|
||
<div class="logo"><img src="./img/LOGO.svg" alt=""></div>
|
||
<div class="menu">
|
||
<ul id="menuList">
|
||
<li> <a id="aboutUs" href="#section1">关于我们</a></li>
|
||
<li> <a id="product" href="#section2">产品介绍</a></li>
|
||
<li><a id="programme" href="#section3">解决方案</a></li>
|
||
<li><a id="case" href="#section4">成功案例</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="email"><a href="mailto:support@betmaysg.com"><img src="./img/email.svg" alt=""></a>
|
||
</div>
|
||
</section>
|
||
<!-- <div class="langBox">
|
||
<img src="./img/lang.svg" alt="">
|
||
<span onclick="toggleLanguage()" id="toggleButton">English</span>
|
||
</div> -->
|
||
</header>
|
||
<div class="textBox">
|
||
<p>我们的宗旨</p>
|
||
<p><span></span> OUR PURPOSE</p>
|
||
<P id="purpose">提供完整的网站开发服务，包含UI设计、
|
||
页面开发、后台开发、网站托管、网站
|
||
运维等全方位服务。</P>
|
||
</div>
|
||
<img class="computerImg" src="./img/computerImg.png" alt="">
|
||
</section>
|
||
</div>
|
||
<section class="teamBox" id="section1">
|
||
<div class="left">
|
||
<div class="text">
|
||
<div class="contentBox">
|
||
<p>我们的团队</p>
|
||
<p><span></span> OUR TEAM</p>
|
||
<P id="team">我们拥有经验丰富的UI设计团队、网站开
|
||
发团队、运维团队，能解决网站开发的一
|
||
切需求。</P>
|
||
</div>
|
||
</div>
|
||
<img src="./img/teamimg.png" alt="">
|
||
|
||
</div>
|
||
<div class="right">
|
||
<img src="./img/teamimg2.png" alt="">
|
||
|
||
</div>
|
||
</section>
|
||
<section class="product" id="section2">
|
||
<div class="Ptitle">
|
||
<p>产品介绍</p>
|
||
<p class="INTRODUCTION"><span></span> PRODUCT INTRODUCTION </p>
|
||
</div>
|
||
<div class="productBox">
|
||
<div class="productLeft">
|
||
<div class="productLeftImg">
|
||
<div class="productLeftBox">
|
||
<img src="./img/productLeft.png" alt="">
|
||
<span class="UIen">Ul Design</span>
|
||
<span class="UIzh">UI 设计</span>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="productLeftImg2">
|
||
<div class="productLeftBox">
|
||
<img src="./img/productLeft2.png" alt="">
|
||
<span class="WebsiteEn">Website Hosting</span>
|
||
<span class="WebsiteZh">网站托管</span>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="productright">
|
||
|
||
<div class="productrightImg">
|
||
<img src="./img/productright.png" alt="">
|
||
<span class="Designen">Website Design</span>
|
||
<span class="Designzh">网站制作</span>
|
||
|
||
</div>
|
||
<div class="productrightImg2">
|
||
<img src="./img/productright2.png" alt="">
|
||
<span class="maintenanceEn">Website maintenance</span>
|
||
<span class="maintenanceZh">网站运维</span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="Solution" id="section3">
|
||
<div class="Stitle">
|
||
<p>解决方案</p>
|
||
<p class="SOLUTION"><span></span> SOLUTION </p>
|
||
</div>
|
||
<div class="rightBg"></div>
|
||
<div class="SolutionContent">
|
||
<div class="SolutionLeft">
|
||
<div class="SolutionLeftContent">
|
||
<p id="UI">UI 设计</p>
|
||
<p id="UIdescribe">对用户体验和视觉表达有着独特的见解并拥有大量的实战经验。
|
||
我们整合高效的创作模式，凭借敏锐的洞察力，提供引人入胜的
|
||
产品设计解决方案。团队始终坚持创新，励志为客户制作打破行
|
||
业传统的的UI界面设计。</p>
|
||
</div>
|
||
<div class="SolutionImgs">
|
||
<div>
|
||
<img src="./img/SolutionImgs.svg" alt="">
|
||
</div>
|
||
<div>
|
||
<img src="./img/SolutionImgs2.svg" alt="">
|
||
</div>
|
||
<div>
|
||
<img class="SolutionImgs3" src="./img/SolutionImgs3.svg" alt="">
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="SolutionRight">
|
||
<div class="SolutionRightContent">
|
||
<div class="SolutionRightContentImg">
|
||
<img src="./img/SolutionRightContentImg.png" alt="">
|
||
<p><span id="webDesign">网页端设计</span> <span id="webDesign2">企业官网和其他界面的UI设计</span></p>
|
||
</div>
|
||
|
||
<div class="SolutionRightContentImg">
|
||
<img src="./img/SolutionRightContentImg2.png" alt="">
|
||
<p><span id="moveDesign">移动端设计</span> <span id="moveDesign2">APP和小程序UI设计</span></p>
|
||
</div>
|
||
<div class="SolutionRightContentImg">
|
||
<img src="./img/SolutionRightContentImg3.png" alt="">
|
||
<p><span id="SoftwareDesign">软件界面设计</span> <span id="SoftwareDesign2">应用软件和管理系统及大屏等界面UI设计</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="caseBox" id="section4">
|
||
<div class="case">
|
||
<div class="Ctitle">
|
||
<p>案例</p>
|
||
<p class="CASE"><span></span> CASE </p>
|
||
|
||
</div>
|
||
<div class="Rotating">
|
||
<div class="sliderShadow">
|
||
<div class="slider">
|
||
<div class="slides">
|
||
<img class="slide" src="./img/run1.jpg" alt="Image 1">
|
||
<img class="slide" src="./img/run2.jpg" alt="Image 2">
|
||
<img class="slide" src="./img/run3.jpg" alt="Image 3">
|
||
<img class="slide" src="./img/run4.jpg" alt="Image 4">
|
||
</div>
|
||
<div class="arrow left">
|
||
<!-- < -->
|
||
</div>
|
||
<div class="arrow right">
|
||
<!-- > -->
|
||
|
||
</div>
|
||
<div class="dots-container"></div>
|
||
</div>
|
||
</div>
|
||
<div class="RotatingTitle">
|
||
<p id="M2pool">M2pool网页端</p>
|
||
<p id="digitalCurrency">数字货币平台</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="footer">
|
||
<div class="footerBox">
|
||
<div class="footerLogo">
|
||
<img src="./img/LOGO.svg" alt="">
|
||
<span > <span id="serviceConsultation">服务咨询： </span><a href="mailto:support@betmaysg.com">support@betmaysg.com</a></span>
|
||
</div>
|
||
|
||
<div class="footerText">
|
||
<span id="copyright">@2024 BETMAY PTE.LTD.版权所有</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</section>
|
||
<section class="scrollTop">
|
||
<img src="./img/top.svg" alt="">
|
||
</section>
|
||
</div>
|
||
<script>
|
||
|
||
// 准备多语言文本
|
||
var texts = {
|
||
"en": {
|
||
"buttonToggle": "简体中文",
|
||
"aboutUs": "About Us",
|
||
"product":"Product Introduction",
|
||
"programme":"Solution",
|
||
"case":"Success cases",
|
||
"purpose":"Provide complete website development services, including UI design, page development, backend development, website hosting, website operation and maintenance, and other comprehensive services.",
|
||
"team":"We have an experienced UI design team, website development team, and operations team that can solve all the needs of website development.",
|
||
"UI":"UI Design",
|
||
"UIdescribe":"Has unique insights and extensive practical experience in user experience and visual expression. We integrate efficient creative models and provide engaging product design solutions with the insight of Jiaorui. The team always adheres to innovation and strives to create UI interface designs that break industry traditions for clients.",
|
||
"webDesign":"Web design",
|
||
"webDesign2":"UI design for enterprise official website and other interfaces",
|
||
"moveDesign":"Mobile design",
|
||
"moveDesign2":"APP and Mini Program UI Design",
|
||
"SoftwareDesign":"Software interface design",
|
||
"SoftwareDesign2":"Interface UI design for applications and management systems and large screens, etc.",
|
||
"M2pool":"M2pool web version",
|
||
"digitalCurrency":"Digital currency platform",
|
||
"serviceConsultation":"Service Consultation: ",
|
||
"copyright":"@2024 BETMAY PTE.LTD All rights reserved",
|
||
},
|
||
"cn": {
|
||
"buttonToggle": "English",
|
||
"aboutUs": "关于我们",
|
||
"product":"产品介绍",
|
||
"programme":"解决方案",
|
||
"case":"成功案例",
|
||
"purpose":"提供完整的网站开发服务，包含UI设计、页面开发、后台开发、网站托管、网站运维等全方位服务。",
|
||
"team":"我们拥有经验丰富的UI设计团队、网站开发团队、运维团队，能解决网站开发的一切需求。",
|
||
"UI":"UI 设计",
|
||
"UIdescribe":"对用户体验和视觉表达有着独特的见解并拥有大量的实战经验。我们整合高效的创作模式，凭借敏锐的洞察力，提供引人入胜的产品设计解决方案。团队始终坚持创新，励志为客户制作打破行业传统的的UI界面设计。",
|
||
"webDesign":"网页端设计",
|
||
"webDesign2":"企业官网和其他界面的UI设计",
|
||
"moveDesign":"移动端设计",
|
||
"moveDesign2":"APP和小程序UI设计",
|
||
"SoftwareDesign":"软件界面设计",
|
||
"SoftwareDesign2":"应用软件和管理系统及大屏等界面UI设计",
|
||
"M2pool":"M2pool网页端",
|
||
"digitalCurrency":"数字货币平台",
|
||
"serviceConsultation":"服务咨询: ",
|
||
"copyright":"@2024 BETMAY PTE.LTD.版权所有",
|
||
|
||
|
||
|
||
}
|
||
};
|
||
|
||
// 设置当前语言
|
||
var currentLang = "cn";
|
||
|
||
// 更新页面文本
|
||
function updateTexts() {
|
||
document.getElementById("toggleButton").innerText = texts[currentLang].buttonToggle;
|
||
document.getElementById("aboutUs").innerText = texts[currentLang].aboutUs;
|
||
document.getElementById("product").innerText = texts[currentLang].product;
|
||
document.getElementById("programme").innerText = texts[currentLang].programme;
|
||
document.getElementById("case").innerText = texts[currentLang].case;
|
||
document.getElementById("purpose").innerText = texts[currentLang].purpose;
|
||
document.getElementById("UI").innerText = texts[currentLang].UI;
|
||
document.getElementById("UIdescribe").innerText = texts[currentLang].UIdescribe;
|
||
document.getElementById("webDesign").innerText = texts[currentLang].webDesign;
|
||
document.getElementById("webDesign2").innerText = texts[currentLang].webDesign2;
|
||
document.getElementById("moveDesign").innerText = texts[currentLang].moveDesign;
|
||
document.getElementById("moveDesign2").innerText = texts[currentLang].moveDesign2;
|
||
document.getElementById("SoftwareDesign").innerText = texts[currentLang].SoftwareDesign;
|
||
document.getElementById("SoftwareDesign2").innerText = texts[currentLang].SoftwareDesign2;
|
||
document.getElementById("M2pool").innerText = texts[currentLang].M2pool;
|
||
document.getElementById("digitalCurrency").innerText = texts[currentLang].digitalCurrency;
|
||
document.getElementById("serviceConsultation").innerText = texts[currentLang].serviceConsultation;
|
||
document.getElementById("copyright").innerText = texts[currentLang].copyright;
|
||
document.getElementById("team").innerText = texts[currentLang].team;
|
||
|
||
|
||
|
||
}
|
||
|
||
// 切换语言
|
||
function toggleLanguage() {
|
||
currentLang = (currentLang === "en" ? "cn" : "en");
|
||
updateTexts();
|
||
}
|
||
|
||
// 当文档加载完毕时执行
|
||
window.onload = function() {
|
||
updateTexts();
|
||
};
|
||
|
||
|
||
// 回到顶部
|
||
const scrollTopElement = document.querySelector('.scrollTop');
|
||
|
||
scrollTopElement.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
//高亮导航
|
||
const menuList = document.getElementById('menuList');
|
||
menuList.addEventListener('click', function (event) {
|
||
if (event.target.tagName === 'A') {
|
||
const links = menuList.querySelectorAll('a');
|
||
links.forEach(link => {
|
||
link.parentElement.classList.remove('highlight');
|
||
});
|
||
event.target.parentElement.classList.add('highlight');
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
// 轮播图
|
||
const slides = document.querySelectorAll('.slide');
|
||
const leftArrow = document.querySelector('.arrow.left');
|
||
const rightArrow = document.querySelector('.arrow.right');
|
||
const dotsContainer = document.querySelector('.dots-container');
|
||
let currentSlide = 0;
|
||
|
||
// 创建小圆点
|
||
for (let i = 0; i < slides.length; i++) {
|
||
const dot = document.createElement('div');
|
||
dot.classList.add('dot');
|
||
if (i === 0) {
|
||
dot.classList.add('active');
|
||
}
|
||
dotsContainer.appendChild(dot);
|
||
}
|
||
|
||
const dots = document.querySelectorAll('.dot');
|
||
|
||
function showSlide(n) {
|
||
const translateXValue = -n * 100;
|
||
slides.forEach((slide, index) => {
|
||
slide.style.transform = `translateX(${translateXValue}%)`;
|
||
});
|
||
dots.forEach((dot, index) => {
|
||
dot.classList.toggle('active', index === n);
|
||
});
|
||
currentSlide = n;
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentSlide++;
|
||
if (currentSlide >= slides.length) {
|
||
currentSlide = 0;
|
||
}
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
function prevSlide() {
|
||
currentSlide--;
|
||
if (currentSlide < 0) {
|
||
currentSlide = slides.length - 1;
|
||
}
|
||
showSlide(currentSlide);
|
||
}
|
||
|
||
leftArrow.addEventListener('click', prevSlide);
|
||
rightArrow.addEventListener('click', nextSlide);
|
||
|
||
dots.forEach((dot, index) => {
|
||
dot.addEventListener('click', () => {
|
||
showSlide(index);
|
||
});
|
||
});
|
||
|
||
let intervalId;
|
||
|
||
function startAutoSlide() {
|
||
intervalId = setInterval(nextSlide, 3000);
|
||
}
|
||
|
||
function stopAutoSlide() {
|
||
clearInterval(intervalId);
|
||
}
|
||
|
||
const slider = document.querySelector('.slider');
|
||
slider.addEventListener('mouseenter', stopAutoSlide);
|
||
slider.addEventListener('mouseleave', startAutoSlide);
|
||
|
||
startAutoSlide();
|
||
</script>
|
||
</body>
|
||
|
||
</html> |