common.css 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. body,
  2. div,
  3. span,
  4. header,
  5. footer,
  6. nav,
  7. section,
  8. aside,
  9. article,
  10. ul,
  11. dl,
  12. dt,
  13. dd,
  14. li,
  15. a,
  16. p,
  17. h1,
  18. h2,
  19. h3,
  20. h4,
  21. h5,
  22. h6,
  23. i,
  24. em,
  25. b,
  26. textarea,
  27. button,
  28. input,
  29. select,
  30. figure,
  31. figcaption,
  32. {
  33. padding: 0;
  34. margin: 0;
  35. list-style: none;
  36. font-style: normal;
  37. text-decoration: none;
  38. border: none;
  39. font-weight: normal;
  40. font-family: "Microsoft Yahei";
  41. -webkit-tap-highlight-color: transparent;
  42. -webkit-font-smoothing: antialiased;
  43. &:hover {
  44. outline: none;
  45. }
  46. }
  47. article,aside,footer,header,nav,section {
  48. display: block
  49. }
  50. h1 {
  51. font-size: 2em;
  52. margin: .67em 0
  53. }
  54. figcaption,figure,main {
  55. display: block
  56. }
  57. figure {
  58. margin: 1em 40px
  59. }
  60. hr {
  61. box-sizing: content-box;
  62. height: 0;
  63. overflow: visible
  64. }
  65. pre {
  66. font-family: monospace,monospace;
  67. font-size: 1em
  68. }
  69. a {
  70. background-color: transparent;
  71. -webkit-text-decoration-skip: objects
  72. }
  73. a:active,a:hover {
  74. outline-width: 0
  75. }
  76. abbr[title] {
  77. border-bottom: none;
  78. text-decoration: underline;
  79. text-decoration: underline dotted
  80. }
  81. b,strong {
  82. font-weight: inherit;
  83. font-weight: bolder
  84. }
  85. code,kbd,samp {
  86. font-family: monospace,monospace;
  87. font-size: 1em
  88. }
  89. dfn {
  90. font-style: italic
  91. }
  92. mark {
  93. background-color: #ff0;
  94. color: #000
  95. }
  96. small {
  97. font-size: 80%
  98. }
  99. sub,sup {
  100. font-size: 75%;
  101. line-height: 0;
  102. position: relative;
  103. vertical-align: baseline
  104. }
  105. sub {
  106. bottom: -.25em
  107. }
  108. sup {
  109. top: -.5em
  110. }
  111. audio,video {
  112. display: inline-block
  113. }
  114. audio:not([controls]) {
  115. display: none;
  116. height: 0
  117. }
  118. img {
  119. display: block;
  120. border-style: none
  121. }
  122. svg:not(:root) {
  123. overflow: hidden
  124. }
  125. button,input,optgroup,select,textarea {
  126. font-family: sans-serif;
  127. font-size: 100%;
  128. line-height: 1.15;
  129. margin: 0
  130. }
  131. button,input {
  132. overflow: visible
  133. }
  134. button,select {
  135. text-transform: none
  136. }
  137. [type=reset],[type=submit],button,html [type=button] {
  138. -webkit-appearance: button
  139. }
  140. [type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
  141. border-style: none;
  142. padding: 0
  143. }
  144. [type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
  145. outline: 1px dotted ButtonText
  146. }
  147. fieldset {
  148. border: 1px solid silver;
  149. margin: 0 2px;
  150. padding: .35em .625em .75em
  151. }
  152. legend {
  153. box-sizing: border-box;
  154. color: inherit;
  155. display: table;
  156. max-width: 100%;
  157. padding: 0;
  158. white-space: normal
  159. }
  160. progress {
  161. display: inline-block;
  162. vertical-align: baseline
  163. }
  164. textarea {
  165. overflow: auto;
  166. resize: vertical
  167. }
  168. [type=checkbox],[type=radio] {
  169. box-sizing: border-box;
  170. padding: 0
  171. }
  172. [type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
  173. height: auto
  174. }
  175. [type=search] {
  176. -webkit-appearance: textfield;
  177. outline-offset: -2px
  178. }
  179. [type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
  180. -webkit-appearance: none
  181. }
  182. ::-webkit-file-upload-button {
  183. -webkit-appearance: button;
  184. font: inherit
  185. }
  186. details,menu {
  187. display: block
  188. }
  189. summary {
  190. display: list-item
  191. }
  192. canvas {
  193. display: inline-block
  194. }
  195. [hidden],template {
  196. display: none
  197. }
  198. * {
  199. -webkit-tap-highlight-color: rgba(0,0,0,0)
  200. }
  201. *,:after,:before {
  202. box-sizing: border-box
  203. }
  204. .clearfix:after {
  205. visibility: hidden;
  206. clear: both;
  207. display: block;
  208. content: ".";
  209. height: 0
  210. }
  211. .clearfix {
  212. *zoom:1}
  213. body {
  214. font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
  215. font-size: 12px;
  216. line-height: 1.5;
  217. color: #495060;
  218. background-color: #fff;
  219. -webkit-font-smoothing: antialiased;
  220. -moz-osx-font-smoothing: grayscale
  221. }
  222. article,aside,blockquote,body,button,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,section,td,textarea,th,ul {
  223. margin: 0;
  224. padding: 0
  225. }
  226. button,input,select,textarea {
  227. font-family: inherit;
  228. font-size: inherit;
  229. line-height: inherit
  230. }
  231. ol,ul {
  232. list-style: none
  233. }
  234. input::-ms-clear,input::-ms-reveal {
  235. display: none
  236. }
  237. a {
  238. color: #3a8ee6;
  239. background: transparent;
  240. text-decoration: none;
  241. outline: none;
  242. cursor: pointer;
  243. transition: color .2s ease
  244. }
  245. a:hover {
  246. color: #3a8ee6
  247. }
  248. a:active {
  249. color: #3a8ee6
  250. }
  251. a:active,a:hover {
  252. outline: 0;
  253. text-decoration: none
  254. }
  255. a[disabled] {
  256. color: #ccc;
  257. cursor: not-allowed;
  258. pointer-events: none
  259. }
  260. code,kbd,pre,samp {
  261. font-family: Consolas,Menlo,Courier,monospace
  262. }
  263. /*color*/
  264. .c_main{ color: #3a8ee6;}
  265. .orange{ color: #ff6f06;}
  266. .white{ color: #FFFFFF;}
  267. .red{ color: red;}
  268. .blue{ color: #3a8ee6;}
  269. .green{ color: #67C23A;}
  270. .gray{ color: #CCCCCC;}
  271. .gray3{ color: #333333;}
  272. .gray6{ color: #666666;}
  273. .gray9{ color: #999999;}
  274. /*background*/
  275. .bg-blue{ background: #3a8ee6;}
  276. .bg-green{ background: #67C23A;}
  277. .bg-orange{ background: #E6A23C;}
  278. .bg-red{ background: #F56C6C;}
  279. .bg-gray{ background: #909399;}
  280. /*font*/
  281. .f14{ font-size: 14px;}
  282. .f16{ font-size: 16px;}
  283. .f18{ font-size: 18px;}
  284. .f20{ font-size: 20px;}
  285. .fb{ font-weight: bold;}
  286. .text-d-line{ text-decoration: line-through;}
  287. /*position*/
  288. .pr{ position: relative;}
  289. .pa{ position: absolute;}
  290. /*float*/
  291. .fl{ float: left;}
  292. .fr{ float: right;}
  293. /*width*/
  294. .max-w460{ max-width: 460px;}
  295. .w-auto{ width: auto;}
  296. .percent-w50{ width: 50%;}
  297. .percent-w100{ width: 100%;}
  298. /*margin*/
  299. .mt10{ margin-top: 10px;}
  300. .mt16{ margin-top: 16px;}
  301. .mt30{ margin-top: 30px;}
  302. .mt50{ margin-top: 50px;}
  303. .mb16{ margin-bottom: 16px;}
  304. .ml4{ margin-left: 4px;}
  305. .ml10{ margin-left: 10px;}
  306. .ml20{ margin-left: 20px;}
  307. .ml30{ margin-left: 30px;}
  308. .mr10{ margin-right: 10px;}
  309. /*padding*/
  310. .p2{ padding: 2px;}
  311. .p10{ padding: 10px;}
  312. .p20{ padding: 20px;}
  313. .p30{ padding: 30px;}
  314. .p-4-0{ padding: 4px 0;}
  315. .p-10-0{ padding: 10px 0;}
  316. .p-20-0{ padding: 20px 0;}
  317. .p-30-0{ padding: 30px 0;}
  318. .p-0-10{ padding: 0 10px;}
  319. .p-0-20{ padding: 0 20px;}
  320. .p-0-30{ padding: 0 30px;}
  321. .pt16 {padding-top: 16px;}
  322. .pl16 {padding-left: 16px;}
  323. .pr16{padding-right: 16px;}
  324. .pb16{padding-bottom: 16px;}
  325. .pb50{padding-bottom: 50px;}
  326. /*line height*/
  327. .lh18{ line-height: 18px;}
  328. .lh24{ line-height: 24px;}
  329. .lh30{ line-height: 30px;}
  330. /*text-align*/
  331. .tr{ text-align: right;}
  332. .tc{ text-align: center;}
  333. /*display*/
  334. .d-c-c{ display: flex; justify-content: center; align-items: center;}
  335. .d-s-c{ display: flex; justify-content: flex-start; align-items: center;}
  336. .d-s-s{ display: flex; justify-content: flex-start; align-items: flex-start;}
  337. .d-e-c{ display: flex; justify-content: flex-end; align-items: center;}
  338. .d-b-c{ display: flex; justify-content: space-between; align-items: center;}
  339. .d-a-c{ display: flex; justify-content: space-around; align-items: center;}
  340. .d-c{ flex-direction: column;}
  341. .d-r{ flex-direction: row;}
  342. .flex-1{ flex: 1;}
  343. .text-d-line-through{ text-decoration: line-through;}
  344. /*width*/
  345. .ww100{ width: 100%;}
  346. /*ellipsis*/
  347. .text-ellipsis{
  348. word-wrap: normal;
  349. text-overflow: ellipsis;
  350. white-space: nowrap;
  351. overflow: hidden;
  352. }
  353. .text-ellipsis-2{
  354. display: -webkit-box;
  355. word-break: break-all;
  356. text-overflow: ellipsis;
  357. overflow: hidden;
  358. -webkit-box-orient: vertical;
  359. -webkit-line-clamp: 2;
  360. }
  361. /*border*/
  362. .border{border: 1px solid #DDDDDD;}
  363. .border-b{border-bottom: 1px solid #DDDDDD;}
  364. .border-b-d{border-bottom: 1px dashed #DDDDDD;}
  365. .radius{ border-radius: 50%;}