259 lines
9.1 KiB
HTML
259 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="shortcut icon" href="../imgs/PNG/LOGO1.png">
|
||
<link rel="stylesheet" href="../css/header.css">
|
||
<link rel="stylesheet" href="../css/software.css">
|
||
|
||
<title>巨象云数</title>
|
||
|
||
|
||
</head>
|
||
<style>
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
</style>
|
||
<body>
|
||
|
||
<section class="headerBox">
|
||
|
||
<section class="header">
|
||
<div class="logoBox">
|
||
<img class="logo" src="../imgs/PNG/LOGO2.png" alt="logo">
|
||
</div>
|
||
<ul class="nav">
|
||
<li><a class="menu " href="../index.html">首页</a> </li>
|
||
<li > <a style="color: black;text-decoration: none;" href="#">网站服务</a></li>
|
||
<li><a class="menu" href="bigDataServices.html">大数据服务</a></li>
|
||
<li><a class="menu" href="aboutUs.html">关于我们</a></li>
|
||
<li><a href="mailto:support@betmaysg.com"> <img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></a></li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="ABtitleBox">
|
||
<div class="ABtitle">
|
||
<h1>网站服务</h1>
|
||
<p>Website Services</p>
|
||
</div>
|
||
<p class="content">
|
||
巨象云数为企业提供软件外包、系统设计、开发服务并在预算范围内按质交付项目。我们能够帮助客户确定对应系统或产品的具体需求，并管理和维护其整个生命周期。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="ourServicesBox">
|
||
<div class="ourServicesTitle">
|
||
<h1>我们的服务</h1>
|
||
<p>标准化产品+个性化定制服务+一站式解决方案满足各个场景的应用需求</p>
|
||
</div>
|
||
<div class="ourServicesContent">
|
||
<div class="left">
|
||
<img src="../imgs/软件定制服务.jpg" alt="软件开发">
|
||
<h1>软件定制服务</h1>
|
||
<p>为企业提供软件外包、系统设计、开发服务、并在预算范
|
||
围内按质交付项目。我们能够帮助客户确定对应系统或产
|
||
品的具体需求，并管理和维护其整个生命周期。</p>
|
||
</div>
|
||
<div class="right">
|
||
|
||
<img src="../imgs/移动APP及小程序开发.jpg" alt="软件开发">
|
||
<h1>移动APP及小程序开发</h1>
|
||
<p>精湛的移动应用开发团队，为您打造符合最新技术标准的
|
||
创新移动应用APP和成熟的微信开发解决方案，扩大您的
|
||
用户基底和市场覆盖。</p>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
<section class="ourWorksBox">
|
||
<h1>我们的工作流程</h1>
|
||
<ul>
|
||
<li>
|
||
<div class="left2">
|
||
<p class="title">1.调查</p>
|
||
<p class="text">我们进行深入的研究，以
|
||
深入了解我们的用户和市
|
||
场。通过竞争对手分析使
|
||
自己的产品脱颖而出，并
|
||
确定您品牌的当前状态和
|
||
目标。</p>
|
||
</div>
|
||
<div class="right2">
|
||
<img src="../imgs/PNG/箭头.svg" alt="箭头">
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="left2">
|
||
<p class="title">2.策略</p>
|
||
<p class="text">制定全面的软件策略，包
|
||
括营销和品牌推广。我们
|
||
将从独特的角度创造附加
|
||
价值，并制定实现品牌价
|
||
值最大化的策略。</p>
|
||
|
||
</div>
|
||
<div class="right2">
|
||
<img src="../imgs/PNG/箭头.svg" alt="箭头">
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="left2">
|
||
<p class="title">3.详细设计</p>
|
||
<p class="text">我们在设计软件时充分考
|
||
虑用户体验。将SEO和品
|
||
牌故事编织在一起，以具
|
||
有自己特色的内容吸引用
|
||
户。</p>
|
||
</div>
|
||
<div class="right2">
|
||
<img src="../imgs/PNG/箭头.svg" alt="箭头">
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="left2">
|
||
<p class="title">4. 设计与实施</p>
|
||
<p class="text">体现软件产品个性，结合
|
||
用户实际使用体验，并使
|
||
用最新技术和方法来达到
|
||
提高用户使用数量的目的。</p>
|
||
|
||
</div>
|
||
<div class="right2">
|
||
<img src="../imgs/PNG/箭头.svg" alt="箭头">
|
||
</div>
|
||
</li>
|
||
<li class="last">
|
||
<div class="content">
|
||
<p class="title">5.运营和改进</p>
|
||
<p class="text">在软件产品发布后，我们
|
||
也会倾听用户的声音，并努力提高软件的使用体验。
|
||
我们将在数据分析的基础
|
||
上不断改进，努力提高营
|
||
销效果和品牌价值。</p>
|
||
</div>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
<section class="softwareProduct">
|
||
<h1>软件产品</h1>
|
||
<p>每一个产品都是一份信任</p>
|
||
<div class="CarouselBox">
|
||
<div class="carousel-container">
|
||
<div class="carousel-list">
|
||
<div class="carousel-item">
|
||
<img src="../imgs/Carousel/房地产.png" alt="房地产项目">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img src="../imgs/Carousel/数据管理软件.png" alt="数据管理项目">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img src="../imgs/Carousel/电商平台.png" alt="电商平台项目">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img src="../imgs/Carousel/音乐移动端.png" alt="音乐移动端">
|
||
</div>
|
||
</div>
|
||
<div class="carousel-arrow carousel-arrow-left">❮</div><div class="carousel-arrow carousel-arrow-right">❯</div> </div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section class="footerBox">
|
||
<div class="Flogo">
|
||
<img class="FlogoImg" src="../imgs/PNG/LOGO2.png" alt="logo">
|
||
<p>版权所有 © 2025 巨象云数</p>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<script>
|
||
const carousel = {
|
||
container: document.querySelector('.carousel-container'),
|
||
list: document.querySelector('.carousel-list'),
|
||
items: document.querySelectorAll('.carousel-item'),
|
||
prevBtn: document.querySelector('.carousel-arrow-left'),
|
||
nextBtn: document.querySelector('.carousel-arrow-right'),
|
||
currentIndex: 0,
|
||
interval: null,
|
||
|
||
init() {
|
||
// 克隆第一张图片到最后
|
||
const firstClone = this.items[0].cloneNode(true);
|
||
this.list.appendChild(firstClone);
|
||
|
||
this.autoPlay();
|
||
this.bindEvents();
|
||
},
|
||
|
||
bindEvents() {
|
||
// 绑定箭头点击事件
|
||
this.prevBtn.addEventListener('click', () => this.prev());
|
||
this.nextBtn.addEventListener('click', () => this.next());
|
||
|
||
// 鼠标悬停暂停
|
||
this.container.addEventListener('mouseenter', () => this.pause());
|
||
this.container.addEventListener('mouseleave', () => this.autoPlay());
|
||
},
|
||
|
||
next() {
|
||
this.currentIndex++;
|
||
this.updateSlide();
|
||
},
|
||
|
||
prev() {
|
||
if (this.currentIndex === 0) {
|
||
this.currentIndex = this.items.length;
|
||
this.list.style.transition = 'none';
|
||
this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`;
|
||
// 强制重绘
|
||
this.list.offsetHeight;
|
||
}
|
||
this.currentIndex--;
|
||
this.list.style.transition = 'transform 0.5s ease';
|
||
this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`;
|
||
},
|
||
|
||
updateSlide() {
|
||
this.list.style.transition = 'transform 0.5s ease';
|
||
this.list.style.transform = `translateX(-${this.currentIndex * 100}%)`;
|
||
|
||
// 当滑动到克隆的第一张图时
|
||
if (this.currentIndex === this.items.length) {
|
||
setTimeout(() => {
|
||
this.list.style.transition = 'none';
|
||
this.currentIndex = 0;
|
||
this.list.style.transform = `translateX(0)`;
|
||
}, 500);
|
||
}
|
||
},
|
||
|
||
autoPlay() {
|
||
this.interval = setInterval(() => this.next(), 3000);
|
||
},
|
||
|
||
pause() {
|
||
clearInterval(this.interval);
|
||
}
|
||
};
|
||
|
||
// 初始化轮播图
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
carousel.init();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |