goods.wxss 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878
  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. overflow:hidden;
  210. }
  211. .comments .reply-user {
  212. float: left;
  213. width: auto;
  214. height: 67rpx;
  215. line-height: 67rpx;
  216. font-size: 0;
  217. margin-left: 50rpx;
  218. overflow:hidden;
  219. }
  220. .comments .reply-user image {
  221. float: left;
  222. width: 50rpx;
  223. height: 50rpx;
  224. margin-right: 17rpx;
  225. margin-top: 5rpx;
  226. border-radius: 50%;
  227. }
  228. .comments .reply-user text {
  229. display:inline-block;
  230. width:auto;
  231. height:66rpx;
  232. overflow:hidden;
  233. font-size:29rpx;
  234. line-height:66rpx;
  235. font-weight:bold;
  236. }
  237. .comments .user image {
  238. float: left;
  239. width: 67rpx;
  240. height: 67rpx;
  241. margin-right: 17rpx;
  242. border-radius: 50%;
  243. }
  244. .comments .user text {
  245. display: inline-block;
  246. width: auto;
  247. height: 66rpx;
  248. overflow: hidden;
  249. font-size: 29rpx;
  250. line-height: 66rpx;
  251. font-weight: bold;
  252. }
  253. .comments .time {
  254. display: block;
  255. float: right;
  256. width: auto;
  257. height: 67rpx;
  258. line-height: 67rpx;
  259. color: #7f7f7f;
  260. font-size: 25rpx;
  261. margin-right: 30rpx;
  262. }
  263. .comments .content {
  264. width: 630rpx;
  265. padding-right: 30rpx;
  266. line-height: 45.8rpx;
  267. font-size: 29rpx;
  268. margin-bottom: 24rpx;
  269. margin-left: 80rpx;
  270. }
  271. .comments .reply-content {
  272. /* width: 720rpx; */
  273. width: 600rpx;
  274. padding-right: 30rpx;
  275. line-height: 45.8rpx;
  276. font-size: 29rpx;
  277. margin-bottom: 24rpx;
  278. margin-left: 115rpx;
  279. }
  280. .comments .imgs {
  281. width: 720rpx;
  282. height: auto;
  283. margin-bottom: 25rpx;
  284. }
  285. .comments .imgs .img {
  286. height: 150rpx;
  287. width: 150rpx;
  288. margin-right: 28rpx;
  289. }
  290. .comments .spec {
  291. width: 720rpx;
  292. padding-right: 30rpx;
  293. line-height: 30rpx;
  294. font-size: 24rpx;
  295. color: #999;
  296. margin-bottom: 30rpx;
  297. }
  298. .goods-attr {
  299. width: 750rpx;
  300. height: auto;
  301. overflow: hidden;
  302. padding: 0 31.25rpx 25rpx 31.25rpx;
  303. background: #fff;
  304. }
  305. .goods-attr .t {
  306. width: 687.5rpx;
  307. height: 104rpx;
  308. line-height: 104rpx;
  309. font-size: 38.5rpx;
  310. }
  311. .goods-attr .item {
  312. width: 687.5rpx;
  313. height: 68rpx;
  314. padding: 11rpx 20rpx;
  315. margin-bottom: 11rpx;
  316. background: #f7f7f7;
  317. font-size: 38.5rpx;
  318. }
  319. .goods-attr .left {
  320. float: left;
  321. font-size: 25rpx;
  322. width: 134rpx;
  323. height: 45rpx;
  324. line-height: 45rpx;
  325. overflow: hidden;
  326. color: #999;
  327. }
  328. .goods-attr .right {
  329. float: left;
  330. font-size: 36.5rpx;
  331. margin-left: 20rpx;
  332. width: 480rpx;
  333. height: 45rpx;
  334. line-height: 45rpx;
  335. overflow: hidden;
  336. color: #333;
  337. }
  338. .detail {
  339. width: 750rpx;
  340. height: auto;
  341. overflow: hidden;
  342. }
  343. .detail image {
  344. width: 750rpx;
  345. display: block;
  346. }
  347. .common-problem {
  348. width: 750rpx;
  349. height: auto;
  350. overflow: hidden;
  351. }
  352. .common-problem .h {
  353. position: relative;
  354. height: 145.5rpx;
  355. width: 750rpx;
  356. padding: 56.25rpx 0;
  357. background: #fff;
  358. text-align: center;
  359. }
  360. .common-problem .h .line {
  361. display: inline-block;
  362. position: absolute;
  363. top: 72rpx;
  364. left: 0;
  365. z-index: 2;
  366. height: 1px;
  367. margin-left: 225rpx;
  368. width: 300rpx;
  369. background: #ccc;
  370. }
  371. .common-problem .h .title {
  372. display: inline-block;
  373. position: absolute;
  374. top: 56.125rpx;
  375. left: 0;
  376. z-index: 3;
  377. height: 33rpx;
  378. margin-left: 285rpx;
  379. width: 180rpx;
  380. background: #fff;
  381. }
  382. .common-problem .b {
  383. width: 750rpx;
  384. height: auto;
  385. overflow: hidden;
  386. padding: 0rpx 30rpx;
  387. background: #fff;
  388. }
  389. .common-problem .item {
  390. height: auto;
  391. overflow: hidden;
  392. padding-bottom: 25rpx;
  393. }
  394. .common-problem .question-box .spot {
  395. float: left;
  396. display: block;
  397. height: 8rpx;
  398. width: 8rpx;
  399. background: #b4282d;
  400. border-radius: 50%;
  401. margin-top: 11rpx;
  402. }
  403. .common-problem .question-box .question {
  404. float: left;
  405. line-height: 30rpx;
  406. padding-left: 8rpx;
  407. display: block;
  408. font-size: 26rpx;
  409. padding-bottom: 15rpx;
  410. color: #303030;
  411. }
  412. .common-problem .answer {
  413. line-height: 36rpx;
  414. padding-left: 16rpx;
  415. font-size: 26rpx;
  416. color: #787878;
  417. }
  418. .related-goods {
  419. width: 750rpx;
  420. height: auto;
  421. overflow: hidden;
  422. }
  423. .related-goods .h {
  424. position: relative;
  425. height: 145.5rpx;
  426. width: 750rpx;
  427. padding: 56.25rpx 0;
  428. background: #fff;
  429. text-align: center;
  430. border-bottom: 1px solid #f4f4f4;
  431. }
  432. .related-goods .h .line {
  433. display: inline-block;
  434. position: absolute;
  435. top: 72rpx;
  436. left: 0;
  437. z-index: 2;
  438. height: 1px;
  439. margin-left: 225rpx;
  440. width: 300rpx;
  441. background: #ccc;
  442. }
  443. .related-goods .h .title {
  444. display: inline-block;
  445. position: absolute;
  446. top: 56.125rpx;
  447. left: 0;
  448. z-index: 3;
  449. height: 33rpx;
  450. margin-left: 285rpx;
  451. width: 180rpx;
  452. background: #fff;
  453. }
  454. .related-goods .b {
  455. width: 750rpx;
  456. height: auto;
  457. overflow: hidden;
  458. }
  459. .related-goods .b .item {
  460. float: left;
  461. background: #fff;
  462. width: 375rpx;
  463. height: auto;
  464. overflow: hidden;
  465. text-align: center;
  466. padding: 15rpx 31.25rpx;
  467. border-right: 1px solid #f4f4f4;
  468. border-bottom: 1px solid #f4f4f4;
  469. }
  470. .related-goods .item .img {
  471. width: 311.45rpx;
  472. height: 311.45rpx;
  473. }
  474. .related-goods .item .name {
  475. display: block;
  476. width: 311.45rpx;
  477. height: 35rpx;
  478. margin: 11.5rpx 0 15rpx 0;
  479. text-align: center;
  480. overflow: hidden;
  481. font-size: 30rpx;
  482. color: #333;
  483. }
  484. .related-goods .item .price {
  485. display: block;
  486. width: 311.45rpx;
  487. height: 30rpx;
  488. text-align: center;
  489. font-size: 30rpx;
  490. color: #f94b4b;
  491. }
  492. .bottom-btn {
  493. position: fixed;
  494. left: 0;
  495. bottom: 0;
  496. z-index: 10;
  497. width: 750rpx;
  498. height: 100rpx;
  499. display: flex;
  500. background: #fff;
  501. }
  502. .bottom-btn .l {
  503. float: left;
  504. height: 100rpx;
  505. width: 200rpx;
  506. border: 1px solid #f4f4f4;
  507. display: flex;
  508. align-items: center;
  509. justify-content: center;
  510. }
  511. .bottom-btn .l.l-collect {
  512. border-right: none;
  513. border-left: none;
  514. text-align: center;
  515. }
  516. .bottom-btn .l.l-cart .box {
  517. position: relative;
  518. height: 60rpx;
  519. width: 60rpx;
  520. }
  521. .bottom-btn .l.l-cart .cart-count {
  522. height: 28rpx;
  523. width: 28rpx;
  524. z-index: 10;
  525. position: absolute;
  526. top: 0;
  527. right: 0;
  528. background: #b4282d;
  529. text-align: center;
  530. font-size: 18rpx;
  531. color: #fff;
  532. line-height: 28rpx;
  533. border-radius: 50%;
  534. }
  535. .bottom-btn .l.l-cart .icon {
  536. position: absolute;
  537. top: 10rpx;
  538. left: 0;
  539. }
  540. .bottom-btn .l .icon {
  541. display: block;
  542. height: 44rpx;
  543. width: 44rpx;
  544. margin-right: 10rpx;
  545. }
  546. .bottom-btn .c {
  547. float: left;
  548. height: 100rpx;
  549. line-height: 96rpx;
  550. flex: 1;
  551. text-align: center;
  552. color: #333;
  553. border-top: 1px solid #f4f4f4;
  554. border-bottom: 1px solid #f4f4f4;
  555. }
  556. .bottom-btn .r {
  557. border: 1px solid #f94b4b;
  558. background: #f94b4b;
  559. float: left;
  560. height: 100rpx;
  561. line-height: 96rpx;
  562. flex: 1;
  563. text-align: center;
  564. color: #fff;
  565. }
  566. @import "../../lib/wxParse/wxParse.wxss";
  567. .attr-pop-box {
  568. width: 100%;
  569. height: 100%;
  570. position: fixed;
  571. background: rgba(0, 0, 0, 0.5);
  572. z-index: 8;
  573. bottom: 0;
  574. /* display: none; */
  575. }
  576. .attr-pop {
  577. width: 100%;
  578. height: auto;
  579. max-height: 780rpx;
  580. padding: 31.25rpx;
  581. background: #fff;
  582. position: fixed;
  583. z-index: 9;
  584. bottom: 100rpx;
  585. }
  586. .attr-pop .close {
  587. position: absolute;
  588. width: 48rpx;
  589. height: 48rpx;
  590. right: 31.25rpx;
  591. overflow: hidden;
  592. top: 31.25rpx;
  593. }
  594. .attr-pop .close .icon {
  595. width: 48rpx;
  596. height: 48rpx;
  597. }
  598. .attr-pop .img-info {
  599. width: 687.5rpx;
  600. height: 177rpx;
  601. overflow: hidden;
  602. margin-bottom: 41.5rpx;
  603. }
  604. .attr-pop .img {
  605. float: left;
  606. height: 177rpx;
  607. width: 177rpx;
  608. background: #f4f4f4;
  609. margin-right: 31.25rpx;
  610. }
  611. .attr-pop .info {
  612. float: left;
  613. height: 177rpx;
  614. display: flex;
  615. align-items: center;
  616. }
  617. .attr-pop .p {
  618. font-size: 33rpx;
  619. color: #333;
  620. height: 33rpx;
  621. line-height: 33rpx;
  622. margin-bottom: 10rpx;
  623. }
  624. .attr-pop .a {
  625. font-size: 29rpx;
  626. color: #333;
  627. height: 40rpx;
  628. line-height: 40rpx;
  629. }
  630. .spec-con {
  631. width: 100%;
  632. height: auto;
  633. overflow: hidden;
  634. }
  635. .spec-con .name {
  636. height: 32rpx;
  637. margin-bottom: 22rpx;
  638. font-size: 29rpx;
  639. color: #333;
  640. }
  641. .spec-con .values {
  642. height: auto;
  643. margin-bottom: 31.25rpx;
  644. font-size: 0;
  645. }
  646. .spec-con .value {
  647. display: inline-block;
  648. height: 62rpx;
  649. padding: 0 35rpx;
  650. line-height: 56rpx;
  651. text-align: center;
  652. margin-right: 25rpx;
  653. margin-bottom: 16.5rpx;
  654. border: 1px solid #333;
  655. font-size: 25rpx;
  656. color: #333;
  657. }
  658. .spec-con .value.disable {
  659. border: 1px solid #ccc;
  660. color: #ccc;
  661. }
  662. .spec-con .value.selected {
  663. border: 1px solid #b4282d;
  664. color: #b4282d;
  665. }
  666. .number-item .selnum {
  667. width: 322rpx;
  668. height: 71rpx;
  669. border: 1px solid #ccc;
  670. display: flex;
  671. }
  672. .number-item .cut {
  673. width: 93.75rpx;
  674. height: 100%;
  675. text-align: center;
  676. line-height: 65rpx;
  677. }
  678. .number-item .number {
  679. flex: 1;
  680. height: 100%;
  681. text-align: center;
  682. line-height: 68.75rpx;
  683. border-left: 1px solid #ccc;
  684. border-right: 1px solid #ccc;
  685. float: left;
  686. }
  687. .number-item .add {
  688. width: 93.75rpx;
  689. height: 100%;
  690. text-align: center;
  691. line-height: 65rpx;
  692. }
  693. .location-time .icon {
  694. padding-left: 35rpx;
  695. display: flex;
  696. align-items: center;
  697. font-size: 25rpx;
  698. color: #666;
  699. }
  700. .location-time .icon.location {
  701. background: url(https://i.postimg.cc/Hkf6dJzv/placeholder-2.png) 0 center no-repeat;
  702. background-size: 25rpx;
  703. }
  704. .location-time .icon.time {
  705. background: url(https://i.postimg.cc/nrck0qVr/clock.png) 0 center no-repeat;
  706. background-size: 25rpx;
  707. }
  708. .location-time {
  709. /* width: 750rpx; */
  710. height: 73rpx;
  711. background: #f4f4f4;
  712. padding: 0 30rpx;
  713. display: flex;
  714. flex-flow: row nowrap;
  715. align-items: center;
  716. justify-content: space-between;
  717. }
  718. .seller-avatar {
  719. float: right;
  720. width: 120rpx;
  721. height: 120rpx;
  722. margin: 0 16rpx 0 8rpx;
  723. border-radius: 50%;
  724. }
  725. .section-act .seller-t {
  726. float: left;
  727. display: flex;
  728. align-items: center;
  729. /* width: 600rpx; */
  730. height: 188rpx;
  731. overflow: hidden;
  732. line-height: 108rpx;
  733. font-size: 29rpx;
  734. color: #999;
  735. margin-left: 31.25rpx;
  736. }
  737. .section-act .seller-info {
  738. float: left;
  739. align-items: center;
  740. /* width: 600rpx; */
  741. height: 188rpx;
  742. overflow: hidden;
  743. line-height: 108rpx;
  744. font-size: 29rpx;
  745. color: #999;
  746. margin-left: 31.25rpx;
  747. }
  748. .seller-nav {
  749. width: 750rpx;
  750. height: 188rpx;
  751. background: #fff;
  752. margin-bottom: 20rpx;
  753. }
  754. .seller-nav .i {
  755. float: right;
  756. width: 60rpx;
  757. height: 60rpx;
  758. margin-right: 30rpx;
  759. margin-top: 65rpx;
  760. }
  761. .seller-nav.seller-info {
  762. width: 300rpx;
  763. height: 188rpx;
  764. }
  765. .seller-nav .name {
  766. margin-top: 50rpx;
  767. font-size: 35rpx;
  768. height: 60rpx;
  769. line-height: 50rpx;
  770. }
  771. .seller-nav .history {
  772. line-height: 30rpx;
  773. font-size: 27rpx;
  774. }