news.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
  6. <meta content='width=device-width, initial-scale=1.0,user-scalable=no' name='viewport'>
  7. <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
  8. <title>NEWS CENTER</title>
  9. <link href="css/reset.css" rel="stylesheet"/>
  10. <link href="css/style.css?v=0.346785347683" rel="stylesheet"/>
  11. <link href="css/animate.min.css" rel="stylesheet"/>
  12. <style type="text/css">
  13. html,
  14. body {
  15. height: auto;
  16. min-height: 100%;
  17. background: #1b2030;
  18. }
  19. #projects {
  20. width: 100%;
  21. height: auto;
  22. background: #1b2030;
  23. max-width: none;
  24. overflow-x: hidden;
  25. overflow-y: auto;
  26. }
  27. .slide-line, .slide-line1 {
  28. background: #fff;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div class="page" id="projects">
  34. <!--top menu-->
  35. <div class="top-menu wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
  36. <div class="logo">
  37. <a href="javascript:parent.showIndex();"><img class="inner-icon"
  38. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png"/></a>
  39. </div>
  40. <div class="menu"><img class="inner-icon"
  41. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png"/></div>
  42. <div class="cases"><a href="javascript:void(0);"><img class="inner-icon"
  43. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png"/></a>
  44. </div>
  45. </div>
  46. <!--main menu-->
  47. <div class="main-menu">
  48. <div class="menu-background"></div>
  49. <!--contact us-->
  50. <div class="menu-contact">
  51. <div class="menu-contact-list">
  52. <div class="menu-contact-map">
  53. <a href="https://m.amap.com/search/mapview/markers=31.287272%2C121.447295%2C%E4%B8%8A%E6%B5%B7%E5%B8%82%E9%9D%99%E5%AE%89%E5%8C%BA%E5%BD%AD%E6%B1%9F%E8%B7%AF602%E5%8F%B7e%E5%BA%A7" target="_blank">
  54. <div class="map-icon">
  55. <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
  56. </div>
  57. <div class="map-address">
  58. <p>地址</p>
  59. </div>
  60. <div class="map-desc">
  61. <p>上海市静安区彭江路602号E座408室</p>
  62. </div>
  63. </a>
  64. </div>
  65. <div class="menu-contact-phone">
  66. <div class="phone-icon">
  67. <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
  68. </div>
  69. <div class="phone-address">
  70. <p>电话</p>
  71. </div>
  72. <div class="phone-desc">
  73. <p><a href="tel:02156519508">021-56519508</a></p>
  74. </div>
  75. </div>
  76. <div class="menu-contact-mail">
  77. <div class="email-icon">
  78. <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
  79. </div>
  80. <div class="email-address">
  81. <p>邮件</p>
  82. </div>
  83. <div class="email-desc">
  84. <p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <!--CONTACT US-->
  90. <div class="menu-close"></div>
  91. <ul class="menu-list">
  92. <li class="elab_who">
  93. <a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showWho();">ELAB是谁
  94. <small>WHO IS ELAB</small>
  95. </a>
  96. </li>
  97. <li class="elab_what">
  98. <a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showDo();">ELAB做什么
  99. <small>WHAT ELAB DO</small>
  100. </a>
  101. </li>
  102. <li class="elab_news">
  103. <a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showNews();">新闻中心
  104. <small>NEWS</small>
  105. </a>
  106. </li>
  107. <li class="elab_project">
  108. <a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showProjects();">作品案例
  109. <small>PROJECTS</small>
  110. </a>
  111. </li>
  112. <li class="elab_contact">
  113. <a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showCareers();">加入我们
  114. <small>CAREERS</small>
  115. </a>
  116. </li>
  117. <!--<li>-->
  118. <!--<a href="javascript:$('.main-menu').removeClass('active');parent.closeNews();parent.showContact();">联系我们-->
  119. <!--<small>CONTACTS</small>-->
  120. <!--</a>-->
  121. <!--</li>-->
  122. </ul>
  123. </div>
  124. <!--main-->
  125. <div class="news_narrow">
  126. <img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png"/>
  127. </div>
  128. <div class="news-detail">
  129. <div class="article-close"></div>
  130. <iframe frameborder="0" height="100%" scrolling="yes" class="news-iframe" width="100%"></iframe>
  131. </div>
  132. <div class="news-body">
  133. <div class="news-list"></div>
  134. <div class="news-sample-list"></div>
  135. </div>
  136. </div>
  137. <script src="js/jquery-1.11.3.min.js"></script>
  138. <script src="js/wow.js"></script>
  139. <script>
  140. var btnChange = false;
  141. var iframeShow =false;
  142. // var itemFocus = false;
  143. var markIdx = 0;
  144. var currentIdx = 0;
  145. var lastIdx = 0;
  146. $(function () {
  147. $("news-body").on("touchmove",(e)=>{
  148. if(iframeShow){
  149. e.preventDefault();
  150. }
  151. });
  152. //show menu
  153. $(".menu").on("click", function (e) {
  154. $(".main-menu").addClass("active");
  155. });
  156. //close menu
  157. $('.menu-close').on('click', function (e) {
  158. $(".main-menu").removeClass("active");
  159. });
  160. $('.news-detail').on('click', function (e) {
  161. $(".news-detail").removeClass("active");
  162. iframeShow = false;
  163. });
  164. <!-- menu hover start-->
  165. $('.elab_who').hover(function () {
  166. currentIdx = 1;
  167. },function () {
  168. currentIdx = 0;
  169. });
  170. $('.elab_what').hover(function () {
  171. currentIdx = 2;
  172. },function () {
  173. currentIdx = 0;
  174. });
  175. $('.elab_news').hover(function () {
  176. currentIdx = 3;
  177. },function () {
  178. currentIdx = 0;
  179. });
  180. $('.elab_project').hover(function () {
  181. currentIdx = 4;
  182. },function () {
  183. currentIdx = 0;
  184. });
  185. $('.elab_contact').hover(function () {
  186. currentIdx = 5;
  187. },function () {
  188. currentIdx = 0;
  189. });
  190. <!-- menu hover end -->
  191. <!--mouse over listener start-->
  192. <!--mouse over listener end-->
  193. setInterval(function () {
  194. if(markIdx !== currentIdx){
  195. markIdx = currentIdx;
  196. var link = '';
  197. var empty = true;
  198. switch (markIdx) {
  199. case 0:
  200. link = '';
  201. empty = true;
  202. break;
  203. case 1:
  204. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  205. empty = false;
  206. break;
  207. case 2:
  208. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  209. empty = false;
  210. break;
  211. case 3:
  212. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  213. empty = false;
  214. break;
  215. case 4:
  216. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  217. empty = false;
  218. break;
  219. case 5:
  220. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  221. empty = false;
  222. break;
  223. }
  224. if(empty){
  225. $(".menu-background").fadeOut(400,function () {
  226. $(".menu-background").css('background-image',link);
  227. });
  228. }else {
  229. if(lastIdx!==0){
  230. $(".menu-background").fadeOut(400,function () {
  231. $(".menu-background").css('background-image',link);
  232. $(".menu-background").fadeIn(800);
  233. })
  234. }else {
  235. $(".menu-background").css('background-image',link);
  236. $(".menu-background").fadeIn(800);
  237. }
  238. }
  239. lastIdx = markIdx;
  240. }
  241. },1210);
  242. var $_list;
  243. //读取分类数据 106.14.225.13
  244. $.get("http://192.168.0.16:8081/rest/listNews", function (result) {
  245. console.log("Result Data:" + JSON.stringify(result.result));
  246. $_list = result.result;
  247. handleModuleShow();
  248. });
  249. /**
  250. * 网格显示
  251. * */
  252. function handleModuleShow() {
  253. if ($_list.length > 0) {
  254. $(".news-list").empty();//清空demo $_list.length
  255. for (var i = 0; i < $_list.length; i+=3) {
  256. var tmp0 = $_list[i];
  257. var tmp1 = $_list[i+1];
  258. var tmp2 = $_list[i+2];
  259. var $_t = 0.1;
  260. if (i < 2) {
  261. $_t = (1 + i) * 0.2;
  262. }
  263. console.log($_t);
  264. // console.log('$_img:' + $_img);
  265. var $_html = '';
  266. if (tmp0 && tmp1 && tmp2) {
  267. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  268. var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  269. var $_img2 = tmp2['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  270. var data0 = new Date(tmp0['updated']);
  271. var data1 = new Date(tmp1['updated']);
  272. var data2 = new Date(tmp2['updated']);
  273. $_html = `<div class="newsItem_1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp0['linkUrl']})">
  274. <img class="itemBg" src="${$_img0}"/>
  275. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  276. <div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  277. <div class="item-time item-time-inner"><p>${data0.toLocaleString( )}</p></div>
  278. </div>
  279. <div class="newsBody">
  280. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp1['linkUrl']})">
  281. <img class="itemBg" src="${$_img1}" />
  282. <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
  283. <div class="item-title item-inner">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
  284. <div class="item-time item-time-inner"><p>${data1.toLocaleString( )}</p></div>
  285. </div>
  286. <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp2['linkUrl']})">
  287. <img class="itemBg" src="${$_img2}" />
  288. <div class="newsItem-mark item-inner"><a>${tmp2['tag']}</a></div>
  289. <div class="item-title item-inner">${tmp2['title']}<p>${tmp2['subTitle']}</p></div>
  290. <div class="item-time item-time-inner"><p>${data2.toLocaleString( )}</p></div>
  291. </div>
  292. </div>
  293. `;
  294. }else if (tmp0 && tmp1 && !tmp2) {
  295. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  296. var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  297. var data0 = new Date(tmp0['updated']);
  298. var data1 = new Date(tmp1['updated']);
  299. $_html = `
  300. <div class="newsBody">
  301. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp0['linkUrl']})">
  302. <img class="itemBg" src="${$_img0}"/>
  303. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  304. <div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  305. <div class="item-time item-time-inner"><p>${data0.toLocaleString( )}</p></div>
  306. </div>
  307. <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp1['linkUrl']})">
  308. <img class="itemBg" src="${$_img1}" />
  309. <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
  310. <div class="item-title item-inner">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
  311. <div class="item-time item-time-inner"><p>${data1.toLocaleString( )}</p></div>
  312. </div>
  313. </div>
  314. `;
  315. }else if(tmp0 && !tmp1 && !tmp2){
  316. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  317. var data0 = new Date(tmp0['updated']);
  318. $_html = `
  319. <div class="newsBody">
  320. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${tmp0['linkUrl']})">
  321. <img class="itemBg" src="${$_img0}"/>
  322. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  323. <div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  324. <div class="item-time item-time-inner"><p>${data0.toLocaleString( )}</p></div>
  325. </div>
  326. </div>
  327. `;
  328. }
  329. $(".news-sample-list").append($_html);
  330. }
  331. }
  332. }
  333. /**
  334. * 列表显示
  335. * @param list
  336. */
  337. function handleListShow() {
  338. // var list = [];
  339. console.log('handleListShow:'+JSON.stringify($_list));
  340. for(var i=0;i<$_list.length;i+=2){
  341. var item1 = $_list[i];
  342. var item2 = $_list[i+1];
  343. var $_t = (1 + i) * 0.2;
  344. var $_html = '';
  345. if(item2 && item1){
  346. $_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  347. <div class="news-list-item-left">
  348. <div class="news-list-item-box"><p>${item1['id']}</p></div>
  349. <div class="news-list-item-description">
  350. <div class="news-list-item-title"><p>${item1['title']}</p></div>
  351. <div class="news-list-item-bottom"></div>
  352. </div>
  353. </div>
  354. <div class="news-list-item-right">
  355. <div class="news-list-item-box"><p>${item2['id']}</p></div>
  356. <div class="news-list-item-description">
  357. <div class="news-list-item-title"><p>${item2['title']}</p></div>
  358. <div class="news-list-item-bottom"></div>
  359. </div>
  360. </div>
  361. </div>
  362. `;
  363. }else if(!item2 && item1){
  364. $_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  365. <div class="news-list-item-left">
  366. <div class="news-list-item-box"><p>${item1['id']}</p></div>
  367. <div class="news-list-item-description">
  368. <div class="news-list-item-title"><p>${item1['title']}</p></div>
  369. <div class="news-list-item-bottom"></div>
  370. </div>
  371. </div>
  372. <div class="news-list-item-divideHeight"></div>
  373. </div>
  374. `;
  375. }
  376. $(".news-list").append($_html);
  377. }
  378. }
  379. function lishChange() {
  380. btnChange = !btnChange;
  381. if(btnChange){
  382. // <img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png"/>
  383. $(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png");
  384. $(".news-sample-list").empty();
  385. handleListShow();
  386. }else {
  387. $(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png");
  388. $(".news-list").empty();
  389. handleModuleShow();
  390. }
  391. }
  392. $(".news_tab_img").on("click", function (e) {
  393. lishChange();
  394. });
  395. });
  396. function startWow() {
  397. //start wow
  398. var wow = new WOW({
  399. boxClass: 'wow',
  400. animateClass: 'animated',
  401. offset: 100,
  402. mobile: true,
  403. live: true
  404. });
  405. wow.init();
  406. }
  407. function menuShowProjects() {
  408. top.closeAndShowPro('projectsLayer');
  409. }
  410. function turnToArticle(link) {
  411. console.log('turnToArticle:'+link);
  412. // $(".news-iframe",parent.document.body).attr("src","https://www.baidu.com/");
  413. if(!link){
  414. return
  415. }
  416. $(".news-iframe").src = link;
  417. $(".news-detail").addClass("active");
  418. iframeShow = true;
  419. // news-body
  420. }
  421. </script>
  422. </body>
  423. </html>