2025-03-24

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="donggongyangshi.css">
    <link rel="stylesheet" href="xet.css">
    <script>
        // 等待页面加载完成
        document.addEventListener('DOMContentLoaded', function() {
            // 轮播图功能
            const sixthFeet = document.querySelector('.sixth_feet');
            const cards = document.querySelectorAll('.sixth_feet > div');
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            
            // 当前显示的项目索引
            let currentIndex = 0;
            
            // 更新轮播图显示
            function updateCarousel() {
                // 计算滚动位置
                const cardWidth = cards[0].offsetWidth + 10; // 卡片宽度 + 间距
                sixthFeet.scrollTo({
                    left: currentIndex * cardWidth,
                    behavior: 'smooth'
                });
            }
            
            // 下一个按钮点击事件
            nextBtn.addEventListener('click', function() {
                if (currentIndex < cards.length - 1) {
                    currentIndex++;
                    updateCarousel();
                }
            });
            
            // 上一个按钮点击事件
            prevBtn.addEventListener('click', function() {
                if (currentIndex > 0) {
                    currentIndex--;
                    updateCarousel();
                }
            });
        });
    </script>
</head>
<body>
  <div class="whole">
    <div class="first">
      
        <div class="header">
          <div class="header_one">
          <ul class="one">
            <li class="ff_i">
               <img src="./img/xet.png" alt="">
            </li>
            <li class="ff">首页   </li>
            <li class="ff">解决方案  </li>
            <li class="ff">产品服务</li>
            <li class="ff">价格</li>
            <li class="ff">活动</li>
            <li class="ff">案例</li>
            <li class="ff">渠道合作</li>
            <li class="ff">下载与帮助</li>
            <li class="ff">关于我们</li>
          </ul>
          </div>
          <ul class="two">
            <li class="ff">我是学员</li>
           <button class="ff_b">商家登录</button>
           <button class="ff_b">免费试用</button>
          </ul> 
        </div>
        
    </div>
<!-- ------------------第二张 ----------------- ---- ------  --------- -->
    <div class="second">
        <div class="second_header">
           
               <h2> 我们的产品能力</h2>
            
        </div>
        <div class="second_feet">
            <img src="./img/m3moa2m10v5k (2)(1).png" alt="">
          </div>
          <div class="second_feet_two">
           
            <li class="ss">
              <h3>知识店铺</h3>
              <p>1分钟搭建你的知识商城</p>
              <p>助理高校知识变现</p>
              <p class="ss_b">免费试用</p>
            </li>
            <li class="ss">
              <h3>私域直播</h3>
              <p>企业级专属私域直播平台</p>
              <p>实现私域流量高效运营</p>
              <p class="ss_b">免费试用</p>
            </li>
            <li class="ss">
              <h3>企业SCRM</h3>
              <p>企业微信私域运营神器</p>
              <p>数据洞察驱动业绩增长</p>
              <p class="ss_b">免费试用</p>
            </li>
           </ul>
                

          

        </div>
    </div>  
  </div>
  <!------there------------------- 第三张----------------tow------>
<div class="third">
  <div class="third_header">
    <h2>我们的解决方案</h2>
  </div>
  <div class="third_body">
    
      
      <p>公域获客</p>
      <p>私域运营</p>
      <p>直播带货</p>
      <p>内容支付</p>
      <p>数据化运营</p>
  </div>
  <div class="third_feet">
    <img src="./img/m3moa2m10v5k (2)(1).png" alt="">
    <div class="third_feet_one">
      <div class="third_feet_tow">
        <h3>公域获客</h3>
        <h4>多渠道获客，沉淀私域流量池</h4>
      </div>
      
        <ul class="third_feet_three">
          <li>打通抖音/快手/小红书/视频号/公众号，
          支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</p>
          </li>
          <li>
            多种公域转私域工具，支持添加企微/引流
            加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池
          </li>
          <li>
            丰富的广告获客能力，落地页支持表单/支付类
            0元领取/添加企微等多场景，提升广告ROI
          </li>
        </ul>
        <div class="third_feet_b">
        <button >免费试用</button>
        <button  >了解情况</button>
       </div>
            
      
    </div>
  </div>
</div>
<!------there------------------- 第四张----------------tow------>
<div class="fourth">
 <div class="fourth_header">
  <h2>我们的行业解决方案</h2>
 </div>


  <div class="fourth_bf">
    <div class="fourth_body_one">
      <p>新零件门店</p>
      <p>职业培训</p>
      <p>知识付费</p>
      <p>美业直播</p>
      
    </div>
    <div class="fourth_body_tow">
      <div class="fourth_body_tow_one">
       <h5>新零售门店解决方案</h5>
       <p>私域直播带货+ 推广门店体系，助力商家私域流量高效变现</p>
      
      
       <ul class="fourth_body_tow_one_ul">
        <li class="ff">知识店铺</li>
        <li class="ff">专栏</li>
        <li class="ff">会员</li>
        <li class="ff">圈子</li>
        <li class="ff">直播</li>
       </ul>
       
       <ul class="fourth_body_tow_one_ul">
        <li class="ff" >表单<li>
        <li class="ff">裂变海报</li>
        <li class="ff">推广员</li>
       </ul>
       <div class="fourth_body_tow_tow">
         <button class="fourth_body_tow_b">免费试用</button>
         <button class="fourth_body_tow_b" >了解情况</button>
        
        </div>
      </div>
       
    </div>
     <div class="fourth_feet">
       <p>行业内情</p>
      </div>
  </div>
</div>
<!------------------------ 第五张 ----------------- -->
<div class="fifth">
  <div class="fifth_header">
    <h2>我们的技术优势</h2>
  </div>
  <div class="fifth_feet">
    <div class="fifth_feet_one">
      <h3>超稳定</h3>
      <p>多云负载均衡/全球SDN加速</p>
    </div>
    <div class="fifth_feet_tow">
      <h3>高并发</h3>
      <p>支持多用户同时在线</p>
    </div>
    <div class="fifth_feet_three">
      <h3>超流畅</h3>
      <p>观看端自动探测并自动跨云线路切换</p>
    </div>
    

    
  </div>
  
</div>
 





<!----------------------------- 第六张---------------------->
<div class="sixth">
  <div class="sixth_header">
    <h2>我们的运营服务</h2>
  </div>
  <div class="sixth_feet">
    <div class="sixth_feet_one">
      <img class="ff" src="./img/服务_本地社群(1).png" alt="">
      <h4>社群服务</h4>
      <p>标杆商家分享，同行商家交流，总比别人快一步</p>
    </div>
    <div class="sixth_feet_tow">
      <img class="ff" src="./img/摄图网_501221054_商务女士打电话（企业商用）@3x (1)(1).png" alt="">
      <h4>管家服务</h4>
      <p>客户经理、服务管家、多角色在群，服务全面包围</p>
    </div>
    <div class="sixth_feet_three">
      <img class="ff" src="./img/大客服务 (1)(1).png" alt="">
      <h4>大客服务</h4>
      <p>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</p>
    </div>
    <div class="sixth_feet_four">
      <img class="ff" src="./img/运维服务(1).png" alt="">
      <h4>运维服务</h4>
      <p>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</p>
    </div>
  </div>
  
  <!-- 添加导航按钮 -->
  <div class="sixth_nav_buttons">
    <button id="prevBtn">&lt;</button>
    <button id="nextBtn">&gt;</button>
  </div>
</div>





<!----------------------------- 第七张---------------------->
<div class="seventh"> 
  <div class="seventh_header">
    <h2>他们都在用小鹅通</h2>
    <p>（*排名不分先后顺序）</p>
  </div>
  <div class="seventh_body">
    <div class="seventh_body_one">
      <img src="./img/屏幕截图 2025-03-23 151325.png" alt="">
      <h4>小熊熊科学学习</h4>
      <p>小熊熊学院以学习科学化为使命，专注提供学
      习方法和自我管理解决方案，陪伴严肃，耐心，永不妥协的终身学习者！</p>
    </div>
    <div class="seventh_body_tow">
      <img src="./img/屏幕截图 2025-03-23 151334.png" alt="">
      <h4>刘润·进化的力量</h4>
      <p>刘润老师是润米咨询创始人，“5分钟商学院”课程主理人，著名企
        业顾问，曾为海尔、恒基、中远海运、中航油、中石化等多家企业提供战
        略咨询服务，每10月举办”进化岛的力量年度演讲”...</p>
    </div>
    <div class="seventh_body_three">
      <img src="./img/屏幕截图 2025-03-23 145325.png" alt="">
      <h4>佰君易直播间</h4>
      <p>白君易直播间，由培养过10万项目管理师的王远航老师打造，为各行业提供项
        目管理实战培训，佰君易直播间与小鹅通深度合作，帮助职场小伙伴升职记加薪</p>
    </div>
    
  </div>
  <div class="seventh_feet">
    <ul class="seventh_feet_one">
      <li>
        <img src="./img/屏幕截图 2025-03-23 151439.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151445.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151449.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151455.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151459.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151503.png" alt="">
        
      </li>
      
    </ul >
    <ul class="seventh_feet_one">
      <li>
        <img src="./img/屏幕截图 2025-03-23 151508.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151512.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151519.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151523.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151527.png" alt="">
        
      </li>
      <li>
        <img src="./img/屏幕截图 2025-03-23 151536.png" alt="">
        
      </li>
      
    </ul>
    <button class="seventh_feet_b">更多案例</button>
    
    
  </div>
</div>
<!----------------------------- 第八张---------------------->
<div class="eighth">
  <div class="eighth_header">
    <h2>立即扫码咨询，领取您专属的解决方案</h2>
  </div>
  <div class="eighth_feet">
    <div class="eighth_feet_one">
      <img src="./img/m2cobck10ujl.webp" alt="">
    </div>
    <div class="eighth_feet_tow">
      <div class="eighth_feet_tow_one">
       <h4>扫码添加客户经理</h4>
       <p>或者你也可以先</p>
      </div>
       <button>免费试用</button>
    </div>
  </div>
</div>
<!---------------------------------------------------- 第九张------------------------------------------------------------------------->
 <div class="ninth">
  <div class="ninth_header">
    
    <ul class="ninth_header_one">
      <li>场景</li> 
      <li>全域获客</li> 
      <li>私域运营</li> 
      <li>直播带货</li> 
      <li>内容交付</li> 
      <li>数据化运营</li> 
      <li>企业内训</li> 
    </ul>
    <ul class="ninth_header_one">
      <li>零售店商</li> 
      <li>职业培训</li> 
      <li>知识付费</li> 
      <li>企业营销</li> 
      <li>美业直播</li> 
      <li>企业培训</li> 
      <li>社区团购</li> 
      <li>营销会务</li> 
    </ul>
    <ul class="ninth_header_one">
      <li>产品</li> 
      <li>知识店铺</li> 
      <li>私域直播</li> 
      <li>企微SCRM</li> 
      <li>企学院</li> 
      <li>智能投放</li> 
      <li>海外版elink</li> 
      <li>小鹅云</li> 
    </ul>
    <ul class="ninth_header_one">
      <li>服务</li> 
      <li>小鹅创业社区</li> 
      <li>本地社群</li> 
      <li>教练联盟</li> 
      <li>小鹅通训练营</li> 
      <li>对话标杆</li> 
      
    </ul>
    <ul class="ninth_header_one">
      <li>关于我们</li> 
      <li>公司简介</li> 
      <li>加入我们</li> 
      <li>媒体报道</li> 
      <li>更多咨询</li> 
      <li>客户案例</li> 
      <li>帮助中心</li> 
    </ul>
    <ul class="ninth_header_one">
      <li>媒体报道</li>
      <li>D轮融资1.2亿美元，小鹅通究竟在做什么？</li>
      <li>知识付费用户达5.27亿，内容创下的..半场风..</li>
      <li>知识工作者的终极梦想，可能是拥有一个“第二...</li>
      <li>小鹅通：让知识更有价值</li>
      <li>小鹅通联合艾瑞咨询发布《2023....</li>
    </ul>
    
    <div class="ninth_header_tow">
      <div class="ninth_header_tow_one">
       <h4>400-102-6665</h4>
       <p>周一至周日 9:00-18:00</p>
      </div>
      <div class="ninth_header_tow_tow">
       <div class="ninth_header_tow_tow1">
         <img src="./img/屏幕截图 2025-03-23 213758.png" alt="">
         <p>关注小鹅通公众号</p>
       </div>
       <div class="ninth_header_tow_tow1">
         <img src="./img/屏幕截图 2025-03-23 213758.png" alt="">
         <p>进入小鹅创业社区</p>
       </div>
      </div>
    </div>

  </div>
  <div class="ninth_footer">
    <div class="ninth_footer_one">
      <ul class="ninth_footer_one_ul">
      <p>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼
      </p>
      <p>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</p>
      <p>上海地址：中国（上海）自由贸易试验区纪大道1500号1601-A室</p>
      </ul>
      <ul class="ninth_footer_one_ul">
        <li>商务合作：support@xiaoe-tech.com</li>
        <li>渠道合作：partner@xiaoe-tech.com</li>
        <li>投诉意见：xiaoeks@xiaoe-tech.com</li>

      </ul>
      <ul class="ninth_footer_one_ul">
        <li>互联网违法和不
          良信息举报电话：0755-26409534</li>
        <li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li>
        <li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li>
        
      </ul>
    </div>
    <div class="ninth_footer_tow">
      <ul class="ninth_footer_tow_ul">
        <li>友情链接</li>
        <li>知识付费软件</li>
        <li>知识付费平台</li>
        <li>小鹅通企学院</li>
        <li>私域直播工具</li>
        <li>小鹅通APP</li>
        <li>小鹅创业社区</li>
        <li>小鹅通移动版</li>
        <li>小鹅通学员版</li>
      </ul>
          
        

    </div>
    <div class="ninth_footer_three">
      <div class="ninth_footer_three_one">
        <p>使用临床急需进....</p>
        <ul class="ff">
         
        <p>
          
          工商营业执照
          粤公网安备 44030502002037号
          </p>
          <p>工商网监 电子标识</p>
        </ul>
      </div>>
      <!-- <div class="ninth_footer_three_tow">
        <p>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights
           Reserved. 粤ICP备15020529号-1</p>
        <p>互联网药品信息服务资格证书（粤）—经营性—2020—0589
          医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</p>
        </div> -->
    </div>
    <div class="ninth_footer_three_tow">
      <p>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights
         Reserved. 粤ICP备15020529号-1</p>
      <p>互联网药品信息服务资格证书（粤）—经营性—2020—0589
        医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</p>
      </div>
  </div>
 </div>
</body>
</html>
css
···.whole{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}   
.first{
    width: 100%;
    height: 830.6px;
    /* background-color: #961e70; */
    display: flex;
    flex-direction: column;
    align-items: center;
   background-image: url(./img/m28mek5n0yyx\ \(1\).webp);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
.header{
    width: 100%;
    height: 70px;
    /* background-color: #1dc43e; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header .one{
     width: 1300px;
    height: 71.99px;
    /* background-color: #bdbacd;  */
   display: flex;
  justify-content:flex-start;
  
   align-items: center;
    font-size: 15px;
    list-style: none;
    
}

.header:hover{
    background-color:#f3f0f2;
    cursor: pointer;
    /* 点击进去变成小手 */
}
.ff{
    padding: 30px;
}
/* 确保导航栏元素都在同一行显示 */
/* 图片样式调整 */
.ff_i img {
    height: 1.5em; /* 与文字高度一致 */
    width: auto;
    vertical-align: middle;
}
.two{
    width: 20%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
    font-size: 15px;
}   
.ff_b{
    width: 150px;
    height: 30px;
    /* background-color: #1dc43e; */
    border: 1px solid #3a33a4;
    border-radius: 5px;
    color: #3a33a4;
    margin: 5px;
}
.two .ff_b:nth-child(3){
    background-color: #d4d2f4;
    color: white;
}
.ff_b:hover{
    background-color: #3a33a4;
    color: white;
    cursor: pointer;
}
.two .ff_b:nth-child(3):hover{
    background-color: #9795aa;
    color: white;
    cursor: pointer;
}
/* -----------------------第二章------------------------- */
.second{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #b8daeb;
}
.second_header{
    width: 500px;
    height: 200px;
    
    display: flex;
    justify-content: center;
    align-items: self-end;
}
.second_header h2{
    font-size: 50px;
    font-weight: 600;
   
}
.second_feet img{
    width: 1600px;
    height: 600px;
}
.second_feet_two{
    display: flex;
    width: 1600px;
    height: 300px;
    justify-content: space-between;
    align-items: center;
}
.second_feet_two li{
   list-style: none;
    height:180px;
    width: 450px;
    background-color: white;
    border:30px solid  white;
    border-radius: 20px;    
    padding: 0 5px;
}
 .second_feet_two li .ss_b{
    color: #14a4e7;
    padding:10px 15px;
    
}
.second_feet_two li .ss_b:hover{
    cursor: pointer;
}
/* ----------第三章------------------第三章------------ */
.third{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
background-color: #bcf0f5;


}
.third_header{
width: 500px;
height: 300px;

display: flex;
justify-content: center;
align-items: self-end;
}
.third_header h2{
    font-size: 50px;
    font-weight: 600;
}
.third_body{
width: 800px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid white;
border-radius: 20px;
background-color: white;
margin: 20px;
}



.third_body p:hover {
    cursor: pointer;
    background-color: #150bd1;
    color: white;
    border: 1px solid white;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 150px;
}
.third_feet{
    background-color: white;
    border-radius: 20px;
    
    width: 1600px;
    height: 600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:50px;
    margin-bottom: 20px;
   
}
.third_feet img{
    width: 850px;
    height: 600px;
    padding: 0;
    margin-left: 0;
}
.third_feet_one{
    width: 700px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 20px 40px !important;
    padding: 10px 20px !important;
}
.third_feet_tow {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-bottom: 30px !important;
}
.third_feet_tow h3{
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 10px !important;
    color: rgb(1, 0, 0);
}
.third_feet_tow h4{
    font-size: 18px;
    color: #444;
    margin-bottom: 20px !important;
}
.third_feet_three{
    list-style: none;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
}

.third_feet_three li {
    padding-left: 30px !important;
    position: relative;
    margin-bottom: 20px !important;
    line-height: 1.6;
    font-size: 16px;
    color: #333;
}

.third_feet_three li::before {
    content: "";
    background-image: url(./img/下载.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
}

.third_feet_b{
    margin:20px;
}
.third_feet_b button:nth-child(2){
    width: 150px;
    height: 40px;
    border: 1px solid #150bd1;
    border-radius: 5px;
    background-color: white;
    color: #150bd1;
    padding: 5px 10px;
}
.third_feet_b button:nth-child(2):hover{
    cursor: pointer;
    background-color: #150bd1;
    color: white;
}
.third_feet_b button:nth-child(1){
    width: 150px;
    height: 40px;
    border: 1px solid #150bd1;
    border-radius: 5px;
    background-color: rgb(76, 81, 240);
    color: #eaeaf3;
    padding: 5px 10px;
    margin: 20px;
}
.third_feet_b button:nth-child(1):hover{
    cursor: pointer;
    background-color: #7d9ddd;
    color: white;
}
/* -----------------------第四个张------------------------- */
.fourth{
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(./img/m0w7ssdh01vr\(1\).png);  
    background-size: cover;
    background-position: center;
}
.fourth_header{
    width: 500px;
    height: 100px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.fourth_header h2{
    font-size: 50px;
    font-weight: 600;
    color: white;
}
.bf{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fourth_bf{
    width: 1600px;
    height: 500px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #232128;
}
.fourth_body_one{
    width: 200px;
    height: 500px;
    color: white;
    font-size: 20px;
    font-weight: 600;
    background-color: #3e394b;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    align-items: flex-start;    
}
.fourth_body_one p{
    margin: 10px;
    padding: 10px;
  
     
}
.fourth_body_one p:hover{
    cursor: pointer;
    
    background: linear-gradient(to right, #7873d1, #423e55);
    font-size: 25px;
    border-radius: 10px;
    width: 190px;
    height: 60px;
}
.fourth_body_tow{
    width: 1400px;
    height: 500px;
    /* background-color: #4f22be; */
    display: flex;
    
    justify-content: space-between;
    align-items: center;
}
.fourth_body_tow_one{
  /* background-color: #4cdfbd; */
  width: 1000px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 20px;
  

}
.fourth_body_tow_one h5{
    font-size: 30px;
    font-weight: 600;
    color: white;
}
.fourth_body_tow_one p{
    font-size: 20px;
    color: white;
    margin: 10px;
}
.fourth_body_tow_one_ul{
    list-style: none;
    font-size: 20px;
    color: white;
    margin: 10px; 
    padding: 10px;
    display: flex;
   font-size: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}
.fourth_body_tow_one_ul li{
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
    width: 90px;
    height: 90px;
    
    line-height: 60px;
    /* background-color: rgb(56, 162, 207); */
}
.fourth_body_tow_tow{
   display: flex;
   flex-direction: row;
   
}
.fourth_body_tow_b:nth-child(1){
    width: 180px;
    height: 40px;
    border: 1px solid rgb(39, 85, 163);
    border-radius: 5px;
    background-color: rgb(39, 85, 163);
    margin: 10px;
    padding: 10px;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 20px;
}
.fourth_body_tow_b:nth-child(2){
    background-color: none;
    color: rgb(39, 85, 163);
    width: 180px;
    height: 40px;
    border: 1px solid rgb(39, 85, 163);
    border-radius: 5px;
    
    margin: 10px;
    padding: 10px;
    background-color: rgb(54, 55, 76);
    font-size: 20px;
    text-align: center;
    line-height: 20px;
}
.fourth_body_tow_b:nth-child(1):hover{
    cursor: pointer;
    background-color: rgb(77, 108, 162);
    color: white;
}
.fourth_body_tow_b:nth-child(2):hover{
    cursor: pointer;    
    color:white
}
.fourth_feet{
    width: 400px;
    height: 400px;
    background-color: #232128;
    color: white;
    font-size: 20px;
    border-left: 1px solid rgb(74, 71, 94);
    /* background-color: #150bd1; */
    display: flex;
    justify-content: center;
    


    
}
.fourth_feet p{
   margin: 20px;
   padding: 20px; 
   font-size: 20px;
}
/* -------------------------------第五张------------------ */
.fifth {
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: #ff9900; 之前修改的明显的橙色 */
    /* box-sizing: border-box; */
    /* margin-top: 0; 移除顶部外边距，因为结构已修复 */
    /* padding: 50px 0; 添加内边距使内容更清晰 */
}

.fifth_header {
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.fifth_header h2 {
    font-size: 50px;
    font-weight: 600;
}

.fifth_feet {
    width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fifth_feet_one, .fifth_feet_tow, .fifth_feet_three {
    width: 500px;
    height: 400px;
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    margin: 0 15px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.fifth_feet_one {
    background-image: url(./img/m10c72vn0zzo\ \(1\)\(1\).png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.fifth_feet_tow{
    background-image: url(./img/m04n363709k8\ \(1\)\(1\).png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}
.fifth_feet_three{
    background-image: url(./img/m04n363e0jjz\(1\).png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
}


.fifth_feet h3 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 5;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
    line-height: normal;
    /* background-color: rgba(0,0,0,0.4); */
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    margin: 20px auto;
}

.fifth_feet p {
    font-size: 18px;
    color: white;
    text-align: center;
    position: relative;
    z-index: 5;
    /* text-shadow: 1px 1px 3px rgba(0,0,0,0.7); */
    line-height: normal;
    /* background-color: rgba(0,0,0,0.4); */
    padding: 10px;
    border-radius: 10px;
    width: 80%;
    margin: 0 auto;
}

/* ------------------------- 第六张---------------------- */
.sixth{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: white;
    margin-top: 0;
    padding: 50px 0;
    position: relative;
    z-index: 2;
    box-shadow: 0px -10px 30px rgba(0,0,0,0.1);
    border-top: 1px solid #eee;
}

.sixth_header{
    width: 500px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.sixth_header h2{
    font-size: 50px;
    font-weight: 600;
    color: #333;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

/* 修改轮播容器 */
.sixth_feet{
    width: 100%;
    max-width: 1800px;
    height: auto;
    position: relative; /* 添加相对定位 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center; /* 改为垂直居中 */
    overflow: hidden; /* 隐藏溢出部分，不显示滚动条 */
    padding: 0;
}

/* 增大图片大小 */
.sixth_feet_one img, .sixth_feet_tow img, .sixth_feet_three img, .sixth_feet_four img{
    width: 450px;
    height: 350px;
    object-fit: contain;
    margin-bottom: 20px;
}

/* 减小卡片间距，保持内容紧凑 */
.sixth_feet_one, .sixth_feet_tow, .sixth_feet_three, .sixth_feet_four{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: transparent;
    padding: 10px;
    width: 460px;
    min-width: 460px;
    height: auto;
    margin: 5px;
    box-shadow: none;
    flex-shrink: 0; /* 防止卡片被压缩 */
}

/* 文字样式调整 */
.sixth_feet_one h4, .sixth_feet_tow h4, .sixth_feet_three h4, .sixth_feet_four h4{
    font-size: 22px;
    font-weight: 600;
    margin: 10px 0;
    color: #333;
}

.sixth_feet_one p, .sixth_feet_tow p, .sixth_feet_three p, .sixth_feet_four p{
    font-size: 16px;
    line-height: 1.4;
    color: #666;
}

/* 导航按钮样式 */
.sixth_nav_buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
}

.sixth_nav_buttons button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: #eee;
    color: #333;
    font-size: 18px;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sixth_nav_buttons button:hover {
    background-color: #ddd;
}
/* -----------------------第七张---------------------- */
.seventh{
    width: 100%;
    height: 1100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(./img/lzuvu9jp0vcl\(1\).png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.seventh_header{
    width: 600px;
    height: 200px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.seventh_header h2{
    font-size: 50px;
    font-weight: 600;
}
.seventh_header p{
    font-size: 20px;
    /* color: #666; */
}
.seventh_body{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 1600px;
    height: 500px;
    padding: 10px;
}
.seventh_body_one, .seventh_body_tow, .seventh_body_three{
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 10px;
    border-color: #f3f2f2;
    padding: 10px;
    margin: 10px;
    /* background-color: white; */
    /* text-align: center;
    line-height: 20px; */
}
.seventh_body_one img, .seventh_body_tow img, .seventh_body_three img{
    width: 350px;
    height: 250px;
    text-align: center;
    line-height: 20px;
}
.seventh_body_one h4, .seventh_body_tow h4, .seventh_body_three h4{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
}
.seventh_body_one p, .seventh_body_tow p, .seventh_body_three p{
    font-size: 16px;
}
.seventh_feet{
    width: 1600px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.seventh_feet_one{
    width: 1250px;
    height: 250px;
    display: flex;
    flex-direction: column;
    

}
.seventh_feet_one img{
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
width: 180px;
height: 130px;
border-color: white;
;
}
.seventh_feet_one {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.seventh_feet_b{
    width: 150px;
    height: 40px;
    border: 1px solid #698fe3;
    border-radius: 2px;
    color:#14a4e7 ;
    margin-top: 10px;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
}
.seventh_feet_b:hover{
    cursor: pointer;
}
/* ----------------------------第八张---------------------------- */
.eighth{
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(55, 96, 233);
}
.eighth_header{
    width: 1000px;
    height: 90px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.eighth_header h2{
    font-size: 35px;
    font-weight: 600;
    color: white;
}
.eighth_feet{
    width: 800px;   
    height: 300px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
}
.eighth_feet_one{
    width: 180px;  
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.eighth_feet_one img{
    width: 150px;
    height: 150px;
    margin-right: 10px;
}
.eighth_feet_tow{
    width: 250px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 20px;
}
.eighth_feet_tow h4{
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
}
.eighth_feet_tow p{
    font-size: 18px;
    color: white;
}
.eighth_feet_tow button{    
    width: 120px;
    height: 36px;
    border: 1px solid #698fe3;
    border-radius: 3px;
    color:#14a4e7;
    margin-top: 15px;
    font-size: 16px;
    text-align: center;
    line-height: 36px;
    background-color: white;
}
.eighth_feet_tow button:hover{
    cursor: pointer;
}
/* ----------------------------第九张------------------------------- */
.ninth{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    justify-content: center;
    background-color: rgb(22, 30, 48);
}
/* 恢复原始.ninth布局 */
.ninth_header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    /* background-color: #14a4e7;   */
}

.ninth_header_one {
    width: 200px;
    height: 500px;
    font-size: 15px;
    color: rgb(130, 134, 144);
    list-style: none;
    display: flex;
    flex-direction:column;
    margin: 20px;
    align-items: flex-start;
    line-height: 2.5;
}
.ninth_header_one li:nth-child(1){
    list-style: none;
    font-size: 20px;
    color: white;
}
.ninth_header_tow{
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
/* background-color: #333; */
/* margin-bottom: 50px; */
width: 200;
height: 500;
}

.ninth_header_tow_tow {
    /* background-color: #14a4e7; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.ninth_header_tow_tow1 {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.ninth_header_tow_tow1 img{
    width: 90px;
    height: 90px;
    margin-bottom: 0px;
}
.ninth_header_tow_tow1 p{
    line-height: 2.5;
    font-size: 15px;
    color: rgb(130, 134, 144);
}
.ninth_header_tow_one h4{
    line-height: 2.5;
    font-size: 20px;
    color: white;
}
.ninth_header_tow_one p{
    line-height: 2.5;
    font-size: 15px;
    color: rgb(130, 134, 144);
}
.ninth_footer{  
    width: 100%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    justify-content: center;
    margin-left: 85px;
}
.ninth_footer_one{
    width: 100%;
    /* height: 400PX; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    line-height: 2;
}
.ninth_footer_one_ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 2.5;
    margin-left: 50px;
    color: rgb(130, 134, 144);
}
.ninth_footer_one_ul:nth-child(1){
    line-height: 2;
    font-size: 15px;
    color: rgb(130, 134, 144);
    margin-left: 150px;
}
.ninth_footer_one_ul li{ 
    line-height: 2;
    font-size: 15px;
    color: rgb(130, 134, 144);
}

 .ninth_footer_tow{
    width: 1800px;
    height: 45px;
    border: 1px solid;
    border-color: rgb(130, 134, 144);
    border-left: 0;
    border-right: 0;
    margin-left: 150px;
 }   
 
.ninth_footer_tow_ul{
    display: flex;
    align-items: center;
    color: rgb(130, 134, 144);
    list-style: none;
    justify-content:space-between ;
    width: 1000px;
    height: 45px;
    /* border: 1px solid;

    border-color: rgb(130, 134, 144); */
    /* margin-left: 150px; */
    /* border-left: 0; */
    /* border-bottom: 00px;
    border-top: 2000px; */
    /* border-right: 0; */
    /* margin-right: 10px; */
}

   
.ninth_header_tow_ul li{
    /* padding: 20px;
    margin-right: 40px; */
    letter-spacing: 50px;
   
   
}
.ninth_footer_three{
    display: flex;
    width: 1500;
    height: 100px;
    flex-direction: column;
    /* background-color: #15516c; */
    /* justify-content: center; */
}
.ninth_footer_three_one{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: rgb(130, 134, 144);
    margin-left: 150px;
}.ff{   
    width: 700px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: rgb(130, 134, 144);
    /* margin-left: 150px; */
}
.ninth_footer_three_tow{
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* align-items: center; */
    color: rgb(130, 134, 144);
    margin-left: 150px;
    /* background-color: #15516c; */
}
###效果展示
[图片上传失败...(image-8bf452-1742808928259)]]
![屏幕截图 2025-03-24 172828.png](https://upload-images.jianshu.io/upload_images/30319093-cf083d7a3448afd0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![屏幕截图 2025-03-24 173356.png](https://upload-images.jianshu.io/upload_images/30319093-286c9cd15f0e248f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2025-03-24
    我不去想是否成功，既然选择了远方，便只顾风雨兼程！
    蕰莎丽人阅读 30评论 0赞 2
  • 2025-03-24
    ①口腔黏膜（以舌表面为主） 烧灼样疼痛，或具有异常感为主诉，疼痛为晨轻晚重，空闲时加重，工作、吃饭、熟睡时反而减轻...
    灼口综合征预约号阅读 34评论 0赞 0
  • 2025-03-24
    《以色彩为诗，用妆容书写生活的温柔叙事》 亲爱的，你知道吗？彩妆不是面具，而是一支神奇的画笔，让每个平凡的日子都能...
    繁华三千不过云烟阅读 29评论 0赞 1
  • 2025-03-24
    养成随手解决小事的习惯，最大的意义是什么？那就是是渐渐获得“自己可以解决任何事情”的信念，并且形成高效解决问题的思...
    呜呜呜_a52a阅读 30评论 0赞 0
  • 2025-03-24 余地远望
    多留余地不明月， 不筑高墙远望山。 古风扑面余韵在， 明眼净心音绕梁！
    升远中西文化阅读 19评论 0赞 0