product.wxss 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445
  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. .mask {
  431. position: fixed;
  432. top: 0;
  433. left: 0;
  434. width: 100%;
  435. height: 100%;
  436. z-index: 999;
  437. background-color: rgba(0, 0, 0, 0.4);
  438. }
  439. .mask image {
  440. width: 100%;
  441. height: 100%;
  442. opacity: 0.8;
  443. }