storeOrderDetail.wxss 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394
  1. @charset "UTF-8";
  2. /**
  3. * 这里是uni-app内置的常用样式变量
  4. *
  5. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  6. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  7. *
  8. */
  9. /**
  10. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  11. *
  12. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  13. */
  14. /* 颜色变量 */
  15. /* 行为相关颜色 */
  16. /* 文字基本颜色 */
  17. /* 背景颜色 */
  18. /* 边框颜色 */
  19. /* 尺寸变量 */
  20. /* 文字尺寸 */
  21. /* 图片尺寸 */
  22. /* Border Radius */
  23. /* 水平间距 */
  24. /* 垂直间距 */
  25. /* 透明度 */
  26. /* 文章场景相关 */
  27. .fixed-top-box {
  28. width: 100%;
  29. background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
  30. position: fixed;
  31. top: 0;
  32. left: 0;
  33. z-index: 1000;
  34. }
  35. .top-cont {
  36. width: 100%;
  37. height: 476rpx;
  38. position: relative;
  39. }
  40. .top-cont .bg {
  41. width: 100%;
  42. height: 100%;
  43. position: absolute;
  44. top: 0;
  45. left: 0;
  46. z-index: 1;
  47. }
  48. .top-cont .top-inner {
  49. width: 100%;
  50. height: 100%;
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. z-index: 2;
  55. }
  56. .top-cont .top-inner .back-box {
  57. height: 88rpx;
  58. padding-left: 22rpx;
  59. display: flex;
  60. align-items: center;
  61. justify-content: space-between;
  62. padding: 0 20rpx;
  63. }
  64. .top-cont .top-inner .back-box image {
  65. width: 40rpx;
  66. height: 40rpx;
  67. }
  68. .top-cont .top-inner .back-box .title {
  69. font-size: 36rpx;
  70. font-family: PingFang SC;
  71. font-weight: 500;
  72. color: #FFFFFF;
  73. }
  74. .top-cont .top-inner .order-status {
  75. margin-top: 60rpx;
  76. display: flex;
  77. align-items: center;
  78. justify-content: space-between;
  79. padding: 0 30rpx;
  80. }
  81. .top-cont .top-inner .order-status .inner {
  82. display: flex;
  83. align-items: center;
  84. }
  85. .top-cont .top-inner .order-status .inner .img-box {
  86. width: 96rpx;
  87. height: 96rpx;
  88. margin-right: 30rpx;
  89. }
  90. .top-cont .top-inner .order-status .inner .img-box image {
  91. width: 100%;
  92. height: 100%;
  93. }
  94. .top-cont .top-inner .order-status .inner .status-box {
  95. height: 96rpx;
  96. display: flex;
  97. flex-direction: column;
  98. justify-content: center;
  99. }
  100. .top-cont .top-inner .order-status .inner .status-box .status {
  101. font-size: 40rpx;
  102. font-family: PingFang SC;
  103. font-weight: bold;
  104. color: #FFFFFF;
  105. line-height: 1;
  106. }
  107. .top-cont .top-inner .order-status .inner .status-box .desc {
  108. font-size: 26rpx;
  109. font-family: PingFang SC;
  110. font-weight: 500;
  111. color: #FFFFFF;
  112. line-height: 1;
  113. margin-top: 30rpx;
  114. }
  115. .top-cont .top-inner .order-placer {
  116. margin-top: 50rpx;
  117. padding: 0 20rpx;
  118. }
  119. .top-cont .top-inner .order-placer .inner {
  120. box-sizing: border-box;
  121. border-radius: 16rpx;
  122. height: 150rpx;
  123. padding: 40rpx 30rpx;
  124. display: flex;
  125. align-items: center;
  126. background: #FFFFFF;
  127. }
  128. .top-cont .top-inner .order-placer .inner .location {
  129. width: 24rpx;
  130. height: 27rpx;
  131. margin-right: 18rpx;
  132. flex-shrink: 0;
  133. }
  134. .top-cont .top-inner .order-placer .inner .info .name-phone {
  135. display: flex;
  136. align-items: center;
  137. }
  138. .top-cont .top-inner .order-placer .inner .info .name-phone .text {
  139. font-size: 28rpx;
  140. font-family: PingFang SC;
  141. font-weight: bold;
  142. color: #333333;
  143. line-height: 1;
  144. margin-right: 20rpx;
  145. }
  146. .top-cont .top-inner .order-placer .inner .info .name-phone .text:last-child {
  147. margin-right: 0;
  148. }
  149. .top-cont .top-inner .order-placer .inner .info .address {
  150. font-size: 26rpx;
  151. font-family: PingFang SC;
  152. font-weight: 500;
  153. color: #999999;
  154. line-height: 1.3;
  155. margin-top: 10rpx;
  156. }
  157. .content {
  158. margin: 20rpx 0rpx;
  159. padding: 0 20rpx 140rpx 20rpx;
  160. }
  161. .content .goods-list {
  162. padding: 0 30rpx;
  163. background-color: #FFFFFF;
  164. border-radius: 16rpx;
  165. }
  166. .content .goods-list .item {
  167. padding: 30rpx 0;
  168. border-bottom: 1px solid #EDEEEF;
  169. display: flex;
  170. align-items: center;
  171. }
  172. .content .goods-list .item .img-box {
  173. width: 160rpx;
  174. height: 160rpx;
  175. margin-right: 30rpx;
  176. }
  177. .content .goods-list .item .img-box image {
  178. width: 100%;
  179. height: 100%;
  180. }
  181. .content .goods-list .item .info-box {
  182. width: calc(100% - 190rpx);
  183. height: 160rpx;
  184. display: flex;
  185. flex-direction: column;
  186. justify-content: space-between;
  187. }
  188. .content .goods-list .item .info-box .name-box {
  189. font-size: 28rpx;
  190. font-family: PingFang SC;
  191. font-weight: 500;
  192. color: #111111;
  193. line-height: 40rpx;
  194. }
  195. .content .goods-list .item .info-box .name-box .tag {
  196. display: inline-block;
  197. padding: 0 6rpx;
  198. height: 30rpx;
  199. background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
  200. border-radius: 4rpx;
  201. margin-right: 10rpx;
  202. font-size: 22rpx;
  203. font-family: PingFang SC;
  204. font-weight: bold;
  205. color: #FFFFFF;
  206. line-height: 30rpx;
  207. float: left;
  208. margin-top: 7rpx;
  209. }
  210. .content .goods-list .item .info-box .spec {
  211. margin-top: 18rpx;
  212. font-size: 24rpx;
  213. font-family: PingFang SC;
  214. font-weight: 500;
  215. color: #999999;
  216. line-height: 1;
  217. }
  218. .content .goods-list .item .info-box .price-num {
  219. display: flex;
  220. align-items: center;
  221. justify-content: space-between;
  222. }
  223. .content .goods-list .item .info-box .price-num .price {
  224. display: flex;
  225. align-items: flex-end;
  226. }
  227. .content .goods-list .item .info-box .price-num .price .unit {
  228. font-size: 24rpx;
  229. font-family: PingFang SC;
  230. font-weight: 500;
  231. color: #111111;
  232. line-height: 1.2;
  233. margin-right: 4rpx;
  234. }
  235. .content .goods-list .item .info-box .price-num .price .num {
  236. font-size: 32rpx;
  237. font-family: PingFang SC;
  238. font-weight: 500;
  239. color: #111111;
  240. line-height: 1;
  241. }
  242. .content .goods-list .item .info-box .price-num .num {
  243. font-size: 24rpx;
  244. font-family: PingFang SC;
  245. font-weight: 500;
  246. color: #999999;
  247. line-height: 1;
  248. }
  249. .content .goods-list .sub-total {
  250. height: 88rpx;
  251. display: flex;
  252. align-items: center;
  253. justify-content: flex-end;
  254. }
  255. .content .goods-list .sub-total .discount {
  256. font-size: 24rpx;
  257. font-family: PingFang SC;
  258. font-weight: 500;
  259. color: #999999;
  260. line-height: 1;
  261. margin-right: 30rpx;
  262. }
  263. .content .goods-list .sub-total .label {
  264. font-size: 24rpx;
  265. font-family: PingFang SC;
  266. font-weight: 500;
  267. color: #999999;
  268. }
  269. .content .goods-list .sub-total .price {
  270. display: flex;
  271. align-items: flex-end;
  272. }
  273. .content .goods-list .sub-total .price .unit {
  274. font-size: 24rpx;
  275. font-family: PingFang SC;
  276. font-weight: 500;
  277. color: #FF6633;
  278. line-height: 1.2;
  279. margin-right: 4rpx;
  280. }
  281. .content .goods-list .sub-total .price .num {
  282. font-size: 32rpx;
  283. font-family: PingFang SC;
  284. font-weight: bold;
  285. color: #FF6633;
  286. line-height: 1;
  287. }
  288. .content .order-info {
  289. margin-top: 20rpx;
  290. background: #FFFFFF;
  291. border-radius: 16rpx;
  292. padding: 40rpx 30rpx;
  293. }
  294. .content .order-info .title {
  295. font-size: 30rpx;
  296. font-family: PingFang SC;
  297. font-weight: bold;
  298. color: #222222;
  299. line-height: 1;
  300. }
  301. .content .order-info .item {
  302. margin-top: 40rpx;
  303. display: flex;
  304. align-items: center;
  305. justify-content: space-between;
  306. }
  307. .content .order-info .item .label {
  308. font-size: 26rpx;
  309. font-family: PingFang SC;
  310. font-weight: 500;
  311. color: #666666;
  312. line-height: 1;
  313. }
  314. .content .order-info .item .text {
  315. font-size: 26rpx;
  316. font-family: PingFang SC;
  317. font-weight: 500;
  318. color: #222222;
  319. line-height: 32rpx;
  320. }
  321. .content .order-info .item .cont-text {
  322. font-size: 26rpx;
  323. font-family: PingFang SC;
  324. font-weight: 500;
  325. color: #666666;
  326. }
  327. .content .order-info .item .cont-text .bold {
  328. color: #111111;
  329. }
  330. .content .order-info .item .sn-box {
  331. display: flex;
  332. align-items: center;
  333. }
  334. .content .order-info .item .sn-box .copy-btn {
  335. width: 58rpx;
  336. height: 32rpx;
  337. line-height: 32rpx;
  338. text-align: center;
  339. font-size: 22rpx;
  340. font-family: PingFang SC;
  341. font-weight: 500;
  342. color: #222222;
  343. background: #F5F5F5;
  344. border-radius: 4rpx;
  345. margin-left: 24rpx;
  346. }
  347. .content .order-info .item .check-box {
  348. display: flex;
  349. align-items: center;
  350. }
  351. .content .order-info .item .check-box image {
  352. width: 14rpx;
  353. height: 24rpx;
  354. margin-left: 10rpx;
  355. }
  356. .content .order-info .line {
  357. width: 100%;
  358. height: 1px;
  359. background: #F0F0F0;
  360. margin-top: 30rpx;
  361. }
  362. .btn-box {
  363. z-index: 999;
  364. bottom: 0;
  365. width: 100%;
  366. position: fixed;
  367. height: 120rpx;
  368. box-sizing: border-box;
  369. background: #FFFFFF;
  370. padding: 0 30rpx;
  371. display: flex;
  372. align-items: center;
  373. justify-content: flex-end;
  374. }
  375. .btn-box .btn {
  376. width: 155rpx;
  377. height: 64rpx;
  378. line-height: 64rpx;
  379. font-size: 26rpx;
  380. font-family: PingFang SC;
  381. font-weight: 500;
  382. text-align: center;
  383. border-radius: 32rpx;
  384. margin-left: 15rpx;
  385. }
  386. .btn-box .btn.cancel {
  387. border: 1px solid #DDDDDD;
  388. color: #666666;
  389. }
  390. .btn-box .btn.pay {
  391. background: #2BC7B9;
  392. color: #FFFFFF;
  393. }