You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2972 lines
64 KiB

7 years ago
  1. @charset "UTF-8";
  2. @media screen and (max-width: 319px) {
  3. html {
  4. font-size: 85.33333px; } }
  5. @media screen and (min-width: 320px) and (max-width: 359px) {
  6. html {
  7. font-size: 85.33333px; } }
  8. @media screen and (min-width: 360px) and (max-width: 374px) {
  9. html {
  10. font-size: 96px; } }
  11. @media screen and (min-width: 375px) and (max-width: 383px) {
  12. html {
  13. font-size: 100px; } }
  14. @media screen and (min-width: 384px) and (max-width: 399px) {
  15. html {
  16. font-size: 102.4px; } }
  17. @media screen and (min-width: 400px) and (max-width: 413px) {
  18. html {
  19. font-size: 106.66667px; } }
  20. @media screen and (min-width: 414px) {
  21. html {
  22. font-size: 110.4px; } }
  23. /*CSS Reset*/
  24. body,
  25. div,
  26. dl,
  27. dt,
  28. dd,
  29. ul,
  30. ol,
  31. li,
  32. h1,
  33. h2,
  34. h3,
  35. h4,
  36. h5,
  37. h6,
  38. pre,
  39. code,
  40. form,
  41. fieldset,
  42. legend,
  43. input,
  44. textarea,
  45. p,
  46. blockquote,
  47. th,
  48. td,
  49. header,
  50. hgroup,
  51. nav,
  52. section,
  53. article,
  54. aside,
  55. footer,
  56. figure,
  57. figcaption,
  58. menu,
  59. button {
  60. margin: 0;
  61. padding: 0; }
  62. body {
  63. font-family: "Helvetica Neue",Helvetica,STHeiTi,sans-serif;
  64. line-height: 1.5;
  65. font-size: 16px;
  66. color: #000;
  67. background-color: #f8f8f8;
  68. -webkit-user-select: none;
  69. -webkit-text-size-adjust: 100%;
  70. -webkit-tap-highlight-color: transparent;
  71. outline: 0; }
  72. h1, h2, h3, h4, h5, h6 {
  73. font-size: 100%;
  74. font-weight: normal; }
  75. table {
  76. border-collapse: collapse;
  77. border-spacing: 0; }
  78. caption, th {
  79. text-align: left; }
  80. fieldset,
  81. img {
  82. border: 0; }
  83. li {
  84. list-style: none; }
  85. ins {
  86. text-decoration: none; }
  87. del {
  88. text-decoration: line-through; }
  89. input,
  90. button,
  91. textarea,
  92. select,
  93. optgroup,
  94. option {
  95. font-family: inherit;
  96. font-size: inherit;
  97. font-style: inherit;
  98. font-weight: inherit;
  99. outline: 0; }
  100. button {
  101. -webkit-appearance: none;
  102. border: 0;
  103. background: none; }
  104. a {
  105. -webkit-touch-callout: none;
  106. text-decoration: none; }
  107. :focus {
  108. outline: 0;
  109. -webkit-tap-highlight-color: transparent; }
  110. em, i {
  111. font-style: normal; }
  112. @font-face {
  113. font-family: "iconfont";
  114. src: url(../font/iconfont.ttf) format("truetype"); }
  115. .ui-icon, [class^="ui-icon-"] {
  116. font-family: "iconfont" !important;
  117. font-size: 32px;
  118. line-height: 44px;
  119. font-style: normal;
  120. -webkit-font-smoothing: antialiased;
  121. -webkit-text-stroke-width: 0.2px;
  122. display: block;
  123. color: rgba(0, 0, 0, 0.5); }
  124. .ui-icon-close:before {
  125. content: ""; }
  126. .ui-icon-search:before {
  127. content: ""; }
  128. .ui-icon-return:before {
  129. content: ""; }
  130. .ui-icon-close,
  131. .ui-icon-search {
  132. color: #8e8e93; }
  133. @font-face {
  134. font-family: "iconfont";
  135. src: url(../font/iconfont-full.ttf) format("truetype"); }
  136. .ui-icon, [class^="ui-icon-"] {
  137. font-family: "iconfont" !important;
  138. font-size: 32px;
  139. line-height: 44px;
  140. font-style: normal;
  141. -webkit-font-smoothing: antialiased;
  142. -webkit-text-stroke-width: 0.2px;
  143. display: block;
  144. color: rgba(0, 0, 0, 0.5); }
  145. .ui-icon-add:before {
  146. content: "\f615"; }
  147. .ui-icon-more:before {
  148. content: "\f616"; }
  149. .ui-icon-arrow:before {
  150. content: "\f600"; }
  151. .ui-icon-return:before {
  152. content: "\f614"; }
  153. .ui-icon-checked:before {
  154. content: "\f601"; }
  155. .ui-icon-checked-s:before {
  156. content: "\f602"; }
  157. .ui-icon-info-block:before {
  158. content: "\f603"; }
  159. .ui-icon-success-block:before {
  160. content: "\f604"; }
  161. .ui-icon-warn-block:before {
  162. content: "\f605"; }
  163. .ui-icon-info:before {
  164. content: "\f606"; }
  165. .ui-icon-success:before {
  166. content: "\f607"; }
  167. .ui-icon-warn:before {
  168. content: "\f608"; }
  169. .ui-icon-next:before {
  170. content: "\f617"; }
  171. .ui-icon-prev:before {
  172. content: "\f618"; }
  173. .ui-icon-tag:before {
  174. content: "\f60d"; }
  175. .ui-icon-tag-pop:before {
  176. content: "\f60f"; }
  177. .ui-icon-tag-s:before {
  178. content: "\f60e"; }
  179. .ui-icon-warn-lg:before {
  180. content: "\f609"; }
  181. .ui-icon-close:before {
  182. content: "\f60a"; }
  183. .ui-icon-close-progress:before {
  184. content: "\f619"; }
  185. .ui-icon-close-page:before {
  186. content: "\f60b"; }
  187. .ui-icon-emo:before {
  188. content: "\f61a"; }
  189. .ui-icon-delete:before {
  190. content: "\f61b"; }
  191. .ui-icon-search:before {
  192. content: "\f60c"; }
  193. .ui-icon-order:before {
  194. content: "\f61c"; }
  195. .ui-icon-news:before {
  196. content: "\f61d"; }
  197. .ui-icon-personal:before {
  198. content: "\f61e"; }
  199. .ui-icon-dressup:before {
  200. content: "\f61f"; }
  201. .ui-icon-cart:before {
  202. content: "\f620"; }
  203. .ui-icon-history:before {
  204. content: "\f621"; }
  205. .ui-icon-wallet:before {
  206. content: "\f622"; }
  207. .ui-icon-refresh:before {
  208. content: "\f623"; }
  209. .ui-icon-thumb:before {
  210. content: "\f624"; }
  211. .ui-icon-file:before {
  212. content: "\f625"; }
  213. .ui-icon-hall:before {
  214. content: "\f626"; }
  215. .ui-icon-voice:before {
  216. content: "\f627"; }
  217. .ui-icon-unfold:before {
  218. content: "\f628"; }
  219. .ui-icon-gototop:before {
  220. content: "\f629"; }
  221. .ui-icon-share:before {
  222. content: "\f62a"; }
  223. .ui-icon-home:before {
  224. content: "\f62b"; }
  225. .ui-icon-pin:before {
  226. content: "\f62c"; }
  227. .ui-icon-star:before {
  228. content: "\f62d"; }
  229. .ui-icon-bugle:before {
  230. content: "\f62e"; }
  231. .ui-icon-trend:before {
  232. content: "\f62f"; }
  233. .ui-icon-unchecked:before {
  234. content: "\f610"; }
  235. .ui-icon-unchecked-s:before {
  236. content: "\f611"; }
  237. .ui-icon-play-active:before {
  238. content: "\f630"; }
  239. .ui-icon-stop-active:before {
  240. content: "\f631"; }
  241. .ui-icon-play:before {
  242. content: "\f632"; }
  243. .ui-icon-stop:before {
  244. content: "\f633"; }
  245. .ui-icon-set:before {
  246. content: "\f634"; }
  247. .ui-icon-add-group:before {
  248. content: "\f635"; }
  249. .ui-icon-add-people:before {
  250. content: "\f636"; }
  251. .ui-icon-pc:before {
  252. content: "\f637"; }
  253. .ui-icon-scan:before {
  254. content: "\f638"; }
  255. .ui-icon-tag-svip:before {
  256. content: "\f613"; }
  257. .ui-icon-tag-vip:before {
  258. content: "\f612"; }
  259. .ui-icon-male:before {
  260. content: "\f639"; }
  261. .ui-icon-female:before {
  262. content: "\f63a"; }
  263. .ui-icon-collect:before {
  264. content: "\f63b"; }
  265. .ui-icon-commented:before {
  266. content: "\f63c"; }
  267. .ui-icon-like:before {
  268. content: "\f63d"; }
  269. .ui-icon-liked:before {
  270. content: "\f63e"; }
  271. .ui-icon-comment:before {
  272. content: "\f63f"; }
  273. .ui-icon-collected:before {
  274. content: "\f640"; }
  275. a {
  276. color: #00a5e0; }
  277. em {
  278. color: #ff8444; }
  279. ::-webkit-input-placeholder {
  280. color: #bbb; }
  281. /**
  282. * 文字
  283. */
  284. h1 {
  285. font-size: 18px; }
  286. h2 {
  287. font-size: 17px; }
  288. h3, h4 {
  289. font-size: 16px; }
  290. h5, .ui-txt-sub {
  291. font-size: 14px; }
  292. h6, .ui-txt-tips {
  293. font-size: 12px; }
  294. .ui-txt-default {
  295. color: #000; }
  296. .ui-txt-white {
  297. color: white; }
  298. .ui-txt-info {
  299. color: #777; }
  300. .ui-txt-muted {
  301. color: #bbb; }
  302. .ui-txt-warning, .ui-txt-red {
  303. color: #ff4222; }
  304. .ui-txt-feeds {
  305. color: #314c83; }
  306. /* 同em */
  307. .ui-txt-highlight {
  308. color: #ff8444; }
  309. .ui-txt-justify {
  310. text-align: justify; }
  311. .ui-txt-justify-one {
  312. text-align: justify;
  313. overflow: hidden;
  314. height: 24px; }
  315. .ui-txt-justify-one:after {
  316. display: inline-block;
  317. content: '';
  318. overflow: hidden;
  319. width: 100%;
  320. height: 0; }
  321. /* 1px hack */
  322. .ui-border-t {
  323. border-top: 1px solid #e0e0e0; }
  324. .ui-border-b {
  325. border-bottom: 1px solid #e0e0e0; }
  326. .ui-border-tb {
  327. border-top: #e0e0e0 1px solid;
  328. border-bottom: #e0e0e0 1px solid;
  329. background-image: none; }
  330. .ui-border-l {
  331. border-left: 1px solid #e0e0e0; }
  332. .ui-border-r {
  333. border-right: 1px solid #e0e0e0; }
  334. .ui-border {
  335. border: 1px solid #e0e0e0; }
  336. .ui-border-radius {
  337. border: 1px solid #e0e0e0;
  338. border-radius: 4px; }
  339. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  340. .ui-border-radius {
  341. position: relative;
  342. border: 0; }
  343. .ui-border-radius:before {
  344. content: "";
  345. width: 200%;
  346. height: 200%;
  347. position: absolute;
  348. top: 0;
  349. left: 0;
  350. border: 1px solid #e0e0e0;
  351. -webkit-transform: scale(0.5);
  352. -webkit-transform-origin: 0 0;
  353. padding: 1px;
  354. -webkit-box-sizing: border-box;
  355. border-radius: 8px;
  356. pointer-events: none; } }
  357. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  358. .ui-border {
  359. position: relative;
  360. border: 0; }
  361. .ui-border-t, .ui-border-b, .ui-border-l, .ui-border-r, .ui-border-tb {
  362. border: 0; }
  363. .ui-border-t {
  364. background-position: left top;
  365. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }
  366. .ui-border-b {
  367. background-position: left bottom;
  368. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }
  369. .ui-border-t,
  370. .ui-border-b,
  371. .ui-border-tb {
  372. background-repeat: repeat-x;
  373. -webkit-background-size: 100% 1px; }
  374. .ui-border-tb {
  375. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  376. background-position: top, bottom; }
  377. .ui-border-l {
  378. background-position: left top;
  379. background-image: -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }
  380. .ui-border-r {
  381. background-position: right top;
  382. background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)); }
  383. .ui-border-l,
  384. .ui-border-r {
  385. background-repeat: repeat-y;
  386. -webkit-background-size: 1px 100%; }
  387. .ui-border:after {
  388. content: "";
  389. width: 100%;
  390. height: 100%;
  391. position: absolute;
  392. top: 0;
  393. left: 0;
  394. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, right top, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  395. -webkit-background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  396. background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  397. background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
  398. background-repeat: no-repeat;
  399. background-position: top, right, bottom, left;
  400. padding: 1px;
  401. -webkit-box-sizing: border-box;
  402. z-index: 10;
  403. pointer-events: none; } }
  404. /* 箭头链接 */
  405. .ui-arrowlink {
  406. position: relative; }
  407. .ui-arrowlink:before {
  408. font-family: "iconfont" !important;
  409. font-size: 32px;
  410. line-height: 44px;
  411. font-style: normal;
  412. -webkit-font-smoothing: antialiased;
  413. -webkit-text-stroke-width: 0.2px;
  414. display: block;
  415. color: rgba(0, 0, 0, 0.5);
  416. color: #c7c7c7;
  417. content: "";
  418. position: absolute;
  419. right: 15px;
  420. top: 50%;
  421. margin-top: -22px;
  422. margin-right: -10px; }
  423. @media (max-width: 320px) {
  424. .ui-arrowlink:before {
  425. right: 10px; } }
  426. .ui-arrowlink.active {
  427. background: #e5e6e7; }
  428. /* 文字截断 */
  429. .ui-nowrap {
  430. max-width: 100%;
  431. overflow: hidden;
  432. white-space: nowrap;
  433. text-overflow: ellipsis; }
  434. .ui-nowrap-flex {
  435. display: -webkit-box;
  436. overflow: hidden;
  437. text-overflow: ellipsis;
  438. -webkit-box-orient: vertical;
  439. -webkit-line-clamp: 1;
  440. -webkit-box-flex: 1;
  441. height: inherit; }
  442. .ui-nowrap-multi {
  443. display: -webkit-box;
  444. overflow: hidden;
  445. text-overflow: ellipsis;
  446. -webkit-box-orient: vertical;
  447. -webkit-line-clamp: 2; }
  448. .ui-placehold-wrap {
  449. padding-top: 31.25%;
  450. position: relative; }
  451. .ui-placehold {
  452. color: #bbb;
  453. position: absolute;
  454. top: 0;
  455. width: 100%;
  456. display: -webkit-box;
  457. -webkit-box-orient: vertical;
  458. -webkit-box-pack: center;
  459. -webkit-box-align: center;
  460. -webkit-box-sizing: border-box;
  461. text-align: center;
  462. height: 100%;
  463. z-index: -1; }
  464. .ui-placehold-img {
  465. padding-top: 31.25%;
  466. position: relative; }
  467. .ui-placehold-img > span {
  468. width: 100%;
  469. height: 100%;
  470. position: absolute;
  471. top: 0;
  472. left: 0;
  473. z-index: 1;
  474. background-repeat: no-repeat;
  475. -webkit-background-size: cover; }
  476. .ui-placehold-img img {
  477. width: 100%;
  478. height: 100%; }
  479. /* 三等分 */
  480. .ui-grid, .ui-grid-trisect, .ui-grid-halve {
  481. padding-left: 15px;
  482. padding-right: 10px;
  483. overflow: hidden;
  484. padding-top: 10px; }
  485. @media (max-width: 320px) {
  486. .ui-grid, .ui-grid-trisect, .ui-grid-halve {
  487. padding-left: 10px;
  488. padding-right: 5px; } }
  489. .ui-grid li, .ui-grid-trisect li, .ui-grid-halve li {
  490. padding-right: 5px;
  491. padding-bottom: 10px;
  492. float: left;
  493. position: relative;
  494. -webkit-box-sizing: border-box; }
  495. .ui-grid-trisect > li {
  496. width: 33.3333%; }
  497. .ui-grid-trisect-img {
  498. padding-top: 149.47%; }
  499. .ui-grid-trisect h4 {
  500. position: relative;
  501. margin: 7px 0 3px; }
  502. .ui-grid-trisect h4 span {
  503. display: inline-block;
  504. margin-left: 12px;
  505. color: #777; }
  506. /* 二等分 */
  507. .ui-grid-halve > li {
  508. width: 50%; }
  509. .ui-grid-halve-img {
  510. padding-top: 55.17%; }
  511. .ui-grid-trisect-img, .ui-grid-halve-img {
  512. position: relative;
  513. width: 100%; }
  514. .ui-grid-trisect-img > span, .ui-grid-halve-img > span {
  515. width: 100%;
  516. height: 100%;
  517. position: absolute;
  518. top: 0;
  519. left: 0;
  520. z-index: 1;
  521. background-repeat: no-repeat;
  522. -webkit-background-size: cover; }
  523. .ui-grid-trisect-img img, .ui-grid-halve-img img {
  524. width: 100%;
  525. height: 100%;
  526. position: absolute;
  527. left: 0;
  528. top: 0; }
  529. .ui-grid-trisect-img.active, .ui-grid-halve-img.active {
  530. opacity: .5; }
  531. .ui-row {
  532. display: block;
  533. overflow: hidden; }
  534. .ui-col {
  535. float: left;
  536. box-sizing: border-box;
  537. width: 100%; }
  538. .ui-col-10 {
  539. width: 10%; }
  540. .ui-col-20 {
  541. width: 20%; }
  542. .ui-col-25 {
  543. width: 25%; }
  544. .ui-col-33 {
  545. width: 33.3333%; }
  546. .ui-col-50 {
  547. width: 50%; }
  548. .ui-col-67 {
  549. width: 66.6666%; }
  550. .ui-col-75 {
  551. width: 75%; }
  552. .ui-col-80 {
  553. width: 80%; }
  554. .ui-col-90 {
  555. width: 90%; }
  556. .ui-row-flex {
  557. display: -webkit-box;
  558. width: 100%;
  559. -webkit-box-sizing: border-box; }
  560. .ui-row-flex .ui-col {
  561. float: none;
  562. -webkit-box-flex: 1;
  563. width: 0; }
  564. .ui-row-flex .ui-col-2 {
  565. -webkit-box-flex: 2; }
  566. .ui-row-flex .ui-col-3 {
  567. -webkit-box-flex: 3; }
  568. .ui-row-flex .ui-col-4 {
  569. -webkit-box-flex: 4; }
  570. .ui-row-flex-ver {
  571. -webkit-box-orient: vertical; }
  572. .ui-row-flex-ver .ui-col {
  573. width: 100%;
  574. height: 0; }
  575. .ui-whitespace {
  576. padding-left: 15px;
  577. padding-right: 15px;
  578. box-sizing: border-box; }
  579. @media (max-width: 320px) {
  580. .ui-whitespace {
  581. padding-left: 10px;
  582. padding-right: 10px; } }
  583. .ui-whitespace-left {
  584. padding-left: 15px;
  585. box-sizing: border-box; }
  586. @media (max-width: 320px) {
  587. .ui-whitespace-left {
  588. padding-left: 10px; } }
  589. .ui-whitespace-right {
  590. padding-right: 15px;
  591. box-sizing: border-box; }
  592. @media (max-width: 320px) {
  593. .ui-whitespace-right {
  594. padding-right: 10px; } }
  595. .ui-justify {
  596. text-align: justify;
  597. font-size: 0; }
  598. .ui-justify:after {
  599. content: '';
  600. display: inline-block;
  601. width: 100%;
  602. height: 0;
  603. overflow: hidden; }
  604. .ui-justify li {
  605. display: inline-block;
  606. text-align: center; }
  607. .ui-justify p {
  608. font-size: 16px; }
  609. .ui-justify-flex {
  610. width: 100%;
  611. display: -webkit-box;
  612. -webkit-box-pack: justify;
  613. -webkit-justify-content: space-between; }
  614. .ui-header,
  615. .ui-footer {
  616. position: fixed;
  617. width: 100%;
  618. z-index: 100;
  619. left: 0; }
  620. .ui-header {
  621. top: 0;
  622. height: 45px;
  623. line-height: 45px; }
  624. .ui-header-stable,
  625. .ui-header-positive {
  626. padding: 0 10px;
  627. box-sizing: border-box; }
  628. .ui-header-stable,
  629. .ui-footer-stable {
  630. background-color: #f8f8f8; }
  631. .ui-header-positive,
  632. .ui-footer-positive {
  633. background-color: #18b4ed;
  634. color: #fff; }
  635. .ui-header-positive a, .ui-header-positive a:active, .ui-header-positive i,
  636. .ui-footer-positive a,
  637. .ui-footer-positive a:active,
  638. .ui-footer-positive i {
  639. color: #fff; }
  640. .ui-footer-btn {
  641. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f9f9f9), to(#e0e0e0));
  642. color: #00a5e0; }
  643. .ui-footer-btn .ui-tiled {
  644. height: 100%; }
  645. .ui-footer {
  646. bottom: 0;
  647. height: 56px; }
  648. .ui-header ~ .ui-container {
  649. border-top: 45px solid transparent; }
  650. .ui-footer ~ .ui-container {
  651. border-bottom: 56px solid transparent; }
  652. .ui-header h1 {
  653. text-align: center;
  654. font-size: 18px; }
  655. .ui-header .ui-icon-return {
  656. position: absolute;
  657. left: 0; }
  658. .ui-header .ui-btn, .ui-header .ui-btn-lg, .ui-header .ui-btn-s {
  659. display: block;
  660. position: absolute;
  661. right: 10px;
  662. top: 50%;
  663. margin-top: -15px; }
  664. /**
  665. * 垂直上下居中
  666. */
  667. .ui-center {
  668. width: 100%;
  669. display: -webkit-box;
  670. -webkit-box-orient: vertical;
  671. -webkit-box-pack: center;
  672. -webkit-box-align: center;
  673. text-align: center;
  674. height: 150px; }
  675. /**
  676. * 排版
  677. */
  678. .ui-flex,
  679. .ui-tiled {
  680. display: -webkit-box;
  681. width: 100%;
  682. -webkit-box-sizing: border-box; }
  683. .ui-flex-ver {
  684. -webkit-box-orient: vertical; }
  685. .ui-flex-pack-start {
  686. -webkit-box-pack: start; }
  687. .ui-flex-pack-end {
  688. -webkit-box-pack: end; }
  689. .ui-flex-pack-center {
  690. -webkit-box-pack: center; }
  691. .ui-flex-align-start {
  692. -webkit-box-align: start; }
  693. .ui-flex-align-end {
  694. -webkit-box-align: end; }
  695. .ui-flex-align-center {
  696. -webkit-box-align: center; }
  697. /**
  698. * 平铺
  699. */
  700. .ui-tiled li {
  701. -webkit-box-flex: 1;
  702. width: 100%;
  703. text-align: center;
  704. display: -webkit-box;
  705. -webkit-box-orient: vertical;
  706. -webkit-box-pack: center;
  707. -webkit-box-align: center; }
  708. /**
  709. * 未读数通知
  710. */
  711. .ui-badge, .ui-badge-muted, .ui-badge-num, .ui-badge-corner, .ui-badge-cornernum {
  712. display: inline-block;
  713. text-align: center;
  714. background: #f74c31;
  715. color: #fff;
  716. font-size: 11px;
  717. height: 16px;
  718. line-height: 16px;
  719. -webkit-border-radius: 8px;
  720. padding: 0 6px;
  721. background-clip: padding-box; }
  722. /* 浅色的 */
  723. .ui-badge-muted {
  724. background: #b6cae0; }
  725. .ui-badge-num {
  726. height: 19px;
  727. line-height: 20px;
  728. font-size: 12px;
  729. min-width: 19px;
  730. -webkit-border-radius: 10px; }
  731. .ui-badge-wrap {
  732. position: relative;
  733. text-align: center; }
  734. .ui-badge-corner {
  735. position: absolute;
  736. border: 2px #fff solid;
  737. height: 20px;
  738. line-height: 20px;
  739. top: -4px;
  740. right: -9px; }
  741. .ui-badge-cornernum {
  742. position: absolute;
  743. top: -4px;
  744. right: -9px;
  745. height: 19px;
  746. line-height: 19px;
  747. font-size: 12px;
  748. min-width: 19px;
  749. -webkit-border-radius: 10px;
  750. top: -5px;
  751. right: -5px; }
  752. /**
  753. * 红点提醒
  754. */
  755. .ui-reddot, .ui-reddot-border, .ui-reddot-s {
  756. position: relative;
  757. display: inline-block;
  758. line-height: 22px;
  759. padding: 0 6px; }
  760. .ui-reddot:after, .ui-reddot-border:after, .ui-reddot-s:after {
  761. content: '';
  762. position: absolute;
  763. display: block;
  764. width: 8px;
  765. height: 8px;
  766. background-color: #f74c31;
  767. border-radius: 5px;
  768. right: -3px;
  769. top: -3px;
  770. background-clip: padding-box; }
  771. .ui-reddot-static {
  772. display: block;
  773. width: 8px;
  774. height: 8px;
  775. padding: 0; }
  776. .ui-reddot-static:after {
  777. top: 0;
  778. right: 0; }
  779. /* 带白边的 */
  780. .ui-reddot-border:before {
  781. content: '';
  782. position: absolute;
  783. display: block;
  784. width: 8px;
  785. height: 8px;
  786. background-color: #fff;
  787. border-radius: 5px;
  788. right: -4px;
  789. top: -4px;
  790. background-clip: padding-box;
  791. padding: 1px; }
  792. /* 小号的 */
  793. .ui-reddot-s:after {
  794. width: 6px;
  795. height: 6px;
  796. top: -5px;
  797. right: -5px; }
  798. /**
  799. * 圆角头像列表场景
  800. */
  801. .ui-avatar,
  802. .ui-avatar-lg,
  803. .ui-avatar-s,
  804. .ui-avatar-one,
  805. .ui-avatar-tiled {
  806. display: block;
  807. -webkit-background-size: cover;
  808. background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAA8FBMVEXp8Peat8+jwNidutKhvtagvdWcudGfu9Kpwteiv9ecudCsxNifvNTM2+ieu9PE1eSdudDO3OmkvtSyyNu/0eKhvNOivdPm7vWlv9WeutHI2Oa5zd+dudG+0eHn7/bG1+Xi6/SzydzT4Ozc5vDe6PLY5O/a5e/P3eqmv9WmwNW6zt/j7PTX4+6uxtno8Pff6fLh6vPW4u280ODg6fLC1OObuM+buNDD1eTU4eza5fDd5/GhvNKowdarw9jA0+K1y93k7PTk7fXl7fW7zt/F1uXc5/DZ5O/R3+vB0+OnwNXg6vKcuNDM2+mtxNjO3eq3zN1UQ75QAAACR0lEQVR4Xu3W1a7cMBAG4PnHDi4zMx5mxiLD+79Ne7YXq6hKHMU+Ui/8XVpKfo0nMwr9hyzLsizLsqx5ZTfX9DyvmXtXOaNXsd+rYqs9mJFx454HiLwMXsi8CzTO35JZ0x1ABLwlBZAzW0yhAzfgKOmiekLmVEII/peAd22u5ZGMSEpzSWYc30cyoim+oe4/wuU4LgZkwq0HyXEkPCMX9hmC4wmcHpK2VhWS40ncHZG2KcBJBAom2l7kJA6eSFsNDicJsB5qt8SH5EToz0nT1zUCRUi4IE3zqjLkm/aaPGsrQ8oz0nSkDgm1Z750AU4mtL/hYQ1FThZgZ4+0HH9BoAzx9knL8hKsoL9YChCsksdAd3PlWcXBhHSM15CsEqCsNY49uKwm4Lcos5MyAk7BRYmyOpxAcBoOqkca/1sBpyKyl1KH4HQc5J4pmzYkpwQsKJsQnFYRI8qmnD7EwdPrh0gcZA9xio76piBY4iFziACUMw+EcLNXEgKd7o5qVtD52UYeu5RNB3iiifIP0qcRgAplU4N/TNdILsVFgVq/0My6Vxa9lyeTF5jAwzPRsF4gLbfNhBSJ/pRMKPThxGbgkcy4iu19HqdkxN7oR2wlDmqrQ9K39JPm8RLYbZGu8T1cJ3mp1ElXJVqGLAKI7DOJxpA0Le8gJP8VSIGN7RE7Lmr6XfneACCKfwgAjfPFdP8qcpSbk76bgX+BDe+gPqMXs3quj43OQekNGTH+WBmV3nc/fdi+b+9m1S2VuqvZM6lZlmVZlmVZvwEAnS9LHbI74gAAAABJRU5ErkJggg==); }
  809. .ui-avatar {
  810. width: 50px;
  811. height: 50px;
  812. -webkit-border-radius: 200px;
  813. overflow: hidden; }
  814. .ui-avatar > span {
  815. width: 100%;
  816. height: 100%;
  817. display: block;
  818. overflow: hidden;
  819. background-repeat: no-repeat;
  820. -webkit-background-size: cover;
  821. -webkit-border-radius: 200px; }
  822. .ui-avatar-lg,
  823. .ui-avatar-one {
  824. width: 70px;
  825. height: 70px;
  826. -webkit-border-radius: 200px;
  827. overflow: hidden; }
  828. .ui-avatar-lg > span,
  829. .ui-avatar-one > span {
  830. width: 100%;
  831. height: 100%;
  832. display: block;
  833. overflow: hidden;
  834. background-repeat: no-repeat;
  835. -webkit-background-size: cover;
  836. -webkit-border-radius: 200px; }
  837. .ui-avatar-s {
  838. width: 40px;
  839. height: 40px;
  840. -webkit-border-radius: 200px;
  841. overflow: hidden; }
  842. .ui-avatar-s > span {
  843. width: 100%;
  844. height: 100%;
  845. display: block;
  846. overflow: hidden;
  847. background-repeat: no-repeat;
  848. -webkit-background-size: cover;
  849. -webkit-border-radius: 200px; }
  850. /* 平铺场景 */
  851. .ui-avatar-tiled {
  852. width: 30px;
  853. height: 30px;
  854. -webkit-border-radius: 200px;
  855. overflow: hidden;
  856. display: inline-block; }
  857. .ui-avatar-tiled > span {
  858. width: 100%;
  859. height: 100%;
  860. display: block;
  861. overflow: hidden;
  862. background-repeat: no-repeat;
  863. -webkit-background-size: cover;
  864. -webkit-border-radius: 200px; }
  865. .ui-label {
  866. display: inline-block;
  867. position: relative;
  868. line-height: 30px;
  869. height: 30px;
  870. padding: 0 15px;
  871. border: 1px solid #cacccd;
  872. border-radius: 15px; }
  873. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  874. .ui-label {
  875. position: relative;
  876. border: 0; }
  877. .ui-label:before {
  878. content: "";
  879. width: 200%;
  880. height: 200%;
  881. position: absolute;
  882. top: 0;
  883. left: 0;
  884. border: 1px solid #cacccd;
  885. -webkit-transform: scale(0.5);
  886. -webkit-transform-origin: 0 0;
  887. padding: 1px;
  888. -webkit-box-sizing: border-box;
  889. border-radius: 30px;
  890. pointer-events: none; } }
  891. .ui-label:active {
  892. background-color: #f3f2f2; }
  893. .ui-label-list {
  894. margin: 0 10px; }
  895. .ui-label-list .ui-label {
  896. margin: 0 10px 10px 0; }
  897. .ui-label-s {
  898. font-size: 11px;
  899. line-height: 13px;
  900. display: inline-block;
  901. position: relative;
  902. padding: 0 1px;
  903. color: #ff7f0d;
  904. border: 1px solid #ff7f0d;
  905. border-radius: 2px; }
  906. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  907. .ui-label-s {
  908. position: relative;
  909. border: 0; }
  910. .ui-label-s:before {
  911. content: "";
  912. width: 200%;
  913. height: 200%;
  914. position: absolute;
  915. top: 0;
  916. left: 0;
  917. border: 1px solid #ff7f0d;
  918. -webkit-transform: scale(0.5);
  919. -webkit-transform-origin: 0 0;
  920. padding: 1px;
  921. -webkit-box-sizing: border-box;
  922. border-radius: 4px;
  923. pointer-events: none; } }
  924. .ui-label-s:active {
  925. background-color: #f3f2f2; }
  926. .ui-label-s:after {
  927. content: "";
  928. position: absolute;
  929. top: -5px;
  930. bottom: -5px;
  931. left: -5px;
  932. right: -5px; }
  933. .ui-tag-t, .ui-tag-hot,
  934. .ui-tag-new,
  935. .ui-tag-s-hot,
  936. .ui-tag-s-new,
  937. .ui-tag-pop-hot,
  938. .ui-tag-pop-new {
  939. position: relative; }
  940. .ui-tag-t:before, .ui-tag-hot:before,
  941. .ui-tag-new:before,
  942. .ui-tag-s-hot:before,
  943. .ui-tag-s-new:before,
  944. .ui-tag-pop-hot:before,
  945. .ui-tag-pop-new:before,
  946. .ui-tag-t:after,
  947. .ui-tag-hot:after,
  948. .ui-tag-new:after,
  949. .ui-tag-s-hot:after,
  950. .ui-tag-s-new:after,
  951. .ui-tag-pop-hot:after,
  952. .ui-tag-pop-new:after {
  953. height: 20px;
  954. left: 0;
  955. top: 0;
  956. z-index: 9;
  957. display: block; }
  958. .ui-tag-t:before, .ui-tag-hot:before,
  959. .ui-tag-new:before,
  960. .ui-tag-s-hot:before,
  961. .ui-tag-s-new:before,
  962. .ui-tag-pop-hot:before,
  963. .ui-tag-pop-new:before,
  964. .ui-tag-vip:before,
  965. .ui-tag-svip:before,
  966. .ui-tag-selected:after {
  967. font-family: "iconfont" !important;
  968. font-size: 32px;
  969. line-height: 44px;
  970. font-style: normal;
  971. -webkit-font-smoothing: antialiased;
  972. -webkit-text-stroke-width: 0.2px;
  973. display: block;
  974. color: rgba(0, 0, 0, 0.5);
  975. position: absolute; }
  976. .ui-tag-t:before, .ui-tag-hot:before,
  977. .ui-tag-new:before,
  978. .ui-tag-s-hot:before,
  979. .ui-tag-s-new:before,
  980. .ui-tag-pop-hot:before,
  981. .ui-tag-pop-new:before {
  982. content: "";
  983. line-height: 20px;
  984. color: #ff0000; }
  985. .ui-tag-t:after, .ui-tag-hot:after,
  986. .ui-tag-new:after,
  987. .ui-tag-s-hot:after,
  988. .ui-tag-s-new:after,
  989. .ui-tag-pop-hot:after,
  990. .ui-tag-pop-new:after {
  991. position: absolute;
  992. content: '';
  993. width: 22px;
  994. text-align: right;
  995. line-height: 20px;
  996. font-size: 12px;
  997. color: #fff;
  998. padding-right: 14px; }
  999. .ui-tag-b, .ui-tag-freelimit,
  1000. .ui-tag-free,
  1001. .ui-tag-last,
  1002. .ui-tag-limit,
  1003. .ui-tag-act,
  1004. .ui-tag-xy,
  1005. .ui-tag-vip,
  1006. .ui-tag-svip {
  1007. position: relative; }
  1008. .ui-tag-b:before, .ui-tag-freelimit:before,
  1009. .ui-tag-free:before,
  1010. .ui-tag-last:before,
  1011. .ui-tag-limit:before,
  1012. .ui-tag-act:before,
  1013. .ui-tag-xy:before,
  1014. .ui-tag-vip:before,
  1015. .ui-tag-svip:before {
  1016. position: absolute;
  1017. font-size: 10px;
  1018. width: 28px;
  1019. height: 13px;
  1020. line-height: 13px;
  1021. bottom: 0;
  1022. right: 0;
  1023. z-index: 9;
  1024. color: #fff;
  1025. border-radius: 2px;
  1026. text-align: center; }
  1027. .ui-tag-vip:before,
  1028. .ui-tag-svip:before {
  1029. font-size: 32px;
  1030. text-indent: -2px;
  1031. border-radius: 2px; }
  1032. .ui-tag-vip:before {
  1033. background-color: #ff0000;
  1034. color: #fffadf;
  1035. content: ""; }
  1036. .ui-tag-svip:before {
  1037. background-color: #ffd400;
  1038. color: #b7440e;
  1039. content: ""; }
  1040. .ui-tag-freelimit:before {
  1041. background-color: #18b4ed;
  1042. content: '限免'; }
  1043. .ui-tag-free:before {
  1044. background-color: #5fb336;
  1045. content: '免费'; }
  1046. .ui-tag-last:before {
  1047. background-color: #8f6adb;
  1048. content: '绝版'; }
  1049. .ui-tag-limit:before {
  1050. background-color: #3385e6;
  1051. content: '限量'; }
  1052. .ui-tag-act:before {
  1053. background-color: #00c795;
  1054. content: '活动'; }
  1055. .ui-tag-xy:before {
  1056. background-color: #d7ba42;
  1057. content: '星影'; }
  1058. .ui-tag-freemonthly:before {
  1059. background-color: #ff7f0d;
  1060. content: '包月'; }
  1061. .ui-tag-onsale:before {
  1062. background-color: #00c795;
  1063. content: '特价'; }
  1064. .ui-tag-hot:after,
  1065. .ui-tag-s-hot:after,
  1066. .ui-tag-pop-hot:after {
  1067. content: '热'; }
  1068. .ui-tag-new:after,
  1069. .ui-tag-s-new:after,
  1070. .ui-tag-pop-new:after {
  1071. content: '\u65b0'; }
  1072. .ui-tag-hot:before,
  1073. .ui-tag-s-hot:before,
  1074. .ui-tag-pop-hot:before {
  1075. color: #ff7200; }
  1076. .ui-tag-s-hot:before,
  1077. .ui-tag-s-new:before {
  1078. content: "";
  1079. left: -2px; }
  1080. .ui-tag-s-hot:after,
  1081. .ui-tag-s-new:after {
  1082. width: 16px;
  1083. padding-right: 12px; }
  1084. .ui-tag-selected:after {
  1085. content: "";
  1086. color: #18b4ed;
  1087. right: -5px;
  1088. top: -5px;
  1089. z-index: 9;
  1090. width: 26px;
  1091. height: 26px;
  1092. background: #fff;
  1093. border-radius: 13px;
  1094. line-height: 26px;
  1095. text-indent: -3px; }
  1096. .ui-tag-wrap {
  1097. display: inline-block;
  1098. position: relative;
  1099. padding-right: 32px; }
  1100. .ui-tag-wrap .ui-tag-vip,
  1101. .ui-tag-wrap .ui-tag-svip {
  1102. position: static; }
  1103. .ui-tag-wrap .ui-tag-vip:before,
  1104. .ui-tag-wrap .ui-tag-svip:before {
  1105. top: 50%;
  1106. margin-top: -7px; }
  1107. .ui-tag-pop-hot:before,
  1108. .ui-tag-pop-new:before {
  1109. content: "";
  1110. left: -10px;
  1111. top: 1px; }
  1112. .ui-tag-pop-hot:after,
  1113. .ui-tag-pop-new:after {
  1114. font-size: 11px;
  1115. padding-right: 0;
  1116. text-align: center;
  1117. left: -5px; }
  1118. /**
  1119. * 按钮
  1120. */
  1121. .ui-btn, .ui-btn-lg, .ui-btn-s {
  1122. height: 30px;
  1123. line-height: 30px;
  1124. padding: 0 11px;
  1125. min-width: 55px;
  1126. display: inline-block;
  1127. position: relative;
  1128. text-align: center;
  1129. font-size: 15px;
  1130. background-color: #fdfdfd;
  1131. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #fff), to(#fafafa));
  1132. vertical-align: top;
  1133. color: #00a5e0;
  1134. -webkit-box-sizing: border-box;
  1135. background-clip: padding-box;
  1136. border: 1px solid #cacccd;
  1137. border-radius: 3px; }
  1138. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  1139. .ui-btn, .ui-btn-lg, .ui-btn-s {
  1140. position: relative;
  1141. border: 0; }
  1142. .ui-btn:before, .ui-btn-lg:before, .ui-btn-s:before {
  1143. content: "";
  1144. width: 200%;
  1145. height: 200%;
  1146. position: absolute;
  1147. top: 0;
  1148. left: 0;
  1149. border: 1px solid #cacccd;
  1150. -webkit-transform: scale(0.5);
  1151. -webkit-transform-origin: 0 0;
  1152. padding: 1px;
  1153. -webkit-box-sizing: border-box;
  1154. border-radius: 6px;
  1155. pointer-events: none; } }
  1156. .ui-btn:not(.disabled):not(:disabled):active, .ui-btn-lg:not(.disabled):not(:disabled):active, .ui-btn-s:not(.disabled):not(:disabled):active, .ui-btn.active, .active.ui-btn-lg, .active.ui-btn-s {
  1157. background: #f2f2f2;
  1158. color: rgba(0, 165, 224, 0.5);
  1159. background-clip: padding-box; }
  1160. .ui-btn:after, .ui-btn-lg:after, .ui-btn-s:after {
  1161. content: "";
  1162. position: absolute;
  1163. top: -7px;
  1164. bottom: -7px;
  1165. left: 0;
  1166. right: 0; }
  1167. .ui-btn-primary {
  1168. background-color: #18b4ed;
  1169. border-color: #0baae4;
  1170. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1fbaf3), to(#18b4ed));
  1171. color: white;
  1172. background-clip: padding-box; }
  1173. .ui-btn-primary:not(.disabled):not(:disabled):active, .ui-btn-primary.active {
  1174. background: #1ca7da;
  1175. border-color: #1ca7da;
  1176. color: rgba(255, 255, 255, 0.5);
  1177. background-clip: padding-box; }
  1178. .ui-btn-danger {
  1179. background-color: #f75549;
  1180. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #fc6156), to(#f75549));
  1181. color: white;
  1182. border-color: #f43d30;
  1183. background-clip: padding-box; }
  1184. .ui-btn-danger:not(.disabled):not(:disabled):active, .ui-btn-danger.active {
  1185. background: #e2574d;
  1186. border-color: #e2574d;
  1187. color: rgba(255, 255, 255, 0.5);
  1188. background-clip: padding-box; }
  1189. .ui-btn.disabled, .disabled.ui-btn-lg, .disabled.ui-btn-s, .ui-btn:disabled, .ui-btn-lg:disabled, .ui-btn-s:disabled {
  1190. border: 0;
  1191. color: #ccc;
  1192. background: #e9ebec;
  1193. background-clip: padding-box; }
  1194. .ui-btn-lg {
  1195. font-size: 18px;
  1196. height: 44px;
  1197. line-height: 44px;
  1198. display: block;
  1199. width: 100%;
  1200. border-radius: 5px; }
  1201. .ui-btn-wrap {
  1202. padding: 15px 10px; }
  1203. @media (max-width: 320px) {
  1204. .ui-btn-wrap {
  1205. padding: 10px; } }
  1206. .ui-btn-s {
  1207. padding: 0;
  1208. width: 55px;
  1209. height: 25px;
  1210. line-height: 25px;
  1211. font-size: 13px; }
  1212. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  1213. .ui-btn-primary:before {
  1214. border: 1px solid #0baae4; }
  1215. .ui-btn-danger:before {
  1216. border: 1px solid #f43d30; }
  1217. .ui-btn, .ui-btn-lg, .ui-btn-s {
  1218. border: 0; }
  1219. .ui-btn.disabled, .disabled.ui-btn-lg, .disabled.ui-btn-s,
  1220. .ui-btn:disabled,
  1221. .ui-btn-lg:disabled,
  1222. .ui-btn-s:disabled,
  1223. .ui-btn.disabled:before,
  1224. .disabled.ui-btn-lg:before,
  1225. .disabled.ui-btn-s:before,
  1226. .ui-btn:disabled:before,
  1227. .ui-btn-lg:disabled:before,
  1228. .ui-btn-s:disabled:before {
  1229. border: 1px solid #e9ebec; }
  1230. .ui-btn-lg:before {
  1231. border-radius: 10px; } }
  1232. .ui-btn-progress {
  1233. width: 55px;
  1234. padding: 0;
  1235. overflow: hidden; }
  1236. .ui-btn-progress .ui-btn-inner {
  1237. position: absolute;
  1238. left: 0;
  1239. top: 0;
  1240. height: 100%;
  1241. overflow: hidden;
  1242. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, #1fbaf3), to(#18b4ed));
  1243. border-bottom-left-radius: 3px;
  1244. border-top-left-radius: 3px; }
  1245. .ui-btn-progress .ui-btn-inner span {
  1246. display: inline-block;
  1247. color: white;
  1248. position: absolute;
  1249. width: 55px;
  1250. left: 0; }
  1251. .ui-btn-progress.disabled, .ui-btn-progress:disabled {
  1252. background-color: #fefefe;
  1253. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, white), to(#fafafa));
  1254. color: #ccc;
  1255. border: 1px solid #cacccd;
  1256. background-clip: padding-box; }
  1257. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  1258. .ui-btn-progress.disabled,
  1259. .ui-btn-progress:disabled {
  1260. border: 0; }
  1261. .ui-btn-progress.disabled:before,
  1262. .ui-btn-progress:disabled:before {
  1263. border: 1px solid #cacccd; } }
  1264. .ui-btn-group {
  1265. display: -webkit-box;
  1266. width: 100%;
  1267. box-sizing: border-box;
  1268. -webkit-box-align: center; }
  1269. .ui-btn-group button {
  1270. display: block;
  1271. -webkit-box-flex: 1;
  1272. margin-right: 10px; }
  1273. .ui-btn-group button:first-child {
  1274. margin-left: 10px; }
  1275. .ui-tips {
  1276. padding: 20px 15px;
  1277. text-align: center;
  1278. font-size: 16px;
  1279. color: #000; }
  1280. .ui-tips i {
  1281. display: inline-block;
  1282. width: 32px;
  1283. height: 1px;
  1284. vertical-align: top; }
  1285. .ui-tips i:before {
  1286. font-family: "iconfont" !important;
  1287. font-size: 32px;
  1288. line-height: 44px;
  1289. font-style: normal;
  1290. -webkit-font-smoothing: antialiased;
  1291. -webkit-text-stroke-width: 0.2px;
  1292. display: block;
  1293. color: rgba(0, 0, 0, 0.5);
  1294. content: "";
  1295. color: #0090ff;
  1296. line-height: 21px; }
  1297. .ui-tips-success i:before {
  1298. content: "";
  1299. color: #65d521; }
  1300. .ui-tips-warn i:before {
  1301. content: "";
  1302. color: #f76249; }
  1303. /**
  1304. * 页面消息提示
  1305. */
  1306. .ui-newstips-wrap {
  1307. margin: 20px 15px;
  1308. text-align: center; }
  1309. .ui-newstips {
  1310. background: #383939;
  1311. position: relative;
  1312. height: 40px;
  1313. line-height: 40px;
  1314. display: -webkit-inline-box;
  1315. -webkit-box-align: center;
  1316. padding-right: 25px;
  1317. border-radius: 5px;
  1318. font-size: 14px;
  1319. color: #fff;
  1320. padding-left: 15px; }
  1321. .ui-newstips .ui-avatar-tiled, .ui-newstips .ui-newstips-thumb, .ui-newstips i {
  1322. display: block;
  1323. margin-left: -5px;
  1324. margin-right: 10px; }
  1325. .ui-newstips .ui-newstips-thumb {
  1326. width: 30px;
  1327. height: 30px;
  1328. position: relative; }
  1329. .ui-newstips .ui-newstips-thumb > span {
  1330. display: block;
  1331. width: 100%;
  1332. height: 100%;
  1333. z-index: 1;
  1334. background-repeat: no-repeat;
  1335. -webkit-background-size: cover; }
  1336. .ui-newstips div {
  1337. display: -webkit-box;
  1338. overflow: hidden;
  1339. text-overflow: ellipsis;
  1340. -webkit-box-orient: vertical;
  1341. -webkit-line-clamp: 1;
  1342. -webkit-box-flex: 1;
  1343. height: inherit; }
  1344. .ui-newstips:after {
  1345. font-family: "iconfont" !important;
  1346. font-size: 32px;
  1347. line-height: 44px;
  1348. font-style: normal;
  1349. -webkit-font-smoothing: antialiased;
  1350. -webkit-text-stroke-width: 0.2px;
  1351. display: block;
  1352. color: rgba(0, 0, 0, 0.5);
  1353. color: #c7c7c7;
  1354. content: "";
  1355. position: absolute;
  1356. right: 15px;
  1357. top: 50%;
  1358. margin-top: -22px;
  1359. margin-right: -10px; }
  1360. @media (max-width: 320px) {
  1361. .ui-newstips:after {
  1362. right: 10px; } }
  1363. .ui-newstips .ui-reddot, .ui-newstips .ui-reddot-border, .ui-newstips .ui-reddot-s, .ui-newstips .ui-badge-num {
  1364. margin-left: 10px;
  1365. margin-right: 5px; }
  1366. .ui-tooltips {
  1367. width: 100%;
  1368. position: relative;
  1369. z-index: 99;
  1370. overflow: hidden;
  1371. box-sizing: border-box; }
  1372. .ui-tooltips-cnt {
  1373. background-color: #fff;
  1374. line-height: 44px;
  1375. height: 44px;
  1376. padding-left: 10px;
  1377. padding-right: 30px;
  1378. max-width: 100%;
  1379. overflow: hidden;
  1380. white-space: nowrap;
  1381. text-overflow: ellipsis; }
  1382. .ui-tooltips-cnt .ui-icon-close:before {
  1383. font-size: 40px;
  1384. color: rgba(0, 0, 0, 0.2);
  1385. margin-left: -10px;
  1386. position: absolute;
  1387. right: 0;
  1388. top: 0; }
  1389. .ui-tooltips-warn .ui-tooltips-cnt {
  1390. background-color: rgba(255, 242, 183, 0.95);
  1391. color: #000; }
  1392. .ui-tooltips-warn:active .ui-tooltips-cnt {
  1393. background-color: #e1d498; }
  1394. .ui-tooltips-guide .ui-tooltips-cnt {
  1395. color: #00a5e0;
  1396. background-color: rgba(205, 242, 255, 0.95); }
  1397. .ui-tooltips-guide .ui-tooltips-cnt .ui-icon-close:before {
  1398. color: rgba(0, 165, 224, 0.2); }
  1399. .ui-tooltips-guide:active .ui-tooltips-cnt {
  1400. background-color: #b5dbe8; }
  1401. .ui-tooltips-cnt-link:after {
  1402. font-family: "iconfont" !important;
  1403. font-size: 32px;
  1404. line-height: 44px;
  1405. font-style: normal;
  1406. -webkit-font-smoothing: antialiased;
  1407. -webkit-text-stroke-width: 0.2px;
  1408. display: block;
  1409. color: rgba(0, 0, 0, 0.5);
  1410. color: #c7c7c7;
  1411. content: "";
  1412. position: absolute;
  1413. right: 15px;
  1414. top: 50%;
  1415. margin-top: -22px;
  1416. margin-right: -10px;
  1417. color: rgba(0, 0, 0, 0.5); }
  1418. @media (max-width: 320px) {
  1419. .ui-tooltips-cnt-link:after {
  1420. right: 10px; } }
  1421. .ui-tooltips-guide .ui-tooltips-cnt-link:after {
  1422. color: #00aeef; }
  1423. .ui-tooltips-warn i {
  1424. display: inline-block;
  1425. margin-right: 4px;
  1426. margin-left: -4px;
  1427. width: 32px;
  1428. height: 1px;
  1429. vertical-align: top; }
  1430. .ui-tooltips-warn i:before {
  1431. font-family: "iconfont" !important;
  1432. font-size: 32px;
  1433. line-height: 44px;
  1434. font-style: normal;
  1435. -webkit-font-smoothing: antialiased;
  1436. -webkit-text-stroke-width: 0.2px;
  1437. display: block;
  1438. color: rgba(0, 0, 0, 0.5);
  1439. content: "";
  1440. color: #f76249; }
  1441. /**
  1442. * 表格
  1443. */
  1444. .ui-table {
  1445. width: 100%;
  1446. border-collapse: collapse; }
  1447. .ui-table th {
  1448. font-weight: 500; }
  1449. .ui-table td, .ui-table th {
  1450. border-bottom: 1px solid #e0e0e0;
  1451. border-right: 1px solid #e0e0e0;
  1452. text-align: center; }
  1453. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  1454. .ui-table td, .ui-table th {
  1455. position: relative;
  1456. border-right: 0;
  1457. border-bottom: 0; }
  1458. .ui-table td:after, .ui-table th:after {
  1459. content: "";
  1460. position: absolute;
  1461. width: 100%;
  1462. height: 100%;
  1463. left: 0;
  1464. top: 0;
  1465. background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0)), -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  1466. background-size: 1px 100% ,100% 1px;
  1467. background-repeat: no-repeat;
  1468. background-position: right, bottom;
  1469. pointer-events: none; }
  1470. .ui-table tr td:last-child:after, .ui-table tr th:last-child:after {
  1471. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  1472. background-size: 100% 1px;
  1473. background-repeat: no-repeat;
  1474. background-position: bottom; }
  1475. .ui-table tr:last-child td:not(:last-child):after {
  1476. background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  1477. background-size: 1px 100%;
  1478. background-repeat: no-repeat;
  1479. background-position: right; } }
  1480. .ui-table tr td:last-child, .ui-table tr th:last-child {
  1481. border-right: 0; }
  1482. .ui-table tr:last-child td {
  1483. border-bottom: 0; }
  1484. .ui-list {
  1485. background-color: #fff;
  1486. width: 100%; }
  1487. .ui-list > li {
  1488. position: relative;
  1489. margin-left: 15px;
  1490. display: -webkit-box; }
  1491. .ui-list-pure > li {
  1492. display: block; }
  1493. /*文字列表*/
  1494. .ui-list-text > li,
  1495. .ui-list-pure > li {
  1496. position: relative;
  1497. padding-top: 10px;
  1498. padding-bottom: 10px;
  1499. padding-right: 15px;
  1500. -webkit-box-align: center; }
  1501. .ui-list-text h4,
  1502. .ui-list-text p {
  1503. -webkit-box-flex: 1; }
  1504. /*通栏列表*/
  1505. .ui-list-cover > li {
  1506. padding-left: 15px;
  1507. margin-left: 0px; }
  1508. .ui-list > li.ui-border-t:first-child,
  1509. .ui-list > li:first-child > .ui-border-t {
  1510. border: none;
  1511. background-image: none; }
  1512. /*列表缩略图*/
  1513. .ui-list-thumb,
  1514. .ui-list-thumb-s,
  1515. .ui-list-img,
  1516. .ui-list-icon {
  1517. position: relative;
  1518. margin: 10px 10px 10px 0px; }
  1519. .ui-list-thumb > span,
  1520. .ui-list-thumb-s > span,
  1521. .ui-list-img > span,
  1522. .ui-list-icon > span {
  1523. display: block;
  1524. width: 100%;
  1525. height: 100%;
  1526. z-index: 1;
  1527. background-repeat: no-repeat;
  1528. -webkit-background-size: cover; }
  1529. .ui-list-thumb {
  1530. width: 50px;
  1531. height: 50px; }
  1532. /*列表普通图片*/
  1533. .ui-list-img {
  1534. width: 100px;
  1535. height: 68px; }
  1536. .ui-list-thumb-s {
  1537. width: 28px;
  1538. height: 28px; }
  1539. /*列表icon*/
  1540. .ui-list-icon {
  1541. width: 40px;
  1542. height: 40px; }
  1543. .ui-list .ui-avatar,
  1544. .ui-list .ui-avatar-s,
  1545. .ui-list .ui-avatar-lg {
  1546. margin: 10px 10px 10px 0px; }
  1547. /*列表主要信息*/
  1548. .ui-list-info {
  1549. -webkit-box-flex: 1;
  1550. padding-top: 10px;
  1551. padding-bottom: 10px;
  1552. display: -webkit-box;
  1553. -webkit-box-orient: vertical;
  1554. -webkit-box-pack: center;
  1555. padding-right: 15px; }
  1556. .ui-list-info p {
  1557. color: #777;
  1558. font-size: 14px; }
  1559. .ui-list-text .ui-list-info {
  1560. padding-top: 0;
  1561. padding-bottom: 0; }
  1562. .ui-list li h4 {
  1563. font-size: 16px; }
  1564. .ui-list:not(.ui-list-text) li > p,
  1565. .ui-list li > h5 {
  1566. font-size: 14px;
  1567. color: #777; }
  1568. /*列表按压态*/
  1569. .ui-list-active > li:active,
  1570. .ui-list li.active {
  1571. background-color: #e5e6e7;
  1572. padding-left: 15px;
  1573. margin-left: 0px; }
  1574. .ui-list-active > li:active,
  1575. .ui-list > li.active,
  1576. .ui-list > li.active > .ui-border-t,
  1577. .ui-list > li.active + li > .ui-border-t,
  1578. .ui-list > li.active + li.ui-border-t {
  1579. background-image: none;
  1580. border-top-color: #e5e6e7; }
  1581. /*连接列表*/
  1582. .ui-list-link > li:after {
  1583. font-family: "iconfont" !important;
  1584. font-size: 32px;
  1585. line-height: 44px;
  1586. font-style: normal;
  1587. -webkit-font-smoothing: antialiased;
  1588. -webkit-text-stroke-width: 0.2px;
  1589. display: block;
  1590. color: rgba(0, 0, 0, 0.5);
  1591. color: #c7c7c7;
  1592. content: "";
  1593. position: absolute;
  1594. right: 15px;
  1595. top: 50%;
  1596. margin-top: -22px;
  1597. margin-right: -10px; }
  1598. @media (max-width: 320px) {
  1599. .ui-list-link > li:after {
  1600. right: 10px; } }
  1601. .ui-list-text.ui-list-link > li {
  1602. padding-right: 30px; }
  1603. .ui-list-link .ui-list-info {
  1604. padding-right: 30px; }
  1605. /* 功能类 */
  1606. .ui-list-function .ui-list-info {
  1607. padding-right: 75px; }
  1608. .ui-list-function .ui-btn, .ui-list-function .ui-btn-lg, .ui-list-function .ui-btn-s {
  1609. position: absolute;
  1610. top: 50%;
  1611. right: 15px;
  1612. margin-top: -15px; }
  1613. .ui-list-function .ui-btn-s {
  1614. margin-top: -12px; }
  1615. .ui-list-function.ui-list-link .ui-list-info {
  1616. padding-right: 90px; }
  1617. .ui-list-function.ui-list-link .ui-btn, .ui-list-function.ui-list-link .ui-btn-lg, .ui-list-function.ui-list-link .ui-btn-s {
  1618. right: 30px; }
  1619. .ui-list-function li {
  1620. -webkit-box-align: inherit; }
  1621. .ui-list-one > li {
  1622. padding-top: 0;
  1623. padding-bottom: 0;
  1624. line-height: 44px; }
  1625. .ui-list-one .ui-list-info {
  1626. -webkit-box-orient: horizontal;
  1627. -webkit-box-align: center; }
  1628. .ui-list-one h4 {
  1629. -webkit-box-flex: 1; }
  1630. @media (max-width: 320px) {
  1631. .ui-list > li {
  1632. margin-left: 10px; }
  1633. .ui-list-text > li,
  1634. .ui-list-pure > li,
  1635. .ui-list-info {
  1636. padding-right: 10px; }
  1637. .ui-list-cover > li,
  1638. .ui-list-active > li:active,
  1639. .ui-list li.active {
  1640. padding-left: 10px; }
  1641. .ui-list-text.ui-list-link > li {
  1642. padding-right: 25px; }
  1643. .ui-list-function .ui-list-info {
  1644. padding-right: 70px; }
  1645. .ui-list-function .ui-btn, .ui-list-function .ui-btn-lg, .ui-list-function .ui-btn-s {
  1646. right: 10px; }
  1647. .ui-list-function.ui-list-link .ui-list-info {
  1648. padding-right: 85px; }
  1649. .ui-list-function.ui-list-link .ui-btn, .ui-list-function.ui-list-link .ui-btn-lg, .ui-list-function.ui-list-link .ui-btn-s {
  1650. right: 25px; } }
  1651. /**
  1652. * 出错页面
  1653. */
  1654. .ui-notice {
  1655. width: 100%;
  1656. height: 100%;
  1657. z-index: 99;
  1658. display: -webkit-box;
  1659. -webkit-box-orient: vertical;
  1660. -webkit-box-pack: center;
  1661. -webkit-box-align: center;
  1662. position: absolute;
  1663. text-align: center; }
  1664. .ui-notice > i {
  1665. display: block;
  1666. margin-bottom: 20px; }
  1667. .ui-notice > i:before {
  1668. font-family: "iconfont" !important;
  1669. font-size: 32px;
  1670. line-height: 44px;
  1671. font-style: normal;
  1672. -webkit-font-smoothing: antialiased;
  1673. -webkit-text-stroke-width: 0.2px;
  1674. display: block;
  1675. color: rgba(0, 0, 0, 0.5);
  1676. content: "";
  1677. font-size: 100px;
  1678. line-height: 100px;
  1679. color: rgba(0, 0, 0, 0.3); }
  1680. .ui-notice p {
  1681. font-size: 16px;
  1682. line-height: 20px;
  1683. color: #bbb;
  1684. text-align: center;
  1685. padding: 0 15px; }
  1686. .ui-notice-btn {
  1687. width: 100%;
  1688. -webkit-box-sizing: border-box;
  1689. padding: 50px 15px 15px; }
  1690. .ui-notice-btn button {
  1691. margin: 10px 0px; }
  1692. .ui-form {
  1693. background-color: #fff; }
  1694. .ui-form-item-order.active {
  1695. background-color: #e5e6e7; }
  1696. /* 表单输入项 */
  1697. .ui-form-item {
  1698. position: relative;
  1699. font-size: 16px;
  1700. height: 44px;
  1701. line-height: 44px;
  1702. padding-right: 15px;
  1703. padding-left: 15px; }
  1704. .ui-form-item label:not(.ui-switch):not(.ui-checkbox):not(.ui-checkbox-s):not(.ui-radio) {
  1705. width: 95px;
  1706. position: absolute;
  1707. text-align: left;
  1708. box-sizing: border-box; }
  1709. .ui-form-item input,
  1710. .ui-form-item textarea {
  1711. width: 100%;
  1712. box-sizing: border-box;
  1713. -webkit-appearance: none;
  1714. border: 0;
  1715. background: none;
  1716. padding-left: 95px; }
  1717. .ui-form-item input[type="checkbox"], .ui-form-item input[type="radio"] {
  1718. padding-left: 0; }
  1719. .ui-form-item .ui-icon-close {
  1720. position: absolute;
  1721. top: 0;
  1722. right: 6px; }
  1723. @media (max-width: 320px) {
  1724. .ui-form-item .ui-icon-close {
  1725. right: 1px; } }
  1726. @media (max-width: 320px) {
  1727. .ui-form-item {
  1728. padding-left: 10px;
  1729. padding-right: 10px; } }
  1730. .ui-form-item-textarea {
  1731. height: 65px; }
  1732. .ui-form-item-textarea label {
  1733. vertical-align: top; }
  1734. .ui-form-item-textarea textarea {
  1735. margin-top: 15px;
  1736. border: none; }
  1737. .ui-form-item-textarea textarea:focus {
  1738. outline: none; }
  1739. .ui-form-item-link > li:after {
  1740. font-family: "iconfont" !important;
  1741. font-size: 32px;
  1742. line-height: 44px;
  1743. font-style: normal;
  1744. -webkit-font-smoothing: antialiased;
  1745. -webkit-text-stroke-width: 0.2px;
  1746. display: block;
  1747. color: rgba(0, 0, 0, 0.5);
  1748. color: #c7c7c7;
  1749. content: "";
  1750. position: absolute;
  1751. right: 15px;
  1752. top: 50%;
  1753. margin-top: -22px;
  1754. margin-right: -10px; }
  1755. @media (max-width: 320px) {
  1756. .ui-form-item-link > li:after {
  1757. right: 10px; } }
  1758. .ui-form-item-l label,
  1759. .ui-form-item-r button {
  1760. color: #00a5e0;
  1761. text-align: center; }
  1762. .ui-form-item-r .ui-icon-close {
  1763. right: 125px; }
  1764. .ui-form-item-l input:not([type="checkbox"]):not([type="radio"]) {
  1765. padding-left: 115px;
  1766. -webkit-box-sizing: border-box;
  1767. box-sizing: border-box; }
  1768. .ui-form-item-r {
  1769. padding-right: 0; }
  1770. .ui-form-item-r input:not([type="checkbox"]):not([type="radio"]) {
  1771. padding-left: 0;
  1772. padding-right: 150px;
  1773. -webkit-box-sizing: border-box;
  1774. box-sizing: border-box; }
  1775. .ui-form-item-r button {
  1776. width: 110px;
  1777. height: 44px;
  1778. position: absolute;
  1779. top: 0;
  1780. right: 0; }
  1781. .ui-form-item-r button.disabled {
  1782. color: #bbb; }
  1783. .ui-form-item-r button:not(.disabled):active {
  1784. background-color: #e5e6e7; }
  1785. .ui-form-item-pure input,
  1786. .ui-form-item-pure textarea {
  1787. padding-left: 0; }
  1788. /* 表单展示项 */
  1789. .ui-form-item-show label {
  1790. color: #777; }
  1791. .ui-form-item-link:after {
  1792. font-family: "iconfont" !important;
  1793. font-size: 32px;
  1794. line-height: 44px;
  1795. font-style: normal;
  1796. -webkit-font-smoothing: antialiased;
  1797. -webkit-text-stroke-width: 0.2px;
  1798. display: block;
  1799. color: rgba(0, 0, 0, 0.5);
  1800. color: #c7c7c7;
  1801. content: "";
  1802. position: absolute;
  1803. right: 15px;
  1804. top: 50%;
  1805. margin-top: -22px;
  1806. margin-right: -10px; }
  1807. @media (max-width: 320px) {
  1808. .ui-form-item-link:after {
  1809. right: 10px; } }
  1810. .ui-form-item-checkbox,
  1811. .ui-form-item-radio,
  1812. .ui-form-item-switch {
  1813. display: -webkit-box;
  1814. -webkit-box-align: center; }
  1815. .ui-checkbox, .ui-checkbox-s {
  1816. display: inline-block; }
  1817. .ui-checkbox input, .ui-checkbox-s input {
  1818. display: inline-block;
  1819. width: 25px;
  1820. height: 1px;
  1821. position: relative;
  1822. overflow: visible;
  1823. border: 0;
  1824. background: none;
  1825. -webkit-appearance: none;
  1826. outline: none;
  1827. margin-right: 8px;
  1828. vertical-align: middle; }
  1829. .ui-checkbox input:before, .ui-checkbox-s input:before {
  1830. font-family: "iconfont" !important;
  1831. font-size: 32px;
  1832. line-height: 44px;
  1833. font-style: normal;
  1834. -webkit-font-smoothing: antialiased;
  1835. -webkit-text-stroke-width: 0.2px;
  1836. display: block;
  1837. color: rgba(0, 0, 0, 0.5);
  1838. content: "";
  1839. color: #18b4ed;
  1840. position: absolute;
  1841. top: -22px;
  1842. left: -4px;
  1843. color: #dedfe0; }
  1844. .ui-checkbox input:checked:before, .ui-checkbox-s input:checked:before {
  1845. content: "";
  1846. color: #18b4ed; }
  1847. .ui-checkbox-s input:before {
  1848. content: ""; }
  1849. .ui-checkbox-s input:checked:before {
  1850. content: ""; }
  1851. .ui-switch {
  1852. position: absolute;
  1853. font-size: 16px;
  1854. right: 15px;
  1855. top: 50%;
  1856. margin-top: -16px;
  1857. width: 52px;
  1858. height: 32px;
  1859. line-height: 32px; }
  1860. @media (max-width: 320px) {
  1861. .ui-switch {
  1862. right: 10px; } }
  1863. .ui-switch input {
  1864. width: 52px;
  1865. height: 32px;
  1866. position: absolute;
  1867. z-index: 2;
  1868. border: none;
  1869. background: none;
  1870. -webkit-appearance: none;
  1871. outline: none; }
  1872. .ui-switch input:before {
  1873. content: '';
  1874. width: 50px;
  1875. height: 30px;
  1876. border: 1px solid #dfdfdf;
  1877. background-color: #fdfdfd;
  1878. border-radius: 20px;
  1879. cursor: pointer;
  1880. display: inline-block;
  1881. position: relative;
  1882. vertical-align: middle;
  1883. -webkit-box-sizing: content-box;
  1884. box-sizing: content-box;
  1885. border-color: #dfdfdf;
  1886. box-shadow: #dfdfdf 0px 0px 0px 0px inset;
  1887. -webkit-transition: border 0.4s, box-shadow 0.4s;
  1888. transition: border 0.4s, box-shadow 0.4s;
  1889. -webkit-background-clip: content-box;
  1890. background-clip: content-box; }
  1891. .ui-switch input:checked:before {
  1892. border-color: #64bd63;
  1893. box-shadow: #64bd63 0px 0px 0px 16px inset;
  1894. background-color: #64bd63;
  1895. transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
  1896. -webkit-transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
  1897. background-color: #64bd63; }
  1898. .ui-switch input:checked:after {
  1899. left: 21px; }
  1900. .ui-switch input:after {
  1901. content: '';
  1902. width: 30px;
  1903. height: 30px;
  1904. position: absolute;
  1905. top: 1px;
  1906. left: 0;
  1907. border-radius: 100%;
  1908. background-color: #fff;
  1909. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  1910. -webkit-transition: left 0.2s;
  1911. transition: left 0.2s; }
  1912. .ui-radio {
  1913. line-height: 25px;
  1914. display: inline-block; }
  1915. .ui-radio input {
  1916. display: inline-block;
  1917. width: 26px;
  1918. height: 26px;
  1919. position: relative;
  1920. overflow: visible;
  1921. border: 0;
  1922. background: none;
  1923. -webkit-appearance: none;
  1924. outline: none;
  1925. margin-right: 8px;
  1926. vertical-align: middle; }
  1927. .ui-radio input:before {
  1928. content: '';
  1929. display: block;
  1930. width: 24px;
  1931. height: 24px;
  1932. border: 1px solid #dfe0e1;
  1933. border-radius: 13px;
  1934. background-clip: padding-box;
  1935. position: absolute;
  1936. left: 0px;
  1937. top: 0; }
  1938. .ui-radio input:checked:after {
  1939. content: '';
  1940. display: block;
  1941. width: 14px;
  1942. height: 14px;
  1943. background: #18b4ed;
  1944. border-radius: 7px;
  1945. position: absolute;
  1946. left: 6px;
  1947. top: 6px; }
  1948. .ui-select {
  1949. position: relative;
  1950. margin-right: 6px; }
  1951. .ui-select select {
  1952. -webkit-appearance: none;
  1953. border: 0;
  1954. background: none;
  1955. width: 100%;
  1956. padding-right: 14px; }
  1957. .ui-select:after {
  1958. position: absolute;
  1959. top: 50%;
  1960. right: 0;
  1961. margin-top: -4px;
  1962. width: 0;
  1963. height: 0;
  1964. border-top: 6px solid;
  1965. border-right: 5px solid transparent;
  1966. border-left: 5px solid transparent;
  1967. color: #a6a6a6;
  1968. content: "";
  1969. pointer-events: none; }
  1970. .ui-select-group {
  1971. margin-left: 95px;
  1972. overflow: hidden; }
  1973. .ui-select-group .ui-select {
  1974. float: left; }
  1975. .ui-form-item > .ui-select {
  1976. margin-left: 95px; }
  1977. .ui-input-wrap {
  1978. background-color: #ebeced;
  1979. height: 44px;
  1980. display: -webkit-box;
  1981. -webkit-box-align: center; }
  1982. .ui-input-wrap .ui-btn, .ui-input-wrap .ui-btn-lg, .ui-input-wrap .ui-btn-s, .ui-input-wrap i {
  1983. margin-right: 10px; }
  1984. .ui-input {
  1985. height: 30px;
  1986. line-height: 30px;
  1987. margin: 7px 10px;
  1988. background: #fff;
  1989. padding-left: 10px;
  1990. -webkit-box-flex: 1; }
  1991. .ui-input input {
  1992. width: 100%;
  1993. height: 100%;
  1994. border: 0;
  1995. background: 0 0;
  1996. -webkit-appearance: none;
  1997. outline: 0; }
  1998. .ui-searchbar-wrap {
  1999. display: -webkit-box;
  2000. -webkit-box-pack: center;
  2001. -webkit-box-align: center;
  2002. background-color: #ebeced;
  2003. height: 44px; }
  2004. .ui-searchbar-wrap button {
  2005. margin-right: 10px; }
  2006. .ui-searchbar-wrap .ui-searchbar-cancel {
  2007. color: #00a5e0;
  2008. font-size: 16px;
  2009. padding: 4px 8px; }
  2010. .ui-searchbar-wrap .ui-searchbar-input, .ui-searchbar-wrap button, .ui-searchbar-wrap .ui-icon-close {
  2011. display: none; }
  2012. .ui-searchbar-wrap.focus {
  2013. -webkit-box-pack: start; }
  2014. .ui-searchbar-wrap.focus .ui-searchbar-input, .ui-searchbar-wrap.focus button, .ui-searchbar-wrap.focus .ui-icon-close {
  2015. display: block; }
  2016. .ui-searchbar-wrap.focus .ui-searchbar-text {
  2017. display: none; }
  2018. .ui-searchbar {
  2019. border-radius: 5px;
  2020. margin: 0 10px;
  2021. background: #fff;
  2022. height: 30px;
  2023. line-height: 30px;
  2024. position: relative;
  2025. padding-left: 4px;
  2026. -webkit-box-flex: 1;
  2027. display: -webkit-box;
  2028. -webkit-box-pack: center;
  2029. -webkit-box-align: center;
  2030. color: #bbb;
  2031. font-size: 14px;
  2032. width: 100%; }
  2033. .ui-searchbar input {
  2034. -webkit-appearance: none;
  2035. border: none;
  2036. background: none;
  2037. color: #000;
  2038. width: 100%;
  2039. padding: 4px 0; }
  2040. .ui-searchbar .ui-icon-search {
  2041. line-height: 30px; }
  2042. .ui-searchbar .ui-icon-close {
  2043. line-height: 30px; }
  2044. .ui-searchbar-input {
  2045. -webkit-box-flex: 1; }
  2046. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  2047. .ui-searchbar.ui-border-radius:before {
  2048. border-radius: 10px; } }
  2049. /**
  2050. * 轮播组件
  2051. */
  2052. .ui-slider {
  2053. width: 100%;
  2054. overflow: hidden;
  2055. position: relative;
  2056. padding-top: 31.25%; }
  2057. .ui-slider-content {
  2058. display: -webkit-box;
  2059. position: absolute;
  2060. left: 0;
  2061. top: 0;
  2062. height: 100%; }
  2063. .ui-slider-content > li {
  2064. -webkit-box-flex: 1;
  2065. width: 100%;
  2066. height: 100%; }
  2067. .ui-slider-content > li img {
  2068. display: block;
  2069. width: 100%; }
  2070. .ui-slider-content > li span {
  2071. display: block;
  2072. width: 100%;
  2073. height: 100%;
  2074. background-repeat: no-repeat;
  2075. -webkit-background-size: 100% 100%; }
  2076. .ui-slider-content > li.active {
  2077. opacity: .5; }
  2078. .ui-slider-indicators {
  2079. position: absolute;
  2080. display: -webkit-box;
  2081. -webkit-box-pack: end;
  2082. width: 100%;
  2083. bottom: 10px;
  2084. right: 4px;
  2085. font-size: 0; }
  2086. .ui-slider-indicators li {
  2087. display: block;
  2088. text-indent: 100%;
  2089. white-space: nowrap;
  2090. overflow: hidden;
  2091. font-size: 0;
  2092. width: 7px;
  2093. height: 7px;
  2094. background-color: rgba(0, 0, 0, 0.3);
  2095. border-radius: 10px;
  2096. margin-right: 6px;
  2097. -webkit-box-sizing: border-box;
  2098. background-clip: padding-box;
  2099. position: relative; }
  2100. .ui-slider-indicators li.current:before {
  2101. content: '';
  2102. position: absolute;
  2103. background-color: #fff;
  2104. left: 1px;
  2105. top: 1px;
  2106. width: 5px;
  2107. height: 5px;
  2108. border-radius: 10px;
  2109. -webkit-box-sizing: border-box;
  2110. background-clip: padding-box; }
  2111. .ui-slider-indicators-center {
  2112. -webkit-box-pack: center;
  2113. right: 0; }
  2114. .ui-panel {
  2115. overflow: hidden;
  2116. margin-bottom: 10px; }
  2117. .ui-panel .ui-grid-halve, .ui-panel .ui-grid-trisect {
  2118. padding-top: 0; }
  2119. .ui-panel h1, .ui-panel h2, .ui-panel h3 {
  2120. padding-left: 15px;
  2121. padding-right: 15px;
  2122. line-height: 44px;
  2123. position: relative;
  2124. overflow: hidden;
  2125. display: -webkit-box; }
  2126. @media (max-width: 320px) {
  2127. .ui-panel h1, .ui-panel h2, .ui-panel h3 {
  2128. padding-left: 10px;
  2129. padding-right: 10px; } }
  2130. .ui-panel h1 span, .ui-panel h2 span, .ui-panel h3 span {
  2131. display: block; }
  2132. .ui-panel-card,
  2133. .ui-panel-simple {
  2134. background-color: #fff; }
  2135. .ui-panel-pure h2,
  2136. .ui-panel-pure h3 {
  2137. color: #777; }
  2138. .ui-panel-simple {
  2139. margin-bottom: 0; }
  2140. .ui-panel-subtitle {
  2141. font-size: 14px;
  2142. color: #777;
  2143. margin-left: 10px; }
  2144. .ui-panel-title-tips {
  2145. font-size: 12px;
  2146. color: #777;
  2147. position: absolute;
  2148. right: 15px; }
  2149. @media (max-width: 320px) {
  2150. .ui-panel-title-tips {
  2151. right: 10px; } }
  2152. .ui-arrowlink .ui-panel-title-tips {
  2153. right: 30px; }
  2154. @media (max-width: 320px) {
  2155. .ui-arrowlink .ui-panel-title-tips {
  2156. right: 25px; } }
  2157. .ui-progress {
  2158. overflow: hidden;
  2159. width: 100%;
  2160. height: 2px;
  2161. font-size: 0px;
  2162. background-color: #e2e2e2;
  2163. box-sizing: border-box; }
  2164. .ui-progress span {
  2165. display: block;
  2166. width: 0%;
  2167. background: #65d521;
  2168. height: 100%;
  2169. font-size: 0; }
  2170. .ui-grid-trisect li .ui-progress,
  2171. .ui-grid-halve li .ui-progress {
  2172. position: absolute;
  2173. height: 13px;
  2174. bottom: 0px;
  2175. z-index: 9;
  2176. border: 5px solid rgba(248, 248, 248, 0.9); }
  2177. .ui-grid-trisect li .ui-progress span,
  2178. .ui-grid-halve li .ui-progress span {
  2179. border-radius: 3px; }
  2180. /**
  2181. * 选项卡
  2182. */
  2183. .ui-tab {
  2184. width: 100%;
  2185. overflow: hidden; }
  2186. .ui-tab-nav {
  2187. width: 100%;
  2188. background-color: #fff;
  2189. display: box;
  2190. display: -webkit-box;
  2191. font-size: 16px;
  2192. height: 45px;
  2193. box-sizing: border-box; }
  2194. .ui-tab-content {
  2195. display: -webkit-box; }
  2196. .ui-tab-content > li {
  2197. -webkit-box-flex: 1;
  2198. width: 100%; }
  2199. .ui-tab-nav li {
  2200. height: 45px;
  2201. line-height: 45px;
  2202. min-width: 70px;
  2203. box-flex: 1;
  2204. -webkit-box-flex: 1;
  2205. text-align: center;
  2206. color: #777;
  2207. box-sizing: border-box;
  2208. border-bottom: 2px solid transparent;
  2209. width: 100%; }
  2210. .ui-tab-nav li.current {
  2211. color: #00a5e0;
  2212. border-bottom: 2px #00a5e0 solid; }
  2213. .ui-tab-nav li:active {
  2214. opacity: .8; }
  2215. .ui-loading-wrap {
  2216. display: -webkit-box;
  2217. -webkit-box-pack: center;
  2218. -webkit-box-align: center;
  2219. text-align: center;
  2220. height: 40px; }
  2221. .ui-loading {
  2222. width: 20px;
  2223. height: 20px;
  2224. display: block;
  2225. background: url(../img/loading_sprite.png);
  2226. -webkit-background-size: auto 20px;
  2227. -webkit-animation: am-rotate 1s steps(12) infinite; }
  2228. .ui-loading-bright {
  2229. width: 37px;
  2230. height: 37px;
  2231. display: block;
  2232. background-image: url(../img/loading_sprite_white.png);
  2233. -webkit-background-size: auto 37px;
  2234. -webkit-animation: am-rotate2 1s steps(12) infinite; }
  2235. .ui-loading-wrap .ui-loading {
  2236. margin: 10px; }
  2237. .ui-loading-block {
  2238. position: fixed;
  2239. top: 0px;
  2240. left: 0px;
  2241. width: 100%;
  2242. height: 100%;
  2243. z-index: 9999;
  2244. display: -webkit-box;
  2245. -webkit-box-orient: horizontal;
  2246. -webkit-box-pack: center;
  2247. -webkit-box-align: center;
  2248. background: rgba(0, 0, 0, 0.4);
  2249. display: none;
  2250. background: transparent; }
  2251. .ui-loading-block .ui-loading-cnt {
  2252. width: 130px;
  2253. height: 110px;
  2254. display: -webkit-box;
  2255. -webkit-box-orient: vertical;
  2256. -webkit-box-align: center;
  2257. text-align: center;
  2258. background: rgba(0, 0, 0, 0.65);
  2259. border-radius: 6px;
  2260. color: #fff;
  2261. font-size: 16px; }
  2262. .ui-loading-block .ui-loading-bright {
  2263. margin: 18px 0 8px; }
  2264. .ui-loading-block.show {
  2265. display: -webkit-box;
  2266. display: box; }
  2267. @-webkit-keyframes am-rotate {
  2268. from {
  2269. background-position: 0 0; }
  2270. to {
  2271. background-position: -240px 0; } }
  2272. @-webkit-keyframes am-rotate2 {
  2273. from {
  2274. background-position: 0 0; }
  2275. to {
  2276. background-position: -444px 0; } }
  2277. .ui-poptips {
  2278. width: 100%;
  2279. position: fixed;
  2280. top: 0px;
  2281. left: 0px;
  2282. z-index: 999;
  2283. padding: 0px 10px;
  2284. box-sizing: border-box; }
  2285. .ui-poptips-cnt {
  2286. background-color: rgba(0, 0, 0, 0.6);
  2287. line-height: 40px;
  2288. height: 40px;
  2289. color: #fff;
  2290. font-size: 16px;
  2291. text-align: center;
  2292. border-bottom-left-radius: 3px;
  2293. border-bottom-right-radius: 3px;
  2294. max-width: 100%;
  2295. overflow: hidden;
  2296. white-space: nowrap;
  2297. text-overflow: ellipsis; }
  2298. .ui-poptips-cnt i {
  2299. display: inline-block;
  2300. width: 32px;
  2301. height: 1px;
  2302. vertical-align: top; }
  2303. .ui-poptips-cnt i:before {
  2304. font-family: "iconfont" !important;
  2305. font-size: 32px;
  2306. line-height: 44px;
  2307. font-style: normal;
  2308. -webkit-font-smoothing: antialiased;
  2309. -webkit-text-stroke-width: 0.2px;
  2310. display: block;
  2311. color: rgba(0, 0, 0, 0.5);
  2312. margin-right: 2px;
  2313. margin-left: 4px;
  2314. color: #fff;
  2315. line-height: 40px; }
  2316. .ui-poptips-info i:before {
  2317. content: ""; }
  2318. .ui-poptips-success i:before {
  2319. content: ""; }
  2320. .ui-poptips-warn i:before {
  2321. content: ""; }
  2322. /**
  2323. * 弹窗类
  2324. */
  2325. .ui-dialog {
  2326. position: fixed;
  2327. top: 0px;
  2328. left: 0px;
  2329. width: 100%;
  2330. height: 100%;
  2331. z-index: 9999;
  2332. display: -webkit-box;
  2333. -webkit-box-orient: horizontal;
  2334. -webkit-box-pack: center;
  2335. -webkit-box-align: center;
  2336. background: rgba(0, 0, 0, 0.4);
  2337. display: none; }
  2338. .ui-dialog.show {
  2339. display: -webkit-box;
  2340. display: box; }
  2341. .ui-dialog-hd {
  2342. height: 48px;
  2343. line-height: 48px;
  2344. text-align: center;
  2345. position: relative; }
  2346. .ui-dialog-cnt {
  2347. border-radius: 6px;
  2348. width: 270px;
  2349. -webkit-background-clip: padding-box;
  2350. background-clip: padding-box;
  2351. pointer-events: auto;
  2352. background-color: rgba(253, 253, 253, 0.95);
  2353. position: relative;
  2354. font-size: 16px; }
  2355. .ui-dialog-bd {
  2356. min-height: 71px;
  2357. border-top-left-radius: 6px;
  2358. border-top-right-radius: 6px;
  2359. padding: 18px;
  2360. display: -webkit-box;
  2361. display: box;
  2362. -webkit-box-pack: center;
  2363. -webkit-box-align: center;
  2364. -webkit-box-orient: vertical; }
  2365. .ui-dialog-bd > h4 {
  2366. margin-bottom: 4px;
  2367. width: 100%;
  2368. text-align: center; }
  2369. .ui-dialog-bd > div, .ui-dialog-bd > ul {
  2370. width: 100%; }
  2371. .ui-dialog-ft {
  2372. border-bottom-left-radius: 6px;
  2373. border-bottom-right-radius: 6px;
  2374. display: -webkit-box;
  2375. width: 100%;
  2376. box-sizing: border-box;
  2377. -webkit-box-align: center;
  2378. border-top: 1px solid #e0e0e0;
  2379. height: 42px;
  2380. line-height: 42px; }
  2381. .ui-dialog-close:before {
  2382. font-family: "iconfont" !important;
  2383. font-size: 32px;
  2384. line-height: 44px;
  2385. font-style: normal;
  2386. -webkit-font-smoothing: antialiased;
  2387. -webkit-text-stroke-width: 0.2px;
  2388. display: block;
  2389. color: rgba(0, 0, 0, 0.5);
  2390. content: "";
  2391. color: #828282;
  2392. display: block;
  2393. line-height: 32px;
  2394. position: absolute;
  2395. top: 3px;
  2396. right: 3px; }
  2397. .ui-dialog-close:active {
  2398. opacity: 0.5; }
  2399. .ui-dialog-ft button {
  2400. color: #00a5e0;
  2401. text-align: center;
  2402. border-right: 1px #e0e0e0 solid;
  2403. width: 100%;
  2404. line-height: 42px;
  2405. background: transparent;
  2406. display: block;
  2407. margin: 0 !important;
  2408. -webkit-box-flex: 1; }
  2409. .ui-dialog-ft button:active {
  2410. background-color: rgba(0, 0, 0, 0.1) !important; }
  2411. .ui-dialog-ft button:first-child {
  2412. border-bottom-left-radius: 6px; }
  2413. .ui-dialog-ft button:last-child {
  2414. border-right: 0;
  2415. border-bottom-right-radius: 6px; }
  2416. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  2417. .ui-dialog-ft {
  2418. position: relative;
  2419. border: 0;
  2420. background-position: left top;
  2421. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  2422. background-repeat: repeat-x;
  2423. -webkit-background-size: 100% 1px; }
  2424. .ui-dialog-ft button {
  2425. border-right: 0;
  2426. background-position: right top;
  2427. background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  2428. background-repeat: repeat-y;
  2429. -webkit-background-size: 1px 100%; }
  2430. .ui-dialog-ft button:last-child {
  2431. background: none; } }
  2432. .ui-selector header {
  2433. padding: 6px 10px;
  2434. color: #a6a6a6;
  2435. overflow: hidden; }
  2436. .ui-selector header h3 {
  2437. float: left; }
  2438. .ui-selector-content {
  2439. background: #fff; }
  2440. .ui-selector-item p {
  2441. margin-left: 10px;
  2442. -webkit-box-flex: 1;
  2443. overflow: hidden;
  2444. white-space: nowrap;
  2445. text-overflow: ellipsis; }
  2446. .ui-selector-item .ui-txt-info {
  2447. margin: 0 10px;
  2448. font-size: 12px; }
  2449. .ui-selector-item .ui-list-link li:after {
  2450. display: none; }
  2451. .ui-selector-item h3:before {
  2452. content: '';
  2453. display: block;
  2454. width: 0;
  2455. height: 0;
  2456. border-left: 6px solid;
  2457. border-top: 5px solid transparent;
  2458. border-bottom: 5px solid transparent;
  2459. color: #a6a6a6;
  2460. position: absolute;
  2461. left: 25px;
  2462. top: 15px;
  2463. -webkit-transition: all 0.2s; }
  2464. .ui-selector-item.active h3:before {
  2465. -webkit-transform: rotate(90deg); }
  2466. .ui-selector-item.active h3 {
  2467. border: none;
  2468. background-image: none; }
  2469. .ui-selector-item.active ul {
  2470. display: block; }
  2471. .ui-selector-item ul {
  2472. display: none; }
  2473. .ui-selector-item h3 {
  2474. display: -webkit-box;
  2475. font-size: 16px;
  2476. padding-left: 54px;
  2477. line-height: 44px;
  2478. height: 44px;
  2479. position: relative; }
  2480. .ui-actionsheet {
  2481. position: fixed;
  2482. top: 0px;
  2483. left: 0px;
  2484. width: 100%;
  2485. height: 100%;
  2486. z-index: 9999;
  2487. opacity: 0;
  2488. pointer-events: none;
  2489. display: -webkit-box;
  2490. -webkit-box-orient: horizontal;
  2491. -webkit-box-pack: center;
  2492. -webkit-box-align: end;
  2493. background: rgba(0, 0, 0, 0.4); }
  2494. .ui-actionsheet.show {
  2495. pointer-events: inherit;
  2496. opacity: 1; }
  2497. .ui-actionsheet.show .ui-actionsheet-cnt {
  2498. -webkit-transform: translateY(0);
  2499. -webkit-transition-delay: 0.3s; }
  2500. .ui-actionsheet-cnt {
  2501. font-size: 21px;
  2502. position: fixed;
  2503. bottom: 0;
  2504. padding: 0 8px;
  2505. width: 100%;
  2506. box-sizing: border-box;
  2507. text-align: center;
  2508. -webkit-transform: translateY(100%);
  2509. -webkit-transition-property: all;
  2510. -webkit-transition-timing-function: ease-out;
  2511. -webkit-transition-duration: 0.3s; }
  2512. .ui-actionsheet button, .ui-actionsheet h4 {
  2513. background: rgba(255, 255, 255, 0.84);
  2514. display: block;
  2515. width: 100%;
  2516. color: #0079ff;
  2517. box-sizing: border-box; }
  2518. .ui-actionsheet button {
  2519. line-height: 44px;
  2520. height: 44px; }
  2521. .ui-actionsheet h4 {
  2522. line-height: 24px;
  2523. padding-left: 20px;
  2524. padding-right: 20px;
  2525. padding-top: 10px;
  2526. padding-bottom: 10px;
  2527. border-top-left-radius: 3px;
  2528. border-top-right-radius: 3px; }
  2529. .ui-actionsheet button:not(:last-child) {
  2530. border-top: 1px #e0e0e0 solid; }
  2531. .ui-actionsheet button:last-child {
  2532. margin: 8px 0;
  2533. border-radius: 3px; }
  2534. .ui-actionsheet button:nth-last-child(2) {
  2535. border-bottom-left-radius: 3px;
  2536. border-bottom-right-radius: 3px; }
  2537. .ui-actionsheet button:active {
  2538. opacity: 0.84; }
  2539. .ui-actionsheet h4 {
  2540. font-size: 13px;
  2541. color: #8a8a8a; }
  2542. .ui-actionsheet .ui-actionsheet-del {
  2543. color: #fd472b; }
  2544. @media screen and (-webkit-min-device-pixel-ratio: 2) {
  2545. .ui-actionsheet button:not(:last-child) {
  2546. border: 0;
  2547. background-position: left top;
  2548. background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e0e0e0), to(#e0e0e0));
  2549. background-repeat: repeat-x;
  2550. -webkit-background-size: 100% 1px; } }
  2551. /*# sourceMappingURL=frozen.css.map */