index.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448
  1. /* 无任何数据的空布局 */
  2. .mescroll-empty[data-v-7cefd855] {
  3. box-sizing: border-box;
  4. width: 100%;
  5. padding: 9.375rem 1.5625rem;
  6. text-align: center;
  7. }
  8. .mescroll-empty.empty-fixed[data-v-7cefd855] {
  9. z-index: 99;
  10. position: absolute; /*transform会使fixed失效,最终会降级为absolute */
  11. top: 3.125rem;
  12. left: 0;
  13. }
  14. .mescroll-empty .empty-icon[data-v-7cefd855] {
  15. width: 6.25rem;
  16. height: 4.6875rem;
  17. }
  18. .mescroll-empty .empty-tip[data-v-7cefd855] {
  19. margin-top: 0.625rem;
  20. font-size: 0.875rem;
  21. color: #bbbbbb;
  22. }
  23. .mescroll-empty .empty-btn[data-v-7cefd855] {
  24. display: inline-block;
  25. margin-top: 1.25rem;
  26. min-width: 6.25rem;
  27. padding: 0.5625rem;
  28. font-size: 0.875rem;
  29. border: 0.03125rem solid #e04b28;
  30. border-radius: 1.875rem;
  31. color: #e04b28;
  32. }
  33. .mescroll-empty .empty-btn[data-v-7cefd855]:active {
  34. opacity: 0.75;
  35. }
  36. /* 回到顶部的按钮 */
  37. .mescroll-totop[data-v-49fff3a8] {
  38. z-index: 9990;
  39. position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
  40. right: 0.625rem;
  41. bottom: 3.75rem;
  42. width: 2.25rem;
  43. height: auto;
  44. border-radius: 50%;
  45. opacity: 0;
  46. transition: opacity 0.5s; /* 过渡 */
  47. margin-bottom: var(--window-bottom); /* css变量 */
  48. }
  49. /* 适配 iPhoneX */
  50. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  51. .mescroll-totop-safearea[data-v-49fff3a8] {
  52. margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
  53. margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
  54. }
  55. }
  56. /* 显示 -- 淡入 */
  57. .mescroll-totop-in[data-v-49fff3a8] {
  58. opacity: 1;
  59. }
  60. /* 隐藏 -- 淡出且不接收事件*/
  61. .mescroll-totop-out[data-v-49fff3a8] {
  62. opacity: 0;
  63. pointer-events: none;
  64. }
  65. .mescroll-body[data-v-151374fc] {
  66. position: relative; /* 下拉刷新区域相对自身定位 */
  67. height: auto; /* 不可固定高度,否则overflow:hidden导致无法滑动; 同时使设置的最小高生效,实现列表不满屏仍可下拉*/
  68. overflow: hidden; /* 当有元素写在mescroll-body标签前面时,可遮住下拉刷新区域 */
  69. box-sizing: border-box; /* 避免设置padding出现双滚动条的问题 */
  70. }
  71. /* 使sticky生效: 父元素不能overflow:hidden或者overflow:auto属性 */
  72. .mescroll-body.mescorll-sticky[data-v-151374fc]{
  73. overflow: unset !important
  74. }
  75. /* 适配 iPhoneX */
  76. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  77. .mescroll-safearea[data-v-151374fc] {
  78. padding-bottom: constant(safe-area-inset-bottom);
  79. padding-bottom: env(safe-area-inset-bottom);
  80. }
  81. }
  82. /* 下拉刷新区域 */
  83. .mescroll-downwarp[data-v-151374fc] {
  84. position: absolute;
  85. top: -100%;
  86. left: 0;
  87. width: 100%;
  88. height: 100%;
  89. text-align: center;
  90. }
  91. /* 下拉刷新--内容区,定位于区域底部 */
  92. .mescroll-downwarp .downwarp-content[data-v-151374fc] {
  93. position: absolute;
  94. left: 0;
  95. bottom: 0;
  96. width: 100%;
  97. min-height: 1.875rem;
  98. padding: 0.625rem 0;
  99. text-align: center;
  100. }
  101. /* 下拉刷新--提示文本 */
  102. .mescroll-downwarp .downwarp-tip[data-v-151374fc] {
  103. display: inline-block;
  104. font-size: 0.875rem;
  105. vertical-align: middle;
  106. margin-left: 0.5rem;
  107. /* color: gray; 已在style设置color,此处删去*/
  108. }
  109. /* 下拉刷新--旋转进度条 */
  110. .mescroll-downwarp .downwarp-progress[data-v-151374fc] {
  111. display: inline-block;
  112. width: 1rem;
  113. height: 1rem;
  114. border-radius: 50%;
  115. border: 0.0625rem solid gray;
  116. border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  117. vertical-align: middle;
  118. }
  119. /* 旋转动画 */
  120. .mescroll-downwarp .mescroll-rotate[data-v-151374fc] {
  121. animation: mescrollDownRotate-151374fc 0.6s linear infinite;
  122. }
  123. @keyframes mescrollDownRotate-151374fc {
  124. 0% {
  125. transform: rotate(0deg);
  126. }
  127. 100% {
  128. transform: rotate(360deg);
  129. }
  130. }
  131. /* 上拉加载区域 */
  132. .mescroll-upwarp[data-v-151374fc] {
  133. box-sizing: border-box;
  134. min-height: 3.4375rem;
  135. padding: 0.9375rem 0;
  136. text-align: center;
  137. clear: both;
  138. }
  139. /*提示文本 */
  140. .mescroll-upwarp .upwarp-tip[data-v-151374fc],
  141. .mescroll-upwarp .upwarp-nodata[data-v-151374fc] {
  142. display: inline-block;
  143. font-size: 0.875rem;
  144. vertical-align: middle;
  145. /* color: gray; 已在style设置color,此处删去*/
  146. }
  147. .mescroll-upwarp .upwarp-tip[data-v-151374fc] {
  148. margin-left: 0.5rem;
  149. }
  150. /*旋转进度条 */
  151. .mescroll-upwarp .upwarp-progress[data-v-151374fc] {
  152. display: inline-block;
  153. width: 1rem;
  154. height: 1rem;
  155. border-radius: 50%;
  156. border: 0.0625rem solid gray;
  157. border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  158. vertical-align: middle;
  159. }
  160. /* 旋转动画 */
  161. .mescroll-upwarp .mescroll-rotate[data-v-151374fc] {
  162. animation: mescrollUpRotate-151374fc 0.6s linear infinite;
  163. }
  164. @keyframes mescrollUpRotate-151374fc {
  165. 0% {
  166. transform: rotate(0deg);
  167. }
  168. 100% {
  169. transform: rotate(360deg);
  170. }
  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. .menu-list-box[data-v-758a2c95] {
  198. padding: 0;
  199. background: #fff;
  200. box-sizing: border-box;
  201. }
  202. .menu-list-box[data-v-758a2c95],
  203. .menu-swiper-box[data-v-758a2c95] {
  204. position: relative;
  205. background: #fff;
  206. }
  207. .menu-list-box .menu-swiper-item[data-v-758a2c95],
  208. .menu-swiper-box .menu-swiper-item[data-v-758a2c95] {
  209. background: #fff;
  210. height: 100%;
  211. width: 100%;
  212. }
  213. .menu-list-box .menu-tab-box[data-v-758a2c95],
  214. .menu-swiper-box .menu-tab-box[data-v-758a2c95] {
  215. display: flex;
  216. flex-wrap: wrap;
  217. }
  218. .menu-list-box .menu-tab-box .tab-list[data-v-758a2c95],
  219. .menu-swiper-box .menu-tab-box .tab-list[data-v-758a2c95] {
  220. width: 25%;
  221. display: flex;
  222. flex-direction: column;
  223. align-items: center;
  224. font-size: 0.6875rem;
  225. font-family: PingFang SC;
  226. font-weight: 500;
  227. color: #333333;
  228. padding-bottom: 0.9375rem;
  229. }
  230. .menu-list-box .menu-tab-box .tab-list .tab-img[data-v-758a2c95],
  231. .menu-swiper-box .menu-tab-box .tab-list .tab-img[data-v-758a2c95] {
  232. border-radius: 0.78125rem;
  233. margin-bottom: 0.3125rem;
  234. }
  235. .menu-list-box .menu-tab-box .tab-list .tab-title[data-v-758a2c95],
  236. .menu-swiper-box .menu-tab-box .tab-list .tab-title[data-v-758a2c95] {
  237. font-size: 0.75rem;
  238. font-family: PingFang SC;
  239. font-weight: 500;
  240. color: #111;
  241. margin-top: 0.3125rem;
  242. }
  243. .menu-list-box .menu-tab-box .tab-list .active[data-v-758a2c95],
  244. .menu-swiper-box .menu-tab-box .tab-list .active[data-v-758a2c95] {
  245. color: #E2C99E;
  246. }
  247. .menu-list-box .menu-dots[data-v-758a2c95],
  248. .menu-swiper-box .menu-dots[data-v-758a2c95] {
  249. display: flex;
  250. position: absolute;
  251. left: 50%;
  252. transform: translateX(-50%);
  253. }
  254. .menu-list-box .menu-dots .dot[data-v-758a2c95],
  255. .menu-swiper-box .menu-dots .dot[data-v-758a2c95] {
  256. width: 1.25rem;
  257. height: 0.09375rem;
  258. background: #eeeeee;
  259. margin-right: 0.3125rem;
  260. }
  261. .menu-list-box .menu-dots .dot-active[data-v-758a2c95],
  262. .menu-swiper-box .menu-dots .dot-active[data-v-758a2c95] {
  263. width: 1.25rem;
  264. height: 0.09375rem;
  265. background: #2BC7B9;
  266. margin-right: 0.3125rem;
  267. }
  268. /**
  269. * 这里是uni-app内置的常用样式变量
  270. *
  271. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  272. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  273. *
  274. */
  275. /**
  276. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  277. *
  278. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  279. */
  280. /* 颜色变量 */
  281. /* 行为相关颜色 */
  282. /* 文字基本颜色 */
  283. /* 背景颜色 */
  284. /* 边框颜色 */
  285. /* 尺寸变量 */
  286. /* 文字尺寸 */
  287. /* 图片尺寸 */
  288. /* Border Radius */
  289. /* 水平间距 */
  290. /* 垂直间距 */
  291. /* 透明度 */
  292. /* 文章场景相关 */
  293. body {
  294. height: 100%;
  295. background: #f6f6f6;
  296. }
  297. /**
  298. * 这里是uni-app内置的常用样式变量
  299. *
  300. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  301. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  302. *
  303. */
  304. /**
  305. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  306. *
  307. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  308. */
  309. /* 颜色变量 */
  310. /* 行为相关颜色 */
  311. /* 文字基本颜色 */
  312. /* 背景颜色 */
  313. /* 边框颜色 */
  314. /* 尺寸变量 */
  315. /* 文字尺寸 */
  316. /* 图片尺寸 */
  317. /* Border Radius */
  318. /* 水平间距 */
  319. /* 垂直间距 */
  320. /* 透明度 */
  321. /* 文章场景相关 */
  322. body[data-v-f73eb578] {
  323. height: 100%;
  324. background-color: #f5f5f5;
  325. }
  326. .content[data-v-f73eb578] {
  327. height: 100%;
  328. }
  329. .content .top-content[data-v-f73eb578] {
  330. width: 100%;
  331. position: fixed;
  332. top: 0;
  333. left: 0;
  334. z-index: 10;
  335. }
  336. .content .top-title[data-v-f73eb578] {
  337. height: 2.75rem;
  338. line-height: 2.75rem;
  339. font-size: 1.3125rem;
  340. font-family: Source Han Sans CN;
  341. font-weight: bold;
  342. color: #222222;
  343. padding-left: 1.28125rem;
  344. background-color: #FFFFFF;
  345. }
  346. .content .search-cont[data-v-f73eb578] {
  347. padding: 0.5rem 0.9375rem;
  348. background-color: #FFFFFF;
  349. }
  350. .content .search-cont .inner[data-v-f73eb578] {
  351. box-sizing: border-box;
  352. width: 100%;
  353. height: 2.25rem;
  354. background: #F7F7F7;
  355. border-radius: 1.125rem;
  356. display: flex;
  357. align-items: center;
  358. padding: 0 0.9375rem;
  359. }
  360. .content .search-cont .inner .icon-search[data-v-f73eb578] {
  361. width: 0.875rem;
  362. height: 0.875rem;
  363. margin-right: 0.625rem;
  364. }
  365. .content .search-cont .inner uni-input[data-v-f73eb578] {
  366. height: 1.875rem;
  367. line-height: 1.875rem;
  368. flex: 1;
  369. }
  370. .content .cate-list[data-v-f73eb578] {
  371. box-sizing: border-box;
  372. background: #fff;
  373. }
  374. .content .package-box[data-v-f73eb578] {
  375. display: flex;
  376. align-items: flex-start;
  377. justify-content: flex-start;
  378. flex-wrap: wrap;
  379. }
  380. .content .package-box .item[data-v-f73eb578] {
  381. box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.05);
  382. background-color: #fff;
  383. width: calc(50% - 0.9375rem);
  384. border-radius: 0.46875rem;
  385. margin: 0.46875rem;
  386. display: flex;
  387. flex-direction: column;
  388. align-items: flex-start;
  389. justify-content: flex-start;
  390. }
  391. .content .package-box .item .top[data-v-f73eb578] {
  392. width: 100%;
  393. height: 10.625rem;
  394. }
  395. .content .package-box .item .top uni-image[data-v-f73eb578] {
  396. border-radius: 0.46875rem 0.46875rem 0 0;
  397. width: 100%;
  398. height: 100%;
  399. }
  400. .content .package-box .item .bottom[data-v-f73eb578] {
  401. padding: 0.46875rem 0.3125rem;
  402. width: 100%;
  403. }
  404. .content .package-box .item .bottom .title[data-v-f73eb578] {
  405. font-weight: bold;
  406. font-size: 0.875rem;
  407. font-family: PingFang SC;
  408. color: #111111;
  409. }
  410. .content .package-box .item .bottom .price-box[data-v-f73eb578] {
  411. margin-top: 0.3125rem;
  412. display: flex;
  413. align-items: center;
  414. justify-content: space-between;
  415. width: 100%;
  416. }
  417. .content .package-box .item .bottom .price-box .price[data-v-f73eb578] {
  418. padding: 0.15625rem 0.3125rem;
  419. background-color: #C39A58;
  420. border-radius: 0.9375rem;
  421. font-size: 0.625rem;
  422. font-family: PingFang SC;
  423. color: #ffffff;
  424. }
  425. .content .package-box .item .bottom .price-box .count[data-v-f73eb578] {
  426. font-size: 0.75rem;
  427. font-family: PingFang SC;
  428. color: #333333;
  429. }