detail_product.html 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  7. <meta name="renderer" content="webkit">
  8. <meta name="keywords" content="{$archives.keywords}"/>
  9. <meta name="description" content="{$archives.description}"/>
  10. <title>{$archives.title} - {$site.site_name}</title>
  11. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/swiper.min.css">
  12. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/animate.min.css">
  13. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/style.css">
  14. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/media.css">
  15. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/jquery.min.js"></script>
  16. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/swiper.min.js"></script>
  17. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/swiper.animate1.0.3.min.js"></script>
  18. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/wow.js"></script>
  19. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/menu.js"></script>
  20. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/javascript.js"></script>
  21. <link rel="shortcut icon" href="__CDN__/assets/addons/wwh/images/favicon.ico">
  22. </head>
  23. <body>
  24. <!-- 头部 -->
  25. {include file="header" /}
  26. <!-- 栏目Banner -->
  27. <div class="col-banner">
  28. <div class="text">
  29. <div class="title wow fadeInUp" data-wow-delay="0.3s">
  30. <h3>{$site.ban1_t1}</h3><i></i>
  31. </div>
  32. </div>
  33. <div class="img">
  34. <div class="pic" style="background-image: url('{$site.banner1|cdnurl}');">
  35. <img src="__CDN__/assets/addons/wwh/images/col_size.png" class="img-block" alt="">
  36. </div>
  37. </div>
  38. <div class="banner-path wow fadeInLeft" data-wow-delay="0.4s">
  39. <div class="container-outer">
  40. <div class="icon"><img src="__CDN__/assets/addons/wwh/images/home.svg" class="img-center"></div>
  41. <div class="link">
  42. <a href="{:addon_url('wwh/index/index')}">{:__lang('Home')}</a>
  43. <span>/</span>
  44. <a href="{:addon_url('wwh/column/index', [':diyname'=>$top.diyname])}">{:__lm($top,'name')}</a>
  45. <span>/</span>
  46. <a href="{:addon_url('wwh/column/index', [':diyname'=>$navCur.diyname])}">{:__lm($navCur,'name')}</a>
  47. <span class="dis">/</span>
  48. <a href="{:addon_url('wwh/archives/index', [':diyname'=>$navId[$archives.column_id]['diyname'], ':id'=>$archives.id])}" class="cur dis">{$archives.title}</a>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. <!-- 内容 -->
  54. <div class="product-detail">
  55. <div class="container-outer">
  56. <div class="product-top">
  57. <div class="product-pic swiper-container wow fadeInLeft" data-wow-delay="0.5s">
  58. <div class="swiper-wrapper">
  59. {foreach name="archives['lunbo']" item="v"}
  60. <div class="swiper-slide" style="background-image:url('{$v|cdnurl}');">
  61. <a href="{$v|cdnurl}"><ul><li><img src="{$v|cdnurl}" alt=""></li></ul></a>
  62. </div>
  63. {/foreach}
  64. </div>
  65. <div class="swiper-pagination"></div>
  66. <div class="swiper-button-next"></div>
  67. <div class="swiper-button-prev"></div>
  68. </div>
  69. <div class="product-info wow fadeInRight" data-wow-delay="0.5s">
  70. <h3>{$archives.title}</h3>
  71. <h4>{$archives.p_pn}</h4>
  72. <div class="product-text">{$archives.description}</div>
  73. <div class="ty-more"><a href="javascript:;" class="click-message"><span>{:__lang('Product Consultation')}</span><i></i></a></div>
  74. </div>
  75. </div>
  76. <div class="product-bottom wow fadeInUp" data-wow-delay="0.6s">
  77. <div class="product-bottom-box">
  78. <div class="product-bottom-nav">
  79. <li class="cur">{:__lang('Function')}
  80. <li>{:__lang('Parameters')}
  81. <li>{:__lang('Size')}
  82. </div>
  83. <div class="product-bottom-tab swiper-container swiper-no-swiping">
  84. <div class="swiper-wrapper">
  85. <div class="swiper-slide">
  86. <div class="zc-detail-text">
  87. <div class="text">{$archives.p_func_content}</div>
  88. </div>
  89. </div>
  90. <div class="swiper-slide">
  91. <div class="zc-detail-text">
  92. <div class="text">{$archives.p_tech_content}</div>
  93. </div>
  94. </div>
  95. <div class="swiper-slide">
  96. <div class="product-size-img">
  97. <img src="{$archives.p_shape_image|cdnurl}">
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. <!-- 底部 -->
  107. {include file="footer" /}
  108. <script type='text/javascript' src="__CDN__/assets/addons/wwh/js/touchTouch.jquery.js"></script>
  109. <script type="text/javascript">
  110. $(".product-pic").each(function(){
  111. $(this).find("a").touchTouch();
  112. });
  113. var swiper1 = new Swiper('.product-pic', {
  114. spaceBetween: 0,
  115. autoHeight: true,
  116. // loop : true,
  117. // autoplay: {
  118. // delay: 5000,
  119. // disableOnInteraction: false,
  120. // },
  121. pagination: {
  122. el: '.swiper-pagination',
  123. clickable: true,
  124. },
  125. navigation: {
  126. nextEl: '.swiper-button-next',
  127. prevEl: '.swiper-button-prev',
  128. },
  129. });
  130. var mySwiper = new Swiper('.product-bottom-tab', {
  131. autoHeight: true,
  132. slidesPerView: 1,
  133. });
  134. $('.product-bottom-nav li').on('click', function(e) {
  135. e.preventDefault();
  136. $(".product-bottom-nav li").removeClass('cur');
  137. $(this).addClass('cur');
  138. var index = $(this).index();
  139. mySwiper.slideTo(index,0,false);
  140. mySwiper.updateAutoHeight();
  141. });
  142. </script>
  143. </body>
  144. </html>