main.css 64 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032
  1. /*
  2. ColorUi for uniApp v2.1.6 | by 文晓港 2019-05-31 10:44:24
  3. 仅供学习交流,如作它用所承受的法律责任一概与作者无关
  4. *使用ColorUi开发扩展与插件时,请注明基于ColorUi开发
  5. (QQ交流群:240787041)
  6. */
  7. /* ==================
  8. 初始化
  9. ==================== */
  10. .body {
  11. background-image: url("https://feicheng.16fw.cn:1443/app_static/wuyuan/static/wenwu/wyj-jiemian1-BJ.png");
  12. background-size: 100% 100%;
  13. background-attachment: fixed;
  14. background-repeat: repeat-y;
  15. height: 100%;
  16. }
  17. .bottom_show {
  18. width: 95%;
  19. position: fixed;
  20. bottom: 0;
  21. left: 0;
  22. height: 120rpx;
  23. background-color: rgba(243, 243, 243, 1.0);
  24. border-radius: 30rpx;
  25. margin: 10px;
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. border: 1px solid #dedede;
  30. }
  31. .bottom_show .note {
  32. background-color: #ffffff;
  33. border-radius: 30rpx;
  34. width: 250rpx;
  35. height: 80rpx;
  36. font-size: 24rpx;
  37. padding: 10rpx;
  38. }
  39. page,
  40. body {
  41. font-size: 28upx;
  42. color: #333333;
  43. font-family: Helvetica Neue, Helvetica, sans-serif;
  44. height: 100%;
  45. }
  46. view,
  47. scroll-view,
  48. swiper,
  49. button,
  50. input,
  51. textarea,
  52. label,
  53. navigator,
  54. image {
  55. box-sizing: border-box;
  56. }
  57. .round {
  58. border-radius: 5000upx;
  59. }
  60. .radius {
  61. border-radius: 6upx;
  62. }
  63. /* ==================
  64. 图片
  65. ==================== */
  66. image {
  67. max-width: 100%;
  68. display: inline-block;
  69. position: relative;
  70. z-index: 0;
  71. }
  72. image.loading::before {
  73. content: "";
  74. background-color: #f5f5f5;
  75. display: block;
  76. position: absolute;
  77. width: 100%;
  78. height: 100%;
  79. z-index: -2;
  80. }
  81. image.loading::after {
  82. content: "\e7f1";
  83. font-family: "cuIcon";
  84. position: absolute;
  85. top: 0;
  86. left: 0;
  87. width: 32upx;
  88. height: 32upx;
  89. line-height: 32upx;
  90. right: 0;
  91. bottom: 0;
  92. z-index: -1;
  93. font-size: 32upx;
  94. margin: auto;
  95. color: #ccc;
  96. -webkit-animation: cuIcon-spin 2s infinite linear;
  97. animation: cuIcon-spin 2s infinite linear;
  98. display: block;
  99. }
  100. .response {
  101. width: 100%;
  102. }
  103. /* ==================
  104. 开关
  105. ==================== */
  106. switch,
  107. checkbox,
  108. radio {
  109. position: relative;
  110. }
  111. switch::after,
  112. switch::before {
  113. font-family: "cuIcon";
  114. content: "\e645";
  115. position: absolute;
  116. color: #ffffff !important;
  117. top: 0%;
  118. left: 0upx;
  119. font-size: 26upx;
  120. line-height: 26px;
  121. width: 50%;
  122. text-align: center;
  123. pointer-events: none;
  124. transform: scale(0, 0);
  125. transition: all 0.3s ease-in-out 0s;
  126. z-index: 9;
  127. bottom: 0;
  128. height: 26px;
  129. margin: auto;
  130. }
  131. switch::before {
  132. content: "\e646";
  133. right: 0;
  134. transform: scale(1, 1);
  135. left: auto;
  136. }
  137. switch[checked]::after,
  138. switch.checked::after {
  139. transform: scale(1, 1);
  140. }
  141. switch[checked]::before,
  142. switch.checked::before {
  143. transform: scale(0, 0);
  144. }
  145. /* #ifndef MP-ALIPAY */
  146. radio::before,
  147. checkbox::before {
  148. font-family: "cuIcon";
  149. content: "\e645";
  150. position: absolute;
  151. color: #ffffff !important;
  152. top: 50%;
  153. margin-top: -8px;
  154. right: 5px;
  155. font-size: 32upx;
  156. line-height: 16px;
  157. pointer-events: none;
  158. transform: scale(1, 1);
  159. transition: all 0.3s ease-in-out 0s;
  160. z-index: 9;
  161. }
  162. radio .wx-radio-input,
  163. checkbox .wx-checkbox-input,
  164. radio .uni-radio-input,
  165. checkbox .uni-checkbox-input {
  166. margin: 0;
  167. width: 24px;
  168. height: 24px;
  169. }
  170. checkbox.round .wx-checkbox-input,
  171. checkbox.round .uni-checkbox-input {
  172. border-radius: 100upx;
  173. }
  174. /* #endif */
  175. switch[checked]::before {
  176. transform: scale(0, 0);
  177. }
  178. switch .wx-switch-input,
  179. switch .uni-switch-input {
  180. border: none;
  181. padding: 0 24px;
  182. width: 48px;
  183. height: 26px;
  184. margin: 0;
  185. border-radius: 100upx;
  186. }
  187. switch .wx-switch-input:not([class*="bg-"]),
  188. switch .uni-switch-input:not([class*="bg-"]) {
  189. background: #8799a3;
  190. }
  191. switch .wx-switch-input::after,
  192. switch .uni-switch-input::after {
  193. margin: auto;
  194. width: 26px;
  195. height: 26px;
  196. border-radius: 100upx;
  197. left: 0upx;
  198. top: 0upx;
  199. bottom: 0upx;
  200. position: absolute;
  201. transform: scale(0.9, 0.9);
  202. transition: all 0.1s ease-in-out 0s;
  203. }
  204. switch .wx-switch-input.wx-switch-input-checked::after,
  205. switch .uni-switch-input.uni-switch-input-checked::after {
  206. margin: auto;
  207. left: 22px;
  208. box-shadow: none;
  209. transform: scale(0.9, 0.9);
  210. }
  211. radio-group {
  212. display: inline-block;
  213. }
  214. switch.radius .wx-switch-input::after,
  215. switch.radius .wx-switch-input,
  216. switch.radius .wx-switch-input::before,
  217. switch.radius .uni-switch-input::after,
  218. switch.radius .uni-switch-input,
  219. switch.radius .uni-switch-input::before {
  220. border-radius: 10upx;
  221. }
  222. switch .wx-switch-input::before,
  223. radio.radio::before,
  224. checkbox .wx-checkbox-input::before,
  225. radio .wx-radio-input::before,
  226. switch .uni-switch-input::before,
  227. radio.radio::before,
  228. checkbox .uni-checkbox-input::before,
  229. radio .uni-radio-input::before {
  230. display: none;
  231. }
  232. radio.radio[checked]::after,
  233. radio.radio .uni-radio-input-checked::after {
  234. content: "";
  235. background-color: transparent;
  236. display: block;
  237. position: absolute;
  238. width: 8px;
  239. height: 8px;
  240. z-index: 999;
  241. top: 0upx;
  242. left: 0upx;
  243. right: 0;
  244. bottom: 0;
  245. margin: auto;
  246. border-radius: 200upx;
  247. /* #ifndef MP */
  248. border: 7px solid #ffffff !important;
  249. /* #endif */
  250. /* #ifdef MP */
  251. border: 8px solid #ffffff !important;
  252. /* #endif */
  253. }
  254. .switch-sex::after {
  255. content: "\e71c";
  256. }
  257. .switch-sex::before {
  258. content: "\e71a";
  259. }
  260. .switch-sex .wx-switch-input,
  261. .switch-sex .uni-switch-input {
  262. background: #4a85b2 !important;
  263. border-color: #4a85b2 !important;
  264. }
  265. .switch-sex[checked] .wx-switch-input,
  266. .switch-sex.checked .uni-switch-input {
  267. background: #0081ff !important;
  268. border-color: #0081ff !important;
  269. }
  270. switch.red[checked] .wx-switch-input.wx-switch-input-checked,
  271. checkbox.red[checked] .wx-checkbox-input,
  272. radio.red[checked] .wx-radio-input,
  273. switch.red.checked .uni-switch-input.uni-switch-input-checked,
  274. checkbox.red.checked .uni-checkbox-input,
  275. radio.red.checked .uni-radio-input {
  276. background-color: #e54d42 !important;
  277. border-color: #e54d42 !important;
  278. color: #ffffff !important;
  279. }
  280. switch.orange[checked] .wx-switch-input,
  281. checkbox.orange[checked] .wx-checkbox-input,
  282. radio.orange[checked] .wx-radio-input,
  283. switch.orange.checked .uni-switch-input,
  284. checkbox.orange.checked .uni-checkbox-input,
  285. radio.orange.checked .uni-radio-input {
  286. background-color: #f37b1d !important;
  287. border-color: #f37b1d !important;
  288. color: #ffffff !important;
  289. }
  290. switch.yellow[checked] .wx-switch-input,
  291. checkbox.yellow[checked] .wx-checkbox-input,
  292. radio.yellow[checked] .wx-radio-input,
  293. switch.yellow.checked .uni-switch-input,
  294. checkbox.yellow.checked .uni-checkbox-input,
  295. radio.yellow.checked .uni-radio-input {
  296. background-color: #fbbd08 !important;
  297. border-color: #fbbd08 !important;
  298. color: #333333 !important;
  299. }
  300. switch.olive[checked] .wx-switch-input,
  301. checkbox.olive[checked] .wx-checkbox-input,
  302. radio.olive[checked] .wx-radio-input,
  303. switch.olive.checked .uni-switch-input,
  304. checkbox.olive.checked .uni-checkbox-input,
  305. radio.olive.checked .uni-radio-input {
  306. background-color: #8dc63f !important;
  307. border-color: #8dc63f !important;
  308. color: #ffffff !important;
  309. }
  310. switch.green[checked] .wx-switch-input,
  311. switch[checked] .wx-switch-input,
  312. checkbox.green[checked] .wx-checkbox-input,
  313. checkbox[checked] .wx-checkbox-input,
  314. radio.green[checked] .wx-radio-input,
  315. radio[checked] .wx-radio-input,
  316. switch.green.checked .uni-switch-input,
  317. switch.checked .uni-switch-input,
  318. checkbox.green.checked .uni-checkbox-input,
  319. checkbox.checked .uni-checkbox-input,
  320. radio.green.checked .uni-radio-input,
  321. radio.checked .uni-radio-input {
  322. background-color: #39b54a !important;
  323. border-color: #39b54a !important;
  324. color: #ffffff !important;
  325. border-color: #39B54A !important;
  326. }
  327. switch.cyan[checked] .wx-switch-input,
  328. checkbox.cyan[checked] .wx-checkbox-input,
  329. radio.cyan[checked] .wx-radio-input,
  330. switch.cyan.checked .uni-switch-input,
  331. checkbox.cyan.checked .uni-checkbox-input,
  332. radio.cyan.checked .uni-radio-input {
  333. background-color: #1cbbb4 !important;
  334. border-color: #1cbbb4 !important;
  335. color: #ffffff !important;
  336. }
  337. switch.blue[checked] .wx-switch-input,
  338. checkbox.blue[checked] .wx-checkbox-input,
  339. radio.blue[checked] .wx-radio-input,
  340. switch.blue.checked .uni-switch-input,
  341. checkbox.blue.checked .uni-checkbox-input,
  342. radio.blue.checked .uni-radio-input {
  343. background-color: #0081ff !important;
  344. border-color: #0081ff !important;
  345. color: #ffffff !important;
  346. }
  347. switch.purple[checked] .wx-switch-input,
  348. checkbox.purple[checked] .wx-checkbox-input,
  349. radio.purple[checked] .wx-radio-input,
  350. switch.purple.checked .uni-switch-input,
  351. checkbox.purple.checked .uni-checkbox-input,
  352. radio.purple.checked .uni-radio-input {
  353. background-color: #6739b6 !important;
  354. border-color: #6739b6 !important;
  355. color: #ffffff !important;
  356. }
  357. switch.mauve[checked] .wx-switch-input,
  358. checkbox.mauve[checked] .wx-checkbox-input,
  359. radio.mauve[checked] .wx-radio-input,
  360. switch.mauve.checked .uni-switch-input,
  361. checkbox.mauve.checked .uni-checkbox-input,
  362. radio.mauve.checked .uni-radio-input {
  363. background-color: #9c26b0 !important;
  364. border-color: #9c26b0 !important;
  365. color: #ffffff !important;
  366. }
  367. switch.pink[checked] .wx-switch-input,
  368. checkbox.pink[checked] .wx-checkbox-input,
  369. radio.pink[checked] .wx-radio-input,
  370. switch.pink.checked .uni-switch-input,
  371. checkbox.pink.checked .uni-checkbox-input,
  372. radio.pink.checked .uni-radio-input {
  373. background-color: #e03997 !important;
  374. border-color: #e03997 !important;
  375. color: #ffffff !important;
  376. }
  377. switch.brown[checked] .wx-switch-input,
  378. checkbox.brown[checked] .wx-checkbox-input,
  379. radio.brown[checked] .wx-radio-input,
  380. switch.brown.checked .uni-switch-input,
  381. checkbox.brown.checked .uni-checkbox-input,
  382. radio.brown.checked .uni-radio-input {
  383. background-color: #a5673f !important;
  384. border-color: #a5673f !important;
  385. color: #ffffff !important;
  386. }
  387. switch.grey[checked] .wx-switch-input,
  388. checkbox.grey[checked] .wx-checkbox-input,
  389. radio.grey[checked] .wx-radio-input,
  390. switch.grey.checked .uni-switch-input,
  391. checkbox.grey.checked .uni-checkbox-input,
  392. radio.grey.checked .uni-radio-input {
  393. background-color: #8799a3 !important;
  394. border-color: #8799a3 !important;
  395. color: #ffffff !important;
  396. }
  397. switch.gray[checked] .wx-switch-input,
  398. checkbox.gray[checked] .wx-checkbox-input,
  399. radio.gray[checked] .wx-radio-input,
  400. switch.gray.checked .uni-switch-input,
  401. checkbox.gray.checked .uni-checkbox-input,
  402. radio.gray.checked .uni-radio-input {
  403. background-color: #f0f0f0 !important;
  404. border-color: #f0f0f0 !important;
  405. color: #333333 !important;
  406. }
  407. switch.black[checked] .wx-switch-input,
  408. checkbox.black[checked] .wx-checkbox-input,
  409. radio.black[checked] .wx-radio-input,
  410. switch.black.checked .uni-switch-input,
  411. checkbox.black.checked .uni-checkbox-input,
  412. radio.black.checked .uni-radio-input {
  413. background-color: #333333 !important;
  414. border-color: #333333 !important;
  415. color: #ffffff !important;
  416. }
  417. switch.white[checked] .wx-switch-input,
  418. checkbox.white[checked] .wx-checkbox-input,
  419. radio.white[checked] .wx-radio-input,
  420. switch.white.checked .uni-switch-input,
  421. checkbox.white.checked .uni-checkbox-input,
  422. radio.white.checked .uni-radio-input {
  423. background-color: #ffffff !important;
  424. border-color: #ffffff !important;
  425. color: #333333 !important;
  426. }
  427. /* ==================
  428. 边框
  429. ==================== */
  430. /* -- 实线 -- */
  431. .solid,
  432. .solid-top,
  433. .solid-right,
  434. .solid-bottom,
  435. .solid-left,
  436. .solids,
  437. .solids-top,
  438. .solids-right,
  439. .solids-bottom,
  440. .solids-left,
  441. .dashed,
  442. .dashed-top,
  443. .dashed-right,
  444. .dashed-bottom,
  445. .dashed-left {
  446. position: relative;
  447. }
  448. .solid::after,
  449. .solid-top::after,
  450. .solid-right::after,
  451. .solid-bottom::after,
  452. .solid-left::after,
  453. .solids::after,
  454. .solids-top::after,
  455. .solids-right::after,
  456. .solids-bottom::after,
  457. .solids-left::after,
  458. .dashed::after,
  459. .dashed-top::after,
  460. .dashed-right::after,
  461. .dashed-bottom::after,
  462. .dashed-left::after {
  463. content: " ";
  464. width: 200%;
  465. height: 200%;
  466. position: absolute;
  467. top: 0;
  468. left: 0;
  469. border-radius: inherit;
  470. transform: scale(0.5);
  471. transform-origin: 0 0;
  472. pointer-events: none;
  473. box-sizing: border-box;
  474. }
  475. .solid::after {
  476. border: 1upx solid rgba(0, 0, 0, 0.1);
  477. }
  478. .solid-top::after {
  479. border-top: 1upx solid rgba(0, 0, 0, 0.1);
  480. }
  481. .solid-right::after {
  482. border-right: 1upx solid rgba(0, 0, 0, 0.1);
  483. }
  484. .solid-bottom::after {
  485. border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
  486. }
  487. .solid-left::after {
  488. border-left: 1upx solid rgba(0, 0, 0, 0.1);
  489. }
  490. .solids::after {
  491. border: 8upx solid #eee;
  492. }
  493. .solids-top::after {
  494. border-top: 8upx solid #eee;
  495. }
  496. .solids-right::after {
  497. border-right: 8upx solid #eee;
  498. }
  499. .solids-bottom::after {
  500. border-bottom: 8upx solid #eee;
  501. }
  502. .solids-left::after {
  503. border-left: 8upx solid #eee;
  504. }
  505. /* -- 虚线 -- */
  506. .dashed::after {
  507. border: 1upx dashed #ddd;
  508. }
  509. .dashed-top::after {
  510. border-top: 1upx dashed #ddd;
  511. }
  512. .dashed-right::after {
  513. border-right: 1upx dashed #ddd;
  514. }
  515. .dashed-bottom::after {
  516. border-bottom: 1upx dashed #ddd;
  517. }
  518. .dashed-left::after {
  519. border-left: 1upx dashed #ddd;
  520. }
  521. /* -- 阴影 -- */
  522. .shadow[class*='white'] {
  523. --ShadowSize: 0 1upx 6upx;
  524. }
  525. .shadow-lg {
  526. --ShadowSize: 0upx 40upx 100upx 0upx;
  527. }
  528. .shadow-warp {
  529. position: relative;
  530. box-shadow: 0 0 10upx rgba(0, 0, 0, 0.1);
  531. }
  532. .shadow-warp:before,
  533. .shadow-warp:after {
  534. position: absolute;
  535. content: "";
  536. top: 20upx;
  537. bottom: 30upx;
  538. left: 20upx;
  539. width: 50%;
  540. box-shadow: 0 30upx 20upx rgba(0, 0, 0, 0.2);
  541. transform: rotate(-3deg);
  542. z-index: -1;
  543. }
  544. .shadow-warp:after {
  545. right: 20upx;
  546. left: auto;
  547. transform: rotate(3deg);
  548. }
  549. .shadow-blur {
  550. position: relative;
  551. }
  552. .shadow-blur::before {
  553. content: "";
  554. display: block;
  555. background: inherit;
  556. filter: blur(10upx);
  557. position: absolute;
  558. width: 100%;
  559. height: 100%;
  560. top: 10upx;
  561. left: 10upx;
  562. z-index: -1;
  563. opacity: 0.4;
  564. transform-origin: 0 0;
  565. border-radius: inherit;
  566. transform: scale(1, 1);
  567. }
  568. /* ==================
  569. 按钮
  570. ==================== */
  571. .cu-btn {
  572. position: relative;
  573. border: 0upx;
  574. display: inline-flex;
  575. align-items: center;
  576. justify-content: center;
  577. box-sizing: border-box;
  578. padding: 0 30upx;
  579. font-size: 28upx;
  580. height: 64upx;
  581. line-height: 1;
  582. text-align: center;
  583. text-decoration: none;
  584. overflow: visible;
  585. margin-left: initial;
  586. transform: translate(0upx, 0upx);
  587. margin-right: initial;
  588. }
  589. .cu-btn::after {
  590. display: none;
  591. }
  592. .cu-btn:not([class*="bg-"]) {
  593. background-color: #f0f0f0;
  594. }
  595. .cu-btn[class*="line"] {
  596. background-color: transparent;
  597. }
  598. .cu-btn[class*="line"]::after {
  599. content: " ";
  600. display: block;
  601. width: 200%;
  602. height: 200%;
  603. position: absolute;
  604. top: 0;
  605. left: 0;
  606. border: 1upx solid currentColor;
  607. transform: scale(0.5);
  608. transform-origin: 0 0;
  609. box-sizing: border-box;
  610. border-radius: 12upx;
  611. z-index: 1;
  612. pointer-events: none;
  613. }
  614. .cu-btn.round[class*="line"]::after {
  615. border-radius: 1000upx;
  616. }
  617. .cu-btn[class*="lines"]::after {
  618. border: 6upx solid currentColor;
  619. }
  620. .cu-btn[class*="bg-"]::after {
  621. display: none;
  622. }
  623. .cu-btn.sm {
  624. padding: 0 20upx;
  625. font-size: 20upx;
  626. height: 48upx;
  627. }
  628. .cu-btn.lg {
  629. padding: 0 40upx;
  630. font-size: 32upx;
  631. height: 80upx;
  632. }
  633. .cu-btn.cuIcon.sm {
  634. width: 48upx;
  635. height: 48upx;
  636. }
  637. .cu-btn.cuIcon {
  638. width: 64upx;
  639. height: 64upx;
  640. border-radius: 500upx;
  641. padding: 0;
  642. }
  643. button.cuIcon.lg {
  644. width: 80upx;
  645. height: 80upx;
  646. }
  647. .cu-btn.shadow-blur::before {
  648. top: 4upx;
  649. left: 4upx;
  650. filter: blur(6upx);
  651. opacity: 0.6;
  652. }
  653. .cu-btn.button-hover {
  654. transform: translate(1upx, 1upx);
  655. }
  656. .block {
  657. display: block;
  658. }
  659. .cu-btn.block {
  660. display: flex;
  661. }
  662. .cu-btn[disabled] {
  663. opacity: 0.6;
  664. color: #ffffff;
  665. }
  666. /* ==================
  667. 徽章
  668. ==================== */
  669. .cu-tag {
  670. font-size: 24upx;
  671. vertical-align: middle;
  672. position: relative;
  673. display: inline-flex;
  674. align-items: center;
  675. justify-content: center;
  676. box-sizing: border-box;
  677. padding: 0upx 16upx;
  678. height: 48upx;
  679. font-family: Helvetica Neue, Helvetica, sans-serif;
  680. white-space: nowrap;
  681. }
  682. .cu-tag:not([class*="bg"]):not([class*="line"]) {
  683. background-color: #f1f1f1;
  684. }
  685. .cu-tag[class*="line-"]::after {
  686. content: " ";
  687. width: 200%;
  688. height: 200%;
  689. position: absolute;
  690. top: 0;
  691. left: 0;
  692. border: 1upx solid currentColor;
  693. transform: scale(0.5);
  694. transform-origin: 0 0;
  695. box-sizing: border-box;
  696. border-radius: inherit;
  697. z-index: 1;
  698. pointer-events: none;
  699. }
  700. .cu-tag.radius[class*="line"]::after {
  701. border-radius: 12upx;
  702. }
  703. .cu-tag.round[class*="line"]::after {
  704. border-radius: 1000upx;
  705. }
  706. .cu-tag[class*="line-"]::after {
  707. border-radius: 0;
  708. }
  709. .cu-tag+.cu-tag {
  710. margin-left: 10upx;
  711. }
  712. .cu-tag.sm {
  713. font-size: 20upx;
  714. padding: 0upx 12upx;
  715. height: 32upx;
  716. }
  717. .cu-capsule {
  718. display: inline-flex;
  719. vertical-align: middle;
  720. }
  721. .cu-capsule+.cu-capsule {
  722. margin-left: 10upx;
  723. }
  724. .cu-capsule .cu-tag {
  725. margin: 0;
  726. }
  727. .cu-capsule .cu-tag[class*="line-"]:last-child::after {
  728. border-left: 0upx solid transparent;
  729. }
  730. .cu-capsule .cu-tag[class*="line-"]:first-child::after {
  731. border-right: 0upx solid transparent;
  732. }
  733. .cu-capsule.radius .cu-tag:first-child {
  734. border-top-left-radius: 6upx;
  735. border-bottom-left-radius: 6upx;
  736. }
  737. .cu-capsule.radius .cu-tag:last-child::after,
  738. .cu-capsule.radius .cu-tag[class*="line-"] {
  739. border-top-right-radius: 12upx;
  740. border-bottom-right-radius: 12upx;
  741. }
  742. .cu-capsule.round .cu-tag:first-child {
  743. border-top-left-radius: 200upx;
  744. border-bottom-left-radius: 200upx;
  745. text-indent: 4upx;
  746. }
  747. .cu-capsule.round .cu-tag:last-child::after,
  748. .cu-capsule.round .cu-tag:last-child {
  749. border-top-right-radius: 200upx;
  750. border-bottom-right-radius: 200upx;
  751. text-indent: -4upx;
  752. }
  753. .cu-tag.badge {
  754. border-radius: 200upx;
  755. position: absolute;
  756. top: -10upx;
  757. right: -10upx;
  758. font-size: 20upx;
  759. padding: 0upx 10upx;
  760. height: 28upx;
  761. color: #ffffff;
  762. }
  763. .cu-tag.badge:not([class*="bg-"]) {
  764. background-color: #dd514c;
  765. }
  766. .cu-tag:empty:not([class*="cuIcon-"]) {
  767. padding: 0upx;
  768. width: 16upx;
  769. height: 16upx;
  770. top: -4upx;
  771. right: -4upx;
  772. }
  773. .cu-tag[class*="cuIcon-"] {
  774. width: 32upx;
  775. height: 32upx;
  776. top: -4upx;
  777. right: -4upx;
  778. }
  779. /* ==================
  780. 头像
  781. ==================== */
  782. .cu-avatar {
  783. font-variant: small-caps;
  784. margin: 0;
  785. padding: 0;
  786. display: inline-flex;
  787. text-align: center;
  788. justify-content: center;
  789. align-items: center;
  790. background-color: #ccc;
  791. color: #ffffff;
  792. white-space: nowrap;
  793. position: relative;
  794. width: 64upx;
  795. height: 64upx;
  796. background-size: cover;
  797. background-position: center;
  798. vertical-align: middle;
  799. font-size: 1.5em;
  800. }
  801. .cu-avatar.sm {
  802. width: 48upx;
  803. height: 48upx;
  804. font-size: 1em;
  805. }
  806. .cu-avatar.lg {
  807. width: 96upx;
  808. height: 96upx;
  809. font-size: 2em;
  810. }
  811. .cu-avatar.xl {
  812. width: 128upx;
  813. height: 128upx;
  814. font-size: 2.5em;
  815. }
  816. .cu-avatar .avatar-text {
  817. font-size: 0.4em;
  818. }
  819. .cu-avatar-group {
  820. direction: rtl;
  821. unicode-bidi: bidi-override;
  822. padding: 0 10upx 0 40upx;
  823. display: inline-block;
  824. }
  825. .cu-avatar-group .cu-avatar {
  826. margin-left: -30upx;
  827. border: 4upx solid #f1f1f1;
  828. vertical-align: middle;
  829. }
  830. .cu-avatar-group .cu-avatar.sm {
  831. margin-left: -20upx;
  832. border: 1upx solid #f1f1f1;
  833. }
  834. /* ==================
  835. 进度条
  836. ==================== */
  837. .cu-progress {
  838. overflow: hidden;
  839. height: 28upx;
  840. background-color: #ebeef5;
  841. display: inline-flex;
  842. align-items: center;
  843. width: 100%;
  844. }
  845. .cu-progress+view,
  846. .cu-progress+text {
  847. line-height: 1;
  848. }
  849. .cu-progress.xs {
  850. height: 10upx;
  851. }
  852. .cu-progress.sm {
  853. height: 20upx;
  854. }
  855. .cu-progress view {
  856. width: 0;
  857. height: 100%;
  858. align-items: center;
  859. display: flex;
  860. justify-items: flex-end;
  861. justify-content: space-around;
  862. font-size: 20upx;
  863. color: #ffffff;
  864. transition: width 0.6s ease;
  865. }
  866. .cu-progress text {
  867. align-items: center;
  868. display: flex;
  869. font-size: 20upx;
  870. color: #333333;
  871. text-indent: 10upx;
  872. }
  873. .cu-progress.text-progress {
  874. padding-right: 60upx;
  875. }
  876. .cu-progress.striped view {
  877. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  878. background-size: 72upx 72upx;
  879. }
  880. .cu-progress.active view {
  881. animation: progress-stripes 2s linear infinite;
  882. }
  883. @keyframes progress-stripes {
  884. from {
  885. background-position: 72upx 0;
  886. }
  887. to {
  888. background-position: 0 0;
  889. }
  890. }
  891. /* ==================
  892. 加载
  893. ==================== */
  894. .cu-load {
  895. display: block;
  896. line-height: 3em;
  897. text-align: center;
  898. }
  899. .cu-load::before {
  900. font-family: "cuIcon";
  901. display: inline-block;
  902. margin-right: 6upx;
  903. }
  904. .cu-load.loading::before {
  905. content: "\e67a";
  906. animation: cuIcon-spin 2s infinite linear;
  907. }
  908. .cu-load.loading::after {
  909. content: "加载中...";
  910. }
  911. .cu-load.over::before {
  912. content: "\e64a";
  913. }
  914. .cu-load.over::after {
  915. content: "没有更多了";
  916. }
  917. .cu-load.erro::before {
  918. content: "\e658";
  919. }
  920. .cu-load.erro::after {
  921. content: "加载失败";
  922. }
  923. .cu-load.load-cuIcon::before {
  924. font-size: 32upx;
  925. }
  926. .cu-load.load-cuIcon::after {
  927. display: none;
  928. }
  929. .cu-load.load-cuIcon.over {
  930. display: none;
  931. }
  932. .cu-load.load-modal {
  933. position: fixed;
  934. top: 0;
  935. right: 0;
  936. bottom: 140upx;
  937. left: 0;
  938. margin: auto;
  939. width: 260upx;
  940. height: 260upx;
  941. background-color: #ffffff;
  942. border-radius: 10upx;
  943. box-shadow: 0 0 0upx 2000upx rgba(0, 0, 0, 0.5);
  944. display: flex;
  945. align-items: center;
  946. flex-direction: column;
  947. justify-content: center;
  948. font-size: 28upx;
  949. z-index: 9999;
  950. line-height: 2.4em;
  951. }
  952. .cu-load.load-modal [class*="cuIcon-"] {
  953. font-size: 60upx;
  954. }
  955. .cu-load.load-modal image {
  956. width: 70upx;
  957. height: 70upx;
  958. }
  959. .cu-load.load-modal::after {
  960. content: "";
  961. position: absolute;
  962. background-color: #ffffff;
  963. border-radius: 50%;
  964. width: 200upx;
  965. height: 200upx;
  966. font-size: 10px;
  967. border-top: 6upx solid rgba(0, 0, 0, 0.05);
  968. border-right: 6upx solid rgba(0, 0, 0, 0.05);
  969. border-bottom: 6upx solid rgba(0, 0, 0, 0.05);
  970. border-left: 6upx solid #f37b1d;
  971. animation: cuIcon-spin 1s infinite linear;
  972. z-index: -1;
  973. }
  974. .load-progress {
  975. pointer-events: none;
  976. top: 0;
  977. position: fixed;
  978. width: 100%;
  979. left: 0;
  980. z-index: 2000;
  981. }
  982. .load-progress.hide {
  983. display: none;
  984. }
  985. .load-progress .load-progress-bar {
  986. position: relative;
  987. width: 100%;
  988. height: 4upx;
  989. overflow: hidden;
  990. transition: all 200ms ease 0s;
  991. }
  992. .load-progress .load-progress-spinner {
  993. position: absolute;
  994. top: 10upx;
  995. right: 10upx;
  996. z-index: 2000;
  997. display: block;
  998. }
  999. .load-progress .load-progress-spinner::after {
  1000. content: "";
  1001. display: block;
  1002. width: 24upx;
  1003. height: 24upx;
  1004. -webkit-box-sizing: border-box;
  1005. box-sizing: border-box;
  1006. border: solid 4upx transparent;
  1007. border-top-color: inherit;
  1008. border-left-color: inherit;
  1009. border-radius: 50%;
  1010. -webkit-animation: load-progress-spinner 0.4s linear infinite;
  1011. animation: load-progress-spinner 0.4s linear infinite;
  1012. }
  1013. @-webkit-keyframes load-progress-spinner {
  1014. 0% {
  1015. -webkit-transform: rotate(0);
  1016. transform: rotate(0);
  1017. }
  1018. 100% {
  1019. -webkit-transform: rotate(360deg);
  1020. transform: rotate(360deg);
  1021. }
  1022. }
  1023. @keyframes load-progress-spinner {
  1024. 0% {
  1025. -webkit-transform: rotate(0);
  1026. transform: rotate(0);
  1027. }
  1028. 100% {
  1029. -webkit-transform: rotate(360deg);
  1030. transform: rotate(360deg);
  1031. }
  1032. }
  1033. /* ==================
  1034. 列表
  1035. ==================== */
  1036. .grayscale {
  1037. filter: grayscale(1);
  1038. }
  1039. .cu-list+.cu-list {
  1040. margin-top: 30upx
  1041. }
  1042. .cu-list>.cu-item {
  1043. transition: all .6s ease-in-out 0s;
  1044. transform: translateX(0upx)
  1045. }
  1046. .cu-list>.cu-item.move-cur {
  1047. transform: translateX(-260upx)
  1048. }
  1049. .cu-list>.cu-item .move {
  1050. position: absolute;
  1051. right: 0;
  1052. display: flex;
  1053. width: 260upx;
  1054. height: 100%;
  1055. transform: translateX(100%)
  1056. }
  1057. .cu-list>.cu-item .move view {
  1058. display: flex;
  1059. flex: 1;
  1060. justify-content: center;
  1061. align-items: center
  1062. }
  1063. .cu-list.menu-avatar {
  1064. overflow: hidden;
  1065. }
  1066. .cu-list.menu-avatar>.cu-item {
  1067. position: relative;
  1068. display: flex;
  1069. padding-right: 10upx;
  1070. height: 140upx;
  1071. background-color: #ffffff;
  1072. justify-content: flex-end;
  1073. align-items: center
  1074. }
  1075. .cu-list.menu-avatar>.cu-item>.cu-avatar {
  1076. position: absolute;
  1077. left: 30upx
  1078. }
  1079. .cu-list.menu-avatar>.cu-item .flex .text-cut {
  1080. max-width: 510upx
  1081. }
  1082. .cu-list.menu-avatar>.cu-item .content {
  1083. position: absolute;
  1084. left: 146upx;
  1085. width: calc(100% - 96upx - 60upx - 120upx - 20upx);
  1086. line-height: 1.6em;
  1087. }
  1088. .cu-list.menu-avatar>.cu-item .content.flex-sub {
  1089. width: calc(100% - 96upx - 60upx - 20upx);
  1090. }
  1091. .cu-list.menu-avatar>.cu-item .content>view:first-child {
  1092. font-size: 30upx;
  1093. display: flex;
  1094. align-items: center
  1095. }
  1096. .cu-list.menu-avatar>.cu-item .content .cu-tag.sm {
  1097. display: inline-block;
  1098. margin-left: 10upx;
  1099. height: 28upx;
  1100. font-size: 16upx;
  1101. line-height: 32upx
  1102. }
  1103. .cu-list.menu-avatar>.cu-item .action {
  1104. width: 100upx;
  1105. text-align: center
  1106. }
  1107. .cu-list.menu-avatar>.cu-item .action view+view {
  1108. margin-top: 10upx
  1109. }
  1110. .cu-list.menu-avatar.comment>.cu-item .content {
  1111. position: relative;
  1112. left: 0;
  1113. width: auto;
  1114. flex: 1;
  1115. }
  1116. .cu-list.menu-avatar.comment>.cu-item {
  1117. padding: 30upx 30upx 30upx 120upx;
  1118. height: auto
  1119. }
  1120. .cu-list.menu-avatar.comment .cu-avatar {
  1121. align-self: flex-start
  1122. }
  1123. .cu-list.menu>.cu-item {
  1124. position: relative;
  1125. display: flex;
  1126. padding: 0 30upx;
  1127. min-height: 100upx;
  1128. background-color: #ffffff;
  1129. justify-content: space-between;
  1130. align-items: center
  1131. }
  1132. .cu-list.menu>.cu-item:last-child:after {
  1133. border: none
  1134. }
  1135. .cu-list.menu-avatar>.cu-item:after,
  1136. .cu-list.menu>.cu-item:after {
  1137. position: absolute;
  1138. top: 0;
  1139. left: 0;
  1140. box-sizing: border-box;
  1141. width: 200%;
  1142. height: 200%;
  1143. border-bottom: 1upx solid #ddd;
  1144. border-radius: inherit;
  1145. content: " ";
  1146. transform: scale(.5);
  1147. transform-origin: 0 0;
  1148. pointer-events: none
  1149. }
  1150. .cu-list.menu>.cu-item.grayscale {
  1151. background-color: #f5f5f5
  1152. }
  1153. .cu-list.menu>.cu-item.cur {
  1154. background-color: #fcf7e9
  1155. }
  1156. .cu-list.menu>.cu-item.arrow {
  1157. padding-right: 90upx
  1158. }
  1159. .cu-list.menu>.cu-item.arrow:before {
  1160. position: absolute;
  1161. top: 0;
  1162. right: 30upx;
  1163. bottom: 0;
  1164. display: block;
  1165. margin: auto;
  1166. width: 30upx;
  1167. height: 30upx;
  1168. color: #8799a3;
  1169. content: "\e6a3";
  1170. text-align: center;
  1171. font-size: 34upx;
  1172. font-family: cuIcon;
  1173. line-height: 30upx
  1174. }
  1175. .cu-list.menu>.cu-item button.content {
  1176. padding: 0;
  1177. background-color: transparent;
  1178. justify-content: flex-start
  1179. }
  1180. .cu-list.menu>.cu-item button.content:after {
  1181. display: none
  1182. }
  1183. .cu-list.menu>.cu-item .cu-avatar-group .cu-avatar {
  1184. border-color: #ffffff
  1185. }
  1186. .cu-list.menu>.cu-item .content>view:first-child {
  1187. display: flex;
  1188. align-items: center
  1189. }
  1190. .cu-list.menu>.cu-item .content>text[class*=cuIcon] {
  1191. display: inline-block;
  1192. margin-right: 10upx;
  1193. width: 1.6em;
  1194. text-align: center
  1195. }
  1196. .cu-list.menu>.cu-item .content>image {
  1197. display: inline-block;
  1198. margin-right: 10upx;
  1199. width: 1.6em;
  1200. height: 1.6em;
  1201. vertical-align: middle
  1202. }
  1203. .cu-list.menu>.cu-item .content {
  1204. font-size: 30upx;
  1205. line-height: 1.6em;
  1206. flex: 1
  1207. }
  1208. .cu-list.menu>.cu-item .content .cu-tag.sm {
  1209. display: inline-block;
  1210. margin-left: 10upx;
  1211. height: 28upx;
  1212. font-size: 16upx;
  1213. line-height: 32upx
  1214. }
  1215. .cu-list.menu>.cu-item .action .cu-tag:empty {
  1216. right: 10upx
  1217. }
  1218. .cu-list.menu {
  1219. display: block;
  1220. overflow: hidden
  1221. }
  1222. .cu-list.menu.sm-border>.cu-item:after {
  1223. left: 30upx;
  1224. width: calc(200% - 120upx)
  1225. }
  1226. .cu-list.grid>.cu-item {
  1227. position: relative;
  1228. display: flex;
  1229. padding: 20upx 0 30upx;
  1230. transition-duration: 0s;
  1231. flex-direction: column
  1232. }
  1233. .cu-list.grid>.cu-item:after {
  1234. position: absolute;
  1235. top: 0;
  1236. left: 0;
  1237. box-sizing: border-box;
  1238. width: 200%;
  1239. height: 200%;
  1240. border-right: 1px solid rgba(0, 0, 0, .1);
  1241. border-bottom: 1px solid rgba(0, 0, 0, .1);
  1242. border-radius: inherit;
  1243. content: " ";
  1244. transform: scale(.5);
  1245. transform-origin: 0 0;
  1246. pointer-events: none
  1247. }
  1248. .cu-list.grid>.cu-item text {
  1249. display: block;
  1250. margin-top: 10upx;
  1251. color: #888;
  1252. font-size: 26upx;
  1253. line-height: 40upx
  1254. }
  1255. .cu-list.grid>.cu-item [class*=cuIcon] {
  1256. position: relative;
  1257. display: block;
  1258. margin-top: 20upx;
  1259. width: 100%;
  1260. font-size: 48upx
  1261. }
  1262. .cu-list.grid>.cu-item .cu-tag {
  1263. right: auto;
  1264. left: 50%;
  1265. margin-left: 20upx
  1266. }
  1267. .cu-list.grid {
  1268. background-color: #ffffff;
  1269. text-align: center
  1270. }
  1271. .cu-list.grid.no-border>.cu-item {
  1272. padding-top: 10upx;
  1273. padding-bottom: 20upx
  1274. }
  1275. .cu-list.grid.no-border>.cu-item:after {
  1276. border: none
  1277. }
  1278. .cu-list.grid.no-border {
  1279. padding: 20upx 10upx
  1280. }
  1281. .cu-list.grid.col-3>.cu-item:nth-child(3n):after,
  1282. .cu-list.grid.col-4>.cu-item:nth-child(4n):after,
  1283. .cu-list.grid.col-5>.cu-item:nth-child(5n):after {
  1284. border-right-width: 0
  1285. }
  1286. .cu-list.card-menu {
  1287. overflow: hidden;
  1288. margin-right: 30upx;
  1289. margin-left: 30upx;
  1290. border-radius: 20upx
  1291. }
  1292. /* ==================
  1293. 操作条
  1294. ==================== */
  1295. .cu-bar {
  1296. display: flex;
  1297. position: relative;
  1298. align-items: center;
  1299. min-height: 100upx;
  1300. justify-content: space-between;
  1301. }
  1302. .cu-bar .action {
  1303. display: flex;
  1304. align-items: center;
  1305. height: 100%;
  1306. justify-content: center;
  1307. max-width: 100%;
  1308. }
  1309. .cu-bar .action.border-title {
  1310. position: relative;
  1311. top: -10upx;
  1312. }
  1313. .cu-bar .action.border-title text[class*="bg-"]:last-child {
  1314. position: absolute;
  1315. bottom: -0.5rem;
  1316. min-width: 2rem;
  1317. height: 6upx;
  1318. left: 0;
  1319. }
  1320. .cu-bar .action.sub-title {
  1321. position: relative;
  1322. top: -0.2rem;
  1323. }
  1324. .cu-bar .action.sub-title text {
  1325. position: relative;
  1326. z-index: 1;
  1327. }
  1328. .cu-bar .action.sub-title text[class*="bg-"]:last-child {
  1329. position: absolute;
  1330. display: inline-block;
  1331. bottom: -0.2rem;
  1332. border-radius: 6upx;
  1333. width: 100%;
  1334. height: 0.6rem;
  1335. left: 0.6rem;
  1336. opacity: 0.3;
  1337. z-index: 0;
  1338. }
  1339. .cu-bar .action.sub-title text[class*="text-"]:last-child {
  1340. position: absolute;
  1341. display: inline-block;
  1342. bottom: -0.7rem;
  1343. left: 0.5rem;
  1344. opacity: 0.2;
  1345. z-index: 0;
  1346. text-align: right;
  1347. font-weight: 900;
  1348. font-size: 36upx;
  1349. }
  1350. .cu-bar.justify-center .action.border-title text:last-child,
  1351. .cu-bar.justify-center .action.sub-title text:last-child {
  1352. left: 0;
  1353. right: 0;
  1354. margin: auto;
  1355. text-align: center;
  1356. }
  1357. .cu-bar .action:first-child {
  1358. margin-left: 30upx;
  1359. font-size: 30upx;
  1360. }
  1361. .cu-bar .action text.text-cut {
  1362. text-align: left;
  1363. width: 100%;
  1364. }
  1365. .cu-bar .cu-avatar:first-child {
  1366. margin-left: 20upx;
  1367. }
  1368. .cu-bar .action:first-child>text[class*="cuIcon-"] {
  1369. margin-left: -0.3em;
  1370. margin-right: 0.3em;
  1371. }
  1372. .cu-bar .action:last-child {
  1373. margin-right: 30upx;
  1374. }
  1375. .cu-bar .action>text[class*="cuIcon-"],
  1376. .cu-bar .action>view[class*="cuIcon-"] {
  1377. font-size: 36upx;
  1378. }
  1379. .cu-bar .action>text[class*="cuIcon-"]+text[class*="cuIcon-"] {
  1380. margin-left: 0.5em;
  1381. }
  1382. .cu-bar .content {
  1383. position: absolute;
  1384. text-align: center;
  1385. width: calc(100% - 340upx);
  1386. left: 0;
  1387. right: 0;
  1388. bottom: 0;
  1389. top: 0;
  1390. margin: auto;
  1391. height: 60upx;
  1392. font-size: 32upx;
  1393. line-height: 60upx;
  1394. cursor: none;
  1395. pointer-events: none;
  1396. text-overflow: ellipsis;
  1397. white-space: nowrap;
  1398. overflow: hidden;
  1399. }
  1400. .cu-bar.ios .content {
  1401. bottom: 7px;
  1402. height: 30px;
  1403. font-size: 32upx;
  1404. line-height: 30px;
  1405. }
  1406. .cu-bar.btn-group {
  1407. justify-content: space-around;
  1408. }
  1409. .cu-bar.btn-group button {
  1410. padding: 20upx 32upx;
  1411. }
  1412. .cu-bar.btn-group button {
  1413. flex: 1;
  1414. margin: 0 20upx;
  1415. max-width: 50%;
  1416. }
  1417. .cu-bar .search-form {
  1418. background-color: #f5f5f5;
  1419. line-height: 64upx;
  1420. height: 64upx;
  1421. font-size: 24upx;
  1422. color: #333333;
  1423. flex: 1;
  1424. display: flex;
  1425. align-items: center;
  1426. margin: 0 30upx;
  1427. }
  1428. .cu-bar .search-form+.action {
  1429. margin-right: 30upx;
  1430. }
  1431. .cu-bar .search-form input {
  1432. flex: 1;
  1433. padding-right: 30upx;
  1434. height: 64upx;
  1435. line-height: 64upx;
  1436. font-size: 26upx;
  1437. background-color: transparent;
  1438. }
  1439. .cu-bar .search-form [class*="cuIcon-"] {
  1440. margin: 0 0.5em 0 0.8em;
  1441. }
  1442. .cu-bar .search-form [class*="cuIcon-"]::before {
  1443. top: 0upx;
  1444. }
  1445. .cu-bar.fixed,
  1446. .nav.fixed {
  1447. position: fixed;
  1448. width: 100%;
  1449. top: 0;
  1450. z-index: 1024;
  1451. box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
  1452. }
  1453. .cu-bar.foot {
  1454. position: fixed;
  1455. width: 100%;
  1456. bottom: 0;
  1457. z-index: 1024;
  1458. box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
  1459. }
  1460. .cu-bar.tabbar {
  1461. padding: 0;
  1462. height: calc(100upx + env(safe-area-inset-bottom) / 2);
  1463. padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  1464. }
  1465. .cu-tabbar-height {
  1466. min-height: 100upx;
  1467. height: calc(100upx + env(safe-area-inset-bottom) / 2);
  1468. }
  1469. .cu-bar.tabbar.shadow {
  1470. box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
  1471. }
  1472. .cu-bar.tabbar .action {
  1473. font-size: 22upx;
  1474. position: relative;
  1475. flex: 1;
  1476. text-align: center;
  1477. padding: 0;
  1478. display: block;
  1479. height: auto;
  1480. line-height: 1.5;
  1481. margin: 0;
  1482. background-color: inherit;
  1483. overflow: initial;
  1484. }
  1485. .cu-bar.tabbar.shop .action {
  1486. width: 140upx;
  1487. flex: initial;
  1488. }
  1489. .cu-bar.tabbar .action.add-action {
  1490. position: relative;
  1491. z-index: 2;
  1492. padding-top: 50upx;
  1493. }
  1494. .cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
  1495. position: absolute;
  1496. width: 70upx;
  1497. z-index: 2;
  1498. height: 70upx;
  1499. border-radius: 50%;
  1500. line-height: 70upx;
  1501. font-size: 50upx;
  1502. top: -35upx;
  1503. left: 0;
  1504. right: 0;
  1505. margin: auto;
  1506. padding: 0;
  1507. }
  1508. .cu-bar.tabbar .action.add-action::after {
  1509. content: "";
  1510. position: absolute;
  1511. width: 100upx;
  1512. height: 100upx;
  1513. top: -50upx;
  1514. left: 0;
  1515. right: 0;
  1516. margin: auto;
  1517. box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
  1518. border-radius: 50upx;
  1519. background-color: inherit;
  1520. z-index: 0;
  1521. }
  1522. .cu-bar.tabbar .action.add-action::before {
  1523. content: "";
  1524. position: absolute;
  1525. width: 100upx;
  1526. height: 30upx;
  1527. bottom: 30upx;
  1528. left: 0;
  1529. right: 0;
  1530. margin: auto;
  1531. background-color: inherit;
  1532. z-index: 1;
  1533. }
  1534. .cu-bar.tabbar .btn-group {
  1535. flex: 1;
  1536. display: flex;
  1537. justify-content: space-around;
  1538. align-items: center;
  1539. padding: 0 10upx;
  1540. }
  1541. .cu-bar.tabbar button.action::after {
  1542. border: 0;
  1543. }
  1544. .cu-bar.tabbar .action [class*="cuIcon-"] {
  1545. width: 100upx;
  1546. position: relative;
  1547. display: block;
  1548. height: auto;
  1549. margin: 0 auto 10upx;
  1550. text-align: center;
  1551. font-size: 40upx;
  1552. }
  1553. .cu-bar.tabbar .action .cuIcon-cu-image {
  1554. margin: 0 auto;
  1555. }
  1556. .cu-bar.tabbar .action .cuIcon-cu-image image {
  1557. width: 50upx;
  1558. height: 50upx;
  1559. display: inline-block;
  1560. }
  1561. .cu-bar.tabbar .submit {
  1562. align-items: center;
  1563. display: flex;
  1564. justify-content: center;
  1565. text-align: center;
  1566. position: relative;
  1567. flex: 2;
  1568. align-self: stretch;
  1569. }
  1570. .cu-bar.tabbar .submit:last-child {
  1571. flex: 2.6;
  1572. }
  1573. .cu-bar.tabbar .submit+.submit {
  1574. flex: 2;
  1575. }
  1576. .cu-bar.tabbar.border .action::before {
  1577. content: " ";
  1578. width: 200%;
  1579. height: 200%;
  1580. position: absolute;
  1581. top: 0;
  1582. left: 0;
  1583. transform: scale(0.5);
  1584. transform-origin: 0 0;
  1585. border-right: 1upx solid rgba(0, 0, 0, 0.1);
  1586. z-index: 3;
  1587. }
  1588. .cu-bar.tabbar.border .action:last-child:before {
  1589. display: none;
  1590. }
  1591. .cu-bar.input {
  1592. padding-right: 20upx;
  1593. background-color: #ffffff;
  1594. }
  1595. .cu-bar.input input {
  1596. overflow: initial;
  1597. line-height: 64upx;
  1598. height: 64upx;
  1599. min-height: 64upx;
  1600. flex: 1;
  1601. font-size: 30upx;
  1602. margin: 0 20upx;
  1603. }
  1604. .cu-bar.input .action {
  1605. margin-left: 20upx;
  1606. }
  1607. .cu-bar.input .action [class*="cuIcon-"] {
  1608. font-size: 48upx;
  1609. }
  1610. .cu-bar.input input+.action {
  1611. margin-right: 20upx;
  1612. margin-left: 0upx;
  1613. }
  1614. .cu-bar.input .action:first-child [class*="cuIcon-"] {
  1615. margin-left: 0upx;
  1616. }
  1617. .cu-custom {
  1618. display: block;
  1619. position: relative;
  1620. }
  1621. .cu-custom .cu-bar .content {
  1622. width: calc(100% - 440upx);
  1623. }
  1624. /* #ifdef MP-ALIPAY */
  1625. .cu-custom .cu-bar .action .cuIcon-back {
  1626. opacity: 0;
  1627. }
  1628. /* #endif */
  1629. .cu-custom .cu-bar .content image {
  1630. height: 60upx;
  1631. width: 240upx;
  1632. }
  1633. .cu-custom .cu-bar {
  1634. min-height: 0px;
  1635. /* #ifdef MP-WEIXIN */
  1636. padding-right: 220upx;
  1637. /* #endif */
  1638. /* #ifdef MP-ALIPAY */
  1639. padding-right: 150upx;
  1640. /* #endif */
  1641. box-shadow: 0upx 0upx 0upx;
  1642. z-index: 9999;
  1643. }
  1644. .cu-custom .cu-bar .border-custom {
  1645. position: relative;
  1646. background: rgba(0, 0, 0, 0.15);
  1647. border-radius: 1000upx;
  1648. height: 30px;
  1649. }
  1650. .cu-custom .cu-bar .border-custom::after {
  1651. content: " ";
  1652. width: 200%;
  1653. height: 200%;
  1654. position: absolute;
  1655. top: 0;
  1656. left: 0;
  1657. border-radius: inherit;
  1658. transform: scale(0.5);
  1659. transform-origin: 0 0;
  1660. pointer-events: none;
  1661. box-sizing: border-box;
  1662. border: 1upx solid #ffffff;
  1663. opacity: 0.5;
  1664. }
  1665. .cu-custom .cu-bar .border-custom::before {
  1666. content: " ";
  1667. width: 1upx;
  1668. height: 110%;
  1669. position: absolute;
  1670. top: 22.5%;
  1671. left: 0;
  1672. right: 0;
  1673. margin: auto;
  1674. transform: scale(0.5);
  1675. transform-origin: 0 0;
  1676. pointer-events: none;
  1677. box-sizing: border-box;
  1678. opacity: 0.6;
  1679. background-color: #ffffff;
  1680. }
  1681. .cu-custom .cu-bar .border-custom text {
  1682. display: block;
  1683. flex: 1;
  1684. margin: auto !important;
  1685. text-align: center;
  1686. font-size: 34upx;
  1687. }
  1688. /* ==================
  1689. 导航栏
  1690. ==================== */
  1691. .nav {
  1692. white-space: nowrap;
  1693. }
  1694. ::-webkit-scrollbar {
  1695. display: none;
  1696. }
  1697. .nav .cu-item {
  1698. height: 90upx;
  1699. display: inline-block;
  1700. line-height: 90upx;
  1701. margin: 0 10upx;
  1702. padding: 0 20upx;
  1703. }
  1704. .nav .cu-item.cur {
  1705. border-bottom: 4upx solid;
  1706. }
  1707. /* ==================
  1708. 时间轴
  1709. ==================== */
  1710. .cu-timeline {
  1711. display: block;
  1712. background-color: #ffffff;
  1713. }
  1714. .cu-timeline .cu-time {
  1715. width: 120upx;
  1716. text-align: center;
  1717. padding: 20upx 0;
  1718. font-size: 26upx;
  1719. color: #888;
  1720. display: block;
  1721. }
  1722. .cu-timeline>.cu-item {
  1723. padding: 30upx 30upx 30upx 120upx;
  1724. position: relative;
  1725. display: block;
  1726. z-index: 0;
  1727. }
  1728. .cu-timeline>.cu-item:not([class*="text-"]) {
  1729. color: #ccc;
  1730. }
  1731. .cu-timeline>.cu-item::after {
  1732. content: "";
  1733. display: block;
  1734. position: absolute;
  1735. width: 1upx;
  1736. background-color: #ddd;
  1737. left: 60upx;
  1738. height: 100%;
  1739. top: 0;
  1740. z-index: 8;
  1741. }
  1742. .cu-timeline>.cu-item::before {
  1743. font-family: "cuIcon";
  1744. display: block;
  1745. position: absolute;
  1746. top: 36upx;
  1747. z-index: 9;
  1748. background-color: #ffffff;
  1749. width: 50upx;
  1750. height: 50upx;
  1751. text-align: center;
  1752. border: none;
  1753. line-height: 50upx;
  1754. left: 36upx;
  1755. }
  1756. .cu-timeline>.cu-item:not([class*="cuIcon-"])::before {
  1757. content: "\e763";
  1758. }
  1759. .cu-timeline>.cu-item[class*="cuIcon-"]::before {
  1760. background-color: #ffffff;
  1761. width: 50upx;
  1762. height: 50upx;
  1763. text-align: center;
  1764. border: none;
  1765. line-height: 50upx;
  1766. left: 36upx;
  1767. }
  1768. .cu-timeline>.cu-item>.content {
  1769. padding: 30upx;
  1770. border-radius: 6upx;
  1771. display: block;
  1772. line-height: 1.6;
  1773. }
  1774. .cu-timeline>.cu-item>.content:not([class*="bg-"]) {
  1775. background-color: #f1f1f1;
  1776. color: #333333;
  1777. }
  1778. .cu-timeline>.cu-item>.content+.content {
  1779. margin-top: 20upx;
  1780. }
  1781. /* ==================
  1782. 聊天
  1783. ==================== */
  1784. .cu-chat {
  1785. display: flex;
  1786. flex-direction: column;
  1787. }
  1788. .cu-chat .cu-item {
  1789. display: flex;
  1790. padding: 30upx 30upx 70upx;
  1791. position: relative;
  1792. }
  1793. .cu-chat .cu-item>.cu-avatar {
  1794. width: 80upx;
  1795. height: 80upx;
  1796. }
  1797. .cu-chat .cu-item>.main {
  1798. max-width: calc(100% - 260upx);
  1799. margin: 0 40upx;
  1800. display: flex;
  1801. align-items: center;
  1802. }
  1803. .cu-chat .cu-item>image {
  1804. height: 320upx;
  1805. }
  1806. .cu-chat .cu-item>.main .content {
  1807. padding: 20upx;
  1808. border-radius: 6upx;
  1809. display: inline-flex;
  1810. max-width: 100%;
  1811. align-items: center;
  1812. font-size: 30upx;
  1813. position: relative;
  1814. min-height: 80upx;
  1815. line-height: 40upx;
  1816. text-align: left;
  1817. }
  1818. .cu-chat .cu-item>.main .content:not([class*="bg-"]) {
  1819. background-color: #ffffff;
  1820. color: #333333;
  1821. }
  1822. .cu-chat .cu-item .date {
  1823. position: absolute;
  1824. font-size: 24upx;
  1825. color: #8799a3;
  1826. width: calc(100% - 320upx);
  1827. bottom: 20upx;
  1828. left: 160upx;
  1829. }
  1830. .cu-chat .cu-item .action {
  1831. padding: 0 30upx;
  1832. display: flex;
  1833. align-items: center;
  1834. }
  1835. .cu-chat .cu-item>.main .content::after {
  1836. content: "";
  1837. top: 27upx;
  1838. transform: rotate(45deg);
  1839. position: absolute;
  1840. z-index: 100;
  1841. display: inline-block;
  1842. overflow: hidden;
  1843. width: 24upx;
  1844. height: 24upx;
  1845. left: -12upx;
  1846. right: initial;
  1847. background-color: inherit;
  1848. }
  1849. .cu-chat .cu-item.self>.main .content::after {
  1850. left: auto;
  1851. right: -12upx;
  1852. }
  1853. .cu-chat .cu-item>.main .content::before {
  1854. content: "";
  1855. top: 30upx;
  1856. transform: rotate(45deg);
  1857. position: absolute;
  1858. z-index: -1;
  1859. display: inline-block;
  1860. overflow: hidden;
  1861. width: 24upx;
  1862. height: 24upx;
  1863. left: -12upx;
  1864. right: initial;
  1865. background-color: inherit;
  1866. filter: blur(5upx);
  1867. opacity: 0.3;
  1868. }
  1869. .cu-chat .cu-item>.main .content:not([class*="bg-"])::before {
  1870. background-color: #333333;
  1871. opacity: 0.1;
  1872. }
  1873. .cu-chat .cu-item.self>.main .content::before {
  1874. left: auto;
  1875. right: -12upx;
  1876. }
  1877. .cu-chat .cu-item.self {
  1878. justify-content: flex-end;
  1879. text-align: right;
  1880. }
  1881. .cu-chat .cu-info {
  1882. display: inline-block;
  1883. margin: 20upx auto;
  1884. font-size: 24upx;
  1885. padding: 8upx 12upx;
  1886. background-color: rgba(0, 0, 0, 0.2);
  1887. border-radius: 6upx;
  1888. color: #ffffff;
  1889. max-width: 400upx;
  1890. line-height: 1.4;
  1891. }
  1892. /* ==================
  1893. 卡片
  1894. ==================== */
  1895. .cu-card {
  1896. display: block;
  1897. overflow: hidden;
  1898. }
  1899. .cu-card>.cu-item {
  1900. display: block;
  1901. background-color: #ffffff;
  1902. overflow: hidden;
  1903. border-radius: 10upx;
  1904. margin: 30upx;
  1905. }
  1906. .cu-card>.cu-item.shadow-blur {
  1907. overflow: initial;
  1908. }
  1909. .cu-card.no-card>.cu-item {
  1910. margin: 0upx;
  1911. border-radius: 0upx;
  1912. }
  1913. .cu-card .grid.grid-square {
  1914. margin-bottom: -20upx;
  1915. }
  1916. .cu-card.case .image {
  1917. position: relative;
  1918. }
  1919. .cu-card.case .image image {
  1920. width: 100%;
  1921. }
  1922. .cu-card.case .image .cu-tag {
  1923. position: absolute;
  1924. right: 0;
  1925. top: 0;
  1926. }
  1927. .cu-card.case .image .cu-bar {
  1928. position: absolute;
  1929. bottom: 0;
  1930. width: 100%;
  1931. background-color: transparent;
  1932. padding: 0upx 30upx;
  1933. }
  1934. .cu-card.case.no-card .image {
  1935. margin: 30upx 30upx 0;
  1936. overflow: hidden;
  1937. border-radius: 10upx;
  1938. }
  1939. .cu-card.dynamic {
  1940. display: block;
  1941. }
  1942. .cu-card.dynamic>.cu-item {
  1943. display: block;
  1944. background-color: #ffffff;
  1945. overflow: hidden;
  1946. }
  1947. .cu-card.dynamic>.cu-item>.text-content {
  1948. padding: 0 30upx 0;
  1949. max-height: 6.4em;
  1950. overflow: hidden;
  1951. font-size: 30upx;
  1952. margin-bottom: 20upx;
  1953. }
  1954. .cu-card.dynamic>.cu-item .square-img {
  1955. width: 100%;
  1956. height: 200upx;
  1957. border-radius: 6upx;
  1958. }
  1959. .cu-card.dynamic>.cu-item .only-img {
  1960. width: 100%;
  1961. height: 320upx;
  1962. border-radius: 6upx;
  1963. }
  1964. .cu-card.article {
  1965. display: block;
  1966. }
  1967. .cu-card.article>.cu-item {
  1968. padding-bottom: 30upx;
  1969. }
  1970. .cu-card.article>.cu-item .title {
  1971. font-size: 30upx;
  1972. font-weight: 900;
  1973. color: #333333;
  1974. line-height: 100upx;
  1975. padding: 0 30upx;
  1976. }
  1977. .cu-card.article>.cu-item .content {
  1978. display: flex;
  1979. padding: 0 30upx;
  1980. }
  1981. .cu-card.article>.cu-item .content>image {
  1982. width: 240upx;
  1983. height: 6.4em;
  1984. margin-right: 20upx;
  1985. border-radius: 6upx;
  1986. }
  1987. .cu-card.article>.cu-item .content .desc {
  1988. flex: 1;
  1989. display: flex;
  1990. flex-direction: column;
  1991. justify-content: space-between;
  1992. }
  1993. .cu-card.article>.cu-item .content .text-content {
  1994. font-size: 28upx;
  1995. color: #888;
  1996. height: 4.8em;
  1997. overflow: hidden;
  1998. }
  1999. /* ==================
  2000. 表单
  2001. ==================== */
  2002. .cu-form-group {
  2003. background-color: #ffffff;
  2004. padding: 1upx 30upx;
  2005. display: flex;
  2006. align-items: center;
  2007. min-height: 100upx;
  2008. justify-content: space-between;
  2009. }
  2010. .cu-form-group+.cu-form-group {
  2011. border-top: 1upx solid #eee;
  2012. }
  2013. .cu-form-group .title {
  2014. text-align: justify;
  2015. padding-right: 30upx;
  2016. font-size: 30upx;
  2017. position: relative;
  2018. height: 60upx;
  2019. line-height: 60upx;
  2020. }
  2021. .cu-form-group input {
  2022. flex: 1;
  2023. font-size: 30upx;
  2024. color: #555;
  2025. padding-right: 20upx;
  2026. }
  2027. .cu-form-group>text[class*="cuIcon-"] {
  2028. font-size: 36upx;
  2029. padding: 0;
  2030. box-sizing: border-box;
  2031. }
  2032. .cu-form-group textarea {
  2033. margin: 32upx 0 30upx;
  2034. height: 4.6em;
  2035. width: 100%;
  2036. line-height: 1.2em;
  2037. flex: 1;
  2038. font-size: 28upx;
  2039. padding: 0;
  2040. }
  2041. .cu-form-group.align-start .title {
  2042. height: 1em;
  2043. margin-top: 32upx;
  2044. line-height: 1em;
  2045. }
  2046. .cu-form-group picker {
  2047. flex: 1;
  2048. padding-right: 40upx;
  2049. overflow: hidden;
  2050. position: relative;
  2051. }
  2052. .cu-form-group picker .picker {
  2053. line-height: 100upx;
  2054. font-size: 28upx;
  2055. text-overflow: ellipsis;
  2056. white-space: nowrap;
  2057. overflow: hidden;
  2058. width: 100%;
  2059. text-align: right;
  2060. }
  2061. .cu-form-group picker::after {
  2062. font-family: cuIcon;
  2063. display: block;
  2064. content: "\e6a3";
  2065. position: absolute;
  2066. font-size: 34upx;
  2067. color: #8799a3;
  2068. line-height: 100upx;
  2069. width: 60upx;
  2070. text-align: center;
  2071. top: 0;
  2072. bottom: 0;
  2073. right: -20upx;
  2074. margin: auto;
  2075. }
  2076. .cu-form-group textarea[disabled],
  2077. .cu-form-group textarea[disabled] .placeholder {
  2078. color: transparent;
  2079. }
  2080. /* ==================
  2081. 模态窗口
  2082. ==================== */
  2083. .cu-modal {
  2084. position: fixed;
  2085. top: 0;
  2086. right: 0;
  2087. bottom: 0;
  2088. left: 0;
  2089. z-index: 1110;
  2090. opacity: 0;
  2091. outline: 0;
  2092. text-align: center;
  2093. -ms-transform: scale(1.185);
  2094. transform: scale(1.185);
  2095. backface-visibility: hidden;
  2096. perspective: 2000upx;
  2097. background: rgba(0, 0, 0, 0.6);
  2098. transition: all 0.3s ease-in-out 0s;
  2099. pointer-events: none;
  2100. }
  2101. .cu-modal::before {
  2102. content: "\200B";
  2103. display: inline-block;
  2104. height: 100%;
  2105. vertical-align: middle;
  2106. }
  2107. .cu-modal.show {
  2108. opacity: 1;
  2109. transition-duration: 0.3s;
  2110. -ms-transform: scale(1);
  2111. transform: scale(1);
  2112. overflow-x: hidden;
  2113. overflow-y: auto;
  2114. pointer-events: auto;
  2115. }
  2116. .cu-dialog {
  2117. position: relative;
  2118. display: inline-block;
  2119. vertical-align: middle;
  2120. margin-left: auto;
  2121. margin-right: auto;
  2122. width: 680upx;
  2123. max-width: 100%;
  2124. background-color: #f8f8f8;
  2125. border-radius: 10upx;
  2126. overflow: hidden;
  2127. }
  2128. .cu-modal.bottom-modal::before {
  2129. vertical-align: bottom;
  2130. }
  2131. .cu-modal.bottom-modal .cu-dialog {
  2132. width: 100%;
  2133. border-radius: 0;
  2134. }
  2135. .cu-modal.bottom-modal {
  2136. margin-bottom: -1000upx;
  2137. }
  2138. .cu-modal.bottom-modal.show {
  2139. margin-bottom: 0;
  2140. }
  2141. .cu-modal.drawer-modal {
  2142. transform: scale(1);
  2143. display: flex;
  2144. }
  2145. .cu-modal.drawer-modal .cu-dialog {
  2146. height: 100%;
  2147. min-width: 200upx;
  2148. border-radius: 0;
  2149. margin: initial;
  2150. transition-duration: 0.3s;
  2151. }
  2152. .cu-modal.drawer-modal.justify-start .cu-dialog {
  2153. transform: translateX(-100%);
  2154. }
  2155. .cu-modal.drawer-modal.justify-end .cu-dialog {
  2156. transform: translateX(100%);
  2157. }
  2158. .cu-modal.drawer-modal.show .cu-dialog {
  2159. transform: translateX(0%);
  2160. }
  2161. .cu-modal .cu-dialog>.cu-bar:first-child .action {
  2162. min-width: 100rpx;
  2163. margin-right: 0;
  2164. min-height: 100rpx;
  2165. }
  2166. /* ==================
  2167. 轮播
  2168. ==================== */
  2169. swiper .a-swiper-dot {
  2170. display: inline-block;
  2171. width: 16upx;
  2172. height: 16upx;
  2173. background: rgba(0, 0, 0, .3);
  2174. border-radius: 50%;
  2175. vertical-align: middle;
  2176. }
  2177. swiper[class*="-dot"] .wx-swiper-dots,
  2178. swiper[class*="-dot"] .a-swiper-dots,
  2179. swiper[class*="-dot"] .uni-swiper-dots {
  2180. display: flex;
  2181. align-items: center;
  2182. width: 100%;
  2183. justify-content: center;
  2184. }
  2185. swiper.square-dot .wx-swiper-dot,
  2186. swiper.square-dot .a-swiper-dot,
  2187. swiper.square-dot .uni-swiper-dot {
  2188. background-color: #ffffff;
  2189. opacity: 0.4;
  2190. width: 10upx;
  2191. height: 10upx;
  2192. border-radius: 20upx;
  2193. margin: 0 8upx !important;
  2194. }
  2195. swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active,
  2196. swiper.square-dot .a-swiper-dot.a-swiper-dot-active,
  2197. swiper.square-dot .uni-swiper-dot.uni-swiper-dot-active {
  2198. opacity: 1;
  2199. width: 30upx;
  2200. }
  2201. swiper.round-dot .wx-swiper-dot,
  2202. swiper.round-dot .a-swiper-dot,
  2203. swiper.round-dot .uni-swiper-dot {
  2204. width: 10upx;
  2205. height: 10upx;
  2206. position: relative;
  2207. margin: 4upx 8upx !important;
  2208. }
  2209. swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active::after,
  2210. swiper.round-dot .a-swiper-dot.a-swiper-dot-active::after,
  2211. swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active::after {
  2212. content: "";
  2213. position: absolute;
  2214. width: 10upx;
  2215. height: 10upx;
  2216. top: 0upx;
  2217. left: 0upx;
  2218. right: 0;
  2219. bottom: 0;
  2220. margin: auto;
  2221. background-color: #ffffff;
  2222. border-radius: 20upx;
  2223. }
  2224. swiper.round-dot .wx-swiper-dot.wx-swiper-dot-active,
  2225. swiper.round-dot .a-swiper-dot.a-swiper-dot-active,
  2226. swiper.round-dot .uni-swiper-dot.uni-swiper-dot-active {
  2227. width: 18upx;
  2228. height: 18upx;
  2229. }
  2230. .screen-swiper {
  2231. min-height: 375upx;
  2232. }
  2233. .screen-swiper image,
  2234. .screen-swiper video,
  2235. .swiper-item image,
  2236. .swiper-item video {
  2237. width: 100%;
  2238. display: block;
  2239. height: 100%;
  2240. margin: 0;
  2241. pointer-events: none;
  2242. }
  2243. .card-swiper {
  2244. height: 420upx !important;
  2245. }
  2246. .card-swiper swiper-item {
  2247. width: 610upx !important;
  2248. left: 70upx;
  2249. box-sizing: border-box;
  2250. padding: 40upx 0upx 70upx;
  2251. overflow: initial;
  2252. }
  2253. .card-swiper swiper-item .swiper-item {
  2254. width: 100%;
  2255. display: block;
  2256. height: 100%;
  2257. border-radius: 10upx;
  2258. transform: scale(0.9);
  2259. transition: all 0.2s ease-in 0s;
  2260. overflow: hidden;
  2261. }
  2262. .card-swiper swiper-item.cur .swiper-item {
  2263. transform: none;
  2264. transition: all 0.2s ease-in 0s;
  2265. }
  2266. .tower-swiper {
  2267. height: 420upx;
  2268. position: relative;
  2269. max-width: 750upx;
  2270. overflow: hidden;
  2271. }
  2272. .tower-swiper .tower-item {
  2273. position: absolute;
  2274. width: 300upx;
  2275. height: 380upx;
  2276. top: 0;
  2277. bottom: 0;
  2278. left: 50%;
  2279. margin: auto;
  2280. transition: all 0.2s ease-in 0s;
  2281. opacity: 1;
  2282. }
  2283. .tower-swiper .tower-item.none {
  2284. opacity: 0;
  2285. }
  2286. .tower-swiper .tower-item .swiper-item {
  2287. width: 100%;
  2288. height: 100%;
  2289. border-radius: 6upx;
  2290. overflow: hidden;
  2291. }
  2292. /* ==================
  2293. 步骤条
  2294. ==================== */
  2295. .cu-steps {
  2296. display: flex;
  2297. }
  2298. scroll-view.cu-steps {
  2299. display: block;
  2300. white-space: nowrap;
  2301. }
  2302. scroll-view.cu-steps .cu-item {
  2303. display: inline-block;
  2304. }
  2305. .cu-steps .cu-item {
  2306. flex: 1;
  2307. text-align: center;
  2308. position: relative;
  2309. min-width: 100upx;
  2310. }
  2311. .cu-steps .cu-item:not([class*="text-"]) {
  2312. color: #8799a3;
  2313. }
  2314. .cu-steps .cu-item [class*="cuIcon-"],
  2315. .cu-steps .cu-item .num {
  2316. display: block;
  2317. font-size: 40upx;
  2318. line-height: 80upx;
  2319. }
  2320. .cu-steps .cu-item::before,
  2321. .cu-steps .cu-item::after,
  2322. .cu-steps.steps-arrow .cu-item::before,
  2323. .cu-steps.steps-arrow .cu-item::after {
  2324. content: "";
  2325. display: block;
  2326. position: absolute;
  2327. height: 0px;
  2328. width: calc(100% - 80upx);
  2329. border-bottom: 1px solid #ccc;
  2330. left: calc(0px - (100% - 80upx) / 2);
  2331. top: 40upx;
  2332. z-index: 0;
  2333. }
  2334. .cu-steps.steps-arrow .cu-item::before,
  2335. .cu-steps.steps-arrow .cu-item::after {
  2336. content: "\e6a3";
  2337. font-family: 'cuIcon';
  2338. height: 30upx;
  2339. border-bottom-width: 0px;
  2340. line-height: 30upx;
  2341. top: 0;
  2342. bottom: 0;
  2343. margin: auto;
  2344. color: #ccc;
  2345. }
  2346. .cu-steps.steps-bottom .cu-item::before,
  2347. .cu-steps.steps-bottom .cu-item::after {
  2348. bottom: 40upx;
  2349. top: initial;
  2350. }
  2351. .cu-steps .cu-item::after {
  2352. border-bottom: 1px solid currentColor;
  2353. width: 0px;
  2354. transition: all 0.3s ease-in-out 0s;
  2355. }
  2356. .cu-steps .cu-item[class*="text-"]::after {
  2357. width: calc(100% - 80upx);
  2358. color: currentColor;
  2359. }
  2360. .cu-steps .cu-item:first-child::before,
  2361. .cu-steps .cu-item:first-child::after {
  2362. display: none;
  2363. }
  2364. .cu-steps .cu-item .num {
  2365. width: 40upx;
  2366. height: 40upx;
  2367. border-radius: 50%;
  2368. line-height: 40upx;
  2369. margin: 20upx auto;
  2370. font-size: 24upx;
  2371. border: 1px solid currentColor;
  2372. position: relative;
  2373. overflow: hidden;
  2374. }
  2375. .cu-steps .cu-item[class*="text-"] .num {
  2376. background-color: currentColor;
  2377. }
  2378. .cu-steps .cu-item .num::before,
  2379. .cu-steps .cu-item .num::after {
  2380. content: attr(data-index);
  2381. position: absolute;
  2382. left: 0;
  2383. right: 0;
  2384. top: 0;
  2385. bottom: 0;
  2386. margin: auto;
  2387. transition: all 0.3s ease-in-out 0s;
  2388. transform: translateY(0upx);
  2389. }
  2390. .cu-steps .cu-item[class*="text-"] .num::before {
  2391. transform: translateY(-40upx);
  2392. color: #ffffff;
  2393. }
  2394. .cu-steps .cu-item .num::after {
  2395. transform: translateY(40upx);
  2396. color: #ffffff;
  2397. transition: all 0.3s ease-in-out 0s;
  2398. }
  2399. .cu-steps .cu-item[class*="text-"] .num::after {
  2400. content: "\e645";
  2401. font-family: 'cuIcon';
  2402. color: #ffffff;
  2403. transform: translateY(0upx);
  2404. }
  2405. .cu-steps .cu-item[class*="text-"] .num.err::after {
  2406. content: "\e646";
  2407. }
  2408. /* ==================
  2409. 布局
  2410. ==================== */
  2411. /* -- flex弹性布局 -- */
  2412. .flex {
  2413. display: flex;
  2414. }
  2415. .basis-xs {
  2416. flex-basis: 20%;
  2417. }
  2418. .basis-sm {
  2419. flex-basis: 40%;
  2420. }
  2421. .basis-df {
  2422. flex-basis: 50%;
  2423. }
  2424. .basis-lg {
  2425. flex-basis: 60%;
  2426. }
  2427. .basis-xl {
  2428. flex-basis: 80%;
  2429. }
  2430. .flex-sub {
  2431. flex: 1;
  2432. }
  2433. .flex-twice {
  2434. flex: 2;
  2435. }
  2436. .flex-treble {
  2437. flex: 3;
  2438. }
  2439. .flex-direction {
  2440. flex-direction: column;
  2441. }
  2442. .flex-wrap {
  2443. flex-wrap: wrap;
  2444. }
  2445. .align-start {
  2446. align-items: flex-start;
  2447. }
  2448. .align-end {
  2449. align-items: flex-end;
  2450. }
  2451. .align-center {
  2452. align-items: center;
  2453. }
  2454. .align-stretch {
  2455. align-items: stretch;
  2456. }
  2457. .self-start {
  2458. align-self: flex-start;
  2459. }
  2460. .self-center {
  2461. align-self: flex-center;
  2462. }
  2463. .self-end {
  2464. align-self: flex-end;
  2465. }
  2466. .self-stretch {
  2467. align-self: stretch;
  2468. }
  2469. .align-stretch {
  2470. align-items: stretch;
  2471. }
  2472. .justify-start {
  2473. justify-content: flex-start;
  2474. }
  2475. .justify-end {
  2476. justify-content: flex-end;
  2477. }
  2478. .justify-center {
  2479. justify-content: center;
  2480. }
  2481. .justify-between {
  2482. justify-content: space-between;
  2483. }
  2484. .justify-around {
  2485. justify-content: space-around;
  2486. }
  2487. /* grid布局 */
  2488. .grid {
  2489. display: flex;
  2490. flex-wrap: wrap;
  2491. }
  2492. .grid.grid-square {
  2493. overflow: hidden;
  2494. }
  2495. .grid.grid-square .cu-tag {
  2496. position: absolute;
  2497. right: 0;
  2498. top: 0;
  2499. border-bottom-left-radius: 6upx;
  2500. padding: 6upx 12upx;
  2501. height: auto;
  2502. background-color: rgba(0, 0, 0, 0.5);
  2503. }
  2504. .grid.grid-square>view>text[class*="cuIcon-"] {
  2505. font-size: 52upx;
  2506. position: absolute;
  2507. color: #8799a3;
  2508. margin: auto;
  2509. top: 0;
  2510. bottom: 0;
  2511. left: 0;
  2512. right: 0;
  2513. display: flex;
  2514. justify-content: center;
  2515. align-items: center;
  2516. flex-direction: column;
  2517. }
  2518. .grid.grid-square>view {
  2519. margin-right: 20upx;
  2520. margin-bottom: 20upx;
  2521. border-radius: 6upx;
  2522. position: relative;
  2523. overflow: hidden;
  2524. }
  2525. .grid.grid-square>view.bg-img image {
  2526. width: 100%;
  2527. height: 100%;
  2528. position: absolute;
  2529. }
  2530. .grid.col-1.grid-square>view {
  2531. padding-bottom: 100%;
  2532. height: 0;
  2533. margin-right: 0;
  2534. }
  2535. .grid.col-2.grid-square>view {
  2536. padding-bottom: calc((100% - 20upx)/2);
  2537. height: 0;
  2538. width: calc((100% - 20upx)/2);
  2539. }
  2540. .grid.col-3.grid-square>view {
  2541. padding-bottom: calc((100% - 40upx)/3);
  2542. height: 0;
  2543. width: calc((100% - 40upx)/3);
  2544. }
  2545. .grid.col-4.grid-square>view {
  2546. padding-bottom: calc((100% - 60upx)/4);
  2547. height: 0;
  2548. width: calc((100% - 60upx)/4);
  2549. }
  2550. .grid.col-5.grid-square>view {
  2551. padding-bottom: calc((100% - 80upx)/5);
  2552. height: 0;
  2553. width: calc((100% - 80upx)/5);
  2554. }
  2555. .grid.col-2.grid-square>view:nth-child(2n),
  2556. .grid.col-3.grid-square>view:nth-child(3n),
  2557. .grid.col-4.grid-square>view:nth-child(4n),
  2558. .grid.col-5.grid-square>view:nth-child(5n) {
  2559. margin-right: 0;
  2560. }
  2561. .grid.col-1>view {
  2562. width: 100%;
  2563. }
  2564. .grid.col-2>view {
  2565. width: 50%;
  2566. }
  2567. .grid.col-3>view {
  2568. width: 33.33%;
  2569. }
  2570. .grid.col-4>view {
  2571. width: 25%;
  2572. }
  2573. .grid.col-5>view {
  2574. width: 20%;
  2575. }
  2576. /* -- 内外边距 -- */
  2577. .margin-0 {
  2578. margin: 0;
  2579. }
  2580. .margin-xs {
  2581. margin: 10upx;
  2582. }
  2583. .margin-sm {
  2584. margin: 20upx;
  2585. }
  2586. .margin {
  2587. margin: 30upx;
  2588. }
  2589. .margin-lg {
  2590. margin: 40upx;
  2591. }
  2592. .margin-xl {
  2593. margin: 50upx;
  2594. }
  2595. .margin-top-xs {
  2596. margin-top: 10upx;
  2597. }
  2598. .margin-top-sm {
  2599. margin-top: 20upx;
  2600. }
  2601. .margin-top {
  2602. margin-top: 30upx;
  2603. }
  2604. .margin-top-lg {
  2605. margin-top: 40upx;
  2606. }
  2607. .margin-top-xl {
  2608. margin-top: 50upx;
  2609. }
  2610. .margin-right-xs {
  2611. margin-right: 10upx;
  2612. }
  2613. .margin-right-sm {
  2614. margin-right: 20upx;
  2615. }
  2616. .margin-right {
  2617. margin-right: 30upx;
  2618. }
  2619. .margin-right-lg {
  2620. margin-right: 40upx;
  2621. }
  2622. .margin-right-xl {
  2623. margin-right: 50upx;
  2624. }
  2625. .margin-bottom-xs {
  2626. margin-bottom: 10upx;
  2627. }
  2628. .margin-bottom-sm {
  2629. margin-bottom: 20upx;
  2630. }
  2631. .margin-bottom {
  2632. margin-bottom: 30upx;
  2633. }
  2634. .margin-bottom-lg {
  2635. margin-bottom: 40upx;
  2636. }
  2637. .margin-bottom-xl {
  2638. margin-bottom: 50upx;
  2639. }
  2640. .margin-left-xs {
  2641. margin-left: 10upx;
  2642. }
  2643. .margin-left-sm {
  2644. margin-left: 20upx;
  2645. }
  2646. .margin-left {
  2647. margin-left: 30upx;
  2648. }
  2649. .margin-left-lg {
  2650. margin-left: 40upx;
  2651. }
  2652. .margin-left-xl {
  2653. margin-left: 50upx;
  2654. }
  2655. .margin-lr-xs {
  2656. margin-left: 10upx;
  2657. margin-right: 10upx;
  2658. }
  2659. .margin-lr-sm {
  2660. margin-left: 20upx;
  2661. margin-right: 20upx;
  2662. }
  2663. .margin-lr {
  2664. margin-left: 30upx;
  2665. margin-right: 30upx;
  2666. }
  2667. .margin-lr-lg {
  2668. margin-left: 40upx;
  2669. margin-right: 40upx;
  2670. }
  2671. .margin-lr-xl {
  2672. margin-left: 50upx;
  2673. margin-right: 50upx;
  2674. }
  2675. .margin-tb-xs {
  2676. margin-top: 10upx;
  2677. margin-bottom: 10upx;
  2678. }
  2679. .margin-tb-sm {
  2680. margin-top: 20upx;
  2681. margin-bottom: 20upx;
  2682. }
  2683. .margin-tb {
  2684. margin-top: 30upx;
  2685. margin-bottom: 30upx;
  2686. }
  2687. .margin-tb-lg {
  2688. margin-top: 40upx;
  2689. margin-bottom: 40upx;
  2690. }
  2691. .margin-tb-xl {
  2692. margin-top: 50upx;
  2693. margin-bottom: 50upx;
  2694. }
  2695. .padding-0 {
  2696. padding: 0;
  2697. }
  2698. .padding-xs {
  2699. padding: 10upx;
  2700. }
  2701. .padding-sm {
  2702. padding: 20upx;
  2703. }
  2704. .padding {
  2705. padding: 30upx;
  2706. }
  2707. .padding-lg {
  2708. padding: 40upx;
  2709. }
  2710. .padding-xl {
  2711. padding: 50upx;
  2712. }
  2713. .padding-top-xs {
  2714. padding-top: 10upx;
  2715. }
  2716. .padding-top-sm {
  2717. padding-top: 20upx;
  2718. }
  2719. .padding-top {
  2720. padding-top: 30upx;
  2721. }
  2722. .padding-top-lg {
  2723. padding-top: 40upx;
  2724. }
  2725. .padding-top-xl {
  2726. padding-top: 50upx;
  2727. }
  2728. .padding-right-xs {
  2729. padding-right: 10upx;
  2730. }
  2731. .padding-right-sm {
  2732. padding-right: 20upx;
  2733. }
  2734. .padding-right {
  2735. padding-right: 30upx;
  2736. }
  2737. .padding-right-lg {
  2738. padding-right: 40upx;
  2739. }
  2740. .padding-right-xl {
  2741. padding-right: 50upx;
  2742. }
  2743. .padding-bottom-xs {
  2744. padding-bottom: 10upx;
  2745. }
  2746. .padding-bottom-sm {
  2747. padding-bottom: 20upx;
  2748. }
  2749. .padding-bottom {
  2750. padding-bottom: 30upx;
  2751. }
  2752. .padding-bottom-lg {
  2753. padding-bottom: 40upx;
  2754. }
  2755. .padding-bottom-xl {
  2756. padding-bottom: 50upx;
  2757. }
  2758. .padding-left-xs {
  2759. padding-left: 10upx;
  2760. }
  2761. .padding-left-sm {
  2762. padding-left: 20upx;
  2763. }
  2764. .padding-left {
  2765. padding-left: 30upx;
  2766. }
  2767. .padding-left-lg {
  2768. padding-left: 40upx;
  2769. }
  2770. .padding-left-xl {
  2771. padding-left: 50upx;
  2772. }
  2773. .padding-lr-xs {
  2774. padding-left: 10upx;
  2775. padding-right: 10upx;
  2776. }
  2777. .padding-lr-sm {
  2778. padding-left: 20upx;
  2779. padding-right: 20upx;
  2780. }
  2781. .padding-lr {
  2782. padding-left: 30upx;
  2783. padding-right: 30upx;
  2784. }
  2785. .padding-lr-lg {
  2786. padding-left: 40upx;
  2787. padding-right: 40upx;
  2788. }
  2789. .padding-lr-xl {
  2790. padding-left: 50upx;
  2791. padding-right: 50upx;
  2792. }
  2793. .padding-tb-xs {
  2794. padding-top: 10upx;
  2795. padding-bottom: 10upx;
  2796. }
  2797. .padding-tb-sm {
  2798. padding-top: 20upx;
  2799. padding-bottom: 20upx;
  2800. }
  2801. .padding-tb {
  2802. padding-top: 30upx;
  2803. padding-bottom: 30upx;
  2804. }
  2805. .padding-tb-lg {
  2806. padding-top: 40upx;
  2807. padding-bottom: 40upx;
  2808. }
  2809. .padding-tb-xl {
  2810. padding-top: 50upx;
  2811. padding-bottom: 50upx;
  2812. }
  2813. /* -- 浮动 -- */
  2814. .cf::after,
  2815. .cf::before {
  2816. content: " ";
  2817. display: table;
  2818. }
  2819. .cf::after {
  2820. clear: both;
  2821. }
  2822. .fl {
  2823. float: left;
  2824. }
  2825. .fr {
  2826. float: right;
  2827. }
  2828. /* ==================
  2829. 背景
  2830. ==================== */
  2831. .line-red::after,
  2832. .lines-red::after {
  2833. border-color: #e54d42;
  2834. }
  2835. .line-orange::after,
  2836. .lines-orange::after {
  2837. border-color: #f37b1d;
  2838. }
  2839. .line-yellow::after,
  2840. .lines-yellow::after {
  2841. border-color: #fbbd08;
  2842. }
  2843. .line-olive::after,
  2844. .lines-olive::after {
  2845. border-color: #8dc63f;
  2846. }
  2847. .line-green::after,
  2848. .lines-green::after {
  2849. border-color: #39b54a;
  2850. }
  2851. .line-cyan::after,
  2852. .lines-cyan::after {
  2853. border-color: #1cbbb4;
  2854. }
  2855. .line-blue::after,
  2856. .lines-blue::after {
  2857. border-color: #0081ff;
  2858. }
  2859. .line-purple::after,
  2860. .lines-purple::after {
  2861. border-color: #6739b6;
  2862. }
  2863. .line-mauve::after,
  2864. .lines-mauve::after {
  2865. border-color: #9c26b0;
  2866. }
  2867. .line-pink::after,
  2868. .lines-pink::after {
  2869. border-color: #e03997;
  2870. }
  2871. .line-brown::after,
  2872. .lines-brown::after {
  2873. border-color: #a5673f;
  2874. }
  2875. .line-grey::after,
  2876. .lines-grey::after {
  2877. border-color: #8799a3;
  2878. }
  2879. .line-gray::after,
  2880. .lines-gray::after {
  2881. border-color: #aaaaaa;
  2882. }
  2883. .line-black::after,
  2884. .lines-black::after {
  2885. border-color: #333333;
  2886. }
  2887. .line-white::after,
  2888. .lines-white::after {
  2889. border-color: #ffffff;
  2890. }
  2891. .bg-red {
  2892. background-color: #e54d42;
  2893. color: #ffffff;
  2894. }
  2895. .bg-orange {
  2896. background-color: #f37b1d;
  2897. color: #ffffff;
  2898. }
  2899. .bg-yellow {
  2900. background-color: #fbbd08;
  2901. color: #333333;
  2902. }
  2903. .bg-yellow {
  2904. background-color: #fbbd08;
  2905. color: #333333;
  2906. }
  2907. .bg-olive {
  2908. background-color: #8dc63f;
  2909. color: #ffffff;
  2910. }
  2911. .bg-green {
  2912. background-color: #39b54a;
  2913. color: #ffffff;
  2914. }
  2915. .bg-cyan {
  2916. background-color: #1cbbb4;
  2917. color: #ffffff;
  2918. }
  2919. /* .bg-blue {
  2920. background-color: #4a85b2;
  2921. color: #ffffff;
  2922. } */
  2923. .bg-blue {
  2924. background-color: #0084bf;
  2925. color: #ffffff;
  2926. }
  2927. .bg-purple {
  2928. background-color: #6739b6;
  2929. color: #ffffff;
  2930. }
  2931. .bg-mauve {
  2932. background-color: #9c26b0;
  2933. color: #ffffff;
  2934. }
  2935. .bg-pink {
  2936. background-color: #e03997;
  2937. color: #ffffff;
  2938. }
  2939. .bg-brown {
  2940. background-color: #a5673f;
  2941. color: #ffffff;
  2942. }
  2943. .bg-grey {
  2944. background-color: #8799a3;
  2945. color: #ffffff;
  2946. }
  2947. .bg-gray {
  2948. background-color: #f0f0f0;
  2949. color: #333333;
  2950. }
  2951. .bg-black {
  2952. background-color: #333333;
  2953. color: #ffffff;
  2954. }
  2955. .bg-white {
  2956. background-color: #ffffff;
  2957. color: #666666;
  2958. }
  2959. .bg-shadeTop {
  2960. background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.01));
  2961. color: #ffffff;
  2962. }
  2963. .bg-shadeBottom {
  2964. background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 1));
  2965. color: #ffffff;
  2966. }
  2967. .bg-red.light {
  2968. color: #e54d42;
  2969. background-color: #fadbd9;
  2970. }
  2971. .bg-orange.light {
  2972. color: #f37b1d;
  2973. background-color: #fde6d2;
  2974. }
  2975. .bg-yellow.light {
  2976. color: #fbbd08;
  2977. background-color: #fef2ced2;
  2978. }
  2979. .bg-olive.light {
  2980. color: #8dc63f;
  2981. background-color: #e8f4d9;
  2982. }
  2983. .bg-green.light {
  2984. color: #39b54a;
  2985. background-color: #d7f0dbff;
  2986. }
  2987. .bg-cyan.light {
  2988. color: #1cbbb4;
  2989. background-color: #d2f1f0;
  2990. }
  2991. .bg-blue.light {
  2992. color: #0081ff;
  2993. background-color: #cce6ff;
  2994. }
  2995. .bg-purple.light {
  2996. color: #6739b6;
  2997. background-color: #e1d7f0;
  2998. }
  2999. .bg-mauve.light {
  3000. color: #9c26b0;
  3001. background-color: #ebd4ef;
  3002. }
  3003. .bg-pink.light {
  3004. color: #e03997;
  3005. background-color: #f9d7ea;
  3006. }
  3007. .bg-brown.light {
  3008. color: #a5673f;
  3009. background-color: #ede1d9;
  3010. }
  3011. .bg-grey.light {
  3012. color: #8799a3;
  3013. background-color: #e7ebed;
  3014. }
  3015. .bg-gradual-red {
  3016. background-image: linear-gradient(45deg, #f43f3b, #ec008c);
  3017. color: #ffffff;
  3018. }
  3019. .bg-gradual-orange {
  3020. background-image: linear-gradient(45deg, #ff9700, #ed1c24);
  3021. color: #ffffff;
  3022. }
  3023. .bg-gradual-orange2 {
  3024. background-image: linear-gradient(45deg, #ba6c00, #969670);
  3025. color: #ffffff;
  3026. }
  3027. .bg-gradual-green {
  3028. background-image: linear-gradient(45deg, #39b54a, #8dc63f);
  3029. color: #ffffff;
  3030. }
  3031. .bg-gradual-purple {
  3032. background-image: linear-gradient(45deg, #9000ff, #5e00ff);
  3033. color: #ffffff;
  3034. }
  3035. .bg-gradual-pink {
  3036. background-image: linear-gradient(45deg, #ec008c, #6739b6);
  3037. color: #ffffff;
  3038. }
  3039. .bg-gradual-blue {
  3040. background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  3041. color: #ffffff;
  3042. }
  3043. .shadow[class*="-red"] {
  3044. box-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
  3045. }
  3046. .shadow[class*="-orange"] {
  3047. box-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
  3048. }
  3049. .shadow[class*="-yellow"] {
  3050. box-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
  3051. }
  3052. .shadow[class*="-olive"] {
  3053. box-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
  3054. }
  3055. .shadow[class*="-green"] {
  3056. box-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
  3057. }
  3058. .shadow[class*="-cyan"] {
  3059. box-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
  3060. }
  3061. .shadow[class*="-blue"] {
  3062. box-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
  3063. }
  3064. .shadow[class*="-purple"] {
  3065. box-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
  3066. }
  3067. .shadow[class*="-mauve"] {
  3068. box-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
  3069. }
  3070. .shadow[class*="-pink"] {
  3071. box-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
  3072. }
  3073. .shadow[class*="-brown"] {
  3074. box-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
  3075. }
  3076. .shadow[class*="-grey"] {
  3077. box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
  3078. }
  3079. .shadow[class*="-gray"] {
  3080. box-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
  3081. }
  3082. .shadow[class*="-black"] {
  3083. box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
  3084. }
  3085. .shadow[class*="-white"] {
  3086. box-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
  3087. }
  3088. .text-shadow[class*="-red"] {
  3089. text-shadow: 6upx 6upx 8upx rgba(204, 69, 59, 0.2);
  3090. }
  3091. .text-shadow[class*="-orange"] {
  3092. text-shadow: 6upx 6upx 8upx rgba(217, 109, 26, 0.2);
  3093. }
  3094. .text-shadow[class*="-yellow"] {
  3095. text-shadow: 6upx 6upx 8upx rgba(224, 170, 7, 0.2);
  3096. }
  3097. .text-shadow[class*="-olive"] {
  3098. text-shadow: 6upx 6upx 8upx rgba(124, 173, 55, 0.2);
  3099. }
  3100. .text-shadow[class*="-green"] {
  3101. text-shadow: 6upx 6upx 8upx rgba(48, 156, 63, 0.2);
  3102. }
  3103. .text-shadow[class*="-cyan"] {
  3104. text-shadow: 6upx 6upx 8upx rgba(28, 187, 180, 0.2);
  3105. }
  3106. .text-shadow[class*="-blue"] {
  3107. text-shadow: 6upx 6upx 8upx rgba(0, 102, 204, 0.2);
  3108. }
  3109. .text-shadow[class*="-purple"] {
  3110. text-shadow: 6upx 6upx 8upx rgba(88, 48, 156, 0.2);
  3111. }
  3112. .text-shadow[class*="-mauve"] {
  3113. text-shadow: 6upx 6upx 8upx rgba(133, 33, 150, 0.2);
  3114. }
  3115. .text-shadow[class*="-pink"] {
  3116. text-shadow: 6upx 6upx 8upx rgba(199, 50, 134, 0.2);
  3117. }
  3118. .text-shadow[class*="-brown"] {
  3119. text-shadow: 6upx 6upx 8upx rgba(140, 88, 53, 0.2);
  3120. }
  3121. .text-shadow[class*="-grey"] {
  3122. text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
  3123. }
  3124. .text-shadow[class*="-gray"] {
  3125. text-shadow: 6upx 6upx 8upx rgba(114, 130, 138, 0.2);
  3126. }
  3127. .text-shadow[class*="-black"] {
  3128. text-shadow: 6upx 6upx 8upx rgba(26, 26, 26, 0.2);
  3129. }
  3130. .bg-img {
  3131. background-size: cover;
  3132. background-position: center;
  3133. background-repeat: no-repeat;
  3134. }
  3135. .bg-mask {
  3136. background-color: #333333;
  3137. position: relative;
  3138. }
  3139. .bg-mask::after {
  3140. content: "";
  3141. border-radius: inherit;
  3142. width: 100%;
  3143. height: 100%;
  3144. display: block;
  3145. background-color: rgba(0, 0, 0, 0.4);
  3146. position: absolute;
  3147. left: 0;
  3148. right: 0;
  3149. bottom: 0;
  3150. top: 0;
  3151. }
  3152. .bg-mask view,
  3153. .bg-mask cover-view {
  3154. z-index: 5;
  3155. position: relative;
  3156. }
  3157. .bg-video {
  3158. position: relative;
  3159. }
  3160. .bg-video video {
  3161. display: block;
  3162. height: 100%;
  3163. width: 100%;
  3164. -o-object-fit: cover;
  3165. object-fit: cover;
  3166. position: absolute;
  3167. top: 0;
  3168. z-index: 0;
  3169. pointer-events: none;
  3170. }
  3171. /* ==================
  3172. 文本
  3173. ==================== */
  3174. .text-xs {
  3175. font-size: 20upx;
  3176. }
  3177. .text-sm {
  3178. font-size: 24upx;
  3179. }
  3180. .text-df {
  3181. font-size: 28upx;
  3182. }
  3183. .text-lg {
  3184. font-size: 32upx;
  3185. }
  3186. .text-xl {
  3187. font-size: 36upx;
  3188. }
  3189. .text-xxl {
  3190. font-size: 44upx;
  3191. }
  3192. .text-sl {
  3193. font-size: 80upx;
  3194. }
  3195. .text-xsl {
  3196. font-size: 120upx;
  3197. }
  3198. .text-Abc {
  3199. text-transform: Capitalize;
  3200. }
  3201. .text-ABC {
  3202. text-transform: Uppercase;
  3203. }
  3204. .text-abc {
  3205. text-transform: Lowercase;
  3206. }
  3207. .text-price::before {
  3208. content: "¥";
  3209. font-size: 80%;
  3210. margin-right: 4upx;
  3211. }
  3212. .text-cut {
  3213. text-overflow: ellipsis;
  3214. white-space: nowrap;
  3215. overflow: hidden;
  3216. }
  3217. .text-bold {
  3218. font-weight: bold;
  3219. }
  3220. .text-center {
  3221. text-align: center;
  3222. }
  3223. .text-content {
  3224. line-height: 1.6;
  3225. }
  3226. .text-left {
  3227. text-align: left;
  3228. }
  3229. .text-right {
  3230. text-align: right;
  3231. }
  3232. .text-red,
  3233. .line-red,
  3234. .lines-red {
  3235. color: #e54d42;
  3236. }
  3237. .text-orange,
  3238. .line-orange,
  3239. .lines-orange {
  3240. color: #f37b1d;
  3241. }
  3242. .text-yellow,
  3243. .line-yellow,
  3244. .lines-yellow {
  3245. color: #fbbd08;
  3246. }
  3247. .text-olive,
  3248. .line-olive,
  3249. .lines-olive {
  3250. color: #8dc63f;
  3251. }
  3252. .text-green,
  3253. .line-green,
  3254. .lines-green {
  3255. color: #39b54a;
  3256. }
  3257. .text-cyan,
  3258. .line-cyan,
  3259. .lines-cyan {
  3260. color: #1cbbb4;
  3261. }
  3262. .text-blue,
  3263. .line-blue,
  3264. .lines-blue {
  3265. color: #0081ff;
  3266. }
  3267. .text-purple,
  3268. .line-purple,
  3269. .lines-purple {
  3270. color: #6739b6;
  3271. }
  3272. .text-mauve,
  3273. .line-mauve,
  3274. .lines-mauve {
  3275. color: #9c26b0;
  3276. }
  3277. .text-pink,
  3278. .line-pink,
  3279. .lines-pink {
  3280. color: #e03997;
  3281. }
  3282. .text-brown,
  3283. .line-brown,
  3284. .lines-brown {
  3285. color: #a5673f;
  3286. }
  3287. .text-grey,
  3288. .line-grey,
  3289. .lines-grey {
  3290. color: #8799a3;
  3291. }
  3292. .text-gray,
  3293. .line-gray,
  3294. .lines-gray {
  3295. color: #aaaaaa;
  3296. }
  3297. .text-black,
  3298. .line-black,
  3299. .lines-black {
  3300. color: #333333;
  3301. }
  3302. .text-white,
  3303. .line-white,
  3304. .lines-white {
  3305. color: #ffffff;
  3306. }
  3307. .u-text-weight {
  3308. font-weight: bold;
  3309. }
  3310. .u-line-height {
  3311. line-height: 50rpx;
  3312. }
  3313. //数据为空的样式
  3314. .fa-empty {
  3315. padding-top: 45%;
  3316. }
  3317. .share-btn {
  3318. padding: 0;
  3319. margin: 0;
  3320. border: 0;
  3321. background-color: transparent;
  3322. line-height: inherit;
  3323. border-radius: 0;
  3324. font-size: inherit;
  3325. color: #999;
  3326. }
  3327. .share-btn::after {
  3328. border: none;
  3329. }
  3330. /* #ifdef MP-BAIDU */
  3331. .u-radio__icon-wrap,
  3332. .u-checkbox__icon-wrap {
  3333. line-height: 0;
  3334. }
  3335. /* #endif */
  3336. .u-text-weight {
  3337. font-weight: bold;
  3338. }
  3339. .u-line-height {
  3340. line-height: 50rpx;
  3341. }
  3342. //数据为空的样式
  3343. .fa-empty {
  3344. padding-top: 45%;
  3345. }
  3346. .share-btn {
  3347. padding: 0;
  3348. margin: 0;
  3349. border: 0;
  3350. background-color: transparent;
  3351. line-height: inherit;
  3352. border-radius: 0;
  3353. font-size: inherit;
  3354. color: #999;
  3355. }
  3356. .share-btn::after {
  3357. border: none;
  3358. }
  3359. // #ifdef MP-BAIDU
  3360. .u-radio__icon-wrap,
  3361. .u-checkbox__icon-wrap {
  3362. line-height: 0;
  3363. }
  3364. // #endif