package.css 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  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. .u-sticky[data-v-8b303089] {
  27. position: -webkit-sticky;
  28. position: sticky;
  29. }
  30. /* 无任何数据的空布局 */
  31. .mescroll-empty[data-v-7cefd855] {
  32. box-sizing: border-box;
  33. width: 100%;
  34. padding: 3.125rem 1.5625rem;
  35. text-align: center;
  36. }
  37. .mescroll-empty.empty-fixed[data-v-7cefd855] {
  38. z-index: 99;
  39. position: absolute; /*transform会使fixed失效,最终会降级为absolute */
  40. top: 3.125rem;
  41. left: 0;
  42. }
  43. .mescroll-empty .empty-icon[data-v-7cefd855] {
  44. width: 8.75rem;
  45. height: 8.75rem;
  46. }
  47. .mescroll-empty .empty-tip[data-v-7cefd855] {
  48. margin-top: 0.625rem;
  49. height: 1.25rem;
  50. font-size: 0.875rem;
  51. font-family: PingFangSC;
  52. font-weight: 500;
  53. color: #666666;
  54. line-height: 1.25rem;
  55. }
  56. .mescroll-empty .empty-btn[data-v-7cefd855] {
  57. display: inline-block;
  58. margin-top: 1.25rem;
  59. min-width: 6.25rem;
  60. padding: 0.5625rem;
  61. font-size: 0.875rem;
  62. border: 0.03125rem solid #e04b28;
  63. border-radius: 1.875rem;
  64. color: #e04b28;
  65. }
  66. .mescroll-empty .empty-btn[data-v-7cefd855]:active {
  67. opacity: 0.75;
  68. }
  69. /* 回到顶部的按钮 */
  70. .mescroll-totop[data-v-49fff3a8] {
  71. z-index: 9990;
  72. position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
  73. right: 0.625rem;
  74. bottom: 3.75rem;
  75. width: 2.25rem;
  76. height: auto;
  77. border-radius: 50%;
  78. opacity: 0;
  79. transition: opacity 0.5s; /* 过渡 */
  80. margin-bottom: var(--window-bottom); /* css变量 */
  81. }
  82. /* 适配 iPhoneX */
  83. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  84. .mescroll-totop-safearea[data-v-49fff3a8] {
  85. margin-bottom: calc(var(--window-bottom) + constant(safe-area-inset-bottom)); /* window-bottom + 适配 iPhoneX */
  86. margin-bottom: calc(var(--window-bottom) + env(safe-area-inset-bottom));
  87. }
  88. }
  89. /* 显示 -- 淡入 */
  90. .mescroll-totop-in[data-v-49fff3a8] {
  91. opacity: 1;
  92. }
  93. /* 隐藏 -- 淡出且不接收事件*/
  94. .mescroll-totop-out[data-v-49fff3a8] {
  95. opacity: 0;
  96. pointer-events: none;
  97. }
  98. .mescroll-uni-warp[data-v-97b1664c] {
  99. height: 100%;
  100. }
  101. .mescroll-uni-content[data-v-97b1664c] {
  102. height: 100%;
  103. }
  104. .mescroll-uni[data-v-97b1664c] {
  105. position: relative;
  106. width: 100%;
  107. height: 100%;
  108. min-height: 6.25rem;
  109. overflow-y: auto;
  110. box-sizing: border-box;
  111. /* 避免设置padding出现双滚动条的问题 */
  112. }
  113. /* 定位的方式固定高度 */
  114. .mescroll-uni-fixed[data-v-97b1664c] {
  115. z-index: 1;
  116. position: fixed;
  117. top: 0;
  118. left: 0;
  119. right: 0;
  120. bottom: 0;
  121. width: auto;
  122. /* 使right生效 */
  123. height: auto;
  124. /* 使bottom生效 */
  125. }
  126. /* 适配 iPhoneX */
  127. @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  128. .mescroll-safearea[data-v-97b1664c] {
  129. padding-bottom: constant(safe-area-inset-bottom);
  130. padding-bottom: env(safe-area-inset-bottom);
  131. }
  132. }
  133. /* 下拉刷新区域 */
  134. .mescroll-downwarp[data-v-97b1664c] {
  135. position: absolute;
  136. top: -100%;
  137. left: 0;
  138. width: 100%;
  139. height: 100%;
  140. text-align: center;
  141. }
  142. /* 下拉刷新--内容区,定位于区域底部 */
  143. .mescroll-downwarp .downwarp-content[data-v-97b1664c] {
  144. position: absolute;
  145. left: 0;
  146. bottom: 0;
  147. width: 100%;
  148. min-height: 1.875rem;
  149. padding: 0.625rem 0;
  150. text-align: center;
  151. }
  152. /* 下拉刷新--提示文本 */
  153. .mescroll-downwarp .downwarp-tip[data-v-97b1664c] {
  154. display: inline-block;
  155. font-size: 0.875rem;
  156. vertical-align: middle;
  157. margin-left: 0.5rem;
  158. /* color: gray; 已在style设置color,此处删去*/
  159. }
  160. /* 下拉刷新--旋转进度条 */
  161. .mescroll-downwarp .downwarp-progress[data-v-97b1664c] {
  162. display: inline-block;
  163. width: 1rem;
  164. height: 1rem;
  165. border-radius: 50%;
  166. border: 0.0625rem solid gray;
  167. border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  168. vertical-align: middle;
  169. }
  170. /* 旋转动画 */
  171. .mescroll-downwarp .mescroll-rotate[data-v-97b1664c] {
  172. animation: mescrollDownRotate-97b1664c 0.6s linear infinite;
  173. }
  174. @keyframes mescrollDownRotate-97b1664c {
  175. 0% {
  176. transform: rotate(0deg);
  177. }
  178. 100% {
  179. transform: rotate(360deg);
  180. }
  181. }
  182. /* 上拉加载区域 */
  183. .mescroll-upwarp[data-v-97b1664c] {
  184. box-sizing: border-box;
  185. min-height: 3.4375rem;
  186. padding: 0.9375rem 0;
  187. text-align: center;
  188. clear: both;
  189. }
  190. /*提示文本 */
  191. .mescroll-upwarp .upwarp-tip[data-v-97b1664c],
  192. .mescroll-upwarp .upwarp-nodata[data-v-97b1664c] {
  193. display: inline-block;
  194. font-size: 0.875rem;
  195. vertical-align: middle;
  196. /* color: gray; 已在style设置color,此处删去*/
  197. }
  198. .mescroll-upwarp .upwarp-tip[data-v-97b1664c] {
  199. margin-left: 0.5rem;
  200. }
  201. /*旋转进度条 */
  202. .mescroll-upwarp .upwarp-progress[data-v-97b1664c] {
  203. display: inline-block;
  204. width: 1rem;
  205. height: 1rem;
  206. border-radius: 50%;
  207. border: 0.0625rem solid gray;
  208. border-bottom-color: transparent !important; /*已在style设置border-color,此处需加 !important*/
  209. vertical-align: middle;
  210. }
  211. /* 旋转动画 */
  212. .mescroll-upwarp .mescroll-rotate[data-v-97b1664c] {
  213. animation: mescrollUpRotate-97b1664c 0.6s linear infinite;
  214. }
  215. @keyframes mescrollUpRotate-97b1664c {
  216. 0% {
  217. transform: rotate(0deg);
  218. }
  219. 100% {
  220. transform: rotate(360deg);
  221. }
  222. }
  223. /**
  224. * 这里是uni-app内置的常用样式变量
  225. *
  226. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  227. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  228. *
  229. */
  230. /**
  231. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  232. *
  233. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  234. */
  235. /* 颜色变量 */
  236. /* 行为相关颜色 */
  237. /* 文字基本颜色 */
  238. /* 背景颜色 */
  239. /* 边框颜色 */
  240. /* 尺寸变量 */
  241. /* 文字尺寸 */
  242. /* 图片尺寸 */
  243. /* Border Radius */
  244. /* 水平间距 */
  245. /* 垂直间距 */
  246. /* 透明度 */
  247. /* 文章场景相关 */
  248. .item[data-v-30bc23e1] {
  249. line-height: 4.6875rem;
  250. border-bottom: 1px solid #ccc;
  251. }
  252. /**
  253. * 这里是uni-app内置的常用样式变量
  254. *
  255. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  256. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  257. *
  258. */
  259. /**
  260. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  261. *
  262. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  263. */
  264. /* 颜色变量 */
  265. /* 行为相关颜色 */
  266. /* 文字基本颜色 */
  267. /* 背景颜色 */
  268. /* 边框颜色 */
  269. /* 尺寸变量 */
  270. /* 文字尺寸 */
  271. /* 图片尺寸 */
  272. /* Border Radius */
  273. /* 水平间距 */
  274. /* 垂直间距 */
  275. /* 透明度 */
  276. /* 文章场景相关 */
  277. .search-area {
  278. padding: 0.75rem;
  279. background-color: #ffffff;
  280. z-index: 9;
  281. }