news.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
  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 name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  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: #2C2E34;
  18. }
  19. #projects {
  20. width: 100%;
  21. height: auto;
  22. background: #2C2E34;
  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-news wow fadeInDown" data-wow-delay="1s" data-wow-duration="1s">
  36. <div class="logo">
  37. <a href="javascript:parent.showIndex();"><img class="inner-icon inner-main"
  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 inner-menu"
  41. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png"/></div>
  42. <div class="cases"><a href="javascript:parent.closeNews();parent.showProjects();"><img class="inner-icon inner-artcle"
  43. src="http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png"/></a>
  44. </div>
  45. </div>
  46. <!--footer news-footer-->
  47. <div class="news-footer">
  48. <div class="mobile-hide news-left">Copyright©2015-2018, elab-plus.com. All rights reserved. | 沪ICP备15047801号-1</div>
  49. <div class="mobile-hide news-right">上海定卓⽹络科技有限公司 电话:021-50753278 地址:上海市静安区彭江路602号E座408室</div>
  50. <div class="mobile-display news-left" style="visibility: hidden;">Copyright©2015-2018 | 沪ICP备15047801号-1</div>
  51. </div>
  52. <!--main menu-->
  53. <div class="main-menu-news">
  54. <div class="menu-background"></div>
  55. <!--contact us-->
  56. <div class="menu-contact">
  57. <div class="menu-contact-list">
  58. <div class="menu-contact-map">
  59. <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">
  60. <div class="map-icon">
  61. <img class="map-img" src="https://dm.static.elab-plus.com/elabGuanWang/Location@2x.png">
  62. </div>
  63. <div class="map-address">
  64. <p>地址</p>
  65. </div>
  66. <div class="map-desc">
  67. <p>上海市静安区彭江路602号E座408室</p>
  68. </div>
  69. </a>
  70. </div>
  71. <div class="menu-contact-phone">
  72. <div class="phone-icon">
  73. <img class="phone-img" src="https://dm.static.elab-plus.com/elabGuanWang/Phone@2x.png">
  74. </div>
  75. <div class="phone-address">
  76. <p>电话</p>
  77. </div>
  78. <div class="phone-desc">
  79. <p><a href="tel:02156519508">021-56519508</a></p>
  80. </div>
  81. </div>
  82. <div class="menu-contact-mail">
  83. <div class="email-icon">
  84. <img class="email-img" src="https://dm.static.elab-plus.com/elabGuanWang/Email@2x.png">
  85. </div>
  86. <div class="email-address">
  87. <p>邮件</p>
  88. </div>
  89. <div class="email-desc">
  90. <p><a href="mailto:admin@elab-plus.com">admin@elab-plus.com</a></p>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <!--CONTACT US-->
  96. <div class="menu-close-news"></div>
  97. <ul class="menu-list">
  98. <li class="elab_who">
  99. <a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showWho();">ELAB是谁
  100. <small>WHO IS ELAB</small>
  101. </a>
  102. </li>
  103. <li class="elab_what">
  104. <a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showDo();">ELAB做什么
  105. <small>WHAT ELAB DO</small>
  106. </a>
  107. </li>
  108. <li class="elab_news">
  109. <a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showNews();">新闻中心
  110. <small>NEWS</small>
  111. </a>
  112. </li>
  113. <li class="elab_project">
  114. <a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showProjects();">作品案例
  115. <small>PROJECTS</small>
  116. </a>
  117. </li>
  118. <li class="elab_contact">
  119. <a href="javascript:$('.main-menu-news').removeClass('active');parent.closeNews();parent.showCareers();">加入我们
  120. <small>CAREERS</small>
  121. </a>
  122. </li>
  123. </ul>
  124. </div>
  125. <!--main-->
  126. <div class="news_narrow">
  127. <img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png"/>
  128. </div>
  129. <div class="news-detail" id="iframeParent">
  130. <!--<div class="article-close" id="articleCloseBtn"></div>-->
  131. <!--<iframe frameborder="0" height="100%" scrolling="yes" name="newsIframe" class="news-iframe" width="100%"></iframe>-->
  132. </div>
  133. <div class="news-body">
  134. <div class="news-list"></div>
  135. <div class="news-sample-list"></div>
  136. </div>
  137. </div>
  138. <script src="js/jquery-1.11.3.min.js"></script>
  139. <script src="js/wow.js"></script>
  140. <script>
  141. var btnChange = false;
  142. var iframeShow =false;
  143. // var itemFocus = false;
  144. var markIdx = 0;
  145. var currentIdx = 0;
  146. var lastIdx = 0;
  147. var menuList = ["elab_who","elab_what","elab_news","elab_project","elab_contact"];
  148. var lastClassName ='';
  149. var lineUrl = null;
  150. var item = null;
  151. var articleCloseBtn;
  152. var iframeHtml;
  153. $(function () {
  154. $("news-body").on("touchmove",(e)=>{
  155. if(iframeShow){
  156. e.preventDefault();
  157. }
  158. });
  159. //show menu
  160. $(".menu").on("click", function (e) {
  161. $(".main-menu-news").addClass("active");
  162. });
  163. //close menu
  164. $('.menu-close-news').on('click', function (e) {
  165. $(".main-menu-news").removeClass("active");
  166. });
  167. $('.news-detail').on('click', function (e) {
  168. $(".news-detail").removeClass("active");
  169. iframeShow = false;
  170. lineUrl = "";
  171. item = "";
  172. $(".inner-main").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_3.png");
  173. $(".inner-menu").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_4.png");
  174. $(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/contact/1_objects@2x_5.png");
  175. $(".top-menu-news").css("background-color","#2C2E34");
  176. // var parentDiv = document.getElementById("iframeParent");
  177. $("#iframeParent").empty();
  178. });
  179. <!-- menu hover start-->
  180. $('.elab_who').hover(function () {
  181. currentIdx = 1;
  182. // $(".elab_who").css("opacity","1");
  183. // $(".elab_who").removeClass("animate_fadeIn");
  184. // $(".elab_what").removeClass("animate_fadeIn");
  185. // $(".elab_news").removeClass("animate_fadeIn");
  186. // $(".elab_project").removeClass("animate_fadeIn");
  187. // $(".elab_contact").removeClass("animate_fadeIn");
  188. //
  189. // $(".elab_what").addClass("animate_fadeOut");
  190. // $(".elab_news").addClass("animate_fadeOut");
  191. // $(".elab_project").addClass("animate_fadeOut");
  192. // $(".elab_contact").addClass("animate_fadeOut");
  193. },function () {
  194. currentIdx = 0;
  195. // $(".elab_who").css("opacity","1");
  196. //
  197. // $(".elab_who").removeClass("animate_fadeOut");
  198. // $(".elab_what").removeClass("animate_fadeOut");
  199. // $(".elab_news").removeClass("animate_fadeOut");
  200. // $(".elab_project").removeClass("animate_fadeOut");
  201. // $(".elab_contact").removeClass("animate_fadeOut");
  202. // $(".elab_what").addClass("animate_fadeIn");
  203. // $(".elab_news").addClass("animate_fadeIn");
  204. // $(".elab_project").addClass("animate_fadeIn");
  205. // $(".elab_contact").addClass("animate_fadeIn");
  206. });
  207. $('.elab_what').hover(function () {
  208. currentIdx = 2;
  209. // $(".elab_what").css("opacity","1");
  210. // $(".elab_who").removeClass("animate_fadeIn");
  211. // $(".elab_what").removeClass("animate_fadeIn");
  212. // $(".elab_news").removeClass("animate_fadeIn");
  213. // $(".elab_project").removeClass("animate_fadeIn");
  214. // $(".elab_contact").removeClass("animate_fadeIn");
  215. },function () {
  216. currentIdx = 0;
  217. /* $(".elab_what").css("opacity","1");
  218. $(".elab_who").removeClass("animate_fadeOut");
  219. $(".elab_what").removeClass("animate_fadeOut");
  220. $(".elab_news").removeClass("animate_fadeOut");
  221. $(".elab_project").removeClass("animate_fadeOut");
  222. $(".elab_contact").removeClass("animate_fadeOut");*/
  223. // $(".elab_who").addClass("animate_fadeIn");
  224. // $(".elab_news").addClass("animate_fadeIn");
  225. // $(".elab_project").addClass("animate_fadeIn");
  226. // $(".elab_contact").addClass("animate_fadeIn");
  227. });
  228. $('.elab_news').hover(function () {
  229. currentIdx = 3;
  230. /*$(".elab_news").css("opacity","1");
  231. $(".elab_who").removeClass("animate_fadeIn");
  232. $(".elab_what").removeClass("animate_fadeIn");
  233. $(".elab_news").removeClass("animate_fadeIn");
  234. $(".elab_project").removeClass("animate_fadeIn");
  235. $(".elab_contact").removeClass("animate_fadeIn");*/
  236. },function () {
  237. currentIdx = 0;
  238. /*$(".elab_news").css("opacity","1");
  239. $(".elab_who").removeClass("animate_fadeOut");
  240. $(".elab_what").removeClass("animate_fadeOut");
  241. $(".elab_news").removeClass("animate_fadeOut");
  242. $(".elab_project").removeClass("animate_fadeOut");
  243. $(".elab_contact").removeClass("animate_fadeOut");*/
  244. // $(".elab_who").addClass("animate_fadeIn");
  245. // $(".elab_what").addClass("animate_fadeIn");
  246. // $(".elab_project").addClass("animate_fadeIn");
  247. // $(".elab_contact").addClass("animate_fadeIn");
  248. });
  249. $('.elab_project').hover(function () {
  250. currentIdx = 4;
  251. /*$(".elab_project").css("opacity","1");
  252. $(".elab_who").removeClass("animate_fadeIn");
  253. $(".elab_what").removeClass("animate_fadeIn");
  254. $(".elab_news").removeClass("animate_fadeIn");
  255. $(".elab_project").removeClass("animate_fadeIn");
  256. $(".elab_contact").removeClass("animate_fadeIn");
  257. $(".elab_who").addClass("animate_fadeOut");
  258. $(".elab_what").addClass("animate_fadeOut");
  259. $(".elab_news").addClass("animate_fadeOut");
  260. $(".elab_contact").addClass("animate_fadeOut");*/
  261. },function () {
  262. currentIdx = 0;
  263. /*$(".elab_project").css("opacity","1");
  264. $(".elab_who").removeClass("animate_fadeOut");
  265. $(".elab_what").removeClass("animate_fadeOut");
  266. $(".elab_news").removeClass("animate_fadeOut");
  267. $(".elab_project").removeClass("animate_fadeOut");
  268. $(".elab_contact").removeClass("animate_fadeOut");
  269. $(".elab_who").addClass("animate_fadeIn");
  270. $(".elab_what").addClass("animate_fadeIn");
  271. $(".elab_news").addClass("animate_fadeIn");
  272. $(".elab_contact").addClass("animate_fadeIn");*/
  273. });
  274. $('.elab_contact').hover(function () {
  275. currentIdx = 5;
  276. /*$(".elab_contact").css("opacity","1");
  277. $(".elab_who").removeClass("animate_fadeIn");
  278. $(".elab_what").removeClass("animate_fadeIn");
  279. $(".elab_news").removeClass("animate_fadeIn");
  280. $(".elab_project").removeClass("animate_fadeIn");
  281. $(".elab_contact").removeClass("animate_fadeIn");
  282. $(".elab_who").addClass("animate_fadeOut");
  283. $(".elab_what").addClass("animate_fadeOut");
  284. $(".elab_news").addClass("animate_fadeOut");
  285. $(".elab_project").addClass("animate_fadeOut");*/
  286. },function () {
  287. currentIdx = 0;
  288. /* $(".elab_contact").css("opacity","1");
  289. $(".elab_who").removeClass("animate_fadeOut");
  290. $(".elab_what").removeClass("animate_fadeOut");
  291. $(".elab_news").removeClass("animate_fadeOut");
  292. $(".elab_project").removeClass("animate_fadeOut");
  293. $(".elab_contact").removeClass("animate_fadeOut");
  294. $(".elab_who").addClass("animate_fadeIn");
  295. $(".elab_what").addClass("animate_fadeIn");
  296. $(".elab_news").addClass("animate_fadeIn");
  297. $(".elab_project").addClass("animate_fadeIn");*/
  298. });
  299. <!-- menu hover end -->
  300. <!--mouse over listener start-->
  301. <!--mouse over listener end-->
  302. setInterval(function () {
  303. if(markIdx !== currentIdx){
  304. markIdx = currentIdx;
  305. var link = '';
  306. var empty = true;
  307. // [".elab_who",".elab_what",".elab_news",".elab_project",".elab_contact"]
  308. var currentClassName = '';
  309. switch (markIdx) {
  310. case 0:
  311. link = '';
  312. empty = true;
  313. currentClassName = "";
  314. break;
  315. case 1:
  316. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_what.png)';
  317. empty = false;
  318. currentClassName = "elab_who";
  319. break;
  320. case 2:
  321. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_do.png)';
  322. empty = false;
  323. currentClassName = "elab_what";
  324. break;
  325. case 3:
  326. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_news.png)';
  327. empty = false;
  328. currentClassName = "elab_news";
  329. break;
  330. case 4:
  331. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_project.png)';
  332. empty = false;
  333. currentClassName = "elab_project";
  334. break;
  335. case 5:
  336. link = 'url(https://dm.static.elab-plus.com/elabGuanWang/elab_join.png)';
  337. empty = false;
  338. currentClassName = "elab_contact";
  339. break;
  340. }
  341. if(empty){
  342. $(".menu-background").fadeOut(400,function () {
  343. $(".menu-background").css('background-image',link);
  344. });
  345. }else {
  346. if(lastIdx!==0){
  347. $(".menu-background").fadeOut(400,function () {
  348. $(".menu-background").css('background-image',link);
  349. $(".menu-background").fadeIn(800);
  350. });
  351. }else {
  352. $(".menu-background").css('background-image',link);
  353. $(".menu-background").fadeIn(800);
  354. }
  355. }
  356. lastIdx = markIdx;
  357. lastClassName = currentClassName;
  358. }
  359. },1210);
  360. var $_list;
  361. var $_listV;
  362. // 192.168.0.16
  363. //读取分类数据 106.14.225.13
  364. $.get("http://106.14.225.13:8081/rest/listNews", function (result) {
  365. console.log("Result Data:" + JSON.stringify(result.result));
  366. window.newsList = result.result;
  367. $_list = result.result;
  368. $_listV = result.result;
  369. handleModuleShow();
  370. });
  371. /**
  372. * 网格显示
  373. * */
  374. function handleModuleShow() {
  375. if ($_list.length > 0) {
  376. $(".news-list").empty();//清空demo $_list.length
  377. for (var i = 0; i < $_list.length; i+=3) {
  378. var tmp0 = $_list[i];
  379. var tmp1 = $_list[i+1];
  380. var tmp2 = $_list[i+2];
  381. var $_t = 0.1;
  382. if (i < 2) {
  383. $_t = (1 + i) * 0.2;
  384. }
  385. console.log($_t);
  386. // console.log('$_img:' + $_img);
  387. var $_html = '';
  388. if (tmp0 && tmp1 && tmp2) {
  389. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  390. var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  391. var $_img2 = tmp2['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  392. var data0 = new Date(tmp0['created']);
  393. console.log("tmp0['created']:"+tmp0['created']);
  394. console.log("data0:"+data0.getFullYear());
  395. console.log("data0:"+data0.getMonth());
  396. console.log("data0:"+data0.getDate());
  397. var data1 = new Date(tmp1['created']);
  398. var data2 = new Date(tmp2['created']);
  399. $_html = `<div class="newsItem_1 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})" >
  400. <img class="itemBg" src="${$_img0}"/>
  401. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  402. <div class="item-title item-inner">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  403. <div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
  404. </div>
  405. <div class="newsBody">
  406. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
  407. <img class="itemBg" src="${$_img1}" />
  408. <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
  409. <div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
  410. <div class="item-time item-time-inner"><p>${data1.getFullYear()+'.'+(data1.getMonth()+1)+'.'+data1.getDate()}</p></div>
  411. </div>
  412. <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+2})">
  413. <img class="itemBg" src="${$_img2}" />
  414. <div class="newsItem-mark item-inner"><a>${tmp2['tag']}</a></div>
  415. <div class="item-title item-inner item-title-sub">${tmp2['title']}<p>${tmp2['subTitle']}</p></div>
  416. <div class="item-time item-time-inner"><p>${data2.getFullYear()+'.'+(data2.getMonth()+1)+'.'+data2.getDate()}</p></div>
  417. </div>
  418. </div>
  419. `;
  420. }else if (tmp0 && tmp1 && !tmp2) {
  421. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  422. var $_img1 = tmp1['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  423. var data0 = new Date(tmp0['created']);
  424. var data1 = new Date(tmp1['created']);
  425. $_html = `
  426. <div class="newsBody">
  427. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i})">
  428. <img class="itemBg" src="${$_img0}"/>
  429. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  430. <div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  431. <div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
  432. </div>
  433. <div class="newsItem_3 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i+1})">
  434. <img class="itemBg" src="${$_img1}" />
  435. <div class="newsItem-mark item-inner"><a>${tmp1['tag']}</a></div>
  436. <div class="item-title item-inner item-title-sub">${tmp1['title']}<p>${tmp1['subTitle']}</p></div>
  437. <div class="item-time item-time-inner"><p>${data1.getFullYear()+'.'+(data1.getMonth()+1)+'.'+data1.getDate()}</p></div>
  438. </div>
  439. </div>
  440. `;
  441. }else if(tmp0 && !tmp1 && !tmp2){
  442. var $_img0 = tmp0['bgImage'] || 'http://yun-image.elab-plus.com/images/projects/1_objects@2x_14.jpg';
  443. var data0 = new Date(tmp0['created']);
  444. $_html = `
  445. <div class="newsBody">
  446. <div class="newsItem_2 wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s" target="_self" onclick="turnToArticle(${i}})">
  447. <img class="itemBg" src="${$_img0}"/>
  448. <div class="newsItem-mark item-inner"><a>${tmp0['tag']}</a></div>
  449. <div class="item-title item-inner item-title-sub">${tmp0['title']}<p>${tmp0['subTitle']}</p></div>
  450. <div class="item-time item-time-inner"><p>${data0.getFullYear()+'.'+(data0.getMonth()+1)+'.'+data0.getDate()}</p></div>
  451. </div>
  452. </div>
  453. `;
  454. }
  455. $(".news-sample-list").append($_html);
  456. }
  457. }
  458. }
  459. /**
  460. * 列表显示
  461. * @param list
  462. */
  463. function handleListShow() {
  464. // var list = [];
  465. console.log('handleListShow:'+JSON.stringify($_listV));
  466. for(var i=0;i<$_listV.length;i+=2){
  467. var item1 = $_listV[i];
  468. var item2 = $_listV[i+1];
  469. var $_t = (1 + i) * 0.2;
  470. var $_html = '';
  471. if(item2 && item1){
  472. $_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  473. <div class="news-list-item-left" onclick="turnToArticle(${i})">
  474. <div class="news-list-item-box"><p>${item1['id']}</p></div>
  475. <div class="news-list-item-description">
  476. <div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
  477. <div class="news-list-item-bottom"></div>
  478. </div>
  479. </div>
  480. <div class="news-list-item-right" onclick="turnToArticle(${i+1})">
  481. <div class="news-list-item-box"><p>${item2['id']}</p></div>
  482. <div class="news-list-item-description">
  483. <div class="news-list-item-title"><p>${item2['title'].replace("<br>","")}</p></div>
  484. <div class="news-list-item-bottom"></div>
  485. </div>
  486. </div>
  487. </div>
  488. `;
  489. }else if(!item2 && item1){
  490. $_html = `<div class="news-list-item wow fadeInUp" data-wow-duration="0.8s" data-wow-delay="${$_t}s">
  491. <div class="news-list-item-left" onclick="turnToArticle(${i})">
  492. <div class="news-list-item-box"><p>${item1['id']}</p></div>
  493. <div class="news-list-item-description">
  494. <div class="news-list-item-title"><p>${item1['title'].replace("<br>","")}</p></div>
  495. <div class="news-list-item-bottom"></div>
  496. </div>
  497. </div>
  498. <div class="news-list-item-divideHeight"></div>
  499. </div>
  500. `;
  501. }
  502. $(".news-list").append($_html);
  503. }
  504. var $_bottomHtml = `
  505. <div class="newsListBottom>
  506. </div>
  507. `;
  508. $(".news-list").append($_bottomHtml);
  509. }
  510. function lishChange() {
  511. btnChange = !btnChange;
  512. if(btnChange){
  513. // <img class="news_tab_img" src = "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png"/>
  514. $(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/Showroom@2x.png");
  515. $(".news-sample-list").empty();
  516. handleListShow();
  517. // background-color: #2C2E34
  518. $(".news-body").css("padding-top","5%");
  519. }else {
  520. $(".news_tab_img").attr("src", "https://dm.static.elab-plus.com/elabGuanWang/List@2x.png");
  521. $(".news-list").empty();
  522. handleModuleShow();
  523. $(".news-body").css("padding-top","0%");
  524. $(".top-menu-news").css("background-color","#2C2E34");
  525. }
  526. }
  527. $(".news_tab_img").on("click", function (e) {
  528. lishChange();
  529. });
  530. });
  531. function startWow() {
  532. //start wow
  533. var wow = new WOW({
  534. boxClass: 'wow',
  535. animateClass: 'animated',
  536. offset: 100,
  537. mobile: true,
  538. live: true
  539. });
  540. wow.init();
  541. }
  542. function menuShowProjects() {
  543. top.closeAndShowPro('projectsLayer');
  544. }
  545. function turnToArticle(data) {
  546. item = window.newsList[data];
  547. lineUrl = item["linkUrl"];
  548. var parentDiv = document.getElementById("iframeParent");
  549. articleCloseBtn = document.createElement("Div");
  550. articleCloseBtn.setAttribute('class',"article-close");
  551. articleCloseBtn.setAttribute('id','articleCloseBtn');
  552. parentDiv.appendChild(articleCloseBtn);
  553. iframeHtml = document.createElement("iframe");
  554. iframeHtml.setAttribute('frameborder','0');
  555. iframeHtml.setAttribute('height','100%');
  556. iframeHtml.setAttribute('width','100%');
  557. iframeHtml.setAttribute('scrolling','yes');
  558. iframeHtml.setAttribute('name','newsIframe');
  559. parentDiv.appendChild(iframeHtml);
  560. // window.frames.newsIframe.window.location.reload(true);
  561. iframeHtml.setAttribute('src',lineUrl);
  562. $(".top-menu-news").css("background-color","#FFFFFF");
  563. if(!lineUrl){
  564. return
  565. }
  566. // frame.src = lineUrl;
  567. $('.news-iframe').attr('src', $('.news-iframe').attr('src'));
  568. $(".inner-main").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_2.png");
  569. $(".inner-menu").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_3.png");
  570. $(".inner-artcle").attr("src", "http://yun-image.elab-plus.com/images/index/1_objects@2x_4.png");
  571. $(".news-detail").addClass("active");
  572. iframeShow = true;
  573. // news-body
  574. }
  575. </script>
  576. </body>
  577. </html>