1.重写汉晶网站

2.修改巨象云数网站“软件开发” 改为 “网站服务”

hanJing/css/index.css

@@ -25,6 +25,212 @@ body {
     padding: 0;
     overflow-x: hidden; /* 防止水平滚动条 */
 }
+/* --------轮播------------ */
+.CarouselBox{
+    width: 100%;
+    height: 80%;
+    margin: 0 auto;
+    overflow: hidden;
+    position: relative;
+}
+
+
+/* 轮播图容器 */
+.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: 0 0 100%;
+    width: 100%;
+    height: 100%;
+    background: palegoldenrod;
+}
+
+/* 优化图片渲染 */
+.carousel-item img {
+    width: 100%;
+    height: 100%;   
+    user-select: none;
+    /* 添加这些属性以提升性能 */
+    -webkit-user-drag: none;
+    -khtml-user-drag: none;
+    -moz-user-drag: none;
+    -o-user-drag: none;
+    object-fit: cover; /* 保持比例填充整个容器 */
+    display: block; /* 移除图片底部间隙 */
+}
+
+/* 优化箭头按钮样式 */
+.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;
+}
+
+.carousel-arrow:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* 添加触摸设备支持 */
+@media (hover: none) {
+    .carousel-arrow {
+        display: none; /* 在触摸设备上隐藏箭头 */
+    }
+}
+
+.carousel-arrow-left {
+    left: 2vw;
+    top: 48.7%;
+  
+}
+
+.carousel-arrow-right {
+    right: 2vw;
+    
+}
+/* 修正指示器容器样式 */
+.carousel-indicators {
+    position: absolute;
+    bottom: 1vh;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 2vw;
+    z-index: 10;
+}
+
+/* 修正指示器小圆点样式 */
+.indicator {
+    width: 20px;  /* 稍微调小一点 */
+    height: 20px;
+    border-radius: 50%;
+    /* background-color: rgba(255, 255, 255, 0.5); */
+    background-color: #009ECF;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+/* 补充激活状态的指示器样式 */
+.indicator.active {
+    background-color: #00ECEC;  /* 高亮为纯白色 */
+    transform: scale(1.2);   /* 稍微放大 */
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
+}
+/* 修正容器结构相关样式 */
+.carousel-container {
+    width: 100%;
+    height: 100%;
+    position: relative;  /* 确保是相对定位 */
+    overflow: hidden;
+    padding: 0;
+}
+
+/* 悬停效果 */
+.indicator:hover {
+    background-color: rgba(255, 255, 255, 0.8);
+    transform: scale(1.1);
+}
+
+
+/* 轮播项样式 */
+.carousel-item {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+/* 产品详情按钮基础样式 */
+.product-detail-btn {
+    position: absolute;
+    bottom:6vh;
+    padding: 1vw 5vw;
+    background-color:#00ECEC;
+    border-radius: 50px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    color: #fff !important;    
+  
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* 左侧按钮位置 */
+.product-detail-btn.left {
+ 
+    left: 22vw;
+ 
+}
+
+/* 右侧按钮位置 */
+.product-detail-btn.right {
+    right:22vw;
+}
+
+/* 按钮悬停效果 */
+.product-detail-btn:hover {
+    /* background-color: #ffffff; */
+    /* transform: translateY(-2px); */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+    transform: scale(1.1);
+    color: #fff ;
+}
+
+/* 链接样式 */
+.detail-link {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: #fff;
+    font-size: 1vw;
+    font-weight: 500;
+}
+
+/* 箭头图标样式 */
+.arrow-icon {
+    width: 20px;
+    height: 20px;
+    transition: transform 0.3s ease;
+}
+
+/* 链接悬停时箭头动画 */
+.detail-link:hover {
+
+   color: #fff ;
+  
+}
+
+/* 确保轮播项内的图片样式 */
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* -------------------- */
 
 .topBannerLeft{
     width: 43%;
@@ -33,7 +239,7 @@ body {
     color: #fff;
     position: absolute;
     top: 16vh;
-    left: 13vw;
+    left: 13vw; 
 }
 
 .topBannerLeft p:nth-child(1){
@@ -84,6 +290,12 @@ body {
      transform: scale(1.1);
 
 }
+.top{
+    width: 20vw;
+    position: absolute;
+    top: 0vh;
+    left: 20vw;  
+}
 
 .btLeft{
     width: 20vw;
@@ -122,7 +334,7 @@ body {
  .bannertop{
     width: 100%;
     height:105vh;
-    background-image: url(../imgs/png/ourProducts.png);
+    background-image: url(../imgs/home/mainBusiness.svg);
     background-repeat: no-repeat;
     background-size:40vw;
     background-position:0vw 50%;  
@@ -274,7 +486,7 @@ body {
     color: #fff;
 }
 
-.bannerBottomText .top{
+.bannerBottomText .top2{
     width: 100%;
     height: 40%;
     /* background-color: palegoldenrod; */
@@ -290,11 +502,12 @@ body {
 
    
 }
-.top p{
-    width: 60%;
-    font-size: 1vw;
-    line-height: 4.5vh;
+.top2 p{
+    width: 80%;
+    font-size: 1.3vw;
+    line-height: 5vh;
     margin-top: 4vh;
+  
 }
 
 
@@ -309,6 +522,7 @@ body {
 .bottomRight{
     margin-left: 10vw;
 }
+
 .perCent{
     font-size: 2.5vw;
     font-weight: 600;
@@ -348,4 +562,43 @@ body {
     transform: translateY(0);
 }
 
+/* --------------- */
+.newBottom{
+    width: 100%;
+    height: 40%;
+    /* background-color: palegoldenrod; */
+}
+.teamImg{
+    width: 12vw;
+    height: 12vw;
+}
+.teamBox{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    margin-top: 4vh;
+    /* align-items: center; */
+}
+.teamBox div{
+    width: 60%;
+    height: 100%;
+    margin-left: 3vw;
+    /* background-color: palegoldenrod; */
+}
+.teamBox div p{
+    font-size: 2.8vw;
+    font-weight: 600;
+    margin-top: 3vh;
+}
+.teamBox div p:nth-child(2){
+    font-size: 1.5vw;
+    font-weight: 600;
+   
+}
+
+
+
+
+
+