goods.wxss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. .container {
  2. margin-bottom: 100rpx;
  3. }
  4. .goodsimgs {
  5. width: 750rpx;
  6. height: 750rpx;
  7. }
  8. .goodsimgs image {
  9. width: 750rpx;
  10. height: 750rpx;
  11. }
  12. .service-policy {
  13. /* width: 750rpx; */
  14. height: 73rpx;
  15. background: #f4f4f4;
  16. padding: 0 31.25rpx;
  17. display: flex;
  18. flex-flow: row nowrap;
  19. align-items: center;
  20. justify-content: space-between;
  21. }
  22. .service-policy .item {
  23. background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/servicePolicyRed-518d32d74b.png) 0 center no-repeat;
  24. background-size: 10rpx;
  25. padding-left: 15rpx;
  26. display: flex;
  27. align-items: center;
  28. font-size: 25rpx;
  29. color: #666;
  30. }
  31. .goods-info {
  32. width: 750rpx;
  33. /* height: 306rpx; */
  34. overflow: hidden;
  35. background: #fff;
  36. }
  37. .goods-info .c {
  38. display: block;
  39. width: 718.75rpx;
  40. height: 100%;
  41. margin-left: 31.25rpx;
  42. padding: 38rpx 31.25rpx 38rpx 0;
  43. border-bottom: 1px solid #f4f4f4;
  44. }
  45. .goods-info .c text {
  46. display: block;
  47. width: 687.5rpx;
  48. }
  49. .goods-info .name {
  50. /* height: 41rpx; */
  51. margin-bottom: 5.208rpx;
  52. font-size: 41rpx;
  53. text-align: center;
  54. /* line-height: 41rpx; */
  55. }
  56. .goods-info .desc {
  57. /* height: 43rpx; */
  58. margin-bottom: 41rpx;
  59. font-size: 24rpx;
  60. line-height: 36rpx;
  61. color: #999;
  62. }
  63. .goods-info .price {
  64. /* height: 35rpx; */
  65. font-size: 40rpx;
  66. line-height: 35rpx;
  67. color: #f94b4b;
  68. margin-top: 30rpx;
  69. margin-bottom: 30rpx;
  70. text-align: center;
  71. }
  72. .goods-info .market-price {
  73. font-size: 29rpx;
  74. line-height: 35rpx;
  75. color: #555;
  76. margin-top: 30rpx;
  77. margin-bottom: 30rpx;
  78. text-decoration: line-through;
  79. text-align: center;
  80. }
  81. .goods-info .brand {
  82. margin-top: 23rpx;
  83. min-height: 40rpx;
  84. text-align: center;
  85. }
  86. .goods-info .brand text {
  87. display: inline-block;
  88. width: auto;
  89. padding: 2px 30rpx 2px 10.5rpx;
  90. line-height: 35.5rpx;
  91. border: 1px solid #f48f18;
  92. font-size: 25rpx;
  93. color: #f48f18;
  94. border-radius: 4px;
  95. background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/detailTagArrow-18bee52dab.png) 95% center no-repeat;
  96. background-size: 10.75rpx 18.75rpx;
  97. }
  98. .section-nav {
  99. width: 750rpx;
  100. height: 108rpx;
  101. background: #fff;
  102. margin-bottom: 20rpx;
  103. }
  104. .section-nav .t {
  105. float: left;
  106. width: 600rpx;
  107. height: 108rpx;
  108. line-height: 108rpx;
  109. font-size: 29rpx;
  110. color: #333;
  111. margin-left: 31.25rpx;
  112. }
  113. .section-nav .i {
  114. float: right;
  115. width: 52rpx;
  116. height: 52rpx;
  117. margin-right: 16rpx;
  118. margin-top: 28rpx;
  119. }
  120. .section-act .t {
  121. float: left;
  122. display: flex;
  123. align-items: center;
  124. width: 600rpx;
  125. height: 108rpx;
  126. overflow: hidden;
  127. line-height: 108rpx;
  128. font-size: 29rpx;
  129. color: #999;
  130. margin-left: 31.25rpx;
  131. }
  132. .section-act .label {
  133. color: #999;
  134. }
  135. .section-act .tag {
  136. display: flex;
  137. align-items: center;
  138. padding: 0 10rpx;
  139. border-radius: 3px;
  140. height: 37rpx;
  141. width: auto;
  142. color: #f48f18;
  143. overflow: hidden;
  144. border: 1px solid #f48f18;
  145. font-size: 25rpx;
  146. margin: 0 10rpx;
  147. }
  148. .section-act .text {
  149. display: flex;
  150. align-items: center;
  151. height: 37rpx;
  152. width: auto;
  153. overflow: hidden;
  154. color: #f48f18;
  155. font-size: 29rpx;
  156. }
  157. .comments {
  158. width: 100%;
  159. height: auto;
  160. padding-left: 30rpx;
  161. background: #fff;
  162. margin: 20rpx 0;
  163. }
  164. .comments .h {
  165. height: 102.5rpx;
  166. line-height: 100.5rpx;
  167. width: 718.75rpx;
  168. padding-right: 16rpx;
  169. }
  170. .comments .h .t {
  171. display: block;
  172. float: left;
  173. width: 50%;
  174. font-size: 38.5rpx;
  175. color: #333;
  176. }
  177. .comments .h .i {
  178. display: block;
  179. float: right;
  180. width: 164rpx;
  181. height: 100.5rpx;
  182. line-height: 100.5rpx;
  183. background: url(http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/address-right-990628faa7.png) right center no-repeat;
  184. background-size: 52rpx;
  185. }
  186. .comments .b {
  187. height: auto;
  188. width: 720rpx;
  189. }
  190. .comments .item {
  191. height: auto;
  192. width: 720rpx;
  193. overflow: hidden;
  194. border-top: 1px solid #d9d9d9;
  195. }
  196. .comments .info {
  197. width: 100%;
  198. padding: 33rpx 0 0 0;
  199. }
  200. .comments .reply-info {
  201. width: 100%;
  202. }
  203. .comments .user {
  204. float: left;
  205. width: auto;
  206. height: 67rpx;
  207. line-height: 67rpx;
  208. font-size: 0;
  209. }
  210. .comments .reply-user {
  211. float: left;
  212. width: auto;
  213. height: 67rpx;
  214. line-height: 67rpx;
  215. font-size: 0;
  216. margin-left: 50rpx;
  217. }
  218. .comments .reply-user image {
  219. float: left;
  220. width: 50rpx;
  221. height: 50rpx;
  222. margin-right: 17rpx;
  223. margin-top: 5rpx;
  224. border-radius: 50%;
  225. }
  226. .comments .reply-user text {
  227. display:inline-block;
  228. width:auto;
  229. height:66rpx;
  230. overflow:hidden;
  231. font-size:29rpx;
  232. line-height:66rpx;
  233. font-weight:bold;
  234. }
  235. .comments .user image {
  236. float: left;
  237. width: 67rpx;
  238. height: 67rpx;
  239. margin-right: 17rpx;
  240. border-radius: 50%;
  241. }
  242. .comments .user text {
  243. display: inline-block;
  244. width: auto;
  245. height: 66rpx;
  246. overflow: hidden;
  247. font-size: 29rpx;
  248. line-height: 66rpx;
  249. font-weight: bold;
  250. }
  251. .comments .time {
  252. display: block;
  253. float: right;
  254. width: auto;
  255. height: 67rpx;
  256. line-height: 67rpx;
  257. color: #7f7f7f;
  258. font-size: 25rpx;
  259. margin-right: 30rpx;
  260. }
  261. .comments .content {
  262. width: 630rpx;
  263. padding-right: 30rpx;
  264. line-height: 45.8rpx;
  265. font-size: 29rpx;
  266. margin-bottom: 24rpx;
  267. margin-left: 80rpx;
  268. }
  269. .comments .reply-content {
  270. /* width: 720rpx; */
  271. width: 600rpx;
  272. padding-right: 30rpx;
  273. line-height: 45.8rpx;
  274. font-size: 29rpx;
  275. margin-bottom: 24rpx;
  276. margin-left: 115rpx;
  277. }
  278. .comments .imgs {
  279. width: 720rpx;
  280. height: auto;
  281. margin-bottom: 25rpx;
  282. }
  283. .comments .imgs .img {
  284. height: 150rpx;
  285. width: 150rpx;
  286. margin-right: 28rpx;
  287. }
  288. .comments .spec {
  289. width: 720rpx;
  290. padding-right: 30rpx;
  291. line-height: 30rpx;
  292. font-size: 24rpx;
  293. color: #999;
  294. margin-bottom: 30rpx;
  295. }
  296. .goods-attr {
  297. width: 750rpx;
  298. height: auto;
  299. overflow: hidden;
  300. padding: 0 31.25rpx 25rpx 31.25rpx;
  301. background: #fff;
  302. }
  303. .goods-attr .t {
  304. width: 687.5rpx;
  305. height: 104rpx;
  306. line-height: 104rpx;
  307. font-size: 38.5rpx;
  308. }
  309. .goods-attr .item {
  310. width: 687.5rpx;
  311. height: 68rpx;
  312. padding: 11rpx 20rpx;
  313. margin-bottom: 11rpx;
  314. background: #f7f7f7;
  315. font-size: 38.5rpx;
  316. }
  317. .goods-attr .left {
  318. float: left;
  319. font-size: 25rpx;
  320. width: 134rpx;
  321. height: 45rpx;
  322. line-height: 45rpx;
  323. overflow: hidden;
  324. color: #999;
  325. }
  326. .goods-attr .right {
  327. float: left;
  328. font-size: 36.5rpx;
  329. margin-left: 20rpx;
  330. width: 480rpx;
  331. height: 45rpx;
  332. line-height: 45rpx;
  333. overflow: hidden;
  334. color: #333;
  335. }
  336. .detail {
  337. width: 750rpx;
  338. height: auto;
  339. overflow: hidden;
  340. }
  341. .detail image {
  342. width: 750rpx;
  343. display: block;
  344. }
  345. .common-problem {
  346. width: 750rpx;
  347. height: auto;
  348. overflow: hidden;
  349. }
  350. .common-problem .h {
  351. position: relative;
  352. height: 145.5rpx;
  353. width: 750rpx;
  354. padding: 56.25rpx 0;
  355. background: #fff;
  356. text-align: center;
  357. }
  358. .common-problem .h .line {
  359. display: inline-block;
  360. position: absolute;
  361. top: 72rpx;
  362. left: 0;
  363. z-index: 2;
  364. height: 1px;
  365. margin-left: 225rpx;
  366. width: 300rpx;
  367. background: #ccc;
  368. }
  369. .common-problem .h .title {
  370. display: inline-block;
  371. position: absolute;
  372. top: 56.125rpx;
  373. left: 0;
  374. z-index: 3;
  375. height: 33rpx;
  376. margin-left: 285rpx;
  377. width: 180rpx;
  378. background: #fff;
  379. }
  380. .common-problem .b {
  381. width: 750rpx;
  382. height: auto;
  383. overflow: hidden;
  384. padding: 0rpx 30rpx;
  385. background: #fff;
  386. }
  387. .common-problem .item {
  388. height: auto;
  389. overflow: hidden;
  390. padding-bottom: 25rpx;
  391. }
  392. .common-problem .question-box .spot {
  393. float: left;
  394. display: block;
  395. height: 8rpx;
  396. width: 8rpx;
  397. background: #b4282d;
  398. border-radius: 50%;
  399. margin-top: 11rpx;
  400. }
  401. .common-problem .question-box .question {
  402. float: left;
  403. line-height: 30rpx;
  404. padding-left: 8rpx;
  405. display: block;
  406. font-size: 26rpx;
  407. padding-bottom: 15rpx;
  408. color: #303030;
  409. }
  410. .common-problem .answer {
  411. line-height: 36rpx;
  412. padding-left: 16rpx;
  413. font-size: 26rpx;
  414. color: #787878;
  415. }
  416. .related-goods {
  417. width: 750rpx;
  418. height: auto;
  419. overflow: hidden;
  420. }
  421. .related-goods .h {
  422. position: relative;
  423. height: 145.5rpx;
  424. width: 750rpx;
  425. padding: 56.25rpx 0;
  426. background: #fff;
  427. text-align: center;
  428. border-bottom: 1px solid #f4f4f4;
  429. }
  430. .related-goods .h .line {
  431. display: inline-block;
  432. position: absolute;
  433. top: 72rpx;
  434. left: 0;
  435. z-index: 2;
  436. height: 1px;
  437. margin-left: 225rpx;
  438. width: 300rpx;
  439. background: #ccc;
  440. }
  441. .related-goods .h .title {
  442. display: inline-block;
  443. position: absolute;
  444. top: 56.125rpx;
  445. left: 0;
  446. z-index: 3;
  447. height: 33rpx;
  448. margin-left: 285rpx;
  449. width: 180rpx;
  450. background: #fff;
  451. }
  452. .related-goods .b {
  453. width: 750rpx;
  454. height: auto;
  455. overflow: hidden;
  456. }
  457. .related-goods .b .item {
  458. float: left;
  459. background: #fff;
  460. width: 375rpx;
  461. height: auto;
  462. overflow: hidden;
  463. text-align: center;
  464. padding: 15rpx 31.25rpx;
  465. border-right: 1px solid #f4f4f4;
  466. border-bottom: 1px solid #f4f4f4;
  467. }
  468. .related-goods .item .img {
  469. width: 311.45rpx;
  470. height: 311.45rpx;
  471. }
  472. .related-goods .item .name {
  473. display: block;
  474. width: 311.45rpx;
  475. height: 35rpx;
  476. margin: 11.5rpx 0 15rpx 0;
  477. text-align: center;
  478. overflow: hidden;
  479. font-size: 30rpx;
  480. color: #333;
  481. }
  482. .related-goods .item .price {
  483. display: block;
  484. width: 311.45rpx;
  485. height: 30rpx;
  486. text-align: center;
  487. font-size: 30rpx;
  488. color: #f94b4b;
  489. }
  490. .bottom-btn {
  491. position: fixed;
  492. left: 0;
  493. bottom: 0;
  494. z-index: 10;
  495. width: 750rpx;
  496. height: 100rpx;
  497. display: flex;
  498. background: #fff;
  499. }
  500. .bottom-btn .l {
  501. float: left;
  502. height: 100rpx;
  503. width: 200rpx;
  504. border: 1px solid #f4f4f4;
  505. display: flex;
  506. align-items: center;
  507. justify-content: center;
  508. }
  509. .bottom-btn .l.l-collect {
  510. border-right: none;
  511. border-left: none;
  512. text-align: center;
  513. }
  514. .bottom-btn .l.l-cart .box {
  515. position: relative;
  516. height: 60rpx;
  517. width: 60rpx;
  518. }
  519. .bottom-btn .l.l-cart .cart-count {
  520. height: 28rpx;
  521. width: 28rpx;
  522. z-index: 10;
  523. position: absolute;
  524. top: 0;
  525. right: 0;
  526. background: #b4282d;
  527. text-align: center;
  528. font-size: 18rpx;
  529. color: #fff;
  530. line-height: 28rpx;
  531. border-radius: 50%;
  532. }
  533. .bottom-btn .l.l-cart .icon {
  534. position: absolute;
  535. top: 10rpx;
  536. left: 0;
  537. }
  538. .bottom-btn .l .icon {
  539. display: block;
  540. height: 44rpx;
  541. width: 44rpx;
  542. margin-right: 10rpx;
  543. }
  544. .bottom-btn .c {
  545. float: left;
  546. height: 100rpx;
  547. line-height: 96rpx;
  548. flex: 1;
  549. text-align: center;
  550. color: #333;
  551. border-top: 1px solid #f4f4f4;
  552. border-bottom: 1px solid #f4f4f4;
  553. }
  554. .bottom-btn .r {
  555. border: 1px solid #f94b4b;
  556. background: #f94b4b;
  557. float: left;
  558. height: 100rpx;
  559. line-height: 96rpx;
  560. flex: 1;
  561. text-align: center;
  562. color: #fff;
  563. }
  564. @import "../../lib/wxParse/wxParse.wxss";
  565. .attr-pop-box {
  566. width: 100%;
  567. height: 100%;
  568. position: fixed;
  569. background: rgba(0, 0, 0, 0.5);
  570. z-index: 8;
  571. bottom: 0;
  572. /* display: none; */
  573. }
  574. .attr-pop {
  575. width: 100%;
  576. height: auto;
  577. max-height: 780rpx;
  578. padding: 31.25rpx;
  579. background: #fff;
  580. position: fixed;
  581. z-index: 9;
  582. bottom: 100rpx;
  583. }
  584. .attr-pop .close {
  585. position: absolute;
  586. width: 48rpx;
  587. height: 48rpx;
  588. right: 31.25rpx;
  589. overflow: hidden;
  590. top: 31.25rpx;
  591. }
  592. .attr-pop .close .icon {
  593. width: 48rpx;
  594. height: 48rpx;
  595. }
  596. .attr-pop .img-info {
  597. width: 687.5rpx;
  598. height: 177rpx;
  599. overflow: hidden;
  600. margin-bottom: 41.5rpx;
  601. }
  602. .attr-pop .img {
  603. float: left;
  604. height: 177rpx;
  605. width: 177rpx;
  606. background: #f4f4f4;
  607. margin-right: 31.25rpx;
  608. }
  609. .attr-pop .info {
  610. float: left;
  611. height: 177rpx;
  612. display: flex;
  613. align-items: center;
  614. }
  615. .attr-pop .p {
  616. font-size: 33rpx;
  617. color: #333;
  618. height: 33rpx;
  619. line-height: 33rpx;
  620. margin-bottom: 10rpx;
  621. }
  622. .attr-pop .a {
  623. font-size: 29rpx;
  624. color: #333;
  625. height: 40rpx;
  626. line-height: 40rpx;
  627. }
  628. .spec-con {
  629. width: 100%;
  630. height: auto;
  631. overflow: hidden;
  632. }
  633. .spec-con .name {
  634. height: 32rpx;
  635. margin-bottom: 22rpx;
  636. font-size: 29rpx;
  637. color: #333;
  638. }
  639. .spec-con .values {
  640. height: auto;
  641. margin-bottom: 31.25rpx;
  642. font-size: 0;
  643. }
  644. .spec-con .value {
  645. display: inline-block;
  646. height: 62rpx;
  647. padding: 0 35rpx;
  648. line-height: 56rpx;
  649. text-align: center;
  650. margin-right: 25rpx;
  651. margin-bottom: 16.5rpx;
  652. border: 1px solid #333;
  653. font-size: 25rpx;
  654. color: #333;
  655. }
  656. .spec-con .value.disable {
  657. border: 1px solid #ccc;
  658. color: #ccc;
  659. }
  660. .spec-con .value.selected {
  661. border: 1px solid #b4282d;
  662. color: #b4282d;
  663. }
  664. .number-item .selnum {
  665. width: 322rpx;
  666. height: 71rpx;
  667. border: 1px solid #ccc;
  668. display: flex;
  669. }
  670. .number-item .cut {
  671. width: 93.75rpx;
  672. height: 100%;
  673. text-align: center;
  674. line-height: 65rpx;
  675. }
  676. .number-item .number {
  677. flex: 1;
  678. height: 100%;
  679. text-align: center;
  680. line-height: 68.75rpx;
  681. border-left: 1px solid #ccc;
  682. border-right: 1px solid #ccc;
  683. float: left;
  684. }
  685. .number-item .add {
  686. width: 93.75rpx;
  687. height: 100%;
  688. text-align: center;
  689. line-height: 65rpx;
  690. }
  691. .location-time .icon {
  692. padding-left: 35rpx;
  693. display: flex;
  694. align-items: center;
  695. font-size: 25rpx;
  696. color: #666;
  697. }
  698. .location-time .icon.location {
  699. background: url(https://i.postimg.cc/Hkf6dJzv/placeholder-2.png) 0 center no-repeat;
  700. background-size: 25rpx;
  701. }
  702. .location-time .icon.time {
  703. background: url(https://i.postimg.cc/nrck0qVr/clock.png) 0 center no-repeat;
  704. background-size: 25rpx;
  705. }
  706. .location-time {
  707. /* width: 750rpx; */
  708. height: 73rpx;
  709. background: #f4f4f4;
  710. padding: 0 30rpx;
  711. display: flex;
  712. flex-flow: row nowrap;
  713. align-items: center;
  714. justify-content: space-between;
  715. }
  716. .seller-avatar {
  717. float: right;
  718. width: 120rpx;
  719. height: 120rpx;
  720. margin: 0 16rpx 0 8rpx;
  721. border-radius: 50%;
  722. }
  723. .section-act .seller-t {
  724. float: left;
  725. display: flex;
  726. align-items: center;
  727. /* width: 600rpx; */
  728. height: 188rpx;
  729. overflow: hidden;
  730. line-height: 108rpx;
  731. font-size: 29rpx;
  732. color: #999;
  733. margin-left: 31.25rpx;
  734. }
  735. .section-act .seller-info {
  736. float: left;
  737. align-items: center;
  738. /* width: 600rpx; */
  739. height: 188rpx;
  740. overflow: hidden;
  741. line-height: 108rpx;
  742. font-size: 29rpx;
  743. color: #999;
  744. margin-left: 31.25rpx;
  745. }
  746. .seller-nav {
  747. width: 750rpx;
  748. height: 188rpx;
  749. background: #fff;
  750. margin-bottom: 20rpx;
  751. }
  752. .seller-nav .i {
  753. float: right;
  754. width: 60rpx;
  755. height: 60rpx;
  756. margin-right: 30rpx;
  757. margin-top: 65rpx;
  758. }
  759. .seller-nav.seller-info {
  760. width: 300rpx;
  761. height: 188rpx;
  762. }
  763. .seller-nav .name {
  764. margin-top: 50rpx;
  765. font-size: 35rpx;
  766. height: 60rpx;
  767. line-height: 50rpx;
  768. }
  769. .seller-nav .history {
  770. line-height: 30rpx;
  771. font-size: 27rpx;
  772. }