packageDetails.css 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854
  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. body {
  434. height: 100%;
  435. }
  436. .content {
  437. height: 100%;
  438. display: flex;
  439. flex-direction: column;
  440. }
  441. .content .cont-box {
  442. padding-bottom: 3.78125rem;
  443. }
  444. .content .cont-box .package-box {
  445. background-color: #fff;
  446. padding: 0.625rem;
  447. width: 100%;
  448. display: flex;
  449. flex-direction: column;
  450. align-items: flex-start;
  451. justify-content: flex-start;
  452. }
  453. .content .cont-box .package-box .title {
  454. font-weight: bold;
  455. font-size: 1.0625rem;
  456. font-family: PingFang SC;
  457. color: #111;
  458. }
  459. .content .cont-box .package-box .desc {
  460. margin-top: 0.46875rem;
  461. display: flex;
  462. align-items: flex-start;
  463. justify-content: flex-start;
  464. }
  465. .content .cont-box .package-box .desc .cycle {
  466. background-color: #eee;
  467. border-radius: 0.9375rem;
  468. padding: 0.15625rem 0.46875rem;
  469. font-size: 0.8125rem;
  470. font-family: PingFang SC;
  471. color: #C39A58;
  472. }
  473. .content .cont-box .package-box .desc .duration {
  474. margin-left: 0.3125rem;
  475. background-color: #eee;
  476. border-radius: 0.9375rem;
  477. padding: 0.15625rem 0.46875rem;
  478. font-size: 0.8125rem;
  479. font-family: PingFang SC;
  480. color: #C39A58;
  481. }
  482. .content .cont-box .package-box .num-box {
  483. margin-top: 0.46875rem;
  484. flex: 1;
  485. display: flex;
  486. align-items: flex-end;
  487. justify-content: space-between;
  488. width: 100%;
  489. }
  490. .content .cont-box .package-box .num-box .price-box {
  491. display: flex;
  492. align-items: center;
  493. justify-content: flex-start;
  494. }
  495. .content .cont-box .package-box .num-box .price-box .price {
  496. margin-right: 0.3125rem;
  497. padding: 0.15625rem 0.3125rem;
  498. background-color: #C39A58;
  499. border-radius: 0.9375rem;
  500. font-size: 0.625rem;
  501. font-family: PingFang SC;
  502. color: #ffffff;
  503. }
  504. .content .cont-box .package-box .num-box .count {
  505. font-size: 0.75rem;
  506. font-family: PingFang SC;
  507. color: #333333;
  508. }
  509. .content .cont-box .desc-box {
  510. background-color: #fff;
  511. padding: 0.625rem;
  512. margin-top: 0.3125rem;
  513. }
  514. .content .cont-box .desc-box .title-box {
  515. display: flex;
  516. flex-direction: row;
  517. align-items: center;
  518. justify-content: flex-start;
  519. }
  520. .content .cont-box .desc-box .title-box .title {
  521. font-size: 1rem;
  522. font-family: PingFang SC;
  523. font-weight: bold;
  524. color: #111111;
  525. }
  526. .content .cont-box .desc-box .title-box .line {
  527. margin-right: 0.46875rem;
  528. height: 0.9375rem;
  529. width: 0.1875rem;
  530. background-color: #C39A58;
  531. }
  532. .content .cont-box .desc-box .desc {
  533. margin-top: 0.46875rem;
  534. font-size: 0.875rem;
  535. font-family: PingFang SC;
  536. color: #9a9a9c;
  537. }
  538. .content .cont-box .desc-box .html {
  539. margin-top: 0.46875rem;
  540. font-size: 0px;
  541. vertical-align: middle;
  542. }
  543. .content .cont-box .drug-box {
  544. background-color: #fff;
  545. padding: 0.625rem;
  546. margin-top: 0.3125rem;
  547. }
  548. .content .cont-box .drug-box .title-box {
  549. display: flex;
  550. flex-direction: row;
  551. align-items: center;
  552. justify-content: flex-start;
  553. }
  554. .content .cont-box .drug-box .title-box .title {
  555. font-size: 1rem;
  556. font-family: PingFang SC;
  557. font-weight: bold;
  558. color: #111111;
  559. }
  560. .content .cont-box .drug-box .title-box .line {
  561. margin-right: 0.46875rem;
  562. height: 0.9375rem;
  563. width: 0.1875rem;
  564. background-color: #C39A58;
  565. }
  566. .content .cont-box .drug-box .drug-list {
  567. margin-top: 0.46875rem;
  568. }
  569. .content .cont-box .drug-box .drug-list .drug-item .drug {
  570. padding-bottom: 0.46875rem;
  571. border-bottom: 1px soli #F0F0F0;
  572. display: flex;
  573. align-items: center;
  574. }
  575. .content .cont-box .drug-box .drug-list .drug-item .drug .img-box {
  576. width: 5rem;
  577. height: 5rem;
  578. margin-right: 0.9375rem;
  579. flex-shrink: 0;
  580. }
  581. .content .cont-box .drug-box .drug-list .drug-item .drug .img-box uni-image {
  582. width: 100%;
  583. height: 100%;
  584. }
  585. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info {
  586. width: calc(100% - 5.9375rem);
  587. height: 5rem;
  588. display: flex;
  589. flex-direction: column;
  590. justify-content: space-between;
  591. }
  592. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .name-box {
  593. font-size: 0.875rem;
  594. font-family: PingFang SC;
  595. font-weight: 500;
  596. color: #111111;
  597. line-height: 1.25rem;
  598. }
  599. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .name-box .tag {
  600. display: inline-block;
  601. padding: 0 0.1875rem;
  602. height: 0.9375rem;
  603. background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
  604. border-radius: 0.125rem;
  605. margin-right: 0.3125rem;
  606. font-size: 0.6875rem;
  607. font-family: PingFang SC;
  608. font-weight: bold;
  609. color: #FFFFFF;
  610. line-height: 0.9375rem;
  611. float: left;
  612. margin-top: 0.21875rem;
  613. }
  614. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .spec {
  615. font-size: 0.75rem;
  616. font-family: PingFang SC;
  617. font-weight: 500;
  618. color: #999999;
  619. line-height: 1;
  620. margin-top: 0.3125rem;
  621. }
  622. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box {
  623. display: flex;
  624. align-items: center;
  625. justify-content: space-between;
  626. }
  627. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box .price {
  628. display: flex;
  629. align-items: flex-end;
  630. }
  631. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box .price .unit {
  632. font-size: 0.75rem;
  633. font-family: PingFang SC;
  634. font-weight: 500;
  635. color: #111111;
  636. line-height: 1.2;
  637. margin-right: 0.125rem;
  638. }
  639. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box .price .num {
  640. font-size: 1rem;
  641. font-family: PingFang SC;
  642. font-weight: 500;
  643. color: #111111;
  644. line-height: 1;
  645. }
  646. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box .use {
  647. font-size: 0.75rem;
  648. font-family: PingFang SC;
  649. color: #999999;
  650. }
  651. .content .cont-box .drug-box .drug-list .drug-item .drug .drug-info .num-box .amount {
  652. font-size: 0.75rem;
  653. font-family: PingFang SC;
  654. font-weight: 500;
  655. color: #999999;
  656. line-height: 1;
  657. }
  658. .content .cont-box .drug-box .display-more {
  659. font-size: 0.75rem;
  660. font-family: PingFang SC;
  661. font-weight: 500;
  662. color: #999999;
  663. display: flex;
  664. align-items: center;
  665. justify-content: center;
  666. }
  667. .content .cont-box .drug-box .tip {
  668. margin-top: 0.3125rem;
  669. display: flex;
  670. align-items: center;
  671. justify-content: flex-start;
  672. }
  673. .content .cont-box .drug-box .tip .img {
  674. width: 0.625rem;
  675. height: 0.625rem;
  676. }
  677. .content .cont-box .drug-box .tip .text {
  678. margin-left: 0.3125rem;
  679. font-size: 0.8125rem;
  680. font-family: PingFang SC;
  681. font-weight: 500;
  682. color: #999999;
  683. }
  684. .btn-foot {
  685. box-sizing: border-box;
  686. width: 100%;
  687. height: 3.78125rem;
  688. background: #FFFFFF;
  689. padding: 0 1rem 0 0.875rem;
  690. display: flex;
  691. align-items: center;
  692. justify-content: space-between;
  693. position: fixed;
  694. left: 0;
  695. bottom: 0;
  696. z-index: 99;
  697. }
  698. .btn-foot .p-price-box {
  699. display: flex;
  700. align-items: center;
  701. }
  702. .btn-foot .p-price-box .p-name {
  703. font-size: 0.875rem;
  704. font-family: PingFang SC;
  705. font-weight: 500;
  706. color: #FF6633;
  707. }
  708. .btn-foot .p-price-box .p-price {
  709. margin-left: 0.3125rem;
  710. color: #FF6633;
  711. font-size: 1.1875rem;
  712. font-family: PingFang SC;
  713. font-weight: bold;
  714. }
  715. .btn-foot .btn-box {
  716. display: flex;
  717. align-items: center;
  718. }
  719. .btn-foot .btn-box .btn {
  720. width: 6.25rem;
  721. height: 2.75rem;
  722. line-height: 2.75rem;
  723. text-align: center;
  724. border-radius: 1.375rem;
  725. margin-left: 0.625rem;
  726. font-size: 0.9375rem;
  727. font-family: PingFang SC;
  728. font-weight: bold;
  729. color: #FFFFFF;
  730. }
  731. .btn-foot .btn-box .btn:first-child {
  732. margin-left: 0;
  733. }
  734. .btn-foot .btn-box .btn.buy {
  735. background: #C39A58;
  736. }
  737. .doctors {
  738. overflow-y: auto;
  739. padding: 0.625rem;
  740. height: 20.3125rem;
  741. width: 100%;
  742. display: flex;
  743. flex-direction: column;
  744. align-items: flex-start;
  745. justify-content: flex-start;
  746. box-sizing: border-box;
  747. }
  748. .doctors .scroll-list {
  749. height: 20.3125rem;
  750. }
  751. .doctors .doctor {
  752. width: 100%;
  753. margin-bottom: 0.46875rem;
  754. background: #f9f8fe;
  755. padding: 0.625rem;
  756. display: flex;
  757. flex-direction: column;
  758. align-items: flex-start;
  759. justify-content: flex-start;
  760. }
  761. .doctors .doctor:last-child {
  762. margin-bottom: 0;
  763. }
  764. .doctors .doctor .item {
  765. width: 100%;
  766. display: flex;
  767. align-items: center;
  768. justify-content: space-between;
  769. }
  770. .doctors .doctor .item .left {
  771. flex: 1;
  772. width: 100%;
  773. display: flex;
  774. align-items: flex-start;
  775. justify-content: flex-start;
  776. }
  777. .doctors .doctor .item .left .doc-img {
  778. width: 2.5rem;
  779. height: 2.5rem;
  780. border-radius: 50%;
  781. }
  782. .doctors .doctor .item .left .right {
  783. width: calc(100% - 3.125rem);
  784. margin-left: 0.625rem;
  785. display: flex;
  786. flex-direction: column;
  787. align-items: flex-start;
  788. justify-content: flex-start;
  789. }
  790. .doctors .doctor .item .left .right .doc-box {
  791. display: flex;
  792. align-items: center;
  793. justify-content: space-between;
  794. }
  795. .doctors .doctor .item .left .right .doc-box .doc-name {
  796. font-size: 0.875rem;
  797. font-family: PingFang SC;
  798. font-weight: bold;
  799. color: #111111;
  800. }
  801. .doctors .doctor .item .left .right .doc-box .doc-position {
  802. margin-left: 1.5625rem;
  803. font-size: 0.8125rem;
  804. font-family: PingFang SC;
  805. color: #2d2b36;
  806. }
  807. .doctors .doctor .item .left .right .hospital {
  808. margin-top: 0.3125rem;
  809. font-size: 0.75rem;
  810. font-family: PingFang SC;
  811. color: #9a9a9c;
  812. }
  813. .doctors .doctor .item .btn {
  814. padding: 0.3125rem 0.9375rem;
  815. text-align: center;
  816. border-radius: 0.9375rem;
  817. font-size: 0.875rem;
  818. font-family: PingFang SC;
  819. color: #C39A58;
  820. border: 0.03125rem solid #C39A58;
  821. }
  822. .goods-banner {
  823. height: 23.625rem;
  824. background-color: #FFFFFF;
  825. position: relative;
  826. }
  827. .goods-banner .swiper-item {
  828. box-sizing: border-box;
  829. }
  830. .goods-banner .swiper,
  831. .goods-banner .swiper-item,
  832. .goods-banner .swiper-item uni-image {
  833. width: 100%;
  834. height: 100%;
  835. }
  836. .goods-banner .num-box {
  837. width: 2.5rem;
  838. height: 1.375rem;
  839. line-height: 1.375rem;
  840. text-align: center;
  841. font-size: 0.75rem;
  842. font-family: PingFang SC;
  843. font-weight: 500;
  844. color: #FFFFFF;
  845. background: rgba(0, 0, 0, 0.3);
  846. border-radius: 0.6875rem;
  847. position: absolute;
  848. right: 0.9375rem;
  849. bottom: 0.9375rem;
  850. z-index: 10;
  851. }