details.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843
  1. /* pages/details/details.wxss */
  2. @import "../../wxParse/wxParse.wxss";
  3. @import "../confirmOrder/confirmOrder.wxss";
  4. @import "../components/template/loadAnimation/loadAnimation.wxss";
  5. .comment_swiper {
  6. position: absolute;
  7. bottom: 90rpx;
  8. left: 19rpx;
  9. background: rgba(140, 140, 140, 0.5);
  10. max-width: 430rpx;
  11. height: 50rpx;
  12. line-height: 50rpx;
  13. overflow: hidden;
  14. white-space: nowrap;
  15. text-overflow: ellipsis;
  16. border-radius: 30rpx;
  17. padding: 0 21rpx;
  18. box-sizing: border-box;
  19. color: #fff;
  20. font-size: 24rpx;
  21. }
  22. .comment_content {
  23. max-width: 346rpx;
  24. font-size: 24rpx;
  25. height: 40rpx;
  26. line-height: 40rpx;
  27. display: inline-block;
  28. vertical-align: middle;
  29. }
  30. .nickname {
  31. height: 40rpx;
  32. line-height: 40rpx;
  33. font-size: 24rpx;
  34. display: inline-block;
  35. vertical-align: middle;
  36. }
  37. .comment_swiper image {
  38. width: 40rpx;
  39. height: 40rpx;
  40. border-radius: 50rpx;
  41. display: inline-block;
  42. vertical-align: middle;
  43. }
  44. .details_collection {
  45. position: absolute;
  46. bottom: 96rpx;
  47. right: 19rpx;
  48. color: #fff;
  49. padding: 10rpx 30rpx;
  50. background: #7e7e7e;
  51. border-radius: 50rpx;
  52. font-size: 24rpx;
  53. }
  54. .goods_content {
  55. text-align: center;
  56. position: relative;
  57. }
  58. .goods_content::after {
  59. position: absolute;
  60. content: "";
  61. bottom: 0;
  62. left: 0;
  63. width: 100%;
  64. height: 1px;
  65. background: #dadada;
  66. }
  67. .goods_name_title {
  68. font-size: 34rpx;
  69. color: rgb(0, 0, 0);
  70. }
  71. .bonus_price {
  72. font-size: 36rpx;
  73. color: #ef524d;
  74. overflow: hidden;
  75. }
  76. .goods_price {
  77. color: #9b9b9b;
  78. font-size: 22rpx;
  79. }
  80. .goods_desc {
  81. font-size: 24rpx;
  82. display: -webkit-box;
  83. -webkit-box-orient: vertical;
  84. -webkit-line-clamp: 2;
  85. overflow: hidden;
  86. color: #7e7e7e;
  87. min-height: 56rpx;
  88. line-height: 28rpx;
  89. }
  90. .congratulation_text {
  91. position: relative;
  92. padding: 16rpx 0;
  93. margin-left: 25rpx;
  94. color: rgb(167, 167, 167);
  95. font-size: 24rpx;
  96. }
  97. .congratulation_text::after {
  98. content: " ";
  99. position: absolute;
  100. left: 0;
  101. bottom: 1rpx;
  102. right: 0;
  103. height: 1rpx;
  104. border-bottom: 1px solid #c7c7c7;
  105. color: #c7c7c7;
  106. -webkit-transform-origin: 0 100%;
  107. transform-origin: 0 100%;
  108. -webkit-transform: scaleY(0.5);
  109. transform: scaleY(0.5);
  110. }
  111. .congratulation_text.colef524d {
  112. color: #ef524d;
  113. }
  114. .tospecial {
  115. float: right;
  116. padding: 4rpx 16rpx;
  117. margin-right: 25rpx;
  118. background: rgb(236, 92, 86);
  119. border-radius: 20rpx;
  120. color: rgb(242, 203, 100);
  121. font-size: 20rpx;
  122. }
  123. .details_stamps {
  124. /* height: 166rpx; */
  125. padding-top: 40rpx;
  126. padding-bottom: 30rpx;
  127. box-sizing: border-box;
  128. display: flex;
  129. flex-direction: row;
  130. flex-wrap: wrap;
  131. }
  132. .stamps_item {
  133. width: 50%;
  134. display: flex;
  135. align-items: center;
  136. padding-left: 90rpx;
  137. color: #a7a7a7;
  138. font-size: 24rpx;
  139. height: 46rpx;
  140. box-sizing: border-box;
  141. }
  142. .goods_logo {
  143. width: 30rpx;
  144. height: 30rpx;
  145. margin-right: 22rpx;
  146. }
  147. .place-bac247 {
  148. background: rgb(247, 247, 247);
  149. height: 20rpx;
  150. }
  151. .place-bacd9 {
  152. background: #D9D9D9;
  153. height: 1px;
  154. transform: scaleY(.5);
  155. }
  156. /* 评论 */
  157. .comments_box {
  158. padding: 30rpx 30rpx 0;
  159. }
  160. .comments_box.view_img image {
  161. display: block;
  162. width: 100%!important;
  163. }
  164. .comments_box.view_img image.desc_anchor {
  165. display: block;
  166. width: 1px!important;
  167. }
  168. .comments_header {
  169. position: relative;
  170. text-align: center;
  171. height: 42rpx;
  172. line-height: 42rpx;
  173. font-size: 30rpx;
  174. color: #333333;
  175. }
  176. .all_comments {
  177. position: absolute;
  178. top: 0;
  179. right: 0;
  180. /* display: flex; */
  181. /* align-items: center; */
  182. width: 140rpx;
  183. height: 42rpx;
  184. line-height: 42rpx;
  185. font-size: 24rpx;
  186. color: #333333;
  187. }
  188. .all_comments_icon {
  189. position: absolute;
  190. right: 0;
  191. top: 5rpx;
  192. margin-left: 10rpx;
  193. width: 16rpx;
  194. height: 30rpx;
  195. }
  196. .comments_basic_info {
  197. margin: 20rpx 0 0;
  198. display: flex;
  199. justify-content: space-between;
  200. align-items: center;
  201. height: 42rpx;
  202. }
  203. .comments_block {
  204. position: relative;
  205. display: flex;
  206. justify-content: space-between;
  207. align-items: center;
  208. height: 70rpx;
  209. margin: 0 24rpx;
  210. color: #a7a7a7;
  211. font-size: 28rpx;
  212. }
  213. .comments_block::after {
  214. content: " ";
  215. position: absolute;
  216. bottom: 0;
  217. right: 0;
  218. left: 0;
  219. height: 1px;
  220. border-bottom: 1px solid #c7c7c7;
  221. color: #c7c7c7;
  222. -webkit-transform-origin: 0 100%;
  223. transform-origin: 0 100%;
  224. -webkit-transform: scaleY(0.5);
  225. transform: scaleY(0.5);
  226. }
  227. .comment {
  228. position: relative;
  229. background: #fff;
  230. color: #a7a7a7;
  231. padding: 0 30rpx;
  232. /* padding-top: 28rpx;
  233. padding-bottom: 20rpx; */
  234. }
  235. .comments_item {
  236. padding-top: 30rpx;
  237. padding-bottom: 30rpx;
  238. }
  239. .user {
  240. overflow: hidden;
  241. margin-bottom: 18rpx;
  242. padding: 0 24rpx;
  243. line-height: 1.6;
  244. }
  245. .member_avatar image {
  246. width: 60rpx;
  247. height: 60rpx;
  248. border-radius: 10rpx;
  249. display: block;
  250. }
  251. .flex-stars {
  252. display: flex;
  253. align-items: center;
  254. height: 44rpx;
  255. }
  256. .star {
  257. /* display: inline-block; */
  258. float: left;
  259. width: 30rpx;
  260. height: 30rpx;
  261. margin-right: 5rpx;
  262. /* vertical-align: middle; */
  263. }
  264. .comment_time {
  265. text-align: right;
  266. font-size: 20rpx;
  267. }
  268. .spec {
  269. padding: 0 24rpx;
  270. margin-bottom: 10rpx;
  271. font-size: 20rpx;
  272. }
  273. .content {
  274. /* padding: 0 24rpx; */
  275. padding-right: 24rpx;
  276. margin-bottom: 0;
  277. font-size: 22rpx;
  278. color: #000;
  279. line-height: 36rpx;
  280. padding-bottom: 10rpx;
  281. }
  282. .attr_list_item {
  283. display: flex;
  284. justify-content: space-between;
  285. align-items: center;
  286. line-height: 70rpx;
  287. padding: 0 25rpx;
  288. overflow: hidden;
  289. font-size: 24rpx;
  290. color: rgb(167, 167, 167);
  291. }
  292. .details_tabbar {
  293. position: fixed;
  294. display: flex;
  295. z-index: 500;
  296. left: 0;
  297. right: 0;
  298. bottom: 0;
  299. background: #fff;
  300. box-shadow: 0 -2rpx 4rpx 0 rgba(0,0,0,0.09);
  301. }
  302. /* .details_tabbar:before {
  303. content: " ";
  304. position: absolute;
  305. left: 0;
  306. top: 0;
  307. right: 0;
  308. height: 1px;
  309. border-top: 1px solid #c0bfc4;
  310. color: #c0bfc4;
  311. -webkit-transform-origin: 0 0;
  312. transform-origin: 0 0;
  313. -webkit-transform: scaleY(0.5);
  314. transform: scaleY(0.5);
  315. } */
  316. .right_line {
  317. position: relative;
  318. }
  319. .right_line::after {
  320. content: '';
  321. position: absolute;
  322. bottom: 0;
  323. top: 0;
  324. right: 0;
  325. width: 1px;
  326. transform: scaleX(.5);
  327. transform-origin: 0 0;
  328. pointer-events: none;
  329. background: #D1D1D1;
  330. }
  331. .details_tabbar_item {
  332. position: relative;
  333. display: block;
  334. -webkit-box-flex: 4;
  335. -webkit-flex: 4;
  336. flex: 4;
  337. font-size: 0;
  338. color: #999;
  339. text-align: center;
  340. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  341. padding: 18rpx 0 0;
  342. }
  343. .tabbar_icon_wrap {
  344. width: 40rpx;
  345. height: 40rpx;
  346. margin: 0 auto 4rpx;
  347. }
  348. .home_icon {
  349. width: 34rpx;
  350. height: 30rpx;
  351. }
  352. .shopcart_icon {
  353. width: 36rpx;
  354. height: 36rpx;
  355. }
  356. .details_tabbar_label {
  357. text-align: center;
  358. line-height: 28rpx;
  359. font-size: 20rpx;
  360. color: #666;
  361. }
  362. .place_details_tabbar {
  363. height: 100rpx;
  364. }
  365. .see_more_details {
  366. margin: 40rpx auto;
  367. text-align: center;
  368. width: 40%;
  369. padding: 15rpx;
  370. font-size: 30rpx;
  371. border-radius: 8rpx;
  372. color: rgb(255, 78, 78);
  373. border: 1px solid #ff4e4e;
  374. }
  375. .details_tabbar_simple {
  376. text-align: center;
  377. background: #D3BB7E;
  378. flex: 10 1 0%;
  379. padding: 0;
  380. height: 100rpx;
  381. line-height: 100rpx;
  382. font-size: 30rpx;
  383. color: #fff;
  384. }
  385. .details_tabbar_simple.buy {
  386. background: #2B2B2B;
  387. }
  388. .details_tabbar_simple.buy.soldout {
  389. flex: 3 1 0%;
  390. }
  391. .simple_shopcart, .simple_explain {
  392. position: fixed;
  393. left: 0;
  394. right: 0;
  395. bottom: 0;
  396. z-index: 502;
  397. font-size: 34rpx;
  398. background: #fff;
  399. -webkit-transition: all 0.3s;
  400. transition: all 0.3s;
  401. -webkit-transform: translateY(110%);
  402. transform: translateY(110%);
  403. }
  404. .simple_shopcart {
  405. height: 800rpx;
  406. }
  407. .simple_explain {
  408. height: 900rpx;
  409. overflow: hidden;
  410. }
  411. .show_animation {
  412. -webkit-transform: translateY(0);
  413. transform: translateY(0);
  414. }
  415. .animation_popup {
  416. position: fixed;
  417. left: 0;
  418. right: 0;
  419. top: 0;
  420. bottom: 0;
  421. z-index: -1;
  422. background: rgba(0, 0, 0, 0.5);
  423. opacity: 0;
  424. /* -webkit-transition: opacity 400ms;
  425. transition: opacity 400ms; */
  426. }
  427. .animation_popup.show_popup {
  428. z-index: 501;
  429. opacity: 1;
  430. }
  431. .pal30 {
  432. padding-left: 30rpx;
  433. }
  434. .pab30 {
  435. padding-bottom: 30rpx;
  436. }
  437. .simple_goods_info {
  438. width: 100%;
  439. display: flex;
  440. display: -webkit-flex;
  441. -webkit-align-items: center;
  442. align-items: center;
  443. }
  444. .flexbox_item {
  445. flex: 1;
  446. -webkit-flex: 1;
  447. min-width: 20px;
  448. width: 0%;
  449. text-align: left;
  450. margin-left: 8rpx;
  451. }
  452. .goods_small_img {
  453. display: block;
  454. width: 228rpx;
  455. height: 228rpx;
  456. margin-top: -50rpx;
  457. margin-left: 5rpx;
  458. border-radius: 10rpx;
  459. }
  460. .simple_goods_price {
  461. line-height: 50rpx;
  462. font-size: 36rpx;
  463. color: #333;
  464. }
  465. .goods_original_price {
  466. font-size: 24rpx;
  467. color: rgb(167, 167, 167);
  468. }
  469. .simple_goods_spec {
  470. padding: 15rpx 0 15rpx 25rpx;
  471. }
  472. .simple_sec_content {
  473. height: 200rpx;
  474. overflow-x: hidden;
  475. margin: 20rpx 0;
  476. padding-bottom: 30rpx;
  477. }
  478. .sec_content_btn {
  479. display: inline-block;
  480. background: #fff;
  481. color: #000;
  482. border-radius: 5rpx;
  483. padding: 10rpx 15rpx;
  484. font-size: 24rpx;
  485. border: 1rpx solid #000;
  486. margin-right: 15rpx;
  487. margin-bottom: 15rpx;
  488. }
  489. .sec_content_btn.sec_active {
  490. background: #2b2b2b;
  491. color: #fff;
  492. border: 1rpx solid #fff;
  493. }
  494. .simple_goods_compute {
  495. color: #333;
  496. font-size: 40rpx;
  497. display: inline-block;
  498. width: 80rpx;
  499. text-align: center;
  500. }
  501. .simple_goods_result {
  502. display: inline-block;
  503. width: 140rpx;
  504. text-align: center;
  505. font-size: 30rpx;
  506. }
  507. .simple_goods_buy {
  508. position: absolute;
  509. bottom: 0;
  510. left: 0;
  511. right: 0;
  512. background: #2b2b2b;
  513. color: #fff;
  514. border: none;
  515. text-align: center;
  516. height: 90rpx;
  517. line-height: 90rpx;
  518. font-size: 30rpx;
  519. }
  520. .close_btn,.close_explain {
  521. position: absolute;
  522. right: 0;
  523. top: 0;
  524. padding: 15rpx;
  525. }
  526. .close_btn {
  527. width: 40rpx;
  528. height: 40rpx;
  529. }
  530. .close_explain {
  531. width: 100rpx;
  532. height: 100rpx;
  533. }
  534. .close_btn::before, .close_btn::after {
  535. content: '';
  536. position: absolute;
  537. height: 2rpx;
  538. top: 50%;
  539. left: 15rpx;
  540. right: 15rpx;
  541. background: #2b2b2b;
  542. }
  543. .close_btn::before {
  544. -webkit-transform: rotate(45deg);
  545. transform: rotate(45deg);
  546. }
  547. .close_btn::after {
  548. -webkit-transform: rotate(-45deg);
  549. transform: rotate(-45deg);
  550. }
  551. .gifts_wrap {
  552. font-size: 20rpx;
  553. background: #ffe3c6;
  554. border-radius: 5rpx;
  555. padding: 10rpx;
  556. margin-right: 18rpx;
  557. margin-top: 10rpx;
  558. }
  559. .gift_tag {
  560. background: #2b2b2b;
  561. border-radius: 4rpx;
  562. padding: 2rpx;
  563. color: #fff;
  564. }
  565. .gift_underline {
  566. text-decoration: underline;
  567. }
  568. /* 新版 */
  569. .imageHeight {
  570. position: absolute;
  571. z-index: -1;
  572. opacity: 0;
  573. width: 1px;
  574. height: 1px;
  575. }
  576. .align_center {
  577. display: flex;
  578. align-items: center;
  579. }
  580. .n_goods_content {
  581. padding: 20rpx 48rpx 20rpx 30rpx;
  582. }
  583. .n_price_content {
  584. height: 48rpx;
  585. }
  586. .n_goods_title {
  587. margin-top: 20rpx;
  588. line-height: 50rpx;
  589. font-size: 34rpx;
  590. font-weight: bold;
  591. color: #333333;
  592. }
  593. .promotion_header {
  594. padding-left: 30rpx;
  595. background: #FFEEBD;
  596. font-size: 24rpx;
  597. color: #7E7E7E;
  598. height: 48rpx;
  599. }
  600. .promotion_single {
  601. padding: 2rpx 8rpx;
  602. margin-right: 10rpx;
  603. font-size: 20rpx;
  604. border-radius: 40rpx;
  605. color: #fff;
  606. background: #2b2b2b;
  607. }
  608. .brand_auth {
  609. position: relative;
  610. float: left;
  611. margin-top: 7rpx;
  612. margin-right: 10rpx;
  613. padding: 10rpx 10rpx 6rpx;
  614. height: 20rpx;
  615. line-height: 20rpx;
  616. font-size: 20rpx;
  617. color: #2B2B2B;
  618. }
  619. .brand_auth::after {
  620. content: '';
  621. position: absolute;
  622. top: 0;
  623. left: 0;
  624. width: 200%;
  625. height: 200%;
  626. transform: scale(.5);
  627. transform-origin: 0 0;
  628. pointer-events: none;
  629. box-sizing: border-box;
  630. border: 0 solid #2b2b2b;
  631. border-radius: 40rpx;
  632. border-width: 1px;
  633. }
  634. .ensure_desc {
  635. position: relative;
  636. padding: 30rpx 50rpx 30rpx 30rpx;
  637. }
  638. .see_ensure_wrap {
  639. position: absolute;
  640. display: flex;
  641. align-items: center;
  642. justify-content: center;
  643. width: 100rpx;
  644. right: 0;
  645. top: 0;
  646. bottom: 0;
  647. }
  648. .see_ensure_desc {
  649. width: 16rpx;
  650. height: 30rpx;
  651. position: absolute;
  652. top: 50%;
  653. margin-top: -15rpx;
  654. right: 30rpx;
  655. }
  656. .ensure_desc_text {
  657. margin-top: 10rpx;
  658. line-height: 34rpx;
  659. font-size: 24rpx;
  660. color: #666666;
  661. }
  662. .stamps_list {
  663. display: flex;
  664. }
  665. .n_stamps_item {
  666. display: flex;
  667. /* flex: 0 1 auto; */
  668. align-items: center;
  669. margin-right: 50rpx;
  670. color: #666;
  671. font-size: 24rpx;
  672. height: 40rpx;
  673. box-sizing: border-box;
  674. }
  675. .stamp_pic {
  676. width: 40rpx;
  677. height: 40rpx;
  678. margin-right: 10rpx;
  679. }
  680. .stamp_pic.zg {
  681. width: 35rpx;
  682. }
  683. .content_img {
  684. display: inline-block;
  685. width: 116rpx;
  686. height: 116rpx;
  687. margin: 24rpx 24rpx 24rpx 0;
  688. vertical-align: middle
  689. }
  690. .content_src_img {
  691. max-width: 100%;
  692. max-height: 100%;
  693. }
  694. .scroll-view_H{
  695. white-space: nowrap;
  696. }
  697. .scroll-view-item_H{
  698. display: inline-block;
  699. vertical-align: middle;
  700. }
  701. .bundle_scroll_view {
  702. width: 160rpx;
  703. }
  704. .scroll_place {
  705. margin: 0 10rpx;
  706. height: 160rpx;
  707. line-height: 160rpx;
  708. vertical-align: top;
  709. }
  710. .bundle_img {
  711. width: 160rpx;
  712. height: 160rpx;
  713. border: 1rpx solid #d9d9d9;
  714. }
  715. .bundle_desc {
  716. white-space: normal;
  717. font-size: 20rpx;
  718. line-height: 30rpx;
  719. height: 60rpx;
  720. overflow: hidden;
  721. }
  722. .transform_bundleList_wrapper {
  723. width: 60rpx;
  724. height: 60rpx;
  725. }
  726. .transform_bundleList {
  727. margin-left: 44rpx;
  728. width: 16rpx;
  729. height: 30rpx;
  730. transform: rotate(90deg);
  731. }
  732. .transform_bundleList.bundle_active {
  733. transform: rotate(-90deg);
  734. }
  735. /* .default_place_flex {
  736. -webkit-flex:1;
  737. flex:1;
  738. } */
  739. .add_bundle_cart {
  740. padding: 12rpx 44rpx;
  741. margin-left: 50rpx;
  742. background: #2b2b2b;
  743. color: #fff;
  744. font-weight: bold;
  745. font-size: 30rpx;
  746. border-radius: 6rpx;
  747. }
  748. .bundle_list_hide {
  749. display: none;
  750. }
  751. .goods_gap {
  752. margin: 20rpx -48rpx 0 -30rpx;
  753. padding: 10rpx 0 10rpx 30rpx;
  754. box-sizing: border-box;
  755. display: flex;
  756. align-items: center;
  757. background: #f7f7f7;
  758. line-height: 48rpx;
  759. font-size: 24rpx;
  760. color: #333;
  761. }