article.html 24 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>{$data.title}</title>
  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. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  9. <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
  10. <!-- 引入 WeUI CDN 链接 -->
  11. <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
  12. <style>
  13. html,
  14. body {
  15. display: block;
  16. width: 100%;
  17. height: 100%;
  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. * {
  28. margin: 0;
  29. padding: 0;
  30. border: unset;
  31. box-sizing: border-box;
  32. max-width: 100%;
  33. }
  34. input,
  35. button,
  36. textarea {
  37. outline: 0;
  38. }
  39. button {
  40. border: unset;
  41. }
  42. .left {
  43. float: left;
  44. }
  45. .right {
  46. float: right;
  47. }
  48. .clearfix:after {
  49. content: ".";
  50. display: block;
  51. height: 0;
  52. clear: both;
  53. visibility: hidden;
  54. }
  55. .ellipsis {
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. white-space: nowrap;
  59. }
  60. .ellipsisTwo {
  61. overflow: hidden;
  62. text-overflow: ellipsis;
  63. display: -webkit-box;
  64. -webkit-line-clamp: 2;
  65. -webkit-box-orient: vertical;
  66. }
  67. .bannerImg {
  68. display: block;
  69. width: 100%;
  70. }
  71. .contentBox {
  72. background-color: #ffffff;
  73. border-radius: 10px;
  74. padding: 16px 0px 0;
  75. position: relative;
  76. z-index: 2;
  77. margin-bottom: 50px;
  78. }
  79. .title {
  80. font-size: 20px;
  81. line-height: 32px;
  82. color: #222;
  83. font-family: PingFangSC-Regular,Source Han Sans CN DemiLight;
  84. text-align: center;
  85. margin-bottom: 14px;
  86. }
  87. .tagBox {
  88. margin: 10px 0 16px;
  89. font-size: 14px;
  90. color: #384855;
  91. margin-right: 12px;
  92. font-family: PingFangSC-Medium, Source Han Sans CN Medium;
  93. }
  94. .articlebox {
  95. display: block;
  96. font-family: PingFangSC-Medium, Source Han Sans CN Medium;
  97. font-size: 14px;
  98. line-height: 24rpx;
  99. color: #384855;
  100. padding-bottom: 20px;
  101. }
  102. .articlebox img {
  103. max-width: 100%;
  104. margin: 12px auto;
  105. height: auto !important;
  106. }
  107. footer {
  108. display: block;
  109. width: 100%;
  110. height: 49px;
  111. background-color: #ffffff;
  112. position: fixed;
  113. bottom: 0;
  114. left: 0;
  115. z-index: 99;
  116. box-shadow: 0 -2px 6px 0 rgba(0, 145, 255, 0.15);
  117. }
  118. .footerLeft {
  119. display: block;
  120. width: 50%;
  121. }
  122. footer .rightbtn {
  123. display: block;
  124. width: 100%;
  125. height: 49px;
  126. line-height: 49px;
  127. background-color: #ff7100;
  128. color: #ffffff;
  129. font-size: 16px;
  130. }
  131. .everyleftbox {
  132. width: 50%;
  133. height: 49px;
  134. position: relative;
  135. }
  136. .zanNumBox img {
  137. display: block;
  138. height: 17px;
  139. width: 16.5px;
  140. margin: 8px auto 5px;
  141. }
  142. .zanNumBox div {
  143. width: 100%;
  144. text-align: center;
  145. margin-top: 5px;
  146. font-size: 10px;
  147. color: #384855;
  148. }
  149. .shareBox div {
  150. width: 100%;
  151. text-align: center;
  152. margin-top: 5px;
  153. font-size: 10px;
  154. color: #384855;
  155. }
  156. .shareBox img {
  157. display: block;
  158. width: 16px;
  159. height: 16px;
  160. margin: 8px auto;
  161. }
  162. .inputbox {
  163. display: none;
  164. width: 80%;
  165. padding: 8px 16px 16px;
  166. position: fixed;
  167. top: 30%;
  168. left: 10%;
  169. z-index: 100;
  170. background-color: #ffffff;
  171. border-radius: 5px;
  172. box-shadow: 0 0px 8px 0 rgba(0, 145, 255, 0.3);
  173. }
  174. .inputbox img {
  175. position: absolute;
  176. top: -12px;
  177. right: -12px;
  178. width: 24px;
  179. }
  180. .inputbox .titbox {
  181. font-family: PingFang-SC-Medium, Source Han Sans CN Medium;
  182. font-size: 16px;
  183. text-align: center;
  184. line-height: 24px;
  185. margin-bottom: 10px;
  186. }
  187. .inputbox .input {
  188. display: block;
  189. width: 100%;
  190. margin-bottom: 16px;
  191. height: 44px;
  192. }
  193. .inputbox .input input {
  194. display: block;
  195. width: 100%;
  196. height: 100%;
  197. border: 1px solid #ddd;
  198. padding-left: 8px;
  199. }
  200. .inputbox button {
  201. width: 100%;
  202. height: 44px;
  203. color: #fff;
  204. background-color: #ff7100;
  205. border-radius: 22px;
  206. }
  207. body {
  208. padding-bottom: constant(safe-area-inset-bottom);
  209. padding-bottom: env(safe-area-inset-bottom);
  210. }
  211. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  212. footer {
  213. box-sizing: content-box;
  214. padding-bottom: constant(safe-area-inset-bottom);
  215. padding-bottom: env(safe-area-inset-bottom);
  216. }
  217. }
  218. /* 底部 */
  219. .footer {
  220. width: 100%;
  221. height: 60px;
  222. background-color: #fff;
  223. position: fixed;
  224. bottom: 0px;
  225. left: 0px;
  226. border-top: 1px solid #ccc;
  227. display: flex;
  228. box-sizing: border-box;
  229. padding: 10px;
  230. font-size: 15px;
  231. z-index: 99;
  232. }
  233. .f-left {
  234. flex: 2;
  235. display: flex;
  236. align-items: center;
  237. }
  238. .f-right {
  239. flex: 1;
  240. display: flex;
  241. align-items: center;
  242. justify-content: space-between;
  243. box-sizing: border-box;
  244. padding-right: 10px;
  245. }
  246. .f-msg {
  247. display: flex;
  248. flex-direction: column;
  249. box-sizing: border-box;
  250. padding-left: 10px;
  251. }
  252. .f-msg-company {
  253. font-size: 12px;
  254. color: #999999;
  255. line-height: 25px;
  256. }
  257. .f-wx-name {
  258. font-size: 12px;
  259. margin-top: 5px;
  260. }
  261. .f-mobile-name {
  262. font-size: 12px;
  263. margin-top: 8px;
  264. }
  265. .f-avatar {
  266. width: 40px;
  267. height: 40px;
  268. border-radius: 50% !important;
  269. }
  270. .f-mobile,
  271. .f-addwx {
  272. display: flex;
  273. flex-direction: column;
  274. align-items: center;
  275. justify-content: center;
  276. }
  277. .avatar-nameCard {
  278. display: flex;
  279. align-items: center;
  280. }
  281. /* 底部 */
  282. /* 公司 */
  283. .companyBox {
  284. width: 100%;
  285. height: 80px;
  286. padding: 0 10px 10px;
  287. display: flex;
  288. align-items: center;
  289. }
  290. .companyLogo {
  291. width: 40px;
  292. height: 40px;
  293. border-radius: 50%;
  294. overflow: hidden;
  295. }
  296. .companyMsg {
  297. flex: 1;
  298. display: flex;
  299. flex-direction: column;
  300. box-sizing: border-box;
  301. padding: 0px 10px;
  302. overflow: hidden;
  303. }
  304. .c_address {
  305. margin-top: 10px;
  306. font-size: 12px;
  307. color: #999999;
  308. display: flex;
  309. }
  310. .c_addressName {
  311. flex: 1;
  312. }
  313. .c_ellipsis {
  314. overflow: hidden;
  315. white-space: nowrap;
  316. text-overflow: ellipsis;
  317. }
  318. .c_show_address,
  319. .c_hide_address {
  320. color: #28A1FF;
  321. }
  322. .c_hide {
  323. display: none !important;
  324. }
  325. /* 公司 */
  326. .coverBox {
  327. width: 100%;
  328. max-height: 500px;
  329. background-color: #ccc;
  330. overflow: hidden;
  331. }
  332. .coverBox img {
  333. width: 100%;
  334. }
  335. .titleTips {
  336. border-left: 5px solid #333333;
  337. box-sizing: border-box;
  338. padding-left: 5px;
  339. color: #333333;
  340. font-weight: bold;
  341. margin: 10px 5px;
  342. font-size: 18px;
  343. height: 20px;
  344. line-height: 20px;
  345. }
  346. .line {
  347. width: 100%;
  348. height: 10px;
  349. background-color: #f6f6f6;
  350. }
  351. .boxStyle {
  352. padding: 0px 5px;
  353. }
  354. .fwbold {
  355. font-weight: bold;
  356. }
  357. /* 遮罩层 */
  358. .a-mask {
  359. position: fixed;
  360. width: 100%;
  361. height: 100vh;
  362. z-index: 99999;
  363. top: 0px;
  364. left: 0px;
  365. background-color: rgba(0, 0, 0, 0.5);
  366. display: flex;
  367. justify-content: center;
  368. align-items: center;
  369. }
  370. .a-mask-block {
  371. width: 80%;
  372. height: 300px;
  373. background-color: #fff;
  374. border-radius: 4px;
  375. box-sizing: border-box;
  376. padding: 10px;
  377. display: flex;
  378. flex-direction: column;
  379. justify-content: center;
  380. align-items: center;
  381. position: relative;
  382. }
  383. .a-mask-qr {
  384. width: 220px;
  385. height: 220px;
  386. padding: 10px;
  387. }
  388. .a-mask-qr img {
  389. display: block;
  390. margin: 0 auto;
  391. }
  392. .downloadwx {
  393. height: 30px;
  394. color: #28A1FF;
  395. border: none;
  396. line-height: 30px;
  397. border-radius: 4px;
  398. background-color: #fff;
  399. }
  400. .maskClose {
  401. width: 24px;
  402. height: 24px;
  403. position: absolute;
  404. top: -10px;
  405. right: -10px;
  406. background-color: #fff;
  407. border-radius: 50%;
  408. display: flex;
  409. justify-content: center;
  410. align-items: center;
  411. }
  412. /* 遮罩层 */
  413. /* 授权弹窗 */
  414. .b-mask {
  415. position: fixed;
  416. width: 100%;
  417. height: 100vh;
  418. top: 0px;
  419. left: 0px;
  420. background-color: rgba(0, 0, 0, 0.5);
  421. z-index: 9999;
  422. display: flex;
  423. justify-content: center;
  424. align-items: center;
  425. }
  426. .b-mask-block {
  427. width: 80%;
  428. height: 180px;
  429. background-color: #fff;
  430. border-radius: 10px;
  431. display: flex;
  432. flex-direction: column;
  433. }
  434. .b-mask-content {
  435. flex: 1;
  436. box-sizing: border-box;
  437. padding: 10px;
  438. display: flex;
  439. flex-direction: column;
  440. justify-content: center;
  441. align-items: center;
  442. }
  443. .b-mask-footer {
  444. width: 100%;
  445. height: 50px;
  446. display: flex;
  447. align-items: center;
  448. border-top: 1px solid #EEEEEE;
  449. }
  450. .b-mask-cancel {
  451. flex: 1;
  452. display: flex;
  453. justify-content: center;
  454. align-items: center;
  455. color: #CCCCCC;
  456. }
  457. .b-mask-confirm {
  458. flex: 1;
  459. display: flex;
  460. justify-content: center;
  461. align-items: center;
  462. color: #28A1FF;
  463. }
  464. .b-line-middle {
  465. width: 1px;
  466. height: 30px;
  467. background-color: #ececec;
  468. }
  469. .b-mask-title {
  470. font-size: 20px;
  471. color: #333333;
  472. margin-top: 10px;
  473. font-weight: 600;
  474. }
  475. .b-mask-msg {
  476. flex: 1;
  477. display: flex;
  478. justify-content: center;
  479. align-items: center;
  480. box-sizing: border-box;
  481. padding: 0px 10px;
  482. color: #999999;
  483. font-size: 16px;
  484. line-height: 25px;
  485. }
  486. /* 授权弹窗 */
  487. /* 报名 */
  488. .b-mask-signup {
  489. position: fixed;
  490. width: 100%;
  491. height: 100vh;
  492. background-color: rgba(0, 0, 0, 0.5);
  493. top: 0px;
  494. left: 0px;
  495. z-index: 9999;
  496. display: flex;
  497. justify-content: center;
  498. align-items: center;
  499. }
  500. .b-mask-signup-block {
  501. width: 80%;
  502. height: 240px;
  503. background-color: #fff;
  504. border-radius: 10px;
  505. display: flex;
  506. flex-direction: column;
  507. }
  508. .b-mask-input {
  509. width: 100%;
  510. height: 50px;
  511. border-radius: 4px;
  512. overflow: hidden;
  513. margin-bottom: 10px;
  514. }
  515. .b-mask-input>input {
  516. width: 100%;
  517. height: 100%;
  518. background-color: #f5f5f5;
  519. box-sizing: border-box;
  520. padding: 0px 20px;
  521. font-size: 16px;
  522. }
  523. .b-mask-signup-cancel {
  524. flex: 1;
  525. display: flex;
  526. justify-content: center;
  527. align-items: center;
  528. color: #CCCCCC;
  529. }
  530. .b-mask-signup-confirm {
  531. flex: 1;
  532. display: flex;
  533. justify-content: center;
  534. align-items: center;
  535. color: #28A1FF;
  536. }
  537. /* 报名 */
  538. /* 头像 */
  539. .avatar-nameCard {
  540. display: flex;
  541. align-items: center;
  542. }
  543. .avatarBox {
  544. position: fixed;
  545. width: 60px;
  546. height: 60px;
  547. bottom: 110px;
  548. right: 20px;
  549. display: flex;
  550. flex-direction: column;
  551. justify-content: center;
  552. align-items: center;
  553. z-index: 9999;
  554. }
  555. .avatarImage {
  556. width: 50px;
  557. height: 50px;
  558. border-radius: 50%;
  559. border: 2px solid #28A1FF;
  560. overflow: hidden;
  561. }
  562. .avatarText {
  563. padding: 3px 5px;
  564. background-color: #28A1FF;
  565. font-size: 10px;
  566. color: #fff;
  567. border-radius: 4px;
  568. margin-top: -13px;
  569. }
  570. .m_hide {
  571. display: none !important;
  572. }
  573. /* 头像 */
  574. .toastbox {
  575. display: block;
  576. position: fixed;
  577. top: 50%;
  578. left: 50%;
  579. transform: translateX(-50%) translateY(-50%);
  580. background-color: rgba(0, 0, 0, 0.7);
  581. color: #fff;
  582. z-index: 999999 !important;
  583. padding: 5px 10px;
  584. /* font-weight: bold; */
  585. font-size: 14px;
  586. /* box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.3); */
  587. line-height: 24px;
  588. border-radius: 4px;
  589. max-width: 80%;
  590. text-align: center;
  591. }
  592. /* 报价弹窗 */
  593. .pricelayerbox {
  594. display: block;
  595. width: 100%;
  596. height: 100%;
  597. position: fixed;
  598. top: 0;
  599. left: 0;
  600. right: 0;
  601. bottom: 0;
  602. z-index: 1000;
  603. background: rgba(0, 0, 0, 0.3);
  604. }
  605. .calcpricebox {
  606. width: 84%;
  607. height: auto;
  608. max-width: 500px;
  609. background: #FFFFFF;
  610. border-radius: 8px;
  611. position: absolute;
  612. top: 50%;
  613. left: 50%;
  614. transform: translateX(-50%) translateY(-50%);
  615. padding-bottom: 16px;
  616. }
  617. .pricetbg {
  618. display: block;
  619. width: 100%;
  620. }
  621. .p_close {
  622. position: absolute;
  623. top: 5px;
  624. right: 5px;
  625. width: 15px;
  626. height: 15px;
  627. z-index: 9;
  628. }
  629. .pricetext {
  630. font-family: PingFangSC-Regular, Source Han Sans CN DemiLight;
  631. font-weight: bold;
  632. font-size: 21px;
  633. color: #fff;
  634. line-height: 30px;
  635. position: absolute;
  636. top: 48px;
  637. left: 0;
  638. width: 100%;
  639. text-align: center;
  640. z-index: 8;
  641. padding-right: 12px;
  642. }
  643. .calcpricenum {
  644. justify-content: space-between;
  645. display: flex;
  646. margin: 15px auto 12px;
  647. width: 80%;
  648. height: 49px;
  649. background: #EFEFEF;
  650. box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.1600);
  651. border-radius: 4px;
  652. line-height: 49px;
  653. padding-left: 6px;
  654. padding-right: 16px;
  655. box-sizing: border-box;
  656. }
  657. .textbox {
  658. display: block;
  659. width: 12px;
  660. font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  661. font-size: 21px;
  662. color: #999;
  663. }
  664. .nowtextbox {
  665. color: #333;
  666. font-weight: bold;
  667. width: 13px;
  668. }
  669. .rightextbox {
  670. width: 12px;
  671. font-size: 12px;
  672. font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  673. color: #333333;
  674. line-height: 16px;
  675. position: absolute;
  676. top: 19px;
  677. right: 3px;
  678. }
  679. .pull-left {
  680. float: left;
  681. }
  682. .houseareabox {
  683. display: block;
  684. width: 80%;
  685. height: 36px;
  686. box-sizing: border-box;
  687. background: #FFFFFF;
  688. border-radius: 2px;
  689. opacity: 1;
  690. border: 1px solid #CCCCCC;
  691. margin: 0 auto 14px;
  692. padding: 0 30px;
  693. }
  694. .houseareabox img {
  695. display: block;
  696. width: 15px;
  697. height: 15px;
  698. position: absolute;
  699. left: 7px;
  700. top: 10px;
  701. }
  702. .houseareabox span {
  703. display: block;
  704. position: absolute;
  705. right: 10px;
  706. top: 0;
  707. line-height: 34px;
  708. }
  709. .houseareabox input {
  710. display: block;
  711. width: 100%;
  712. height: 100%;
  713. font-size: 14px;
  714. color: #333333;
  715. }
  716. .housemsgbox {
  717. display: flex;
  718. width: 80%;
  719. margin: 0 auto 14px;
  720. justify-content: space-between;
  721. }
  722. .housemsgbox select {
  723. display: block;
  724. width: 75px;
  725. height: 36px;
  726. background: #FFFFFF;
  727. border-radius: 2px;
  728. border: 1px solid #CCCCCC;
  729. position: relative;
  730. padding-left: 10px;
  731. }
  732. .phonebox {
  733. margin-bottom: 20px;
  734. }
  735. .phonebox img {
  736. display: block;
  737. width: 20px;
  738. height: 20px;
  739. position: absolute;
  740. top: 7px;
  741. left: 4px;
  742. margin: 0;
  743. }
  744. .calcpricebtn {
  745. display: block;
  746. width: 80%;
  747. height: 40px;
  748. background: #28A1FF;
  749. border-radius: 2px;
  750. opacity: 1;
  751. margin: 0 auto;
  752. line-height: 40px;
  753. font-size: 14px;
  754. font-weight: bold;
  755. color: #fff;
  756. border: unset;
  757. }
  758. .designPlanGet {
  759. display: block;
  760. width: 80%;
  761. height: 40px;
  762. background: #D7BA86;
  763. border-radius: 2px;
  764. opacity: 1;
  765. margin: 0 auto;
  766. line-height: 40px;
  767. font-size: 14px;
  768. font-weight: bold;
  769. color: #fff;
  770. border: unset;
  771. }
  772. input {
  773. border: unset;
  774. outline: none;
  775. }
  776. select {
  777. outline: none;
  778. color: #333333 !important;
  779. }
  780. .priceimg {
  781. display: block;
  782. position: fixed;
  783. right: 10px;
  784. bottom: 150px;
  785. width: 70px;
  786. z-index: 999;
  787. }
  788. .relative {
  789. position: relative;
  790. }
  791. .calcpricebox input {
  792. padding-left: 0;
  793. }
  794. input::-webkit-outer-spin-button,
  795. input::-webkit-inner-spin-button {
  796. -webkit-appearance: none !important;
  797. margin: 0;
  798. }
  799. /* 设计师方案弹窗 */
  800. .communityMT {
  801. margin-top: 15px;
  802. }
  803. .designlayerbox {
  804. display: block;
  805. width: 100%;
  806. height: 100%;
  807. position: fixed;
  808. top: 0;
  809. left: 0;
  810. right: 0;
  811. bottom: 0;
  812. z-index: 1000;
  813. background: rgba(0, 0, 0, 0.3);
  814. }
  815. .calcdesignbox {
  816. width: 84%;
  817. height: auto;
  818. max-width: 500px;
  819. background: #FFFFFF;
  820. border-radius: 8px;
  821. position: absolute;
  822. top: 50%;
  823. left: 50%;
  824. transform: translateX(-50%) translateY(-50%);
  825. padding-bottom: 16px;
  826. }
  827. .d_close {
  828. position: absolute;
  829. top: 5px;
  830. right: 5px;
  831. width: 15px;
  832. height: 15px;
  833. z-index: 9;
  834. }
  835. .d_phonebox {
  836. margin-bottom: 20px;
  837. }
  838. .d_phonebox img {
  839. display: block;
  840. width: 20px;
  841. height: 20px;
  842. position: absolute;
  843. top: 7px;
  844. left: 4px;
  845. margin: 0;
  846. }
  847. </style>
  848. </head>
  849. <body>
  850. <div class="pageStyle">
  851. <div class="contentBox">
  852. <div class="boxStyle">
  853. <div class="title fwbold">{$data.title}</div>
  854. <div class="companyBox">
  855. <div class="companyLogo">
  856. {if condition="$data.company_logo"/}
  857. <img src="{$data.company_logo}" width="100%" height="100%" alt="">
  858. {else/}
  859. <img src="https://o.nczyzs.com/xcx/aaa/nonedatalogo.png?x-oss-process=image/resize,w_200" width="100%"
  860. height="100%" alt="">
  861. {/if}
  862. </div>
  863. <div class="companyMsg">
  864. <div>{$data.company_name}</div>
  865. <div class="c_address">
  866. <div class="c_addressName c_ellipsis">地址:{$data.company_address|default="暂未填写"}<span
  867. class="c_hide_address c_hide">隐藏</span></div>
  868. <span class="c_show_address">展开</span>
  869. </div>
  870. </div>
  871. </div>
  872. </div>
  873. <div class="line"></div>
  874. <div class="titleTips">详情</div>
  875. <div class="boxStyle">
  876. <div class="articlebox">{$data.content|raw}</div>
  877. </div>
  878. </div>
  879. </div>
  880. <div class="toastbox" style="display:none;"></div>
  881. </body>
  882. <script src="__STATIC__/js/jquery.min.js"></script>
  883. <script src="https://mlz2.cn/js/jweixin-1.6.0.js"></script>
  884. <script>
  885. var vConsole = new VConsole();
  886. let addressStr = "{$data.company_address}";
  887. if (addressStr.length < 17) {
  888. $('.c_show_address').addClass('c_hide');
  889. }
  890. $('.c_show_address').click(() => {
  891. $('.c_addressName').removeClass('c_ellipsis');
  892. $('.c_show_address').addClass('c_hide');
  893. $('.c_hide_address').removeClass('c_hide');
  894. })
  895. $('.c_hide_address').click(() => {
  896. $('.c_show_address').removeClass('c_hide');
  897. $('.c_addressName').addClass('c_ellipsis');
  898. $('.c_hide_address').addClass('c_hide');
  899. })
  900. </script>
  901. </html>