PingAnYeXianSZCG_Web 前端代码

layer.css 6.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355
  1. .layui-m-layer {
  2. position: relative;
  3. z-index: 19891014
  4. }
  5. .layui-m-layer * {
  6. -webkit-box-sizing: content-box;
  7. -moz-box-sizing: content-box;
  8. box-sizing: content-box
  9. }
  10. .layui-m-layermain,
  11. .layui-m-layershade {
  12. position: fixed;
  13. left: 0;
  14. top: 0;
  15. width: 100%;
  16. height: 100%
  17. }
  18. .layui-m-layershade {
  19. background-color: rgba(0, 0, 0, .7);
  20. pointer-events: auto
  21. }
  22. .layui-m-layermain {
  23. display: table;
  24. font-family: Helvetica, arial, sans-serif;
  25. pointer-events: none
  26. }
  27. .layui-m-layermain .layui-m-layersection {
  28. display: table-cell;
  29. vertical-align: middle;
  30. text-align: center
  31. }
  32. .layui-m-layerchild {
  33. position: relative;
  34. display: inline-block;
  35. text-align: left;
  36. background-color: #fff;
  37. font-size: 14px;
  38. border-radius: 5px;
  39. box-shadow: 0 0 8px rgba(0, 0, 0, .1);
  40. pointer-events: auto;
  41. -webkit-overflow-scrolling: touch;
  42. -webkit-animation-fill-mode: both;
  43. animation-fill-mode: both;
  44. -webkit-animation-duration: .2s;
  45. animation-duration: .2s
  46. }
  47. @-webkit-keyframes layui-m-anim-scale {
  48. 0% {
  49. opacity: 0;
  50. -webkit-transform: scale(.5);
  51. transform: scale(.5)
  52. }
  53. 100% {
  54. opacity: 1;
  55. -webkit-transform: scale(1);
  56. transform: scale(1)
  57. }
  58. }
  59. @keyframes layui-m-anim-scale {
  60. 0% {
  61. opacity: 0;
  62. -webkit-transform: scale(.5);
  63. transform: scale(.5)
  64. }
  65. 100% {
  66. opacity: 1;
  67. -webkit-transform: scale(1);
  68. transform: scale(1)
  69. }
  70. }
  71. .layui-m-anim-scale {
  72. animation-name: layui-m-anim-scale;
  73. -webkit-animation-name: layui-m-anim-scale
  74. }
  75. @-webkit-keyframes layui-m-anim-up {
  76. 0% {
  77. opacity: 0;
  78. -webkit-transform: translateY(800px);
  79. transform: translateY(800px)
  80. }
  81. 100% {
  82. opacity: 1;
  83. -webkit-transform: translateY(0);
  84. transform: translateY(0)
  85. }
  86. }
  87. @keyframes layui-m-anim-up {
  88. 0% {
  89. opacity: 0;
  90. -webkit-transform: translateY(800px);
  91. transform: translateY(800px)
  92. }
  93. 100% {
  94. opacity: 1;
  95. -webkit-transform: translateY(0);
  96. transform: translateY(0)
  97. }
  98. }
  99. .layui-m-anim-up {
  100. -webkit-animation-name: layui-m-anim-up;
  101. animation-name: layui-m-anim-up
  102. }
  103. .layui-m-layer0 .layui-m-layerchild {
  104. width: 90%;
  105. max-width: 640px
  106. }
  107. .layui-m-layer1 .layui-m-layerchild {
  108. border: none;
  109. border-radius: 0
  110. }
  111. .layui-m-layer2 .layui-m-layerchild {
  112. width: auto;
  113. max-width: 260px;
  114. min-width: 40px;
  115. border: none;
  116. background: 0 0;
  117. box-shadow: none;
  118. color: #fff
  119. }
  120. .layui-m-layerchild h3 {
  121. padding: 0 10px;
  122. height: 60px;
  123. line-height: 60px;
  124. font-size: 16px;
  125. font-weight: 400;
  126. border-radius: 5px 5px 0 0;
  127. text-align: center
  128. }
  129. .layui-m-layerbtn span,
  130. .layui-m-layerchild h3 {
  131. text-overflow: ellipsis;
  132. overflow: hidden;
  133. white-space: nowrap
  134. }
  135. .layui-m-layercont {
  136. padding: 50px 30px;
  137. line-height: 22px;
  138. text-align: center
  139. }
  140. .layui-m-layer1 .layui-m-layercont {
  141. padding: 0;
  142. text-align: left
  143. }
  144. .layui-m-layer2 .layui-m-layercont {
  145. text-align: center;
  146. padding: 0;
  147. line-height: 0
  148. }
  149. .layui-m-layer2 .layui-m-layercont i {
  150. width: 25px;
  151. height: 25px;
  152. margin-left: 8px;
  153. display: inline-block;
  154. background-color: #fff;
  155. border-radius: 100%;
  156. -webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  157. animation: layui-m-anim-loading 1.4s infinite ease-in-out;
  158. -webkit-animation-fill-mode: both;
  159. animation-fill-mode: both
  160. }
  161. .layui-m-layerbtn,
  162. .layui-m-layerbtn span {
  163. position: relative;
  164. text-align: center;
  165. border-radius: 0 0 5px 5px
  166. }
  167. .layui-m-layer2 .layui-m-layercont p {
  168. margin-top: 20px
  169. }
  170. @-webkit-keyframes layui-m-anim-loading {
  171. 0%,
  172. 100%,
  173. 80% {
  174. transform: scale(0);
  175. -webkit-transform: scale(0)
  176. }
  177. 40% {
  178. transform: scale(1);
  179. -webkit-transform: scale(1)
  180. }
  181. }
  182. @keyframes layui-m-anim-loading {
  183. 0%,
  184. 100%,
  185. 80% {
  186. transform: scale(0);
  187. -webkit-transform: scale(0)
  188. }
  189. 40% {
  190. transform: scale(1);
  191. -webkit-transform: scale(1)
  192. }
  193. }
  194. .layui-m-layer2 .layui-m-layercont i:first-child {
  195. margin-left: 0;
  196. -webkit-animation-delay: -.32s;
  197. animation-delay: -.32s
  198. }
  199. .layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
  200. -webkit-animation-delay: -.16s;
  201. animation-delay: -.16s
  202. }
  203. .layui-m-layer2 .layui-m-layercont>div {
  204. line-height: 22px;
  205. padding-top: 7px;
  206. margin-bottom: 20px;
  207. font-size: 14px
  208. }
  209. .layui-m-layerbtn {
  210. display: box;
  211. display: -moz-box;
  212. display: -webkit-box;
  213. width: 100%;
  214. height: 50px;
  215. line-height: 50px;
  216. font-size: 0;
  217. border-top: 1px solid #D0D0D0;
  218. background-color: #F2F2F2
  219. }
  220. .layui-m-layerbtn span {
  221. display: block;
  222. -moz-box-flex: 1;
  223. box-flex: 1;
  224. -webkit-box-flex: 1;
  225. font-size: 14px;
  226. cursor: pointer
  227. }
  228. .layui-m-layerbtn span[yes] {
  229. color: #40AFFE
  230. }
  231. .layui-m-layerbtn span[no] {
  232. border-right: 1px solid #D0D0D0;
  233. border-radius: 0 0 0 5px
  234. }
  235. .layui-m-layerbtn span:active {
  236. background-color: #F6F6F6
  237. }
  238. .layui-m-layerend {
  239. position: absolute;
  240. right: 7px;
  241. top: 10px;
  242. width: 30px;
  243. height: 30px;
  244. border: 0;
  245. font-weight: 400;
  246. background: 0 0;
  247. cursor: pointer;
  248. -webkit-appearance: none;
  249. font-size: 30px
  250. }
  251. .layui-m-layerend::after,
  252. .layui-m-layerend::before {
  253. position: absolute;
  254. left: 5px;
  255. top: 15px;
  256. content: '';
  257. width: 18px;
  258. height: 1px;
  259. background-color: #999;
  260. transform: rotate(45deg);
  261. -webkit-transform: rotate(45deg);
  262. border-radius: 3px
  263. }
  264. .layui-m-layerend::after {
  265. transform: rotate(-45deg);
  266. -webkit-transform: rotate(-45deg)
  267. }
  268. body .layui-m-layer .layui-m-layer-footer {
  269. position: fixed;
  270. width: 95%;
  271. max-width: 100%;
  272. margin: 0 auto;
  273. left: 0;
  274. right: 0;
  275. bottom: 10px;
  276. background: 0 0
  277. }
  278. .layui-m-layer-footer .layui-m-layercont {
  279. padding: 20px;
  280. border-radius: 5px 5px 0 0;
  281. background-color: rgba(255, 255, 255, .8)
  282. }
  283. .layui-m-layer-footer .layui-m-layerbtn {
  284. display: block;
  285. height: auto;
  286. background: 0 0;
  287. border-top: none
  288. }
  289. .layui-m-layer-footer .layui-m-layerbtn span {
  290. background-color: rgba(255, 255, 255, .8)
  291. }
  292. .layui-m-layer-footer .layui-m-layerbtn span[no] {
  293. color: #FD482C;
  294. border-top: 1px solid #c2c2c2;
  295. border-radius: 0 0 5px 5px
  296. }
  297. .layui-m-layer-footer .layui-m-layerbtn span[yes] {
  298. margin-top: 10px;
  299. border-radius: 5px
  300. }
  301. body .layui-m-layer .layui-m-layer-msg {
  302. width: auto;
  303. max-width: 90%;
  304. margin: 0 auto;
  305. bottom: -150px;
  306. background-color: rgba(0, 0, 0, .7);
  307. color: #fff
  308. }
  309. .layui-m-layer-msg .layui-m-layercont {
  310. padding: 10px 20px
  311. }