packageOrderPay.css 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991
  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. uni-view[data-v-5cec8177], uni-scroll-view[data-v-5cec8177], uni-swiper-item[data-v-5cec8177] {
  27. display: flex;
  28. flex-direction: column;
  29. flex-shrink: 0;
  30. flex-grow: 0;
  31. flex-basis: auto;
  32. align-items: stretch;
  33. align-content: flex-start;
  34. }
  35. /**
  36. * vue版本动画内置的动画模式有如下:
  37. * fade:淡入
  38. * zoom:缩放
  39. * fade-zoom:缩放淡入
  40. * fade-up:上滑淡入
  41. * fade-down:下滑淡入
  42. * fade-left:左滑淡入
  43. * fade-right:右滑淡入
  44. * slide-up:上滑进入
  45. * slide-down:下滑进入
  46. * slide-left:左滑进入
  47. * slide-right:右滑进入
  48. */
  49. .u-fade-enter-active[data-v-5cec8177],
  50. .u-fade-leave-active[data-v-5cec8177] {
  51. transition-property: opacity;
  52. }
  53. .u-fade-enter[data-v-5cec8177],
  54. .u-fade-leave-to[data-v-5cec8177] {
  55. opacity: 0;
  56. }
  57. .u-fade-zoom-enter[data-v-5cec8177],
  58. .u-fade-zoom-leave-to[data-v-5cec8177] {
  59. transform: scale(0.95);
  60. opacity: 0;
  61. }
  62. .u-fade-zoom-enter-active[data-v-5cec8177],
  63. .u-fade-zoom-leave-active[data-v-5cec8177] {
  64. transition-property: transform, opacity;
  65. }
  66. .u-fade-down-enter-active[data-v-5cec8177],
  67. .u-fade-down-leave-active[data-v-5cec8177],
  68. .u-fade-left-enter-active[data-v-5cec8177],
  69. .u-fade-left-leave-active[data-v-5cec8177],
  70. .u-fade-right-enter-active[data-v-5cec8177],
  71. .u-fade-right-leave-active[data-v-5cec8177],
  72. .u-fade-up-enter-active[data-v-5cec8177],
  73. .u-fade-up-leave-active[data-v-5cec8177] {
  74. transition-property: opacity, transform;
  75. }
  76. .u-fade-up-enter[data-v-5cec8177],
  77. .u-fade-up-leave-to[data-v-5cec8177] {
  78. transform: translate3d(0, 100%, 0);
  79. opacity: 0;
  80. }
  81. .u-fade-down-enter[data-v-5cec8177],
  82. .u-fade-down-leave-to[data-v-5cec8177] {
  83. transform: translate3d(0, -100%, 0);
  84. opacity: 0;
  85. }
  86. .u-fade-left-enter[data-v-5cec8177],
  87. .u-fade-left-leave-to[data-v-5cec8177] {
  88. transform: translate3d(-100%, 0, 0);
  89. opacity: 0;
  90. }
  91. .u-fade-right-enter[data-v-5cec8177],
  92. .u-fade-right-leave-to[data-v-5cec8177] {
  93. transform: translate3d(100%, 0, 0);
  94. opacity: 0;
  95. }
  96. .u-slide-down-enter-active[data-v-5cec8177],
  97. .u-slide-down-leave-active[data-v-5cec8177],
  98. .u-slide-left-enter-active[data-v-5cec8177],
  99. .u-slide-left-leave-active[data-v-5cec8177],
  100. .u-slide-right-enter-active[data-v-5cec8177],
  101. .u-slide-right-leave-active[data-v-5cec8177],
  102. .u-slide-up-enter-active[data-v-5cec8177],
  103. .u-slide-up-leave-active[data-v-5cec8177] {
  104. transition-property: transform;
  105. }
  106. .u-slide-up-enter[data-v-5cec8177],
  107. .u-slide-up-leave-to[data-v-5cec8177] {
  108. transform: translate3d(0, 100%, 0);
  109. }
  110. .u-slide-down-enter[data-v-5cec8177],
  111. .u-slide-down-leave-to[data-v-5cec8177] {
  112. transform: translate3d(0, -100%, 0);
  113. }
  114. .u-slide-left-enter[data-v-5cec8177],
  115. .u-slide-left-leave-to[data-v-5cec8177] {
  116. transform: translate3d(-100%, 0, 0);
  117. }
  118. .u-slide-right-enter[data-v-5cec8177],
  119. .u-slide-right-leave-to[data-v-5cec8177] {
  120. transform: translate3d(100%, 0, 0);
  121. }
  122. .u-zoom-enter-active[data-v-5cec8177],
  123. .u-zoom-leave-active[data-v-5cec8177] {
  124. transition-property: transform;
  125. }
  126. .u-zoom-enter[data-v-5cec8177],
  127. .u-zoom-leave-to[data-v-5cec8177] {
  128. transform: scale(0.95);
  129. }
  130. /**
  131. * 这里是uni-app内置的常用样式变量
  132. *
  133. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  134. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  135. *
  136. */
  137. /**
  138. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  139. *
  140. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  141. */
  142. /* 颜色变量 */
  143. /* 行为相关颜色 */
  144. /* 文字基本颜色 */
  145. /* 背景颜色 */
  146. /* 边框颜色 */
  147. /* 尺寸变量 */
  148. /* 文字尺寸 */
  149. /* 图片尺寸 */
  150. /* Border Radius */
  151. /* 水平间距 */
  152. /* 垂直间距 */
  153. /* 透明度 */
  154. /* 文章场景相关 */
  155. uni-view[data-v-9112bed9], uni-scroll-view[data-v-9112bed9], uni-swiper-item[data-v-9112bed9] {
  156. display: flex;
  157. flex-direction: column;
  158. flex-shrink: 0;
  159. flex-grow: 0;
  160. flex-basis: auto;
  161. align-items: stretch;
  162. align-content: flex-start;
  163. }
  164. .u-overlay[data-v-9112bed9] {
  165. position: fixed;
  166. top: 0;
  167. left: 0;
  168. width: 100%;
  169. height: 100%;
  170. background-color: rgba(0, 0, 0, 0.7);
  171. }
  172. /**
  173. * 这里是uni-app内置的常用样式变量
  174. *
  175. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  176. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  177. *
  178. */
  179. /**
  180. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  181. *
  182. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  183. */
  184. /* 颜色变量 */
  185. /* 行为相关颜色 */
  186. /* 文字基本颜色 */
  187. /* 背景颜色 */
  188. /* 边框颜色 */
  189. /* 尺寸变量 */
  190. /* 文字尺寸 */
  191. /* 图片尺寸 */
  192. /* Border Radius */
  193. /* 水平间距 */
  194. /* 垂直间距 */
  195. /* 透明度 */
  196. /* 文章场景相关 */
  197. .u-status-bar[data-v-eb8e0cdd] {
  198. width: 100%;
  199. }
  200. /**
  201. * 这里是uni-app内置的常用样式变量
  202. *
  203. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  204. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  205. *
  206. */
  207. /**
  208. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  209. *
  210. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  211. */
  212. /* 颜色变量 */
  213. /* 行为相关颜色 */
  214. /* 文字基本颜色 */
  215. /* 背景颜色 */
  216. /* 边框颜色 */
  217. /* 尺寸变量 */
  218. /* 文字尺寸 */
  219. /* 图片尺寸 */
  220. /* Border Radius */
  221. /* 水平间距 */
  222. /* 垂直间距 */
  223. /* 透明度 */
  224. /* 文章场景相关 */
  225. uni-view[data-v-ac70166d], uni-scroll-view[data-v-ac70166d], uni-swiper-item[data-v-ac70166d] {
  226. display: flex;
  227. flex-direction: column;
  228. flex-shrink: 0;
  229. flex-grow: 0;
  230. flex-basis: auto;
  231. align-items: stretch;
  232. align-content: flex-start;
  233. }
  234. @font-face {
  235. font-family: "uicon-iconfont";
  236. src: url("https://at.alicdn.com/t/font_2225171_8kdcwk4po24.ttf") format("truetype");
  237. }
  238. .u-icon[data-v-ac70166d] {
  239. display: flex;
  240. align-items: center;
  241. }
  242. .u-icon--left[data-v-ac70166d] {
  243. flex-direction: row-reverse;
  244. align-items: center;
  245. }
  246. .u-icon--right[data-v-ac70166d] {
  247. flex-direction: row;
  248. align-items: center;
  249. }
  250. .u-icon--top[data-v-ac70166d] {
  251. flex-direction: column-reverse;
  252. justify-content: center;
  253. }
  254. .u-icon--bottom[data-v-ac70166d] {
  255. flex-direction: column;
  256. justify-content: center;
  257. }
  258. .u-icon__icon[data-v-ac70166d] {
  259. font-family: uicon-iconfont;
  260. position: relative;
  261. display: flex;
  262. flex-direction: row;
  263. align-items: center;
  264. }
  265. .u-icon__icon--primary[data-v-ac70166d] {
  266. color: #3c9cff;
  267. }
  268. .u-icon__icon--success[data-v-ac70166d] {
  269. color: #5ac725;
  270. }
  271. .u-icon__icon--error[data-v-ac70166d] {
  272. color: #f56c6c;
  273. }
  274. .u-icon__icon--warning[data-v-ac70166d] {
  275. color: #f9ae3d;
  276. }
  277. .u-icon__icon--info[data-v-ac70166d] {
  278. color: #909399;
  279. }
  280. .u-icon__img[data-v-ac70166d] {
  281. height: auto;
  282. will-change: transform;
  283. }
  284. .u-icon__label[data-v-ac70166d] {
  285. line-height: 1;
  286. }
  287. /**
  288. * 这里是uni-app内置的常用样式变量
  289. *
  290. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  291. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  292. *
  293. */
  294. /**
  295. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  296. *
  297. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  298. */
  299. /* 颜色变量 */
  300. /* 行为相关颜色 */
  301. /* 文字基本颜色 */
  302. /* 背景颜色 */
  303. /* 边框颜色 */
  304. /* 尺寸变量 */
  305. /* 文字尺寸 */
  306. /* 图片尺寸 */
  307. /* Border Radius */
  308. /* 水平间距 */
  309. /* 垂直间距 */
  310. /* 透明度 */
  311. /* 文章场景相关 */
  312. .u-safe-bottom[data-v-f3d22cfe] {
  313. width: 100%;
  314. }
  315. /**
  316. * 这里是uni-app内置的常用样式变量
  317. *
  318. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  319. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  320. *
  321. */
  322. /**
  323. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  324. *
  325. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  326. */
  327. /* 颜色变量 */
  328. /* 行为相关颜色 */
  329. /* 文字基本颜色 */
  330. /* 背景颜色 */
  331. /* 边框颜色 */
  332. /* 尺寸变量 */
  333. /* 文字尺寸 */
  334. /* 图片尺寸 */
  335. /* Border Radius */
  336. /* 水平间距 */
  337. /* 垂直间距 */
  338. /* 透明度 */
  339. /* 文章场景相关 */
  340. uni-view[data-v-05c24e9b], uni-scroll-view[data-v-05c24e9b], uni-swiper-item[data-v-05c24e9b] {
  341. display: flex;
  342. flex-direction: column;
  343. flex-shrink: 0;
  344. flex-grow: 0;
  345. flex-basis: auto;
  346. align-items: stretch;
  347. align-content: flex-start;
  348. }
  349. .u-popup[data-v-05c24e9b] {
  350. flex: 1;
  351. }
  352. .u-popup__content[data-v-05c24e9b] {
  353. background-color: #fff;
  354. position: relative;
  355. }
  356. .u-popup__content--round-top[data-v-05c24e9b] {
  357. border-top-left-radius: 0;
  358. border-top-right-radius: 0;
  359. border-bottom-left-radius: 10px;
  360. border-bottom-right-radius: 10px;
  361. }
  362. .u-popup__content--round-left[data-v-05c24e9b] {
  363. border-top-left-radius: 0;
  364. border-top-right-radius: 10px;
  365. border-bottom-left-radius: 0;
  366. border-bottom-right-radius: 10px;
  367. }
  368. .u-popup__content--round-right[data-v-05c24e9b] {
  369. border-top-left-radius: 10px;
  370. border-top-right-radius: 0;
  371. border-bottom-left-radius: 10px;
  372. border-bottom-right-radius: 0;
  373. }
  374. .u-popup__content--round-bottom[data-v-05c24e9b] {
  375. border-top-left-radius: 10px;
  376. border-top-right-radius: 10px;
  377. border-bottom-left-radius: 0;
  378. border-bottom-right-radius: 0;
  379. }
  380. .u-popup__content--round-center[data-v-05c24e9b] {
  381. border-top-left-radius: 10px;
  382. border-top-right-radius: 10px;
  383. border-bottom-left-radius: 10px;
  384. border-bottom-right-radius: 10px;
  385. }
  386. .u-popup__content__close[data-v-05c24e9b] {
  387. position: absolute;
  388. }
  389. .u-popup__content__close--hover[data-v-05c24e9b] {
  390. opacity: 0.4;
  391. }
  392. .u-popup__content__close--top-left[data-v-05c24e9b] {
  393. top: 15px;
  394. left: 15px;
  395. }
  396. .u-popup__content__close--top-right[data-v-05c24e9b] {
  397. top: 15px;
  398. right: 15px;
  399. }
  400. .u-popup__content__close--bottom-left[data-v-05c24e9b] {
  401. bottom: 15px;
  402. left: 15px;
  403. }
  404. .u-popup__content__close--bottom-right[data-v-05c24e9b] {
  405. right: 15px;
  406. bottom: 15px;
  407. }
  408. /**
  409. * 这里是uni-app内置的常用样式变量
  410. *
  411. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  412. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  413. *
  414. */
  415. /**
  416. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  417. *
  418. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  419. */
  420. /* 颜色变量 */
  421. /* 行为相关颜色 */
  422. /* 文字基本颜色 */
  423. /* 背景颜色 */
  424. /* 边框颜色 */
  425. /* 尺寸变量 */
  426. /* 文字尺寸 */
  427. /* 图片尺寸 */
  428. /* Border Radius */
  429. /* 水平间距 */
  430. /* 垂直间距 */
  431. /* 透明度 */
  432. /* 文章场景相关 */
  433. .inner-box {
  434. padding: 0.625rem 0.625rem 9.375rem;
  435. }
  436. .inner-box .address-box {
  437. box-sizing: border-box;
  438. min-height: 5.34375rem;
  439. background: #FFFFFF;
  440. border-radius: 0.5rem;
  441. background-image: url(../static/images/address_bg.png);
  442. background-repeat: no-repeat;
  443. background-size: 100% 0.9375rem;
  444. background-position: left bottom;
  445. padding: 1.1875rem 0.9375rem 1.125rem;
  446. display: flex;
  447. align-items: center;
  448. justify-content: space-between;
  449. }
  450. .inner-box .address-box .left {
  451. width: 92%;
  452. }
  453. .inner-box .address-box .left .name-box {
  454. display: flex;
  455. align-items: center;
  456. }
  457. .inner-box .address-box .left .name-box .text {
  458. font-size: 1rem;
  459. font-family: PingFang SC;
  460. font-weight: bold;
  461. color: #111111;
  462. line-height: 1;
  463. }
  464. .inner-box .address-box .left .name-box .text.name {
  465. margin-right: 0.9375rem;
  466. }
  467. .inner-box .address-box .left .address {
  468. font-size: 0.875rem;
  469. font-family: PingFang SC;
  470. font-weight: 500;
  471. color: #666666;
  472. line-height: 1.3125rem;
  473. text-align: left;
  474. margin-top: 0.71875rem;
  475. }
  476. .inner-box .address-box .arrow-box {
  477. width: 0.375rem;
  478. height: 0.71875rem;
  479. display: flex;
  480. align-items: cenetr;
  481. justify-content: cenetr;
  482. }
  483. .inner-box .address-box .arrow-box uni-image {
  484. width: 100%;
  485. height: 100%;
  486. }
  487. .inner-box .goods-list {
  488. margin-top: 0.625rem;
  489. padding: 0 0.9375rem;
  490. background-color: #FFFFFF;
  491. border-radius: 0.5rem;
  492. }
  493. .inner-box .goods-list .item {
  494. padding: 0.9375rem 0;
  495. border-bottom: 1px solid #EDEEEF;
  496. display: flex;
  497. align-items: center;
  498. }
  499. .inner-box .goods-list .item .img-box {
  500. width: 5rem;
  501. height: 5rem;
  502. margin-right: 0.9375rem;
  503. }
  504. .inner-box .goods-list .item .img-box uni-image {
  505. width: 100%;
  506. height: 100%;
  507. }
  508. .inner-box .goods-list .item .info-box {
  509. width: calc(100% - 5.9375rem);
  510. height: 5rem;
  511. display: flex;
  512. flex-direction: column;
  513. justify-content: space-between;
  514. }
  515. .inner-box .goods-list .item .info-box .name-box {
  516. font-size: 0.875rem;
  517. font-family: PingFang SC;
  518. font-weight: 500;
  519. color: #111111;
  520. line-height: 1.25rem;
  521. }
  522. .inner-box .goods-list .item .info-box .name-box .tag {
  523. display: inline-block;
  524. padding: 0 0.1875rem;
  525. height: 0.9375rem;
  526. background: linear-gradient(90deg, #C39A58 0%, #E2C99E 100%);
  527. border-radius: 0.125rem;
  528. margin-right: 0.3125rem;
  529. font-size: 0.6875rem;
  530. font-family: PingFang SC;
  531. font-weight: bold;
  532. color: #FFFFFF;
  533. line-height: 0.9375rem;
  534. float: left;
  535. margin-top: 0.21875rem;
  536. }
  537. .inner-box .goods-list .item .info-box .spec {
  538. margin-top: 0.3125rem;
  539. font-size: 0.75rem;
  540. font-family: PingFang SC;
  541. font-weight: 500;
  542. color: #999999;
  543. line-height: 1;
  544. }
  545. .inner-box .goods-list .item .info-box .price-num {
  546. display: flex;
  547. align-items: center;
  548. justify-content: space-between;
  549. }
  550. .inner-box .goods-list .item .info-box .price-num .price {
  551. display: flex;
  552. align-items: flex-end;
  553. }
  554. .inner-box .goods-list .item .info-box .price-num .price .unit {
  555. font-size: 0.75rem;
  556. font-family: PingFang SC;
  557. font-weight: 500;
  558. color: #111111;
  559. line-height: 1.2;
  560. margin-right: 0.125rem;
  561. }
  562. .inner-box .goods-list .item .info-box .price-num .price .num {
  563. font-size: 1rem;
  564. font-family: PingFang SC;
  565. font-weight: 500;
  566. color: #111111;
  567. line-height: 1;
  568. }
  569. .inner-box .goods-list .item .info-box .price-num .num {
  570. font-size: 0.75rem;
  571. font-family: PingFang SC;
  572. font-weight: 500;
  573. color: #999999;
  574. line-height: 1;
  575. }
  576. .inner-box .goods-list .sub-total {
  577. height: 2.75rem;
  578. display: flex;
  579. align-items: center;
  580. justify-content: flex-end;
  581. }
  582. .inner-box .goods-list .sub-total .label {
  583. font-size: 0.75rem;
  584. font-family: PingFang SC;
  585. font-weight: 500;
  586. color: #999999;
  587. }
  588. .inner-box .goods-list .sub-total .price {
  589. display: flex;
  590. align-items: flex-end;
  591. }
  592. .inner-box .goods-list .sub-total .price .unit {
  593. font-size: 0.75rem;
  594. font-family: PingFang SC;
  595. font-weight: 500;
  596. color: #FF6633;
  597. line-height: 1.2;
  598. margin-right: 0.125rem;
  599. }
  600. .inner-box .goods-list .sub-total .price .num {
  601. font-size: 1rem;
  602. font-family: PingFang SC;
  603. font-weight: bold;
  604. color: #FF6633;
  605. line-height: 1;
  606. }
  607. .inner-box .other-info {
  608. margin-top: 0.625rem;
  609. background-color: #fff;
  610. border-radius: 0.625rem;
  611. overflow: hidden;
  612. padding: 0 0.9375rem;
  613. }
  614. .inner-box .other-info .title {
  615. height: 2.5rem;
  616. line-height: 2.5rem;
  617. font-size: 0.9375rem;
  618. color: #000;
  619. font-weight: bold;
  620. border-bottom: 0.0625rem solid #eeeeee;
  621. }
  622. .inner-box .other-info .drug-list {
  623. margin-top: 0.46875rem;
  624. }
  625. .inner-box .other-info .drug-list .drug-item {
  626. padding-bottom: 0.46875rem;
  627. border-bottom: 1px soli #F0F0F0;
  628. display: flex;
  629. align-items: center;
  630. }
  631. .inner-box .other-info .drug-list .drug-item .img-box {
  632. width: 5rem;
  633. height: 5rem;
  634. margin-right: 0.9375rem;
  635. flex-shrink: 0;
  636. }
  637. .inner-box .other-info .drug-list .drug-item .img-box uni-image {
  638. width: 100%;
  639. height: 100%;
  640. }
  641. .inner-box .other-info .drug-list .drug-item .drug-info {
  642. width: calc(100% - 5.9375rem);
  643. height: 5rem;
  644. display: flex;
  645. flex-direction: column;
  646. justify-content: space-between;
  647. }
  648. .inner-box .other-info .drug-list .drug-item .drug-info .name-box {
  649. font-size: 0.875rem;
  650. font-family: PingFang SC;
  651. font-weight: 500;
  652. color: #111111;
  653. line-height: 1.25rem;
  654. }
  655. .inner-box .other-info .drug-list .drug-item .drug-info .name-box .tag {
  656. display: inline-block;
  657. padding: 0 0.1875rem;
  658. height: 0.9375rem;
  659. background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
  660. border-radius: 0.125rem;
  661. margin-right: 0.3125rem;
  662. font-size: 0.6875rem;
  663. font-family: PingFang SC;
  664. font-weight: bold;
  665. color: #FFFFFF;
  666. line-height: 0.9375rem;
  667. float: left;
  668. margin-top: 0.21875rem;
  669. }
  670. .inner-box .other-info .drug-list .drug-item .drug-info .spec {
  671. font-size: 0.75rem;
  672. font-family: PingFang SC;
  673. font-weight: 500;
  674. color: #999999;
  675. line-height: 1;
  676. margin-top: 0.3125rem;
  677. }
  678. .inner-box .other-info .drug-list .drug-item .drug-info .num-box {
  679. display: flex;
  680. align-items: center;
  681. justify-content: space-between;
  682. }
  683. .inner-box .other-info .drug-list .drug-item .drug-info .num-box .price {
  684. display: flex;
  685. align-items: flex-end;
  686. }
  687. .inner-box .other-info .drug-list .drug-item .drug-info .num-box .price .unit {
  688. font-size: 0.75rem;
  689. font-family: PingFang SC;
  690. font-weight: 500;
  691. color: #111111;
  692. line-height: 1.2;
  693. margin-right: 0.125rem;
  694. }
  695. .inner-box .other-info .drug-list .drug-item .drug-info .num-box .price .num {
  696. font-size: 1rem;
  697. font-family: PingFang SC;
  698. font-weight: 500;
  699. color: #111111;
  700. line-height: 1;
  701. }
  702. .inner-box .other-info .drug-list .drug-item .drug-info .num-box .use {
  703. font-size: 0.75rem;
  704. font-family: PingFang SC;
  705. color: #999999;
  706. }
  707. .inner-box .other-info .drug-list .drug-item .drug-info .num-box .amount {
  708. font-size: 0.75rem;
  709. font-family: PingFang SC;
  710. font-weight: 500;
  711. color: #999999;
  712. line-height: 1;
  713. }
  714. .inner-box .other-info .item {
  715. height: 2.5rem;
  716. display: flex;
  717. align-items: center;
  718. justify-content: space-between;
  719. }
  720. .inner-box .other-info .item:last-child {
  721. border-bottom: none;
  722. }
  723. .inner-box .other-info .item .left {
  724. flex: 1;
  725. display: flex;
  726. align-items: center;
  727. }
  728. .inner-box .other-info .item .left .label {
  729. min-width: 4.375rem;
  730. font-size: 0.875rem;
  731. color: #000;
  732. }
  733. .inner-box .other-info .item .left .text {
  734. font-size: 0.875rem;
  735. color: #1b1b1b;
  736. }
  737. .inner-box .other-info .item .right {
  738. display: flex;
  739. align-items: center;
  740. justify-content: flex-end;
  741. }
  742. .inner-box .other-info .item .right .text {
  743. font-size: 0.875rem;
  744. color: #1b1b1b;
  745. }
  746. .inner-box .other-info .item .right .ic-close {
  747. margin-left: 0.3125rem;
  748. width: 0.9375rem;
  749. height: 0.9375rem;
  750. }
  751. .inner-box .other-info .item .right .ic-back {
  752. margin-left: 0.3125rem;
  753. width: 0.46875rem;
  754. height: 0.9375rem;
  755. }
  756. .inner-box .other-info .item .item-btn {
  757. max-width: 6.25rem;
  758. padding: 0 0.46875rem;
  759. height: 1.5rem;
  760. border-radius: 0.75rem;
  761. line-height: 1.5rem;
  762. font-size: 0.75rem;
  763. color: #000;
  764. border: 0.03125rem solid #d8d8d8;
  765. display: flex;
  766. align-items: center;
  767. justify-content: center;
  768. }
  769. .inner-box .remarks {
  770. height: 2.75rem;
  771. padding: 0 0.9375rem;
  772. background: #FFFFFF;
  773. border-radius: 0.5rem;
  774. margin-top: 0.625rem;
  775. display: flex;
  776. align-items: center;
  777. }
  778. .inner-box .remarks uni-input {
  779. width: 100%;
  780. font-size: 0.875rem;
  781. font-family: PingFang SC;
  782. font-weight: 500;
  783. color: #000000;
  784. }
  785. .inner-box .remarks .input {
  786. font-size: 0.875rem;
  787. font-family: PingFang SC;
  788. font-weight: 500;
  789. color: #999999;
  790. }
  791. .btn-box {
  792. z-index: 9999;
  793. width: 100%;
  794. padding: 0.9375rem 0.9375rem 0;
  795. position: fixed;
  796. bottom: 0;
  797. left: 0;
  798. box-sizing: border-box;
  799. background-color: #ffffff;
  800. display: flex;
  801. flex-direction: column;
  802. align-items: center;
  803. justify-content: center;
  804. }
  805. .btn-box .btn {
  806. margin-bottom: 0.625rem;
  807. width: 100%;
  808. height: 2.75rem;
  809. line-height: 2.75rem;
  810. text-align: center;
  811. font-size: 1.0625rem;
  812. font-family: PingFang SC;
  813. font-weight: 400;
  814. color: #FFFFFF;
  815. background: #C39A58;
  816. border-radius: 0.3125rem;
  817. position: relative;
  818. }
  819. .btn-box .btn .contact-btn {
  820. position: absolute;
  821. width: 100%;
  822. height: 100%;
  823. display: flex;
  824. opacity: 0;
  825. }
  826. .btn-box .btn1 {
  827. margin-bottom: 0.625rem;
  828. width: 100%;
  829. height: 2.75rem;
  830. line-height: 2.75rem;
  831. text-align: center;
  832. font-size: 1.0625rem;
  833. font-family: PingFang SC;
  834. font-weight: 400;
  835. color: #C39A58;
  836. border: 0.03125rem solid #C39A58;
  837. border-radius: 0.3125rem;
  838. position: relative;
  839. }
  840. .btn-box .btn1 .contact-btn {
  841. position: absolute;
  842. width: 100%;
  843. height: 100%;
  844. display: flex;
  845. opacity: 0;
  846. }
  847. .pay-type {
  848. box-sizing: border-box;
  849. background: #FFFFFF;
  850. border-radius: 0.5rem;
  851. margin-top: 0.625rem;
  852. padding: 1.25rem 0.9375rem 0.625rem;
  853. display: flex;
  854. flex-direction: column;
  855. justify-content: space-between;
  856. }
  857. .pay-type .title {
  858. font-size: 0.875rem;
  859. font-family: PingFang SC;
  860. font-weight: 500;
  861. color: #999999;
  862. line-height: 1;
  863. margin-bottom: 0.3125rem;
  864. }
  865. .pay-type .item {
  866. padding: 0.46875rem 0;
  867. display: flex;
  868. align-items: center;
  869. justify-content: space-between;
  870. }
  871. .pay-type .item .left {
  872. display: flex;
  873. align-items: center;
  874. }
  875. .pay-type .item .left uni-image {
  876. width: 1.375rem;
  877. height: 1.375rem;
  878. margin-right: 0.625rem;
  879. }
  880. .pay-type .item .left .text {
  881. font-size: 0.9375rem;
  882. font-family: PingFang SC;
  883. font-weight: bold;
  884. color: #222222;
  885. line-height: 1;
  886. }
  887. .coupon {
  888. height: 100%;
  889. }
  890. .coupon .empty {
  891. display: flex;
  892. align-items: center;
  893. justify-content: center;
  894. height: 20.3125rem;
  895. width: 100%;
  896. }
  897. .coupon .empty uni-image {
  898. width: 8.75rem;
  899. height: 6.25rem;
  900. }
  901. .coupon-box {
  902. overflow-y: auto;
  903. padding: 2.5rem 0.625rem 2.5rem;
  904. height: 20.3125rem;
  905. width: 100%;
  906. display: flex;
  907. flex-direction: column;
  908. align-items: flex-start;
  909. justify-content: flex-start;
  910. box-sizing: border-box;
  911. }
  912. .coupon-box .coupon-item {
  913. width: 100%;
  914. display: flex;
  915. align-items: center;
  916. justify-content: flex-start;
  917. margin-bottom: 0.5rem;
  918. height: 5.3125rem;
  919. }
  920. .coupon-box .coupon-item:last-child {
  921. margin-bottom: 0;
  922. }
  923. .coupon-box .coupon-item .left {
  924. color: #fff;
  925. font-size: 1.125rem;
  926. font-weight: bold;
  927. text-align: center;
  928. display: flex;
  929. flex-direction: column;
  930. align-items: center;
  931. justify-content: center;
  932. position: relative;
  933. width: 7.1875rem;
  934. }
  935. .coupon-box .coupon-item .left uni-image {
  936. position: absolute;
  937. width: 7.1875rem;
  938. height: 5.3125rem;
  939. color: #fff;
  940. }
  941. .coupon-box .coupon-item .left .num {
  942. font-size: 1.25rem;
  943. }
  944. .coupon-box .coupon-item .left .pic-num {
  945. font-size: 0.625rem;
  946. z-index: 99;
  947. }
  948. .coupon-box .coupon-item .right {
  949. display: flex;
  950. flex-direction: column;
  951. align-items: flex-start;
  952. justify-content: flex-start;
  953. height: 5.3125rem;
  954. width: calc(100% - 7.1875rem);
  955. padding: 0 0.53125rem 0 0.75rem;
  956. background-color: #fff;
  957. box-sizing: border-box;
  958. }
  959. .coupon-box .coupon-item .right .title {
  960. width: 100%;
  961. font-size: 0.9375rem;
  962. color: #282828;
  963. height: 2.90625rem;
  964. line-height: 2.90625rem;
  965. border-bottom: 1px solid #f0f0f0;
  966. }
  967. .coupon-box .coupon-item .right .btns {
  968. display: flex;
  969. align-items: center;
  970. justify-content: space-between;
  971. width: 100%;
  972. font-size: 0.625rem;
  973. color: #999;
  974. height: 2.375rem;
  975. }
  976. .coupon-box .coupon-item .right .btns .btn {
  977. width: 4.25rem;
  978. height: 1.375rem;
  979. border-radius: 0.6875rem;
  980. font-size: 0.6875rem;
  981. color: #fff;
  982. text-align: center;
  983. line-height: 1.375rem;
  984. background-color: #C39A58;
  985. }
  986. .coupon-box .coupon-item .right .btns .btn .gray {
  987. background-color: #ccc;
  988. }