index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <!doctype html>
  2. <html class="no-js">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="description" content="">
  7. <meta name="keywords" content="">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  9. <title>首页</title>
  10. <!-- Set render engine for 360 browser -->
  11. <meta name="renderer" content="webkit">
  12. <!-- No Baidu Siteapp-->
  13. <meta http-equiv="Cache-Control" content="no-siteapp"/>
  14. <!-- Add to homescreen for Chrome on Android -->
  15. <!-- Add to homescreen for Safari on iOS -->
  16. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  17. <meta name="apple-mobile-web-app-title" content="茶马古道"/>
  18. <meta name="apple-mobile-web-app-capable" content="yes">
  19. <meta name="msapplication-TileImage" content="__CDN__/assets/shop/img/index/logo.png">
  20. <link rel="apple-touch-icon-precomposed" href="__CDN__/assets/shop/img/index/logo.png">
  21. <!-- Tile icon for Win8 (144x144 + tile color) -->
  22. <meta name="msapplication-TileColor" content="#0e90d2">
  23. <link rel="stylesheet" href="__CDN__/assets/shop/css/amazeui.css">
  24. <link rel="stylesheet" href="__CDN__/assets/shop/css/app.css">
  25. <link rel="stylesheet" href="__CDN__/assets/shop/css/index.css">
  26. <link rel="stylesheet" href="__CDN__/assets/shop/css/menu/normalize.min.css">
  27. <link rel="stylesheet" href="__CDN__/assets/shop/css/menu/bootstrapmb.com.css">
  28. <script src="__CDN__/assets/shop/js/jquery.min.js"></script>
  29. <script src="__CDN__/assets/shop/js/leftTime.min.js"></script>
  30. </head>
  31. <body>
  32. <!-- 主页内容 -->
  33. <div id="app" style="display: none;">
  34. <div class="wapper" data-html="index" >
  35. <div class="block em">
  36. <h1>茶马古道</h1>
  37. <p>全球首座万吨级智能茶窖藏空间</p>
  38. <img src="__CDN__/assets/shop/img/index/image1.jpeg" alt="">
  39. </div>
  40. <div class="block video">
  41. <video id="video" src="{$indexVideo}" poster="__CDN__/assets/shop/img/index/image2.jpeg">
  42. </video>
  43. </div>
  44. <div class="block">
  45. <p><img class="logo" src="__CDN__/assets/shop/img/index/logo.jpeg" alt=""></p>
  46. <h1 class="center">中国景迈&nbsp;&nbsp;茶马古道</h1>
  47. <p class="zh center">— 千年景迈茶山下&nbsp;万吨智能茶窖藏 —</p>
  48. <div class="line">
  49. <h1>世界首次<br/>为一座茶山申遗</h1>
  50. <p>
  51. 普洱景迈山古茶林文化景观是世界上现代茶园种植技术普及前,传统的“林下茶种植”方式保存至今的实物例证和典型代表,已成为全球第一个茶文化景观世界遗产预备项目,拟申报 2022 年世界文化遗产。赓续景迈山万千年生态智慧,茶马古道落笔于此。
  52. </p>
  53. </div>
  54. </div>
  55. <div class="block">
  56. <img src="__CDN__/assets/shop/img/index/image3.jpeg" alt="">
  57. </div>
  58. <div class="block no-padding-top">
  59. <div class="bg-green color-gray">
  60. <div class="bd-right pd-15">
  61. <p class="title f24 "><span class="bd-line"></span>原产地存原茶</p>
  62. <p class="">北回归线附近的澜沧江中下游沿岸是生态极佳的区域,在第四纪时受冰期影响较少,使得这里成为茶组植物的庇护所之一,是名副其实的茶树原乡之地。景迈山,坐落于此,其森林覆盖率超过 70%,森林很好地调节了气候、温湿度、以及空气中的负氧离子含量。同时,景迈山微生物群落的数目庞大,是全球生物多样性热点地区。这里特有的气候条件、微生物菌群无法复制,原产地窖藏正是建立在现代生物技术的基础上,使普洱茶后发酵实现更纯正天然的活性转化。</p>
  63. </div>
  64. </div>
  65. </div>
  66. <div class="block no-padding-top">
  67. <img src="__CDN__/assets/shop/img/index/image4.jpeg" alt="">
  68. </div>
  69. <div class="block no-padding-top">
  70. <div class="bg-gray color-black">
  71. <div class="bd-gray-left pd-20">
  72. <p class="title text-left f24">AI + 区块链 + 物联网</p>
  73. <p class="">从茶马古道平台购入的普洱茶,可进行扫茶纹验真。此功能是基于前沿AI技术开发的茶纹识别算法,在茶叶生产过程中进行茶纹录入,为每饼普洱茶生成唯一的电子身份证,在普洱茶陈化和流通交易过程中,均可进行1:1 1:M比对、鉴别。即便茶饼只剩下三分之一,仍能识别出茶叶的原始信息,让窖主的普洱茶藏得安心、喝得放心。</p>
  74. </div>
  75. </div>
  76. </div>
  77. <div class="block no-padding-top">
  78. <img src="__CDN__/assets/shop/img/index/image5.jpeg" alt="">
  79. </div>
  80. <div class="block no-padding-top">
  81. <div class="bg-brown color-gray">
  82. <div class="bd-right pd-15">
  83. <p class="title f24 "><span class="bd-line"></span>智能茶窖管理</p>
  84. <p class="">将工业智能化技术应用于普洱茶窖藏,通过物联网、机器人、WMS RCS等技术实现茶叶仓储无人化管理。基于云计算与区块链而开发的茶马古道APP,可实时查看窖内视频监控、门禁开关信息、温湿度信息、窖位库存信息、匹配事件信息,实现从买茶、入窖、盘点到出窖、交易、寄送,窖主对自己的普洱茶窖藏资产进行远程动态管理。</p>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="block no-padding-top">
  89. <img src="__CDN__/assets/shop/img/index/image6.jpeg" alt="">
  90. </div>
  91. <div class="block no-padding-top">
  92. <div class="bg-orange color-white">
  93. <div class="bd-gray-left pd-20">
  94. <p class="title text-left f24">拉祜图腾 美学空间</p>
  95. <p class="">茶马古道,由安缦酒店御用设计团队Masa Studio担纲设计。在景迈山的大地与空气之间,建筑师感知到古老茶林所包含的人与自然的情感,以拉祜族葫芦图腾为原型,进行古老与现代交织的建筑创作。从天空视角俯瞰,葫芦图腾的大圆、小圆又似普洱茶饼和普洱茶笋壳,犹如矗立在茶田中的“一提茶叶”。</p>
  96. </div>
  97. </div>
  98. </div>
  99. <div class="block no-padding-top">
  100. <img src="__CDN__/assets/shop/img/index/image7.jpeg" alt="">
  101. </div>
  102. <div class="block no-padding-top">
  103. <div class="bg-orange1 color-white">
  104. <div class="bd-right pd-15">
  105. <p class="title f24 "><span class="bd-line bd-line-min"></span>窖藏时光 复利价值</p>
  106. <p class="">普洱茶是拿来喝的,不是用来炒的”,普洱茶的价值是通过时间沉淀来体现,其越陈越香的品质,愈见时间价值和复利增长属性。好的普洱茶是稀缺资源,从新茶、旧茶,到老茶、陈茶,普洱茶的魅力就在于年复一年的窖藏。每个阶段的不同感受正是普洱茶令人着迷之处,其使用属性的提升及文化价值的升华,使得好的普洱茶窖藏成为了收藏投资的价值通路。</p>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="block no-padding-top">
  111. <img src="__CDN__/assets/shop/img/index/image8.jpeg" alt="">
  112. </div>
  113. <div class="block no-padding-top">
  114. <div class="bg-cyan color-white1">
  115. <div class="bd-white-left pd-20">
  116. <p class="title text-left f24">中国景迈 东方纳帕</p>
  117. <p class="">茶马古道,由安缦酒店御用设计团队Masa Studio担纲设计。在景迈山的大地与空气之间,建筑师感知到古老茶林所包含的人与自然的情感,以拉祜族葫芦图腾为原型,进行古老与现代交织的建筑创作。从天空视角俯瞰,葫芦图腾的大圆、小圆又似普洱茶饼和普洱茶笋壳,犹如矗立在茶田中的“一提茶叶”。</p>
  118. </div>
  119. </div>
  120. </div>
  121. <div class="block no-padding-top">
  122. <img src="__CDN__/assets/shop/img/index/image9.jpeg" alt="">
  123. </div>
  124. </div>
  125. <!-- Footer-Menu -->
  126. <div id="navbar">
  127. <ul id="menu">
  128. <li class="item active"><a data-href="{:url('shop/index/index')}">首页</a></li>
  129. <li class="item"><a data-href="{:url('/shop/goods/index')}" >商城</a></li>
  130. <li class="item"><a data-href="{:url('shop/trade/tradelist')}" >全部订单</a></li>
  131. <li class="item"><a data-href="{:url('shop/user/bonuspage')}" >分销中心</a></li>
  132. <li class="item"><a data-href="{:url('shop/user/index')}">个人中心</a></li>
  133. </ul>
  134. <audio id="menuAudio" src="__CDN__/assets/shop/mp3/btn.wav" style="display: none;"></audio>
  135. </div>
  136. </div>
  137. <!-- 启动页 -->
  138. {include file="index/run" /}
  139. <!--[if (gte IE 9)|!(IE)]><!-->
  140. <!--<![endif]-->
  141. <!--[if lte IE 8 ]>
  142. <script src="__CDN__/assets/shop/js/jquery.min.js"></script>
  143. <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
  144. <script src="js/amazeui.ie8polyfill.min.js"></script>
  145. <![endif]-->
  146. <script src="__CDN__/assets/shop/js/jquery.min.js"></script>
  147. <script src="__CDN__/assets/shop/js/app.js"></script>
  148. <script src="__CDN__/assets/libs/layer/layer.js"></script>
  149. <script type="text/javascript">
  150. $(function() {
  151. var video = document.getElementById('video');
  152. video.onclick = function () {
  153. var audio = document.getElementById('audio');
  154. if(this.paused){
  155. $(this).attr('controls', true);
  156. this.play();
  157. }else{
  158. $(this).removeAttr('controls');
  159. this.pause();
  160. }
  161. if(!audio.paused){
  162. $(audio).removeAttr('controls');
  163. audio.pause();
  164. }
  165. }
  166. // 导航跳转
  167. $("#navbar a").click(function(){
  168. var url = $(this).attr('data-href');
  169. if(url){
  170. playMusic();
  171. setTimeout(function(){
  172. location=url;
  173. }, 800)
  174. }
  175. })
  176. })
  177. /**
  178. * 按钮声音
  179. */
  180. function playMusic(){
  181. var audio = document.getElementById('menuAudio');
  182. if (audio.paused) {
  183. $(audio).attr('autoplay', true);
  184. $(audio).attr('controls', true);
  185. audio.volume = 0.5
  186. audio.play();
  187. } else {
  188. $(audio).removeAttr('autoplay');
  189. $(audio).removeAttr('controls');
  190. audio.pause();
  191. }
  192. }
  193. </script>
  194. </body>
  195. </html>