1
0

goods.wxss 23 KB

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