所有项目提交

giantElephant/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

giantElephant/css/aboutUs.css

@@ -0,0 +1,164 @@
+.headerBox {
+    width: 100%;
+    position: relative;
+}
+
+.ABtitleBox {
+    width: 100%;
+    height: 100vh;
+    position: relative;   
+    display: flex;
+    justify-content: right;
+    background-image: url(../imgs/PNG/关于我们.png);
+    background-repeat: no-repeat;
+    background-size: 100% 90%;
+    background-position: 0% 100%;
+  
+
+}
+.BigtitleBox{
+    width: 100%;
+    height: 100vh;
+    position: relative;   
+    display: flex;
+    justify-content: right;
+    background-image: url(../imgs/PNG/大数据服务.png);
+    background-repeat: no-repeat;
+    background-size: 100% 90%;
+    background-position: 0% 100%;
+}
+.ABtitle{
+    position: absolute;
+    left: 30%;
+    top: 13%;
+    font-size: 35px;
+}
+.ABtitle h1{
+    letter-spacing: 8px;
+    margin: 0;
+}
+.ABtitle p{
+    font-weight: 500;
+    color: #91A7BC;
+    font-size: 35px;
+    margin: 0;
+    padding-left: 18px;
+    margin-top: 8px;
+}
+.ABtitleBox .content{
+    position: absolute;
+    top: 55%;
+    left: 6%;
+    width:40%;
+    font-size: 25px;
+    letter-spacing: 2px;
+    line-height: 55px;
+}
+.BigtitleBox .content{
+    position: absolute;
+    top: 55%;
+    left: 6%;
+    width:38%;
+    font-size: 25px;
+    letter-spacing: 3px;
+    line-height: 55px;
+}
+
+.standard{
+    width: 100%;
+    height: 500px;
+    text-align: center;
+    margin-top: 80px;
+    padding-top: 50px;
+    /* background-image: url(../imgs/PNG/背景下.png);
+    background-repeat: no-repeat;
+    background-position: 0% -216px; 
+    background-size: cover; */
+}
+.standardTitle h1{
+    font-size: 35px;
+    letter-spacing: 3px;
+    margin: 0;
+}
+.standardTitle p{
+    font-size: 20px;
+  
+    margin-top: 18px;
+    color: #92A8BD;
+}
+.standard ul {
+    width: 80%;
+    height: 330px;
+    /* background: palegreen; */
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+  
+    margin: 0 auto;
+    margin-top: 50px;
+}
+
+.standard ul li{
+    width: 15%;  
+    border-radius: 30px ;
+    overflow: hidden;
+    box-shadow: 0px 0px 10px 0px #87adfc;
+    
+}
+.longBlock{
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding-top: 15%;
+    /* display: flex;
+    flex-direction: column; */
+    text-align: center;
+
+}   
+.longBlock img{
+  width: 120px;
+}
+.longBlock p{
+    margin: 0;  
+    width: 50%;
+    margin: 0 auto;
+    margin-top: 18px;
+    line-height: 30px;
+}
+.separate img{
+    width: 90px;
+    margin-top: 15px;
+    margin-bottom: 18px;
+}
+
+.bigData,.bigData{
+    min-width: 18% ;
+    margin-left: 6%;
+}
+
+
+  
+
+
+
+
+.footerBox{
+    width: 100%;
+    height: 930px;
+    background-image: url(../imgs/PNG/背景下.png);
+    background-repeat: no-repeat; /* 添加这行 */
+    background-position: 0% 100%;  /* 添加这行 */
+    background-size: 100% 149%;
+    position: relative;          /* 添加这行 */
+    margin-top: 0;    
+              /* 添加这行 */
+}
+.Flogo{
+    position: absolute;
+    top: 65%;
+    left: 10%;
+}
+
+.FlogoImg{
+    width: 130px;
+}

giantElephant/css/header.css

@@ -0,0 +1,70 @@
+.header{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 230px;
+    background-image: url(../imgs/PNG/hradTop.png);
+    background-repeat: no-repeat;
+    background-size: 58% 101%;
+    background-position: right;
+    background-position: 100% 0%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    
+}
+.logoBox{
+    width: 28%;
+    text-align: center;
+}
+.logo{
+    width: 100px;
+    margin: 0 auto;
+}
+
+.menu{
+    color: #fff;
+    text-decoration: none;
+}
+
+.menu:hover{
+    color: #000;
+}
+
+
+.nav{
+    width: 50%;
+    height: 100%;
+    display: flex;
+    /* align-items: center; */
+    justify-content: right;
+    padding-top: 3%;
+    padding-right: 5%;
+    font-size: 18px;
+    color: #fff;
+}
+.nav li{
+    display: inline;
+    margin: 0 2%;
+    padding: 0;
+    list-style: none;
+    cursor: pointer;
+    height: 30px;
+
+}
+.nav li:hover{
+    color: #000;
+}
+.email{
+    width: 25px;
+    transition: all 0.3s ease;
+}
+.email:hover{
+   width: 28px;
+}

giantElephant/css/index.css

@@ -0,0 +1,193 @@
+.video-container {
+    width: 100%;
+    height: 980px;
+    position: relative;
+    overflow: hidden;
+}
+
+.video-container video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.logo{
+    width: 38px;
+    position: absolute;
+    left: 150px;
+    top: 40px;
+}
+.VideoText{
+    position: absolute;
+    top: 22%;
+    left: 15%;
+    font-size: 53px;
+    font-weight: 600;
+}
+.TextZH{
+    color: #3770F3;
+    margin: 0;
+    margin-top: 18PX;
+    letter-spacing: 8PX;
+}
+.TextEN{
+    color: #90A8C0;
+    margin: 0;
+    margin-top: 18PX;
+}
+.menu{
+    color: #fff;
+    text-decoration: none;
+}
+
+.menu:hover{
+    color: #000;
+}
+.home{
+    color: #000;
+    text-decoration: none;
+}
+
+.overlay-image {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 200px; /* 覆盖底部200px，可以根据需要调整 */
+    background-image: url(../imgs/PNG/首页-视频遮蔽线条.png);
+    background-repeat: no-repeat;
+    background-size: 100% 105%;
+    z-index: 1; /* 确保图片在视频上层 */
+}
+.aboutUs{
+    width: 100%;
+    min-height: 800px;
+    display: flex;
+    justify-content: center;
+    padding: 180px 0px;
+    margin-top: 80px;
+    background-image: url(../imgs/PNG/首页-弧形线条\(BJF\).svg);
+    background-repeat: no-repeat;
+    background-position: bottom;
+    
+}
+.software{
+    width: 100%;
+    min-height: 800px;
+    display: flex;
+    justify-content: center;
+    padding: 180px 0px;
+    margin-top: 80px;
+    background-image: url(../imgs/PNG/首页-线条.png);
+    background-repeat: no-repeat;
+    background-position: 2% 110%;
+    
+}
+.bigData{
+    width: 100%;
+    min-height: 800px;
+    display: flex;
+    justify-content: center;
+    padding: 180px 0px;
+    margin-top: 80px;
+    /* background-image: url(../imgs/PNG/首页-线条.png);
+    background-repeat: no-repeat;
+    background-position: 2% 110%; */
+   
+    position: relative;          /* 添加这行 */
+
+}
+.textBox{
+    width: 35%;
+    display: flex;
+    justify-content: right;
+}
+.text{
+    width:70%;
+    /* background: paleturquoise; */
+}
+.Tilte{
+    display: flex;
+   
+}
+
+.round{
+  
+    min-width: 30px;  /* 设置最小宽度 */
+    width: 30px;      /* 固定宽度 */
+    height: 30px;     /* 固定高度 */
+    background: #386EF5;
+    border-radius: 50%;
+    margin-right: 15px;
+    flex-shrink: 0;   /* 防止压缩 */
+    margin-top: 16px;
+}
+
+.textTilte{
+    display: inline-block;
+    letter-spacing: 7px; /* 字间距 */
+    padding: 0;
+    margin: 0;
+    font-size: 45px;
+}
+.introduce{
+    width: 100%;
+    /* background: palegreen; */
+    box-sizing: border-box;
+    padding: 0px 38px;
+    color: rgba(0,0,0,0.9);
+    line-height: 45px;
+    font-size: 22px;
+}
+.imgBox{
+    width:50%;
+    display: flex;
+    align-items: center;
+    margin-left: 18px;
+}
+.aboutUsImg{
+    width: 100%;
+}
+
+.more{
+    width:60%;
+    height: 60px;
+    background: #386EF5;
+    color: #fff;
+    font-size: 23px;
+    margin-left: 38px;
+    margin-top: 60px;
+    border: none;
+    border-radius: 50px;
+    position: relative;
+    cursor: pointer;
+}
+
+
+.moreImg{
+    width: 33px;
+    position: absolute;
+    right: 10px;
+    top: 15px;
+}
+
+
+.footerBox{
+    width: 100%;
+    height: 930px;
+    background-image: url(../imgs/PNG/背景下.png);
+    background-repeat: no-repeat; /* 添加这行 */
+    background-position: 0% 100%;  /* 添加这行 */
+    background-size: 100% 149%;
+    position: relative;          /* 添加这行 */
+    margin-top: 0;    
+              /* 添加这行 */
+}
+.Flogo{
+    position: absolute;
+    top: 65%;
+    left: 10%;
+}
+
+.FlogoImg{
+    width: 130px;
+}

giantElephant/css/software.css

@@ -0,0 +1,367 @@
+.ABtitleBox {
+    width: 100%;
+    height: 100vh;
+    position: relative;   
+    display: flex;
+    justify-content: right;
+    background-image: url(../imgs/PNG/软件开发.png);
+    background-repeat: no-repeat;
+    background-size: 100% 90%;
+    background-position: 0% 100%;
+  
+
+}
+
+.ABtitle{
+    position: absolute;
+    left: 30%;
+    top: 13%;
+    font-size: 35px;
+}
+.ABtitle h1{
+    letter-spacing: 8px;
+    margin: 0;
+    text-align: center;
+}
+.ABtitle p{
+    font-weight: 500;
+    color: #91A7BC;
+    font-size: 35px;
+    margin: 0;
+    margin-top: 8px;
+
+}
+
+.ABtitleBox .content{
+    position: absolute;
+    top: 55%;
+    left: 6%;
+    width: 714px;
+    font-size: 25px;
+    letter-spacing: 3px;
+    line-height: 55px;
+}
+.ourServicesBox{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: center;
+    /* background-color: #F5F5F5; */
+    padding: 50px 0;
+
+}
+.ourServicesTitle{
+    width: 80%;
+    height: 100px;
+    margin: 0 auto;
+    text-align: center;
+    
+}
+
+.ourServicesTitle h1{
+    font-size: 35px;
+    letter-spacing: 3px;
+    margin: 0;
+}
+.ourServicesTitle p{
+    font-size: 23px;
+  
+    margin-top: 18px;
+    color: #92A8BD;
+    padding: 0;
+}
+.ourServicesContent{
+    width: 80%;
+    height: 85%;
+    display: flex;
+    justify-content: space-between;
+  
+}
+
+.ourServicesContent div{
+    width: 40%;
+    margin-top: 50px;
+    box-shadow: 0px 0px 10px 0px #87adfc;
+    border-radius: 20px;
+}
+.left,.right{
+    text-align: center;
+    padding: 20px;
+    padding-top: 50px;
+}
+
+
+
+.left img{
+   width: 88%;
+   height: 58%;
+   box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5);
+}
+.left h1{
+    width: 90%;
+    text-align: left;
+    margin: 0 auto;
+    margin-top: 30px;
+    font-size: 30px;
+    color: #376DF2;
+    
+}
+.left p{
+    width: 90%;
+    text-align: left;
+    margin: 0 auto;
+    margin-top: 3%;
+    font-size: 1.2rem;
+    line-height: 35px;
+   
+    
+}
+
+.right img{
+    width: 90%;
+    height: 58%;
+    box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5);
+}
+.right h1{
+    width: 90%;
+    text-align: left;
+    margin: 0 auto;
+    margin-top: 30px;
+    font-size: 30px;
+    color: #376DF2;
+    
+}
+.right p{
+    width: 90%;
+    text-align: left;
+    margin: 0 auto;
+    margin-top: 3%;
+    font-size: 1.2rem;
+    line-height: 35px;
+   
+    
+}
+
+.ourWorksBox{
+    width: 100%;
+    height: 900px;
+   text-align: center;
+   padding: 0px;
+   margin-top: 100px;
+   background-image: url(../imgs/PNG/首页-弧形线条\(BJF\).svg);
+   background-repeat: no-repeat;
+   background-size: 100% 140%;
+   background-position: 0% 0%;
+}
+
+.ourWorksBox h1{
+    margin-top: 30px;
+    font-size: 30px;
+}
+
+.ourWorksBox ul{
+    width: 85%;
+   height: 100%;
+   text-align: center;
+   box-sizing: border-box;
+   margin: 0 auto;
+   display: flex;
+   justify-content: center;
+   margin-top: 50px;
+  padding: 0px;
+ /* background: palegoldenrod; */
+}
+
+.ourWorksBox ul li{
+    width: calc(100% / 5);
+    height: 35%;
+    margin: 0px;
+    display: flex;
+    overflow: hidden;
+
+}
+
+.ourWorksBox ul li .left2{
+    width:60%;
+    height: 94%;
+    background-color: #E0EDF5;
+    border-radius: 10px;
+    padding: 10px;
+    
+}
+li .right2{
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+}
+ li .right2 img{
+    width: 50px;
+}
+.ourWorksBox ul  .last{
+    width: 14% !important;
+    background-color: #E0EDF5;
+    border-radius: 10px;
+}
+.ourWorksBox ul  .last .content{
+   padding: 10px;
+}
+.title{
+    margin-top: 10px;
+    font-size: 23px;
+    color: #376DF2;
+    margin-top: 15%;
+}
+.text{
+    width: 100%;
+    font-size: 0.9rem;
+    line-height: 28px;
+    text-align: left;
+  
+}
+
+
+.softwareProduct{
+    width: 100%;
+    height: 800px;
+}
+
+
+.softwareProduct h1{
+    width: 100%;
+   text-align: center;
+   font-size: 30px;
+}
+.softwareProduct p{
+    width: 100%;
+   text-align: center;
+   font-size: 22px;
+   color: #92A8BD;
+}
+
+.CarouselBox{
+    width: 60%;
+    height: 80%;
+    box-shadow: 0px 0px 10px 0px #87adfc;
+    margin: 0 auto;
+    border-radius: 20px;
+    overflow: hidden;
+}
+
+
+/* 轮播图容器 */
+.carousel-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    padding: 0;
+}
+
+/* 轮播图片列表 */
+.carousel-list {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    transition: transform 0.5s ease;
+}
+
+.carousel-item {
+    flex-shrink: 0;
+    width: 100%;
+    height: 100%;
+ 
+}
+
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 箭头按钮样式 */
+.carousel-arrow {
+    position: absolute;
+    top: 50%;
+    /* transform: translateY(-50%); */
+    width: 40px;
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    font-size: 20px;
+    z-index: 10;
+    transition: all 0.3s ease;
+    user-select: none;
+    /* 确保基线对齐 */
+    line-height: 1;
+    /* 移除任何可能的内边距 */
+    padding: 0;
+    /* 确保盒模型一致 */
+    box-sizing: border-box;
+    /* 强制相同的文本基线 */
+    vertical-align: middle;
+}
+
+.carousel-arrow:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.carousel-arrow-left {
+    left: 20px;
+    top: 48.7%;
+  
+}
+
+.carousel-arrow-right {
+    right: 20px;
+    
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.footerBox{
+    width: 100%;
+    height: 930px;
+    background-image: url(../imgs/PNG/背景下.png);
+    background-repeat: no-repeat; /* 添加这行 */
+    background-position: 0% 100%;  /* 添加这行 */
+    background-size: 100% 149%;
+    position: relative;          /* 添加这行 */
+    margin-top: 0;    
+              /* 添加这行 */
+}
+.Flogo{
+    position: absolute;
+    top: 65%;
+    left: 10%;
+}
+
+.FlogoImg{
+    width: 130px;
+}

giantElephant/demo.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>双层波浪效果 - 增强版</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+            overflow-x: hidden;
+        }
+        
+        .wave-container {
+            position: relative;
+            width: 100%;
+            height: 220px;
+            background-color: #ffffff;
+            overflow: hidden;
+        }
+        
+        /* 波浪底色层 */
+        .wave-base {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, #4c7cf3 0%, #77a0ff 100%);
+        }
+        
+        /* 波浪图案层 */
+        .wave-pattern {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 400%;
+            height: 100%;
+            background-repeat: repeat-x;
+            background-size: 25% 100%;
+            animation: wave-animation 20s linear infinite;
+        }
+        
+        /* 深色波浪 */
+        .wave-dark {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%234c7cf3' fill-opacity='0.7' d='M0,0 L1200,0 L1200,80 C900,100 600,70 300,100 C150,110 50,90 0,80 L0,0 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 10;
+            animation-duration: 25s;
+        }
+        
+        /* 浅色波浪 - 增强可见度 */
+        .wave-light {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%239fbcff' fill-opacity='0.85' d='M0,50 L1200,50 L1200,100 C1000,80 800,110 600,90 C400,110 200,80 0,100 L0,50 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 11; /* 提高浅色波浪的层级 */
+            animation-duration: 18s;
+            animation-direction: reverse;
+            top: 30px; /* 调整位置，使波浪更加明显 */
+        }
+        
+        /* 最浅色波浪 - 增加第三层波浪增强层次感 */
+        .wave-lightest {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.4' d='M0,70 L1200,70 L1200,110 C1050,90 800,105 600,95 C350,85 150,100 0,90 L0,70 Z'%3E%3C/path%3E%3C/svg%3E");
+            z-index: 12; 
+            animation-duration: 15s;
+            top: 70px; /* 位于最上层 */
+        }
+        
+        /* 波浪动画 */
+        @keyframes wave-animation {
+            0% {
+                transform: translateX(0);
+            }
+            100% {
+                transform: translateX(-25%);
+            }
+        }
+        
+        .content {
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 0 20px;
+            text-align: center;
+        }
+        
+        h1 {
+            color: #4c7cf3;
+            margin-bottom: 30px;
+        }
+    </style>
+</head>
+<body>
+    <div class="wave-container">
+        <!-- 底色渐变 -->
+        <div class="wave-base"></div>
+        
+        <!-- 三层波浪 -->
+        <div class="wave-pattern wave-dark"></div>
+        <div class="wave-pattern wave-light"></div>
+        <div class="wave-pattern wave-lightest"></div>
+    </div>
+    
+    <div class="content">
+        <h1>增强版双层波浪效果</h1>
+        <p>优化后的波浪效果，提高了浅色波浪的可见度，并添加了第三层最浅色波浪增强层次感。</p>
+    </div>
+</body>
+</html>

giantElephant/html/aboutUs.html

@@ -0,0 +1,136 @@
+<!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/aboutUs.css">
+    <link rel="stylesheet" href="../css/header.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 class="menu" href="software.html">软件开发</a></li>
+                  <li><a  class="menu" href="bigDataServices.html">大数据服务</a></li>
+                  <li><a  style="color: black;text-decoration: none;" href="#">关于我们</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>About us</p>
+                 </div>
+                <p class="content">
+                    我们是一家专业的软件开发公司，致力于
+                    为您提供全方位的解决方案。无论您需要
+                    定制应用程序开发、APP开发或者大数据
+                    技术服务，我们的专业团队将为您量身打
+                    造符合需求的解决方案。透过我们的服务
+                    您将能夠打造您的企业数位未来，实现更
+                    高效、更智能的运营。让我们携手合作，
+                    共同打造数位化时代的应用新价值。
+
+
+                </p>
+              
+            </div>
+            
+        
+
+        </section>
+
+
+        <section class="standard">
+            <div class="standardTitle">
+                <h1>我们的标准</h1>
+                <p>靠谱的服务是所有项目成功的必要条件</p>
+            </div>
+            <ul>
+                <li>
+                  <div class="longBlock quality">
+                    <img src="../imgs/PNG/关于我们-质量.png" alt="质量">
+                    <p style="font-size: 25px;color: #396CF9;">质量</p>
+                    <p style="font-size: 19px;">代码规范检查多方测试验收</p>                        
+                  </div>
+
+                </li>
+                <li>
+                    <div class="longBlock separate growUp">
+                      <img src="../imgs/PNG/关于我们-成长.png" alt="成长">
+                      <p style="font-size: 25px;color: #396CF9;">成长</p>
+                      <p style="font-size: 19px;width: 100%;">我们的目标是共同成长</p>                        
+                    </div>
+  
+                  </li>
+                  <li>
+                    <div class="longBlock separate innovate">
+                      <img src="../imgs/PNG/关于我们-创新.png" alt="创新">
+                      <p style="font-size: 25px;color: #396CF9;">创新</p>
+                      <p style="font-size: 19px;">突破常规思维创新永无止境</p>     
+                                          
+                    </div>
+  
+                  </li>
+                  <li>
+                    <div class="longBlock separate cooperate">
+                      <img src="../imgs/PNG/关于我们-合作.png" alt="合作">
+                      <p style="font-size: 25px;color: #396CF9;">合作</p>
+                      <p style="font-size: 19px;">强化竞争意识营造团队精神</p>            
+                                    
+                    </div>
+  
+                  </li>
+                  <li>
+                    <div class="longBlock separate service">
+                      <img src="../imgs/PNG/关于我们-服务.png" alt="服务">
+                      <p style="font-size: 25px;color: #396CF9;">服务</p>
+                      <p style="font-size: 19px;width: 100%;">专属团队一对一贴心服务</p>                        
+                    </div>
+  
+                  </li>
+            
+           
+            
+            </ul>
+
+        </section>
+
+
+  <section class="footerBox">
+    <div class="Flogo">
+        <img class="FlogoImg" src="../imgs/PNG/LOGO2.png" alt="logo">
+        <p>版权所有 © 2025 巨象云数</p>
+    </div>
+
+  </section>
+
+   
+
+    <script>
+        // fetch('./header.html')
+        //     .then(response => response.text())
+        //     .then(data => {
+        //         document.getElementById('header-container').innerHTML = data;
+        //     });
+    </script>
+</body>
+</html>

giantElephant/html/bigDataServices.html

@@ -0,0 +1,119 @@
+<!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/aboutUs.css">
+    <link rel="stylesheet" href="../css/header.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  class="menu" href="software.html">软件开发</a></li>
+                  <li><a  style="color: black;text-decoration: none;" href="#">大数据服务</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="BigtitleBox">
+                 <div class="ABtitle">
+                    <h1>大数据服务</h1>
+                    <p style="padding-left: 0px;">Big data services</p>
+                 </div>
+                <p class="content">
+                  巨象云数支持多种数据源的接入，打通
+                  用户行为和业务数据，构建全域数据融
+                  合模型，实现从用户到经营的全链路
+                  全场景分析，提供全面有效的市场信息
+                  和经营策略，帮助企业更好的了解用户
+                  掌握市场、提高竞争力。
+
+
+                </p>
+              
+            </div>
+            
+        
+
+        </section>
+
+
+        <section class="standard">
+            <div class="standardTitle">
+                <h1>云计算&大数据服务</h1>
+                <p style="width: 800px;margin: 0 auto ;margin-top: 18px;">超过50类业务指标多维分析，实时定位运营状态，提高运营效率
+                  精准的信息推送服务和精细化用户标签体系，极大提升客户转化率、留存率和复购率</p>
+            </div>
+            <ul class="standardList">
+                <li class="bigData">
+                  <div class="longBlock ">
+                    <img src="../imgs/PNG/大数据资产.png" alt="资产">
+                    <p style="font-size: 25px;">大数据资产</p>
+                             
+                  </div>
+
+                </li>
+                <li class="bigData">
+                    <div class="longBlock  ">
+                      <img src="../imgs/PNG/大数据能力.png" alt="大数据能力">
+                      <p style="font-size: 25px;">大数据能力</p>
+                                        
+                    </div>
+  
+                  </li>
+                  <li class="bigData">
+                    <div class="longBlock  ">
+                      <img src="../imgs/PNG/大数据应用.png" alt="大数据应用">
+                      <p style="font-size: 25px;">大数据应用</p>
+                     
+                                          
+                    </div>  
+  
+                  </li>
+                 
+            
+           
+            
+            </ul>
+
+        </section>
+
+
+  <section class="footerBox">
+    <div class="Flogo">
+        <img class="FlogoImg" src="../imgs/PNG/LOGO2.png" alt="logo">
+        <p>版权所有 © 2025 巨象云数</p>
+    </div>
+
+  </section>
+
+   
+
+    <script>
+        fetch('./header.html')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('header-container').innerHTML = data;
+            });
+    </script>
+</body>
+</html>

giantElephant/html/header.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../css/header.css">
+    <title>巨象云数</title>
+</head>
+<style>
+    html, body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+</style>
+<body>
+    <section class="header">
+        <div class="logoBox">
+           <!-- <img class="logo" src="../imgs/PNG/LOGO1.png" alt="logo"> -->
+        </div>
+        <ul class="nav">
+            <li>首页</li>
+            <li>软件开发</li>
+            <li>大数据服务</li>
+            <li>关于我们</li>
+            <li><img class="email" src="../imgs/PNG/邮件.png" alt="邮件"></li>
+        </ul>
+    </section>
+
+</body> 
+</html>

giantElephant/html/software.html

@@ -0,0 +1,259 @@
+<!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>

giantElephant/imgs/PNG/箭头.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.81 27.87"><defs><style>.cls-1{fill:#e0edf5;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><polygon class="cls-1" points="0 6.02 8.46 6.02 16.38 13.94 8.52 21.85 0 21.85 8.35 13.94 0 6.02"/><polygon class="cls-1" points="9.97 0 24.87 0 38.81 13.94 24.97 27.87 9.97 27.87 24.68 13.94 9.97 0"/></g></g></svg>

giantElephant/imgs/PNG/线条.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1042.37"><defs><style>.cls-1{fill:url(#未命名的渐变_2);}</style><linearGradient id="未命名的渐变_2" x1="960" y1="923.92" x2="960" y2="233.81" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="1" stop-color="#f2f7fc"/></linearGradient></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M1920,1042.37V0c-383.13,43.6-669.3,137.66-863,217.78,0,0-488.81,202.17-720,197.71-143.5-2.76-286.55-20.81-286.55-20.81C28.62,391.92,10.9,389.41,0,387.83v654.54Z"/></g></g></svg>

giantElephant/imgs/PNG/首页-弧形线条(BJF).svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.03 168.62"><defs><style>.cls-1{fill:#f2f7fc;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M1160.21,134.52q-79.9,3.9-155.76,3.58-75.66-.21-154.43-3.58C532.45,120.67,247.29,68.12,0,0V.33A3024.58,3024.58,0,0,0,361.78,100.85c48.48,10.26,281.47,58.36,601.76,66.56,184.44,4.73,324.66-5.65,370.11-9.32A3333.3,3333.3,0,0,0,1917.1,58.25C1917.11,64.36,1919,0,1919,0,1704.65,66.38,1449.52,120.42,1160.21,134.52Z"/></g></g></svg>

giantElephant/index.html

@@ -0,0 +1,124 @@
+<!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/index.css">
+    <link rel="stylesheet" href="./css/header.css">
+    <title>巨象云数</title>
+</head>
+<style>
+    html, body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+</style>
+<body>
+    <!-- <div id="header-container"></div> -->
+  
+        <section class="video-container">
+
+            <section class="header">
+                <div class="logoBox">
+                   <img class="logo" src="./imgs/PNG/LOGO1.png" alt="logo">
+                </div>
+                <ul class="nav">
+                    <li><a class=" home" href="#">首页</a> </li>
+                    <li><a class="menu" href="html/software.html">软件开发</a></li>
+                    <li><a  class="menu" href="html/bigDataServices.html">大数据服务</a></li>
+                    <li><a  class="menu" href="html/aboutUs.html">关于我们</a></li>
+                    <li><a href="mailto:support@betmaysg.com"> <img class="email" src="./imgs/PNG/邮件.png" alt="邮件"></a></li>
+                </ul>
+            </section>
+            <!-- <img class="logo" src="./imgs/PNG/LOGO1.png" alt="logo"> -->
+            <video autoplay loop muted playsinline style="width: 100%;" preload="metadata">
+                <source src="./imgs/video/视频.mp4" type="video/mp4">
+                你的浏览器不支持 video 标签。
+            </video>
+            <div class="overlay-image"></div>
+             <div class="VideoText">
+                <p class="TextZH">专注技术</p>
+                <p class="TextEN">Focus on technology</p>
+                <p class="TextZH">贴心服务</p>
+                <p class="TextEN">Attentive service </p>
+             </div>
+
+        </section>
+
+        <section class="aboutUs">
+                <div class="textBox">
+                    <div class="text">
+                        <div class="Tilte"> <span class="round"></span> <h1 class="textTilte">我们拥有积聚更雄厚与专业的技术力量</h1>
+                        </div>
+                        <p class="introduce">来自于国内外巨头科技企业的技术骨干团队，
+                            为您提供专业、高效、优质、贴心的服务支持
+                            </p>
+                            <a style="color: #fff;text-decoration: none;" href="html/aboutUs.html"><button class="more"> 更多  <img class="moreImg" src="./imgs/PNG/右边.png" alt="箭头"></button></a>
+                    </div>
+                   
+                </div>
+                <div class="imgBox">
+                    <img class="aboutUsImg" src="./imgs/首页-我们拥有.jpg" alt="关于我们">
+                </div>
+        </section>
+
+        <section class="software">
+            <div class="textBox">
+                <div class="text">
+                    <div class="Tilte"> <span class="round"></span> <h1 class="textTilte">软件开发
+                    </h1>
+                    </div>
+                    <p class="introduce">巨象云数科技是一家专门从事“软件开发"
+                        服务的企业适用于PC，移动，APP,小程
+                        序，微信，wap站等专业的开发技术，产
+                        品团队让您的产品快速启动，完美落地。
+                        
+                        </p>
+                        <a style="color: #fff;text-decoration: none;" href="html/software.html"><button class="more"> 更多  <img class="moreImg" src="./imgs/PNG/右边.png" alt="箭头"></button></a>
+                    </div>
+               
+            </div>
+            <div class="imgBox">
+                <img class="aboutUsImg" src="./imgs/首页-软件开发.jpg" alt="软件开发">
+            </div>
+    </section>
+    <section class="bigData">
+        <div class="textBox">
+            <div class="text">
+                <div class="Tilte"> <span class="round"></span> <h1 class="textTilte">大数据服务
+
+                </h1>
+                </div>
+                <p class="introduce">超低功耗、超融合、高密度的大数据存储系统
+                    智能化、高性能、算法精准的大数据处理技术                   
+                    </p>
+                    <a style="color: #fff;text-decoration: none;" href="html/bigDataServices.html"><button class="more"> 更多  <img class="moreImg" src="./imgs/PNG/右边.png" alt="箭头"></button></a>
+                </div>
+           
+        </div>
+        <div class="imgBox">
+            <img class="aboutUsImg" src="./imgs/首页-大数据服务.jpg" alt="大数据服务">
+        </div>
+</section>
+
+  <section class="footerBox">
+    <div class="Flogo">
+        <img class="FlogoImg" src="./imgs/PNG/LOGO2.png" alt="logo">
+        <p>版权所有 © 2025 巨象云数</p>
+    </div>
+
+  </section>
+
+   
+
+    <script>
+        fetch('./header.html')
+            .then(response => response.text())
+            .then(data => {
+                document.getElementById('header-container').innerHTML = data;
+            });
+    </script>
+</body>
+</html>