index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  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. Header
  33. ============================-->
  34. <header id="header">
  35. <div class="container">
  36. <div id="logo" class="pull-left">
  37. <h1><a href="#body" class="scrollto"><span>宝</span>智达冷链</a></h1>
  38. <!-- <a href="#body"><img src="img/logo.png" alt="" title="" /></a>-->
  39. </div>
  40. <nav id="nav-menu-container">
  41. <ul class="nav-menu">
  42. <li class="menu-active"><a href="/">首页</a></li>
  43. <li><a href="/about">关于我们</a></li>
  44. <li><a href="/services/1">服务介绍</a></li>
  45. <li class="menu-has-children"><a href="/news?types=industry">新闻</a>
  46. <ul>
  47. <li><a href="/news?types=firm">公司新闻</a></li>
  48. <li><a href="/news?types=industry">行业新闻</a></li>
  49. </ul>
  50. </li>
  51. <li><a href="/product?ptype=hardware">产品介绍</a>
  52. <ul>
  53. <li><a href="/product?ptype=software">软件</a></li>
  54. <li><a href="/product?ptype=hardware">硬件</a></li>
  55. </ul>
  56. </li>
  57. <li><a href="/recruit">全国代理招募</a></li>
  58. <li><a href="/contact">联系我们</a></li>
  59. </ul>
  60. </nav><!-- #nav-menu-container -->
  61. </div>
  62. </header><!-- #header -->
  63. <!--==========================
  64. banner
  65. ============================-->
  66. <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  67. <div class="carousel-inner">
  68. {{range $index,$item:=.banner}}
  69. <div class="float-buttons">
  70. <button class="btn btn-outline-primary btn-lg">校准</button>
  71. <button class="btn btn-outline-info btn-lg">验证</button>
  72. </div>
  73. <div class="carousel-item{{if eq $index 0}} active{{end}}">
  74. <img src="{{$item}}" id="carousel-img-height" class="d-block w-100" alt="...">
  75. </div>
  76. {{end}}
  77. </div>
  78. <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
  79. data-bs-slide="prev">
  80. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  81. <span class="visually-hidden">Previous</span>
  82. </button>
  83. <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
  84. data-bs-slide="next">
  85. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  86. <span class="visually-hidden">Next</span>
  87. </button>
  88. </div><!-- #intro -->
  89. <main id="main">
  90. <section class="features" data-aos="fade-up">
  91. <div class="container">
  92. <div class="section-header">
  93. <h2>部分合作案例</h2>
  94. <div class="row">
  95. <div class="row feature-item" style="background-color: #b3d7ff">
  96. <div class="col-md-4">
  97. <div class="d-flex flex-column justify-content-between h-100 feature-data">
  98. <div class="count-up" data-target="{{.Datas.Provinces}}"
  99. style="font-size: 35px; color: #0b0b0b">0
  100. </div>
  101. <span class="text-muted" style="color: #d4d4d4; font-size: 15px;">省区</span>
  102. </div>
  103. </div>
  104. <div class="col-md-4">
  105. <div class="d-flex flex-column justify-content-between h-100 feature-data">
  106. <div class="count-up" data-target="{{.Datas.Prefecture}}" style="font-size: 35px">0
  107. </div>
  108. <span class="text-muted" style="color: #d4d4d4; font-size: 15px;">地州</span>
  109. </div>
  110. </div>
  111. <div class="col-md-4">
  112. <div class="d-flex flex-column justify-content-between h-100 feature-data">
  113. <div class="count-up" data-target="{{.Datas.Counties}}" style="font-size: 35px">0</div>
  114. <span class="text-muted" style="color: #d4d4d4; font-size: 15px;">县份</span>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. </section>
  121. <!--==========================
  122. 服务介绍
  123. ============================-->
  124. <section id="features" class="features">
  125. <div class="container" data-aos="fade-up">
  126. <div class="section-header" style="margin-top: 40px;">
  127. <h2>服务介绍</h2>
  128. <p>
  129. 宝智达主要经营冷链温湿度监测平台、储运温湿度监测系统、温湿度监控设备及温湿度记录仪等系列产品、药品专用陈列柜、药品温度实时监测保温箱、冷链验证服务等均具有自主知识产权。</p>
  130. </div>
  131. <div class="row">
  132. <div class="div1 col-6">
  133. {{range .Serves}}
  134. <h4><a href="services/{{.ID}}">{{.Title}}</a></h4>
  135. <p>{{.Synopsis}}</p>
  136. {{end}}
  137. </div>
  138. <div class="div2 col-6" style="width: 300px;height: auto">
  139. <img
  140. src="https://ts1.cn.mm.bing.net/th/id/R-C.adaca9eef98172ce4fbb1c2f36405cf6?rik=So40VJkhm3qAxQ&riu=http%3a%2f%2fimg.juimg.com%2ftuku%2fyulantu%2f120417%2f6597-12041F9233979.jpg&ehk=Q7ZmO7gl0UOGFRlkiETxxrZrML6olvsSJ%2fuAINaNNeY%3d&risl=&pid=ImgRaw&r=0"
  141. class="img-fluid" alt="">
  142. </div>
  143. <button class="btn btn-outline-primary" style="margin-top: 40px;" onclick="location.href='/services/1'">
  144. 了解更多服务
  145. </button>
  146. </div>
  147. </div>
  148. </section><!-- End Features Section -->
  149. <!--==========================
  150. 服务&产品
  151. ============================-->
  152. <section id="services">
  153. <div class="container">
  154. <div class="section-header">
  155. <h2>产品介绍</h2>
  156. <p>专业一流的硬件、软件工程师最新设计理念与实现</p>
  157. </div>
  158. <div class="row">
  159. {{range .Products}}
  160. <div class="col-lg-4">
  161. <div class="box wow fadeInLeft">
  162. <div class="icon svgImg"><img src="{{.Url}}" alt=""></div>
  163. <h4 class="title"><a href="product/{{.ID}}">{{.Title}}</a></h4>
  164. <p class="description">{{.Synopsis}}</p>
  165. </div>
  166. </div>
  167. {{end}}
  168. <button class="btn btn-outline-primary" onclick="location.href='product?ptype=hardware'">查看更多
  169. </button>
  170. </div>
  171. </div>
  172. </section><!-- #services -->
  173. <!--==========================
  174. 成功案例
  175. ============================-->
  176. <section id="clients" class="wow fadeInUp">
  177. <div class="container">
  178. <div class="section-header">
  179. <h2>部分合作案例</h2>
  180. <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam,-->
  181. <!-- incidunt fugiat culpa esse aute nulla. duis fugiat culpa esse aute nulla ipsum velit export irure-->
  182. <!-- minim illum fore</p>-->
  183. </div>
  184. <div class="owl-carousel clients-carousel">
  185. {{range $index,$exam:=.example}}
  186. <img src="{{$exam}}" alt="..." style="max-width: 100%; height: auto">
  187. {{end}}
  188. </div>
  189. </div>
  190. </section><!-- #clients -->
  191. <!--==========================
  192. 资质荣耀
  193. ============================-->
  194. <section id="testimonials" class="wow fadeInUp">
  195. <div class="container">
  196. <div class="section-header">
  197. <h2>资质荣耀</h2>
  198. <!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro consequatur aliquam,-->
  199. <!-- incidunt fugiat culpa esse aute nulla. duis fugiat culpa esse aute nulla ipsum velit export irure-->
  200. <!-- minim illum fore</p>-->
  201. </div>
  202. <div class="owl-carousel testimonials-carousel">
  203. {{range $index,$honor:=.honor}}
  204. <div class="testimonial-item">
  205. <img src="{{$honor}}" alt="..." style="max-width: 100%; height: auto">
  206. </div>
  207. {{end}}
  208. </div>
  209. </div>
  210. </section><!-- #testimonials -->
  211. <!--==========================
  212. Call To Action Section
  213. ============================-->
  214. <section id="call-to-action" class="wow fadeInUp">
  215. <div class="container">
  216. <div class="row">
  217. <div class="col-lg-9 text-center text-lg-left">
  218. <h3 class="cta-title">获取我们的服务</h3>
  219. <p class="cta-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quae porro
  220. consequatur aliquam, incidunt fugiat culpa esse aute nulla cupidatat non proident, sunt in culpa
  221. qui officia deserunt mollit anim id est laborum.</p>
  222. </div>
  223. <div class="col-lg-3 cta-btn-container text-center">
  224. <a class="cta-btn align-middle" href="#contact">联系我们</a>
  225. </div>
  226. </div>
  227. </div>
  228. </section><!-- #call-to-action -->
  229. </main>
  230. <!--==========================
  231. 页脚
  232. ============================-->
  233. <footer id="footer">
  234. <div class="container">
  235. <div class="copyright">
  236. © 版权所有 2024 宝智达科技有限公司 <a target="_blank"
  237. href="https://beian.miit.gov.cn/">黔ICP备2022006612号</a>
  238. </div>
  239. <div class="credits">
  240. </div>
  241. </div>
  242. </footer><!-- #footer -->
  243. <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  244. <!-- JavaScript -->
  245. <script src="../static/lib/jquery/jquery.min.js"></script>
  246. <script src="../static/lib/jquery/jquery-migrate.min.js"></script>
  247. <script src="../static/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
  248. <script src="../static/lib/easing/easing.min.js"></script>
  249. <script src="../static/lib/superfish/hoverIntent.js"></script>
  250. <script src="../static/lib/superfish/superfish.min.js"></script>
  251. <script src="../static/lib/wow/wow.min.js"></script>
  252. <script src="../static/lib/owlcarousel/owl.carousel.min.js"></script>
  253. <script src="../static/lib/magnific-popup/magnific-popup.min.js"></script>
  254. <script src="../static/lib/sticky/sticky.js"></script>
  255. <!--<script src="contact/jqBootstrapValidation.js"></script>-->
  256. <!--<script src="contact/contact_me.js"></script>-->
  257. <script src="../static/js/main.js"></script>
  258. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  259. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  260. <script>
  261. document.addEventListener('DOMContentLoaded', function () {
  262. // 获取所有带有data-target属性的元素
  263. var countUpElements = document.querySelectorAll('.count-up');
  264. countUpElements.forEach(function (element) {
  265. var target = parseInt(element.getAttribute('data-target')); // 获取目标数值
  266. var start = 0; // 初始值
  267. var duration = 2000; // 动画持续时间,单位毫秒
  268. var increment = Math.ceil(target / (duration / 16)); // 计算每16ms增加的值
  269. var timer = setInterval(function () {
  270. start += increment;
  271. element.textContent = start; // 更新显示的数值
  272. if (start > target) {
  273. clearInterval(timer); // 达到或超过目标值时停止
  274. element.textContent = target;
  275. }
  276. }, 100); // 每16ms执行一次,大约60帧/秒
  277. });
  278. });
  279. </script>
  280. </body>
  281. </html>