thorui.css 37 KB

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