product.wxss 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. @charset "UTF-8";
  2. /* 页面左右间距 */
  3. /* 文字尺寸 */
  4. /*文字颜色*/
  5. /* 边框颜色 */
  6. /*颜色*/
  7. /* 图片加载中颜色 */
  8. /* 行为相关颜色 */
  9. /* 功能栏字体大小 */
  10. /*功能栏左侧小图标*/
  11. /* 页面左右间距 */
  12. /* 文字尺寸 */
  13. /*文字颜色*/
  14. /* 边框颜色 */
  15. /*颜色*/
  16. /* 图片加载中颜色 */
  17. /* 行为相关颜色 */
  18. /* 功能栏字体大小 */
  19. /*功能栏左侧小图标*/
  20. .uni-list-item.data-v-1093b690 {
  21. font-size: 32rpx;
  22. position: relative;
  23. -webkit-box-orient: vertical;
  24. -webkit-box-direction: normal;
  25. -webkit-flex-direction: column;
  26. flex-direction: column;
  27. -webkit-box-pack: justify;
  28. -webkit-justify-content: space-between;
  29. justify-content: space-between;
  30. padding-left: 30rpx;
  31. }
  32. .uni-list-item--disabled.data-v-1093b690 {
  33. opacity: 0.3;
  34. }
  35. .uni-list-item--hover.data-v-1093b690 {
  36. background-color: #f1f1f1;
  37. }
  38. .uni-list-item__container.data-v-1093b690 {
  39. display: -webkit-box;
  40. display: -webkit-flex;
  41. display: flex;
  42. -webkit-box-orient: horizontal;
  43. -webkit-box-direction: normal;
  44. -webkit-flex-direction: row;
  45. flex-direction: row;
  46. padding: 24rpx 30rpx;
  47. padding-left: 0;
  48. -webkit-box-flex: 1;
  49. -webkit-flex: 1;
  50. flex: 1;
  51. position: relative;
  52. -webkit-box-pack: justify;
  53. -webkit-justify-content: space-between;
  54. justify-content: space-between;
  55. -webkit-box-align: center;
  56. -webkit-align-items: center;
  57. align-items: center;
  58. border-top-color: #ebeef5;
  59. border-top-style: solid;
  60. border-top-width: 1px;
  61. }
  62. .uni-list-item--first.data-v-1093b690 {
  63. border-top-width: 0px;
  64. }
  65. .uni-list-item__content.data-v-1093b690 {
  66. display: -webkit-box;
  67. display: -webkit-flex;
  68. display: flex;
  69. -webkit-box-flex: 1;
  70. -webkit-flex: 1;
  71. flex: 1;
  72. overflow: hidden;
  73. -webkit-box-orient: vertical;
  74. -webkit-box-direction: normal;
  75. -webkit-flex-direction: column;
  76. flex-direction: column;
  77. color: #3b4144;
  78. }
  79. .uni-list-item__content-title.data-v-1093b690 {
  80. font-size: 28rpx;
  81. color: #3b4144;
  82. overflow: hidden;
  83. }
  84. .uni-list-item__content-note.data-v-1093b690 {
  85. margin-top: 6rpx;
  86. color: #999;
  87. font-size: 24rpx;
  88. overflow: hidden;
  89. }
  90. .uni-list-item__extra.data-v-1093b690 {
  91. display: -webkit-box;
  92. display: -webkit-flex;
  93. display: flex;
  94. -webkit-box-orient: horizontal;
  95. -webkit-box-direction: normal;
  96. -webkit-flex-direction: row;
  97. flex-direction: row;
  98. -webkit-box-pack: end;
  99. -webkit-justify-content: flex-end;
  100. justify-content: flex-end;
  101. -webkit-box-align: center;
  102. -webkit-align-items: center;
  103. align-items: center;
  104. }
  105. .uni-list-item__icon.data-v-1093b690 {
  106. margin-right: 18rpx;
  107. -webkit-box-orient: horizontal;
  108. -webkit-box-direction: normal;
  109. -webkit-flex-direction: row;
  110. flex-direction: row;
  111. -webkit-box-pack: center;
  112. -webkit-justify-content: center;
  113. justify-content: center;
  114. -webkit-box-align: center;
  115. -webkit-align-items: center;
  116. align-items: center;
  117. display: -webkit-box;
  118. display: -webkit-flex;
  119. display: flex;
  120. }
  121. .uni-list-item__icon-img.data-v-1093b690 {
  122. height: 36rpx;
  123. width: 36rpx;
  124. }
  125. .itemSwitch.data-v-1093b690 {
  126. -webkit-transform: translateX(16rpx) scale(0.84);
  127. transform: translateX(16rpx) scale(0.84);
  128. }
  129. .uni-list-item__slot.data-v-1093b690 {
  130. color: #909399;
  131. font-size: 28rpx;
  132. }
  133. @charset "UTF-8";
  134. /* 页面左右间距 */
  135. /* 文字尺寸 */
  136. /*文字颜色*/
  137. /* 边框颜色 */
  138. /*颜色*/
  139. /* 图片加载中颜色 */
  140. /* 行为相关颜色 */
  141. /* 功能栏字体大小 */
  142. /*功能栏左侧小图标*/
  143. /* 弹出层 */
  144. .popup {
  145. position: fixed;
  146. left: 0;
  147. top: 0;
  148. right: 0;
  149. bottom: 0;
  150. z-index: 99;
  151. }
  152. .popup.show {
  153. display: block;
  154. }
  155. .popup.show .mask {
  156. -webkit-animation: showPopup 0.2s linear both;
  157. animation: showPopup 0.2s linear both;
  158. }
  159. .popup.show .layer {
  160. -webkit-animation: showLayer 0.2s linear both;
  161. animation: showLayer 0.2s linear both;
  162. }
  163. .popup.hide .mask {
  164. -webkit-animation: hidePopup 0.2s linear both;
  165. animation: hidePopup 0.2s linear both;
  166. }
  167. .popup.hide .layer {
  168. -webkit-animation: hideLayer 0.2s linear both;
  169. animation: hideLayer 0.2s linear both;
  170. }
  171. .popup.none {
  172. display: none;
  173. }
  174. .popup .mask {
  175. position: fixed;
  176. top: 0;
  177. width: 100%;
  178. height: 100%;
  179. z-index: 1;
  180. background-color: rgba(0, 0, 0, 0.4);
  181. }
  182. .popup .layer {
  183. position: fixed;
  184. z-index: 99;
  185. bottom: 0;
  186. width: 100%;
  187. min-height: 20vh;
  188. border-radius: 10rpx 10rpx 0 0;
  189. background-color: #fff;
  190. }
  191. .popup .layer .btn {
  192. height: 66rpx;
  193. line-height: 66rpx;
  194. border-radius: 100rpx;
  195. background: #FF4C4C;
  196. font-size: 30rpx;
  197. color: #fff;
  198. margin: 30rpx auto 20rpx;
  199. }
  200. @-webkit-keyframes showPopup {
  201. 0% {
  202. opacity: 0;
  203. }
  204. 100% {
  205. opacity: 1;
  206. }
  207. }
  208. @keyframes showPopup {
  209. 0% {
  210. opacity: 0;
  211. }
  212. 100% {
  213. opacity: 1;
  214. }
  215. }
  216. @-webkit-keyframes hidePopup {
  217. 0% {
  218. opacity: 1;
  219. }
  220. 100% {
  221. opacity: 0;
  222. }
  223. }
  224. @keyframes hidePopup {
  225. 0% {
  226. opacity: 1;
  227. }
  228. 100% {
  229. opacity: 0;
  230. }
  231. }
  232. @-webkit-keyframes showLayer {
  233. 0% {
  234. -webkit-transform: translateY(120%);
  235. transform: translateY(120%);
  236. }
  237. 100% {
  238. -webkit-transform: translateY(0%);
  239. transform: translateY(0%);
  240. }
  241. }
  242. @keyframes showLayer {
  243. 0% {
  244. -webkit-transform: translateY(120%);
  245. transform: translateY(120%);
  246. }
  247. 100% {
  248. -webkit-transform: translateY(0%);
  249. transform: translateY(0%);
  250. }
  251. }
  252. @-webkit-keyframes hideLayer {
  253. 0% {
  254. -webkit-transform: translateY(0);
  255. transform: translateY(0);
  256. }
  257. 100% {
  258. -webkit-transform: translateY(120%);
  259. transform: translateY(120%);
  260. }
  261. }
  262. @keyframes hideLayer {
  263. 0% {
  264. -webkit-transform: translateY(0);
  265. transform: translateY(0);
  266. }
  267. 100% {
  268. -webkit-transform: translateY(120%);
  269. transform: translateY(120%);
  270. }
  271. }
  272. /* 规格选择弹窗 */
  273. .attr-content {
  274. padding: 25rpx 30rpx;
  275. }
  276. .attr-content .a-t {
  277. display: -webkit-box;
  278. display: -webkit-flex;
  279. display: flex;
  280. }
  281. .attr-content .a-t image {
  282. width: 170rpx;
  283. height: 170rpx;
  284. -webkit-flex-shrink: 0;
  285. flex-shrink: 0;
  286. border-radius: 8rpx;
  287. }
  288. .attr-content .a-t .right {
  289. display: -webkit-box;
  290. display: -webkit-flex;
  291. display: flex;
  292. -webkit-box-orient: vertical;
  293. -webkit-box-direction: normal;
  294. -webkit-flex-direction: column;
  295. flex-direction: column;
  296. padding-left: 24rpx;
  297. font-size: 26rpx;
  298. color: #606266;
  299. line-height: 42rpx;
  300. width: 75%;
  301. position: relative;
  302. }
  303. .attr-content .a-t .right .right-img {
  304. width: 37rpx;
  305. height: 37rpx;
  306. position: absolute;
  307. right: 0;
  308. top: 20rpx;
  309. }
  310. .attr-content .a-t .right .price {
  311. position: absolute;
  312. bottom: 0;
  313. font-size: 32rpx;
  314. color: #FF4C4C;
  315. margin: 10rpx 0rpx;
  316. font-size: 60rpx;
  317. font-family: PingFang SC;
  318. font-weight: bold;
  319. color: #ef041f;
  320. }
  321. .attr-content .a-t .right .price text {
  322. font-size: 30rpx;
  323. }
  324. .attr-content .a-t .right .name {
  325. width: 350rpx;
  326. font-size: 32rpx;
  327. color: #303133;
  328. height: 50rpx;
  329. overflow: hidden;
  330. text-overflow: ellipsis;
  331. white-space: nowrap;
  332. display: block;
  333. font-size: 30rpx;
  334. font-family: PingFang SC;
  335. font-weight: bold;
  336. color: #1d2023;
  337. }
  338. .attr-content .a-t .right .selected-text {
  339. margin-right: 10rpx;
  340. }
  341. .attr-content .attr-list {
  342. display: -webkit-box;
  343. display: -webkit-flex;
  344. display: flex;
  345. -webkit-box-orient: vertical;
  346. -webkit-box-direction: normal;
  347. -webkit-flex-direction: column;
  348. flex-direction: column;
  349. font-size: 30rpx;
  350. color: #606266;
  351. padding-top: 30rpx;
  352. padding-left: 10rpx;
  353. }
  354. .attr-content .item-list {
  355. padding: 20rpx 0 0;
  356. display: -webkit-box;
  357. display: -webkit-flex;
  358. display: flex;
  359. -webkit-flex-wrap: wrap;
  360. flex-wrap: wrap;
  361. }
  362. .attr-content .item-list text {
  363. display: -webkit-box;
  364. display: -webkit-flex;
  365. display: flex;
  366. -webkit-box-align: center;
  367. -webkit-align-items: center;
  368. align-items: center;
  369. -webkit-box-pack: center;
  370. -webkit-justify-content: center;
  371. justify-content: center;
  372. background: #eee;
  373. margin-right: 20rpx;
  374. margin-bottom: 20rpx;
  375. border-radius: 10rpx;
  376. min-width: 60rpx;
  377. height: 60rpx;
  378. padding: 0 20rpx;
  379. font-size: 28rpx;
  380. color: #303133;
  381. }
  382. .attr-content .item-list .selected {
  383. background: #fceff1;
  384. color: #f35768;
  385. border: 1px solid #f35768;
  386. }
  387. .goodsBottom {
  388. height: 160rpx;
  389. }
  390. page {
  391. background: #f0f0f0;
  392. }
  393. .contentBottomHeight {
  394. background-color: #f8f8f8;
  395. height: 130rpx;
  396. }
  397. .goodsBottom {
  398. height: 160rpx;
  399. }
  400. .iconenter {
  401. font-size: 30rpx;
  402. color: #888;
  403. }
  404. .con_image {
  405. width: 130rpx;
  406. height: 130rpx;
  407. display: inline-block;
  408. padding: 15rpx;
  409. }
  410. .con_image image {
  411. width: 100%;
  412. height: 100%;
  413. }
  414. /* 商品详情中限制图片大小 */
  415. .rich-img {
  416. width: 100% !important;
  417. height: auto;
  418. }
  419. .mun-box {
  420. display: -webkit-box;
  421. display: -webkit-flex;
  422. display: flex;
  423. -webkit-box-pack: justify;
  424. -webkit-justify-content: space-between;
  425. justify-content: space-between;
  426. -webkit-box-align: center;
  427. -webkit-align-items: center;
  428. align-items: center;
  429. }
  430. .sckill-top {
  431. width: 750rpx;
  432. height: 165rpx;
  433. background-image: url(data:image/png;base64,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);
  434. background-size: 100% 100%;
  435. position: relative;
  436. top: -40rpx;
  437. margin-bottom: -40rpx;
  438. display: -webkit-box;
  439. display: -webkit-flex;
  440. display: flex;
  441. -webkit-box-pack: justify;
  442. -webkit-justify-content: space-between;
  443. justify-content: space-between;
  444. }
  445. .sckill-top .top-left {
  446. line-height: 1;
  447. }
  448. .sckill-top .top-left .left-top {
  449. padding: 35rpx 0 23rpx 22rpx;
  450. font-size: 44rpx;
  451. font-weight: 500;
  452. color: #ffffff;
  453. line-height: 1;
  454. }
  455. .sckill-top .top-left .left-btm {
  456. line-height: 1;
  457. font-size: 30rpx;
  458. font-weight: 500;
  459. padding-left: 25rpx;
  460. color: #ffffff;
  461. }
  462. .sckill-top .top-left .left-btm .now-pri {
  463. display: inline-block;
  464. padding-right: 8rpx;
  465. font-size: 44rpx;
  466. font-weight: 800;
  467. color: #ffffff;
  468. }
  469. .sckill-top .top-left .left-btm .old-pri {
  470. text-decoration: line-through;
  471. }
  472. .sckill-top .top-right {
  473. padding: 67rpx 40rpx 18rpx 0;
  474. }
  475. .sckill-top .top-right .right-top {
  476. text-align: center;
  477. font-size: 22rpx;
  478. font-weight: 400;
  479. color: #ffffff;
  480. line-height: 1;
  481. padding-bottom: 8rpx;
  482. }
  483. .mask {
  484. position: fixed;
  485. top: 0;
  486. left: 0;
  487. width: 100%;
  488. height: 100%;
  489. z-index: 999;
  490. background-color: rgba(0, 0, 0, 0.4);
  491. }
  492. .mask image {
  493. width: 100%;
  494. height: 100%;
  495. opacity: 0.8;
  496. }