mobile.less 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328
  1. @charset "UTF-8";
  2. // +----------------------------------------------------------------------
  3. // | ThinkAdmin
  4. // +----------------------------------------------------------------------
  5. // | 版权所有 2014~2022 广州楚才信息科技有限公司 [ http://www.cuci.cc ]
  6. // +----------------------------------------------------------------------
  7. // | 官方网站: https://thinkadmin.top
  8. // +----------------------------------------------------------------------
  9. // | 开源协议 ( https://mit-license.org )
  10. // +----------------------------------------------------------------------
  11. // | gitee 代码仓库:https://gitee.com/zoujingli/ThinkAdmin
  12. // | github 代码仓库:https://github.com/zoujingli/ThinkAdmin
  13. // +----------------------------------------------------------------------
  14. ::-webkit-scrollbar {
  15. width: 3px;
  16. height: 3px
  17. }
  18. ::-webkit-scrollbar-track {
  19. background: #ccc !important
  20. }
  21. ::-webkit-scrollbar-thumb {
  22. background-color: #666 !important
  23. }
  24. * {
  25. margin: 0;
  26. padding: 0;
  27. outline: 0;
  28. box-sizing: content-box
  29. }
  30. body, html {
  31. font-size: 20px
  32. }
  33. html {
  34. line-height: 1.15;
  35. -webkit-text-size-adjust: 100%
  36. }
  37. body {
  38. margin: 0
  39. }
  40. main {
  41. display: block
  42. }
  43. h1 {
  44. margin: .67em 0;
  45. font-size: 2em
  46. }
  47. hr {
  48. overflow: visible;
  49. box-sizing: content-box;
  50. height: 0
  51. }
  52. pre {
  53. font-size: 1em;
  54. font-family: monospace
  55. }
  56. a {
  57. background-color: transparent
  58. }
  59. abbr[title] {
  60. border-bottom: none;
  61. text-decoration: underline;
  62. text-decoration: underline dotted
  63. }
  64. b, strong {
  65. font-weight: bolder
  66. }
  67. code, kbd, samp {
  68. font-size: 1em;
  69. font-family: monospace
  70. }
  71. small {
  72. font-size: 80%
  73. }
  74. sub, sup {
  75. position: relative;
  76. vertical-align: baseline;
  77. font-size: 75%;
  78. line-height: 0
  79. }
  80. sub {
  81. bottom: -.25em
  82. }
  83. sup {
  84. top: -.5em
  85. }
  86. img {
  87. border-style: none
  88. }
  89. button, input, optgroup, select, textarea {
  90. margin: 0;
  91. font-size: 100%;
  92. font-family: inherit;
  93. line-height: 1.15
  94. }
  95. button, input {
  96. overflow: visible
  97. }
  98. button, select {
  99. text-transform: none
  100. }
  101. [type=button], [type=reset], [type=submit], button {
  102. -webkit-appearance: button
  103. }
  104. [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  105. padding: 0;
  106. border-style: none
  107. }
  108. [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  109. outline: 1px dotted ButtonText
  110. }
  111. fieldset {
  112. padding: .35em .75em .625em
  113. }
  114. legend {
  115. display: table;
  116. box-sizing: border-box;
  117. padding: 0;
  118. max-width: 100%;
  119. color: inherit;
  120. white-space: normal
  121. }
  122. progress {
  123. vertical-align: baseline
  124. }
  125. textarea {
  126. overflow: auto
  127. }
  128. [type=checkbox], [type=radio] {
  129. box-sizing: border-box;
  130. padding: 0
  131. }
  132. [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  133. height: auto
  134. }
  135. [type=search] {
  136. outline-offset: -2px;
  137. -webkit-appearance: textfield
  138. }
  139. [type=search]::-webkit-search-decoration {
  140. -webkit-appearance: none
  141. }
  142. ::-webkit-file-upload-button {
  143. font: inherit;
  144. -webkit-appearance: button
  145. }
  146. details {
  147. display: block
  148. }
  149. summary {
  150. display: list-item
  151. }
  152. [hidden], template {
  153. display: none
  154. }
  155. a {
  156. text-decoration: none
  157. }
  158. @media only screen and (min-width: 320px) and (min-height: 480px) {
  159. html {
  160. font-size: 20px !important
  161. }
  162. }
  163. @media only screen and (min-width: 320px) and (min-height: 568px) {
  164. html {
  165. font-size: 20px !important
  166. }
  167. }
  168. @media only screen and (min-width: 360px) and (min-height: 640px) {
  169. html {
  170. font-size: 22.5px !important
  171. }
  172. }
  173. @media only screen and (min-width: 375px) and (min-height: 667px) {
  174. html {
  175. font-size: 23.5px !important
  176. }
  177. }
  178. @media only screen and (min-width: 414px) and (min-height: 736px) {
  179. html {
  180. font-size: 25.9px !important
  181. }
  182. }
  183. @media only screen and (min-width: 736px) {
  184. html {
  185. font-size: 46px !important
  186. }
  187. }
  188. .header {
  189. margin-top: .4rem;
  190. text-align: center;
  191. span {
  192. padding: .1rem .2rem;
  193. border-radius: .5rem;
  194. background: #999;
  195. color: #fff;
  196. font-size: .6rem
  197. }
  198. }
  199. .container {
  200. position: relative;
  201. display: block;
  202. margin: 5vw auto;
  203. width: 90%;
  204. color: #333;
  205. text-overflow: ellipsis;
  206. .logo {
  207. position: absolute;
  208. top: 0;
  209. display: inline-block;
  210. width: 2.5rem;
  211. height: 2.5rem;
  212. border-radius: 50%;
  213. background: #098;
  214. color: #fff;
  215. content: 'A';
  216. text-align: center;
  217. font-size: .8rem;
  218. line-height: 2.5rem
  219. }
  220. .content {
  221. position: relative;
  222. left: 3.4rem;
  223. display: inline-block;
  224. padding: .8rem .8rem .8rem;
  225. max-width: 54vw;
  226. border: 1px solid #ccc;
  227. border-radius: .25rem;
  228. background: #fff;
  229. font-size: .7rem;
  230. line-height: 1.5em
  231. }
  232. .arrow:after, .arrow:before {
  233. position: absolute;
  234. top: .8rem;
  235. left: -.4rem;
  236. width: 0;
  237. height: 0;
  238. border-color: transparent #ccc transparent transparent;
  239. border-style: solid;
  240. border-width: .4rem .4rem .4rem 0;
  241. content: ' '
  242. }
  243. .arrow:after {
  244. margin-left: 1px;
  245. border-color: transparent #fff transparent transparent
  246. }
  247. }
  248. @font-face {
  249. font-family: "iconfont";
  250. src: url('./icon/iconfont.eot?t=1543820027953'); /* IE9 */
  251. src: url('./icon/iconfont.eot?t=1543820027953#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  252. url('./icon/iconfont.ttf?t=1543820027953') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('./icon/iconfont.svg?t=1543820027953#iconfont') format('svg'); /* iOS 4.1- */
  253. }
  254. .icon {
  255. font-family: "iconfont" !important;
  256. font-size: 16px;
  257. font-style: normal;
  258. -webkit-font-smoothing: antialiased;
  259. -moz-osx-font-smoothing: grayscale;
  260. &-play:before {
  261. content: "\e650"
  262. }
  263. &-pause:before {
  264. content: "\e629"
  265. }
  266. &-volume:before {
  267. content: "\e87a"
  268. }
  269. }