thorui.css 37 KB

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