material_evidence.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>{$data.title}</title>
  5. <meta charset="UTF-8">
  6. <meta name="viewport"
  7. content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,viewport-fit=cover,no-cache">
  8. <link rel="stylesheet" href="__STATIC__/css/mobilecss.css">
  9. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  10. <script src="__STATIC__/js/xgplayer.js" type="text/javascript"></script>
  11. <script src="__STATIC__/js/volume.js" type="text/javascript"></script>
  12. <script src="__STATIC__/js/playbackRate.js" type="text/javascript"></script>
  13. </head>
  14. <style>
  15. * {
  16. margin: 0px;
  17. padding: 0px;
  18. }
  19. .pageStyle {
  20. width: 100%;
  21. min-height: 100vh;
  22. position: relative;
  23. overflow: auto;
  24. box-sizing: border-box;
  25. padding-bottom: 60px;
  26. }
  27. .clearfix:after {
  28. content: ".";
  29. display: block;
  30. height: 0;
  31. clear: both;
  32. visibility: hidden;
  33. }
  34. .color384855 {
  35. color: #384855;
  36. }
  37. .fontfpr {
  38. font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
  39. }
  40. .fontfpm {
  41. font-family: PingFangSC-Medium, Source Han Sans CN Medium;
  42. }
  43. .fontfps {
  44. font-family: PingFangSC-Semibold, Source Han Sans CN Bold;
  45. }
  46. .fontfpb {
  47. font-family: PingFang-SC-Bold, Source Han Sans CN Black;
  48. }
  49. .titbox {
  50. padding: 1.333rem 0.833rem 0.667rem;
  51. }
  52. .width100 {
  53. width: 100%;
  54. }
  55. .msgbox {
  56. padding: 0.5rem 0.833rem;
  57. padding-bottom: calc(50px + constant(safe-area-inset-bottom)) !important;
  58. padding-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
  59. }
  60. .msgbox .msgdiv {
  61. margin-bottom: 1rem;
  62. }
  63. .msgbox .msgdiv div {
  64. margin-top: 4px;
  65. }
  66. .prebox {
  67. position: fixed;
  68. top: 36%;
  69. left: 0;
  70. width: 34px;
  71. height: 52px;
  72. opacity: 0.9;
  73. background: #384855;
  74. border-radius: 0 26px 26px 0;
  75. }
  76. .prebox img {
  77. display: block;
  78. position: absolute;
  79. width: 16px;
  80. top: 17px;
  81. left: 5px;
  82. z-index: 99;
  83. }
  84. .nextbox {
  85. position: fixed;
  86. top: 36%;
  87. right: 0;
  88. width: 34px;
  89. height: 52px;
  90. opacity: 0.9;
  91. background: #384855;
  92. border-radius: 26px 0 0 26px;
  93. }
  94. .nextbox img {
  95. display: block;
  96. position: absolute;
  97. width: 16px;
  98. top: 17px;
  99. right: 5px;
  100. z-index: 99;
  101. }
  102. footer {
  103. display: block;
  104. width: 100%;
  105. height: 49px;
  106. background-color: #ffffff;
  107. position: fixed;
  108. bottom: 0;
  109. left: 0;
  110. z-index: 99;
  111. box-shadow: 0 -2px 6px 0 rgba(0, 145, 255, 0.15);
  112. }
  113. footer .rightbtn {
  114. display: block;
  115. width: 100%;
  116. height: 49px;
  117. line-height: 49px;
  118. background-color: #ff7100;
  119. color: #ffffff;
  120. font-size: 16px;
  121. }
  122. .inputbox {
  123. display: none;
  124. width: 80%;
  125. padding: 8px 16px 16px;
  126. position: fixed;
  127. top: 30%;
  128. left: 10%;
  129. z-index: 100;
  130. background-color: #ffffff;
  131. border-radius: 5px;
  132. box-shadow: 0 0px 8px 0 rgba(0, 145, 255, 0.3);
  133. }
  134. .inputbox img {
  135. position: absolute;
  136. top: -12px;
  137. right: -12px;
  138. width: 24px;
  139. }
  140. .inputbox .titbox {
  141. font-family: PingFang-SC-Medium, Source Han Sans CN Medium;
  142. font-size: 16px;
  143. text-align: center;
  144. line-height: 24px;
  145. margin-bottom: 10px;
  146. }
  147. .inputbox .input {
  148. display: block;
  149. width: 100%;
  150. margin-bottom: 16px;
  151. height: 44px;
  152. }
  153. .inputbox .input input {
  154. display: block;
  155. width: 100%;
  156. height: 100%;
  157. border: 1px solid #ddd;
  158. padding-left: 8px;
  159. }
  160. .inputbox button {
  161. width: 100%;
  162. height: 44px;
  163. color: #fff;
  164. background-color: #ff7100;
  165. border-radius: 22px;
  166. }
  167. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  168. footer {
  169. box-sizing: content-box;
  170. padding-bottom: constant(safe-area-inset-bottom);
  171. padding-bottom: env(safe-area-inset-bottom);
  172. }
  173. }
  174. /* 底部 */
  175. .footer {
  176. width: 100%;
  177. height: 60px;
  178. background-color: #fff;
  179. position: fixed;
  180. bottom: 0px;
  181. left: 0px;
  182. border-top: 1px solid #ccc;
  183. display: flex;
  184. box-sizing: border-box;
  185. padding: 10px;
  186. font-size: 15px;
  187. z-index: 99;
  188. }
  189. .f-left {
  190. flex: 2;
  191. display: flex;
  192. align-items: center;
  193. }
  194. .f-right {
  195. flex: 1;
  196. display: flex;
  197. align-items: center;
  198. justify-content: space-between;
  199. box-sizing: border-box;
  200. padding-right: 10px;
  201. }
  202. .f-msg {
  203. display: flex;
  204. flex-direction: column;
  205. box-sizing: border-box;
  206. padding-left: 10px;
  207. }
  208. .f-msg-company {
  209. font-size: 12px;
  210. color: #999999;
  211. line-height: 25px;
  212. }
  213. .f-mobile-name {
  214. font-size: 12px;
  215. margin-top: 8px;
  216. }
  217. .f-wx-name {
  218. font-size: 12px;
  219. margin-top: 5px;
  220. }
  221. .f-avatar {
  222. width: 40px;
  223. height: 40px;
  224. border-radius: 50% !important;
  225. }
  226. .f-mobile,
  227. .f-addwx {
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. justify-content: center;
  232. }
  233. /* 底部 */
  234. /* 公司 */
  235. .companyBox {
  236. width: 100%;
  237. height: 80px;
  238. padding: 10px 20px;
  239. display: flex;
  240. align-items: center;
  241. box-sizing: border-box;
  242. }
  243. .companyLogo {
  244. width: 40px;
  245. height: 40px;
  246. border-radius: 50%;
  247. overflow: hidden;
  248. }
  249. .companyMsg {
  250. flex: 1;
  251. display: flex;
  252. flex-direction: column;
  253. box-sizing: border-box;
  254. padding: 0px 10px;
  255. overflow: hidden;
  256. }
  257. .c_address {
  258. margin-top: 10px;
  259. font-size: 12px;
  260. color: #999999;
  261. display: flex;
  262. }
  263. .c_addressName {
  264. flex: 1;
  265. }
  266. .c_ellipsis {
  267. overflow: hidden;
  268. white-space: nowrap;
  269. text-overflow: ellipsis;
  270. }
  271. .c_show_address,
  272. .c_hide_address {
  273. color: #28A1FF;
  274. }
  275. .c_hide {
  276. display: none !important;
  277. }
  278. /* 公司 */
  279. .line {
  280. width: 100%;
  281. height: 10px;
  282. background-color: #f6f6f6;
  283. }
  284. .titleTips {
  285. border-left: 5px solid #333333;
  286. box-sizing: border-box;
  287. padding-left: 5px;
  288. color: #333333;
  289. font-weight: bold;
  290. margin: 10px auto;
  291. width: 92%;
  292. font-size: 18px;
  293. height: 20px;
  294. line-height: 20px;
  295. }
  296. .updateTime {
  297. font-size: 12px;
  298. color: #999999;
  299. padding: 0px 15px;
  300. }
  301. .fwbold {
  302. color: #333333;
  303. font-weight: bold;
  304. }
  305. /* 遮罩层 */
  306. .a-mask {
  307. position: fixed;
  308. width: 100%;
  309. height: 100vh;
  310. z-index: 99999;
  311. top: 0px;
  312. left: 0px;
  313. background-color: rgba(0, 0, 0, 0.5);
  314. display: flex;
  315. justify-content: center;
  316. align-items: center;
  317. }
  318. .a-mask-block {
  319. width: 80%;
  320. height: 300px;
  321. background-color: #fff;
  322. border-radius: 4px;
  323. box-sizing: border-box;
  324. padding: 10px;
  325. display: flex;
  326. flex-direction: column;
  327. justify-content: center;
  328. align-items: center;
  329. position: relative;
  330. }
  331. .a-mask-qr {
  332. width: 220px;
  333. height: 220px;
  334. padding: 10px;
  335. }
  336. .a-mask-qr img {
  337. display: block;
  338. margin: 0 auto;
  339. }
  340. .downloadwx {
  341. height: 30px;
  342. color: #28A1FF;
  343. border: none;
  344. line-height: 30px;
  345. border-radius: 4px;
  346. background-color: #fff;
  347. }
  348. .maskClose {
  349. width: 24px;
  350. height: 24px;
  351. position: absolute;
  352. top: -10px;
  353. right: -10px;
  354. background-color: #fff;
  355. border-radius: 50%;
  356. display: flex;
  357. justify-content: center;
  358. align-items: center;
  359. }
  360. /* 遮罩层 */
  361. /* 授权弹窗 */
  362. .b-mask {
  363. position: fixed;
  364. width: 100%;
  365. height: 100vh;
  366. top: 0px;
  367. left: 0px;
  368. background-color: rgba(0, 0, 0, 0.5);
  369. z-index: 9999;
  370. display: flex;
  371. justify-content: center;
  372. align-items: center;
  373. }
  374. .b-mask-block {
  375. width: 80%;
  376. height: 180px;
  377. background-color: #fff;
  378. border-radius: 10px;
  379. display: flex;
  380. flex-direction: column;
  381. }
  382. .b-mask-content {
  383. flex: 1;
  384. box-sizing: border-box;
  385. padding: 10px;
  386. display: flex;
  387. flex-direction: column;
  388. justify-content: center;
  389. align-items: center;
  390. }
  391. .b-mask-footer {
  392. width: 100%;
  393. height: 50px;
  394. display: flex;
  395. align-items: center;
  396. border-top: 1px solid #EEEEEE;
  397. }
  398. .b-mask-cancel {
  399. flex: 1;
  400. display: flex;
  401. justify-content: center;
  402. align-items: center;
  403. color: #CCCCCC;
  404. }
  405. .b-mask-confirm {
  406. flex: 1;
  407. display: flex;
  408. justify-content: center;
  409. align-items: center;
  410. color: #28A1FF;
  411. }
  412. .b-line-middle {
  413. width: 1px;
  414. height: 30px;
  415. background-color: #ececec;
  416. }
  417. .b-mask-title {
  418. font-size: 20px;
  419. color: #333333;
  420. margin-top: 10px;
  421. font-weight: 600;
  422. }
  423. .b-mask-msg {
  424. flex: 1;
  425. display: flex;
  426. justify-content: center;
  427. align-items: center;
  428. box-sizing: border-box;
  429. padding: 0px 10px;
  430. color: #999999;
  431. font-size: 16px;
  432. line-height: 25px;
  433. }
  434. /* 授权弹窗 */
  435. /* 头像 */
  436. .avatar-nameCard {
  437. display: flex;
  438. align-items: center;
  439. }
  440. .avatarBox {
  441. position: fixed;
  442. width: 60px;
  443. height: 60px;
  444. bottom: 110px;
  445. right: 20px;
  446. display: flex;
  447. flex-direction: column;
  448. justify-content: center;
  449. align-items: center;
  450. z-index: 9999;
  451. }
  452. .avatarImage {
  453. width: 50px;
  454. height: 50px;
  455. border-radius: 50%;
  456. border: 2px solid #28A1FF;
  457. overflow: hidden;
  458. }
  459. .avatarText {
  460. padding: 3px 5px;
  461. background-color: #28A1FF;
  462. font-size: 10px;
  463. color: #fff;
  464. border-radius: 4px;
  465. margin-top: -13px;
  466. }
  467. .m_hide {
  468. display: none !important;
  469. }
  470. /* 头像 */
  471. .toastbox {
  472. display: block;
  473. position: fixed;
  474. top: 50%;
  475. left: 50%;
  476. transform: translateX(-50%) translateY(-50%);
  477. background-color: rgba(0, 0, 0, 0.7);
  478. color: #fff;
  479. z-index: 999999 !important;
  480. padding: 5px 10px;
  481. /* font-weight: bold; */
  482. font-size: 14px;
  483. /* box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.3); */
  484. line-height: 24px;
  485. border-radius: 4px;
  486. max-width: 80%;
  487. text-align: center;
  488. }
  489. .videoMsg {
  490. display: block;
  491. width: 100%;
  492. height: 100%;
  493. overflow: hidden;
  494. box-sizing: border-box;
  495. background: #000;
  496. }
  497. .videoDiv {
  498. display: block;
  499. width: 100%;
  500. height: auto;
  501. min-height: 100%;
  502. overflow: hidden;
  503. position: absolute;
  504. top: 50%;
  505. transform: translate(0, -50%);
  506. -webkit-transform: translate(0, -50%);
  507. -moz-transform: translate(0, -50%);
  508. -ms-transform: translate(0, -50%);
  509. }
  510. .videoMsg .videoDiv video {
  511. display: block;
  512. width: 100%;
  513. position: absolute;
  514. max-height: 100%;
  515. height: auto;
  516. top: 50%;
  517. left: 50%;
  518. transform: translate(-50%, -50%);
  519. object-fit: fill;
  520. z-index: 8;
  521. }
  522. .videoDiv img.playImg {
  523. display: block;
  524. position: absolute;
  525. top: 50%;
  526. left: 50%;
  527. width: 60PX;
  528. height: 60PX;
  529. transform: translate(-50%, -50%);
  530. z-index: 10;
  531. }
  532. .operateBox {
  533. position: fixed;
  534. width: 55px;
  535. height: auto;
  536. right: 5px;
  537. bottom: 180px;
  538. }
  539. .operateItem {
  540. height: 80px;
  541. display: flex;
  542. flex-direction: column;
  543. justify-content: center;
  544. align-items: center;
  545. }
  546. .operateItem>span {
  547. color: #fff;
  548. font-size: 13px;
  549. margin-top: 6px;
  550. }
  551. .o-avatar {
  552. width: 40px;
  553. height: 40px;
  554. border-radius: 50%;
  555. }
  556. .signUpBtn {
  557. width: 115px;
  558. height: 30px;
  559. background-color: #28A1FF;
  560. position: absolute;
  561. bottom: 90px;
  562. font-size: 14px;
  563. color: #fff;
  564. text-align: center;
  565. line-height: 30px;
  566. left: 20px;
  567. border-radius: 4px;
  568. }
  569. .videocontent {
  570. width: 100%;
  571. font-family: PingFang-SC-Medium, Source Han Sans CN Medium;
  572. font-size: 14px;
  573. max-height: 200px;
  574. line-height: 20px;
  575. color: #ffffff;
  576. /* position: absolute; */
  577. /* bottom: 20px; */
  578. /* left: 20px; */
  579. /* z-index: 9; */
  580. /* white-space: pre-wrap; */
  581. }
  582. .videoTitle {
  583. width: 100%;
  584. font-family: PingFang-SC-Medium, Source Han Sans CN Medium;
  585. font-size: 14px;
  586. height: 20px;
  587. line-height: 20px;
  588. color: #ffffff;
  589. /* position: absolute; */
  590. /* bottom: 65px; */
  591. /* left: 20px; */
  592. /* z-index: 9; */
  593. }
  594. .bgcolor {
  595. position: absolute;
  596. left: 20px;
  597. bottom: 50px;
  598. width: 70%;
  599. z-index: 101;
  600. }
  601. .ellipsis {
  602. overflow: hidden;
  603. text-overflow: ellipsis;
  604. white-space: nowrap;
  605. }
  606. .ellipsisTwo {
  607. overflow: hidden;
  608. text-overflow: ellipsis;
  609. display: -webkit-box;
  610. -webkit-line-clamp: 2;
  611. -webkit-box-orient: vertical;
  612. }
  613. /* 遮罩层 */
  614. .c_hide {
  615. display: none !important;
  616. }
  617. /* 授权弹窗 */
  618. .b-mask {
  619. position: fixed;
  620. width: 100%;
  621. height: 100vh;
  622. top: 0px;
  623. left: 0px;
  624. background-color: rgba(0, 0, 0, 0.5);
  625. z-index: 9999;
  626. display: flex;
  627. justify-content: center;
  628. align-items: center;
  629. }
  630. .b-mask-block {
  631. width: 80%;
  632. height: 180px;
  633. background-color: #fff;
  634. border-radius: 10px;
  635. display: flex;
  636. flex-direction: column;
  637. }
  638. .b-mask-content {
  639. flex: 1;
  640. box-sizing: border-box;
  641. padding: 10px;
  642. display: flex;
  643. flex-direction: column;
  644. justify-content: center;
  645. align-items: center;
  646. }
  647. .b-mask-footer {
  648. width: 100%;
  649. height: 50px;
  650. display: flex;
  651. align-items: center;
  652. border-top: 1px solid #EEEEEE;
  653. }
  654. .b-mask-cancel {
  655. flex: 1;
  656. display: flex;
  657. justify-content: center;
  658. align-items: center;
  659. color: #CCCCCC;
  660. }
  661. .b-mask-confirm {
  662. flex: 1;
  663. display: flex;
  664. justify-content: center;
  665. align-items: center;
  666. color: #28A1FF;
  667. }
  668. .b-line-middle {
  669. width: 1px;
  670. height: 30px;
  671. background-color: #ececec;
  672. }
  673. .b-mask-title {
  674. font-size: 20px;
  675. color: #333333;
  676. margin-top: 10px;
  677. font-weight: 600;
  678. }
  679. .b-mask-msg {
  680. flex: 1;
  681. display: flex;
  682. justify-content: center;
  683. align-items: center;
  684. box-sizing: border-box;
  685. padding: 0px 10px;
  686. color: #999999;
  687. font-size: 16px;
  688. line-height: 25px;
  689. }
  690. /* 授权弹窗 */
  691. /* 报名 */
  692. .b-mask-signup {
  693. position: fixed;
  694. width: 100%;
  695. height: 100vh;
  696. background-color: rgba(0, 0, 0, 0.5);
  697. top: 0px;
  698. left: 0px;
  699. z-index: 9999;
  700. display: flex;
  701. justify-content: center;
  702. align-items: center;
  703. }
  704. .b-mask-signup-block {
  705. width: 80%;
  706. height: 240px;
  707. background-color: #fff;
  708. border-radius: 10px;
  709. display: flex;
  710. flex-direction: column;
  711. }
  712. .b-mask-input {
  713. width: 100%;
  714. height: 50px;
  715. border-radius: 4px;
  716. overflow: hidden;
  717. margin-bottom: 10px;
  718. }
  719. .b-mask-input>input {
  720. width: 100%;
  721. height: 100%;
  722. background-color: #f5f5f5;
  723. box-sizing: border-box;
  724. padding: 0px 20px;
  725. font-size: 16px;
  726. }
  727. .b-mask-signup-cancel {
  728. flex: 1;
  729. display: flex;
  730. justify-content: center;
  731. align-items: center;
  732. color: #CCCCCC;
  733. }
  734. .b-mask-signup-confirm {
  735. flex: 1;
  736. display: flex;
  737. justify-content: center;
  738. align-items: center;
  739. color: #28A1FF;
  740. }
  741. /* 报价弹窗 */
  742. .pricelayerbox {
  743. display: block;
  744. width: 100%;
  745. height: 100%;
  746. position: fixed;
  747. top: 0;
  748. left: 0;
  749. right: 0;
  750. bottom: 0;
  751. z-index: 1000;
  752. background: rgba(0, 0, 0, 0.3);
  753. }
  754. .calcpricebox {
  755. width: 84%;
  756. max-width: 500px;
  757. height: auto;
  758. background: #FFFFFF;
  759. border-radius: 8px;
  760. position: absolute;
  761. top: 50%;
  762. left: 50%;
  763. transform: translateX(-50%) translateY(-50%);
  764. padding-bottom: 16px;
  765. }
  766. .pricetbg {
  767. display: block;
  768. width: 100%;
  769. }
  770. .p_close {
  771. position: absolute;
  772. top: 5px;
  773. right: 5px;
  774. width: 15px;
  775. height: 15px;
  776. z-index: 9;
  777. }
  778. .pricetext {
  779. font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
  780. font-weight: bold;
  781. font-size: 21px;
  782. color: #fff;
  783. line-height: 30px;
  784. position: absolute;
  785. top: 48px;
  786. left: 0;
  787. width: 100%;
  788. text-align: center;
  789. z-index: 8;
  790. padding-right: 12px;
  791. }
  792. .calcpricenum {
  793. justify-content: space-between;
  794. display: flex;
  795. margin: 15px auto 12px;
  796. width: 80%;
  797. height: 49px;
  798. background: #EFEFEF;
  799. box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.1600);
  800. border-radius: 4px;
  801. line-height: 49px;
  802. padding-left: 6px;
  803. padding-right: 16px;
  804. box-sizing: border-box;
  805. }
  806. .textbox {
  807. display: block;
  808. width: 12px;
  809. font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  810. font-size: 21px;
  811. color: #999;
  812. }
  813. .nowtextbox {
  814. color: #333;
  815. font-weight: bold;
  816. width: 13px;
  817. }
  818. .rightextbox {
  819. width: 12px;
  820. font-size: 12px;
  821. font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  822. color: #333333;
  823. line-height: 16px;
  824. position: absolute;
  825. top: 19px;
  826. right: 3px;
  827. }
  828. .pull-left {
  829. float: left;
  830. }
  831. .houseareabox {
  832. display: block;
  833. width: 80%;
  834. height: 36px;
  835. box-sizing: border-box;
  836. background: #FFFFFF;
  837. border-radius: 2px;
  838. opacity: 1;
  839. border: 1px solid #CCCCCC;
  840. margin: 0 auto 14px;
  841. padding: 0 30px;
  842. }
  843. .houseareabox img {
  844. display: block;
  845. width: 15px;
  846. height: 15px;
  847. position: absolute;
  848. left: 7px;
  849. top: 10px;
  850. }
  851. .houseareabox span {
  852. display: block;
  853. position: absolute;
  854. right: 10px;
  855. top: 0;
  856. line-height: 34px;
  857. }
  858. .houseareabox input {
  859. display: block;
  860. width: 100%;
  861. height: 100%;
  862. font-size: 14px;
  863. color: #333333;
  864. }
  865. .housemsgbox {
  866. display: flex;
  867. width: 80%;
  868. margin: 0 auto 14px;
  869. justify-content: space-between;
  870. }
  871. .housemsgbox select {
  872. display: block;
  873. width: 75px;
  874. height: 36px;
  875. background: #FFFFFF;
  876. border-radius: 2px;
  877. border: 1px solid #CCCCCC;
  878. position: relative;
  879. padding-left: 10px;
  880. }
  881. .phonebox {
  882. margin-bottom: 20px;
  883. }
  884. .phonebox img {
  885. display: block;
  886. width: 20px;
  887. height: 20px;
  888. position: absolute;
  889. top: 7px;
  890. left: 4px;
  891. margin: 0;
  892. }
  893. .calcpricebtn {
  894. display: block;
  895. width: 80%;
  896. height: 40px;
  897. background: #28A1FF;
  898. border-radius: 2px;
  899. opacity: 1;
  900. margin: 0 auto;
  901. line-height: 40px;
  902. font-size: 14px;
  903. font-weight: bold;
  904. color: #fff;
  905. border: unset;
  906. }
  907. input {
  908. border: unset;
  909. outline: none;
  910. }
  911. select {
  912. outline: none;
  913. color: #333333 !important;
  914. }
  915. .priceimg {
  916. display: block;
  917. position: fixed;
  918. right: 10px;
  919. bottom: 150px;
  920. width: 70px;
  921. z-index: 999;
  922. }
  923. .videopriceimg {
  924. position: relative;
  925. top: 0px;
  926. bottom: unset;
  927. right: 10px;
  928. width: 70px;
  929. }
  930. .relative {
  931. position: relative;
  932. }
  933. .calcpricebox input {
  934. padding-left: 0;
  935. }
  936. input::-webkit-outer-spin-button,
  937. input::-webkit-inner-spin-button {
  938. -webkit-appearance: none !important;
  939. margin: 0;
  940. }
  941. .showDsc {
  942. color: #fff;
  943. font-weight: 700;
  944. font-size: 14px;
  945. position: absolute;
  946. right: -20px;
  947. bottom: 2px;
  948. }
  949. .hideText {
  950. color: #fff;
  951. font-size: 14px;
  952. margin-left: 4px;
  953. }
  954. /* 设计师方案弹窗 */
  955. .communityMT {
  956. margin-top: 15px;
  957. }
  958. .designlayerbox {
  959. display: block;
  960. width: 100%;
  961. height: 100%;
  962. position: fixed;
  963. top: 0;
  964. left: 0;
  965. right: 0;
  966. bottom: 0;
  967. z-index: 1000;
  968. background: rgba(0, 0, 0, 0.3);
  969. }
  970. .calcdesignbox {
  971. width: 84%;
  972. height: auto;
  973. max-width: 500px;
  974. background: #FFFFFF;
  975. border-radius: 8px;
  976. position: absolute;
  977. top: 50%;
  978. left: 50%;
  979. transform: translateX(-50%) translateY(-50%);
  980. padding-bottom: 16px;
  981. }
  982. .d_close {
  983. position: absolute;
  984. top: 5px;
  985. right: 5px;
  986. width: 15px;
  987. height: 15px;
  988. z-index: 9;
  989. }
  990. .d_phonebox {
  991. margin-bottom: 20px;
  992. }
  993. .d_phonebox img {
  994. display: block;
  995. width: 20px;
  996. height: 20px;
  997. position: absolute;
  998. top: 7px;
  999. left: 4px;
  1000. margin: 0;
  1001. }
  1002. .designPlanGet {
  1003. display: block;
  1004. width: 80%;
  1005. height: 40px;
  1006. background: #D7BA86;
  1007. border-radius: 2px;
  1008. opacity: 1;
  1009. margin: 0 auto;
  1010. line-height: 40px;
  1011. font-size: 14px;
  1012. font-weight: bold;
  1013. color: #fff;
  1014. border: unset;
  1015. }
  1016. </style>
  1017. <body>
  1018. {if condition="$data.difference eq 1"}
  1019. <div class="pageStyle">
  1020. <div class="videoMsg">
  1021. <div class="videoDiv" id="mse"></div>
  1022. <div class="bgcolor">
  1023. <!-- <div class="signUpBtn">报名免费设计>></div> -->
  1024. <div class="videoTitle ellipsis">@{$data.company_name}</div>
  1025. <div class="videocontent ellipsisTwo">{$data.title}#{$data.desc}#<span class="hideText c_hide"></span>
  1026. </div>
  1027. <div class="showDsc">展开</div>
  1028. </div>
  1029. </div>
  1030. </div>
  1031. {else/}
  1032. <div class="pageStyle">
  1033. <div class="titbox fwbold font36 color384855 fontfpr">{$data.title}</div>
  1034. <div class="updateTime">{$data.updatetime}更新</div>
  1035. <div class="companyBox">
  1036. <div class="companyLogo">
  1037. {if condition="$data.company_logo"}
  1038. <img src="{$data.company_logo}" width="100%" height="100%" alt="">
  1039. {else/}
  1040. <img src="https://o.nczyzs.com/xcx/aaa/nonedatalogo.png?x-oss-process=image/resize,w_200" width="100%" height="100%" alt="">
  1041. {/if}
  1042. </div>
  1043. <div class="companyMsg">
  1044. <div>{$data.company_name}</div>
  1045. <div class="c_address">
  1046. <div class="c_addressName c_ellipsis">地址:{$data.company_address|default="暂未填写"}<span
  1047. class="c_hide_address c_hide">隐藏</span></div>
  1048. <span class="c_show_address">展开</span>
  1049. </div>
  1050. </div>
  1051. </div>
  1052. <div class="line"></div>
  1053. <div class="titleTips">描述</div>
  1054. <div class="msgbox">
  1055. {$data.desc}
  1056. {volist name="$data.pics" id="v"}
  1057. <div class="msgdiv">
  1058. <img class="width100 " src="{$v}" />
  1059. </div>
  1060. {/volist}
  1061. </div>
  1062. <div class="inputbox">
  1063. <img class="close" src="https://o.nczyzs.com/xcx/cancle.png" alt="">
  1064. <div class="titbox">报名咨询</div>
  1065. <div class="input">
  1066. <input type="text" id="name" placeholder="请输入您的姓名">
  1067. </div>
  1068. <div class="input">
  1069. <input type="text" id="mobile" placeholder="请输入您的手机号" maxlength="11">
  1070. </div>
  1071. <button type="button" id="baoming">我要报名</button>
  1072. </div>
  1073. </div>
  1074. {/if}
  1075. <div class="toastbox" style="display:none;"></div>
  1076. </body>
  1077. <script src="__STATIC__/js/jquery.min.js"></script>
  1078. <script src="https://mlz2.cn/js/jweixin-1.6.0.js"></script>
  1079. <script>
  1080. var scrollTop = 0;
  1081. var timestamps = 0;
  1082. $('.hideText').html('<<隐藏');
  1083. let dscStr = $('.videocontent').text();
  1084. if (dscStr.length > 40) {
  1085. $('.showDsc').removeClass('c_hide');
  1086. $('.hideText').removeClass('c_hide');
  1087. } else {
  1088. $('.showDsc').addClass('c_hide');
  1089. $('.hideText').addClass('c_hide');
  1090. }
  1091. $('.showDsc').click(() => {
  1092. $('.videocontent').removeClass('ellipsisTwo');
  1093. $('.showDsc').addClass('c_hide');
  1094. })
  1095. $('.videocontent').click(() => {
  1096. if (dscStr.length > 38) {
  1097. $('.videocontent').toggleClass('ellipsisTwo');
  1098. $('.showDsc').toggleClass('c_hide');
  1099. }
  1100. })
  1101. var type = "{$data.difference}";
  1102. if (type == 1) {
  1103. var posters = "{$data.cover}";
  1104. if (posters == null || posters == '') {
  1105. posters = "{$data.pics[0]}?x-oss-process=video/snapshot,t_100,f_jpg";
  1106. }
  1107. let player = new Player({
  1108. id: 'mse',
  1109. autoplay: true,
  1110. volume: 0.3,
  1111. url: '{$data.pics[0]}',
  1112. poster: posters,
  1113. 'x5-video-player-type': 'h5',
  1114. playsinline: true,
  1115. thumbnail: {
  1116. pic_num: 44,
  1117. width: 160,
  1118. height: 90,
  1119. col: 10,
  1120. row: 10,
  1121. },
  1122. lang: 'zh-cn',
  1123. fitVideoSize: 'fixWidth',
  1124. width: document.getElementsByTagName('body')[0].clientWidth,
  1125. whitelist: ['']
  1126. });
  1127. }
  1128. //关闭遮罩层
  1129. $('.maskClose').click(() => {
  1130. $('.a-mask').addClass('c_hide');
  1131. })
  1132. var baoming = false;
  1133. $('.rightbtn').click(function () {
  1134. $('.inputbox').show();
  1135. })
  1136. $('.inputbox .close').click(function () {
  1137. $('.inputbox').hide();
  1138. })
  1139. let addressStr = "{$data.company_address}";
  1140. if (addressStr.length < 17) {
  1141. $('.c_show_address').addClass('c_hide');
  1142. }
  1143. $('.c_show_address').click(() => {
  1144. $('.c_addressName').removeClass('c_ellipsis');
  1145. $('.c_show_address').addClass('c_hide');
  1146. $('.c_hide_address').removeClass('c_hide');
  1147. })
  1148. $('.c_hide_address').click(() => {
  1149. $('.c_show_address').removeClass('c_hide');
  1150. $('.c_addressName').addClass('c_ellipsis');
  1151. $('.c_hide_address').addClass('c_hide');
  1152. })
  1153. </script>
  1154. </html>