259 lines
9.2 KiB
HTML
259 lines
9.2 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>Software Development</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>
|