<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="icon" href="https://www.etia-tech.com/favicon.ico">
  <title>上海怡天科技有限公司</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="keywords"
    content="21440，21940，21970，21980，22830，012-64000R，-196度标签，200W紫外灯，25番PI，50番PI，94V0标签，94Vtm0，Computype，Datalogic120，Datalogic300，E1836，E-1836，E-2311，E-2712，E2813，E-2813，E-2814，E-3635，E-4533，E6534，E-6534，E8511，E-8511，E8512，E-8512，E-8531，E-8532TT，EFD，EFD点胶阀，EFD点胶套管，EFD点胶套筒，efd点胶针头，EFD胶管，Elabel，ESD胶带，EXCELITAS，EXFO，EXFO代理，FLEXCON，GHS标签，GHS打印机，GHS化工标签，GHS碳带，HP-120，HP-150，HP360，HP-360，HP600，HP-600，HP700，HP-700，HP900，HP-900，HP-CX2，HP-L80，HP-L90，LEDUV光源，LED紫外光源，Lumen，LumenDynamics，LX500，LX505，Nordson点胶机，Ominicure，Omnicure，OmnicureAC，OmnicureR2000，OmnicureS1000，OmnicureS1500，OmnicureS2000，OmnicureS2000-Elite，OmnicureUV灯，OmniCureLX500，OmniCureLX505，OmniCureS1500，OmniCureS2000，PE冻存管，polyonics，PolyonicsXF-533，PolyonicsXF-581，PolyonicsXF-583，RFID标签，Rfid打印机，Rfid工业读写器，Rfid门通道，Rfid通道机，Rfid资产管理，S2000，TS502，TS955，TS978，UL94V0，UL认证标签，UVLED光源，UV点光源，UV点光源厂家，UV点胶阀，UV固化，UV光固化，UV光源，UV光源厂家，UV紫外固化，XF531，XF-531，XF533，XF-533，XF-555，XF557，XF-557，XF581，XF-581，XF582，XF-582，XF583，XF-583，XF592，XF-592，XF603，XF-603，XF781，XF-781，XF-782，XF-8606，XF8972，XF-8972，XT-679，XT-744，XT-790，YStech，YS-350，YS4，YS-4，YS吊牌，YS钢铁标签，YS耐高温标签，埃赛力达，安全气囊标签，白色碳带，板坯标签，宝力昂尼，宝力昂尼标签，宝力昂尼耐高温标签，宝尼昂尼，标签低温，标签耐低温，标签碳带，玻璃标签，采血管标签，彩色高温标签，彩色户外标签，彩色碳带，测光表，超薄标签，超低温标签，超精细打印标签，大方坯标签，单面耐高温胶带，等离子清洗指示标签，低温标签，低温标签厂家，低温食品标签，低温试管标签，点胶针头，电池标签，电镀标签，电力标牌，电力标识，电子标签，冻存管标签，对粘标签，发动机标签，防静电标签，防静电耐高温胶带，防水标签，富力标签，钢材标签，钢卷标签，钢铁标签，钢铁吊牌，钢铁碳带，高精密点胶机，高温PI，高温标签，高温标签材料，高温蒸汽灭菌标签，固化设备，管道标签，光强计，硅胶标签，硅胶耐高温胶带，过氧化菌低温灭菌标签，耗材柜，黑色高温标签，黑色耐高温标签，户外标签，户外标识，化工危险品标签，化学指示标签，环氧乙烷灭菌指示标签，激光标签，激光标识，激光蚀刻标签材料，加拿大紫外线固化，加拿大紫外线固化设备，胶筒，精密点胶阀，精密自动点胶机，精细打印标签，聚酰亚胺标签，菌种玻璃管标签，抗静电标签，烤漆涂装标签，可丝印标签，镭射标签，冷冻标签，冷链标签，锂电池标签，硫化标签，硫化标识，硫化碳带，铝箔标签，轮胎标识，轮胎硫化标签，灭菌封包胶带，灭菌指示标签，模具标签，耐UV标签，耐丙酮碳带，耐低温标签，耐低温标签材料，耐低温标签厂家，耐低温碳带，耐二甲苯碳带，耐高温标签，耐高温标签厂家，耐高温吊牌，耐高温钢铁标签，耐高温可移标签，耐高温碳带，耐高温阻燃标签，耐刮擦碳带，耐候标签，耐候碳带，耐候性标签，耐化学腐蚀碳带，耐酒精擦拭碳带，耐酒精碳带，耐汽油浸泡碳带，耐水洗碳带，耐酸洗标签，耐温1000度，耐温1300度，耐温800度，耐橡皮擦碳带，耐盐雾碳带，耐油污标签，耐油污碳带，耐蒸煮标签，耐蒸煮碳带，耐正乙烷碳带，耐紫外线标签，尼龙布标签，诺信点胶机，排气管标签，皮带标签，皮带碳带，汽车零部件标签，汽车零件标签，汽车零配件标签，汽车轮毂标签，汽车配件标签，汽车线束标签，汽配标签，强粘标签，热处理标签，热轧卷标签，日本YS，柔抗标签，实验室标签，实验室低温标签，试管标签，双面耐高温胶带，陶瓷标签，陶瓷碳带，特种标签，特种胶带，特种胶带厂家，贴标机，透明标签，线缆标签，线缆旗标，线缆阻燃标签，线束标签，小方坯标签，蓄电池标签，血袋标签，压力蒸汽灭菌标签，液氮标签，液氮低温标签，医疗标签，医用标签，医用低温标签，医用消毒封包胶带，圆棒标签，载玻片标签，蒸汽灭菌标签，紫外汞灯，紫外固化，紫外光固化机，紫外光源，紫外线固化，自动贴标，阻燃标签，阻燃耐高温胶带" />
  <meta name="description"
    content="上海怡天科技有限公司是一家致力于工业数字化标签材料供应商，是MES标签的拓荒者。公司成立于2004年，与众多知名品牌合作研发定制，为国内电子、钢铁、汽车、橡胶陶瓷、医疗器械等制造业提供生产过程管控所需的特种标签材料和设备。以满足诸如耐高温、防静电、耐撕裂、导热导电、耐油污、耐强酸强碱等特殊要求" />

  <!--基础样式-->
  <link href="css/style.css" rel="stylesheet" />
  <!--顶部导航菜单样式-->
  <link href="css/menu.css" rel="stylesheet" />
  <!--底部样式-->
  <link href="css/footer.css" rel="stylesheet" />
  <!--首页页面样式-->
  <link href="css/index.css" rel="stylesheet" />
  <!-- swiper 插件样式 -->
  <link rel="stylesheet" href="css/swiper-bundle.min.css">

  <!--video model 视频弹框模块-->
  <link href="css/video-model.css" rel="stylesheet" />
</head>

<!-- oncontextmenu="doNothing()"  想用谷歌翻译插件，问能不能开启首页右键，其他页面不开启 -->
<body>
  <!-- 页面 -->
  <div id="app">
    <!-- 顶部导航菜单 start -->
    <div class="header-component">
      <header class="pc-header">
        <div class="logo">
          <img class="lazyload" data-src="../../assets/common/logo.png" alt="LOGO" />
        </div>
        <div class="header-center">
          <div class="search-input">
            <!-- 搜索 -->
            <span class="search-icon">
              <i class="search-icon-text">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor"
                    d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704z">
                  </path>
                </svg>
              </i>
            </span>
            <input class="" type="text" autocomplete="off" tabindex="0" placeholder="请输入搜索内容" id="inputField" />
          </div>
          <div class="menu-list">
            <div class="menu-item active">
              <a href="/">首页</a>
              <span class="border-bottom"></span>
              <div class="sub-menu-list" style="display: none"></div>
            </div>
            <div class="menu-item">
              <div class="title">全系产品</div>
              <span class="border-bottom"></span>
              <div class="sub-menu-list sub-menu-list-show">
                <div class="sub-menu-item">
                  <a href="/high-performance-label.html">高性能标签</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/functional-tape.html">功能胶带</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/uv-curing-equipment.html">紫外光固设备</a>
                  <div class="last-menu-list-show">
                    <div class="sub-menu-item-last">
                      <a href="/solution.html">解决方案</a>
                    </div>
                    <div class="sub-menu-item-last">
                      <a href="/breakdown.html">故障维修</a>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div class="menu-item">
              <a href="/label-industry-apply.html">标签行业应用</a>
              <span class="border-bottom"></span>
            </div>
            <div class="menu-item">
              <a href="/equipment-industry-apply.html">紫外光固行业应用</a>
              <span class="border-bottom"></span>
            </div>
            <div class="menu-item">
              <div class="title">服务支持</div>
              <span class="border-bottom"></span>
              <!-- 二级菜单 -->
              <div class="sub-menu-list sub-menu-list-show">
                <div class="sub-menu-item">
                  <a href="/resource-download.html">资料下载</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/online-service.html">在线咨询</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/refund-service.html">授权资质</a>
                </div>
              </div>
            </div>
            <div class="menu-item">
              <a href="/news-center.html">新闻中心</a>
              <span class="border-bottom"></span>
            </div>
            <div class="menu-item">
              <div class="title">关于怡天</div>
              <span class="border-bottom"></span>
              <div class="sub-menu-list sub-menu-list-show-4">
                <div class="sub-menu-item">
                  <a href="/company-profile.html">公司简介</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/partner.html">合作伙伴</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/recruitment.html">招贤纳士</a>
                </div>
                <div class="sub-menu-item">
                  <a href="/standard-declaration.html">标准说明</a>
                </div>
              </div>
            </div>
          </div>
          <div class="login-btn">
            <img class="avatar lazyload" data-src="../../assets/home/login-user.png" alt="" /><a
              href="/online-service.html">登录</a>
          </div>
        </div>
      </header>
      <!-- 移动端header -->
      <header class="mobile-header">
        <div class="logo">
          <a href="/">
            <img class="lazyload" data-src="../../assets/mobile/logo.png" alt="怡天科技" />
          </a>
        </div>
        <div class="header-right">
          <div class="right-content">
            <div class="header-icon">
              <a href="/online-service.html">
                <img class="login-icon lazyload" data-src="../../assets/mobile/login-user.png" alt="用户" />
              </a>
            </div>
            <div class="search-btn header-icon">
              <div class="search-icon">
                <img class="lazyload" data-src="../../assets/mobile/icon-top-search.png" alt="搜索" />
              </div>
              <div class="close-icon">
                <img class="lazyload" data-src="../../assets/mobile/icon-close.png" alt="关闭" />
              </div>
            </div>
            <div class="menu-btn header-icon">
              <div class="menu-icon">
                <img class="lazyload" data-src="../../assets/mobile/icon-menu.png" alt="菜单" />
              </div>
              <div class="close-menu">
                <img class="lazyload" data-src="../../assets/mobile/icon-close.png" alt="关闭" />
              </div>
            </div>
          </div>
          <div class="search-content">
            <div class="search-box">
              <div class="el-input search-input">
                <div class="el-input__wrapper">
                  <input id="inputFieldMobile" class="el-input__inner" type="text" autocomplete="off" tabindex="0"
                    placeholder="请输入搜索内容">
                </div>
              </div><i id="searchMobile" class="search-icon-append"></i>
            </div>
          </div>
          <div class="menu-list">
            <div class="menu-item active">
              <div class="header">
                <a class="title" href="/" target="_top">首页</a>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <div class="title">全系产品</div>
                <i class="arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor"
                      d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8 316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z">
                    </path>
                  </svg>
                </i>
              </div>
              <div class="sub-content">
                <div class="sub-menu-item"><a href="/high-performance-label.html" target="_top">高性能标签</a></div>
                <div class="sub-menu-item"><a href="/functional-tape.html" target="_top">功能胶带</a></div>
                <div class="sub-menu-item">
                  <div class="header">
                    <a href="/uv-curing-equipment.html" target="_top">紫外光固设备</a>
                    <i class="sub-arrow">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor"
                          d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8 316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z">
                        </path>
                      </svg>
                    </i>
                  </div>
                  <div class="last-content">
                    <div class="last-menu-item"><a href="/solution.html">解决方案</a></div>
                    <div class="last-menu-item"><a href="/breakdown.html">故障维修</a></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <a class="title" href="/label-industry-apply.html" target="_top">标签行业应用</a>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <a class="title" href="/equipment-industry-apply.html" target="_top">紫外光固行业应用</a>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <div class="title">服务支持</div>
                <i class="arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor"
                      d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8 316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z">
                    </path>
                  </svg>
                </i>
              </div>
              <div class="sub-content">
                <div class="sub-menu-item"><a href="/resource-download.html" target="_top">资料下载</a></div>
                <div class="sub-menu-item"> <a href="/online-service.html" target="_top">在线咨询</a></div>
                <div class="sub-menu-item"> <a href="/refund-service.html" target="_top">授权资质</a></div>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <a class="title" href="/news-center.html" target="_top">新闻中心</a>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <div class="title">关于怡天</div>
                <i class="arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                    <path fill="currentColor"
                      d="M104.704 685.248a64 64 0 0 0 90.496 0l316.8-316.8 316.8 316.8a64 64 0 0 0 90.496-90.496L557.248 232.704a64 64 0 0 0-90.496 0L104.704 594.752a64 64 0 0 0 0 90.496z">
                    </path>
                  </svg>
                </i>
              </div>
              <div class="sub-content">
                <div class="sub-menu-item"><a href="/company-profile.html" target="_top">公司简介</a></div>
                <div class="sub-menu-item"><a href="/partner.html" target="_top">合作伙伴</a></div>
                <div class="sub-menu-item"><a href="/recruitment.html" target="_top">招贤纳士</a></div>
                <div class="sub-menu-item"><a href="/standard-declaration.html" target="_top">标准说明</a></div>
              </div>
            </div>
            <div class="menu-item">
              <div class="header">
                <a href="/online-service.html" target="_top">登录会员系统</a>
              </div>
            </div>
          </div>
        </div>
      </header>
    </div>
    <!-- 顶部导航菜单 end -->
    <!-- 内容区 start -->
    <div class="home-page">
      <!-- 轮播图 start -->
      <div class="banner-box">
        <div id="banner-swiper" class="swiper">
          <div id="banner-swiper-wrapper" class="swiper-wrapper"></div>
          <div class="swiper-button-prev swiper-btn">
          </div>
          <div class="swiper-button-next swiper-btn">
          </div>
        </div>
      </div>
      <!-- 轮播图 end -->
      <!-- 行业动态 start -->
      <div class="industry-dynamic-box">
        <div class="content-middle">
          <div class="title">行业动态</div>
          <div class="industry-dynamic-content">
            <div id="industry-dynamic-swiper" class="swiper">
              <div id="industry-dynamic-swiper-wrapper" class="swiper-wrapper">
              </div>
              <div class="swiper-pagination indicators">
              </div>
            </div>
          </div>
          <div class="swiper-navigation">
            <div class="swiper-button-prev swiper-btn">
            </div>
            <div class="swiper-button-next swiper-btn">
            </div>
          </div>
        </div>
      </div>
      <!-- 行业动态 end -->
      <!-- 不同行业/应用场景标签场景标签 start -->
      <div class="scene-labels">
        <div class="middle-content">
          <div class="title">
            <div class="main-title">不同行业/应用场景标签</div>
            <div class="sub-title">
              Labels of different application scenarios
            </div>
            <div id="checkMoreMobile" class="more pointer">
              <span>查看更多</span>
              <i class="el-icon el-icon-arrow-right"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                  <path fill="currentColor"
                    d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z">
                  </path>
                </svg></i>
            </div>
          </div>
          <div class="industry-list" id="industry-list">
          </div>
          <div class="check-more" id="checkMore">
            <span class="text">More</span><img class="lazyload" data-src="../../assets/home/icon-more-01.png" alt="" />
          </div>
        </div>
      </div>
      <!-- 不同行业/应用场景标签场景标签 end -->
      <!-- 行业定制化解决方案-pc端 -->
      <div class="custom-solution custom-solution-pc">
        <div class="middle-content">
          <div class="title">
            <div class="main-title">行业定制化解决方案</div>
            <div class="sub-title">Industry customized solutions</div>
          </div>
          <div class="solutions" id="solutions-list">
          </div>
        </div>
      </div>
      <!-- 行业定制化解决方案-移动端 -->
      <div class="custom-solution-mobile">
        <div id="custom-solution-swiper" class="swiper">
          <div id="custom-solution-swiper-wrapper" class="swiper-wrapper">
          </div>
        </div>
        <div class="points-container">
          <div :class="`point ${point_index === current_point ? 'active' : ''}`"
            v-for="(point, point_index) in solutions.length / 2" :key="point_index"></div>
        </div>
      </div>


      <!-- 热门标签应用展示 -->
      <div class="hot-videos">
        <div class="title-top flex-between">
          <div class="title">
            <div class="top-title">
              <div class="main-title">热门标签应用展示</div>
              <div class="sub-title">Popular tag application display</div>
            </div>
          </div>
          <div id="videoMoreMobile" class="video-more pointer">
            <span class="text font-18">查看更多</span><i class="el-icon el-icon-arrow-right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path fill="currentColor"
                  d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z">
                </path>
              </svg>
            </i>
          </div>
        </div>
        <div class="video-box">
          <div id="video-swiper" class="swiper">
            <div id="video-swiper-wrapper" class="swiper-wrapper"></div>
            <div class="swiper-button-prev swiper-btn">
            </div>
            <div class="swiper-button-next swiper-btn">
            </div>
          </div>
        </div>
        <div class="hot-video-more-box" id="videoMore">
          <div class="hot-video-more">
            <span class="text">More</span><img class="lazyload" data-src="../../assets/home/icon-more-01.png" alt="" />
          </div>
        </div>
      </div>

      <!-- 企业宣传视频 -->
      <div class="company-video">
        <div class="gray-bg"></div>
        <div class="middle-box">
          <div class="title">
            <div class="main-title">企业宣传视频</div>
            <div class="sub-title">Corporate Promotion video</div>
          </div>
          <div id="companyInfo" class="company-info">
          </div>
          <div id="companyVideo" class="video">
            <video muted controls id="company_video"></video>
          </div>
        </div>
      </div>
      <!-- 合作伙伴 -->
      <div class="company-partner">
        <div class="bar"></div>
        <div class="company-partner-content">
          <!-- 构造提示三角 -->
          <div class="img"></div>
          <div class="info">
            <div class="left">
              <div class="h3">合作伙伴</div>
              <div class="p">Cooperative Partner</div>
            </div>
            <div class="company-partner-box">
              <div id="company-partner-swiper" class="swiper">
                <div id="company-partner-swiper-wrapper" class="swiper-wrapper">
                </div>
                <div class="swiper-navigation">
                  <div class="swiper-button-prev swiper-btn">
                  </div>
                  <div class="swiper-button-next swiper-btn">
                  </div>
                </div>
                <div class="swiper-pagination">
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>

    </div>
    <!-- 内容区 end -->
    <!-- 底部 start-->
    <div id="footer_box"></div>
    <!-- <embed type="text/html" src="./footer.html" width="100%" height="100%" scrolling="no" /> -->
    <!-- 底部 end -->
    <!--联系客服 start-->
    <div class="contact-service">

    </div>
  </div>
  <!--公共JS引用start-->
  <!--JQ引用-->
  <script src="js/jquery.min.js"></script>
  <!-- swiper -->
  <script src="js/swiper-bundle.min.js"></script>
  <!--延迟加载的图像-->
  <script src="common/lazysizes.min.js"></script>
  <!--HTTP引用-->
  <script src="common/request.js"></script>
  <!--页面跳转引用-->
  <script src="common/tools.js"></script>
  <!--公共JS引用end-->
  <!--顶部菜单引用，备注：必须引用在页面跳转之后-->
  <script src="js/menu.js"></script>
  <!-- 底部版权 -->
  <script src="js/footer.js"></script>
  <!--vue版本path转化原生路径-->
  <script src="js/route-by-path.js"></script>
  <!--打开视频插件-->
  <script src="js/video-model.js"></script>
  <!-- 悬浮窗 -->
  <!-- <script src="js/float-window.js"></script> -->
  <script>
    $('#footer_box').load('./footer.html')
  </script>
  <script>
    const solutionsList = [
      {
        title: "按需打印解决方案",
        description: "",
        path: "/home/print-on-demand",
        image: "",
      },
      {
        title: "定制标签",
        description: "",
        path: "/home/custom-label",
        image: "",
      },
      {
        title: "自动贴标解决方案",
        description: "标签自动贴表方案配置",
        path: "/home/solution-content",
        image: "",
        query: {
          type: 3,
        },
      },
      {
        title: "数据采集解决方案",
        description: "",
        path: "/home/solution-content",
        image: "",
        query: {
          type: 4,
        },
      },
      {
        title: "汞灯式紫外光源固化方案",
        description: "",
        path: "/home/solution-content",
        image: "",
        query: {
          type: 5,
        },
      },
      {
        title: "LED紫外光源固化方案",
        description: "",
        path: "/home/solution-content",
        image: "",
        query: {
          type: 6,
        },
      },
    ];

    /************* banner展示模块start **************/
    const getBannerList = () => {
      let params = { type: 1 };
      request("app/home/banner_list", "GET", params, (res) => {
        const html = res.data
          .map((item, index) => {
            // SEO优化图片懒加载
            let imgHtml = `<img class="lazyload"  data-src="` + item.image + `" alt="" />`;
            return (
              `<div class="swiper-slide" key="` + index + `">
                  <div>${imgHtml}</div>
                </div>
              `
            );
          })
          .join("");
        $("#banner-swiper-wrapper").html(html);
        // 初始化 banner swiper
        var bannerSwiper = new Swiper('#banner-swiper', {
          preventClicksPropagation: false,
          autoplay: true,//可选选项，自动滑动
          loop: true, // 循环模式选项
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on: {
            tap: function (swiper, event) {
              const key = this.slides[this.activeIndex].attributes.key.value;
              const item = res.data[key];
              if (item.url) goPage(routeByPath[item.url])
            },
          },
        })

        $('#banner-swiper .swiper-button-next, #banner-swiper .swiper-button-prev').on('mouseenter', function () {
          $(this).addClass('swiper-btn-hover');
        }).on('mouseleave', function () {
          $(this).removeClass('swiper-btn-hover');
        });

        $('#banner-swiper-wrapper').on('mouseenter', function () {
          bannerSwiper.navigation.$nextEl.addClass('swiper-btn-hover');
          bannerSwiper.navigation.$prevEl.addClass('swiper-btn-hover');
        }).on('mouseleave', function () {
          bannerSwiper.navigation.$nextEl.removeClass('swiper-btn-hover');
          bannerSwiper.navigation.$prevEl.removeClass('swiper-btn-hover');
        });
      });
    };
    getBannerList();
    /************* banner展示模块end **************/
    /************* 行业动态展示模块start **************/
    const getNewsList = () => {
      const params = {
        type: 2,
        size: 3
      };
      request("app/news/list", "POST", params, (res) => {
        const html = res.data
          .map((item, index) => {
            return (
              `
              <div class="swiper-slide pointer" key="`+ index + `">` + item.title + `</div>
              `
            );
          })
          .join("");
        $("#industry-dynamic-swiper-wrapper").html(html);
        // 初始化 banner swiper
        var industryDynamicSwiper = new Swiper('#industry-dynamic-swiper', {
          preventClicksPropagation: false,
          autoplay: true,//可选选项，自动滑动
          loop: true, // 循环模式选项
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'custom',
            //自定义特殊类型分页器，当分页器类型设置为自定义时可用。
            renderCustom: function (swiper, current, total) {
              var customPaginationHtml = ``;
              for (var i = 0; i < total; i++) {
                if (i === (current - 1)) {
                  customPaginationHtml += `
                <div class="indicator-item indicator-active"></div>
              `;
                } else {
                  customPaginationHtml += `
                <div class="indicator-item"></div>
              `;
                }

              }
              return customPaginationHtml;
            },
          },
          on: {
            tap: function (swiper, event) {
              const key = this.slides[this.activeIndex].attributes.key.value;
              const item = res.data[key];
              goPage(routeByPath['/news-center/news-detail'], { id: item.id })
            },
          },
        })
      });
    };
    getNewsList()
    /************* 行业动态展示模块end **************/
    /************* 不同行业/应用场景标签展示模块start **************/
    const getSceneLabelList = () => {
      let params = { is_home: 1 };
      request("app/home/category_scene_list", "GET", params, (res) => {
        const html = res.data
          .map((item, index) => {
            // SEO优化图片懒加载
            let imgHtml = `<img class="item-img lazyload" data-src="` + item.image + `" alt="" />`;
            return (
              `
                <div class="industry-item" key="` + index + `">
                  <div class="item-content">
                    <div class="item-title character-hiding-o">
                      ${item.title}
                    </div>
                    <div class="item-desc character-hiding-o">
                      ${item.description}
                    </div>
                    <img class="click-view lazyload" data-src="../../assets/common/scene-view.png" alt=""  />
                  </div>
                  ${imgHtml}
                </div>
                `
            );
          })
          .join("");
        $("#industry-list").html(html);

        $(".industry-item").click(function (e) {
          const key = e.currentTarget.attributes.key.value;
          const item = res.data[key];
          //console.log(item)
          goPage("/scene-label-category.html", { id: item.id })
        });
      });
    }
    getSceneLabelList();
    // 查看更多
    $("#checkMore").click(function () {
      goPage("/scene-label-category.html")
    })
    // 移动端查看更多
    $("#checkMoreMobile").click(function () {
      goPage("/scene-label-category.html")
    })
    /************* 不同行业/应用场景标签展示模块end **************/
    /************* 行业定制化解决方案展示模块start **************/
    const getCustomSolution = () => {
      let params = { is_home: 1 };
      request("app/home/home_image", "GET", params, (res) => {
        const response = res.data.info || [];
        const tempList = solutionsList.map((item, index) => {
          item.image = response[index].image;
          item.description = response[index].title;
          return item;
        });

        const html = tempList
          .map((item, index) => {
            // SEO优化图片懒加载
            let imgHtml = `<img class="lazyload" data-src="` + item.image + `" alt="" />`;
            return (
              `
                    <div class="solution-item pointer" key="` + index + `">
                      <img class="white-bg lazyload" data-src="../../assets/home/white-bg.png" alt="" />
                      <div class="solution-content">
                        <div class="main-img">${imgHtml}</div>
                        <div class="solution-bottom">
                          <img class="bottom-bg bottom-bg` + (index + 1) + ` lazyload" data-src="./assets/home/eng-bg` + (index + 1) + `.png" alt="" />
                          <div class="item-bottom flex-between">
                            <div class="content-text">
                              <div class="text-main">` +
              item.title +
              `</div>
                              <div class="text-desc">` +
              item.description +
              `</div>
                            </div>
                            <img class="click-view lazyload" data-src="../../assets/common/scene-view.png" alt="" />
                          </div>
                        </div>
                      </div>
                    </div>
                    `
            );
          })
          .join("");
        $("#solutions-list").html(html);

        $(".solution-item").click(function (e) {
          const key = e.currentTarget.attributes.key.value;
          const item = tempList[key];
          goPage(routeByPath[item.path], item.query)
        });

        // 移动端逻辑 这里逻辑比较复杂注意设计的特殊展示逻辑
        const count = tempList.length / 2
        let mobileHtml = "";
        for (let i = 0; i < count; i++) {
          let childHtml = tempList.slice(i * 2, i * 2 + 2).map((item, index) => {
            let imgBgHtml = "";
            if (i === 0 && index === 0) {
              imgBgHtml = `<img class="bottom-bg lazyload" data-src="../../assets/home/eng-bg1.png" alt=""  />`
            } else if (i === 0 && index === 1) {
              imgBgHtml = `<img class="bottom-bg bottom-bg2 lazyload" data-src="../../assets/home/eng-bg2.png" alt="" />`
            } else if (i === 1 && index === 0) {
              imgBgHtml = `<img class="bottom-bg bottom-bg3 lazyload" data-src="../../assets/home/eng-bg3.png" alt="" />`
            } else if (i === 1 && index === 1) {
              imgBgHtml = `<img class="bottom-bg bottom-bg4 lazyload" data-src="../../assets/home/eng-bg4.png" alt="" />`
            } else if (i === 2 && index === 0) {
              imgBgHtml = `<img class="bottom-bg bottom-bg5 lazyload" data-src="../../assets/home/eng-bg5.png" alt="" />`
            } else if (i === 2 && index === 1) {
              imgBgHtml = `<img class="bottom-bg bottom-bg6 lazyload" data-src="../../assets/home/eng-bg6.png" alt="" />`
            }
            // SEO优化图片懒加载
            let imgHtml = `<img class="lazyload" data-src="` + item.image + `" alt="" />`;
            return (`
            <div class="solution-item pointer mobile-solution" key="${item.title}">
              <img class="white-bg lazyload" data-src="../../assets/home/white-bg.png" />
              <div class="solution-content">
                <div class="main-img">${imgHtml}</div>
                <div class="solution-bottom">
                  ${imgBgHtml}
                  <div class="item-bottom flex-between">
                    <div class="content-text">
                      <div class="text-main">${item.title}</div>
                      <div class="text-desc">${item.description}</div>
                    </div>
                    <img class="click-view lazyload" data-src="../../assets/common/scene-view.png" alt=""/>
                  </div>
                </div>
              </div>
            </div>
          `)
          }).join("")
          mobileHtml += `
              <div class="swiper-slide custom-solution">
                <div class="middle-content">
                  <div class="title">
                    <div class="main-title">行业定制化解决方案</div>
                    <div class="sub-title">Industry customized solutions</div>
                  </div>
                  <div class="solutions">
                    ${childHtml}
                  </div>
                </div>
              </div>
              `;
        }
        $("#custom-solution-swiper-wrapper").html(mobileHtml);
        // 初始化 swiper
        var customSolutionSwiper = new Swiper('#custom-solution-swiper', {
          autoplay: true,//可选选项，自动滑动
          loop: true, // 循环模式选项
          pagination: {
            el: '.points-container',
            type: 'custom',
            //自定义特殊类型分页器，当分页器类型设置为自定义时可用。
            renderCustom: function (swiper, current, total) {
              var customPaginationHtml = ``;
              for (var i = 0; i < total; i++) {
                if (i === (current - 1)) {
                  customPaginationHtml += `<div class="point active"></div>`;
                } else {
                  customPaginationHtml += `<div class="point"></div>`;
                }
              }
              return customPaginationHtml;
            },
          }
        })

        // 手机端点击事件
        $('.mobile-solution').each(function (index, item) {
          $(item).on('click', function () {
            const key = $(this).attr('key');
            const item = tempList.find(item => item.title === key);
            goPage(routeByPath[item.path], item.query)
          })
        })
      });
    }
    getCustomSolution()
    /************* 行业定制化解决方案展示模块end **************/
    /*********** 热门标签应用展示模块start ***********/
    const getHotProductList = () => {
      let params = { is_home: 1 };
      request("app/home/hot_product_list?is_home=1", "GET", params, (res) => {
        const html = res.data
          .map((item, index) => {
            return (
              `
              <div class="swiper-slide scale-hover">
                    <div class="video-container">
                      <div class="custom-video">
                        <div class="mask flex-column flex-center">
                          <div class="title-box">
                            <div class="title">`+ item.title + `</div>
                            <div class="sub-title"></div>
                          </div>
                        </div>
                        <video
                          class="video-play"
                          src="`+ item.video_url + `">
                          p 该视频不支持播放，请升级浏览器
                        </video>
                      </div>
                    </div>
                  </div>
              `
            );
          })
          .join("");
        $("#video-swiper-wrapper").html(html);

        const isMobile = window.innerWidth < 768; // 判断是否为移动设备
        // 轮播tap 事件
        const tap = (swiper, event) => {
          // 获取下面的video元素
          var visibleIndex = swiper.clickedIndex;
          var visibleDiv = $('#video-swiper .swiper-slide').eq(visibleIndex)[0];
          var videoElement = $(visibleDiv).find("video")[0];
          // 初始化视频播放器弹框
          $(this).videoModel({ el: videoElement });
        }

        const swiperOptions = {
          autoplay: true,//可选选项，自动滑动
          loop: res.data.length > 5 ? true : false, // 循环模式选项
          slidesPerView: 4,
          loopedSlides: 6, // loop 模式如果与 slidesPerView: 'auto' 一起使用，需要设置 loopedSlides 指定要循环（重复）的幻灯片数量。
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on: {
            tap: tap
          },
        };

        const mobileOptions = {
          autoplay: true,//可选选项，自动滑动
          loop: res.data.length > 5 ? true : false, // 循环模式选项
          effect: "coverflow",
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: "auto",
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true,
          },
          on: {
            tap: tap
          },
        }
        // 初始化 热门标签swiper
        var videoSwiper = new Swiper('#video-swiper', isMobile ? mobileOptions : swiperOptions)

        $('#video-swiper .swiper-button-next, #video-swiper .swiper-button-prev').on('mouseenter', function () {
          $(this).addClass('swiper-btn-hover');
        }).on('mouseleave', function () {
          $(this).removeClass('swiper-btn-hover');
        });

        $('#video-swiper-wrapper').on('mouseenter', function () {
          videoSwiper.navigation.$nextEl.addClass('swiper-btn-hover');
          videoSwiper.navigation.$prevEl.addClass('swiper-btn-hover');
        }).on('mouseleave', function () {
          videoSwiper.navigation.$nextEl.removeClass('swiper-btn-hover');
          videoSwiper.navigation.$prevEl.removeClass('swiper-btn-hover');
        });
      });
    };
    getHotProductList();
    // 点击查看更多
    $("#videoMore").click(function () {
      goPage("/high-performance-label.html",{href_a: 'video-view'})
    })
    // 移动端点击查看更多
    $("#videoMoreMobile").click(function () {
      goPage("/high-performance-label.html",{href_a: 'video-view'})
    })
    /*********** 热门标签应用展示模块end ***********/
    /*********** 企业宣传视频展示模块start ***********/
    const getPropagate = () => {
      let params = { type: 1 };
      request("app/home/propagate", "GET", params, (res) => {

        const companyInfoHtml = () => {
          return (
            `<div class="company-name">` + res.data.title + `</div>
                <div class="company-desc">
                  `+ res.data.description + `
                </div>
              `
          );
        }
        $("#companyInfo").html(companyInfoHtml)
        $("#companyVideo video").attr("src", res.data.video_url)
      });
    };
    getPropagate();
    /*********** 企业宣传视频展示模块end ***********/
    /*********** 合作伙伴展示模块start ***********/
    // 合作伙伴图片位置
    const partnerUrls = [
      [
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/1-apple.jpg',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/2-II-VI.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/3-CAS.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/4-Medtronic.jpeg',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/5-BMW.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/6-SAMSUNG.jpg',
          name: ''
        }
      ],
      [
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/7-TOTO.jpg',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/8-smee.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/9-CST.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/10-hesai.jpg',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/11-huawei.png',
          name: ''
        },
        {
          url: '',
          pic: 'https://etia-web-oss.vchangyi.com/static/12-TA.jpeg',
          name: ''
        }
      ]
    ];
    const getPartner = () => {
      const html = partnerUrls
        .map((item, index) => {
          const slideHtml = item
            .map((item, index) => {
              // SEO优化图片懒加载
              let imgHtml = `<img class="icon-img lazyload"  data-src="` + item.pic + `" alt="" />`;
              return (
                `
                  <div class="icon-box">
                    ${imgHtml}
                  </div>
                `
              );
            })
            .join("");
          return (
            `
              <div class="swiper-slide swiper-slide-box swiper-slide-mobile">
                `+ slideHtml + `
              </div>
            `)
        }).join("");
      $("#company-partner-swiper-wrapper").html(html);
      const isMobile = window.innerWidth < 768; // 判断是否为移动设备
      let swiperOptions = {
        autoplay: true,//可选选项，自动滑动
        loop: true, // 循环模式选项
      };
      if (isMobile) {
        swiperOptions.pagination = {
          el: '.swiper-pagination',
        };
      } else {
        // 如果需要前进后退按钮
        swiperOptions.navigation = {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        };
      }
      var companyPartnerSwiper = new Swiper('#company-partner-swiper', swiperOptions)
      $('#company-partner-swiper .swiper-button-next, #company-partner-swiper .swiper-button-prev').on('mouseenter', function () {
        $(this).addClass('swiper-btn-hover');
      }).on('mouseleave', function () {
        $(this).removeClass('swiper-btn-hover');
      });

      $('#company-partner-swiper-wrapper').on('mouseenter', function () {
        companyPartnerSwiper.navigation.$nextEl.addClass('swiper-btn-hover');
        companyPartnerSwiper.navigation.$prevEl.addClass('swiper-btn-hover');
      }).on('mouseleave', function () {
        companyPartnerSwiper.navigation.$nextEl.removeClass('swiper-btn-hover');
        companyPartnerSwiper.navigation.$prevEl.removeClass('swiper-btn-hover');
      });
    }
    getPartner()
    /*********** 合作伙伴展示模块end ***********/
  </script>
  <script>
    // video滚动监听-播放/暂停
    window.addEventListener('scroll', () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let video = $('#company_video');
      if (scrollTop >= 2100) {
        video[0].play();
      } else {
        video[0].pause();
      }
    })
  </script>
</body>

</html>