<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>德国水航母管道官网</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="css/commom.css">
  <script>
    (function (html) {
      change()
      function change() {
        var w = html.clientWidth
        var size = 100 * (w / 750).toFixed(2)
        html.style.fontSize = size + 'px'
      }
    })(document.documentElement)
    window.onresize = function () {
      (function (html) {
        change()
        function change() {
          var w = html.clientWidth
          var size = 100 * (w / 750).toFixed(2)
          html.style.fontSize = size + 'px'
        }
      })(document.documentElement)
    }
  </script>
</head>

<body>
  <div class="index">
    <header class="head">
      <div class="nav-contanier">
        <img class="nav-logo" src="img/nav-logo.png" alt="">
        <div class="nav-logo-close">
          <img src="img/nav-logo-close.png" alt="">
          <img src="img/nav-logo-close.png" alt="">
        </div>
        <img class="logo" src="img/logo.png" alt="">
        <div class="language">
          <a href="javascript:;">中</a>
          <span>|</span>
          <a href="indexEn.html">EN</a>
        </div>
        <ul class="nav">
          <li class="active"><a href="javascript:;">首页</a></li>
          <li><a href="news.html">新闻资讯</a></li>
          <li>
            产品种类
            <ul class="menu_2">
              <li><a href="classDetails.html?type=32">分水器</a></li>
              <li><a href="filter.html">过滤器</a></li>
              <li><a href="classDetails.html?type=33">清芯防垢管</a></li>
              <li><a href="classDetails.html?type=34">地暖管</a></li>
              <li><a href="classDetails.html?type=35">透明线管</a></li>
            </ul>
          </li>
          <li><a href="serviceSupport.html">服务支持</a></li>
          <li><a href="aboutUs.html">关于我们</a></li>
          <li><a href="engineeringCase.html">工程案例</a></li>
          <li><a href="contactUs.html">联系我们</a></li>
        </ul>
      </div>
    </header>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
          <img src="img/banner-index.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/banner-index.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="img/banner-index.png" alt="">
        </div> -->
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <div class="Service-Support">
      <h5>无忧<span>+</span></h5>
      <div class="Support-con">
        <div class="Support-1">

        </div>
        <div class="Support-4">
          <div class="line">
            <div>无忧<span>+</span></div>
          </div>
        </div>
        <div class="Support-2">
          <div class="Service-pic">
            <img src="img/cover5.png" alt="">
            <img src="img/square.png" alt="">
          </div>
          <div class="Service-title">
            <img src="img/cover5.png" alt="">
            <p>会议营销<br />裂变模式</p>
          </div>
        </div>
        <div class="Support-3">
          <div class="Service-title">
            <p>人才支持<br />一地一策</p>
            <img src="img/cover6.png" alt="">
          </div>
          <div class="Service-pic">
            <img src="img/cover6.png" alt="">
            <img src="img/square.png" alt="">
          </div>
        </div>
        <div class="Support-2">
          <div class="Service-pic">
            <img src="img/cover7.png" alt="">
            <img src="img/square.png" alt="">
          </div>
          <div class="Service-title">
            <img src="img/cover7.png" alt="">
            <p>七星服务<br />服务到家</p>
          </div>
        </div>
      </div>
    </div>
    <div class="part part1">
      <h5>产品详情</h5>
      <div class="con" id="type-box">
        <!-- <div class="information-item-type">
          <div class="pic-icon-type">
            <img src="img/cover2.png" alt="">
            <p>标题标题</p>
          </div>
        </div> -->
      </div>
      <div class="jump" id="btn">
        <a href="javascript:;"><img src="img/drap.png" alt=""></a>
      </div>
    </div>
    <div class="part">
      <h5>新闻资讯</h5>
      <div class="con" id="news-box">
        <!-- <div class="information-item">
          <div class="pic-icon">
            <img src="img/cover1.png" alt="">
            <img src="img/drap1.png" alt="">
          </div>
          <div class="brief">
            <div class="date">
              <div>
                <p>15</p>
                <p>2019-02</p>
              </div>
            </div>
            <div class="title">
              <p>#知识分享：ppr规格大小#</p>
              <p class="clamp">ppr规格大小ppr规格大小ppr规格大小ppr规格大小大小ppr规格大小大小ppr规格大小大小ppr规格大小格大小大小ppr规格大小格大小大小ppr规格大小</p>
            </div>
          </div>
        </div> -->
      </div>
      <div class="jump">
        <a href="./news.html"><img src="img/drap.png" alt=""></a>
      </div>
    </div>
    <div class="aboutus">
      <h5>关于我们</h5>
      <div class="aboutus-con">
        <div>
          <h4>水航母企业文化 <span>地址：上海</span></h4>
          <h3>地址：上海</h3>
          <p>
            企业使命：为人类输送健康之源，打造管道界的航空母舰。<br>企业目标：让全球亿万户家庭喝上绿色健康的水。<br>企业精神：共创、共赢、共享。<br>企业愿景：一管为媒、情系全球。<br>企业理念：健康、快乐、真实、感恩。<br>企业价值观：以赤诚待赤诚，诚信立足、厚德载物。<br>团队口号：我靠企业生存、企业靠我发展。<br>团队精神：我坚信团队的力量、我甘愿为团队付出，坚守承诺、始终如一，以企业为家共创双赢！
          </p>
        </div>
      </div>
    </div>
    <div class="case">
      <h5>工程案例</h5>
      <div class="case-con">
        <img src="img/bg-3.png" alt="">
      </div>
    </div>
    <footer>
      <div class="foot">
        <div class="item1">
          <span>电话:400-877-6099</span>
          <span>手机:400-877-6099</span>
          <span>邮箱:870444317@qq.com</span>
        </div>
        <div class="item2">地址：上海市奉贤区星火开发区阳明路1号6幢4层1531室</div>
        <div class="item3">Copyright2019德国水航母管道科技控股发展有限公司<br />中国区域总代理：上海佳学新材料科技有限公司 版权所有<br /><a href="http://www.beian.miit.gov.cn" target="_blank">沪ICP备2020029786号</a></div>
        <div class="img">
          <img class="qq" src="img/qq.png" alt="">
          <img class="weibo" src="img/weibo.png" alt="">
        </div>
      </div>
      <div class="foot-web">
        <div class="item1">
          <span>电话:400-877-6099</span>
          <span>邮箱:870444317@qq.com</span>
        </div>
        <div class="item4">手机:400-877-6099</div>
        <div class="item2">地址：上海市奉贤区星火开发区阳明路1号6幢4层1531室</div>
        <div class="item3">Copyright2019德国水航母管道科技控股发展有限公司<br />中国区域总代理：上海佳学新材料科技有限公司 版权所有<br /><a href="http://www.beian.miit.gov.cn" target="_blank">沪ICP备2020029786号</a></div>
        <div class="img">
          <img class="qq" src="img/qq.png" alt="">
          <img class="weibo" src="img/weibo.png" alt="">
        </div>
      </div>
    </footer>
  </div>
  <div class="nav-web">
    <ul>
      <Li class="active">
        <a href="javascript:;">
          <label></label>
          <span>首页</span>
        </a>
      </Li>
      <Li>
        <a href="./news.html">
          <label></label>
          <span>新闻资讯</span>
        </a>
      </Li>
      <Li>
        <label></label>
        <span>产品种类</span>
        <b class="more">+</b>
        <ul class="type">
          <a href="./classDetails.html?type=32">
            <li>分水器</li>
          </a>
          <a href="./filter.html">
            <li>过滤器</li>
          </a>
          <a href="./classDetails.html?type=33">
            <li>清芯防垢管</li>
          </a>
          <a href="./classDetails.html?type=34">
            <li>地暖管</li>
          </a>
          <a href="./classDetails.html?type=35">
            <li>透明线管</li>
          </a>
        </ul>
      </Li>
      <Li>
        <a href="./serviceSupport.html">
          <label></label>
          <span>服务支持</span>
        </a>
      </Li>
      <Li>
        <a href="./engineeringCase.html">
          <label></label>
          <span>工程案例</span>
        </a>
      </Li>
      <Li>
        <a href="./aboutUs.html">
          <label></label>
          <span>关于我们</span>
        </a>
      </Li>
      <Li>
        <a href="./contactUs.html">
          <label></label>
          <span>联系我们</span>
        </a>
      </Li>
    </ul>
  </div>
</body>
<script src="js/Zepto_v1.2.0.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="layer_mobile/layer.js"></script>
<script type="text/javascript" src="js/clamp.js"></script>
<script src="js/swiper.min.js"></script>
<script>
  $(function () {
    FastClick.attach(document.body);
  });
  $.ajax({
    url: '/water/banner/getBannerList?type=1&page=1&pageSize=5',
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    data: {},
    success: function (res) {
      var html = '';
      var data = res.data;
      for (var i = 0; i < data.length; i++) {
        html += '<div class="swiper-slide" style="background: url(' + data[i].bannerUrl + ') no-repeat;background-size: cover;background-position: 30% 50%;"></div>'
      }
      $('.swiper-wrapper').append(html)
      var swiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        on: {}
      })
    },
    error: function () {
      layer.open({
        content: '请刷新页面或检查网络状态'
        , skin: 'msg'
        , time: 2 //2秒后自动关闭
      });
    }
  })
  var page = 1
  function getNewsList() {
    $.ajax({
      url: '/water/article/getArticleList?page=' + page + '&pageSize=3',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      data: {},
      success: function (res) {
        var html = '';
        var data = res.data;
        for (var i = 0; i < data.length; i++) {
          html += '<div class="information-item"><div class="pic-icon"><img src="' + data[i].articleCover + '" alt=""><a href="newsDetails.html?id=' + data[i].id + '"><img class="btn" src="./img/drap1.png" alt=""></a></div><div class="brief"><div class="date"><div><p>' + data[i].createTime.substr(8, 2) + '</p><p>' + data[i].createTime.substr(0, 7) + '</p></div></div><div class="title"><p>' + data[i].articleTitle + '</p><p class="clamp">' + data[i].articleIntro + '</p></div></div></div>'
        }
        $('#news-box').append(html)
        for (var i = 0; i < document.getElementsByClassName('clamp').length; i++) {
          $clamp(document.getElementsByClassName('clamp')[i], { clamp: 3 })
        }
      },
      error: function () {
        layer.open({
          content: '请刷新页面或检查网络状态'
          , skin: 'msg'
          , time: 2 //2秒后自动关闭
        });
      }
    })
  }
  getNewsList()
  var pageProduct = 1
  function getProdutList() {
    $.ajax({
      url: '/water/productType/getTypePage?page=' + pageProduct + '&pageSize=4',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'json',
      data: {},
      success: function (res) {
        var html = '';
        var data = res.data;
        for (var i = 0; i < data.length; i++) {
          html += '<div class="information-item-type"><div class="pic-icon-type"><img src="' + data[i].productTypeImg + '" alt=""><p>' + data[i].productTypeName + '</p></div></div>'
        }
        $('#type-box').append(html)
        if ($('#type-box >div').length >= res.count) $('#btn').hide()
      },
      error: function () {
        layer.open({
          content: '请刷新页面或检查网络状态'
          , skin: 'msg'
          , time: 2 //2秒后自动关闭
        });
      }
    })
  }
  $('#btn').click(function () {
    pageProduct++
    getProdutList()
  })
  getProdutList()
</script>
<script type="text/javascript" src="js/commom.js"></script>

</html>