optimization_flow.blade.php 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718
  1. <!DOCTYPE html>
  2. <html>
  3. <!-- Mirrored from www.zi-han.net/theme/hplus/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:18:23 GMT -->
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>引擎力-培养走向世界的企业</title>
  8. <meta name="keywords" content="引擎力后台">
  9. <meta name="description"
  10. content="引擎力定位于海外数字营销专家,用数据说话,引领外贸企业迈向全球化!拥有多项核心自主知识产权,一直在不断的发展和拓展我们的网络营销范围。拥有120余人海外推广团队,80%以上执创人员,5年以上专业外贸推广经验,为您的外贸网站量身定制打造高质量的流量及询盘。">
  11. <meta name="robots" content="noodp"/>
  12. <link rel="shortcut icon" href="{{asset('favicon.ico')}}">
  13. <link href="{{asset('css/bootstrap.min14ed.css')}}" rel="stylesheet">
  14. <link href="{{asset('css/font-awesome.min93e3.css')}}" rel="stylesheet">
  15. <link href="{{asset('css/animate.min.css')}}" rel="stylesheet">
  16. <style>
  17. * {
  18. font-family: "微软雅黑";
  19. }
  20. body {
  21. background: #f5f5f5;
  22. font-size: 62.5%;
  23. }
  24. @font-face {
  25. font-family: 'Acumin-Pro';
  26. src: url("/fonts/ACUMIN-PRO-CONDENSED-EXTRALIGHT-2.OTF");
  27. font-style: normal;
  28. font-weight: normal;
  29. }
  30. .fix:after {
  31. content: '';
  32. clear: both;
  33. display: block;
  34. }
  35. .fix:before {
  36. content: '';
  37. clear: both;
  38. display: block;
  39. }
  40. .sep-yql-header {
  41. width: 100%;
  42. background: url(/img/y-top-bgs.jpg) no-repeat center top;
  43. padding: 50px 0;
  44. }
  45. .sep-logo {
  46. display: block;
  47. width: 100%;
  48. text-align: center;
  49. margin-bottom: 9px;
  50. }
  51. .logo-texts {
  52. display: block;
  53. width: 100%;
  54. text-align: center;
  55. font-size: 44px;
  56. line-height: 1.5;
  57. color: #fff;
  58. font-weight: bold;
  59. }
  60. .footer-texts {
  61. display: block;
  62. width: 100%;
  63. text-align: center;
  64. font-size: 18px;
  65. line-height: 1.5;
  66. color: #fff;
  67. }
  68. .sep-container {
  69. width: 100%;
  70. max-width: 1300px;
  71. margin: 0 auto;
  72. }
  73. .sep-yql-body {
  74. width: 100%;
  75. padding: 38px 0 70px;
  76. }
  77. .sep-xmzl-boxs {
  78. width: 100%;
  79. }
  80. .sep-yql-footer {
  81. width: 100%;
  82. background: #fe8713;
  83. padding: 30px 0;
  84. }
  85. .sep-xwcgss-ul-boxs {
  86. width: 100%;
  87. }
  88. .sep-xwcgss-ul-boxs .xwcgss-lists {
  89. width: 100%;
  90. margin-bottom: 14px;
  91. position: relative;
  92. display: block;
  93. }
  94. .sep-xwcgss-ul-boxs .xwcgss-lists .xwcgss-table-boxs {
  95. display: none;
  96. }
  97. .sep-xwcgss-ul-boxs .xwcgss-lists.active .xwcgss-lists-titles {
  98. display: none;
  99. }
  100. .sep-xwcgss-ul-boxs .xwcgss-lists.active .xwcgss-table-boxs {
  101. display: block;
  102. }
  103. .sep-xwcgss-ul-boxs .xwcgss-lists.active .number-boxs {
  104. background-color: darkorange;
  105. }
  106. .sep-xwcgss-ul-boxs .xwcgss-lists.active .number-boxs::after {
  107. border-left-color: darkorange;
  108. }
  109. .sep-xwcgss-ul-boxs .xwcgss-lists:after {
  110. content: '';
  111. width: 1px;
  112. height: 100%;
  113. display: block;
  114. background: #e0e0e0;
  115. position: absolute;
  116. left: -30px;
  117. top: 36px;
  118. z-index: 1;
  119. }
  120. .sep-xwcgss-ul-boxs .xwcgss-lists:last-child:after {
  121. display: none;
  122. }
  123. .sep-xwcgss-ul-boxs .xwcgss-lists.ons:after {
  124. display: none;
  125. }
  126. .sep-xwcgss-ul-boxs .xwcgss-lists-titles {
  127. width: 100%;
  128. background: #fff;
  129. padding: 20px 78px;
  130. line-height: 32px;
  131. position: relative;
  132. }
  133. .sep-xwcgss-ul-boxs .titles-left {
  134. width: auto;
  135. font-size: 16px;
  136. color: #262626;
  137. float: left;
  138. }
  139. .sep-xwcgss-ul-boxs .titles-right {
  140. width: auto;
  141. font-size: 12px;
  142. color: #343434;
  143. float: right;
  144. min-width: 160px;
  145. }
  146. .sep-xwcgss-ul-boxs .i-boxs {
  147. display: block;
  148. width: 40px;
  149. height: 40px;
  150. position: absolute;
  151. right: 10px;
  152. top: 14px;
  153. cursor: pointer;
  154. }
  155. .sep-xwcgss-ul-boxs .i-boxs:after {
  156. content: '';
  157. display: block;
  158. width: 14px;
  159. height: 14px;
  160. border: 1px solid transparent;
  161. border-top-color: #a7a7a7;
  162. border-right-color: #a7a7a7;
  163. position: absolute;
  164. left: 50%;
  165. margin-left: -11px;
  166. top: 50%;
  167. margin-top: -7px;
  168. transform: rotate(45deg);
  169. }
  170. .sep-xwcgss-ul-boxs .number-boxs {
  171. display: block;
  172. width: 49px;
  173. height: 43px;
  174. background: #a7a7a7;
  175. text-transform: uppercase;
  176. font-size: 12px;
  177. color: #fff;
  178. z-index: 4;
  179. padding: 10px 8px;
  180. position: absolute;
  181. left: -33px;
  182. top: 50%;
  183. margin-top: -21px;
  184. line-height: normal;
  185. font-family: 'Acumin-Pro';
  186. }
  187. .sep-xwcgss-ul-boxs .number-boxs:after {
  188. content: '';
  189. display: block;
  190. width: 0;
  191. height: 0;
  192. border: 22px solid transparent;
  193. border-top-width: 21px;
  194. border-left-color: #a7a7a7;
  195. position: absolute;
  196. left: 100%;
  197. top: 0;
  198. z-index: 4;
  199. }
  200. .sep-xwcgss-ul-boxs .nw {
  201. display: block;
  202. width: auto;
  203. height: auto;
  204. position: absolute;
  205. left: 33px;
  206. top: 7px;
  207. line-height: normal;
  208. font-size: 27px;
  209. color: #fff;
  210. font-weight: normal;
  211. z-index: 10;
  212. text-transform: initial;
  213. font-family: 'Acumin-Pro';
  214. }
  215. table {
  216. width: 100%;
  217. border: none;
  218. }
  219. table tr {
  220. width: 100%;
  221. }
  222. table tr:nth-child(1) {
  223. background: #f08421;
  224. }
  225. table tr:nth-child(1) td {
  226. color: #fff;
  227. font-size: 16px;
  228. background: #f08421;
  229. border-color: #f39d4d;
  230. text-align: center;
  231. padding-left: 10px;
  232. }
  233. .xwcgss-table-boxs table tr:nth-child(1) td:nth-child(1) {
  234. width: 16.5%;
  235. }
  236. .xwcgss-table-boxs table tr:nth-child(1) td:nth-child(2) {
  237. width: 14.2%;
  238. }
  239. .xwcgss-table-boxs table tr:nth-child(1) td:nth-child(3) {
  240. width: 36%;
  241. }
  242. .xwcgss-table-boxs table tr:nth-child(1) td:nth-child(4) {
  243. width: 12%;
  244. }
  245. .xwcgss-table-boxs table tr:nth-child(1) td:nth-child(5) {
  246. width: 11%;
  247. }
  248. table td {
  249. background: #fff;
  250. text-align: left;
  251. font-size: 14px;
  252. color: #f08421;
  253. line-height: 28px;
  254. padding: 8px 10px;
  255. border-color: #eee;
  256. /*padding-left: 36px;*/
  257. }
  258. .gtj-ff-bold {
  259. font-weight: bold;
  260. font-size: 16px;
  261. }
  262. .gtj-centers {
  263. text-align: center;
  264. padding-left: 15px;
  265. }
  266. .sep-gzgh-boxs {
  267. display: block;
  268. width: 100%;
  269. padding: 36px 0 0;
  270. }
  271. .sep-gzgh-titles-boxs {
  272. display: block;
  273. width: 100%;
  274. text-align: center;
  275. font-size: 34px;
  276. color: #f08421;
  277. font-weight: bold;
  278. line-height: normal;
  279. margin-bottom: 26px;
  280. }
  281. .gzgh-boxs {
  282. background: #fff;
  283. padding: 46px 78px 54px;
  284. }
  285. .sep-gzgh-ul-boxs {
  286. width: 100%;
  287. }
  288. .sep-gzgh-ul-boxs .gzgh-lists {
  289. width: 100%;
  290. }
  291. .sep-gzgh-ul-boxs .gzgh-lists + .gzgh-lists {
  292. margin-top: 28px;
  293. }
  294. .sep-gzgh-ul-boxs table tr:nth-child(1) td {
  295. color: #fff;
  296. font-size: 16px;
  297. background: #f08421;
  298. border-color: #f39d4d;
  299. text-align: center;
  300. padding-left: 10px;
  301. width: 100%;
  302. }
  303. .sep-gzgh-ul-boxs table tr:nth-child(2) td {
  304. color: #f08421;
  305. font-size: 16px;
  306. text-align: center;
  307. padding-left: 10px;
  308. }
  309. .sep-gzgh-ul-boxs table tr td:nth-child(1) {
  310. width: 12%;
  311. }
  312. .sep-gzgh-ul-boxs table tr td:nth-child(2) {
  313. width: 33.4%;
  314. }
  315. .sep-gzgh-ul-boxs table tr td:nth-child(3) {
  316. width: 14.4%;
  317. }
  318. .sep-gzgh-ul-boxs table tr td {
  319. color: #262626;
  320. font-size: 14px;
  321. / / padding-left: 4 %;
  322. text-align: center;
  323. }
  324. .sep-gzgh-ul-boxs table tr.tr-lists {
  325. }
  326. .sep-gzgh-ul-boxs table tr.tr-lists.active {
  327. height: 0;
  328. overflow: hidden;
  329. display: none;
  330. }
  331. .sep-gzgh-ul-boxs table tr td:nth-child(1) {
  332. text-align: center;
  333. padding-left: 10px;
  334. }
  335. .sep-gzgh-ul-boxs table tr.lasts.ons .i-down-boxs {
  336. transform: rotate(180deg);
  337. }
  338. .sep-gzgh-ul-boxs table tr.ons .i-down-boxs:before {
  339. border-bottom-color: #f08421;
  340. border-right-color: #f08421;
  341. }
  342. .sep-gzgh-ul-boxs table tr.ons .i-down-boxs:after {
  343. border-bottom-color: #f08421;
  344. border-right-color: #f08421;
  345. }
  346. .sep-gzgh-ul-boxs table tr:hover .i-down-boxs:before {
  347. border-bottom-color: #f08421;
  348. border-right-color: #f08421;
  349. }
  350. .sep-gzgh-ul-boxs table tr:hover .i-down-boxs:after {
  351. border-bottom-color: #f08421;
  352. border-right-color: #f08421;
  353. }
  354. .i-down-boxs {
  355. display: inline-block;
  356. vertical-align: top;
  357. width: 28px;
  358. height: 28px;
  359. position: relative;
  360. }
  361. .i-down-boxs:before {
  362. content: '';
  363. display: inline-block;
  364. vertical-align: top;
  365. width: 12px;
  366. height: 12px;
  367. border: 2px solid transparent;
  368. border-bottom-color: #a5a5a5;
  369. border-right-color: #a5a5a5;
  370. position: absolute;
  371. left: 50%;
  372. margin-left: -6px;
  373. top: 50%;
  374. margin-top: -12px;
  375. transform: rotate(45deg);
  376. }
  377. .i-down-boxs:after {
  378. content: '';
  379. display: inline-block;
  380. vertical-align: top;
  381. width: 12px;
  382. height: 12px;
  383. border: 2px solid transparent;
  384. border-bottom-color: #a5a5a5;
  385. border-right-color: #a5a5a5;
  386. position: absolute;
  387. transform: rotate(45deg);
  388. left: 50%;
  389. margin-left: -6px;
  390. top: 50%;
  391. margin-top: -6px;
  392. }
  393. @media screen and (max-width: 1440px) {
  394. .sep-container {
  395. max-width: 1200px;
  396. }
  397. .logo-texts {
  398. font-size: 16px;
  399. }
  400. }
  401. @media screen and (max-width: 1360px) {
  402. .sep-container {
  403. max-width: 1100px;
  404. }
  405. }
  406. @media screen and (max-width: 1200px) {
  407. .sep-container {
  408. max-width: 80%;
  409. }
  410. table td {
  411. white-space: nowrap;
  412. }
  413. .xwcgss-table-boxs {
  414. overflow-x: scroll;
  415. }
  416. .gzgh-table-boxs {
  417. overflow-x: scroll;
  418. }
  419. }
  420. @media screen and (max-width: 812px) {
  421. .gzgh-boxs {
  422. padding: 30px 20px;
  423. }
  424. }
  425. @media screen and (max-width: 640px) {
  426. .sep-xwcgss-ul-boxs .xwcgss-lists-titles {
  427. padding: 20px 36px;
  428. padding-left: 20px;
  429. }
  430. .sep-xwcgss-ul-boxs .titles-right {
  431. min-width: 124px;
  432. }
  433. .sep-xwcgss-ul-boxs .i-boxs {
  434. right: 0;
  435. }
  436. .sep-gzgh-titles-boxs {
  437. font-size: 24px;
  438. }
  439. .sep-xwcgss-ul-boxs .number-boxs {
  440. width: 30px;
  441. padding: 10px 2px;
  442. }
  443. .sep-xwcgss-ul-boxs .nw {
  444. left: 24px;
  445. font-size: 20px;
  446. }
  447. .sep-xwcgss-ul-boxs .number-boxs:after {
  448. border-left-width: 12px;
  449. }
  450. .sep-xwcgss-ul-boxs .titles-left {
  451. font-size: 15px;
  452. }
  453. .sep-gzgh-ul-boxs table tr td {
  454. font-size: 14px;
  455. }
  456. .sep-gzgh-ul-boxs table tr:nth-child(2) td {
  457. font-size: 14px;
  458. }
  459. .sep-yql-body {
  460. padding: 36px 0;
  461. }
  462. .gtj-ff-bold {
  463. font-size: 14px;
  464. }
  465. .sep-yql-header {
  466. padding: 36px 0;
  467. }
  468. }
  469. </style>
  470. </head>
  471. <body>
  472. <div class="sep-yql-header">
  473. <a href="/" class="sep-logo">
  474. <img src="/img/y-top-logo.png" alt=""/>
  475. </a>
  476. <div class="logo-texts">
  477. {{$site->cn_title}}
  478. </div>
  479. {{--<div class="logo-texts">--}}
  480. {{--建站期流程--}}
  481. {{--</div>--}}
  482. </div>
  483. <div class="sep-yql-body">
  484. <div class="sep-xmzl-boxs fix">
  485. <div class="sep-container fix">
  486. <div class="sep-xwcgss-ul-boxs fix">
  487. @foreach($stageList as $stageInx=>$stage)
  488. @php
  489. $doneTimeList=[];
  490. $minFlowLen=0;
  491. foreach ($stage->bqFlowInfo as $v){
  492. $detailList=$v->detail_list??[];
  493. $minFlowLen+= count($detailList);
  494. foreach ($detailList as $m) {
  495. if(!empty($m['flow_done_date'])){
  496. $doneTimeList[]=strtotime($m['flow_done_date']);
  497. }
  498. }
  499. }
  500. @endphp
  501. <div class="xwcgss-lists @if($stageInx==0) active @endif fix">
  502. <div class="xwcgss-lists-titles fix">
  503. <div class="titles-left">
  504. {{$stage->title}}
  505. </div>
  506. <div class="titles-right">
  507. @if($doneTimeList)
  508. 完成时间: {{date('Y.n.j',min($doneTimeList))}}-{{date('Y.n.j',max($doneTimeList))}}
  509. @endif
  510. </div>
  511. <div class="i-boxs">
  512. </div>
  513. <div class="number-boxs">
  514. STEP
  515. <div class="nw">
  516. {{$stageInx+1}}
  517. </div>
  518. <div class="lines"></div>
  519. </div>
  520. </div>
  521. <div class="xwcgss-table-boxs fix">
  522. <table border="" cellspacing="" cellpadding="">
  523. <tr>
  524. <td>完成步骤</td>
  525. <td>预计完成时间</td>
  526. <td>具体流程</td>
  527. <td>备 注</td>
  528. <td style="text-align: center">主对接人</td>
  529. <td>实际完成时间</td>
  530. </tr>
  531. @foreach($stage->bqFlowInfo as $infoInx=>$info)
  532. @php $detailListLen= count($info->detail_list);@endphp
  533. @foreach($info->detail_list as $key=>$item)
  534. @php $count= count($item['children']);@endphp
  535. @foreach($item['children'] as $key=>$index)
  536. <tr>
  537. @if($key==0)
  538. <td rowspan="{{$count}}"
  539. class="gtj-ff-bold gtj-centers">{{$stage->title}}
  540. </td>
  541. <td rowspan="{{$count}}"
  542. class="gtj-ff-bold gtj-centers">{{substr($stage->expected_date,0,10)}}
  543. </td>
  544. @endif
  545. <td>{{$index['flow_name']}}</td>
  546. <td>{{$index['flow_remark']}}</td>
  547. <td style="text-align: center">
  548. @foreach(($index['duty_user']??[]) as $dutyUser)
  549. {{$mapUsers[$dutyUser]['nickname']??''}} &nbsp;
  550. @endforeach</td>
  551. <td class="gtj-centers">{{$index['flow_done_date']}}</td>
  552. </tr>
  553. @endforeach
  554. @endforeach
  555. @endforeach
  556. </table>
  557. </div>
  558. <div class="number-boxs">
  559. STEP
  560. <div class="nw">
  561. {{$stageInx+1}}
  562. </div>
  563. <div class="lines"></div>
  564. </div>
  565. </div>
  566. @endforeach
  567. </div>
  568. </div>
  569. </div>
  570. </div>
  571. <div class="sep-yql-footer">
  572. <div class="sep-container fix">
  573. <div class="footer-texts">
  574. 浙江引擎力营销策划有限公司
  575. </div>
  576. </div>
  577. </div>
  578. <script src="{{asset('js/jquery.min.js?v=2.1.4')}}"></script>
  579. <script src="{{asset('js/bootstrap.min.js')}}"></script>
  580. <script>
  581. $(".sep-gzgh-ul-boxs .gzgh-lists").each(function () {
  582. $(this).find(".lasts").click(function () {
  583. var _this = $(this);
  584. if (!_this.hasClass("ons")) {
  585. _this.addClass("ons");
  586. _this.siblings(".tr-lists").removeClass("active");
  587. } else {
  588. _this.removeClass("ons");
  589. _this.siblings(".tr-lists").addClass("active");
  590. }
  591. });
  592. });
  593. $(".sep-xwcgss-ul-boxs .xwcgss-lists").each(function () {
  594. var _this1 = $(this);
  595. $(this).find(".i-boxs").click(function () {
  596. var _this = $(this);
  597. if (!_this.parent().parent(".xwcgss-lists").hasClass("active")) {
  598. _this.parent().parent(".xwcgss-lists").addClass("active");
  599. _this.parent().parent(".xwcgss-lists").siblings().removeClass("active");
  600. } else {
  601. _this.parent().parent(".xwcgss-lists").removeClass("active");
  602. }
  603. });
  604. });
  605. </script>
  606. </body>
  607. </html>