product.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>宝智达冷链官网</title>
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7. <meta content="" name="keywords">
  8. <meta content="" name="description">
  9. <meta content="Author" name="WebThemez">
  10. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  11. <!-- Favicons -->
  12. <link href="../static/img/favicon.png" rel="icon">
  13. <link href="../static/img/apple-touch-icon.png" rel="apple-touch-icon">
  14. <!--字体 -->
  15. <link
  16. href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Raleway:300,400,500,700,800|Montserrat:300,400,700"
  17. rel="stylesheet">
  18. <!-- Bootstrap CSS File -->
  19. <link href="../static/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  20. <!-- Libraries CSS Files -->
  21. <link href="../static/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  22. <link href="../static/lib/animate/animate.min.css" rel="stylesheet">
  23. <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  24. <link href="../static/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
  25. <link href="../static/lib/magnific-popup/magnific-popup.css" rel="stylesheet">
  26. <link href="../static/lib/ionicons/css/ionicons.min.css" rel="stylesheet">
  27. <!-- Main Stylesheet File -->
  28. <link href="../static/css/style.css" rel="stylesheet">
  29. </head>
  30. <body id="body">
  31. <!--==========================
  32. Top Bar
  33. ============================-->
  34. <!-- <section id="topbar" class="d-none d-lg-block">-->
  35. <!-- <div class="container clearfix">-->
  36. <!-- <div class="contact-info float-left">-->
  37. <!-- <i class="fa fa-envelope-o"></i> <a href="mailto:contact@example.com">name@websitename.com</a>-->
  38. <!-- <i class="fa fa-phone"></i> +1 2345 67855 22-->
  39. <!-- </div>-->
  40. <!-- <div class="social-links float-right">-->
  41. <!-- <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>-->
  42. <!-- <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>-->
  43. <!-- <a href="#" class="google-plus"><i class="fa fa-google-plus"></i></a>-->
  44. <!-- <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>-->
  45. <!-- <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>-->
  46. <!-- </div>-->
  47. <!-- </div>-->
  48. <!-- </section>-->
  49. <!--==========================
  50. Header
  51. ============================-->
  52. <header id="header">
  53. <div class="container">
  54. <div id="logo" class="pull-left">
  55. <h1><a href="#body" class="scrollto"><span>宝</span>智达冷链</a></h1>
  56. <!-- <a href="#body"><img src="img/logo.png" alt="" title="" /></a>-->
  57. </div>
  58. <nav id="nav-menu-container">
  59. <ul class="nav-menu">
  60. <li class="menu-active"><a href="/">首页</a></li>
  61. <li><a href="/about">关于我们</a></li>
  62. <li><a href="/services/1">服务介绍</a></li>
  63. <li><a href="/product?ptype=hardware">产品介绍</a>
  64. <ul>
  65. <li><a href="/product?ptype=software">软件</a></li>
  66. <li><a href="/product?ptype=hardware">硬件</a></li>
  67. </ul>
  68. </li>
  69. <li><a href="/recruit">全国代理招募</a></li>
  70. <li class="menu-has-children"><a href="">新闻</a>
  71. <ul>
  72. <li><a href="#">公司新闻</a></li>
  73. <li><a href="#">行业新闻</a></li>
  74. </ul>
  75. </li>
  76. <li><a href="/contact">联系我们</a></li>
  77. </ul>
  78. </nav><!-- #nav-menu-container -->
  79. </div>
  80. </header>
  81. <!--==========================
  82. Page Banner Section
  83. ============================-->
  84. <section id="innerBanner">
  85. <div class="inner-content">
  86. <h2><span>产品介绍</span><br>We create the opportunities!</h2>
  87. <div>
  88. </div>
  89. </div>
  90. </section><!-- #Page Banner -->
  91. <main id="main">
  92. <section class="features" data-aos="fade-up">
  93. <div class="container">
  94. <div class="row">
  95. <div class="col-md-3 feature-item" style="background-color: #8fdf82">
  96. <span>管理效率使用</span>
  97. <ul>
  98. <li><strong>3D可视化平台</strong>
  99. <div class="count-up" data-target="{{.Datas.DvisualizationPlatform}}"></div>
  100. </li>
  101. <li><strong>大数据管理平台</strong>
  102. <div class="count-up" data-target="{{.Datas.BigDataManagementPlatform}}"></div>
  103. </li>
  104. <li><strong>冷链系列培训</strong>
  105. <div class="count-up" data-target="{{.Datas.ColdChainTraining}}"></div>
  106. </li>
  107. <li><strong>保温箱安全平台</strong>
  108. <div class="count-up" data-target="{{.Datas.IncubatorSafetyPlatform}}"></div>
  109. </li>
  110. <li><strong>冷藏车安全平台</strong>
  111. <div class="count-up" data-target="{{.Datas.SafetyPlatformForRefrigeratedTrucks}}"></div>
  112. </li>
  113. <li><strong>售后预警服务</strong>
  114. <div class="count-up" data-target="{{.Datas.AfterSalesEarlyWarningService}}"></div>
  115. </li>
  116. </ul>
  117. </div>
  118. </div>
  119. </div>
  120. </section>
  121. <!--==========================
  122. Services Section
  123. ============================-->
  124. <section id="services">
  125. <div class="container">
  126. <div class="btn-group" role="group" aria-label="Basic outlined example">
  127. <button type="button" class="btn btn-outline-primary" onclick="location.href='product?ptype=hardware'">
  128. 硬件
  129. </button>
  130. <button type="button" class="btn btn-outline-primary" onclick="location.href='product?ptype=software'">
  131. 软件
  132. </button>
  133. </div>
  134. <div class="row" style="margin-top: 10px;">
  135. {{range .Products}}
  136. <div class="col-lg-4">
  137. <div class="box wow fadeInLeft">
  138. <div class="icon svgImg"><img src="{{.Url}}" alt=""></div>
  139. <h4 class="title"><a href="product/{{.ID}}">{{.Title}}</a></h4>
  140. <p class="description">{{.Synopsis}}</p>
  141. </div>
  142. </div>
  143. {{end}}
  144. </div>
  145. </div>
  146. </section><!-- #services -->
  147. <!--==========================
  148. Clients Section
  149. ============================-->
  150. <section id="clients" class="wow fadeInUp">
  151. <div class="container">
  152. <div class="section-header">
  153. <h2>部分合作案例</h2>
  154. <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam,-->
  155. <!-- incidunt fugiat culpa esse aute nulla. duis fugiat culpa esse aute nulla ipsum velit export irure-->
  156. <!-- minim illum fore</p>-->
  157. </div>
  158. <div class="owl-carousel clients-carousel">
  159. {{range $index,$exam:=.example}}
  160. <img src="{{$exam}}" alt="..." style="max-width: 100%; height: auto">
  161. {{end}}
  162. </div>
  163. </div>
  164. </section><!-- #clients -->
  165. <!--==========================
  166. Call To Action Section
  167. ============================-->
  168. <section id="call-to-action" class="wow fadeInUp">
  169. <div class="container">
  170. <div class="row">
  171. <div class="col-lg-9 text-center text-lg-left">
  172. <h3 class="cta-title">获取我们的服务</h3>
  173. <p class="cta-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
  174. consequatur aliquam, incidunt fugiat culpa esse aute nulla cupidatat non proident, sunt in culpa
  175. qui officia deserunt mollit anim id est laborum.</p>
  176. </div>
  177. <div class="col-lg-3 cta-btn-container text-center">
  178. <a class="cta-btn align-middle" href="#contact">联系我们</a>
  179. </div>
  180. </div>
  181. </div>
  182. </section><!-- #call-to-action -->
  183. </main>
  184. <!--==========================
  185. Footer
  186. ============================-->
  187. <footer id="footer">
  188. <div class="container">
  189. <div class="copyright">
  190. Copyright &copy; 2018.Company name All rights reserved.<a target="_blank"
  191. href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
  192. </div>
  193. <div class="credits">
  194. </div>
  195. </div>
  196. </footer><!-- #footer -->
  197. <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  198. <!-- JavaScript -->
  199. <script src="../static/lib/jquery/jquery.min.js"></script>
  200. <script src="../static/lib/jquery/jquery-migrate.min.js"></script>
  201. <script src="../static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  202. <script src="../static/lib/easing/easing.min.js"></script>
  203. <script src="../static/lib/superfish/hoverIntent.js"></script>
  204. <script src="../static/lib/superfish/superfish.min.js"></script>
  205. <script src="../static/lib/wow/wow.min.js"></script>
  206. <script src="../static/lib/owlcarousel/owl.carousel.min.js"></script>
  207. <script src="../static/lib/magnific-popup/magnific-popup.min.js"></script>
  208. <script src="../static/lib/sticky/sticky.js"></script>
  209. <script src="contact/jqBootstrapValidation.js"></script>
  210. <script src="contact/contact_me.js"></script>
  211. <script src="../static/js/main.js"></script>
  212. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  213. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  214. <script>
  215. document.addEventListener('DOMContentLoaded', function () {
  216. // 获取所有带有data-target属性的元素
  217. var countUpElements = document.querySelectorAll('.count-up');
  218. countUpElements.forEach(function (element) {
  219. var target = parseInt(element.getAttribute('data-target')); // 获取目标数值
  220. var start = 0; // 初始值
  221. var duration = 2000; // 动画持续时间,单位毫秒
  222. var increment = Math.ceil(target / (duration / 16)); // 计算每16ms增加的值
  223. var timer = setInterval(function () {
  224. start += increment;
  225. element.textContent = start; // 更新显示的数值
  226. if (start > target) {
  227. clearInterval(timer); // 达到或超过目标值时停止
  228. element.textContent = target;
  229. }
  230. }, 16); // 每16ms执行一次,大约60帧/秒
  231. });
  232. });
  233. </script>
  234. </body>
  235. </html>