thorui.css 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482
  1. /* Thor UI 基础组件 样式*/
  2. /*!
  3. * =====================================================
  4. * Thor UI v1.5.0 (https://www.thorui.cn/)
  5. * =====================================================
  6. */
  7. @font-face {
  8. font-family: 'thoruiFont';
  9. src: url('~@/static/fonts/thorui.ttf') format('truetype');
  10. font-weight: normal;
  11. font-style: normal;
  12. }
  13. .tui-mask {
  14. width: 100%;
  15. height: 100%;
  16. position: fixed;
  17. top: 0;
  18. left: 0;
  19. background: rgba(0, 0, 0, 0.4);
  20. z-index: 999;
  21. }
  22. .tui-ellipsis {
  23. overflow: hidden;
  24. white-space: nowrap;
  25. text-overflow: ellipsis;
  26. }
  27. .tui-ellipsis-2 {
  28. display: -webkit-box;
  29. overflow: hidden;
  30. white-space: normal !important;
  31. text-overflow: ellipsis;
  32. word-wrap: break-word;
  33. -webkit-line-clamp: 2;
  34. -webkit-box-orient: vertical;
  35. }
  36. .tui-opcity {
  37. opacity: 0.5;
  38. }
  39. .tui-scale-small {
  40. transform: scale(0.9);
  41. transform-origin: center center;
  42. }
  43. .tui-height-full {
  44. height: 100%;
  45. }
  46. .tui-width-full {
  47. width: 100%;
  48. }
  49. .tui-ptop-zero {
  50. padding-top: 0;
  51. }
  52. .tui-pbottom-zero {
  53. padding-bottom: 0;
  54. }
  55. .tui-pleft-zero {
  56. padding-left: 0;
  57. }
  58. .tui-pright-zero {
  59. padding-right: 0;
  60. }
  61. /* color start*/
  62. .tui-color-primary {
  63. color: #C74547;
  64. }
  65. .tui-color-success {
  66. color: #19be6b;
  67. }
  68. .tui-color-warning {
  69. color: #ff7900;
  70. }
  71. .tui-color-error {
  72. color: #EB0909;
  73. }
  74. .tui-color-blue {
  75. color: #007AFF;
  76. }
  77. .tui-color-blue {
  78. color: #007AFF;
  79. }
  80. .tui-color-white {
  81. color: #ffffff;
  82. }
  83. .tui-color-pink {
  84. color: #f74d54;
  85. }
  86. .tui-primary {
  87. color: #fff;
  88. }
  89. .tui-light-primary {
  90. background-color: #5c8dff !important;
  91. color: #fff;
  92. }
  93. .tui-dark-primary {
  94. background-color: #a2383a !important;
  95. color: #fff;
  96. }
  97. .tui-dLight-primary {
  98. background-color: #4e77d9 !important;
  99. color: #fff;
  100. }
  101. .tui-danger {
  102. background-color: #ed3f14 !important;
  103. color: #fff;
  104. }
  105. .tui-warning {
  106. background-color: #ff7900 !important;
  107. color: #fff;
  108. }
  109. .tui-blue {
  110. background-color: #007AFF !important;
  111. color: #fff;
  112. }
  113. .tui-green {
  114. background-color: #19be6b !important;
  115. color: #fff;
  116. }
  117. .tui-black {
  118. background-color: #000 !important;
  119. color: #fff;
  120. }
  121. .tui-white {
  122. background-color: #fff !important;
  123. color: #333 !important;
  124. }
  125. .tui-translucent {
  126. background-color: rgba(0, 0, 0, 0.7);
  127. }
  128. .tui-light-black {
  129. background-color: #333 !important;
  130. }
  131. .tui-phcolor-gray {
  132. background-color: #ccc !important;
  133. }
  134. .tui-divider-gray {
  135. background-color: #eaeef1 !important;
  136. }
  137. .tui-btn-gray {
  138. background-color: #ededed !important;
  139. color: #999 !important;
  140. }
  141. .tui-hover-gray {
  142. background-color: #f7f7f9 !important;
  143. }
  144. .tui-bg-gray {
  145. background-color: #fafafa !important;
  146. }
  147. .tui-light-blue {
  148. background-color: #ecf6fd;
  149. color: #4dabeb !important;
  150. }
  151. .tui-light-brownish {
  152. background-color: #fcebef;
  153. color: #8a5966 !important;
  154. }
  155. .tui-light-orange {
  156. background-color: #fef5eb;
  157. color: #faa851 !important;
  158. }
  159. .tui-light-green {
  160. background-color: #e8f6e8;
  161. color: #44cf85 !important;
  162. }
  163. /* color end*/
  164. /* flex start */
  165. .tui-flex {
  166. display: -webkit-flex;
  167. display: flex;
  168. }
  169. .tui-flex-1 {
  170. flex: 1;
  171. }
  172. .tui-align-center {
  173. justify-content: center;
  174. }
  175. .tui-align-left {
  176. justify-content: flex-start !important;
  177. }
  178. .tui-align-right {
  179. justify-content: flex-end !important;
  180. }
  181. .tui-align-between {
  182. justify-content: space-between !important;
  183. }
  184. .tui-align-around {
  185. justify-content: space-around !important;
  186. }
  187. .tui-vertical-center {
  188. align-items: center;
  189. }
  190. .tui-vertical-top {
  191. align-items: flex-start;
  192. }
  193. .tui-vertical-top {
  194. align-items: flex-end;
  195. }
  196. .tui-center {
  197. display: flex;
  198. align-items: center;
  199. justify-content: center;
  200. }
  201. .tui-line-feed {
  202. flex-direction: row;
  203. flex-wrap: wrap;
  204. }
  205. .tui-col-12 {
  206. width: 100%;
  207. }
  208. .tui-col-11 {
  209. width: 91.66666667%;
  210. }
  211. .tui-col-10 {
  212. width: 83.33333333%;
  213. }
  214. .tui-col-9 {
  215. width: 75%;
  216. }
  217. .tui-col-8 {
  218. width: 66.66666667%;
  219. }
  220. .tui-col-7 {
  221. width: 58.33333333%;
  222. }
  223. .tui-col-6 {
  224. width: 50%;
  225. }
  226. .tui-col-5 {
  227. width: 41.66666667%;
  228. }
  229. .tui-col-4 {
  230. width: 33.33333333%;
  231. }
  232. .tui-col-3 {
  233. width: 25%;
  234. }
  235. .tui-col-2 {
  236. width: 16.66666667%;
  237. }
  238. .tui-col-1 {
  239. width: 8.33333333%;
  240. }
  241. /* flex end */
  242. /* icon start */
  243. .tui-icon {
  244. font-family: 'thoruiFont' !important;
  245. font-style: normal;
  246. -webkit-font-smoothing: antialiased;
  247. text-align: center;
  248. text-decoration: none;
  249. font-size: 32px;
  250. color: #999;
  251. }
  252. .tui-icon-about:before {
  253. content: '\e772';
  254. }
  255. .tui-icon-about-fill:before {
  256. content: '\e771';
  257. }
  258. .tui-icon-add:before {
  259. content: '\e770';
  260. }
  261. .tui-icon-add-fill:before {
  262. content: '\e76f';
  263. }
  264. .tui-icon-addmessage:before {
  265. content: '\e76e';
  266. }
  267. .tui-icon-addressbook:before {
  268. content: '\e76d';
  269. }
  270. .tui-icon-agree:before {
  271. content: '\e76c';
  272. }
  273. .tui-icon-agree-fill:before {
  274. content: '\e76b';
  275. }
  276. .tui-icon-alarm:before {
  277. content: '\e76a';
  278. }
  279. .tui-icon-alarm-fill:before {
  280. content: '\e769';
  281. }
  282. .tui-icon-alipay:before {
  283. content: '\e768';
  284. }
  285. .tui-icon-android:before {
  286. content: '\e767';
  287. }
  288. .tui-icon-applets:before {
  289. content: '\e766';
  290. }
  291. .tui-icon-arrowdown:before {
  292. content: '\e765';
  293. }
  294. .tui-icon-arrowleft:before {
  295. content: '\e764';
  296. }
  297. .tui-icon-arrowright:before {
  298. content: '\e763';
  299. }
  300. .tui-icon-arrowup:before {
  301. content: '\e762';
  302. }
  303. .tui-icon-attestation:before {
  304. content: '\e761';
  305. }
  306. .tui-icon-back:before {
  307. content: '\e760';
  308. }
  309. .tui-icon-bag:before {
  310. content: '\e75f';
  311. }
  312. .tui-icon-bag-fill:before {
  313. content: '\e75e';
  314. }
  315. .tui-icon-balloon:before {
  316. content: '\e75d';
  317. }
  318. .tui-icon-bankcard:before {
  319. content: '\e75c';
  320. }
  321. .tui-icon-bankcard-fill:before {
  322. content: '\e75b';
  323. }
  324. .tui-icon-bottom:before {
  325. content: '\e75a';
  326. }
  327. .tui-icon-calendar:before {
  328. content: '\e759';
  329. }
  330. .tui-icon-camera:before {
  331. content: '\e758';
  332. }
  333. .tui-icon-camera-fill:before {
  334. content: '\e757';
  335. }
  336. .tui-icon-camera-add:before {
  337. content: '\e756';
  338. }
  339. .tui-icon-card:before {
  340. content: '\e755';
  341. }
  342. .tui-icon-card-fill:before {
  343. content: '\e754';
  344. }
  345. .tui-icon-cart:before {
  346. content: '\e753';
  347. }
  348. .tui-icon-cart-fill:before {
  349. content: '\e752';
  350. }
  351. .tui-icon-category:before {
  352. content: '\e751';
  353. }
  354. .tui-icon-category-fill:before {
  355. content: '\e750';
  356. }
  357. .tui-icon-check:before {
  358. content: '\e74f';
  359. }
  360. .tui-icon-circle:before {
  361. content: '\e74e';
  362. }
  363. .tui-icon-circle-fill:before {
  364. content: '\e74d';
  365. }
  366. .tui-icon-circle-selected:before {
  367. content: '\e74c';
  368. }
  369. .tui-icon-clock:before {
  370. content: '\e74b';
  371. }
  372. .tui-icon-clock-fill:before {
  373. content: '\e74a';
  374. }
  375. .tui-icon-close:before {
  376. content: '\e749';
  377. }
  378. .tui-icon-close-fill:before {
  379. content: '\e748';
  380. }
  381. .tui-icon-community:before {
  382. content: '\e747';
  383. }
  384. .tui-icon-community-fill:before {
  385. content: '\e746';
  386. }
  387. .tui-icon-computer:before {
  388. content: '\e745';
  389. }
  390. .tui-icon-computer-fill:before {
  391. content: '\e744';
  392. }
  393. .tui-icon-coupon:before {
  394. content: '\e743';
  395. }
  396. .tui-icon-delete:before {
  397. content: '\e742';
  398. }
  399. .tui-icon-deletekey:before {
  400. content: '\e741';
  401. }
  402. .tui-icon-dingtalk:before {
  403. content: '\e740';
  404. }
  405. .tui-icon-dissatisfied:before {
  406. content: '\e73f';
  407. }
  408. .tui-icon-down:before {
  409. content: '\e73e';
  410. }
  411. .tui-icon-download:before {
  412. content: '\e73d';
  413. }
  414. .tui-icon-edit:before {
  415. content: '\e73c';
  416. }
  417. .tui-icon-ellipsis:before {
  418. content: '\e73b';
  419. }
  420. .tui-icon-enlarge:before {
  421. content: '\e73a';
  422. }
  423. .tui-icon-evaluate:before {
  424. content: '\e739';
  425. }
  426. .tui-icon-exchange:before {
  427. content: '\e738';
  428. }
  429. .tui-icon-explain:before {
  430. content: '\e737';
  431. }
  432. .tui-icon-explain-fill:before {
  433. content: '\e736';
  434. }
  435. .tui-icon-explore:before {
  436. content: '\e735';
  437. }
  438. .tui-icon-explore-fill:before {
  439. content: '\e734';
  440. }
  441. .tui-icon-eye:before {
  442. content: '\e733';
  443. }
  444. .tui-icon-feedback:before {
  445. content: '\e732';
  446. }
  447. .tui-icon-fingerprint:before {
  448. content: '\e730';
  449. }
  450. .tui-icon-friendadd:before {
  451. content: '\e72f';
  452. }
  453. .tui-icon-friendadd-fill:before {
  454. content: '\e72e';
  455. }
  456. .tui-icon-gps:before {
  457. content: '\e72d';
  458. }
  459. .tui-icon-histogram:before {
  460. content: '\e72c';
  461. }
  462. .tui-icon-home:before {
  463. content: '\e72b';
  464. }
  465. .tui-icon-home-fill:before {
  466. content: '\e72a';
  467. }
  468. .tui-icon-house:before {
  469. content: '\e729';
  470. }
  471. .tui-icon-imface:before {
  472. content: '\e728';
  473. }
  474. .tui-icon-imkeyboard:before {
  475. content: '\e727';
  476. }
  477. .tui-icon-immore:before {
  478. content: '\e726';
  479. }
  480. .tui-icon-imvoice:before {
  481. content: '\e725';
  482. }
  483. .tui-icon-ios:before {
  484. content: '\e724';
  485. }
  486. .tui-icon-kefu:before {
  487. content: '\e723';
  488. }
  489. .tui-icon-label:before {
  490. content: '\e722';
  491. }
  492. .tui-icon-label-fill:before {
  493. content: '\e721';
  494. }
  495. .tui-icon-like:before {
  496. content: '\e720';
  497. }
  498. .tui-icon-like-fill:before {
  499. content: '\e71f';
  500. }
  501. .tui-icon-link:before {
  502. content: '\e71e';
  503. }
  504. .tui-icon-listview:before {
  505. content: '\e71d';
  506. }
  507. .tui-icon-loading:before {
  508. content: '\e71c';
  509. }
  510. .tui-icon-location:before {
  511. content: '\e71b';
  512. }
  513. .tui-icon-mail:before {
  514. content: '\e71a';
  515. }
  516. .tui-icon-mail-fill:before {
  517. content: '\e719';
  518. }
  519. .tui-icon-manage:before {
  520. content: '\e718';
  521. }
  522. .tui-icon-manage-fill:before {
  523. content: '\e717';
  524. }
  525. .tui-icon-member:before {
  526. content: '\e716';
  527. }
  528. .tui-icon-member-fill:before {
  529. content: '\e715';
  530. }
  531. .tui-icon-message:before {
  532. content: '\e714';
  533. }
  534. .tui-icon-message-fill:before {
  535. content: '\e713';
  536. }
  537. .tui-icon-mobile:before {
  538. content: '\e712';
  539. }
  540. .tui-icon-moments:before {
  541. content: '\e711';
  542. }
  543. .tui-icon-more:before {
  544. content: '\e710';
  545. }
  546. .tui-icon-more-fill:before {
  547. content: '\e70f';
  548. }
  549. .tui-icon-narrow:before {
  550. content: '\e70e';
  551. }
  552. .tui-icon-news:before {
  553. content: '\e70d';
  554. }
  555. .tui-icon-news-fill:before {
  556. content: '\e70c';
  557. }
  558. .tui-icon-nodata:before {
  559. content: '\e70b';
  560. }
  561. .tui-icon-notice:before {
  562. content: '\e699';
  563. }
  564. .tui-icon-notice-fill:before {
  565. content: '\e698';
  566. }
  567. .tui-icon-offline:before {
  568. content: '\e697';
  569. }
  570. .tui-icon-offline-fill:before {
  571. content: '\e696';
  572. }
  573. .tui-icon-oppose:before {
  574. content: '\e695';
  575. }
  576. .tui-icon-oppose-fill:before {
  577. content: '\e694';
  578. }
  579. .tui-icon-order:before {
  580. content: '\e693';
  581. }
  582. .tui-icon-partake:before {
  583. content: '\e692';
  584. }
  585. .tui-icon-people:before {
  586. content: '\e691';
  587. }
  588. .tui-icon-people-fill:before {
  589. content: '\e690';
  590. }
  591. .tui-icon-pic:before {
  592. content: '\e68f';
  593. }
  594. .tui-icon-pic-fill:before {
  595. content: '\e68e';
  596. }
  597. .tui-icon-picture:before {
  598. content: '\e68d';
  599. }
  600. .tui-icon-pie:before {
  601. content: '\e68c';
  602. }
  603. .tui-icon-play:before {
  604. content: '\e68b';
  605. }
  606. .tui-icon-plus:before {
  607. content: '\e689';
  608. }
  609. .tui-icon-polygonal:before {
  610. content: '\e688';
  611. }
  612. .tui-icon-position:before {
  613. content: '\e687';
  614. }
  615. .tui-icon-position-fill:before {
  616. content: '\e686';
  617. }
  618. .tui-icon-pwd:before {
  619. content: '\e685';
  620. }
  621. .tui-icon-qq:before {
  622. content: '\e684';
  623. }
  624. .tui-icon-qrcode:before {
  625. content: '\e682';
  626. }
  627. .tui-icon-redpacket:before {
  628. content: '\e681';
  629. }
  630. .tui-icon-redpacket-fill:before {
  631. content: '\e680';
  632. }
  633. .tui-icon-reduce:before {
  634. content: '\e67f';
  635. }
  636. .tui-icon-refresh:before {
  637. content: '\e67e';
  638. }
  639. .tui-icon-revoke:before {
  640. content: '\e67d';
  641. }
  642. .tui-icon-satisfied:before {
  643. content: '\e67c';
  644. }
  645. .tui-icon-screen:before {
  646. content: '\e67b';
  647. }
  648. .tui-icon-search:before {
  649. content: '\e67a';
  650. }
  651. .tui-icon-search-2:before {
  652. content: '\e679';
  653. }
  654. .tui-icon-send:before {
  655. content: '\e678';
  656. }
  657. .tui-icon-service:before {
  658. content: '\e677';
  659. }
  660. .tui-icon-service-fill:before {
  661. content: '\e676';
  662. }
  663. .tui-icon-setup:before {
  664. content: '\e675';
  665. }
  666. .tui-icon-setup-fill:before {
  667. content: '\e674';
  668. }
  669. .tui-icon-share:before {
  670. content: '\e673';
  671. }
  672. .tui-icon-share-fill:before {
  673. content: '\e672';
  674. }
  675. .tui-icon-shield:before {
  676. content: '\e671';
  677. }
  678. .tui-icon-shop:before {
  679. content: '\e670';
  680. }
  681. .tui-icon-shop-fill:before {
  682. content: '\e66f';
  683. }
  684. .tui-icon-shut:before {
  685. content: '\e66e';
  686. }
  687. .tui-icon-signin:before {
  688. content: '\e66d';
  689. }
  690. .tui-icon-sina:before {
  691. content: '\e66c';
  692. }
  693. .tui-icon-skin:before {
  694. content: '\e66b';
  695. }
  696. .tui-icon-soso:before {
  697. content: '\e669';
  698. }
  699. .tui-icon-square:before {
  700. content: '\e668';
  701. }
  702. .tui-icon-square-fill:before {
  703. content: '\e667';
  704. }
  705. .tui-icon-square-selected:before {
  706. content: '\e666';
  707. }
  708. .tui-icon-star:before {
  709. content: '\e665';
  710. }
  711. .tui-icon-star-fill:before {
  712. content: '\e664';
  713. }
  714. .tui-icon-strategy:before {
  715. content: '\e663';
  716. }
  717. .tui-icon-sweep:before {
  718. content: '\e662';
  719. }
  720. .tui-icon-time:before {
  721. content: '\e661';
  722. }
  723. .tui-icon-time-fill:before {
  724. content: '\e660';
  725. }
  726. .tui-icon-todown:before {
  727. content: '\e65f';
  728. }
  729. .tui-icon-toleft:before {
  730. content: '\e65e';
  731. }
  732. .tui-icon-tool:before {
  733. content: '\e65d';
  734. }
  735. .tui-icon-top:before {
  736. content: '\e65c';
  737. }
  738. .tui-icon-toright:before {
  739. content: '\e65b';
  740. }
  741. .tui-icon-towardsleft:before {
  742. content: '\e65a';
  743. }
  744. .tui-icon-towardsright:before {
  745. content: '\e659';
  746. }
  747. .tui-icon-towardsright-fill:before {
  748. content: '\e658';
  749. }
  750. .tui-icon-transport:before {
  751. content: '\e657';
  752. }
  753. .tui-icon-transport-fill:before {
  754. content: '\e656';
  755. }
  756. .tui-icon-turningdown:before {
  757. content: '\e654';
  758. }
  759. .tui-icon-turningleft:before {
  760. content: '\e653';
  761. }
  762. .tui-icon-turningright:before {
  763. content: '\e652';
  764. }
  765. .tui-icon-turningup:before {
  766. content: '\e651';
  767. }
  768. .tui-icon-unreceive:before {
  769. content: '\e650';
  770. }
  771. .tui-icon-unseen:before {
  772. content: '\e64f';
  773. }
  774. .tui-icon-up:before {
  775. content: '\e64e';
  776. }
  777. .tui-icon-upload:before {
  778. content: '\e64c';
  779. }
  780. .tui-icon-video:before {
  781. content: '\e64b';
  782. }
  783. .tui-icon-voice:before {
  784. content: '\e649';
  785. }
  786. .tui-icon-voice-fill:before {
  787. content: '\e648';
  788. }
  789. .tui-icon-voipphone:before {
  790. content: '\e647';
  791. }
  792. .tui-icon-wallet:before {
  793. content: '\e646';
  794. }
  795. .tui-icon-warning:before {
  796. content: '\e645';
  797. }
  798. .tui-icon-wealth:before {
  799. content: '\e644';
  800. }
  801. .tui-icon-wealth-fill:before {
  802. content: '\e643';
  803. }
  804. .tui-icon-weather:before {
  805. content: '\e642';
  806. }
  807. .tui-icon-wechat:before {
  808. content: '\e641';
  809. }
  810. .tui-icon-wifi:before {
  811. content: '\e640';
  812. }
  813. /* icon end */
  814. /*Button start*/
  815. .tui-btn-primary {
  816. background: #C74547 !important;
  817. color: #fff;
  818. }
  819. .tui-shadow-primary {
  820. box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
  821. }
  822. .tui-btn-danger {
  823. background: #eb0909 !important;
  824. color: #fff;
  825. }
  826. .tui-shadow-danger {
  827. box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
  828. }
  829. .tui-btn-warning {
  830. background: #fc872d !important;
  831. color: #fff;
  832. }
  833. .tui-shadow-warning {
  834. box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
  835. }
  836. .tui-btn-green {
  837. background: #35b06a !important;
  838. color: #fff;
  839. }
  840. .tui-shadow-green {
  841. box-shadow: 0 10rpx 14rpx 0 rgba(53, 176, 106, 0.2);
  842. }
  843. .tui-btn-blue {
  844. background: #007AFF !important;
  845. color: #fff;
  846. }
  847. .tui-shadow-blue {
  848. box-shadow: 0 10rpx 14rpx 0 rgba(0, 122, 255, 0.2);
  849. }
  850. .tui-btn-white {
  851. background: #fff !important;
  852. color: #333 !important;
  853. }
  854. .tui-btn-gray {
  855. background: #bfbfbf !important;
  856. color: #fff !important;
  857. }
  858. .tui-btn-black {
  859. background: #333 !important;
  860. color: #fff !important;
  861. }
  862. .tui-shadow-gray {
  863. box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
  864. }
  865. .tui-hover-gray {
  866. background: #f7f7f9 !important;
  867. }
  868. .tui-black-hover {
  869. background: #555 !important;
  870. color: #e5e5e5 !important;
  871. }
  872. /* button start
  873. * 宽高通过覆盖样式改变
  874. **/
  875. .tui-btn {
  876. width: 100%;
  877. height: 96rpx;
  878. line-height: 96rpx;
  879. font-size: 32rpx;
  880. position: relative;
  881. border: 0 !important;
  882. border-radius: 6rpx;
  883. padding-left: 0;
  884. padding-right: 0;
  885. overflow: visible;
  886. }
  887. .tui-btn-base {
  888. width: auto;
  889. /* #ifdef MP-ALIPAY */
  890. min-width: 200rpx;
  891. /* #endif */
  892. font-size: 30rpx;
  893. height: 70rpx;
  894. line-height: 70rpx;
  895. }
  896. .tui-btn-small {
  897. width: auto;
  898. /* #ifdef MP-ALIPAY */
  899. min-width: 140rpx;
  900. /* #endif */
  901. font-size: 30rpx;
  902. height: 60rpx;
  903. line-height: 60rpx;
  904. }
  905. .tui-btn::after {
  906. content: '';
  907. position: absolute;
  908. width: 200%;
  909. height: 200%;
  910. transform-origin: 0 0;
  911. transform: scale(0.5, 0.5) translateZ(0);
  912. box-sizing: border-box;
  913. left: 0;
  914. top: 0;
  915. border-radius: 12rpx;
  916. border: 0;
  917. }
  918. .tui-btn-white::after {
  919. border: 1rpx solid #bfbfbf;
  920. }
  921. .tui-white-hover {
  922. background: #e5e5e5 !important;
  923. color: #2e2e2e !important;
  924. }
  925. .tui-dark-disabled {
  926. opacity: 0.6 !important;
  927. color: #fafbfc !important;
  928. }
  929. .tui-dark-disabled-outline {
  930. opacity: 0.5 !important;
  931. }
  932. .tui-gray-disabled {
  933. background: #f3f3f3 !important;
  934. color: #919191 !important;
  935. box-shadow: none;
  936. }
  937. .tui-outline-hover {
  938. opacity: 0.5;
  939. }
  940. .tui-primary-hover {
  941. background: #a2383a !important;
  942. color: #e5e5e5 !important;
  943. }
  944. .tui-primary-outline::after {
  945. border: 1rpx solid #C74547 !important;
  946. }
  947. .tui-primary-outline {
  948. color: #C74547 !important;
  949. background: transparent;
  950. }
  951. .tui-danger-hover {
  952. background: #c80808 !important;
  953. color: #e5e5e5 !important;
  954. }
  955. .tui-danger-outline {
  956. color: #eb0909 !important;
  957. background: transparent;
  958. }
  959. .tui-danger-outline::after {
  960. border: 1rpx solid #eb0909 !important;
  961. }
  962. .tui-warning-hover {
  963. background: #d67326 !important;
  964. color: #e5e5e5 !important;
  965. }
  966. .tui-warning-outline {
  967. color: #fc872d !important;
  968. background: transparent;
  969. }
  970. .tui-warning-outline::after {
  971. border: 1px solid #fc872d !important;
  972. }
  973. .tui-green-hover {
  974. background: #2d965a !important;
  975. color: #e5e5e5 !important;
  976. }
  977. .tui-green-outline {
  978. color: #35b06a !important;
  979. background: transparent;
  980. }
  981. .tui-green-outline::after {
  982. border: 1rpx solid #35b06a !important;
  983. }
  984. .tui-blue-hover {
  985. background: #0062CC !important;
  986. color: #e5e5e5 !important;
  987. }
  988. .tui-blue-outline {
  989. color: #007AFF !important;
  990. background: transparent;
  991. }
  992. .tui-blue-outline::after {
  993. border: 1rpx solid #007AFF !important;
  994. }
  995. /* #ifndef APP-NVUE */
  996. .tui-btn-gradual {
  997. background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
  998. color: #fff !important;
  999. }
  1000. .tui-shadow-gradual {
  1001. box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
  1002. }
  1003. /* #endif */
  1004. .tui-gray-hover {
  1005. background: #a3a3a3 !important;
  1006. color: #898989;
  1007. }
  1008. /* #ifndef APP-NVUE */
  1009. .tui-gradual-hover {
  1010. background: linear-gradient(90deg, #d74620, #cd1225) !important;
  1011. color: #fff !important;
  1012. }
  1013. /* #endif */
  1014. .tui-gray-outline {
  1015. color: #999 !important;
  1016. background: transparent !important;
  1017. }
  1018. .tui-white-outline {
  1019. color: #fff !important;
  1020. background: transparent !important;
  1021. }
  1022. .tui-black-outline {
  1023. background: transparent !important;
  1024. color: #333 !important;
  1025. }
  1026. .tui-gray-outline::after {
  1027. border: 1rpx solid #ccc !important;
  1028. }
  1029. .tui-white-outline::after {
  1030. border: 1px solid #fff !important;
  1031. }
  1032. .tui-black-outline::after {
  1033. border: 1px solid #333 !important;
  1034. }
  1035. /*圆角 */
  1036. .tui-fillet {
  1037. border-radius: 50rpx;
  1038. }
  1039. .tui-btn-white.tui-fillet::after {
  1040. border-radius: 98rpx;
  1041. }
  1042. .tui-outline-fillet::after {
  1043. border-radius: 98rpx;
  1044. }
  1045. /*平角*/
  1046. .tui-rightAngle {
  1047. border-radius: 0;
  1048. }
  1049. .tui-btn-white.tui-rightAngle::after {
  1050. border-radius: 0;
  1051. }
  1052. .tui-outline-rightAngle::after {
  1053. border-radius: 0;
  1054. }
  1055. /*Button end*/
  1056. /*Tag start*/
  1057. .tui-tag {
  1058. padding: 16rpx 26rpx;
  1059. font-size: 28rpx;
  1060. display: flex;
  1061. align-items: center;
  1062. justify-content: center;
  1063. border-radius: 6rpx;
  1064. }
  1065. .tui-tag-outline {
  1066. position: relative;
  1067. background-color: none;
  1068. color: #C74547;
  1069. }
  1070. .tui-tag-outline::after {
  1071. content: '';
  1072. position: absolute;
  1073. width: 200%;
  1074. height: 200%;
  1075. -webkit-transform-origin: 0 0;
  1076. transform-origin: 0 0;
  1077. -webkit-transform: scale(0.5, 0.5);
  1078. transform: scale(0.5, 0.5);
  1079. -webkit-box-sizing: border-box;
  1080. box-sizing: border-box;
  1081. left: 0;
  1082. top: 0;
  1083. border-radius: 12rpx;
  1084. }
  1085. .tui-tag-fillet {
  1086. border-radius: 50rpx;
  1087. }
  1088. .tui-white.tui-tag-fillet::after {
  1089. border-radius: 80rpx;
  1090. }
  1091. .tui-tag-outline-fillet::after {
  1092. border-radius: 80rpx;
  1093. }
  1094. .tui-tag-fillet-left {
  1095. border-radius: 50rpx 0 0 50rpx;
  1096. }
  1097. .tui-tag-fillet-right {
  1098. border-radius: 0 50rpx 50rpx 0;
  1099. }
  1100. .tui-tag-fillet-left.tui-tag-outline::after {
  1101. border-radius: 100rpx 0 0 100rpx;
  1102. }
  1103. .tui-tag-fillet-right.tui-tag-outline::after {
  1104. border-radius: 0 100rpx 100rpx 0;
  1105. }
  1106. /*Tag end*/
  1107. /*Badge start*/
  1108. .tui-badge-dot {
  1109. height: 16rpx;
  1110. width: 16rpx;
  1111. border-radius: 50%;
  1112. }
  1113. .tui-badge {
  1114. font-size: 24rpx;
  1115. height: 36rpx;
  1116. min-width: 12rpx;
  1117. padding: 0 12rpx;
  1118. border-radius: 36rpx;
  1119. display: flex;
  1120. align-items: center;
  1121. justify-content: center;
  1122. z-index: 10;
  1123. }
  1124. .tui-badge-scale {
  1125. transform-origin: center center;
  1126. }
  1127. /*Badge end*/
  1128. /*List start*/
  1129. .tui-list-cell {
  1130. position: relative;
  1131. width: 100%;
  1132. padding: 26rpx 30rpx;
  1133. background-color: #fff;
  1134. box-sizing: border-box;
  1135. }
  1136. .tui-list-radius {
  1137. border-radius: 6rpx;
  1138. overflow: hidden;
  1139. }
  1140. .tui-cell-hover {
  1141. background-color: #f1f1f1 !important;
  1142. }
  1143. .tui-list-cell::after {
  1144. content: '';
  1145. position: absolute;
  1146. border-bottom: 1rpx solid #eaeef1;
  1147. -webkit-transform: scaleY(0.5) translateZ(0);
  1148. transform: scaleY(0.5) translateZ(0);
  1149. transform-origin: 0 100%;
  1150. bottom: 0;
  1151. right: 0;
  1152. left: 0;
  1153. }
  1154. .tui-line-left::after {
  1155. left: 30rpx !important;
  1156. }
  1157. .tui-line-right::after {
  1158. right: 30rpx !important;
  1159. }
  1160. .tui-cell-unlined::after {
  1161. border-bottom: 0 !important;
  1162. }
  1163. .tui-cell-arrow::before {
  1164. content: ' ';
  1165. height: 10px;
  1166. width: 10px;
  1167. border-width: 2px 2px 0 0;
  1168. border-color: #c0c0c0;
  1169. border-style: solid;
  1170. -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  1171. transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
  1172. position: absolute;
  1173. top: 50%;
  1174. margin-top: -6px;
  1175. right: 30rpx;
  1176. }
  1177. .tui-arrow-right::before {
  1178. right: 0 !important;
  1179. }
  1180. .tui-arrow-gray::before {
  1181. border-color: #666666 !important;
  1182. }
  1183. .tui-arrow-white::before {
  1184. border-color: #ffffff !important;
  1185. }
  1186. .tui-arrow-warning::before {
  1187. border-color: #ff7900 !important;
  1188. }
  1189. .tui-arrow-success::before {
  1190. border-color: #19be6b !important;
  1191. }
  1192. .tui-arrow-danger::before {
  1193. border-color: #eb0909 !important;
  1194. }
  1195. /*List end*/
  1196. /*Card start*/
  1197. .tui-card {
  1198. margin: 0 30rpx;
  1199. font-size: 28rpx;
  1200. background-color: #fff;
  1201. border-radius: 10rpx;
  1202. box-shadow: 0 0 10rpx #eee;
  1203. box-sizing: border-box;
  1204. overflow: hidden;
  1205. }
  1206. .tui-card-full {
  1207. margin: 0 !important;
  1208. border-radius: 0 !important;
  1209. }
  1210. .tui-card-full::after {
  1211. border-radius: 0 !important;
  1212. }
  1213. .tui-card-border {
  1214. position: relative;
  1215. box-shadow: none !important
  1216. }
  1217. .tui-card-border::after {
  1218. content: ' ';
  1219. position: absolute;
  1220. height: 200%;
  1221. width: 200%;
  1222. border: 1px solid #ddd;
  1223. transform-origin: 0 0;
  1224. -webkit-transform-origin: 0 0;
  1225. -webkit-transform: scale(0.5);
  1226. transform: scale(0.5);
  1227. left: 0;
  1228. top: 0;
  1229. border-radius: 20rpx;
  1230. box-sizing: border-box;
  1231. pointer-events: none;
  1232. }
  1233. .tui-card-header {
  1234. width: 100%;
  1235. padding: 20rpx;
  1236. display: flex;
  1237. align-items: center;
  1238. justify-content: space-between;
  1239. position: relative;
  1240. box-sizing: border-box;
  1241. overflow: hidden;
  1242. border-top-left-radius: 10rpx;
  1243. border-top-right-radius: 10rpx;
  1244. }
  1245. .tui-card-header::after {
  1246. content: '';
  1247. position: absolute;
  1248. border-bottom: 1rpx solid #eaeef1;
  1249. -webkit-transform: scaleY(0.5);
  1250. transform: scaleY(0.5);
  1251. bottom: 0;
  1252. right: 0;
  1253. left: 0;
  1254. pointer-events: none;
  1255. }
  1256. .tui-header-line::after {
  1257. border-bottom: 0 !important;
  1258. }
  1259. .tui-header-thumb {
  1260. height: 60rpx;
  1261. width: 60rpx;
  1262. vertical-align: middle;
  1263. margin-right: 20rpx;
  1264. border-radius: 6rpx;
  1265. }
  1266. .tui-thumb-circle {
  1267. border-radius: 50% !important;
  1268. }
  1269. .tui-header-title {
  1270. display: inline-block;
  1271. font-size: 30rpx;
  1272. color: #7a7a7a;
  1273. vertical-align: middle;
  1274. max-width: 460rpx;
  1275. overflow: hidden;
  1276. white-space: nowrap;
  1277. text-overflow: ellipsis;
  1278. }
  1279. .tui-header-right {
  1280. font-size: 24rpx;
  1281. color: #b2b2b2;
  1282. }
  1283. .tui-card-body {
  1284. font-size: 32rpx;
  1285. color: #262b3a;
  1286. box-sizing: border-box;
  1287. }
  1288. .tui-card-footer {
  1289. font-size: 28rpx;
  1290. color: #596d96;
  1291. border-bottom-left-radius: 10rpx;
  1292. border-bottom-right-radius: 10rpx;
  1293. box-sizing: border-box;
  1294. }
  1295. /*Card end*/
  1296. /*Grid start*/
  1297. .tui-grids {
  1298. width: 100%;
  1299. position: relative;
  1300. overflow: hidden;
  1301. }
  1302. .tui-grids::after {
  1303. content: " ";
  1304. position: absolute;
  1305. left: 0;
  1306. top: 0;
  1307. width: 100%;
  1308. height: 1px;
  1309. border-top: 1px solid #eaeef1;
  1310. -webkit-transform-origin: 0 0;
  1311. transform-origin: 0 0;
  1312. -webkit-transform: scaleY(0.5);
  1313. transform: scaleY(0.5);
  1314. }
  1315. .tui-border-top::after {
  1316. border-top: 0 !important;
  1317. }
  1318. .tui-grid {
  1319. position: relative;
  1320. padding: 40rpx 20rpx;
  1321. box-sizing: border-box;
  1322. background: #fff;
  1323. float: left;
  1324. }
  1325. .tui-grid-2 {
  1326. width: 50%;
  1327. }
  1328. .tui-grid-3 {
  1329. width: 33.333333333%;
  1330. }
  1331. .tui-grid-4 {
  1332. width: 25%;
  1333. padding: 30rpx 20rpx !important;
  1334. }
  1335. .tui-grid-5 {
  1336. width: 20%;
  1337. padding: 20rpx !important;
  1338. }
  1339. .tui-grid-2:nth-of-type(2n)::before {
  1340. width: 0;
  1341. border-right: 0;
  1342. }
  1343. .tui-grid-3:nth-of-type(3n)::before {
  1344. width: 0;
  1345. border-right: 0;
  1346. }
  1347. .tui-grid-4:nth-of-type(4n)::before {
  1348. width: 0;
  1349. border-right: 0;
  1350. }
  1351. .tui-grid-5:nth-of-type(5n)::before {
  1352. width: 0;
  1353. border-right: 0;
  1354. }
  1355. .tui-grid::before {
  1356. content: " ";
  1357. position: absolute;
  1358. right: 0;
  1359. top: 0;
  1360. width: 1px;
  1361. bottom: 0;
  1362. border-right: 1px solid #eaeef1;
  1363. -webkit-transform-origin: 100% 0;
  1364. transform-origin: 100% 0;
  1365. -webkit-transform: scaleX(0.5);
  1366. transform: scaleX(0.5);
  1367. }
  1368. .tui-grid::after {
  1369. content: " ";
  1370. position: absolute;
  1371. left: 0;
  1372. bottom: 0;
  1373. right: 0;
  1374. height: 1px;
  1375. border-bottom: 1px solid #eaeef1;
  1376. -webkit-transform-origin: 0 100%;
  1377. transform-origin: 0 100%;
  1378. -webkit-transform: scaleY(0.5);
  1379. transform: scaleY(0.5);
  1380. }
  1381. .tui-grid-bottom::after {
  1382. height: 0 !important;
  1383. border-bottom: 0 !important
  1384. }
  1385. .tui-grid-bg {
  1386. position: relative;
  1387. padding: 0;
  1388. width: 100%;
  1389. box-sizing: border-box;
  1390. }
  1391. .tui-item-hover {
  1392. background-color: #f7f7f9 !important;
  1393. }
  1394. /*Grid end*/
  1395. /*Loading start*/
  1396. .tui-loading-init {
  1397. min-width: 200rpx;
  1398. min-height: 200rpx;
  1399. max-width: 500rpx;
  1400. display: flex;
  1401. align-items: center;
  1402. justify-content: center;
  1403. flex-direction: column;
  1404. position: fixed;
  1405. top: 50%;
  1406. left: 50%;
  1407. transform: translate(-50%, -50%);
  1408. z-index: 9999;
  1409. font-size: 26rpx;
  1410. color: #fff;
  1411. background-color: rgba(0, 0, 0, 0.7);
  1412. border-radius: 10rpx;
  1413. }
  1414. .tui-loading-center {
  1415. width: 50rpx;
  1416. height: 50rpx;
  1417. border: 3px solid #fff;
  1418. border-radius: 50%;
  1419. margin: 0 6px;
  1420. display: inline-block;
  1421. vertical-align: middle;
  1422. clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
  1423. animation: rotate 1s linear infinite;
  1424. margin-bottom: 36rpx;
  1425. }
  1426. .tui-loadmore-tips {
  1427. text-align: center;
  1428. padding: 0 20rpx;
  1429. box-sizing: border-box;
  1430. }
  1431. @-webkit-keyframes rotate {
  1432. from {
  1433. transform: rotatez(0deg);
  1434. }
  1435. to {
  1436. transform: rotatez(360deg);
  1437. }
  1438. }
  1439. @keyframes rotate {
  1440. from {
  1441. transform: rotatez(0deg);
  1442. }
  1443. to {
  1444. transform: rotatez(360deg);
  1445. }
  1446. }
  1447. .tui-loadmore {
  1448. width: 48%;
  1449. margin: 1.5em auto;
  1450. line-height: 1.5em;
  1451. font-size: 24rpx;
  1452. text-align: center;
  1453. }
  1454. .tui-loading-1 {
  1455. margin: 0 5px;
  1456. width: 20px;
  1457. height: 20px;
  1458. display: inline-block;
  1459. vertical-align: middle;
  1460. -webkit-animation: a 1s steps(12) infinite;
  1461. animation: a 1s steps(12) infinite;
  1462. background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  1463. background-size: 100%;
  1464. }
  1465. @-webkit-keyframes a {
  1466. 0% {
  1467. -webkit-transform: rotate(0deg);
  1468. transform: rotate(0deg);
  1469. }
  1470. to {
  1471. -webkit-transform: rotate(1turn);
  1472. transform: rotate(1turn);
  1473. }
  1474. }
  1475. @keyframes a {
  1476. 0% {
  1477. -webkit-transform: rotate(0deg);
  1478. transform: rotate(0deg);
  1479. }
  1480. to {
  1481. -webkit-transform: rotate(1turn);
  1482. transform: rotate(1turn);
  1483. }
  1484. }
  1485. .tui-loadmore-tips {
  1486. display: inline-block;
  1487. vertical-align: middle;
  1488. }
  1489. .tui-loading-2 {
  1490. width: 28rpx;
  1491. height: 28rpx;
  1492. border: 1px solid #8f8d8e;
  1493. border-radius: 50%;
  1494. margin: 0 6px;
  1495. display: inline-block;
  1496. vertical-align: middle;
  1497. clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 0% 30%);
  1498. animation: rotate 1s linear infinite;
  1499. }
  1500. @-webkit-keyframes rotate {
  1501. from {
  1502. transform: rotatez(0deg);
  1503. }
  1504. to {
  1505. transform: rotatez(360deg);
  1506. }
  1507. }
  1508. @keyframes rotate {
  1509. from {
  1510. transform: rotatez(0deg);
  1511. }
  1512. to {
  1513. transform: rotatez(360deg);
  1514. }
  1515. }
  1516. .tui-loading-3 {
  1517. display: inline-block;
  1518. margin: 0 6px;
  1519. vertical-align: middle;
  1520. width: 28rpx;
  1521. height: 28rpx;
  1522. background: 0 0;
  1523. border-radius: 50%;
  1524. border: 2px solid;
  1525. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #8f8d8e;
  1526. animation: tui-rotate 0.7s linear infinite;
  1527. }
  1528. .tui-loading-3.tui-loading-primary {
  1529. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #C74547;
  1530. }
  1531. .tui-loading-3.tui-loading-green {
  1532. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #19be6b;
  1533. }
  1534. .tui-loading-3.tui-loading-orange {
  1535. border-color: #e5e5e5 #e5e5e5 #e5e5e5 #ff7900;
  1536. }
  1537. .tui-loading-3.tui-loading-red {
  1538. border-color: #ededed #ededed #ededed #ed3f14;
  1539. }
  1540. @-webkit-keyframes tui-rotate {
  1541. 0% {
  1542. transform: rotate(0);
  1543. }
  1544. 100% {
  1545. transform: rotate(360deg);
  1546. }
  1547. }
  1548. @keyframes tui-rotate {
  1549. 0% {
  1550. transform: rotate(0);
  1551. }
  1552. 100% {
  1553. transform: rotate(360deg);
  1554. }
  1555. }
  1556. .tui-loadmore-none {
  1557. width: 50%;
  1558. margin: 1.5em auto;
  1559. line-height: 1.5em;
  1560. font-size: 24rpx;
  1561. display: flex;
  1562. justify-content: center;
  1563. }
  1564. .tui-nomore {
  1565. width: 100%;
  1566. height: 100%;
  1567. position: relative;
  1568. display: flex;
  1569. justify-content: center;
  1570. margin-top: 10rpx;
  1571. padding-bottom: 6rpx;
  1572. }
  1573. .tui-nomore::before {
  1574. content: ' ';
  1575. position: absolute;
  1576. border-bottom: 1rpx solid #e5e5e5;
  1577. -webkit-transform: scaleY(0.5);
  1578. transform: scaleY(0.5);
  1579. width: 100%;
  1580. top: 18rpx;
  1581. left: 0;
  1582. }
  1583. .tui-nomore-text {
  1584. color: #999;
  1585. font-size: 24rpx;
  1586. text-align: center;
  1587. padding: 0 18rpx;
  1588. height: 36rpx;
  1589. line-height: 36rpx;
  1590. position: relative;
  1591. z-index: 1;
  1592. }
  1593. .tui-nomore-dot {
  1594. position: relative;
  1595. text-align: center;
  1596. -webkit-display: flex;
  1597. display: flex;
  1598. -webkit-justify-content: center;
  1599. justify-content: center;
  1600. margin-top: 10rpx;
  1601. padding-bottom: 6rpx;
  1602. }
  1603. .tui-nomore-dot::before {
  1604. content: '';
  1605. position: absolute;
  1606. border-bottom: 1rpx solid #e5e5e5;
  1607. -webkit-transform: scaleY(0.5);
  1608. transform: scaleY(0.5);
  1609. width: 360rpx;
  1610. top: 18rpx;
  1611. }
  1612. .tui-dot-text {
  1613. position: relative;
  1614. color: #e5e5e5;
  1615. font-size: 10px;
  1616. text-align: center;
  1617. width: 50rpx;
  1618. height: 36rpx;
  1619. line-height: 36rpx;
  1620. -webkit-transform: scale(0.8);
  1621. transform: scale(0.8);
  1622. -webkit-transform-origin: center center;
  1623. transform-origin: center center;
  1624. z-index: 1;
  1625. }
  1626. /*Loading end*/
  1627. /*Footer start*/
  1628. .tui-footer {
  1629. width: 100%;
  1630. overflow: hidden;
  1631. padding: 30rpx 24rpx;
  1632. box-sizing: border-box;
  1633. font-size: 24rpx;
  1634. color: #A7A7A7;
  1635. }
  1636. .tui-fixed {
  1637. position: fixed;
  1638. z-index: 9999;
  1639. /* #ifdef H5 */
  1640. bottom: 0;
  1641. /* #endif */
  1642. /* #ifndef H5 */
  1643. bottom: env(safe-area-inset-bottom);
  1644. /* #endif */
  1645. }
  1646. .tui-footer-link {
  1647. color: #596d96;
  1648. display: flex;
  1649. align-items: center;
  1650. justify-content: center;
  1651. font-size: 28rpx;
  1652. }
  1653. .tui-link {
  1654. position: relative;
  1655. padding: 0 18rpx;
  1656. line-height: 1;
  1657. }
  1658. .tui-link::before {
  1659. content: " ";
  1660. position: absolute;
  1661. right: 0;
  1662. top: 0;
  1663. width: 1px;
  1664. bottom: 0;
  1665. border-right: 1px solid #d3d3d3;
  1666. -webkit-transform-origin: 100% 0;
  1667. transform-origin: 100% 0;
  1668. -webkit-transform: scaleX(0.5);
  1669. transform: scaleX(0.5);
  1670. }
  1671. .tui-link:last-child::before {
  1672. border-right: 0 !important
  1673. }
  1674. .tui-link-hover {
  1675. opacity: 0.5
  1676. }
  1677. .tui-footer-copyright {
  1678. font-size: 24rpx;
  1679. color: #A7A7A7;
  1680. line-height: 1;
  1681. text-align: center;
  1682. padding-top: 16rpx
  1683. }
  1684. /*Footer end*/
  1685. /*layout start*/
  1686. /*形状*/
  1687. .tui-triangle {
  1688. border: 16rpx solid;
  1689. width: 0;
  1690. height: 0;
  1691. }
  1692. .tui-triangle-left {
  1693. border-color: transparent #5c8dff transparent transparent;
  1694. }
  1695. .tui-triangle-right {
  1696. border-color: transparent transparent transparent #5c8dff;
  1697. }
  1698. .tui-triangle-top {
  1699. border-color: transparent transparent #5c8dff transparent;
  1700. }
  1701. .tui-triangle-bottom {
  1702. border-color: #5c8dff transparent transparent transparent;
  1703. }
  1704. .tui-parallelogram {
  1705. width: 100rpx;
  1706. height: 50rpx;
  1707. transform: skew(-10deg);
  1708. background: #19be6b;
  1709. margin-left: 10rpx;
  1710. }
  1711. .tui-crescent {
  1712. width: 60rpx;
  1713. height: 60rpx;
  1714. border-radius: 50%;
  1715. box-shadow: 12rpx 12rpx 0 0 yellowgreen;
  1716. }
  1717. /*聊天框*/
  1718. .tui-chatbox {
  1719. max-width: 60%;
  1720. border-radius: 10rpx;
  1721. position: relative;
  1722. padding: 20rpx 26rpx;
  1723. font-size: 28rpx;
  1724. color: #fff;
  1725. /* word-break: break-all;
  1726. word-wrap: break-word; */
  1727. }
  1728. .tui-chatbox-left {
  1729. background: #5c8dff;
  1730. border: 1rpx solid #5c8dff;
  1731. display: inline-block;
  1732. }
  1733. .tui-chatbox-right {
  1734. background: #19be6b;
  1735. border: 1rpx solid #19be6b;
  1736. }
  1737. .tui-chatbox::before {
  1738. content: "";
  1739. position: absolute;
  1740. width: 0;
  1741. height: 0;
  1742. top: 20rpx;
  1743. border: 16rpx solid;
  1744. }
  1745. .tui-chatbox-left::before {
  1746. right: 100%;
  1747. border-color: transparent #5c8dff transparent transparent;
  1748. }
  1749. .tui-chatbox-right::before {
  1750. left: 100%;
  1751. border-color: transparent transparent transparent #19be6b;
  1752. }
  1753. /*checkbox 整体大小 */
  1754. /* #ifdef MP-WEIXIN */
  1755. .tui-checkbox .wx-checkbox-input {
  1756. width: 36rpx;
  1757. height: 36rpx;
  1758. border-radius: 50%;
  1759. margin: 0;
  1760. }
  1761. .tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  1762. background: #F82400;
  1763. width: 40rpx;
  1764. height: 40rpx;
  1765. border: none;
  1766. }
  1767. /* #endif */
  1768. /* #ifndef MP-WEIXIN */
  1769. >>>.tui-checkbox .uni-checkbox-input {
  1770. width: 36rpx;
  1771. height: 36rpx;
  1772. border-radius: 50% !important;
  1773. margin: 0;
  1774. border-color: #d1d1d1 !important;
  1775. }
  1776. >>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  1777. background: #F82400;
  1778. width: 40rpx;
  1779. height: 40rpx;
  1780. border: none;
  1781. }
  1782. /* #endif */
  1783. /*textarea*/
  1784. .tui-textarea-box {
  1785. border-radius: 4rpx;
  1786. height: 280rpx;
  1787. box-sizing: border-box;
  1788. padding: 20rpx 20rpx 0 20rpx;
  1789. position: relative;
  1790. }
  1791. .tui-textarea-box::after {
  1792. content: '';
  1793. position: absolute;
  1794. height: 200%;
  1795. width: 200%;
  1796. border: 1px solid #e6e6e6;
  1797. transform-origin: 0 0;
  1798. -webkit-transform-origin: 0 0;
  1799. -webkit-transform: scale(0.5);
  1800. transform: scale(0.5);
  1801. left: 0;
  1802. top: 0;
  1803. border-radius: 8rpx;
  1804. pointer-events: none;
  1805. }
  1806. .tui-textarea {
  1807. height: 210rpx;
  1808. width: 100%;
  1809. color: #666;
  1810. font-size: 28rpx;
  1811. z-index: 2;
  1812. }
  1813. .tui-phcolor-color {
  1814. color: #ccc !important;
  1815. }
  1816. .tui-textarea-counter {
  1817. font-size: 24rpx;
  1818. color: #999;
  1819. text-align: right;
  1820. height: 40rpx;
  1821. line-height: 40rpx;
  1822. padding-top: 4rpx;
  1823. }
  1824. /*Input输入框*/
  1825. .tui-input-item {
  1826. width: 100%;
  1827. display: flex;
  1828. align-items: center;
  1829. font-size: 32rpx;
  1830. }
  1831. .tui-input {
  1832. flex: 1;
  1833. font-size: 32rpx;
  1834. overflow: visible;
  1835. }
  1836. .tui-input-title {
  1837. min-width: 140rpx;
  1838. padding-right: 12rpx;
  1839. flex-shrink: 0;
  1840. }
  1841. .tui-phcolor {
  1842. color: #ccc;
  1843. font-size: 32rpx;
  1844. overflow: visible;
  1845. }
  1846. .tui-input-border {
  1847. /* border: 1rpx solid #eaeef1; */
  1848. padding: 20rpx 30rpx;
  1849. border-radius: 4rpx;
  1850. position: relative;
  1851. font-size: 32rpx;
  1852. }
  1853. .tui-input-border::after {
  1854. content: '';
  1855. position: absolute;
  1856. height: 200%;
  1857. width: 200%;
  1858. border: 1px solid #e6e6e6;
  1859. transform-origin: 0 0;
  1860. -webkit-transform-origin: 0 0;
  1861. -webkit-transform: scale(0.5);
  1862. transform: scale(0.5);
  1863. left: 0;
  1864. top: 0;
  1865. border-radius: 8rpx;
  1866. pointer-events: none;
  1867. }
  1868. .tui-text-right {
  1869. text-align: right;
  1870. }
  1871. /*上传*/
  1872. .tui-upload-box {
  1873. width: 100%;
  1874. display: flex;
  1875. flex-wrap: wrap;
  1876. }
  1877. .tui-upload-item {
  1878. width: 220rpx;
  1879. height: 220rpx;
  1880. position: relative;
  1881. margin-right: 20rpx;
  1882. margin-bottom: 20rpx;
  1883. }
  1884. .tui-upload-item:nth-of-type(3n) {
  1885. margin-right: 0;
  1886. }
  1887. .tui-upload-img {
  1888. width: 220rpx;
  1889. height: 220rpx;
  1890. display: block;
  1891. }
  1892. .tui-upload-del {
  1893. position: absolute;
  1894. right: -18rpx;
  1895. top: -18rpx;
  1896. display: flex;
  1897. align-items: center;
  1898. justify-content: center;
  1899. }
  1900. .tui-upload-add {
  1901. width: 220rpx;
  1902. height: 220rpx;
  1903. font-size: 68rpx;
  1904. font-weight: 100;
  1905. color: #888;
  1906. background-color: #F7F7F7;
  1907. display: flex;
  1908. align-items: center;
  1909. justify-content: center;
  1910. padding: 0;
  1911. }
  1912. /* 操作条*/
  1913. .tui-operation {
  1914. width: 100%;
  1915. height: 100rpx;
  1916. box-sizing: border-box;
  1917. overflow: hidden;
  1918. background: rgba(255, 255, 255, 0.9);
  1919. position: relative;
  1920. display: flex;
  1921. align-items: center;
  1922. justify-content: space-between;
  1923. }
  1924. .tui-operation::before {
  1925. content: '';
  1926. position: absolute;
  1927. top: 0px;
  1928. right: 0;
  1929. left: 0;
  1930. border-top: 1rpx solid #eaeef1;
  1931. -webkit-transform: scaleY(0.5);
  1932. transform: scaleY(0.5);
  1933. }
  1934. .tui-operation-left {
  1935. display: flex;
  1936. align-items: center;
  1937. }
  1938. .tui-operation-item {
  1939. flex: 1;
  1940. display: flex;
  1941. align-items: center;
  1942. justify-content: center;
  1943. flex-direction: column;
  1944. position: relative;
  1945. }
  1946. .tui-operation-text {
  1947. font-size: 22rpx;
  1948. color: #333;
  1949. }
  1950. .tui-operation-right {
  1951. flex: 1;
  1952. height: 100rpx;
  1953. box-sizing: border-box;
  1954. padding-top: 0;
  1955. }
  1956. .tui-relative {
  1957. position: relative;
  1958. }
  1959. .tui-btn-comment {
  1960. height: 64rpx;
  1961. width: 84%;
  1962. background: #ededed;
  1963. color: #999;
  1964. border-radius: 8rpx;
  1965. font-size: 28rpx;
  1966. display: flex;
  1967. align-items: center;
  1968. padding-left: 20rpx;
  1969. box-sizing: border-box;
  1970. padding-top: 0;
  1971. margin-left: 30rpx;
  1972. }
  1973. .tui-chat-operation {
  1974. background: #F6F6F6 !important;
  1975. padding-right: 18rpx;
  1976. box-sizing: border-box;
  1977. }
  1978. .tui-input-box {
  1979. width: 78%;
  1980. justify-content: flex-start;
  1981. }
  1982. .tui-chat-input {
  1983. background: #fff;
  1984. height: 72rpx;
  1985. border-radius: 6rpx;
  1986. padding-left: 20rpx;
  1987. padding-right: 20rpx;
  1988. flex: 1;
  1989. }
  1990. .tui-voice-icon {
  1991. margin-left: 20rpx;
  1992. margin-right: 20rpx
  1993. }
  1994. /*layout end*/