projects-1-1.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  6. <meta name='viewport' content='width=device-width, initial-scale=1.0,user-scalable=no'>
  7. <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  8. <title>PROJECTS | ELAB</title>
  9. <link rel="stylesheet" href="css/reset.css?v=1.000001"></link>
  10. <link rel="stylesheet" href="css/style.css?v=1.00000"></link>
  11. <link rel="stylesheet" href="css/animate.min.css"></link>
  12. <style type="text/css">
  13. html,
  14. body {
  15. background: #1b2030;
  16. height: auto;
  17. }
  18. .slide-line,.slide-line1{
  19. background: #fff;
  20. }
  21. #projects {
  22. width: 100%;
  23. height: auto;
  24. background: #1b2030;
  25. max-width: none;
  26. overflow-x: hidden;
  27. overflow-y: auto;
  28. }
  29. </style>
  30. </head>
  31. <body>
  32. <div id="projects" class="page">
  33. <!--main-->
  34. <div id="projectDetail" class="project-list">
  35. <div class="project-item-detail">
  36. <img class="inner-icon wow fadeIn" data-wow-duration="1s" data-wow-delay="1s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_7.jpg" />
  37. <div class="close-bar wow rollInLeft" data-wow-duration="1s" data-wow-delay="1.5s"></div>
  38. <div class="item-desc item-inner wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1.8s"><span>未来人居1号作品</span></div>
  39. <div class="item-title item-inner wow fadeInLeft" data-wow-duration="1s" data-wow-delay="2.1s">重庆天空森林城市<p>Sky Forest City</p></div>
  40. <div class="item-icon item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.8s"><img src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_4.png" /></div>
  41. <div class="item-link item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.8s"> <a id='video_btn_sfc' href="javascript:;">查看视频</a> </div>
  42. </div>
  43. <div id="parts2" class="project-item-detail">
  44. <ul class="info-list">
  45. <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.8s">日期<br/><small>2015-2018</small></li>
  46. <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="2s">体量<br/><small>建面38.7万方</small></li>
  47. <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="2.2s">地址<br/><small>重庆·南滨路</small></li>
  48. <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="2.4s">开发商<br/><small>洋世达</small></li>
  49. <li class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="2.6s">物业类型<br/><small>大平层/豪宅</small></li>
  50. </ul>
  51. </div>
  52. <div id="parts3" class="project-item-detail">
  53. <img class="inner-icon" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_8.jpg" />
  54. <div class="inner-mask">
  55. <div class="number-line line1 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
  56. <div class="number-box">12<p class="w-right">亿</p><p class="w-left">高于原计划的销售额</p></div>
  57. <div class="number-box">8<p class="w-right month">月</p><p class="w-left circle">缩短的销售周期</p></div>
  58. </div>
  59. <div class="number-line line2 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
  60. <div class="number-box">25<p class="percent">%</p><p class="w-right rate">净利润率提升</p></div>
  61. <div class="number-box">151<p class="percent p2">%</p><p class="w-right trade">成交均价溢价率</p></div>
  62. </div>
  63. </div>
  64. </div>
  65. <div id="parts4" class="project-item-detail">
  66. <img class="inner-icon wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_10.jpg" />
  67. <img class="part-icon wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.5s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_9.png" />
  68. <div class="title wow fadeInDown" data-wow-duration="1s" data-wow-delay="0.5s">中国十大未来人居 绿色未来金奖</div>
  69. <div class="desc wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">唯一代表重庆入围设计周,获得来自全球4大洲、<br/>15个国家、100余名知名设计师的一致赞赏</div>
  70. <div class="item-link item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s"><a id="video_btn_dw" href="javascript:;" class="parts-links">查看详情</a></div>
  71. </div>
  72. <div id="parts5" class="project-item-detail">
  73. <img class="inner-icon wow fadeIn" data-wow-duration="1s" data-wow-delay="0.5s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_11.jpg" />
  74. <div class="words1 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
  75. 上居—以需定产<br/>创新产品研发
  76. <p>90天内完成产品创新及可行性的验证</p>
  77. </div>
  78. <div class="words2 wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.5s">
  79. 我们在线收集了大量C端的产品设计需求热度数据,并在2016年举办全球新锐设计师大赛,众智众筹,向全球300多家知名设计单位和个人征集作品。大师评审团最终评选出20家入围作品和8家优胜奖,这些作品成为了大量的创新产品原型。
  80. </div>
  81. <div class="item-link item-inner wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s"><a id='video_btn_global' href="javascript:;" class="parts-links">查看视频</a></div>
  82. </div>
  83. <div id="parts6" class="project-item-detail">
  84. <div class="words1 wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
  85. 大麦-智能营销
  86. <p>6个月 两栋超高层开盘,重庆毛坯单价最高入市</p>
  87. <p class="about">2016年,我们推出了ELAB自主研发的大麦SAAS产品系列——天空森林城市APP,深耕地产线上营销环节,布局售前、售中、售后全生命周期地产线上营销应用场景,利用互联网技术突破传统营销瓶颈,将传播,转化,裂变效能最大化。</p>
  88. <div class="about-link wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s"><a href="javascript:parent.showIndex();parent.showSliderLink('do-damai.html');" class="parts-links">关于大麦</a></div>
  89. </div>
  90. <img class="dm-app wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_12.png" />
  91. </div>
  92. <div id="parts7" class="project-item-detail">
  93. <div class="top-line"></div>
  94. <div class="project-name wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">
  95. 天空森林城市
  96. <p>Sky Forest City</p>
  97. </div>
  98. <div class="project-qrcode">
  99. <img class="qrcode wow rotateIn" data-wow-duration="1s" data-wow-delay="0.5s" src="http://yun-image.elab-plus.com/images/projects/1_objects@2x_13.png" />
  100. <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.5s">扫码下载体验</p>
  101. </div>
  102. </div>
  103. <video id="video_sfc" style="display: none" controls preload="auto" width="400px" height="300px">
  104. <source src="http://yun-image.elab-plus.com/video/天空森林城市详情页视频1.mp4" type="video/mp4">
  105. </video>
  106. <video id="video_dw" style="display: none" controls preload="auto" width="400px" height="300px">
  107. <source src="http://yun-image.elab-plus.com/video/北京国际设计周.mp4" type="video/mp4">
  108. </video>
  109. <video id="video_global" style="display: none" controls preload="auto" width="400px" height="300px">
  110. <source src="http://yun-image.elab-plus.com/video/2收集全球智慧.mp4" type="video/mp4">
  111. </video>
  112. </div>
  113. </div>
  114. <script src="js/jquery-1.11.3.min.js"></script>
  115. <script src="js/layer/layer.js"></script>
  116. <script src="js/wow.js"></script>
  117. <script>
  118. $(function() {
  119. //close-bar click
  120. $('.close-bar').on('click',function(e){
  121. parent.closeDetail();
  122. });
  123. $('#video_btn_sfc').on('click', function(){
  124. layer.open({
  125. type: 1,
  126. title: false,
  127. shade:0.6,
  128. closeBtn: 0,
  129. area:['400px', '300px'],
  130. shadeClose: true,
  131. content: $('#video_sfc')
  132. });
  133. });
  134. $('#video_btn_dw').on('click', function(){
  135. layer.open({
  136. type: 1,
  137. title: false,
  138. shade:0.6,
  139. closeBtn: 0,
  140. area:['400px', '300px'],
  141. shadeClose: true,
  142. content: $('#video_dw')
  143. });
  144. });
  145. $('#video_btn_global').on('click', function(){
  146. layer.open({
  147. type: 1,
  148. title: false,
  149. shade:0.6,
  150. closeBtn: 0,
  151. area:['400px', '300px'],
  152. shadeClose: true,
  153. content: $('#video_global')
  154. });
  155. });
  156. var wow = new WOW({
  157. boxClass: 'wow',
  158. animateClass: 'animated',
  159. offset: 0,
  160. mobile: true,
  161. live: true
  162. });
  163. wow.init();
  164. });
  165. </script>
  166. </body>
  167. </html>