goods.wxss 21 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375
  1. view,text{
  2. color:#09AFFF;
  3. }
  4. .myqr{
  5. position: absolute;
  6. z-index: 999;
  7. width: 100%;
  8. text-align: center;
  9. height: auto;
  10. margin-top: 50rpx;
  11. }
  12. .myqr .cancel{
  13. width: 60rpx;
  14. height: 60rpx;
  15. margin-top: 30rpx;
  16. margin-left: 480rpx;
  17. }
  18. .myqr .img{
  19. width: 480rpx;
  20. }
  21. .myqr .btn{
  22. width: 120rpx;
  23. height: 120rpx;
  24. line-height: 120rpx;
  25. margin-top: 20rpx;
  26. padding: 30rpx;
  27. background: #ffffff;
  28. border-radius:60rpx;
  29. }
  30. .container {
  31. margin-bottom: 100rpx;
  32. }
  33. .user_column_item_image {
  34. width: 50rpx;
  35. height: 50rpx;
  36. margin-right: 26rpx;
  37. margin-top: 25rpx;
  38. }
  39. .flexb {
  40. width: 750rpx;
  41. height: 88rpx;
  42. line-height: 103rpx;
  43. padding-right: 31.25rpx;
  44. border-bottom: 1px solid #f4f4f4;
  45. font-size: 30rpx;
  46. color: #333;
  47. background: #fff;
  48. display:flex;
  49. flex-wrap: nowrap;
  50. }
  51. .flex{
  52. flex-grow: 1;
  53. text-align: center;
  54. }
  55. .show {
  56. width: 750rpx;
  57. height: 88rpx;
  58. background: #fff;
  59. border-bottom: 1px solid #f4f4f4;
  60. }
  61. .show .t {
  62. float: left;
  63. width: 600rpx;
  64. height: 88rpx;
  65. line-height: 88rpx;
  66. font-size: 29rpx;
  67. color: #333;
  68. margin-left: 31.25rpx;
  69. }
  70. .show .t .s{
  71. font-weight: 600;
  72. }
  73. .show .i {
  74. float: right;
  75. width: 52rpx;
  76. height: 52rpx;
  77. margin-right: 16rpx;
  78. margin-top: 28rpx;
  79. }
  80. .mark-img{
  81. width: 168rpx;
  82. height: 68rpx;
  83. right: 5rpx;
  84. position: absolute;
  85. top: 5rpx;
  86. }
  87. .goodsimgs {
  88. width: 750rpx;
  89. height: 492rpx;
  90. }
  91. .goodsimgs image {
  92. width: 750rpx;
  93. height: 492rpx;
  94. }
  95. .commodity_screen {
  96. width: 100%;
  97. height: 100%;
  98. position: fixed;
  99. top: 0;
  100. left: 0;
  101. background: #000;
  102. opacity: 0.2;
  103. overflow: hidden;
  104. z-index: 1000;
  105. color: #fff;
  106. }
  107. .commodity_attr_box {
  108. width: 100%;
  109. overflow: hidden;
  110. position: fixed;
  111. bottom: 0;
  112. left: 0;
  113. z-index: 2000;
  114. background: #fff;
  115. padding-top: 20rpx;
  116. }
  117. .goods-info {
  118. width: 750rpx;
  119. /*height: 306rpx;*/
  120. overflow: hidden;
  121. background: #fff;
  122. border-bottom: 1px solid #f4f4f4;
  123. }
  124. .goods-info .c {
  125. display: block;
  126. width: 718.75rpx;
  127. height: 100%;
  128. margin-left: 31.25rpx;
  129. padding: 38rpx 31.25rpx 20rpx 0;
  130. }
  131. .goods-info .c text {
  132. /* display: block;
  133. width: 687.5rpx;
  134. text-align: left; */
  135. }
  136. .goods_name {
  137. white-space: nowrap;
  138. text-overflow: ellipsis;
  139. overflow: hidden;
  140. }
  141. .goods_name_left {
  142. font-weight: 550;
  143. line-height: 40rpx;
  144. margin-left: 0rpx;
  145. font-size: 36rpx;
  146. letter-spacing: 1rpx;
  147. color:#333;
  148. font-weight: bold;
  149. width:640rpx;
  150. text-overflow: ellipsis;
  151. white-space: nowrap;
  152. }
  153. .goods_name_right {
  154. font-weight: 550;
  155. /* top: 375px; */
  156. width: 80rpx;
  157. height: 80rpx;
  158. line-height: 82rpx;
  159. /* padding: 0;
  160. margin: 0;
  161. right: 10rpx; */
  162. margin-right: 0rpx;
  163. text-align: center;
  164. font-size: 25rpx;
  165. background-color: #09AFFF;
  166. border-radius: 40rpx;
  167. letter-spacing: 3rpx;
  168. /* position: absolute; */
  169. }
  170. .goods_name_right .img{
  171. width: 50rpx;
  172. height: 50rpx;
  173. margin-top: 15rpx;
  174. }
  175. .goods_name_right .txt{
  176. margin-top: 5rpx;
  177. font-size: 18rpx;
  178. color: #000000;
  179. border:1rpx solid;
  180. }
  181. .goods-info .desc {
  182. margin: 12rpx 0;
  183. font-size: 24rpx;
  184. line-height: 36rpx;
  185. width:640rpx;
  186. white-space: nowrap;
  187. text-overflow: ellipsis;
  188. overflow: hidden;
  189. display:block;
  190. }
  191. .goods-info .price {
  192. height: 60rpx;
  193. display: flex;
  194. margin-top: 20rpx;
  195. align-items:flex-end;
  196. }
  197. .goods-info .counterPrice {
  198. padding-left: 5rpx;
  199. text-decoration: line-through;
  200. font-size: 24rpx;
  201. margin-top: 15rpx;
  202. }
  203. .goods-info .retailPrice {
  204. height: 44rpx;
  205. line-height: 44rpx;
  206. color:#333;
  207. /* color:#F13634; */
  208. }
  209. .goods-info .memberPrice{
  210. font-size: 26rpx;
  211. color: #DD483E;
  212. margin:0 10rpx 0 20rpx;
  213. }
  214. .member-price-tag{
  215. width:88rpx;
  216. height: 26rpx;
  217. line-height: 26rpx;
  218. background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
  219. background-size: 100% 100%;
  220. color: #5E3A11;
  221. font-size: 16rpx;
  222. padding:0 8rpx 0 0;
  223. text-align: right;
  224. margin:0 0 6rpx 0;
  225. }
  226. .member-price-tag.spread-tag{
  227. margin-left:20rpx;
  228. background-image: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/member/spread-price-bg.png');
  229. width:122rpx;
  230. }
  231. .goods-info .retailPrice text.checked-price{
  232. /* font-size: 44rpx; */
  233. /* font-weight: bold; */
  234. color:#333;
  235. }
  236. .goods-info .brand {
  237. margin-top: 5rpx;
  238. min-height: 34rpx;
  239. text-align: left;
  240. }
  241. .goods-info .brand text {
  242. display: inline-block;
  243. width: auto;
  244. padding: 2px 0rpx 2px 0.5rpx;
  245. line-height: 32.5rpx;
  246. /*border: 1px solid #f48f18;color: #f48f18;*/
  247. font-size: 22rpx;
  248. color: #a98f76;
  249. /*border-radius: 4rpx;*/
  250. background-size: 10.75rpx 18.75rpx;
  251. }
  252. .section-nav {
  253. width: 750rpx;
  254. height: 108rpx;
  255. background: #fff;
  256. margin-bottom: 20rpx;
  257. }
  258. .section-nav .t {
  259. float: left;
  260. width: 600rpx;
  261. height: 108rpx;
  262. line-height: 108rpx;
  263. font-size: 29rpx;
  264. color: #333;
  265. margin-left: 31.25rpx;
  266. }
  267. .section-nav .i {
  268. float: right;
  269. width: 52rpx;
  270. height: 52rpx;
  271. margin-right: 16rpx;
  272. margin-top: 28rpx;
  273. }
  274. .section-act .t {
  275. float: left;
  276. display: flex;
  277. align-items: center;
  278. width: 600rpx;
  279. height: 108rpx;
  280. overflow: hidden;
  281. line-height: 108rpx;
  282. font-size: 29rpx;
  283. color: #999;
  284. margin-left: 31.25rpx;
  285. }
  286. .section-act .label {
  287. color: #999;
  288. }
  289. .section-act .tag {
  290. display: flex;
  291. align-items: center;
  292. padding: 0 10rpx;
  293. border-radius: 3px;
  294. height: 37rpx;
  295. width: auto;
  296. color: #f48f18;
  297. overflow: hidden;
  298. border: 1px solid #f48f18;
  299. font-size: 25rpx;
  300. margin: 0 10rpx;
  301. }
  302. .section-act .text {
  303. display: flex;
  304. align-items: center;
  305. height: 37rpx;
  306. width: auto;
  307. overflow: hidden;
  308. color: #f48f18;
  309. font-size: 29rpx;
  310. }
  311. .comments {
  312. width: 100%;
  313. height: auto;
  314. padding-left: 30rpx;
  315. background: #fff;
  316. margin: 20rpx 0;
  317. }
  318. .comments .h {
  319. height: 102.5rpx;
  320. line-height: 100.5rpx;
  321. width: 718.75rpx;
  322. padding-right: 16rpx;
  323. }
  324. .comments .h .t {
  325. display: block;
  326. float: left;
  327. width: 50%;
  328. font-size: 30rpx;
  329. color: #333;
  330. }
  331. .comments .h .i {
  332. display: block;
  333. float: right;
  334. width: 164rpx;
  335. height: 100.5rpx;
  336. line-height: 100.5rpx;
  337. background-size: 52rpx;
  338. }
  339. .comments .b {
  340. height: auto;
  341. width: 720rpx;
  342. }
  343. .comments .item {
  344. height: auto;
  345. width: 720rpx;
  346. overflow: hidden;
  347. border-top: 1px solid #d9d9d9;
  348. }
  349. .comments .info {
  350. height: 127rpx;
  351. width: 100%;
  352. padding: 33rpx 0 27rpx 0;
  353. }
  354. .comments .user {
  355. float: left;
  356. width: auto;
  357. height: 67rpx;
  358. line-height: 67rpx;
  359. font-size: 0;
  360. }
  361. .comments .user image {
  362. float: left;
  363. width: 67rpx;
  364. height: 67rpx;
  365. margin-right: 17rpx;
  366. border-radius: 50%;
  367. }
  368. .comments .user text {
  369. display: inline-block;
  370. width: auto;
  371. height: 66rpx;
  372. overflow: hidden;
  373. font-size: 29rpx;
  374. line-height: 66rpx;
  375. }
  376. .comments .time {
  377. display: block;
  378. float: right;
  379. width: auto;
  380. height: 67rpx;
  381. line-height: 67rpx;
  382. color: #7f7f7f;
  383. font-size: 25rpx;
  384. margin-right: 30rpx;
  385. }
  386. .comments .content {
  387. width: 720rpx;
  388. padding-right: 30rpx;
  389. line-height: 45.8rpx;
  390. font-size: 29rpx;
  391. margin-bottom: 24rpx;
  392. }
  393. .comments .imgs {
  394. width: 720rpx;
  395. height: auto;
  396. margin-bottom: 25rpx;
  397. }
  398. .comments .imgs .img {
  399. height: 150rpx;
  400. width: 150rpx;
  401. margin-right: 28rpx;
  402. }
  403. .comments .spec {
  404. width: 720rpx;
  405. padding-right: 30rpx;
  406. line-height: 30rpx;
  407. font-size: 24rpx;
  408. color: #999;
  409. margin-bottom: 30rpx;
  410. }
  411. .comments .customer-service {
  412. width: 690rpx;
  413. height: auto;
  414. overflow: hidden;
  415. margin-top: 23rpx;
  416. margin-bottom: 23rpx;
  417. background: rgba(0, 0, 0, 0.03);
  418. padding: 21rpx;
  419. }
  420. .comments .customer-service .u {
  421. font-size: 24rpx;
  422. color: #333;
  423. line-height: 37.5rpx;
  424. }
  425. .comments .customer-service .c {
  426. font-size: 24rpx;
  427. color: #999;
  428. line-height: 37.5rpx;
  429. }
  430. .goods-attr {
  431. width: 750rpx;
  432. height: auto;
  433. overflow: hidden;
  434. padding: 0 31.25rpx 25rpx 31.25rpx;
  435. background: #fff;
  436. }
  437. .goods-attr .t {
  438. width: 687.5rpx;
  439. height: 104rpx;
  440. line-height: 104rpx;
  441. font-size: 38.5rpx;
  442. }
  443. .goods-attr .item {
  444. width: 687.5rpx;
  445. height: 68rpx;
  446. padding: 11rpx 20rpx;
  447. margin-bottom: 11rpx;
  448. background: #f7f7f7;
  449. font-size: 38.5rpx;
  450. }
  451. .goods-attr .left {
  452. float: left;
  453. font-size: 25rpx;
  454. width: 134rpx;
  455. height: 45rpx;
  456. line-height: 45rpx;
  457. overflow: hidden;
  458. color: #999;
  459. }
  460. .goods-attr .right {
  461. float: left;
  462. font-size: 36.5rpx;
  463. margin-left: 20rpx;
  464. width: 480rpx;
  465. height: 45rpx;
  466. line-height: 45rpx;
  467. overflow: hidden;
  468. color: #333;
  469. }
  470. .detail {
  471. width: 750rpx;
  472. height: auto;
  473. overflow: hidden;
  474. }
  475. .detail image {
  476. width: 750rpx;
  477. display: block;
  478. }
  479. .common-problem {
  480. width: 750rpx;
  481. height: auto;
  482. overflow: hidden;
  483. }
  484. .common-problem .h {
  485. position: relative;
  486. height: 145.5rpx;
  487. width: 750rpx;
  488. padding: 56.25rpx 0;
  489. background: #fff;
  490. text-align: center;
  491. }
  492. .common-problem .h .line {
  493. display: inline-block;
  494. position: absolute;
  495. top: 72rpx;
  496. left: 0;
  497. z-index: 2;
  498. height: 1px;
  499. margin-left: 225rpx;
  500. width: 300rpx;
  501. background: #ccc;
  502. }
  503. .common-problem .h .title {
  504. display: inline-block;
  505. position: absolute;
  506. top: 56.125rpx;
  507. left: 0;
  508. z-index: 3;
  509. height: 33rpx;
  510. margin-left: 285rpx;
  511. width: 180rpx;
  512. background: #fff;
  513. }
  514. .common-problem .b {
  515. width: 750rpx;
  516. height: auto;
  517. overflow: hidden;
  518. padding: 0rpx 30rpx;
  519. background: #fff;
  520. }
  521. .common-problem .item {
  522. height: auto;
  523. overflow: hidden;
  524. padding-bottom: 25rpx;
  525. }
  526. .common-problem .question-box .spot {
  527. float: left;
  528. display: block;
  529. height: 8rpx;
  530. width: 8rpx;
  531. background: #b4282d;
  532. border-radius: 50%;
  533. margin-top: 11rpx;
  534. }
  535. .common-problem .question-box .question {
  536. float: left;
  537. line-height: 30rpx;
  538. padding-left: 8rpx;
  539. display: block;
  540. font-size: 26rpx;
  541. padding-bottom: 15rpx;
  542. color: #303030;
  543. }
  544. .common-problem .answer {
  545. line-height: 36rpx;
  546. padding-left: 16rpx;
  547. font-size: 26rpx;
  548. color: #787878;
  549. }
  550. .related-goods {
  551. width: 750rpx;
  552. height: auto;
  553. overflow: hidden;
  554. padding-bottom: 80rpx;
  555. }
  556. .related-goods .h {
  557. position: relative;
  558. height: 145.5rpx;
  559. width: 750rpx;
  560. padding: 56.25rpx 0;
  561. background: #fff;
  562. text-align: center;
  563. border-bottom: 1px solid #f4f4f4;
  564. }
  565. .related-goods .h .line {
  566. display: inline-block;
  567. position: absolute;
  568. top: 72rpx;
  569. left: 0;
  570. z-index: 2;
  571. height: 1px;
  572. margin-left: 225rpx;
  573. width: 300rpx;
  574. background: #ccc;
  575. }
  576. .related-goods .h .title {
  577. display: inline-block;
  578. position: absolute;
  579. top: 56.125rpx;
  580. left: 0;
  581. z-index: 3;
  582. height: 33rpx;
  583. margin-left: 285rpx;
  584. width: 180rpx;
  585. background: #fff;
  586. }
  587. .related-goods .b {
  588. width: 750rpx;
  589. height: auto;
  590. overflow: hidden;
  591. }
  592. .related-goods .b .item {
  593. float: left;
  594. background: #fff;
  595. width: 375rpx;
  596. height: auto;
  597. overflow: hidden;
  598. text-align: center;
  599. padding: 15rpx 31.25rpx;
  600. border-right: 1px solid #f4f4f4;
  601. border-bottom: 1px solid #f4f4f4;
  602. }
  603. .related-goods .item .img {
  604. width: 311.45rpx;
  605. height: 311.45rpx;
  606. }
  607. .related-goods .item .name {
  608. display: block;
  609. width: 311.45rpx;
  610. height: 35rpx;
  611. margin: 11.5rpx 0 15rpx 0;
  612. text-align: center;
  613. overflow: hidden;
  614. font-size: 30rpx;
  615. color: #333;
  616. }
  617. .related-goods .item .price {
  618. display: block;
  619. width: 311.45rpx;
  620. height: 30rpx;
  621. text-align: center;
  622. font-size: 30rpx;
  623. color: #b4282d;
  624. }
  625. .bottom-btn {
  626. position: fixed;
  627. left: 0rpx;
  628. bottom: 0;
  629. z-index: 10;
  630. width: 750rpx;
  631. height: 112rpx;
  632. display: flex;
  633. background: #fff;
  634. padding-bottom: constant(safe-area-inset-bottom);
  635. padding-bottom: env(safe-area-inset-bottom);
  636. box-sizing: content-box;
  637. font-size: 22rpx;
  638. align-items: center;
  639. justify-content: space-between;
  640. }
  641. .bottom-btn .l {
  642. /* flex: 2;
  643. float: left;
  644. height: 150rpx;
  645. width: 162rpx; */
  646. /*border: 1px solid #f4f4f4;*/
  647. /* display: flex; */
  648. /* align-items: center;
  649. justify-content: center; */
  650. }
  651. .bottom-btn .l.l-collect {
  652. border-right: none;
  653. border-left: none;
  654. text-align: center;
  655. padding-left:30rpx;
  656. /* width: 100rpx; */
  657. /* flex: 1; */
  658. }
  659. .bottom-btn .l.l-collect .icon {
  660. font-size: 40rpx;
  661. }
  662. .bottom-btn .l.l-collect text {
  663. /* position: absolute;
  664. top: 80rpx;
  665. left: 30rpx;
  666. font-size: 22rpx; */
  667. }
  668. .bottom-btn .l.l-kefu {
  669. border-right: none;
  670. border-left: none;
  671. text-align: center;
  672. /* width:60rpx; */
  673. /* top: 10rpx; */
  674. /* position: relative; */
  675. }
  676. /* .contact-block{
  677. position: relative;
  678. } */
  679. .bottom-btn .l.l-kefu .icon {
  680. /* position: absolute;
  681. font-size: 44rpx;
  682. top:20rpx */
  683. }
  684. .bottom-btn .l.l-kefu text {
  685. /* position: absolute;
  686. top: 60rpx;
  687. font-size: 22rpx; */
  688. }
  689. .bottom-btn .l.l-cart .box {
  690. position: relative;
  691. /* height: 80rpx;
  692. width: 70rpx; */
  693. }
  694. .bottom-btn .l.l-cart .box .txt {
  695. position: absolute;
  696. top: 50rpx;
  697. font-size: 22rpx;
  698. }
  699. .bottom-btn .l.l-cart .cart-count {
  700. height: 28rpx;
  701. width: 28rpx;
  702. z-index: 10;
  703. position: absolute;
  704. top: 0;
  705. right: 0;
  706. background: #b4282d;
  707. text-align: center;
  708. font-size: 18rpx;
  709. color: #fff;
  710. line-height: 28rpx;
  711. border-radius: 50%;
  712. }
  713. .bottom-btn .l.l-cart .icon {
  714. /* position: absolute;
  715. top: 10rpx;
  716. left: 0;
  717. font-size: 44rpx; */
  718. }
  719. .collect-wrapper,.service-wrapper{
  720. display: flex;
  721. flex-direction: column;
  722. justify-content: center;
  723. flex:1;
  724. }
  725. .collect-text{
  726. margin:10rpx 0 0;
  727. }
  728. .bottom-btn .c {
  729. width:452rpx;
  730. background: #09afff;
  731. height: 82rpx;
  732. font-size: 30rpx;
  733. font-weight: bold;
  734. color:#fff;
  735. border-radius: 82rpx;
  736. overflow: hidden;
  737. text-align: center;
  738. line-height: 82rpx;
  739. margin-right:30rpx;
  740. display: flex;
  741. align-items: center;
  742. border:1px solid #09AFFF;
  743. }
  744. .bottom-btn .c .add-cart{
  745. flex:1;
  746. background: #fff;
  747. }
  748. .bottom-btn .c .buy-now{
  749. flex:1;
  750. color:#fff;
  751. }
  752. .dis-order-wrapper{
  753. width:452rpx;
  754. background: #09afff;
  755. height: 82rpx;
  756. font-size: 22rpx;
  757. color:#fff;
  758. border-radius: 82rpx;
  759. text-align: center;
  760. margin-right:30rpx;
  761. display: flex;
  762. align-items: center;
  763. overflow: hidden;
  764. }
  765. .dis-order-wrapper>view{
  766. flex:1;
  767. text-align: center;
  768. height: 82rpx;
  769. }
  770. .spread-order{
  771. background: #fff;
  772. border-radius: 0 82rpx 82rpx 0;
  773. border:1rpx solid #09afff;
  774. border-left:none;
  775. line-height: 24rpx;
  776. }
  777. .buy-type{
  778. font-size: 30rpx;
  779. font-weight: bold;
  780. line-height: 30rpx;
  781. margin: 10rpx 0 4rpx 0;
  782. overflow: hidden;
  783. }
  784. .bottom-btn .r {
  785. /*border: 1px solid #f48f18;*/
  786. background: #09AFFF;
  787. float: left;
  788. height: 100rpx;
  789. /* line-height: 66rpx; */
  790. flex: 2;
  791. text-align: center;
  792. color: #fff;
  793. margin-left: 15rpx;
  794. margin-top: 15rpx;
  795. margin-bottom: 15rpx;
  796. border-top-left-radius: 50rpx;
  797. border-bottom-left-radius: 50rpx;
  798. }
  799. .bottom-btn .r .title{
  800. font-size: 46rpx;
  801. height: 56rpx;
  802. color: #fff;
  803. }
  804. .bottom-btn .r .subtitle{
  805. font-size: 28rpx;
  806. color: #fff;
  807. font-weight: 100;
  808. }
  809. @import "../../../lib/wxParse/wxParse.wxss";
  810. .attr-pop-box {
  811. width: 100%;
  812. height: 100%;
  813. position: fixed;
  814. background: rgba(0, 0, 0, 0.5);
  815. z-index: 8;
  816. bottom: 0;
  817. /* display: none; */
  818. }
  819. .attr-pop {
  820. width: 100%;
  821. height: auto;
  822. max-height: 780rpx;
  823. padding: 31.25rpx;
  824. background: #fff;
  825. position: fixed;
  826. z-index: 9;
  827. bottom: 100rpx;
  828. }
  829. .attr-pop .close {
  830. position: absolute;
  831. width: 48rpx;
  832. height: 48rpx;
  833. right: 31.25rpx;
  834. overflow: hidden;
  835. top: 31.25rpx;
  836. }
  837. .attr-pop .close .icon {
  838. width: 48rpx;
  839. height: 48rpx;
  840. }
  841. .attr-pop .img-info {
  842. width: 687.5rpx;
  843. height: 177rpx;
  844. overflow: hidden;
  845. margin-bottom: 41.5rpx;
  846. }
  847. .attr-pop .img {
  848. float: left;
  849. height: 177rpx;
  850. width: 177rpx;
  851. background: #f4f4f4;
  852. margin-right: 31.25rpx;
  853. }
  854. .attr-pop .info {
  855. float: left;
  856. height: 177rpx;
  857. display: flex;
  858. align-items: center;
  859. }
  860. .attr-pop .p {
  861. font-size: 33rpx;
  862. color: #333;
  863. height: 33rpx;
  864. line-height: 33rpx;
  865. margin-bottom: 10rpx;
  866. }
  867. .attr-pop .a {
  868. font-size: 29rpx;
  869. color: #333;
  870. height: 40rpx;
  871. line-height: 40rpx;
  872. }
  873. .spec-con {
  874. width: 100%;
  875. height: auto;
  876. overflow: hidden;
  877. }
  878. .spec-con .name {
  879. margin-bottom: 6rpx;
  880. font-size: 29rpx;
  881. color: #333;
  882. }
  883. .spec-con .values {
  884. height: auto;
  885. margin-bottom: 10rpx;
  886. font-size: 0;
  887. }
  888. .spec-con .value {
  889. display: inline-block;
  890. height: 62rpx;
  891. padding: 0 35rpx;
  892. line-height: 56rpx;
  893. text-align: center;
  894. margin-right: 25rpx;
  895. margin-bottom: 16.5rpx;
  896. border: 1px solid #333;
  897. font-size: 25rpx;
  898. color: #333;
  899. }
  900. .spec-con .value.disable {
  901. border: 1px solid #ccc;
  902. color: #ccc;
  903. }
  904. .spec-con .value.selected {
  905. border: 1px solid #b4282d;
  906. color: #b4282d;
  907. }
  908. .number-item .selnum {
  909. width: 200rpx;
  910. /* width: 322rpx; */
  911. height: 71rpx;
  912. border: 1px solid #ccc;
  913. display: flex;
  914. }
  915. .number-item .cut {
  916. width: 93.75rpx;
  917. height: 100%;
  918. text-align: center;
  919. line-height: 65rpx;
  920. }
  921. .number-item .number {
  922. flex: 1;
  923. height: 100%;
  924. text-align: center;
  925. line-height: 68.75rpx;
  926. border-left: 1px solid #ccc;
  927. border-right: 1px solid #ccc;
  928. float: left;
  929. }
  930. .number-item .add {
  931. width: 93.75rpx;
  932. height: 100%;
  933. text-align: center;
  934. line-height: 65rpx;
  935. }
  936. .contact {
  937. height: 100rpx;
  938. width: 100rpx;
  939. border-radius: 100%;
  940. position: fixed;
  941. bottom: 96rpx;
  942. right: 10rpx;
  943. font-size: 20rpx;
  944. box-sizing: border-box;
  945. background: url("/static/images/customer.png") no-repeat center 21rpx;
  946. background-size: 55rpx auto;
  947. }
  948. .share-pop-box {
  949. width: 100%;
  950. height: 100%;
  951. position: fixed;
  952. background: rgba(0, 0, 0, 0.5);
  953. z-index: 8;
  954. bottom: 0;
  955. /* display: none; */
  956. }
  957. .share-pop {
  958. width: 100%;
  959. height: auto;
  960. max-height: 780rpx;
  961. padding: 31.25rpx;
  962. background: #fff;
  963. position: fixed;
  964. z-index: 9;
  965. bottom: 100rpx;
  966. }
  967. .share-pop .close {
  968. position: absolute;
  969. width: 48rpx;
  970. height: 48rpx;
  971. right: 31.25rpx;
  972. top: 31.25rpx;
  973. }
  974. .share-pop .close .icon {
  975. width: 48rpx;
  976. height: 48rpx;
  977. }
  978. .share-pop .share-info {
  979. width: 100%;
  980. height: 225rpx;
  981. overflow: hidden;
  982. margin-bottom: 41.5rpx;
  983. }
  984. .sharebtn {
  985. top: 75rpx;
  986. background: none !important;
  987. font-size: 32rpx;
  988. color: #fff !important;
  989. border-radius: 0%;
  990. width: 175rpx;
  991. height: 150rpx;
  992. text-align: center;
  993. display: flex;
  994. justify-content: center;
  995. align-items: center;
  996. flex-wrap: wrap;
  997. float: left;
  998. background: #fff;
  999. border-bottom: 0px solid #fafafa;
  1000. margin-left: 15%;
  1001. }
  1002. .sharebtn::after {
  1003. border: none;
  1004. border-radius: 0%;
  1005. }
  1006. .savesharebtn {
  1007. top: 75rpx;
  1008. background: none !important;
  1009. font-size: 32rpx;
  1010. color: #fff !important;
  1011. border-radius: 0%;
  1012. width: 175rpx;
  1013. height: 150rpx;
  1014. text-align: center;
  1015. display: flex;
  1016. justify-content: center;
  1017. align-items: center;
  1018. flex-wrap: wrap;
  1019. float: right;
  1020. background: #fff;
  1021. border-bottom: 0px solid #fafafa;
  1022. margin-right: 15%;
  1023. }
  1024. .savesharebtn::after {
  1025. border: none;
  1026. border-radius: 0%;
  1027. }
  1028. .sharebtn_image {
  1029. /* border: 1px solid #757575; */
  1030. width: 128rpx;
  1031. height: 128rpx;
  1032. margin-top: 0rpx;
  1033. }
  1034. .sharebtn_text {
  1035. /* border: 1px solid #757575; */
  1036. width: 150rpx;
  1037. margin-bottom: 2rpx;
  1038. height: 20rpx;
  1039. line-height: 20rpx;
  1040. font-size: 20rpx;
  1041. color: #555;
  1042. }
  1043. .separate {
  1044. background: #e0e3da;
  1045. width: 100%;
  1046. height: 6rpx;
  1047. }
  1048. /* 新客角标 */
  1049. .isNew{
  1050. position: absolute;
  1051. width: 80rpx;
  1052. height: 120rpx;
  1053. right: 30rpx;
  1054. z-index: 999;
  1055. }
  1056. /* 自购/推广弹框 */
  1057. .overlay-wrapper {
  1058. display: flex;
  1059. align-items: center;
  1060. justify-content: center;
  1061. height: 100%;
  1062. }
  1063. .tips-wrapper {
  1064. width: 588rpx;
  1065. height:462rpx;
  1066. border-radius:10rpx;
  1067. background: #fff;
  1068. font-size: 26rpx;
  1069. display: flex;
  1070. flex-direction: column;
  1071. justify-content: space-between;
  1072. }
  1073. .tips-top{
  1074. display: flex;
  1075. flex-direction: column;
  1076. align-items: center;
  1077. padding:0 40rpx
  1078. }
  1079. .tips-title{
  1080. font-size: 34rpx;
  1081. font-weight: bold;
  1082. margin:66rpx 0 24rpx;
  1083. }
  1084. .tips-bottom{
  1085. height: 132rpx;
  1086. border-top:2rpx solid #E4E4E4;
  1087. display: flex;
  1088. justify-content: space-around;
  1089. align-items: center;
  1090. }
  1091. .tips-bottom .btn-devide{
  1092. width:2rpx;
  1093. height: 130rpx;
  1094. background: #E4E4E4;
  1095. }
  1096. .cancel-btn{
  1097. width:202rpx;
  1098. height: 72rpx;
  1099. line-height: 72rpx;
  1100. border:2rpx solid #85868A;
  1101. color:#282728;
  1102. border-radius:72rpx;
  1103. text-align: center;
  1104. overflow: hidden;
  1105. }
  1106. .repay-btn{
  1107. width:202rpx;
  1108. height: 72rpx;
  1109. line-height: 72rpx;
  1110. background: #09AFFF;
  1111. color:#fff;
  1112. border-radius:72rpx;
  1113. text-align: center;
  1114. }
  1115. .notip-again{
  1116. padding-left:40rpx;
  1117. display: flex;
  1118. align-items: center;
  1119. }
  1120. .user-agree{
  1121. /* color:#85868A; */
  1122. font-size: 26rpx;
  1123. margin-left:8rpx;
  1124. }
  1125. /* 海报的样式 */
  1126. .poster{
  1127. position: absolute;
  1128. top: 20rpx;
  1129. z-index: 99;
  1130. text-align: center;
  1131. left: 0;
  1132. bottom: 0;
  1133. right: 0;
  1134. }
  1135. .title{
  1136. color: #fff;
  1137. margin: 20rpx 0;
  1138. font-size: 30rpx;
  1139. display: flex;
  1140. justify-content: center;
  1141. text-align: left;
  1142. }
  1143. .title text{
  1144. width: 480rpx;
  1145. }
  1146. .ads{
  1147. color: #fff;
  1148. text-align: left;
  1149. margin: 20rpx auto;
  1150. display: flex;
  1151. justify-content: center;
  1152. }
  1153. .tool{
  1154. display: flex;
  1155. text-align: center;
  1156. justify-content: baseline;
  1157. width: 100%;
  1158. margin-top: 20rpx;
  1159. }
  1160. .tool view{
  1161. flex: 1;
  1162. }
  1163. .img{
  1164. width: 107rpx;
  1165. height: 128rpx;
  1166. }
  1167. .closeImg{
  1168. width: 57rpx;
  1169. height: 57rpx;
  1170. }
  1171. .share-btn{
  1172. background-color:transparent;
  1173. flex:1;
  1174. }
  1175. .share-btn::after {
  1176. border: none;
  1177. }
  1178. .sku-list{
  1179. padding:10px 32rpx 90rpx;
  1180. }
  1181. .sku-title{
  1182. color:#333;
  1183. font-size: 34rpx;
  1184. }
  1185. .sku-item{
  1186. display: flex;
  1187. align-items: center;
  1188. justify-content: space-between;
  1189. height: 80rpx;
  1190. }
  1191. .sku-center{
  1192. flex:1;
  1193. padding:0 20rpx;
  1194. }
  1195. .sku-name{
  1196. color:#333;
  1197. font-size: 26rpx;
  1198. }
  1199. .sku-price{
  1200. padding-right:20px;
  1201. }
  1202. .sku-price text{
  1203. font-size: 32rpx;
  1204. font-weight: bold;
  1205. }
  1206. .spu-number{
  1207. display: flex;
  1208. height: 100rpx;
  1209. align-items: center;
  1210. margin:20rpx 0;
  1211. /* border-bottom: 1px solid #f4f4f4; */
  1212. }
  1213. .spu-number view {
  1214. color:#333
  1215. }
  1216. .goods-number{
  1217. border-top:1px solid #bbb;
  1218. border-bottom:1px solid #bbb;
  1219. height: 80rpx;
  1220. width:120rpx;
  1221. text-align: center;
  1222. font-size: 32rpx;
  1223. line-height:80rpx;
  1224. }
  1225. .minus,.add{
  1226. border:1px solid #bbb;
  1227. width:80rpx;
  1228. height: 80rpx;
  1229. text-align: center;
  1230. font-size: 40rpx;
  1231. line-height:80rpx;
  1232. border-radius:12rpx;
  1233. }
  1234. .minus{
  1235. border-top-right-radius: 0;
  1236. border-bottom-right-radius: 0;
  1237. }
  1238. .add{
  1239. border-top-left-radius: 0;
  1240. border-bottom-left-radius: 0;
  1241. }