default_home.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta http-equiv="content-Type" content="text/html;charset=UTF-8" />
  5. <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  6. <meta name="keywords" content="<?php echo $keywords ?>" />
  7. <meta name="description" content="<?php echo $describe ?>" />
  8. <title><?php echo $title ?></title>
  9. <link rel="stylesheet" href="//at.alicdn.com/t/font_432132_0n3q5gx5aiio.css" />
  10. <link rel="stylesheet" href="official/website/css/main.css" />
  11. </head>
  12. <style>
  13. .home_page img{
  14. width: 100%;
  15. }
  16. .top_detail{
  17. display: flex;
  18. justify-content: space-evenly;
  19. padding: 150px 0;
  20. }
  21. .contain{
  22. align-items: normal !important;
  23. display: flex;
  24. justify-content: center;
  25. flex-direction: column;
  26. }
  27. .top_introduce{
  28. display: flex;
  29. flex-direction: column;
  30. }
  31. .top_introduce .title{
  32. font-size: 16px;
  33. letter-spacing: 3.2px;
  34. color: #0071dc;
  35. font-weight: bold;
  36. }
  37. .top_introduce .describe{
  38. font-size: 35px;
  39. letter-spacing: 7.2px;
  40. color: #252525;
  41. font-weight: bold;
  42. margin: 10px 0;
  43. max-width: 564px;
  44. }
  45. .top_introduce .objective{
  46. font-size: 16px;
  47. letter-spacing: 3.2px;
  48. color: #444444;
  49. text-align: left;
  50. max-width: 527px;
  51. margin-bottom: 20px;
  52. font-weight: bold;
  53. }
  54. .buttom_introduce{
  55. display: flex;
  56. justify-content:space-between;
  57. }
  58. .buttom_introduce .left_func{
  59. display: flex;
  60. flex-direction: column;
  61. justify-content: space-between;
  62. }
  63. .buttom_introduce .right_func{
  64. display: flex;
  65. flex-direction: column;
  66. }
  67. .buttom_introduce .title{
  68. letter-spacing: 4.4px;
  69. color: #252525;
  70. font-size: 18px;
  71. font-weight: bold;
  72. margin: 10px 0;
  73. display: block;
  74. }
  75. .buttom_introduce .describe{
  76. max-width: 253px;
  77. font-size: 16px;
  78. letter-spacing: 3.2px;
  79. color: #444444;
  80. font-weight: bold;
  81. }
  82. .image_contain{
  83. position: relative;
  84. }
  85. .image_contain .screen{
  86. position: absolute;
  87. }
  88. .image_contain .shap{
  89. position: absolute;
  90. left: 41px;
  91. top: 20px;
  92. }
  93. .image_contain .img_detail{
  94. width: 194px;
  95. height: 416px;
  96. position: relative;
  97. top: 21px;
  98. left: 42px;
  99. border-radius: 15px;
  100. z-index: 2;
  101. }
  102. .image_line{
  103. position: absolute;
  104. top: 3%;
  105. left: 40%;
  106. width: 124px;
  107. height: 22px;
  108. background: black;
  109. display: block;
  110. z-index: 4;
  111. border-radius: 41%;
  112. }
  113. .top_detail i {
  114. color: #007aff;
  115. font-size: 40px;
  116. }
  117. </style>
  118. <body>
  119. <div id="app">
  120. <div class="nav">
  121. <div class="nav-a">
  122. <div class="nav-ul">
  123. <div class="nav-logo">
  124. <img src="<?php echo $top['logo']?>" alt="" />
  125. </div>
  126. <?php foreach($top['navigation'] as $kk=>$vv) {?>
  127. <div class="nav-li <?php if($vv[tool]==$name){?> nav-selected <?php }?>">
  128. <a href="<?php echo $vv['url']?>"><?php echo $vv['name']?></a>
  129. </div>
  130. <?php }?>
  131. <?php if ($top['is_sign'] == 1) {?>
  132. <a href="#" id="jump-url">
  133. <div class="nav-login">
  134. <div>立即登录</div>
  135. </div>
  136. </a>
  137. <?php }?>
  138. </div>
  139. </div>
  140. </div>
  141. <div style="height: 74px"></div>
  142. <!-- <div class="swiper-container" style="display: block; height: calc(100vh - 74px)">
  143. <div class="swiper-wrapper middle_detail"> -->
  144. <?php echo $app_top;?>
  145. <?php echo $content;?>
  146. <div class="swiper-slide home_detail" style="justify-content: flex-end">
  147. <div class="news">
  148. <div class="news-left">
  149. <div class="news-left-title">
  150. <div class="news-left-look">看一看</div>
  151. <div class="news-left-title-change"><a onclick="changeList()">⟳换一批</a><input type="hidden" id="pager" value="<?php echo $pager;?>" /></div>
  152. </div>
  153. <div id="news-content">
  154. <?php foreach($web_rel as $kk=>$vv) {?>
  155. <?php if ($kk <3) {?>
  156. <a href="<?php echo $vv['web_url']?>" class="news-link">
  157. <div class="news-li">
  158. <div class="news-li-img">
  159. <img src="<?php echo $vv['thumb']?>" alt="" />
  160. </div>
  161. <div class="news-li-right">
  162. <div class="news-li-right-one">
  163. <?php echo $vv['title']?>
  164. </div>
  165. <div class="news-li-right-two">
  166. <?php echo $vv['desc']?>
  167. </div>
  168. </div>
  169. </div>
  170. </a>
  171. <?php }?>
  172. <?php }?>
  173. </div>
  174. </div>
  175. <div class="news-right">
  176. <div class="news-right-title">今日热点</div>
  177. <?php foreach($home_data as $kk=>$vv) {?>
  178. <div class="news-right-con">
  179. <div class="news-right-num <?php if($kk == 0) {?> news-right-one <?php } elseif($kk == 1) {?> news-right-two <?php } elseif($kk == 2) {?> news-right-three <?php }?>">
  180. <?php echo intval($kk+1);?>
  181. </div>
  182. <div class="news-right-content">
  183. <a href="<?php echo $vv['web_url']?>"><?php echo $vv['title'];?></a>
  184. </div>
  185. </div>
  186. <?php }?>
  187. </div>
  188. </div>
  189. <?php echo $tail;?>
  190. <div class="all-relation">
  191. <div class="relation-btn" id="relation-btn">
  192. <div class="relation-btn-one" id="callus">
  193. <img src="official/website/images/lianxikefu.png" alt="" />
  194. <div>联系客服</div>
  195. </div>
  196. <div class="relation-btn-one" id="back-top">
  197. <img src="official/website/images/huidaodingbu.png" alt="" />
  198. <div>回到顶部</div>
  199. </div>
  200. </div>
  201. <div class="relation">
  202. <div class="relation-title">在线咨询</div>
  203. <a href="<?php echo $basic['cus_link']?>" title="点击咨询">
  204. <div class="relation-tel">
  205. <div class="relation-tel-img">
  206. <img src="official/website/images/suspension_qq.png" alt="" />
  207. </div>
  208. <div class="relation-tel-word">在线客服</div>
  209. </div>
  210. </a>
  211. <div class="relation-tel">
  212. <div class="relation-tel-img">
  213. <img src="official/website/images/suspension_tel.png" alt="" />
  214. </div>
  215. <div class="relation-tel-word"><?php echo $basic['cus_mobile']?></div>
  216. </div>
  217. <div class="relation-tel relation-tel1">
  218. <div class="relation-tel-img">
  219. <img src="official/website/images/suspension_wechat.png" alt="" />
  220. </div>
  221. <div class="relation-tel-word">微信二维码</div>
  222. </div>
  223. <div class="qr-img">
  224. <img src="<?php echo $basic['cus_url']?>" alt="" />
  225. </div>
  226. <img id="close-btn" style="position: absolute; top: -15px; right: -25px" src="official/website/images/adsystem_icon_cancle.png" alt="" />
  227. </div>
  228. </div>
  229. </div>
  230. <!-- </div> -->
  231. <!-- Add Pagination -->
  232. <!-- <div class="swiper-pagination"></div>
  233. </div> -->
  234. <?php echo $app_bottom;?>
  235. </div>
  236. <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  237. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  238. <script>
  239. function add() {
  240. document.getElementsByClassName("swiper-container")[0].classList.add("mask");
  241. }
  242. function remove() {
  243. document.getElementsByClassName("swiper-container")[0].classList.remove("mask");
  244. }
  245. </script>
  246. <script>
  247. var swiper = new Swiper(".swiper-container", {
  248. direction: "vertical",
  249. pagination: {
  250. el: ".swiper-pagination",
  251. clickable: true,
  252. },
  253. scrollbar: {
  254. el: ".swiper-scrollbar",
  255. },
  256. keyboard: true,
  257. mousewheel: true,
  258. on: {
  259. touchMove: function (swiper, event) {
  260. add();
  261. },
  262. touchEnd: function (swiper, event) {
  263. remove();
  264. },
  265. },
  266. });
  267. </script>
  268. <script type="text/javascript">
  269. var url = "";
  270. var is_runed = false;
  271. window.onload = function () {
  272. url = window.location.protocol + "//" + window.location.host + "/admin.html";
  273. if (document.getElementById("jump-url")) {
  274. document.getElementById("jump-url").setAttribute("href", url);
  275. }
  276. let dom1 = document.querySelectorAll(".news-li");
  277. if (dom1 && dom1.length > 0) {
  278. for (let i = 0; i < dom1.length; i++) {
  279. dom1[i].onmouseover = function (e) {
  280. e.currentTarget.classList.add("news-li-selected");
  281. };
  282. dom1[i].onmouseout = function (e) {
  283. e.currentTarget.classList.remove("news-li-selected");
  284. };
  285. }
  286. }
  287. let dom2 = document.querySelectorAll(".news-right-content");
  288. if (dom2 && dom2.length > 0) {
  289. for (let i = 0; i < dom2.length; i++) {
  290. dom2[i].onmouseover = function (e) {
  291. var ev = e || window.event; // 事件
  292. var target = e.target || e.srcElement; // 获得事件源
  293. target.classList.add("news-li-selected");
  294. };
  295. dom2[i].onmouseout = function (e) {
  296. var ev = e || window.event; // 事件
  297. var target = e.target || e.srcElement; // 获得事件源
  298. target.classList.remove("news-li-selected");
  299. };
  300. }
  301. }
  302. document.getElementById("callus").onclick = function (e) {
  303. document.getElementById("relation-btn").style.display = "none";
  304. document.getElementsByClassName("all-relation")[0].classList.add("all-relation-hover");
  305. };
  306. document.getElementById("close-btn").onclick = function (e) {
  307. document.getElementById("relation-btn").style.display = "inline-block";
  308. document.getElementsByClassName("all-relation")[0].classList.remove("all-relation-hover");
  309. };
  310. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  311. if (scrollTop > 0) {
  312. document.getElementById("back-top").style.display = "block";
  313. } else {
  314. document.getElementById("back-top").style.display = "none";
  315. }
  316. if (scrollTop > 1240 && scrollTop < 1640) {
  317. //调用
  318. if (!is_runed) {
  319. runNum();
  320. is_runed = true;
  321. }
  322. }
  323. document.getElementById("back-top").onclick = function (e) {
  324. if (document.documentElement.scrollTop) {
  325. document.documentElement.scrollTop = 0;
  326. } else {
  327. document.body.scrollTop = 0;
  328. }
  329. };
  330. window.onscroll = function () {
  331. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  332. if (scrollTop > 0) {
  333. document.getElementById("back-top").style.display = "block";
  334. } else {
  335. document.getElementById("back-top").style.display = "none";
  336. }
  337. if (scrollTop > 1240 && scrollTop < 1640) {
  338. //调用
  339. if (!is_runed) {
  340. runNum();
  341. is_runed = true;
  342. }
  343. }
  344. };
  345. };
  346. </script>
  347. <script>
  348. var wrap = document.querySelector(".wrap");
  349. var next = document.querySelector(".arrow_right");
  350. var prev = document.querySelector(".arrow_left");
  351. next.onclick = function () {
  352. next_pic();
  353. };
  354. prev.onclick = function () {
  355. prev_pic();
  356. };
  357. function next_pic() {
  358. index++;
  359. if (index > 2) {
  360. index = 0;
  361. }
  362. showCurrentDot();
  363. var newLeft;
  364. if (wrap.style.left === "-3600px") {
  365. newLeft = -1200;
  366. } else {
  367. newLeft = parseInt(wrap.style.left) - 1200;
  368. }
  369. wrap.style.left = newLeft + "px";
  370. }
  371. function prev_pic() {
  372. index--;
  373. if (index < 0) {
  374. index = 2;
  375. }
  376. showCurrentDot();
  377. var newLeft;
  378. if (wrap.style.left === "0px") {
  379. newLeft = -2400;
  380. } else {
  381. newLeft = parseInt(wrap.style.left) + 1200;
  382. }
  383. wrap.style.left = newLeft + "px";
  384. }
  385. var timer = null;
  386. function autoPlay() {
  387. timer = setTimeout(function () {
  388. next_pic();
  389. autoPlay();
  390. }, 5000);
  391. }
  392. autoPlay();
  393. var container = document.querySelector(".container");
  394. container.onmouseenter = function () {
  395. clearInterval(timer);
  396. };
  397. container.onmouseleave = function () {
  398. autoPlay();
  399. };
  400. var index = 0;
  401. var dots = document.getElementsByClassName("span-btn");
  402. function showCurrentDot() {
  403. for (var i = 0, len = dots.length; i < len; i++) {
  404. dots[i].className = "span-btn";
  405. }
  406. dots[index].className = "on span-btn";
  407. }
  408. for (var i = 0, len = dots.length; i < len; i++) {
  409. (function (i) {
  410. dots[i].onclick = function () {
  411. var dis = index - i;
  412. if (index == 4 && parseInt(wrap.style.left) !== -6000) {
  413. dis = dis - 5;
  414. }
  415. //和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可
  416. if (index == 0 && parseInt(wrap.style.left) !== -1200) {
  417. dis = 5 + dis;
  418. }
  419. wrap.style.left = parseInt(wrap.style.left) + dis * 1200 + "px";
  420. index = i;
  421. showCurrentDot();
  422. };
  423. })(i);
  424. }
  425. // 滚动
  426. (function (win, doc) {
  427. let defaultsOption = {
  428. speed: 20,
  429. count: 100,
  430. };
  431. function FuncBox(options) {
  432. let _own = this;
  433. if (!options) {
  434. throw new Error("请传入配置参数");
  435. }
  436. _own = Object.assign(_own, defaultsOption, options);
  437. _own.container = doc.querySelector(_own.container) || doc.querySelectorAll(self.container);
  438. _own.NumberControl();
  439. }
  440. FuncBox.prototype = {
  441. NumberControl: function () {
  442. let opts = this;
  443. let max = 100,
  444. count = opts["count"],
  445. speed = Math.floor(count / max),
  446. sum = 0,
  447. contariner = opts.container,
  448. running = 1,
  449. fool = opts["speed"];
  450. let timer = setInterval(function () {
  451. if (running <= max && speed != 0) {
  452. contariner.innerText = sum = speed * running;
  453. running++;
  454. } else if (sum < count) {
  455. contariner.innerText = ++sum;
  456. } else {
  457. clearInterval(timer);
  458. }
  459. }, fool);
  460. },
  461. };
  462. win.FuncBox = FuncBox;
  463. })(window, document);
  464. // 调用
  465. function runNum() {
  466. let num1 = document.getElementById("num-1").innerText;
  467. let num2 = document.getElementById("num-2").innerText;
  468. let num3 = document.getElementById("num-3").innerText;
  469. let num4 = document.getElementById("num-4").innerText;
  470. var test1 = new FuncBox({
  471. container: "#num-1",
  472. speed: 10,
  473. count: num1,
  474. });
  475. var test1 = new FuncBox({
  476. container: "#num-2",
  477. speed: 10,
  478. count: num2,
  479. });
  480. var test1 = new FuncBox({
  481. container: "#num-3",
  482. speed: 10,
  483. count: num3,
  484. });
  485. var test1 = new FuncBox({
  486. container: "#num-4",
  487. speed: 10,
  488. count: num4,
  489. });
  490. }
  491. // 请求接口
  492. function submit() {
  493. let name = document.getElementById("name").value;
  494. let tel = document.getElementById("tel").value;
  495. let contact_url = "<?php echo $contact_url;?>";
  496. //console.log(contact_url);
  497. ajax({
  498. url: contact_url, //请求地址
  499. type: "POST", //请求方式
  500. data: { name: name, mobile: tel }, //请求参数
  501. dataType: "json",
  502. success: function (response, xml) {
  503. // 此处放成功后执行的代码
  504. alert("提交成功!");
  505. },
  506. fail: function (status) {
  507. // 此处放失败后执行的代码
  508. alert("提交失败!");
  509. },
  510. });
  511. }
  512. // ajax
  513. function ajax(options) {
  514. options = options || {};
  515. options.type = (options.type || "GET").toUpperCase();
  516. options.dataType = options.dataType || "json";
  517. var params = formatParams(options.data);
  518. //创建 - 非IE6 - 第一步
  519. if (window.XMLHttpRequest) {
  520. var xhr = new XMLHttpRequest();
  521. } else {
  522. //IE6及其以下版本浏览器
  523. var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  524. }
  525. //接收 - 第三步
  526. xhr.onreadystatechange = function () {
  527. if (xhr.readyState == 4) {
  528. var status = xhr.status;
  529. if (status >= 200 && status < 300) {
  530. options.success && options.success(xhr.responseText, xhr.responseXML);
  531. } else {
  532. options.fail && options.fail(status);
  533. }
  534. }
  535. };
  536. //连接 和 发送 - 第二步
  537. if (options.type == "GET") {
  538. xhr.open("GET", options.url + "?" + params, true);
  539. xhr.send(null);
  540. } else if (options.type == "POST") {
  541. xhr.open("POST", options.url, true);
  542. //设置表单提交时的内容类型
  543. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  544. xhr.send(params);
  545. }
  546. }
  547. //格式化参数
  548. function formatParams(data) {
  549. var arr = [];
  550. for (var name in data) {
  551. arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  552. }
  553. arr.push(("v=" + Math.random()).replace(".", ""));
  554. return arr.join("&");
  555. }
  556. // 换一批
  557. function changeList() {
  558. var url = "<?php echo $follow_url;?>";
  559. var pager = document.getElementById("pager").value;
  560. ajax({
  561. url: url, //请求地址
  562. type: "POST", //请求方式
  563. data: { page: pager }, //请求参数
  564. dataType: "json",
  565. success: function (response, xml) {
  566. // 此处放成功后执行的代码
  567. // alert('提交成功!');
  568. // let list = [{},{},{},{},{}];//数据格式
  569. let list = JSON.parse(response);
  570. let list_data = list.data.read;
  571. setList(list_data);
  572. document.getElementById("pager").value = parseInt(pager) + 1;
  573. },
  574. fail: function (status) {
  575. // 此处放失败后执行的代码
  576. // alert('提交失败!');
  577. },
  578. });
  579. }
  580. function setList(list) {
  581. if (list.length && list != null && list.length > 0) {
  582. let html = "";
  583. list.forEach((item, index) => {
  584. html +=
  585. `
  586. <a href="` +
  587. item.detail_url +
  588. `" class="news-link">
  589. <div class="news-li">
  590. <div class="news-li-img">
  591. <img src="` +
  592. item.thumb +
  593. `" alt="" />
  594. </div>
  595. <div class="news-li-right">
  596. <div class="news-li-right-one">
  597. ` +
  598. item.title +
  599. `
  600. </div>
  601. <div class="news-li-right-two">
  602. ` +
  603. item.desc +
  604. `
  605. </div>
  606. </div>
  607. </div>
  608. </a>
  609. `;
  610. });
  611. // 清空原来子节点
  612. var div = document.getElementById("news-content");
  613. while (div.hasChildNodes()) {
  614. //当div下还存在子节点时 循环继续
  615. div.removeChild(div.firstChild);
  616. }
  617. //console.log(html)
  618. div.innerHTML = html;
  619. }
  620. }
  621. </script>
  622. </body>
  623. </html>