company_strength.html 27 KB

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