cps-taobao.wxss 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682
  1. page,
  2. view,
  3. image,
  4. input,
  5. textarea {
  6. display: block;
  7. box-sizing: border-box;
  8. }
  9. .van-cell {
  10. padding: 10px 38rpx;
  11. }
  12. .container {
  13. background-color: #F2f2f2;
  14. min-height: 100%;
  15. padding-bottom: 100rpx;
  16. }
  17. .scroll-container {
  18. height: 100vh;
  19. padding-bottom: 64rpx;
  20. }
  21. .tabs-container {
  22. width: 100%;
  23. display: flex;
  24. background-color: white;
  25. }
  26. .home-o {
  27. width: 20%;
  28. }
  29. .swiper-container {
  30. width: 100%;
  31. position: relative;
  32. }
  33. .swiper_box {
  34. width: 100%;
  35. height: 748rpx;
  36. }
  37. swiper-item image {
  38. width: 100%;
  39. display: inline-block;
  40. overflow: hidden;
  41. height: 748rpx;
  42. }
  43. .goods-info {
  44. background-color: #fff;
  45. padding: 35rpx 0;
  46. width: 100%;
  47. position: relative;
  48. }
  49. .goods-info-top-container {
  50. display: flex;
  51. justify-content: space-between;
  52. margin-bottom: 10rpx;
  53. }
  54. .goods-info-fx {
  55. bottom: 60rpx;
  56. display: flex;
  57. align-items: center;
  58. justify-content: space-between;
  59. margin-right: 35rpx;
  60. }
  61. .goods-info-fx .item {
  62. /* height: 50rpx; */
  63. right: 130rpx;
  64. top: 100rpx;
  65. display: flex;
  66. flex-direction: column;
  67. align-items: center;
  68. justify-content: center;
  69. font-size: 24rpx;
  70. background: #fff;
  71. z-index: 20;
  72. }
  73. .goods-info-fx .left {
  74. margin-right: 10px;
  75. }
  76. .goods-info-fx .icon-title{
  77. padding-top:5px ;
  78. font-size: 11px;
  79. }
  80. .goods-info-fx .item image {
  81. width: 50rpx;
  82. height: 50rpx;
  83. }
  84. .goods-info-fx .item button {
  85. position: absolute;
  86. height: 100%;
  87. width: 100%;
  88. opacity: 0;
  89. z-index: 99;
  90. }
  91. .goods-info .goods-title {
  92. box-sizing: border-box;
  93. padding: 0 30rpx;
  94. font-size: 32rpx;
  95. line-height: 1.4;
  96. color: #000;
  97. /* padding-bottom: 26rpx; */
  98. }
  99. .goods-info .goods-share {
  100. box-sizing: border-box;
  101. padding: 0 30rpx;
  102. font-size: 25rpx;
  103. line-height: 1.4;
  104. color: #CC0000;
  105. padding-top: 26rpx;
  106. }
  107. .vcell{
  108. border-bottom-left-radius: 12px;
  109. border-bottom-right-radius: 12px;
  110. }
  111. .goods-profile {
  112. display: flex;
  113. align-items: center;
  114. }
  115. .goods-profile .p {
  116. color: #e64340;
  117. font-size: 20pt;
  118. margin-left: 30rpx;
  119. }
  120. .goods-profile .p text {
  121. font-size: 12pt;
  122. }
  123. .goods-profile .r {
  124. color: #ccc;
  125. font-size: 10pt;
  126. margin-left: 30rpx;
  127. }
  128. .row-arrow {
  129. width: 100vw;
  130. padding: 0 32rpx;
  131. display: flex;
  132. justify-content: space-between;
  133. align-items: center;
  134. height: 102rpx;
  135. font-size: 28rpx;
  136. line-height: 102rpx;
  137. background: #fff;
  138. margin-bottom: 32rpx;
  139. }
  140. .row-arrow image {
  141. width: 40rpx;
  142. height: 40rpx;
  143. }
  144. .goods-des-info {
  145. width: 100%;
  146. box-sizing: border-box;
  147. background-color: #fff;
  148. border-radius: 12px;
  149. }
  150. .label-title {
  151. font-size: 28rpx;
  152. color: #000000;
  153. padding: 30rpx;
  154. display: flex;
  155. justify-content: space-between;
  156. }
  157. .label-title .left{
  158. border-left: 3px solid #e64340;
  159. height: auto;
  160. padding-left: 10px;
  161. }
  162. .goods-text {
  163. padding: 0 10rpx;
  164. font-size: 28rpx;
  165. color: #666666;
  166. line-height: 56rpx;
  167. margin-bottom: 30rpx;
  168. }
  169. .goods-text image {
  170. width: 100%;
  171. }
  172. .des-imgs {
  173. width: 100%;
  174. }
  175. .des-imgs image {
  176. width: 100%;
  177. }
  178. .footer-box {
  179. width: 100%;
  180. height: 100rpx;
  181. background-color: #fff;
  182. position: fixed;
  183. bottom: 0;
  184. left: 0;
  185. display: flex;
  186. box-shadow: 0 0 1rpx 0;
  187. align-items: center;
  188. }
  189. .footer-box .contact {
  190. position: relative;
  191. height: 100%;
  192. display: flex;
  193. justify-content: center;
  194. align-items: center;
  195. margin-left: 32rpx;
  196. }
  197. .footer-box .contact button {
  198. position: absolute;
  199. height: 100%;
  200. width: 100%;
  201. opacity: 0;
  202. z-index: 99;
  203. }
  204. .footer-box .contact image {
  205. width: 60rpx;
  206. height: 60rpx;
  207. }
  208. .footer-box .shop-cart-btn {
  209. position: relative;
  210. height: 100%;
  211. display: flex;
  212. justify-content: center;
  213. align-items: center;
  214. margin-left: 32rpx;
  215. }
  216. .footer-box .shop-cart-btn image {
  217. width: 55rpx;
  218. height: 55rpx;
  219. }
  220. .fav-icon {
  221. width: 60rpx;
  222. height: 60rpx;
  223. margin-left: 32rpx;
  224. /*707070*/
  225. }
  226. .footer-box .shop-cart-btn .shop-num {
  227. position: absolute;
  228. color: #fff;
  229. left: 32rpx;
  230. top: 10rpx;
  231. width: 40rpx;
  232. height: 40rpx;
  233. line-height: 40rpx;
  234. text-align: center;
  235. border-radius: 50%;
  236. background: #e64340;
  237. font-size: 24rpx;
  238. }
  239. .footer-box .join-shop-cart {
  240. text-align: center;
  241. height: 100%;
  242. line-height: 100rpx;
  243. background-color: #ff6850;
  244. color: #fff;
  245. font-size: 34rpx;
  246. flex: 1;
  247. margin-left: 32rpx;
  248. }
  249. .footer-box .now-buy {
  250. text-align: center;
  251. height: 100%;
  252. width: 250rpx;
  253. line-height: 100rpx;
  254. background-color: #e64340;
  255. color: #fff;
  256. font-size: 34rpx;
  257. flex: 1;
  258. }
  259. .show-popup {
  260. position: fixed;
  261. top: 0;
  262. left: 0;
  263. width: 100%;
  264. height: 100%;
  265. z-index: 999;
  266. }
  267. .popup-mask {
  268. position: fixed;
  269. top: 0;
  270. left: 0;
  271. width: 100%;
  272. height: 100%;
  273. background-color: rgba(0, 0, 0, 0.5);
  274. z-index: 5;
  275. }
  276. .popup-contents {
  277. position: fixed;
  278. left: 0;
  279. bottom: 0;
  280. width: 100%;
  281. background-color: #fff;
  282. z-index: 6;
  283. }
  284. .pop-goods-info {
  285. display: flex;
  286. justify-content: space-between;
  287. align-items: center;
  288. margin-left: 32rpx;
  289. margin-right: 32rpx;
  290. padding: 30rpx 0;
  291. border-bottom: 1px solid #eee;
  292. }
  293. .pop-img-box {
  294. width: 120rpx;
  295. height: 120rpx;
  296. overflow: hidden;
  297. margin-right: 26rpx;
  298. }
  299. .pop-img-box .goods-thumbnail {
  300. width: 120rpx;
  301. height: 120rpx;
  302. }
  303. .pop-goods-title {
  304. width: 484rpx;
  305. text-overflow: ellipsis;
  306. white-space: nowrap;
  307. overflow: hidden;
  308. font-size: 26rpx;
  309. color: #000000;
  310. }
  311. .pop-goods-price {
  312. font-size: 26rpx;
  313. color: #e64340;
  314. margin-top: 20rpx;
  315. }
  316. .pop-goods-price .t1 {
  317. font-size: 50rpx;
  318. }
  319. .pop-goods-price-original {
  320. font-size: 26rpx;
  321. color: #aaa;
  322. text-decoration: line-through;
  323. margin-left: 16rpx;
  324. }
  325. .pop-goods-close {
  326. width: 36rpx;
  327. height: 36rpx;
  328. }
  329. .goods-property-container {
  330. height: 56px;
  331. align-items: center;
  332. border-radius: 12px;
  333. padding: 0 16px;
  334. }
  335. .size-label-box2 {
  336. width: 100vw;
  337. background: #fff;
  338. }
  339. .size-label-box .label {
  340. font-size: 26rpx;
  341. color: #000;
  342. padding-left: 30rpx;
  343. padding: 30rpx 0 20rpx 30rpx;
  344. }
  345. .size-label-box .label-item-box {
  346. display: flex;
  347. margin-left: 30rpx;
  348. flex-direction: row;
  349. flex-wrap: wrap;
  350. }
  351. .size-label-box .label-item {
  352. font-size: 26rpx;
  353. color: #000;
  354. padding: 14rpx 20rpx;
  355. border: 1px solid #ddd;
  356. border-radius: 6rpx;
  357. margin: 0 20rpx 20rpx 0;
  358. }
  359. .size-label-box .label-item.active {
  360. color: #e64340;
  361. border: 1px solid #e64340;
  362. }
  363. .buy-num-box {
  364. display: flex;
  365. justify-content: space-between;
  366. padding: 30rpx 30rpx 48rpx 0;
  367. margin-left: 30rpx;
  368. border-top: 1px solid #eee;
  369. margin-top: 30rpx;
  370. align-items: center;
  371. }
  372. .num-label {
  373. font-size: 26rpx;
  374. color: #000000;
  375. }
  376. .buy-num-box .num-box {
  377. display: flex;
  378. }
  379. .buy-num-box .num-box .num-jian,
  380. .buy-num-box .num-box .num-input,
  381. .buy-num-box .num-box .num-jia {
  382. width: 80rpx;
  383. height: 64rpx;
  384. line-height: 62rpx;
  385. text-align: center;
  386. border: 1px solid #eee;
  387. }
  388. .buy-num-box .num-box .num-input {
  389. font-size: 28rpx;
  390. }
  391. .buy-num-box .num-box .num-input input {
  392. height: 100%;
  393. }
  394. .popup-join-btn {
  395. width: 100%;
  396. height: 89rpx;
  397. text-align: center;
  398. line-height: 89rpx;
  399. font-size: 34rpx;
  400. color: #ffffff;
  401. background-color: #e64340;
  402. }
  403. .buy-num-box .num-box .hui {
  404. background-color: #f5f5f9;
  405. }
  406. .curKanjiaprogress {
  407. width: 750rpx;
  408. background-color: #fff;
  409. margin-top: 20rpx;
  410. }
  411. .curKanjiaprogress .name {
  412. font-size: 40rpx;
  413. padding: 20rpx;
  414. text-align: center;
  415. }
  416. .curKanjiaprogress .placeholder {
  417. margin-left: 30rpx;
  418. margin-right: 30rpx;
  419. text-align: center;
  420. font-size: 26rpx;
  421. width: 100rpx;
  422. color: #999;
  423. }
  424. .curKanjiaprogress .kjbutton {
  425. padding: 30rpx;
  426. }
  427. .kjBuyButton {
  428. position: fixed;
  429. left: 0;
  430. bottom: calc(env(safe-area-inset-bottom) / 2);
  431. width: 750rpx;
  432. display: flex;
  433. }
  434. .kjBuyButton .item {
  435. flex: 1;
  436. }
  437. .shareFloatDiv1 {
  438. position: fixed;
  439. top: 0px;
  440. left: 0px;
  441. width: 100vw;
  442. height: 100vh;
  443. background-color: #555;
  444. filter: Alpha(Opacity=60);
  445. opacity: 0.6;
  446. z-index: 99998;
  447. }
  448. .shareFloatDiv2 {
  449. position: fixed;
  450. width: 100%;
  451. height: 400rpx;
  452. background-color: #ffffff;
  453. bottom: 0rpx;
  454. z-index: 99999;
  455. }
  456. .shareFloatDiv2 .p1 {
  457. height: 260rpx;
  458. }
  459. .shareFloatDiv2 .p2 {
  460. height: 20rpx;
  461. background-color: #EEEEEE;
  462. }
  463. .shareFloatDiv2 .p3 {
  464. height: 120rpx;
  465. line-height: 120rpx;
  466. text-align: center;
  467. color: #555555;
  468. font-size: 16px;
  469. }
  470. .qrcode-button {
  471. padding: 30rpx;
  472. margin-top: 50rpx;
  473. }
  474. .qrcode {
  475. width: 300rpx;
  476. height: 300rpx;
  477. margin-top: 50rpx;
  478. }
  479. .posterImg-box {
  480. position: absolute;
  481. top: 104rpx;
  482. left: 32rpx;
  483. width: 686rpx;
  484. margin-bottom: 100rpx;
  485. z-index: 999999;
  486. }
  487. .posterImg {
  488. width: 100%;
  489. }
  490. .btn-create {
  491. margin: 32rpx;
  492. margin-bottom: 0;
  493. height: 88rpx;
  494. line-height: 88rpx;
  495. background: #e64340;
  496. color: #fff;
  497. text-align: center;
  498. border-radius: 8rpx;
  499. }
  500. .clearfix:after {
  501. /*伪元素是行内元素 正常浏览器清除浮动方法*/
  502. content: "";
  503. display: block;
  504. height: 0;
  505. clear: both;
  506. visibility: hidden;
  507. }
  508. .shop-container {
  509. width: 100vw;
  510. margin: 32rpx 0rpx;
  511. padding: 32rpx;
  512. display: flex;
  513. align-items: center;
  514. background: #fff;
  515. }
  516. .shop-container image {
  517. width: 90rpx;
  518. height: 90rpx;
  519. }
  520. .shop-container .info {
  521. margin-left: 32rpx;
  522. }
  523. .shop-container .info .title {
  524. font-size: 30rpx;
  525. color: #333;
  526. }
  527. .shop-container .info .address {
  528. font-size: 26rpx;
  529. color: #666;
  530. }
  531. .reputation-cell-group{
  532. background-color:white !important;
  533. border-radius: 12px;
  534. }
  535. .reputation-cell {
  536. padding-bottom: 0rpx !important;
  537. --cell-icon-size: 88rpx;
  538. }
  539. .reputation-cell .van-icon {
  540. top: 16rpx !important;
  541. }
  542. .reputation-cell .avatarUrl-img{
  543. width: 40px;
  544. height: 40px;
  545. border-radius: 100%;
  546. margin-right: 26rpx;
  547. }
  548. .reputation-cell-reamrk {
  549. /* padding-left: 96rpx; */
  550. }
  551. .reputation-pics {
  552. width: 100vw;
  553. display: flex;
  554. flex-wrap: wrap;
  555. background: #ffffff;
  556. }
  557. .reputation-pics image {
  558. width: 207rpx;
  559. height: 207rpx;
  560. margin: 32rpx 0 0 32rpx;
  561. border-radius: 16rpx;
  562. }
  563. .characteristic {
  564. padding: 8rpx 32rpx;
  565. color: #666;
  566. font-size: 26rpx;
  567. }
  568. .beian {
  569. display: flex;
  570. flex-direction: column;
  571. width: 100vw;
  572. height: 100vh;
  573. justify-content: center;
  574. align-items: center;
  575. }
  576. .beian .img {
  577. width: 260rpx;
  578. border-radius: 50%;
  579. }
  580. .beian .btn {
  581. width: 600rpx;
  582. margin-top: 200rpx;
  583. }