open.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>
  5. 打开志远装饰
  6. </title>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. </head>
  10. <style>
  11. html,
  12. body {
  13. display: block;
  14. width: 100%;
  15. height: 100%;
  16. overflow: hidden;
  17. position: relative;
  18. }
  19. * {
  20. margin: 0;
  21. padding: 0;
  22. box-sizing: border-box;
  23. }
  24. .left {
  25. float: left;
  26. }
  27. .right {
  28. float: right;
  29. }
  30. .clearfix:after {
  31. content: ".";
  32. display: block;
  33. height: 0;
  34. clear: both;
  35. visibility: hidden;
  36. }
  37. .ellipsis {
  38. overflow: hidden;
  39. text-overflow: ellipsis;
  40. white-space: nowrap;
  41. }
  42. .ellipsisfive {
  43. overflow: hidden;
  44. text-overflow: ellipsis;
  45. display: -webkit-box;
  46. -webkit-line-clamp: 5;
  47. -webkit-box-orient: vertical;
  48. }
  49. .unwxbox,
  50. .wxenv {
  51. display: block;
  52. width: 100%;
  53. height: 100%;
  54. position: relative;
  55. }
  56. .unwxbox .imgbox,
  57. .wxenv .imgbox {
  58. display: block;
  59. width: 100%;
  60. height: 100%;
  61. position: relative;
  62. overflow: hidden;
  63. border-radius: 0 0 20px 20px;
  64. }
  65. .unwxbox .imgmsg,
  66. .wxenv .imgmsg {
  67. display: block;
  68. width: 100%;
  69. position: absolute;
  70. top: 50%;
  71. left: 50%;
  72. transform: translateX(-50%) translateY(-50%);
  73. }
  74. .unwxbox .layerbox,
  75. .wxenv .layerbox {
  76. display: block;
  77. width: 100%;
  78. height: 100%;
  79. background-color: rgba(0, 0, 0, 0.16);
  80. position: fixed;
  81. top: 0;
  82. left: 0;
  83. z-index: 9;
  84. }
  85. .unwxbox {
  86. max-width: 540px;
  87. margin: 0 auto;
  88. }
  89. #launch-btn {
  90. display: block;
  91. width: 100%;
  92. height: 100%;
  93. position: fixed;
  94. top: 0;
  95. left: 0;
  96. z-index: 100;
  97. }
  98. body {
  99. box-sizing: border-box;
  100. padding-bottom: 80px;
  101. background-color: #000;
  102. }
  103. .mianbox {
  104. display: block;
  105. width: 100%;
  106. height: 100%;
  107. background-color: #ffffff;
  108. border-radius: 0 0 20px 20px;
  109. }
  110. .footer1 {
  111. display: block;
  112. position: fixed;
  113. bottom: 0;
  114. left: 0;
  115. width: 100%;
  116. height: 100px;
  117. padding: 32px 20px 0;
  118. box-sizing: border-box;
  119. color: #ffffff;
  120. z-index: 98;
  121. }
  122. .footimg {
  123. display: block;
  124. width: 100%;
  125. position: absolute;
  126. bottom: 0;
  127. left: 0;
  128. }
  129. .footbox {
  130. display: block;
  131. width: 100%;
  132. }
  133. .leftfoot {
  134. float: left;
  135. }
  136. .leftfoot img {
  137. display: block;
  138. width: 48px;
  139. height: 48px;
  140. border-radius: 50%;
  141. }
  142. .leftfoot span {
  143. font-size: 14px;
  144. margin-left: 6px;
  145. display: inline-block;
  146. line-height: 48px;
  147. }
  148. .layerbox1 {
  149. float: right;
  150. font-size: 14px;
  151. line-height: 48px;
  152. width: 74px;
  153. height: 48px;
  154. color: #ffffff;
  155. }
  156. #launch-btn1 {
  157. width: 100px;
  158. height: 48px;
  159. display: block;
  160. }
  161. .unwxbox img.play,
  162. .wxenv img.play {
  163. display: block;
  164. width: 60px;
  165. height: 60px;
  166. position: absolute;
  167. top: 50%;
  168. left: 50%;
  169. transform: translateX(-50%) translateY(-50%);
  170. z-index: 102;
  171. }
  172. .goto {
  173. display: block;
  174. width: 140px;
  175. height: 48px;
  176. position: fixed;
  177. top: 50%;
  178. line-height: 48px;
  179. z-index: 105;
  180. color: #fff;
  181. left: 50%;
  182. background: rgb(0, 0, 0, 0.4);
  183. text-align: center;
  184. transform: translateX(-50%) translateY(-64px);
  185. }
  186. .weapp {
  187. display: block;
  188. width: 100%;
  189. height: 100%;
  190. position: absolute;
  191. top: 0;
  192. left: 0;
  193. z-index: 2;
  194. }
  195. #wxenvbox2 {
  196. display: block;
  197. width: 100%;
  198. height: 100%;
  199. position: absolute;
  200. top: 0;
  201. left: 0;
  202. z-index: 100;
  203. }
  204. .footlayerbox {
  205. display: block;
  206. width: 100%;
  207. height: 100%;
  208. position: absolute;
  209. top: 0;
  210. left: 0;
  211. z-index: 103;
  212. }
  213. .topimgbox {
  214. display: block;
  215. width: 100%;
  216. max-height: 55%;
  217. position: relative;
  218. overflow: hidden;
  219. }
  220. .unwxbox img.topimg,
  221. .wxenv img.topimg {
  222. display: block;
  223. width: 100%;
  224. position: relative;
  225. top: 0%;
  226. left: 0%;
  227. transform: translateX(0%) translateY(0%);
  228. }
  229. .articletitle {
  230. display: block;
  231. font-size: 18px;
  232. padding: 16px 20px 20px;
  233. font-weight: bold;
  234. text-align: center;
  235. }
  236. .tleft {
  237. text-align: left;
  238. }
  239. .contentmsgbox {
  240. padding: 0 20px;
  241. font-size: 16px;
  242. overflow: hidden;
  243. }
  244. .contentmsgbox1 {
  245. padding: 0 10px;
  246. font-size: 16px;
  247. height: calc(100vh - 300px);
  248. background-color: #F0F4F7;
  249. }
  250. .contentmsgbox1 img {
  251. position: relative;
  252. top: 0%;
  253. left: 0%;
  254. transform: translateX(0%) translateY(0%);
  255. width: auto;
  256. max-width: 100%;
  257. }
  258. .contentmsgbox img {
  259. position: relative;
  260. top: 0%;
  261. left: 0%;
  262. transform: translateX(0%) translateY(0%);
  263. width: auto;
  264. max-width: 100%;
  265. }
  266. .unloginlayer {
  267. display: block;
  268. width: 100%;
  269. position: absolute;
  270. bottom: 0;
  271. left: 0;
  272. height: 20%;
  273. background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgb(255 255 255) 80%);
  274. }
  275. .contentbox {
  276. display: block;
  277. width: 100%;
  278. }
  279. .praisebox {
  280. display: block;
  281. width: 100%;
  282. height: 100%;
  283. display: flex;
  284. flex-direction: column;
  285. justify-content: center;
  286. }
  287. .praiseimgbox {
  288. display: block;
  289. width: 100%;
  290. max-height: 70%;
  291. overflow: hidden;
  292. }
  293. .praiseimgbox img {
  294. display: block;
  295. width: 100%;
  296. }
  297. .praisetitle {
  298. display: block;
  299. font-size: 18px;
  300. padding: 16px 20px 0;
  301. font-weight: bold;
  302. text-align: center;
  303. }
  304. .hidden {
  305. display: none !important;
  306. }
  307. .posterimg {
  308. display: block;
  309. width: 100%;
  310. }
  311. html,
  312. body {
  313. display: block;
  314. width: 100%;
  315. height: 100%;
  316. overflow: auto;
  317. }
  318. * {
  319. margin: 0;
  320. padding: 0;
  321. border: unset;
  322. box-sizing: border-box;
  323. max-width: 100%;
  324. }
  325. input,
  326. button,
  327. textarea {
  328. outline: 0;
  329. }
  330. .width25 {
  331. width: 25%;
  332. }
  333. .bold {
  334. font-weight: bold;
  335. }
  336. .lhr40 {
  337. line-height: 22px;
  338. }
  339. .lhr44 {
  340. line-height: 24px;
  341. }
  342. .color333 {
  343. color: #333333;
  344. }
  345. .color999 {
  346. color: #999999;
  347. }
  348. .fontfpr {
  349. font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
  350. }
  351. .fontr18 {
  352. font-size: 10px;
  353. }
  354. button {
  355. border: unset;
  356. }
  357. .fontfpb {
  358. font-family: PingFang-SC-Bold, Source Han Sans CN Black;
  359. }
  360. .fontr24 {
  361. font-size: 14px;
  362. }
  363. .tcenter {
  364. text-align: center;
  365. }
  366. .fontr32 {
  367. font-size: 18px;
  368. }
  369. .left {
  370. float: left;
  371. }
  372. .right {
  373. float: right;
  374. }
  375. .width25 {
  376. width: 25%;
  377. }
  378. .width30_ {
  379. width: 30%;
  380. }
  381. .width22_ {
  382. width: 22%;
  383. }
  384. .width23_ {
  385. width: 23%;
  386. }
  387. .clearfix:after {
  388. content: ".";
  389. display: block;
  390. height: 0;
  391. clear: both;
  392. visibility: hidden;
  393. }
  394. .lhr32 {
  395. line-height: 18px;
  396. }
  397. .color28A1FF {
  398. color: #28A1FF;
  399. }
  400. .fontfpr {
  401. font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
  402. }
  403. .fontr28 {
  404. font-size: 16px;
  405. }
  406. .pull-left {
  407. float: left;
  408. }
  409. .ellipsis {
  410. overflow: hidden;
  411. text-overflow: ellipsis;
  412. white-space: nowrap;
  413. }
  414. .ellipsisTwo {
  415. overflow: hidden;
  416. text-overflow: ellipsis;
  417. display: -webkit-box;
  418. -webkit-line-clamp: 2;
  419. -webkit-box-orient: vertical;
  420. }
  421. .startimebox {
  422. margin-top: 2px;
  423. }
  424. footer {
  425. display: block;
  426. width: 100%;
  427. height: 49px;
  428. background-color: #ffffff;
  429. position: fixed;
  430. bottom: 0;
  431. left: 0;
  432. z-index: 99;
  433. box-shadow: 0 -2px 6px 0 rgba(0, 145, 255, 0.15);
  434. }
  435. .footerLeft {
  436. display: block;
  437. width: 50%;
  438. }
  439. footer .rightbtn {
  440. display: block;
  441. width: 100%;
  442. height: 49px;
  443. line-height: 49px;
  444. background-color: #ff7100;
  445. color: #ffffff;
  446. font-size: 16px;
  447. }
  448. .inputbox {
  449. display: none;
  450. width: 80%;
  451. padding: 8px 16px 16px;
  452. position: fixed;
  453. top: 30%;
  454. left: 10%;
  455. z-index: 100;
  456. background-color: #ffffff;
  457. border-radius: 5px;
  458. box-shadow: 0 0px 8px 0 rgba(0, 145, 255, 0.3);
  459. }
  460. .inputbox img {
  461. position: absolute;
  462. top: -12px;
  463. right: -12px;
  464. width: 24px;
  465. }
  466. .inputbox .titbox {
  467. font-family: PingFang-SC-Medium, Source Han Sans CN Medium;
  468. font-size: 16px;
  469. text-align: center;
  470. line-height: 24px;
  471. margin-bottom: 10px;
  472. }
  473. .inputbox .input {
  474. display: block;
  475. width: 100%;
  476. margin-bottom: 16px;
  477. height: 44px;
  478. }
  479. .inputbox .input input {
  480. display: block;
  481. width: 100%;
  482. height: 100%;
  483. border: 1px solid #ddd;
  484. padding-left: 8px;
  485. }
  486. .inputbox button {
  487. width: 100%;
  488. height: 44px;
  489. color: #fff;
  490. background-color: #ff7100;
  491. border-radius: 22px;
  492. }
  493. .topcoverbox {
  494. display: block;
  495. width: 100%;
  496. max-height: 30%;
  497. overflow: hidden;
  498. }
  499. .topcoverbox img {
  500. display: block;
  501. width: 100%;
  502. }
  503. .titlebox {
  504. display: block;
  505. width: 100%;
  506. background-color: #ffffff;
  507. padding: 15px 15px 10px;
  508. }
  509. .startimebox {
  510. margin-top: 2px;
  511. }
  512. .casemsgbox {
  513. display: block;
  514. background-color: #FFFFFF;
  515. position: relative;
  516. z-index: 1;
  517. }
  518. .casemsgbox {
  519. width: 100%;
  520. margin: 8px auto 0;
  521. background-color: #ffffff;
  522. border-radius: 5px;
  523. box-shadow: 0px 3px 6px 1px rgba(102, 102, 102, 0.16);
  524. box-sizing: border-box;
  525. padding: 10px 0 16px;
  526. }
  527. .casepricebox div {
  528. height: 16px;
  529. overflow: hidden;
  530. margin-top: 12px;
  531. }
  532. .stepbox {
  533. display: block;
  534. width: 100%;
  535. margin-top: 10px;
  536. padding: 12px 0;
  537. background-color: #FFFFFF;
  538. }
  539. .everysteps {
  540. text-align: center;
  541. position: relative;
  542. }
  543. .everysteps .stepnum {
  544. display: block;
  545. width: 16px;
  546. height: 16px;
  547. background: #FFFFFF;
  548. border: 2px solid #CCCCCC;
  549. border-radius: 50%;
  550. margin: 0 auto 6px;
  551. position: relative;
  552. z-index: 2;
  553. }
  554. .everysteps::after {
  555. display: block;
  556. content: " ";
  557. width: 100%;
  558. height: 5px;
  559. background: #EEEEEE;
  560. position: absolute;
  561. top: 5.5px;
  562. left: -50%;
  563. z-index: 1;
  564. }
  565. .sitestep .everysteps:first-child::after {
  566. display: none;
  567. }
  568. .sitestep {
  569. margin-top: 16px;
  570. }
  571. .stepmsgbox {
  572. margin-top: 10px;
  573. padding: 20px 20px 0;
  574. background-color: #FFFFFF;
  575. }
  576. .stepmsgtitbox {
  577. position: relative;
  578. }
  579. .stepmsgtitbox::before {
  580. content: " ";
  581. display: block;
  582. width: 4px;
  583. height: 19px;
  584. background: #28A1FF;
  585. border-radius: 1px;
  586. position: absolute;
  587. top: 1px;
  588. left: -8px;
  589. }
  590. .contentbox {
  591. display: block;
  592. width: 100%;
  593. }
  594. .imgbox .imgdiv {
  595. display: block;
  596. width: 30%;
  597. border-radius: 3px;
  598. margin-bottom: 17px;
  599. margin-right: 5%;
  600. }
  601. .imgbox .imgdiv div {
  602. display: block;
  603. width: 100%;
  604. padding-bottom: 100%;
  605. position: relative;
  606. }
  607. .imgbox .imgdiv img {
  608. display: block;
  609. position: absolute;
  610. width: 100%;
  611. height: 100%;
  612. }
  613. .imgbox .imgdiv:nth-of-type(3n) {
  614. margin-right: 0;
  615. }
  616. .width20_ {
  617. width: 20%;
  618. }
  619. .lhr28 {
  620. line-height: 16px;
  621. }
  622. .colorA6CAE0 {
  623. color: #A6CAE0;
  624. }
  625. .mglr14 {
  626. margin-left: 8px;
  627. }
  628. .mtr16 {
  629. margin-top: 10px;
  630. }
  631. .colorccc {
  632. color: #ccc;
  633. }
  634. .mgtr20 {
  635. margin-top: 12px;
  636. }
  637. .everysteps {
  638. text-align: center;
  639. position: relative;
  640. }
  641. .laststeps::after {
  642. background-color: #28A1FF;
  643. }
  644. .lhtext {
  645. display: flex;
  646. align-items: center;
  647. justify-content: center;
  648. }
  649. .clearfix:after {
  650. clear: both;
  651. content: ' ';
  652. display: table;
  653. }
  654. .clearfix:before {
  655. content: ' ';
  656. display: table;
  657. }
  658. .page {
  659. width: 100%;
  660. max-width: 750px;
  661. height: 100vh;
  662. position: relative;
  663. overflow: auto;
  664. background-color: #F6F6F6;
  665. margin: auto;
  666. }
  667. .cover-box {
  668. width: 100%;
  669. height: 300px;
  670. position: relative;
  671. }
  672. .floorMsg {
  673. position: relative;
  674. box-sizing: border-box;
  675. width: 100%;
  676. margin: auto;
  677. padding: 10px 10px 20px;
  678. background-color: #fff;
  679. margin-top: -55px;
  680. z-index: 9;
  681. border-radius: 5px;
  682. box-shadow: 0 2px 10px 0 rgba(36, 158, 251, 0.26);
  683. }
  684. .f-title {
  685. color: #333;
  686. font-size: 18px;
  687. font-weight: 700;
  688. padding: 5px 0px;
  689. }
  690. .f-area {
  691. padding: 5px 0px;
  692. font-size: 16px;
  693. color: #B5D3E6;
  694. }
  695. .f-name {
  696. color: #6C7B8B;
  697. font-size: 15px;
  698. display: flex;
  699. align-items: center;
  700. }
  701. .f-time {
  702. font-size: 15px;
  703. }
  704. .f-house {
  705. margin: 7px 0px 4px;
  706. }
  707. .f-address {
  708. padding: 5px 0px;
  709. font-size: 15px;
  710. margin: 0px 0px 4px;
  711. }
  712. .flex {
  713. display: flex;
  714. }
  715. .flex-sub {
  716. flex: 1;
  717. }
  718. .sign-data {
  719. display: flex;
  720. align-items: center;
  721. font-size: 15px;
  722. margin: 5px 0px;
  723. }
  724. .color6C7B8B {
  725. color: #6C7B8B;
  726. }
  727. .sign-data>div {
  728. flex: 1;
  729. display: flex;
  730. align-items: center;
  731. }
  732. .justify-end {
  733. justify-content: flex-end;
  734. }
  735. .justify-center {
  736. justify-content: center;
  737. }
  738. .color333 {
  739. color: #333333;
  740. }
  741. .address_icon {
  742. width: 16px !important;
  743. height: 16px !important;
  744. margin-right: 4px;
  745. }
  746. .houseType {
  747. margin-top: 10px;
  748. padding: 20px 10px;
  749. background-color: #fff;
  750. }
  751. .houseType {
  752. margin-top: 10px;
  753. padding: 20px 10px;
  754. background-color: #fff;
  755. }
  756. .success-top {
  757. width: 100%;
  758. height: 36%;
  759. display: flex;
  760. flex-direction: column;
  761. justify-content: center;
  762. align-items: center;
  763. background-color: #249efb;
  764. }
  765. .success-top img {
  766. display: block;
  767. width: 260px;
  768. height: 200px;
  769. }
  770. .success-bottom {
  771. width: 100%;
  772. height: 79vh;
  773. position: relative;
  774. display: flex;
  775. justify-content: center;
  776. align-items: center;
  777. z-index: 4;
  778. }
  779. .success-bottom .bottomBg {
  780. position: absolute;
  781. width: 100%;
  782. height: 100%;
  783. z-index: 0;
  784. top: -60px;
  785. }
  786. .successQrBox {
  787. width: 80%;
  788. height: 260px;
  789. position: relative;
  790. z-index: 2;
  791. margin-bottom: 150px;
  792. display: flex;
  793. flex-direction: column;
  794. justify-content: center;
  795. align-items: center;
  796. }
  797. .qrBox {
  798. width: 240px;
  799. height: 240px;
  800. position: relative;
  801. display: flex;
  802. justify-content: center;
  803. align-items: center;
  804. top: 10px;
  805. }
  806. .qrBox .qrBoxBg {
  807. position: absolute;
  808. width: 100%;
  809. height: 100%;
  810. }
  811. .imgicon {
  812. display: block;
  813. width: 200px;
  814. height: 200px;
  815. }
  816. .text1 {
  817. font-size: 16px;
  818. color: #333333;
  819. font-weight: 700;
  820. }
  821. .text2 {
  822. font-size: 12px;
  823. color: #999999;
  824. margin: 5px 0px;
  825. }
  826. .pt20 {
  827. position: relative;
  828. top: 30px;
  829. }
  830. .coverbox {
  831. display: block;
  832. width: 100%;
  833. height: 100%;
  834. overflow: auto;
  835. }
  836. .coverbox img {
  837. display: block;
  838. width: 100%;
  839. }
  840. .f-dsc-content {
  841. white-space: nowrap;
  842. overflow: hidden;
  843. text-overflow: ellipsis;
  844. }
  845. .switchTab {
  846. max-width: 80%;
  847. height: 28px;
  848. background-color: rgba(255, 255, 255, 0.5);
  849. position: absolute;
  850. bottom: 45px;
  851. left: 50%;
  852. transform: translateX(-50%);
  853. border-radius: 20px;
  854. display: flex;
  855. align-items: center;
  856. z-index: 9;
  857. }
  858. .switchTab>div {
  859. width: 68px;
  860. display: flex;
  861. align-items: center;
  862. justify-content: center;
  863. font-size: 12px;
  864. }
  865. .activeTab {
  866. height: 100%;
  867. color: #fff;
  868. background-color: #28A1FF;
  869. border-radius: 20px;
  870. }
  871. .allDataStyle {
  872. width: 100%;
  873. height: 100px;
  874. margin: 0px auto;
  875. background-color: #fff;
  876. border-radius: 5px;
  877. margin-top: 20px;
  878. margin-bottom: 20px;
  879. padding-bottom: 40px;
  880. position: relative;
  881. z-index: 9;
  882. }
  883. .tab-list {
  884. height: 50px;
  885. background-color: #fff;
  886. display: flex;
  887. align-items: center;
  888. box-sizing: border-box;
  889. padding: 0px;
  890. overflow-x: auto;
  891. overflow-y: hidden;
  892. color: #6C7B8B;
  893. border-bottom: 1px solid rgba(212, 228, 237, 1);
  894. font-size: 14px;
  895. position: sticky;
  896. top: 0px;
  897. z-index: 99;
  898. }
  899. .tab-list>div {
  900. flex: none;
  901. display: inline-block;
  902. max-width: 120px;
  903. height: 48px;
  904. text-align: center;
  905. line-height: 48px;
  906. white-space: nowrap;
  907. overflow: hidden;
  908. text-overflow: ellipsis;
  909. padding: 0px 10px;
  910. }
  911. .tabActive {
  912. color: #222222;
  913. font-weight: 700;
  914. position: relative;
  915. font-size: 16px;
  916. }
  917. .tabActive::after {
  918. content: ' ';
  919. width: 12px;
  920. height: 5px;
  921. background-color: #333333;
  922. border-radius: 2.5px;
  923. position: absolute;
  924. bottom: 1px;
  925. left: 50%;
  926. transform: translateX(-50%);
  927. }
  928. .relative{
  929. position: relative;
  930. }
  931. .vrbox{
  932. display: block;
  933. width: 100%;
  934. height: 100%;
  935. overflow: hidden;
  936. }
  937. .vrbox iframe{
  938. display: block;
  939. width: 100%;
  940. height: 100%;
  941. border: unset;
  942. }
  943. .vrbox div{
  944. display: block;
  945. width: 100%;
  946. height: 100%;
  947. position: fixed;
  948. top: 0;
  949. left: 0;
  950. z-index: 7;
  951. }
  952. .viewTitle {
  953. width: 100%;
  954. font-size: 16px;
  955. color: #333333;
  956. font-weight: 700;
  957. text-align: center;
  958. box-sizing: border-box;
  959. padding: 10px 10px;
  960. }
  961. .viewImage {
  962. width: 100%;
  963. height: auto;
  964. overflow: hidden;
  965. box-sizing: border-box;
  966. padding: 10px 10px 10px;
  967. }
  968. .viewImage > img {
  969. width: 100%;
  970. height: auto;
  971. }
  972. .viewImage > video {
  973. width: 100%;
  974. }
  975. .viewContent {
  976. width: 100%;
  977. box-sizing: border-box;
  978. font-size: 14px;
  979. color: #333333;
  980. }
  981. </style>
  982. <script src="https://wzh.nczyzs.com/static/js/jquery.min.js"></script>
  983. <body>
  984. <div class="mianbox">
  985. <!-- 非微信环境 -->
  986. <div class="unwxbox ">
  987. <div class="imgbox">
  988. <img class="imgmsg" src="https://o.nczyzs.com/xcx/joincompany.png" />
  989. </div>
  990. <div class="layerbox" id="opendiv"></div>
  991. </div>
  992. <!-- 微信环境 -->
  993. <div class="wxenv hidden">
  994. <div class="imgbox">
  995. <img class="imgmsg" src="https://o.nczyzs.com/xcx/joincompany.png" />
  996. </div>
  997. <div class="" id="wxenvbox2"></div>
  998. </div>
  999. </div>
  1000. <div class="goto hidden">
  1001. <div class="" id="unwxwebbox2">请前往小程序查看</div>
  1002. <div class="hidden weapp">
  1003. <wx-open-launch-weapp username="{$mini_account}" path="{$path}?{$query}"
  1004. style="display: block;width: 100%;height: 100%;">
  1005. <script type="text/wxtag-template">
  1006. <style>.testdiv { height: 48px;display: block; color: transparent;}</style>
  1007. <div class="testdiv" >请前往小程序查看</div>
  1008. </script>
  1009. </wx-open-launch-weapp>
  1010. </div>
  1011. </div>
  1012. <div class="footer1">
  1013. <div class="footbox clearfix">
  1014. <div class="leftfoot ">
  1015. {notempty name="company.brand"}<img class="left" src="{$company.brand.logo}" />{/notempty}
  1016. <span class="left">{$company.company_name}</span>
  1017. </div>
  1018. <div class="layerbox1">前往小程序</div>
  1019. </div>
  1020. <div class="footlayerbox unwxbox" id="unwxwebbox1"></div>
  1021. <div class="footlayerbox wxenv hidden" id="wxenvbox1">
  1022. <wx-open-launch-weapp id="launch-btn" username="{$mini_account}" path="{$path}?{$query}"
  1023. style="display: block;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 101;">
  1024. <script type="text/wxtag-template">
  1025. <style>.testdiv { width: 300px; height: 1000px;display: block;margin: 0 auto;}</style>
  1026. <div class="testdiv" ></div>
  1027. </script>
  1028. </wx-open-launch-weapp>
  1029. </div>
  1030. </div>
  1031. </body>
  1032. <script src="https://mlz2.cn/js/jweixin-1.6.0.js"></script>
  1033. <script>
  1034. // var vConsole = new VConsole();
  1035. // 逻辑处理
  1036. $(function () {
  1037. $('.channelsignup').click(function () {
  1038. location.href = "{$urlsheme}";
  1039. })
  1040. $('#unwxwebbox').click(function () {
  1041. location.href = "{$urlsheme}";
  1042. })
  1043. $('#unwxwebbox1').click(function () {
  1044. location.href = "{$urlsheme}";
  1045. })
  1046. $('#unwxwebbox2').click(function () {
  1047. location.href = "{$urlsheme}";
  1048. })
  1049. $('#opendiv').click(function () {
  1050. $('.goto').removeClass('hidden');
  1051. setTimeout(() => {
  1052. $('.goto').addClass('hidden');
  1053. }, 2000);
  1054. })
  1055. $('.play').click(function () {
  1056. $('.goto').removeClass('hidden');
  1057. setTimeout(() => {
  1058. $('.goto').addClass('hidden');
  1059. }, 2000);
  1060. })
  1061. $('#footwxbtn').click(function () {
  1062. $('.goto').removeClass('hidden');
  1063. setTimeout(() => {
  1064. $('.goto').addClass('hidden');
  1065. }, 2000);
  1066. })
  1067. $('#wxenvbox2').click(function () {
  1068. $('.goto').removeClass('hidden');
  1069. setTimeout(() => {
  1070. $('.goto').addClass('hidden');
  1071. }, 2000);
  1072. })
  1073. var ua = navigator.userAgent.toLowerCase()
  1074. var isWXWork = ua.match(/wxwork/i) == 'wxwork'
  1075. var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'
  1076. var isMobile = false
  1077. var isDesktop = false
  1078. if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
  1079. isMobile = true
  1080. } else {
  1081. isDesktop = true
  1082. }
  1083. var m = ua.match(/MicroMessenger/i)
  1084. if (isWeixin) {
  1085. var system = {
  1086. win: false,
  1087. mac: false
  1088. };
  1089. var p = navigator.platform;
  1090. // 是否在pc展示
  1091. var isPc = false;
  1092. system.win = p.indexOf("Win") == 0;
  1093. system.mac = p.indexOf("Mac") == 0;
  1094. if (system.win || system.mac) {
  1095. isPc = true;
  1096. console.log("在微信PC端上打开内置浏览器");
  1097. } else {
  1098. isPc = false;
  1099. console.log("非微信PC端上打开内置浏览器");
  1100. }
  1101. // 在微信PC端上打开内置浏览器和在浏览器中打开一样
  1102. if (isPc) {
  1103. $('.wxenv').addClass('hidden');
  1104. $('.weapp').addClass('hidden');
  1105. $('.unwxbox').removeClass('hidden');
  1106. location.href = "{$urlsheme}";
  1107. } else {
  1108. wx.config({
  1109. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  1110. appId: "{$wxconfig.appid}",
  1111. timestamp: "{$wxconfig.timestamp}",
  1112. nonceStr: "{$wxconfig.nonceStr}",
  1113. signature: "{$wxconfig.signature}",
  1114. jsApiList: ['updateTimelineShareData', 'updateAppMessageShareData'], // 必填,需要使用的JS接口列表
  1115. openTagList: ['wx-open-launch-weapp']
  1116. });
  1117. var title = document.title;
  1118. var url = document.url;
  1119. //{notempty name="data"}
  1120. wx.ready(function () {
  1121. wx.updateTimelineShareData({
  1122. title: document.title,
  1123. link: document.url,
  1124. imgUrl: 'https://o.nczyzs.com/xcx/joincompany.png?x-oss-process=image/resize,m_fill,h_220,w_240',
  1125. success: function () {
  1126. console.log('updateTimelineShareData分享设置成功');
  1127. }
  1128. })
  1129. wx.updateAppMessageShareData({
  1130. title: document.title,
  1131. desc: document.title,
  1132. link: document.url,
  1133. imgUrl: 'https://o.nczyzs.com/xcx/joincompany.png?x-oss-process=image/resize,m_fill,h_220,w_240',
  1134. success: function () {
  1135. console.log('updateAppMessageShareData分享设置成功');
  1136. }
  1137. })
  1138. });
  1139. // 在手机上的浏览器中打开
  1140. $('.wxenv').removeClass('hidden');
  1141. $('.weapp').removeClass('hidden');
  1142. $('.unwxbox').addClass('hidden');
  1143. }
  1144. } else if (isMobile) {
  1145. // 在手机上的浏览器中打开
  1146. $('.wxenv').addClass('hidden');
  1147. $('.weapp').addClass('hidden');
  1148. $('.unwxbox').removeClass('hidden');
  1149. location.href = "{$urlsheme}";
  1150. } else {
  1151. // 在非微信,非手机,那就是在电脑的浏览器这种打开
  1152. $('.wxenv').addClass('hidden');
  1153. $('.weapp').addClass('hidden');
  1154. $('.unwxbox').removeClass('hidden');
  1155. location.href = "{$urlsheme}";
  1156. }
  1157. })
  1158. </script>
  1159. </html>