decorateguidemsg.wxss 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632
  1. .image-box {
  2. width: 100%;
  3. height: 450rpx;
  4. overflow: hidden;
  5. position: relative;
  6. }
  7. .vr-box {
  8. width: 120rpx;
  9. height: 65rpx;
  10. position: absolute;
  11. z-index: 9;
  12. top: 50%;
  13. left: 50%;
  14. transform: translate(-50%, -50%);
  15. color: #fff;
  16. font-size: 36rpx;
  17. }
  18. .vr-box > image {
  19. width: 100%;
  20. }
  21. .image-box image {
  22. width: 100%;
  23. min-height: 100%;
  24. }
  25. .switchTab {
  26. position: absolute;
  27. max-width: 80%;
  28. height: 56rpx;
  29. background-color: rgba(255, 255, 255, 0.6);
  30. color: #333333;
  31. z-index: 999;
  32. bottom: 20rpx;
  33. left: 50%;
  34. transform: translateX(-50%);
  35. border-radius: 28rpx;
  36. display: flex;
  37. align-items: center;
  38. }
  39. .switchTab>view {
  40. width: 130rpx;
  41. height: 100%;
  42. display: flex;
  43. justify-content: center;
  44. align-items: center;
  45. font-size: 24rpx;
  46. }
  47. .activeTab {
  48. background-color: #249EFB;
  49. border-radius: 35rpx;
  50. color: #fff;
  51. }
  52. .titbox{
  53. position: fixed;
  54. width: 100%;
  55. box-sizing: border-box;
  56. z-index: 100;
  57. overflow: hidden;
  58. }
  59. .cover{
  60. display: block;
  61. width: 100%;
  62. height: auto;
  63. min-height: 200rpx;
  64. }
  65. .saleperson{
  66. display: block;
  67. width: 92%;
  68. height: 160rpx;
  69. background-color: #ffffff;
  70. overflow: hidden;
  71. border-radius: 10rpx;
  72. position: absolute;
  73. top:20rpx;
  74. left: 4%;
  75. z-index: 2;
  76. padding: 31rpx 24rpx;
  77. box-sizing: border-box;
  78. }
  79. .saleperson .headimgbox{
  80. display: block;
  81. width: 98rpx;
  82. height: 98rpx;
  83. border-radius: 50%;
  84. border: 4rpx solid #347af6;
  85. }
  86. .saleperson .headimgbox image{
  87. display: block;
  88. width: 100%;
  89. height: 100%;
  90. border-radius: 50%;
  91. }
  92. .saleperson .phonebox{
  93. display: block;
  94. }
  95. .phonebox .phoneimg{
  96. display: block;
  97. width: 60rpx;
  98. height: 60rpx;
  99. background-color: rgba(52, 122, 246, 0.2);
  100. border-radius: 50%;
  101. margin: 0 auto 4rpx;
  102. }
  103. .phonebox image{
  104. display: block;
  105. width: 32rpx;
  106. height: 32rpx;
  107. margin: 14rpx auto;
  108. }
  109. .personmsgbox{
  110. margin-left: 16rpx;
  111. margin-top: 8rpx;
  112. }
  113. .titbox .titbg{
  114. display: block;
  115. width:100%;
  116. position: absolute;
  117. top: 0;
  118. left:0;
  119. }
  120. .wlast{
  121. position: absolute;
  122. display: block;
  123. width:20rpx;
  124. height: 36rpx;
  125. left: 20rpx;
  126. bottom: 16rpx;
  127. z-index: 10;
  128. }
  129. .titmsg{
  130. padding: 30rpx 10rpx 0 10rpx;
  131. }
  132. .designerbox{
  133. display: block;
  134. width: 670rpx;
  135. background-color: #f7f7f7;
  136. border-radius: 10rpx;
  137. box-sizing: border-box;
  138. padding: 30rpx;
  139. margin:28rpx auto 0;
  140. }
  141. image.designerimg{
  142. display: block;
  143. width: 80rpx;
  144. height: 80rpx;
  145. border-radius: 40rpx;
  146. }
  147. .designermsgbox{
  148. margin-left: 32rpx;
  149. }
  150. .qrcodeimg{
  151. display:block;
  152. width: 80rpx;
  153. height: 80rpx;
  154. }
  155. .designstylebox{
  156. width: 450rpx;
  157. }
  158. .orderbtn{
  159. display: block;
  160. width: 154rpx;
  161. height: 80rpx;
  162. line-height: 80rpx;
  163. border-radius: 40rpx;
  164. background-image: linear-gradient(180deg, #4ACDFD 0%, #249EFB 100%);
  165. }
  166. .casemsgbox{
  167. display: block;
  168. background-color: #FFFFFF;
  169. position: relative;
  170. z-index: 1;
  171. }
  172. .casemsgbox{
  173. width: 730rpx;
  174. margin: 40rpx auto;
  175. background-color: #ffffff;
  176. border-radius: 10rpx;
  177. border: 2rpx solid #ececec;
  178. box-sizing: border-box;
  179. padding: 40rpx 20rpx;
  180. }
  181. .everycasemsg{
  182. padding-left: 32rpx;
  183. box-sizing: border-box;
  184. }
  185. .casepricebox view{
  186. height:32rpx;
  187. overflow:hidden;
  188. margin-top:24rpx;
  189. }
  190. .configtitbox{
  191. display: block;
  192. background: #F0F4F7;
  193. width:100%;
  194. height:88rpx;
  195. padding-left: 20rpx;
  196. position: relative;
  197. }
  198. .configtitbox image{
  199. display: block;
  200. width: 32rpx;
  201. height: 32rpx;
  202. margin-right: 16rpx;
  203. position: relative;
  204. top: 28rpx;
  205. }
  206. .configmsg{
  207. padding: 24rpx 10rpx 32rpx;
  208. font-size: 24rpx;
  209. }
  210. .setimebox{
  211. padding: 0rpx 10rpx 32rpx;
  212. color: #b8b8b8;
  213. }
  214. .configmsg image{
  215. max-width: 100%;
  216. height: auto;
  217. }
  218. .fbg{
  219. display: block;
  220. width: 100%;
  221. height:16rpx;
  222. background: #F0F4F7;
  223. }
  224. .switchview{
  225. display: block;
  226. padding: 40rpx;
  227. }
  228. .switchbox{
  229. display: block;
  230. width: 216rpx;
  231. height: 80rpx;
  232. border: 2rpx solid #9DB6CF;
  233. line-height: 76rpx;
  234. border-radius: 40rpx;
  235. overflow: hidden;
  236. }
  237. .switchbox image{
  238. display: block;
  239. width: 16rpx;
  240. height: 28rpx;
  241. position: relative;
  242. top:24rpx;
  243. }
  244. .designcasebox{
  245. display: block;
  246. width: 100%;
  247. background: #ffffff;
  248. padding-top: 32rpx;
  249. border-top: 1px solid #eaeaea;
  250. padding-bottom: 140rpx; /* ios < 11.2*/
  251. }
  252. .designcasetit{
  253. padding: 0 20rpx;
  254. }
  255. .designcasetit view{
  256. /* margin-left: 24rpx; */
  257. }
  258. /* 装修案例 */
  259. .caselistbox{
  260. padding: 24rpx 20rpx 0;
  261. }
  262. .everycasebox{
  263. width: 100%;
  264. box-shadow: 0 4rpx 20rpx 0 rgba(36,158,251,0.26);
  265. border-radius: 10rpx;
  266. overflow: hidden;
  267. margin-bottom: 20rpx;
  268. }
  269. .leftcasebox{
  270. margin-right: 20rpx;
  271. }
  272. .leftcasebox,.rightcasebox{
  273. width: 345rpx;
  274. overflow: initial;
  275. }
  276. .caselistbox .everycasebox .imgbox image{
  277. display: block;
  278. width: 100%;
  279. }
  280. .casesharenum{
  281. position: absolute;
  282. right:0;
  283. top: 12rpx;
  284. height: 40rpx;
  285. border-radius: 24rpx 0 0 24rpx;
  286. opacity: 0.7;
  287. background: #384855;
  288. color: #B6CADE;
  289. padding-left: 14rpx;
  290. padding-right: 8rpx;
  291. }
  292. .caselistbox .everycasebox .imgbox .casesharenum image{
  293. display: block;
  294. width: 22rpx;
  295. height: 18rpx;
  296. margin-right:4rpx;
  297. position: relative;
  298. top: 11rpx;
  299. }
  300. .caselistbox .everycasebox .imgbox .casesharenum view{
  301. line-height: 40rpx;
  302. }
  303. .casehousemsgbox{
  304. line-height: 32rpx;
  305. margin-top: 6rpx;
  306. font-size: 22rpx;
  307. }
  308. .footer{
  309. display: block;
  310. width: 100%;
  311. height: 98rpx;
  312. box-shadow: 0 -4rpx 12rpx 0 rgba(0,145,255,0.15);
  313. background: #FFFFFF;
  314. position: fixed;
  315. left: 0;
  316. bottom: 0;
  317. z-index: 100;
  318. }
  319. .collectbox image{
  320. display: block;
  321. width:40rpx;
  322. height: 40rpx;
  323. margin: 10rpx auto 6rpx;
  324. }
  325. button.friendbox{
  326. background-color: #FFFFFF;
  327. }
  328. .friendbox image{
  329. display: block;
  330. width:48rpx;
  331. height: 40rpx;
  332. margin: 10rpx auto 6rpx;
  333. }
  334. button.sharebtnbox{
  335. display: block;
  336. margin-left: 16rpx;
  337. background: #249EFB;
  338. height: 80rpx;
  339. line-height: 80rpx;
  340. border-radius: 40rpx;
  341. position: relative;
  342. top: 9rpx;
  343. width: 340rpx;
  344. }
  345. .sharebtnbox image{
  346. display: block;
  347. width: 46rpx;
  348. height: 40rpx;
  349. position: relative;
  350. margin-right: 8rpx;
  351. top:20rpx;
  352. }
  353. .sharebtnbox .text{
  354. line-height: 80rpx;
  355. color: #FFFFFF;
  356. }
  357. .lookmore{
  358. display: block;
  359. width: 444rpx;
  360. height: 88rpx;
  361. border: 2rpx solid #9DB6CF;
  362. border-radius: 40rpx;
  363. line-height: 84rpx;
  364. margin: 40rpx auto;
  365. }
  366. .footerBox{
  367. display: block;
  368. width: 100%;
  369. height: 98rpx;
  370. position: fixed;
  371. bottom: 0;
  372. left: 0;
  373. background-color: #fff;
  374. box-shadow: 0 -6rpx 8rpx 0 rgba(56,72,85,0.23);
  375. z-index: 99;
  376. }
  377. .rightfooter{
  378. display: inline-block;
  379. width: 300rpx;
  380. height: 100%;
  381. color: #fff;
  382. background: #245FFB;
  383. }
  384. .rightfooter .righttoptext{
  385. font-size: 40rpx;
  386. line-height: 40rpx;
  387. margin-top: 12rpx;
  388. position: relative;
  389. }
  390. .rightfooter .righttoptext image{
  391. display: inline-block;
  392. width:28rpx;
  393. height: 34rpx;
  394. position: relative;
  395. top: -6rpx;
  396. margin-left: 4rpx;
  397. }
  398. .leftmobileBox,.centerprice{
  399. display: inline-block;
  400. width: 225rpx;
  401. height: 100%;
  402. }
  403. .leftmobileBox image,.centerprice image{
  404. width: 48rpx;
  405. height: 48rpx;
  406. margin: 10rpx auto 0;
  407. }
  408. .leftmobileBox view,.centerprice view{
  409. font-size: 22rpx;
  410. color: #384855;
  411. line-height: 32rpx;
  412. }
  413. .rightbottomText{
  414. display: block;
  415. position: relative;
  416. font-size: 28rpx;
  417. line-height: 34rpx;
  418. }
  419. .casemsgbox1 .designerbox {
  420. padding: 0;
  421. width: auto;
  422. margin: 0;
  423. background: #fff;
  424. }
  425. .casemsgbox1{
  426. padding: 20rpx 10rpx 30rpx;
  427. }
  428. .updateBox {
  429. width: 730rpx;
  430. height: auto;
  431. overflow: hidden;
  432. padding: 20rpx;
  433. background-color: #EFF4F8;
  434. display: flex;
  435. align-items: center;
  436. margin: 20rpx auto 0rpx;
  437. }
  438. .u-img-box {
  439. width: 80rpx;
  440. height: 80rpx;
  441. border-radius: 50%;
  442. overflow: hidden;
  443. }
  444. .u-img-box image {
  445. width: 100%;
  446. height: 100%;
  447. }
  448. .u-company {
  449. overflow: hidden;
  450. box-sizing: border-box;
  451. padding: 0rpx 20rpx;
  452. }
  453. .u-company-name {
  454. font-size: 30rpx;
  455. color: #333333;
  456. }
  457. .u-company-address {
  458. color: #A0BDD4;
  459. font-size: 24rpx;
  460. width: 100%;
  461. display: flex;
  462. }
  463. .address-text {
  464. flex: 1;
  465. }
  466. .address-ellipsis {
  467. overflow: hidden;
  468. white-space: nowrap;
  469. text-overflow: ellipsis;
  470. }
  471. .address-show {
  472. color: #28A1FF;
  473. }
  474. .u-button {
  475. width: 120rpx;
  476. height: 60rpx;
  477. background-color: #28A1FF;
  478. color: #fff;
  479. font-size: 24rpx;
  480. font-style: normal;
  481. line-height: 60rpx !important;
  482. }
  483. .flex-sub {
  484. flex: 1;
  485. }
  486. .u-position {
  487. font-size: 20rpx;
  488. color: #333333;
  489. }
  490. .caseimgbox{
  491. display: block;
  492. border-top: 1px solid #eaeaea;
  493. width: 100%;
  494. padding: 40rpx;
  495. }
  496. .everycaseimgbox{
  497. display: block;
  498. width: 670rpx;
  499. border: 1px solid #eaeaea;
  500. border-radius: 10rpx;
  501. margin-bottom: 40rpx;
  502. overflow: hidden;
  503. }
  504. .caseimg{
  505. display: block;
  506. width: 100%;
  507. height: auto;
  508. }
  509. .casetextbox{
  510. display: block;
  511. background-color: #fff;
  512. padding: 32rpx 40rpx;
  513. }
  514. /* 视频案例 */
  515. .videocasebox{
  516. font-size: 36rpx;
  517. padding: 20rpx 30rpx;
  518. }
  519. .vidoetit{
  520. font-weight: bold;
  521. padding-left: 22rpx;
  522. line-height: 44rpx;
  523. position: relative;
  524. }
  525. .vidoetit::after{
  526. display: block;
  527. content: ' ';
  528. width: 8rpx;
  529. height: 30rpx;
  530. background: #333333;
  531. border-radius: 2rpx;
  532. position: absolute;
  533. left: 0;
  534. top: 7rpx;
  535. }
  536. .videoBox{
  537. display: block;
  538. width: 100%;
  539. height: 450rpx;
  540. background: #333333;
  541. }
  542. /* 案例详情 */
  543. .casetit{
  544. display: block;
  545. width: 100%;
  546. padding: 20rpx 10rpx 0;
  547. }
  548. .casetit view{
  549. margin-right: 40rpx;
  550. padding-bottom: 10rpx;
  551. }
  552. .nowtitbox{
  553. font-size: 36rpx;
  554. font-weight: bold;
  555. position: relative;
  556. }
  557. .nowtitbox::before{
  558. content: ' ';
  559. display: block;
  560. width: 12rpx;
  561. height: 4rpx;
  562. position: absolute;
  563. bottom: 0;
  564. left: 50%;
  565. transform-origin: 100% 0;
  566. transform: translateX(-150%) rotate(-30deg);
  567. background-color: #333333;
  568. }
  569. .nowtitbox::after{
  570. content: ' ';
  571. display: block;
  572. width: 12rpx;
  573. height: 4rpx;
  574. position: absolute;
  575. bottom: 0;
  576. left: 50%;
  577. background-color: #333333;
  578. transform-origin: 0 0;
  579. transform: translateX(-50%) rotate(390deg);
  580. }
  581. .pricebtnimg{
  582. display: block;
  583. position: fixed;
  584. right: 20rpx;
  585. bottom:300rpx;
  586. width: 140rpx;
  587. height: 140rpx;
  588. z-index: 9;
  589. }
  590. .interVrStyle {
  591. position: absolute;
  592. width: 90rpx !important;
  593. top: 50%;
  594. left: 50%;
  595. transform: translate(-50%,-50%);
  596. }
  597. .configmsg image {
  598. display: block !important;
  599. border-radius: 0rpx !important;
  600. }