iosSelect.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. div, ul, li {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul, li {
  6. list-style: none outside none;
  7. }
  8. /* layer begin */
  9. .ios-select-widget-box.olay {
  10. position: absolute;
  11. z-index: 500;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. opacity: 1;
  17. background: rgba(0, 0, 0, 0.75);
  18. }
  19. .ios-select-widget-box.olay > div {
  20. position: fixed;
  21. z-index: 1000;
  22. left: 0;
  23. width: 100%;
  24. height: 100%;
  25. background-color: #f2f2f2;
  26. bottom: 0;
  27. left: 0;
  28. visibility: visible;
  29. }
  30. .ios-select-widget-box header.iosselect-header {
  31. height: 44px;
  32. line-height: 44px;
  33. background-color: #eee;
  34. width: 100%;
  35. z-index: 9999;
  36. text-align: center;
  37. }
  38. .ios-select-widget-box header.iosselect-header a {
  39. font-size: 16px;
  40. color: #47A8EF;
  41. text-decoration: none;
  42. }
  43. .ios-select-widget-box header.iosselect-header a.close {
  44. float: left;
  45. padding-left: 15px;
  46. height: 44px;
  47. line-height: 44px;
  48. }
  49. .ios-select-widget-box header.iosselect-header a.sure {
  50. float: right;
  51. padding-right: 15px;
  52. height: 44px;
  53. line-height: 44px;
  54. }
  55. .ios-select-widget-box {
  56. padding-top: 44px;
  57. }
  58. .ios-select-widget-box .one-level-contain,
  59. .ios-select-widget-box .two-level-contain,
  60. .ios-select-widget-box .three-level-contain,
  61. .ios-select-widget-box .four-level-contain,
  62. .ios-select-widget-box .five-level-contain {
  63. height: 100%;
  64. overflow: hidden;
  65. }
  66. .ios-select-widget-box .iosselect-box {
  67. overflow: hidden;
  68. }
  69. .ios-select-widget-box .iosselect-box > div {
  70. display: block;
  71. float: left;
  72. }
  73. .ios-select-widget-box ul {
  74. background-color: #fff;
  75. }
  76. .ios-select-widget-box ul li {
  77. font-size: 13px;
  78. height: 35px;
  79. line-height: 35px;
  80. background-color: #fff;
  81. white-space: nowrap;
  82. overflow: hidden;
  83. text-overflow: ellipsis;
  84. text-align: center;
  85. color: #111;
  86. opacity: .3;
  87. }
  88. .ios-select-widget-box ul li.at {
  89. font-size: 16px;
  90. opacity: 1;
  91. color: #47A8EF;
  92. }
  93. .ios-select-widget-box ul li.side1 {
  94. font-size: 15px;
  95. opacity: .7;
  96. }
  97. .ios-select-widget-box ul li.side2 {
  98. font-size: 14px;
  99. opacity: .5;
  100. }
  101. .ios-select-widget-box.one-level-box .one-level-contain {
  102. width: 100%;
  103. }
  104. .ios-select-widget-box.one-level-box .two-level-contain,
  105. .ios-select-widget-box.one-level-box .three-level-contain,
  106. .ios-select-widget-box.one-level-box .four-level-contain,
  107. .ios-select-widget-box.one-level-box .five-level-contain,
  108. {
  109. width: 0;
  110. }
  111. .ios-select-widget-box.two-level-box .one-level-contain,
  112. .ios-select-widget-box.two-level-box .two-level-contain {
  113. width: 50%;
  114. }
  115. .ios-select-widget-box.two-level-box .three-level-contain,
  116. .ios-select-widget-box.two-level-box .four-level-contain,
  117. .ios-select-widget-box.two-level-box .five-level-contain,
  118. {
  119. width: 0;
  120. }
  121. .ios-select-widget-box.three-level-box .one-level-contain,
  122. .ios-select-widget-box.three-level-box .two-level-contain {
  123. width: 30%;
  124. }
  125. .ios-select-widget-box.three-level-box .three-level-contain {
  126. width: 40%;
  127. }
  128. .ios-select-widget-box.three-level-box .four-level-contain
  129. .ios-select-widget-box.three-level-box .five-level-contain {
  130. width: 0%;
  131. }
  132. .ios-select-widget-box.four-level-box .one-level-contain,
  133. .ios-select-widget-box.four-level-box .two-level-contain,
  134. .ios-select-widget-box.four-level-box .three-level-contain,
  135. .ios-select-widget-box.four-level-box .four-level-contain {
  136. width: 25%;
  137. }
  138. .ios-select-widget-box.four-level-box .five-level-contain {
  139. width: 0%;
  140. }
  141. .ios-select-widget-box.five-level-box .one-level-contain,
  142. .ios-select-widget-box.five-level-box .two-level-contain,
  143. .ios-select-widget-box.five-level-box .three-level-contain,
  144. .ios-select-widget-box.five-level-box .four-level-contain,
  145. .ios-select-widget-box.five-level-box .five-level-contain {
  146. width: 20%;
  147. }
  148. .ios-select-widget-box .cover-area1 {
  149. width: 100%;
  150. border: none;
  151. border-top: 1px solid #d9d9d9;
  152. position: absolute;
  153. top: 149px;
  154. margin: 0;
  155. height: 0;
  156. }
  157. .ios-select-widget-box .cover-area2 {
  158. width: 100%;
  159. border: none;
  160. border-top: 1px solid #d9d9d9;
  161. position: absolute;
  162. top: 183px;
  163. margin: 0;
  164. height: 0;
  165. }
  166. .ios-select-widget-box #iosSelectTitle {
  167. margin: 0;
  168. padding: 0;
  169. display: inline-block;
  170. font-size: 16px;
  171. font-weight: normal;
  172. color: #333;
  173. }
  174. .ios-select-body-class {
  175. overflow: hidden;
  176. position: fixed;
  177. top: 0;
  178. left: 0;
  179. right: 0;
  180. bottom: 0;
  181. }
  182. .ios-select-widget-box.olay > div > .ios-select-loading-box {
  183. width: 100%;
  184. height: 100%;
  185. position: absolute;
  186. top: 0;
  187. bottom: 0;
  188. left: 0;
  189. right: 0;
  190. background-color: rgba(0,0,0,.5);
  191. display: none;
  192. }
  193. .ios-select-widget-box.olay > div > .ios-select-loading-box > .ios-select-loading {
  194. width: 50px;
  195. height: 50px;
  196. position: absolute;
  197. left: 50%;
  198. top: 50%;
  199. margin-top: -25px;
  200. margin-left: -25px;
  201. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OEMxMEI3NDI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OEMxMEI3NTI3MEIxMUU2ODVGMzhFNjYyMDIyOUFCMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU4QzEwQjcyMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU4QzEwQjczMjcwQjExRTY4NUYzOEU2NjIwMjI5QUIwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+GeWqMwAAA+BJREFUeNrMmVlsTGEUx+9cXZQiLZWKklhbQSSlSMUWSxAiJGJ5aSQehOiDF7yI4EFILW99I3iRSJGUPkiILSKp2OuJVtHWkrRVapn2jv+R/ycnn5l27rQz10l+mWlyl/+c833nO+c0FIlEnATMBbPAIn5OBuPAENAKToC74BtoB59AG/D9spBPgaPBdrAFjJH7Fa66TkRuNe8gP8Bb8Ap8j/eFaXFelwv286WZfKG2WL9SX5cFCuntBvAc/OoPD64HJ8EI5Q3tmW7whl4pAl/AUfAEDKZnQ1HuFXGPQGOiAsW7x8A26wUhirgMLnGtfe3hGcO5NApARpRnSchrY0UhlkAJxxmw0npYBzgOKinSj6WDCfRyphWFJnAPdMUjUH71WbDKElcDykGL0zcbCEroVf389+CW7Uk3ygNk/azghYIHDoCN/SDO4W6+A55aAiUrzImWz7StA2WWuF2gIpEc1ovVgQeWyELm06gCc8ARJU44DM45yTPZII8tkXO5DP4RuI8iPYqr4YmQbJN8+E4JlA1abAuUBbtZeU526O4khDWW3QdhK9TZWmAZd6/x3inw0UmdSZJ/pgSKlilGoMvTwoiTw/20k3p7yTyovRgScTNAvgrvFSbkVJuE+LU6GiXEefJHqfKefF5zgrMGVRnJZ4HEerryXjdzU1DWbB2BI10mRuPBej+1WhKsi8vLeDDXZRllwtvoBG8davNmS4gHUZyTQIWSrM1iQpyZptafo4QGabp9+JNmOijMY9MTtGWpEHe5PDHMGsz/DwQOUwI7XVYUZheP1ZVEAJbOFsGswTYR+EKF2NWVRABWwHPYeLDFZWKOKJFLAhRYpMQJjS7rsWYlcjlTT6pNOr5pahfL5m12KaparUPpZTcEILCEjjGniCy9iMk3F9hImzCXcZqQKhOnLFShjbBX/psQP4Aq5UUpdfZEGXEkKzGvZf4zu/exOdV0T1LJCZTx4gK2msm2Uq494z1pS29Ea5ra2RPrrm4HpwvJsplgtTW/kXq0M1ZffF2F2uMNe+nJUD+HVWaLm8AAtXNrOXTqcfQh2fwQmKdST4TTgAp6ui+WTWFTrUpedu15Fs29Do/kuDsIZlsiW7njryZQ2MrAaD5Yqko88+w6zoPCfsdv5VwjnnXayA67zYmUdGM/e0i+E7nWivnDPUWEz6iyPedngLkY7ARDrQeb72GOz5roVY/eylMHvxflXjkpLoKHfZ2wmhJIkvcylUi9BAnTa9U9DD59CzQm/csaZv0cn0JbOeK4ye/xbfcE/w0hYZvElnU8GEXBGRQjeewzi5B6rtP6RGY9vwUYACMHTam1T1ebAAAAAElFTkSuQmCC) no-repeat 0 0;
  202. background-size: contain;
  203. -webkit-animation: loading-keyframe 1s infinite linear;
  204. animation: loading-keyframe 1s infinite linear;
  205. }
  206. @-webkit-keyframes loading-keyframe {
  207. from {
  208. -webkit-transform: rotate(0deg);
  209. }
  210. to {
  211. -webkit-transform: rotate(360deg);
  212. }
  213. }
  214. @keyframes loading-keyframe {
  215. from {
  216. transform: rotate(0deg);
  217. }
  218. to {
  219. transform: rotate(360deg);
  220. }
  221. }