index.html 11 KB

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