cart2.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. /**
  2. * 这里是uni-app内置的常用样式变量
  3. *
  4. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  5. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  6. *
  7. */
  8. /**
  9. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  10. *
  11. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  12. */
  13. /* 颜色变量 */
  14. /* 行为相关颜色 */
  15. /* 文字基本颜色 */
  16. /* 背景颜色 */
  17. /* 边框颜色 */
  18. /* 尺寸变量 */
  19. /* 文字尺寸 */
  20. /* 图片尺寸 */
  21. /* Border Radius */
  22. /* 水平间距 */
  23. /* 垂直间距 */
  24. /* 透明度 */
  25. /* 文章场景相关 */
  26. .vk-data-input-number-box[data-v-3517706a] {
  27. display: inline-flex;
  28. align-items: center;
  29. }
  30. .u-number-input[data-v-3517706a] {
  31. position: relative;
  32. text-align: center;
  33. padding: 0;
  34. margin: 0 0.1875rem;
  35. display: flex;
  36. align-items: center;
  37. justify-content: center;
  38. }
  39. .u-icon-plus[data-v-3517706a],
  40. .u-icon-minus[data-v-3517706a] {
  41. width: 1.875rem;
  42. display: flex;
  43. justify-content: center;
  44. align-items: center;
  45. }
  46. .u-icon-plus[data-v-3517706a] {
  47. border-radius: 0 0.25rem 0.25rem 0;
  48. }
  49. .u-icon-minus[data-v-3517706a] {
  50. border-radius: 0.25rem 0 0 0.25rem;
  51. }
  52. .u-icon-disabled[data-v-3517706a] {
  53. color: #c8c9cc !important;
  54. background: #f7f8fa !important;
  55. }
  56. .u-input-disabled[data-v-3517706a] {
  57. color: #c8c9cc !important;
  58. background-color: #f2f3f5 !important;
  59. }
  60. .num-btn[data-v-3517706a] {
  61. font-weight: 550;
  62. position: relative;
  63. top: -0.125rem;
  64. }
  65. /**
  66. * 这里是uni-app内置的常用样式变量
  67. *
  68. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  69. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  70. *
  71. */
  72. /**
  73. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  74. *
  75. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  76. */
  77. /* 颜色变量 */
  78. /* 行为相关颜色 */
  79. /* 文字基本颜色 */
  80. /* 背景颜色 */
  81. /* 边框颜色 */
  82. /* 尺寸变量 */
  83. /* 文字尺寸 */
  84. /* 图片尺寸 */
  85. /* Border Radius */
  86. /* 水平间距 */
  87. /* 垂直间距 */
  88. /* 透明度 */
  89. /* 文章场景相关 */
  90. .uni-swipe[data-v-82a5303b] {
  91. position: relative;
  92. overflow: hidden;
  93. }
  94. .uni-swipe_box[data-v-82a5303b] {
  95. display: flex;
  96. flex-shrink: 0;
  97. position: relative;
  98. }
  99. .uni-swipe_text--center[data-v-82a5303b] {
  100. width: 100%;
  101. cursor: grab;
  102. }
  103. .uni-swipe_button-group[data-v-82a5303b] {
  104. box-sizing: border-box;
  105. display: flex;
  106. flex-direction: row;
  107. position: absolute;
  108. top: 0;
  109. bottom: 0;
  110. }
  111. .button-group--left[data-v-82a5303b] {
  112. left: 0;
  113. transform: translateX(-100%);
  114. }
  115. .button-group--right[data-v-82a5303b] {
  116. right: 0;
  117. transform: translateX(100%);
  118. }
  119. .uni-swipe_button[data-v-82a5303b] {
  120. display: flex;
  121. flex-direction: row;
  122. justify-content: center;
  123. align-items: center;
  124. padding: 0 20px;
  125. }
  126. .uni-swipe_button-text[data-v-82a5303b] {
  127. flex-shrink: 0;
  128. font-size: 14px;
  129. }
  130. .ani[data-v-82a5303b] {
  131. transition-property: transform;
  132. transition-duration: 0.3s;
  133. transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  134. }
  135. /**
  136. * 这里是uni-app内置的常用样式变量
  137. *
  138. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  139. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  140. *
  141. */
  142. /**
  143. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  144. *
  145. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  146. */
  147. /* 颜色变量 */
  148. /* 行为相关颜色 */
  149. /* 文字基本颜色 */
  150. /* 背景颜色 */
  151. /* 边框颜色 */
  152. /* 尺寸变量 */
  153. /* 文字尺寸 */
  154. /* 图片尺寸 */
  155. /* Border Radius */
  156. /* 水平间距 */
  157. /* 垂直间距 */
  158. /* 透明度 */
  159. /* 文章场景相关 */
  160. [data-v-e94a02da]:host {
  161. display: block;
  162. }
  163. /* 分类标题 */
  164. .caption[data-v-e94a02da] {
  165. display: flex;
  166. justify-content: center;
  167. line-height: 1;
  168. padding: 1.125rem 0 1.25rem;
  169. font-size: 1rem;
  170. color: #262626;
  171. }
  172. .caption .text[data-v-e94a02da] {
  173. display: flex;
  174. justify-content: center;
  175. align-items: center;
  176. padding: 0 0.875rem 0 0.9375rem;
  177. }
  178. .caption .text[data-v-e94a02da]::before, .caption .text[data-v-e94a02da]::after {
  179. content: "";
  180. width: 0.625rem;
  181. height: 0.625rem;
  182. background-image: url(../../static/images/bubble.png);
  183. background-size: contain;
  184. margin: 0 0.3125rem;
  185. }
  186. /* 猜你喜欢 */
  187. .guess[data-v-e94a02da] {
  188. display: flex;
  189. flex-wrap: wrap;
  190. justify-content: space-between;
  191. padding: 0 0.625rem;
  192. }
  193. .guess .guess-item[data-v-e94a02da] {
  194. width: 10.78125rem;
  195. padding: 0.75rem 0.625rem 0.625rem;
  196. margin-bottom: 0.625rem;
  197. border-radius: 0.3125rem;
  198. overflow: hidden;
  199. background-color: #fff;
  200. }
  201. .guess .image[data-v-e94a02da] {
  202. width: 9.5rem;
  203. height: 9.5rem;
  204. }
  205. .guess .name[data-v-e94a02da] {
  206. height: 2.34375rem;
  207. margin: 0.3125rem 0;
  208. font-size: 0.8125rem;
  209. color: #262626;
  210. overflow: hidden;
  211. text-overflow: ellipsis;
  212. display: -webkit-box;
  213. -webkit-line-clamp: 2;
  214. -webkit-box-orient: vertical;
  215. }
  216. .guess .price[data-v-e94a02da] {
  217. line-height: 1;
  218. padding-top: 0.125rem;
  219. color: #cf4444;
  220. font-size: 0.8125rem;
  221. }
  222. .guess .small[data-v-e94a02da] {
  223. font-size: 80%;
  224. }
  225. .loading-text[data-v-e94a02da] {
  226. text-align: center;
  227. font-size: 0.875rem;
  228. color: #666;
  229. padding: 0.625rem 0;
  230. }
  231. /**
  232. * 这里是uni-app内置的常用样式变量
  233. *
  234. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  235. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  236. *
  237. */
  238. /**
  239. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  240. *
  241. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  242. */
  243. /* 颜色变量 */
  244. /* 行为相关颜色 */
  245. /* 文字基本颜色 */
  246. /* 背景颜色 */
  247. /* 边框颜色 */
  248. /* 尺寸变量 */
  249. /* 文字尺寸 */
  250. /* 图片尺寸 */
  251. /* Border Radius */
  252. /* 水平间距 */
  253. /* 垂直间距 */
  254. /* 透明度 */
  255. /* 文章场景相关 */
  256. [data-v-1830a74b]:host {
  257. height: 100vh;
  258. display: flex;
  259. flex-direction: column;
  260. overflow: hidden;
  261. background-color: #f7f7f8;
  262. }
  263. .scroll-view[data-v-1830a74b] {
  264. flex: 1;
  265. background-color: #f7f7f8;
  266. }
  267. .cart-list[data-v-1830a74b] {
  268. padding: 0 0.625rem;
  269. }
  270. .cart-list .tips[data-v-1830a74b] {
  271. display: flex;
  272. align-items: center;
  273. line-height: 1;
  274. margin: 0.9375rem 0.3125rem;
  275. font-size: 0.8125rem;
  276. color: #666;
  277. }
  278. .cart-list .tips .label[data-v-1830a74b] {
  279. color: #fff;
  280. padding: 0.21875rem 0.46875rem 0.15625rem;
  281. border-radius: 0.125rem;
  282. font-size: 0.75rem;
  283. background-color: #27ba9b;
  284. margin-right: 0.3125rem;
  285. }
  286. .cart-list .goods[data-v-1830a74b] {
  287. display: flex;
  288. padding: 0.625rem 0.625rem 0.625rem 2.5rem;
  289. border-radius: 0.3125rem;
  290. background-color: #fff;
  291. position: relative;
  292. }
  293. .cart-list .goods .navigator[data-v-1830a74b] {
  294. display: flex;
  295. }
  296. .cart-list .goods .checkbox[data-v-1830a74b] {
  297. position: absolute;
  298. top: 0;
  299. left: 0;
  300. display: flex;
  301. align-items: center;
  302. justify-content: center;
  303. width: 2.5rem;
  304. height: 100%;
  305. }
  306. .cart-list .goods .checkbox[data-v-1830a74b]::before {
  307. content: "\e6cd";
  308. font-family: "erabbit" !important;
  309. font-size: 1.25rem;
  310. color: #444;
  311. }
  312. .cart-list .goods .checkbox.checked[data-v-1830a74b]::before {
  313. content: "\e6cc";
  314. color: #27ba9b;
  315. }
  316. .cart-list .goods .picture[data-v-1830a74b] {
  317. width: 5.3125rem;
  318. height: 5.3125rem;
  319. }
  320. .cart-list .goods .meta[data-v-1830a74b] {
  321. flex: 1;
  322. display: flex;
  323. flex-direction: column;
  324. justify-content: space-between;
  325. margin-left: 0.625rem;
  326. }
  327. .cart-list .goods .name[data-v-1830a74b] {
  328. height: 2.25rem;
  329. font-size: 0.8125rem;
  330. color: #444;
  331. }
  332. .cart-list .goods .attrsText[data-v-1830a74b] {
  333. line-height: 1.8;
  334. padding: 0 0.46875rem;
  335. font-size: 0.75rem;
  336. align-self: flex-start;
  337. border-radius: 0.125rem;
  338. color: #888;
  339. background-color: #f7f7f8;
  340. }
  341. .cart-list .goods .price[data-v-1830a74b] {
  342. line-height: 1;
  343. font-size: 0.8125rem;
  344. color: #444;
  345. margin-bottom: 0.0625rem;
  346. color: #cf4444;
  347. }
  348. .cart-list .goods .price[data-v-1830a74b]::before {
  349. content: "¥";
  350. font-size: 80%;
  351. }
  352. .cart-list .goods .count[data-v-1830a74b] {
  353. position: absolute;
  354. bottom: 0.625rem;
  355. right: 0.15625rem;
  356. display: flex;
  357. justify-content: space-between;
  358. align-items: center;
  359. width: 6.875rem;
  360. height: 1.5rem;
  361. }
  362. .cart-list .goods .count .text[data-v-1830a74b] {
  363. height: 100%;
  364. padding: 0 0.625rem;
  365. font-size: 1rem;
  366. color: #444;
  367. }
  368. .cart-list .goods .count .input[data-v-1830a74b] {
  369. height: 100%;
  370. text-align: center;
  371. border-radius: 0.125rem;
  372. font-size: 0.75rem;
  373. color: #444;
  374. background-color: #f6f6f6;
  375. }
  376. .cart-list .cart-swipe[data-v-1830a74b] {
  377. display: block;
  378. margin: 0.625rem 0;
  379. }
  380. .cart-list .cart-swipe-right[data-v-1830a74b] {
  381. display: flex;
  382. height: 100%;
  383. }
  384. .cart-list .cart-swipe-right .button[data-v-1830a74b] {
  385. display: flex;
  386. justify-content: center;
  387. align-items: center;
  388. width: 50px;
  389. padding: 6px;
  390. line-height: 1.5;
  391. color: #fff;
  392. font-size: 0.8125rem;
  393. border-radius: 0;
  394. }
  395. .cart-list .cart-swipe-right .delete-button[data-v-1830a74b] {
  396. background-color: #cf4444;
  397. }
  398. .cart-blank[data-v-1830a74b],
  399. .login-blank[data-v-1830a74b] {
  400. display: flex;
  401. justify-content: center;
  402. align-items: center;
  403. flex-direction: column;
  404. height: 60vh;
  405. }
  406. .cart-blank .image[data-v-1830a74b],
  407. .login-blank .image[data-v-1830a74b] {
  408. width: 12.5rem;
  409. height: 8.78125rem;
  410. }
  411. .cart-blank .text[data-v-1830a74b],
  412. .login-blank .text[data-v-1830a74b] {
  413. color: #444;
  414. font-size: 0.8125rem;
  415. margin: 0.625rem 0;
  416. }
  417. .cart-blank .button[data-v-1830a74b],
  418. .login-blank .button[data-v-1830a74b] {
  419. width: 7.5rem !important;
  420. height: 1.875rem;
  421. line-height: 1.875rem;
  422. margin-top: 0.625rem;
  423. font-size: 0.8125rem;
  424. border-radius: 1.875rem;
  425. color: #fff;
  426. background-color: #27ba9b;
  427. }
  428. .toolbar[data-v-1830a74b] {
  429. position: fixed;
  430. left: 0;
  431. right: 0;
  432. bottom: calc(var(--window-bottom));
  433. z-index: 1;
  434. height: 3.125rem;
  435. padding: 0 0.625rem;
  436. display: flex;
  437. align-items: center;
  438. border-top: 0.03125rem solid #ededed;
  439. border-bottom: 0.03125rem solid #ededed;
  440. background-color: #fff;
  441. box-sizing: content-box;
  442. }
  443. .toolbar .all[data-v-1830a74b] {
  444. margin-left: 0.78125rem;
  445. font-size: 14px;
  446. color: #444;
  447. display: flex;
  448. align-items: center;
  449. }
  450. .toolbar .all[data-v-1830a74b]::before {
  451. font-family: "erabbit" !important;
  452. content: "\e6cd";
  453. font-size: 1.25rem;
  454. margin-right: 0.25rem;
  455. }
  456. .toolbar .checked[data-v-1830a74b]::before {
  457. content: "\e6cc";
  458. color: #27ba9b;
  459. }
  460. .toolbar .text[data-v-1830a74b] {
  461. margin-right: 0.25rem;
  462. margin-left: 1rem;
  463. color: #444;
  464. font-size: 14px;
  465. }
  466. .toolbar .amount[data-v-1830a74b] {
  467. font-size: 20px;
  468. color: #cf4444;
  469. }
  470. .toolbar .amount .decimal[data-v-1830a74b] {
  471. font-size: 12px;
  472. }
  473. .toolbar .amount[data-v-1830a74b]::before {
  474. content: "¥";
  475. font-size: 12px;
  476. }
  477. .toolbar .button-grounp[data-v-1830a74b] {
  478. margin-left: auto;
  479. display: flex;
  480. justify-content: space-between;
  481. text-align: center;
  482. line-height: 2.25rem;
  483. font-size: 13px;
  484. color: #fff;
  485. }
  486. .toolbar .button-grounp .button[data-v-1830a74b] {
  487. width: 7.5rem;
  488. margin: 0 0.3125rem;
  489. border-radius: 2.25rem;
  490. }
  491. .toolbar .button-grounp .payment-button[data-v-1830a74b] {
  492. background-color: #27ba9b;
  493. }
  494. .toolbar .button-grounp .payment-button.disabled[data-v-1830a74b] {
  495. opacity: 0.6;
  496. }
  497. .toolbar-height[data-v-1830a74b] {
  498. height: 3.125rem;
  499. }
  500. /**
  501. * 这里是uni-app内置的常用样式变量
  502. *
  503. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  504. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  505. *
  506. */
  507. /**
  508. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  509. *
  510. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  511. */
  512. /* 颜色变量 */
  513. /* 行为相关颜色 */
  514. /* 文字基本颜色 */
  515. /* 背景颜色 */
  516. /* 边框颜色 */
  517. /* 尺寸变量 */
  518. /* 文字尺寸 */
  519. /* 图片尺寸 */
  520. /* Border Radius */
  521. /* 水平间距 */
  522. /* 垂直间距 */
  523. /* 透明度 */
  524. /* 文章场景相关 */
  525. body {
  526. height: 100%;
  527. }