baselive.css 46 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802
  1. body,
  2. page {
  3. background: #F7F7F7;
  4. font-size: 28rpx;
  5. color: #222222;
  6. }
  7. image{will-change: transform}
  8. /* 全局图片加速 */
  9. /* image{will-change: transform;} */
  10. /* APP 磨砂玻璃状态栏高度 */
  11. /* #ifdef APP-PLUS */
  12. .edgeInsetTop {
  13. height: var(--window-top);
  14. }
  15. .edgeInsetBottom {
  16. height: var(--window-bottom);
  17. }
  18. /* #endif */
  19. /* 绝对定位的视图需要考虑 tabBar 遮挡的问题,bottom 应该加上 tabBar 的高度 */
  20. .fixedView {
  21. position: fixed;
  22. bottom: var(--window-bottom);
  23. }
  24. .safeAreaBottom {
  25. height: 100rpx;
  26. height: calc(env(safe-area-inset-bottom) + 100rpx);
  27. width: 100%;
  28. }
  29. [class*="wlIcon-"] {
  30. font-family: "wlIcon";
  31. font-size: inherit;
  32. font-style: normal;
  33. }
  34. .cu-dialog {
  35. background-color: #ffffff;
  36. }
  37. .cu-modal {
  38. z-index: 990;
  39. }
  40. .cu-modal.bottom-modal .cu-dialog {
  41. border-radius: 20rpx 20rpx 0 0;
  42. }
  43. .cu-modal.wanl-share .cu-dialog{
  44. background-color: transparent;
  45. border-radius: 0;
  46. }
  47. .margin-bj {
  48. margin: 25rpx;
  49. }
  50. .margin-top-bj {
  51. margin-top: 25rpx;
  52. }
  53. .margin-right-bj {
  54. margin-right: 25rpx;
  55. }
  56. .margin-bottom-bj {
  57. margin-bottom: 25rpx;
  58. }
  59. .margin-left-bj {
  60. margin-left: 25rpx;
  61. }
  62. .margin-lr-bj {
  63. margin-left: 25rpx;
  64. margin-right: 25rpx;
  65. }
  66. .margin-tb-bj {
  67. margin-top: 25rpx;
  68. margin-bottom: 25rpx;
  69. }
  70. .padding-bj {
  71. padding: 25rpx;
  72. }
  73. .padding-top-bj {
  74. padding-top: 25rpx;
  75. }
  76. .padding-right-bj {
  77. padding-right: 25rpx;
  78. }
  79. .padding-left-bj {
  80. padding-left: 25rpx;
  81. }
  82. .padding-lr-bj {
  83. padding-left: 25rpx;
  84. padding-right: 25rpx;
  85. }
  86. .padding-tb-bj {
  87. padding-top: 25rpx;
  88. padding-bottom: 25rpx;
  89. }
  90. .padding-bottom-bj {
  91. padding-bottom: 25rpx;
  92. }
  93. .text-min {
  94. font-size: 24rpx;
  95. }
  96. .text-wl {
  97. font-size: 26rpx;
  98. }
  99. .text-bold1 {
  100. font-weight: 100;
  101. }
  102. .text-bold2 {
  103. font-weight: 200;
  104. }
  105. .text-bold4 {
  106. font-weight: 400;
  107. }
  108. .text-bold5 {
  109. font-weight: 500;
  110. }
  111. .text-bold6 {
  112. font-weight: 600;
  113. }
  114. .text-bold7 {
  115. font-weight: 700;
  116. }
  117. .text-bold8 {
  118. font-weight: 800;
  119. }
  120. .text-dec {
  121. text-decoration: line-through;
  122. }
  123. .text-cut-2 {
  124. width: 100%;
  125. overflow: hidden;
  126. text-overflow: ellipsis;
  127. display: -webkit-box;
  128. -webkit-box-orient: vertical;
  129. -webkit-line-clamp: 2;
  130. }
  131. .radius-bock {
  132. border-radius: 18rpx;
  133. overflow: hidden;
  134. }
  135. .bg-gradual-yellow {
  136. background-image: linear-gradient(to left, #ff9700, #ffca00);
  137. color: white;
  138. }
  139. .bg-transparent{
  140. background-color: transparent !important;
  141. }
  142. .bg-white {
  143. color: #222222;
  144. }
  145. .bg-nav {
  146. background-color: #f9f9f9;
  147. }
  148. .bg-bgcolor {
  149. background-color: #F7F7F7;
  150. }
  151. .wanl-black {
  152. color: black;
  153. }
  154. /* 标准黑 */
  155. .wanl-pip {
  156. color: #222222;
  157. }
  158. /* 灰色 */
  159. .wanl-gray {
  160. color: #828282;
  161. }
  162. /* 深灰 */
  163. .wanl-gray-dark {
  164. color: #666666;
  165. }
  166. /* 浅灰 */
  167. .wanl-gray-light {
  168. color: #999999;
  169. }
  170. .wanl-orange {
  171. color: #fe6600;
  172. }
  173. .wanl-red {
  174. color: #ff243a;
  175. }
  176. /* 字体渐变 - 红色 */
  177. .wanl-text-red {
  178. background-image: -webkit-linear-gradient(right, #f43f3b, #ec008c);
  179. -webkit-background-clip: text;
  180. -webkit-text-fill-color: transparent;
  181. }
  182. /* 黄色 */
  183. .wanl-text-yellow {
  184. background-image: -webkit-linear-gradient(right, #ff9700, #ffca00);
  185. -webkit-background-clip: text;
  186. -webkit-text-fill-color: transparent;
  187. }
  188. /* 橙色 */
  189. .wanl-text-orange {
  190. background-image: -webkit-linear-gradient(right, #ff9700, #ed1c24);
  191. -webkit-background-clip: text;
  192. -webkit-text-fill-color: transparent;
  193. }
  194. /* 紫罗兰 */
  195. .wanl-text-violet {
  196. background-image: -webkit-linear-gradient(right, #709cff, #9000ff);
  197. -webkit-background-clip: text;
  198. -webkit-text-fill-color: transparent;
  199. }
  200. /* 蓝色 */
  201. .wanl-text-blue {
  202. background-image: -webkit-linear-gradient(right, #0081ff, #1cbbb4);
  203. -webkit-background-clip: text;
  204. -webkit-text-fill-color: transparent;
  205. }
  206. /* 浅蓝色 */
  207. .wanl-text-light-blue {
  208. background-image: -webkit-linear-gradient(right, #55c9fc, #0c79ff);
  209. -webkit-background-clip: text;
  210. -webkit-text-fill-color: transparent;
  211. }
  212. /* 粉色 */
  213. .wanl-text-pink {
  214. background-image: -webkit-linear-gradient(right, #ec008c, #6739b6);
  215. -webkit-background-clip: text;
  216. -webkit-text-fill-color: transparent;
  217. }
  218. /* 绿色 */
  219. .wanl-text-green {
  220. background-image: -webkit-linear-gradient(right, #39b54a, #8dc63f);
  221. -webkit-background-clip: text;
  222. -webkit-text-fill-color: transparent;
  223. }
  224. /* 紫色 */
  225. .wanl-text-purple {
  226. background-image: -webkit-linear-gradient(right, #9000ff, #5e00ff);
  227. -webkit-background-clip: text;
  228. -webkit-text-fill-color: transparent;
  229. }
  230. /* 白灰 */
  231. .wanl-text-white {
  232. background-image: -webkit-linear-gradient(top, #ffffff, #cccccc);
  233. -webkit-background-clip: text;
  234. -webkit-text-fill-color: transparent;
  235. }
  236. .cu-custom .cu-tag.badge {
  237. top: 10rpx;
  238. right: -15rpx;
  239. }
  240. .cu-custom .cu-bar {
  241. background-size: 100%;
  242. }
  243. .cu-custom .bar-bg {
  244. background-size: 100%;
  245. width: 100%;
  246. position: absolute;
  247. top: 0;
  248. left: 0;
  249. z-index: -1;
  250. }
  251. .cu-custom .search-swiper {
  252. width: 100%;
  253. height: 100%;
  254. }
  255. .cu-bar .search-form {
  256. font-size: 28rpx;
  257. }
  258. .cu-bar .action:first-child>text[class*="wlIcon-"] {
  259. margin-left: 0;
  260. margin-right: -0.1em;
  261. }
  262. .placeholder {
  263. color: #999;
  264. font-size: 28rpx;
  265. }
  266. /* 万联渐变背景色*/
  267. /* 橘红色 */
  268. .wanl-bg-redorange {
  269. background: #ff3d33;
  270. background-image: linear-gradient(90deg, #ff6333 0, #fe6600 97%);
  271. color: white;
  272. }
  273. .wanl-bg-redorange-light {
  274. background-image: linear-gradient(90deg, #ffc0ae 0, #ffa7b0 97%);
  275. color: white;
  276. }
  277. /* 橙色 */
  278. .wanl-bg-orange {
  279. color: white;
  280. background-image: linear-gradient(-90deg, #ff4950 0, #ff8123 100%);
  281. }
  282. /* 粉色 */
  283. .wanl-bg-pink {
  284. color: white;
  285. background-image: linear-gradient(-90deg, #fa3b26 3%, #ff4d8a 96%);
  286. }
  287. /* 蓝色 */
  288. .wanl-bg-blue {
  289. color: white;
  290. background-image: linear-gradient(-90deg, #2676fa 0, #23d7ff 100%);
  291. }
  292. /* 蓝色 */
  293. .wanl-bg-nav {
  294. background-color: #f8f8f8;
  295. color: #000000;
  296. }
  297. /* 吸顶容器 */
  298. .wanl-sticky-box {
  299. /* #ifndef APP-PLUS-NVUE */
  300. display: flex;
  301. position: -webkit-sticky;
  302. /* #endif */
  303. position: sticky;
  304. top: var(--window-top);
  305. z-index: 1025;
  306. flex-direction: row;
  307. }
  308. .wanl-sticky-box .bg-white {
  309. background-color: rgba(255, 255, 255, .9);
  310. }
  311. /* 数字框 */
  312. .wanl-numberBox {
  313. width: 200rpx;
  314. height: 58rpx;
  315. border-radius: 100rpx;
  316. padding: 8rpx 6rpx 6rpx 6rpx;
  317. display: flex;
  318. align-items: center;
  319. justify-content: space-between;
  320. }
  321. .wanl-numberBox text {
  322. background-color: #f2f2f2;
  323. padding: 8rpx;
  324. font-size: 30rpx;
  325. }
  326. .wanl-numberBox.solid:after {
  327. border: 1px solid #dddddd;
  328. }
  329. /* 优惠券 */
  330. .wanl-ticket {
  331. display: flex;
  332. align-items: center;
  333. margin-right: 18rpx;
  334. }
  335. .wanl-ticket .ticket-price {
  336. height: 60rpx;
  337. line-height: 60rpx;
  338. position: relative;
  339. background: #ff5700;
  340. color: white;
  341. /* border-radius: 3rpx 0 0 3rpx; */
  342. padding-left: 12rpx;
  343. padding-right: 10rpx;
  344. font-weight: bold;
  345. }
  346. .wanl-ticket .ticket-title {
  347. font-size: 20rpx;
  348. display: flex;
  349. align-items: center;
  350. color: #ff5700;
  351. height: 60rpx;
  352. position: relative;
  353. background-color: #fff;
  354. border-radius: 0 6rpx 6rpx 0;
  355. border: #ff5700 solid 1px;
  356. border-left: 0;
  357. padding: 0 8rpx;
  358. }
  359. .wanl-ticket .ticket-price:before {
  360. content: "";
  361. width: 18rpx;
  362. height: 16rpx;
  363. background-color: #F7F7F7;
  364. position: absolute;
  365. top: 50%;
  366. left: -10rpx;
  367. margin-top: -8rpx;
  368. border-radius: 50%;
  369. z-index: 1;
  370. }
  371. .position-relative{
  372. position: relative;
  373. }
  374. /* 弹出层 */
  375. .wanl-modal {
  376. position: relative;
  377. min-height: 500rpx;
  378. max-height: 1200rpx;
  379. padding-bottom: 128rpx;
  380. padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
  381. }
  382. .wanl-modal .head {
  383. display: flex;
  384. position: relative;
  385. align-items: center;
  386. }
  387. .wanl-modal .head .content {
  388. display: flex;
  389. justify-content: center;
  390. width: 100%;
  391. }
  392. .wanl-modal .head .close {
  393. position: absolute;
  394. right: 25rpx;
  395. }
  396. .wanl-modal .listbox {
  397. text-align: left;
  398. }
  399. .wanl-modal .listbox .name {
  400. position: relative;
  401. padding-left: 60rpx;
  402. color: #333;
  403. }
  404. .wanl-modal .listbox .name>text[class*="wlIcon-"] {
  405. position: absolute;
  406. top: 5rpx;
  407. left: 5rpx;
  408. color: #ff243a;
  409. }
  410. .wanl-modal .listbox .description {
  411. padding: 20rpx 0 40rpx 60rpx;
  412. }
  413. .wanl-modal .scroll-y {
  414. text-align: left;
  415. width: 100%;
  416. height: 800rpx;
  417. padding: 25rpx;
  418. padding-top: 0;
  419. }
  420. .wanl-modal .scroll-y .table {
  421. display: flex;
  422. justify-content: space-between;
  423. width: 100%;
  424. }
  425. .wanl-modal .scroll-y .table .name {
  426. width: 23%;
  427. padding: 25rpx 0;
  428. }
  429. .wanl-modal .scroll-y .table .value {
  430. width: 75%;
  431. padding: 25rpx 0;
  432. }
  433. .wanl-modal .foot {
  434. position: absolute;
  435. padding-top: 25rpx;
  436. bottom: 0;
  437. width: 100%;
  438. height: 128rpx;
  439. height: calc(118rpx + env(safe-area-inset-bottom));
  440. }
  441. .wanl-modal .foot .cu-btn {
  442. padding: 0;
  443. width: 50%;
  444. height: 78rpx;
  445. }
  446. .wanl-modal .foot .cu-btn.complete {
  447. width: 100%;
  448. }
  449. /* 规格 */
  450. .wanl-modal.option .head {
  451. text-align: left;
  452. }
  453. .wanl-modal.option .head .close {
  454. top: 25rpx;
  455. line-height: 45rpx;
  456. }
  457. .wanl-modal.option .head .cu-avatar {
  458. width: 200rpx;
  459. height: 220rpx;
  460. }
  461. .wanl-modal.option .opt .tag {
  462. display: flex;
  463. flex-wrap: wrap;
  464. }
  465. .wanl-modal.option .opt .tag .cu-tag {
  466. margin-right: 25rpx;
  467. margin-top: 20rpx;
  468. padding: 0px 25rpx;
  469. height: 65rpx;
  470. background-color: #f6f6f6;
  471. border-radius: 12rpx;
  472. color: #222222;
  473. }
  474. .wanl-modal.option .opt .tag .cu-tag.active {
  475. color: #eb5d2a;
  476. background-color: #fdf9f9;
  477. }
  478. .wanl-modal.option .opt .tag .cu-tag.active:after {
  479. content: " ";
  480. width: 200%;
  481. height: 200%;
  482. position: absolute;
  483. top: 0;
  484. left: 0;
  485. border: 1upx solid currentColor;
  486. transform: scale(0.5);
  487. transform-origin: 0 0;
  488. box-sizing: border-box;
  489. border-radius: 25rpx;
  490. z-index: 1;
  491. pointer-events: none;
  492. }
  493. .wanl-modal.option .opt .tag .cu-tag.disabled {
  494. color: #bbb;
  495. background-color: #f9f9f9;
  496. }
  497. .wanl-modal.option .opt .tag .cu-tag.noactive {
  498. color: #cacaca;
  499. background-color: #efefef;
  500. }
  501. .wanl-modal.option .opt .tag .cu-tag+.cu-tag {
  502. margin-left: 0;
  503. }
  504. .wanl-modal.option .number {
  505. display: flex;
  506. justify-content: space-between;
  507. align-items: center;
  508. }
  509. /* 菜单 */
  510. .wanl-modal-menu {
  511. padding: 0 25rpx;
  512. box-sizing: border-box;
  513. padding-top: 18rpx;
  514. }
  515. /* grid 1-2-2布局 */
  516. .grid.col-1-2-2>view {
  517. width: 50%;
  518. }
  519. .grid.col-1-2-2>view:nth-child(1) {
  520. width: 100%;
  521. }
  522. /* grid 1-1_2布局 */
  523. .grid.col-1-1_2>view {
  524. width: 50%;
  525. }
  526. .grid.col-1-1_2>view:nth-child(1) {
  527. width: 100%;
  528. }
  529. .grid.col-1-1_2>view:nth-child(2) {
  530. width: 50%;
  531. }
  532. .grid.col-1-1_2>view:nth-child(3),
  533. .grid.col-1-1_2>view:nth-child(4) {
  534. width: 25%;
  535. }
  536. /* grid 2-1_2布局 */
  537. .grid.col-2-1_2>view {
  538. width: 50%;
  539. }
  540. .grid.col-2-1_2>view:nth-child(1),
  541. .grid.col-2-1_2>view:nth-child(2),
  542. .grid.col-2-1_2>view:nth-child(3) {
  543. width: 50%;
  544. }
  545. .grid.col-2-1_2>view:nth-child(4),
  546. .grid.col-2-1_2>view:nth-child(5) {
  547. width: 25%;
  548. }
  549. /* grid 2-2_1布局 */
  550. .grid.col-2-2_1>view {
  551. width: 50%;
  552. }
  553. .grid.col-2-2_1>view:nth-child(1),
  554. .grid.col-2-2_1>view:nth-child(2) {
  555. width: 50%;
  556. }
  557. .grid.col-2-2_1>view:nth-child(3),
  558. .grid.col-2-2_1>view:nth-child(4) {
  559. width: 25%;
  560. }
  561. /* grid 2-2-1_2布局 */
  562. .grid.col-2-2-1_2>view {
  563. width: 50%;
  564. }
  565. .grid.col-2-2-1_2>view:nth-child(1),
  566. .grid.col-2-2-1_2>view:nth-child(2),
  567. .grid.col-2-2-1_2>view:nth-child(3),
  568. .grid.col-2-2-1_2>view:nth-child(4),
  569. .grid.col-2-2-1_2>view:nth-child(5) {
  570. width: 50%;
  571. }
  572. .grid.col-2-2-1_2>view:nth-child(6),
  573. .grid.col-2-2-1_2>view:nth-child(7) {
  574. width: 25%;
  575. }
  576. /* grid 2-4布局 */
  577. .grid.col-2-4>view {
  578. width: 50%;
  579. }
  580. .grid.col-2-4>view:nth-child(3),
  581. .grid.col-2-4>view:nth-child(4),
  582. .grid.col-2-4>view:nth-child(5),
  583. .grid.col-2-4>view:nth-child(6) {
  584. width: 25%;
  585. }
  586. /* grid 2-2-4布局 */
  587. .grid.col-2-2-4>view {
  588. width: 50%;
  589. }
  590. .grid.col-2-2-4>view:nth-child(5),
  591. .grid.col-2-2-4>view:nth-child(6),
  592. .grid.col-2-2-4>view:nth-child(7),
  593. .grid.col-2-2-4>view:nth-child(8) {
  594. width: 25%;
  595. }
  596. /* 万联标签 */
  597. .wanl-tag {
  598. display: flex;
  599. align-items: center;
  600. }
  601. .wanl-tag .triangle {
  602. width: 0;
  603. height: 0;
  604. border-top: 18rpx solid transparent;
  605. border-bottom: 18rpx solid transparent;
  606. border-right: 18rpx solid #ffdb00;
  607. }
  608. .wanl-tag .content {
  609. background-color: #ffdb00;
  610. border-radius: 0 6rpx 6rpx 0;
  611. height: 36rpx;
  612. line-height: 36rpx;
  613. vertical-align: inherit;
  614. font-size: 24rpx;
  615. padding-right: 16rpx;
  616. padding-left: 8rpx;
  617. color: #5c1d10;
  618. }
  619. /* 左右圆角 */
  620. .round-left {
  621. border-radius: 5000rpx 0 0 5000rpx;
  622. }
  623. .round-right {
  624. border-radius: 0 5000rpx 5000rpx 0;
  625. }
  626. .cu-bar .action.transparent:first-child {
  627. margin-left: 18rpx;
  628. font-size: 40rpx;
  629. }
  630. .cu-bar .action.transparent:last-child {
  631. margin-right: 18rpx;
  632. font-size: 40rpx;
  633. }
  634. .cu-tag:empty:not([class*="wlIcon-"]) {
  635. z-index: 2;
  636. }
  637. .wanl-list .drawer .scroll {
  638. width: 100%;
  639. height: 100%;
  640. padding-bottom: 116rpx;
  641. padding-bottom: calc(116rpx + env(safe-area-inset-bottom));
  642. padding-top: 15rpx;
  643. padding-top: calc(5rpx + env(safe-area-inset-top));
  644. }
  645. .wanl-list .drawer .scroll .title {
  646. color: #666666;
  647. font-size: 24rpx;
  648. padding: 25rpx 20rpx;
  649. display: flex;
  650. align-items: center;
  651. justify-content: space-between;
  652. }
  653. .wanl-list .drawer .scroll .from {
  654. display: flex;
  655. padding: 0 20rpx 25rpx 20rpx;
  656. }
  657. .wanl-list .drawer .scroll .from>text {
  658. padding: 0 25rpx;
  659. line-height: 60rpx;
  660. color: #f1f1f1;
  661. }
  662. .wanl-list .drawer .scroll .from>input {
  663. background: #f8f8f8;
  664. font-size: 24rpx;
  665. color: #999;
  666. height: 60rpx;
  667. text-align: center;
  668. border-radius: 999rpx;
  669. }
  670. .wanl-list .drawer .scroll .list {
  671. display: grid;
  672. grid-template-columns: repeat(3, 1fr);
  673. /* 相当于 1fr 1fr 1fr */
  674. grid-gap: 16rpx;
  675. /* grid-column-gap 和 grid-row-gap的简写 */
  676. grid-auto-flow: row;
  677. font-size: 25rpx;
  678. color: #666666;
  679. padding: 0 16rpx 25rpx 16rpx;
  680. }
  681. .wanl-list .drawer .scroll .list>text {
  682. display: flex;
  683. align-items: center;
  684. justify-content: center;
  685. background: #f8f8f8;
  686. border-radius: 5rpx;
  687. min-height: 70rpx;
  688. position: relative;
  689. overflow: hidden;
  690. }
  691. .wanl-list .drawer .scroll .list .active {
  692. background: #feeae1;
  693. color: #ff4f00;
  694. }
  695. .wanl-list .drawer .scroll .list .active::before {
  696. font-family: "wlIcon";
  697. content: "\e6db";
  698. position: absolute;
  699. right: -1px;
  700. top: -1px;
  701. font-size: 30rpx;
  702. }
  703. .wanl-list .drawer .footer {
  704. position: fixed;
  705. bottom: 0;
  706. background: #fff;
  707. display: flex;
  708. justify-content: flex-end;
  709. padding: 20rpx 26rpx 0 0;
  710. width: 100%;
  711. height: 116rpx;
  712. height: calc(116rpx + env(safe-area-inset-bottom));
  713. }
  714. .wanl-list .drawer .footer .cu-btn {
  715. height: 76rpx;
  716. padding: 0 50rpx;
  717. }
  718. /* 底部导航 */
  719. .wanlian.cu-bar.tabbar {
  720. background-color: #f8f8f8;
  721. padding: 0;
  722. height: calc(100rpx + env(safe-area-inset-bottom));
  723. padding-bottom: env(safe-area-inset-bottom);
  724. z-index: 2;
  725. }
  726. .wanlian.cu-bar.tabbar .action .badge {
  727. top: -8rpx;
  728. right: 0;
  729. background-color: #fe6600;
  730. }
  731. .wanlian.cu-bar.tabbar.shop .action {
  732. width: 106rpx;
  733. }
  734. .wanlian.cu-bar.tabbar .btn-group {
  735. justify-content: center;
  736. }
  737. .wanlian.cu-bar.tabbar .btn-group .cu-btn {
  738. padding: 0;
  739. width: 190rpx;
  740. height: 78rpx;
  741. }
  742. /* ==================直播==================== */
  743. .wan-live {}
  744. /* 商品详情页 直播图标 */
  745. .wan-live .tag {
  746. display: flex;
  747. align-items: center;
  748. border-radius: 18rpx;
  749. position: absolute;
  750. right: 25rpx;
  751. font-size: 20rpx;
  752. flex-wrap: wrap;
  753. background-color: rgba(0, 0, 0, 0.2);
  754. padding-bottom: 8rpx;
  755. }
  756. .wan-live .live {
  757. width: 100%;
  758. height: 52rpx;
  759. display: flex;
  760. align-items: center;
  761. justify-content: center;
  762. }
  763. .wanLive-icon {
  764. width: 7%;
  765. height: 70%;
  766. position: relative;
  767. --color: #ff8d40;
  768. background-color: var(--color);
  769. transform-origin: bottom;
  770. animation: wanLive 0.6s 0.2s infinite ease-in-out;
  771. }
  772. .wanLive-icon::after {
  773. right: 200%;
  774. animation: wanLive 0.6s 0.4s infinite ease-in-out;
  775. }
  776. .wanLive-icon::before {
  777. left: 200%;
  778. animation: wanLive 0.6s 0s infinite ease-in-out;
  779. }
  780. .wanLive-icon::after,
  781. .wanLive-icon::before {
  782. width: 100%;
  783. height: 100%;
  784. content: '';
  785. position: absolute;
  786. bottom: 0;
  787. background-color: var(--color);
  788. transform-origin: bottom;
  789. }
  790. @keyframes wanLive {
  791. 0%,
  792. 100% {
  793. transform: scaleY(1);
  794. }
  795. 50% {
  796. transform: scaleY(0.6);
  797. }
  798. }
  799. /* ==================自定义页面==================== */
  800. .wanl-page {
  801. width: 100%;
  802. overflow: hidden;
  803. }
  804. /* ==================商品列表==================== */
  805. /* 全局样式 */
  806. .wanl-product .content {
  807. display: flex;
  808. flex: 1;
  809. flex-wrap: wrap;
  810. align-content: space-between;
  811. }
  812. .wanl-product .content>view {
  813. width: 100%;
  814. }
  815. .wanl-product .content .goods-tag {
  816. margin-top: 4rpx;
  817. margin-bottom: 10rpx;
  818. }
  819. /* 普通布局 */
  820. .wanl-product .product_list {
  821. display: flex;
  822. flex-wrap: wrap;
  823. justify-content: space-between;
  824. align-items: center;
  825. }
  826. .wanl-product .product_list .item {
  827. border-radius: 16rpx;
  828. background-color: #fff;
  829. overflow: hidden;
  830. }
  831. .wanl-product .product_list .item .img-wrap,
  832. .wanl-product .product_list .item image {
  833. height: 250rpx;
  834. width: 250rpx;
  835. }
  836. /* 瀑布流布局 */
  837. .wanl-product .product_warter .warter {
  838. border-radius: 16rpx !important;
  839. background-color: #ffffff;
  840. overflow: hidden;
  841. }
  842. .wanl-product .product_warter .warter .image {
  843. border-radius: 16rpx 16rpx 0 0 !important;
  844. width: 100%;
  845. overflow: hidden;
  846. }
  847. .wanl-product .product_warter .warter .img-wrap {
  848. margin-bottom: -4px;
  849. }
  850. /* 一列布局 */
  851. .wanl-product [class*='col-1-'] .item image,
  852. .wanl-product [class*='col-1-'] .item .img-wrap {
  853. border-radius: 16rpx;
  854. }
  855. .wanl-product .product_list.col-1-10 {
  856. margin: 0 10rpx;
  857. padding-top: 10rpx;
  858. }
  859. .wanl-product .product_list.col-1-10 .item {
  860. display: flex;
  861. width: 100%;
  862. margin-bottom: 10rpx;
  863. }
  864. .wanl-product .product_list.col-1-15 {
  865. margin: 0 15rpx;
  866. padding-top: 15rpx;
  867. }
  868. .wanl-product .product_list.col-1-15 .item {
  869. display: flex;
  870. width: 100%;
  871. margin-bottom: 15rpx;
  872. }
  873. .wanl-product .product_list.col-1-20 {
  874. margin: 0 20rpx;
  875. padding-top: 20rpx;
  876. }
  877. .wanl-product .product_list.col-1-20 .item {
  878. display: flex;
  879. width: 100%;
  880. margin-bottom: 20rpx;
  881. }
  882. .wanl-product .product_list.col-1-25 {
  883. margin: 0 25rpx;
  884. padding-top: 25rpx;
  885. }
  886. .wanl-product .product_list.col-1-25 .item {
  887. display: flex;
  888. width: 100%;
  889. margin-bottom: 25rpx;
  890. }
  891. .wanl-product .product_list.col-1-30 {
  892. margin: 0 30rpx;
  893. padding-top: 30rpx;
  894. }
  895. .wanl-product .product_list.col-1-30 .item {
  896. display: flex;
  897. width: 100%;
  898. margin-bottom: 30rpx;
  899. }
  900. /* 瀑布流 二列布局 */
  901. .wanl-product .product_warter.col-2-10 {
  902. margin: 0 10rpx;
  903. padding-top: 10rpx;
  904. }
  905. .wanl-product .product_warter.col-2-10 .warter {
  906. margin-bottom: 10rpx;
  907. }
  908. .wanl-product .product_warter.col-2-10 .warter.right {
  909. margin-left: 5rpx;
  910. }
  911. .wanl-product .product_warter.col-2-10 .warter.left {
  912. margin-right: 5rpx;
  913. }
  914. .wanl-product .product_warter.col-2-15 {
  915. margin: 0 15rpx;
  916. padding-top: 15rpx;
  917. }
  918. .wanl-product .product_warter.col-2-15 .warter {
  919. margin-bottom: 15rpx;
  920. }
  921. .wanl-product .product_warter.col-2-15 .warter.right {
  922. margin-left: 7.5rpx;
  923. }
  924. .wanl-product .product_warter.col-2-15 .warter.left {
  925. margin-right: 7.5rpx;
  926. }
  927. .wanl-product .product_warter.col-2-20 {
  928. margin: 0 20rpx;
  929. padding-top: 20rpx;
  930. }
  931. .wanl-product .product_warter.col-2-20 .warter {
  932. margin-bottom: 20rpx;
  933. }
  934. .wanl-product .product_warter.col-2-20 .warter.right {
  935. margin-left: 10rpx;
  936. }
  937. .wanl-product .product_warter.col-2-20 .warter.left {
  938. margin-right: 10rpx;
  939. }
  940. .wanl-product .product_warter.col-2-25 {
  941. margin: 0 25rpx;
  942. padding-top: 25rpx;
  943. }
  944. .wanl-product .product_warter.col-2-25 .warter {
  945. margin-bottom: 25rpx;
  946. }
  947. .wanl-product .product_warter.col-2-25 .warter.right {
  948. margin-left: 12.5rpx;
  949. }
  950. .wanl-product .product_warter.col-2-25 .warter.left {
  951. margin-right: 12.5rpx;
  952. }
  953. .wanl-product .product_warter.col-2-30 {
  954. margin: 0 30rpx;
  955. padding-top: 30rpx;
  956. }
  957. .wanl-product .product_warter.col-2-30 .warter {
  958. margin-bottom: 30rpx;
  959. }
  960. .wanl-product .product_warter.col-2-30 .warter.right {
  961. margin-left: 15rpx;
  962. }
  963. .wanl-product .product_warter.col-2-30 .warter.left {
  964. margin-right: 15rpx;
  965. }
  966. /* 二列布局 */
  967. .wanl-product .product_list[class*='col-2-'] .item image,
  968. .wanl-product .product_list[class*='col-2-'] .item .img-wrap {
  969. width: 100%;
  970. height: 400rpx;
  971. }
  972. .wanl-product .product_list[class*='col-2-'] .comment {
  973. display: none;
  974. }
  975. .wanl-product .product_list[class*='col-2-'] .content {
  976. height: 200rpx;
  977. }
  978. .wanl-product .product_list.col-2-10 {
  979. margin: 0 10rpx;
  980. padding-top: 10rpx;
  981. }
  982. .wanl-product .product_list.col-2-10:after {
  983. content: '';
  984. width: calc((100% - 10rpx) / 2);
  985. }
  986. .wanl-product .product_list.col-2-10 .item {
  987. width: calc((100% - 10rpx) / 2);
  988. margin-bottom: 10rpx;
  989. }
  990. .wanl-product .product_list.col-2-15 {
  991. margin: 0 15rpx;
  992. padding-top: 15rpx;
  993. }
  994. .wanl-product .product_list.col-2-15:after {
  995. content: '';
  996. width: calc((100% - 15rpx) / 2);
  997. }
  998. .wanl-product .product_list.col-2-15 .item {
  999. width: calc((100% - 15rpx) / 2);
  1000. margin-bottom: 15rpx;
  1001. }
  1002. .wanl-product .product_list.col-2-20 {
  1003. margin: 0 20rpx;
  1004. padding-top: 20rpx;
  1005. }
  1006. .wanl-product .product_list.col-2-20:after {
  1007. content: '';
  1008. width: calc((100% - 20rpx) / 2);
  1009. }
  1010. .wanl-product .product_list.col-2-20 .item {
  1011. width: calc((100% - 20rpx) / 2);
  1012. margin-bottom: 20rpx;
  1013. }
  1014. .wanl-product .product_list.col-2-25 {
  1015. margin: 0 25rpx;
  1016. padding-top: 25rpx;
  1017. }
  1018. .wanl-product .product_list.col-2-25:after {
  1019. content: '';
  1020. width: calc((100% - 25rpx) / 2);
  1021. }
  1022. .wanl-product .product_list.col-2-25 .item {
  1023. width: calc((100% - 25rpx) / 2);
  1024. margin-bottom: 25rpx;
  1025. }
  1026. .wanl-product .product_list.col-2-30 {
  1027. margin: 0 30rpx;
  1028. padding-top: 30rpx;
  1029. }
  1030. .wanl-product .product_list.col-2-30:after {
  1031. content: '';
  1032. width: calc((100% - 30rpx) / 2);
  1033. }
  1034. .wanl-product .product_list.col-2-30 .item {
  1035. width: calc((100% - 30rpx) / 2);
  1036. margin-bottom: 30rpx;
  1037. }
  1038. /* 三列布局 */
  1039. .wanl-product [class*='col-3-'] .item image,
  1040. .wanl-product [class*='col-3-'] .item .img-wrap {
  1041. width: 100%;
  1042. }
  1043. .wanl-product .product_list.col-3-10 {
  1044. margin: 0 10rpx;
  1045. padding-top: 10rpx;
  1046. }
  1047. .wanl-product .product_list.col-3-10:after {
  1048. content: '';
  1049. width: calc((100% - 20rpx) / 3);
  1050. }
  1051. .wanl-product .product_list.col-3-10 .item {
  1052. width: calc((100% - 20rpx) / 3);
  1053. margin-bottom: 10rpx;
  1054. }
  1055. .wanl-product .product_list.col-3-15 {
  1056. margin: 0 15rpx;
  1057. padding-top: 15rpx;
  1058. }
  1059. .wanl-product .product_list.col-3-15:after {
  1060. content: '';
  1061. width: calc((100% - 30rpx) / 3);
  1062. }
  1063. .wanl-product .product_list.col-3-15 .item {
  1064. width: calc((100% - 30rpx) / 3);
  1065. margin-bottom: 15rpx;
  1066. }
  1067. .wanl-product .product_list.col-3-20 {
  1068. margin: 0 20rpx;
  1069. padding-top: 20rpx;
  1070. }
  1071. .wanl-product .product_list.col-3-20:after {
  1072. content: '';
  1073. width: calc((100% - 40rpx) / 3);
  1074. }
  1075. .wanl-product .product_list.col-3-20 .item {
  1076. width: calc((100% - 40rpx) / 3);
  1077. margin-bottom: 20rpx;
  1078. }
  1079. .wanl-product .product_list.col-3-25 {
  1080. margin: 0 25rpx;
  1081. padding-top: 25rpx;
  1082. }
  1083. .wanl-product .product_list.col-3-25:after {
  1084. content: '';
  1085. width: calc((100% - 50rpx) / 3);
  1086. }
  1087. .wanl-product .product_list.col-3-25 .item {
  1088. width: calc((100% - 50rpx) / 3);
  1089. margin-bottom: 25rpx;
  1090. }
  1091. .wanl-product .product_list.col-3-30 {
  1092. margin: 0 30rpx;
  1093. padding-top: 30rpx;
  1094. }
  1095. .wanl-product .product_list.col-3-30:after {
  1096. content: '';
  1097. width: calc((100% - 60rpx) / 3);
  1098. }
  1099. .wanl-product .product_list.col-3-30 .item {
  1100. width: calc((100% - 60rpx) / 3);
  1101. margin-bottom: 30rpx;
  1102. }
  1103. /* ==================评论页==================== */
  1104. .wanl-comment .subject .goods {
  1105. display: flex;
  1106. align-items: center;
  1107. width: 100%;
  1108. }
  1109. .wanl-comment .subject .goods .cu-avatar {
  1110. width: 130rpx;
  1111. height: 130rpx;
  1112. margin-right: 20rpx;
  1113. }
  1114. .wanl-comment .subject .goods .content {
  1115. width: calc(100% - 150rpx);
  1116. }
  1117. .wanl-comment .subject .comment {
  1118. display: flex;
  1119. align-items: center;
  1120. justify-items: center;
  1121. }
  1122. .wanl-comment .subject .comment .comment-title {
  1123. width: 160rpx;
  1124. color: #666666;
  1125. }
  1126. .wanl-comment .subject .comment .comment-operate {
  1127. display: flex;
  1128. }
  1129. .wanl-comment .subject .comment .comment-operate .item {
  1130. display: flex;
  1131. align-items: center;
  1132. justify-items: center;
  1133. width: 150rpx;
  1134. color: #c3c2ca;
  1135. }
  1136. .wanl-comment .subject .comment .comment-operate .item text {
  1137. margin-right: 15rpx;
  1138. font-size: 35rpx;
  1139. }
  1140. .wanl-comment .subject .comment .comment-operate .item.action {
  1141. color: #ff4e02;
  1142. font-weight: 500;
  1143. }
  1144. .wanl-comment .subject .comment .comment-operate .item.action .wlIcon-haoping:before {
  1145. content: "\e6e7";
  1146. }
  1147. .wanl-comment .subject .comment .comment-operate .item.action .wlIcon-chaping:before {
  1148. content: "\e6e6";
  1149. }
  1150. .wanl-comment .subject .describe {
  1151. background-color: #fafafa;
  1152. }
  1153. .wanl-comment .subject .describe textarea {
  1154. margin: 0;
  1155. }
  1156. .wanl-comment .subject .upload {}
  1157. .wanl-comment .operate .score {
  1158. display: flex;
  1159. align-items: center;
  1160. margin-top: 25rpx;
  1161. }
  1162. .wanl-comment .operate .score .title {
  1163. width: 150rpx;
  1164. }
  1165. /* ==================消息通知==================== */
  1166. .wanl-notice {
  1167. position: relative;
  1168. }
  1169. .wanl-notice .tool {
  1170. display: flex;
  1171. align-items: center;
  1172. padding-bottom: 190rpx;
  1173. margin-left: 25rpx;
  1174. padding-top: 6rpx;
  1175. }
  1176. .wanl-notice .tool .cu-tag {
  1177. width: 40rpx;
  1178. height: 40rpx;
  1179. font-size: 25rpx;
  1180. background-color: rgba(0, 0, 0, .05);
  1181. }
  1182. .wanl-notice .mode {
  1183. position: absolute;
  1184. width: 100%;
  1185. bottom: -60rpx;
  1186. }
  1187. .wanl-notice .mode .shadow-warp {
  1188. box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 10rpx;
  1189. }
  1190. .wanl-notice .mode .flex {
  1191. background-color: white;
  1192. border-radius: 25rpx;
  1193. justify-content: space-between;
  1194. align-items: center;
  1195. padding: 25rpx 70rpx;
  1196. }
  1197. .wanl-notice .mode .flex>view {
  1198. position: relative;
  1199. }
  1200. .wanl-notice .mode .flex>view .cu-tag.badge {
  1201. top: 0;
  1202. right: 0;
  1203. height: 32rpx;
  1204. }
  1205. .wanl-notice .mode .flex>view .cu-tag.badge:not([class*="bg-"]) {
  1206. background-color: red;
  1207. }
  1208. .wanl-notice .mode .flex text {
  1209. display: block;
  1210. width: 100rpx;
  1211. height: 100rpx;
  1212. line-height: 100rpx;
  1213. text-align: center;
  1214. font-size: 48rpx;
  1215. color: white;
  1216. background-color: red;
  1217. border-radius: 5000rpx;
  1218. margin-bottom: 10rpx;
  1219. }
  1220. .wanl-notice .mode .flex .logistics text {
  1221. background-image: linear-gradient(to right, #0081ff, #56ade0)
  1222. }
  1223. .wanl-notice .mode .flex .notice text {
  1224. background-image: linear-gradient(to right, #ff9700, #f9ec50);
  1225. }
  1226. .wanl-notice .mode .flex .Interaction text {
  1227. background-image: linear-gradient(to right, #3edc53, #8dc63f)
  1228. }
  1229. /* 消息列表 */
  1230. .wanl-msg {
  1231. padding-top: 66rpx;
  1232. background-color: white;
  1233. }
  1234. .wanl-msg .cu-list.menu-avatar>.cu-item>.cu-avatar {
  1235. left: 25rpx;
  1236. }
  1237. .wanl-msg .cu-list.menu-avatar>.cu-item .content {
  1238. left: 145rpx;
  1239. }
  1240. .wanl-msg .cu-list.menu-avatar>.cu-item .action .cu-tag {
  1241. border-radius: 1000rpx;
  1242. font-size: 24rpx;
  1243. padding: 0px 11rpx;
  1244. height: 35rpx;
  1245. line-height: 35rpx;
  1246. }
  1247. .wanl-msg .cu-avatar {
  1248. background-color: transparent;
  1249. }
  1250. /* ==================物流通知==================== */
  1251. /* 列表 */
  1252. .wanl-logistics-list .item .title {
  1253. display: flex;
  1254. justify-content: space-between;
  1255. align-items: center;
  1256. }
  1257. .wanl-logistics-list .item .action {
  1258. background-color: #f7f7f7;
  1259. display: flex;
  1260. overflow: hidden;
  1261. border-radius: 10rpx;
  1262. }
  1263. .wanl-logistics-list .item .action image {
  1264. width: 150rpx;
  1265. height: 150rpx;
  1266. }
  1267. .wanl-logistics-list .item .action .padding-xs {
  1268. width: calc(100% - 150rpx);
  1269. }
  1270. /* 详情 */
  1271. /* ==================产品详情==================== */
  1272. /* 价格-普通 */
  1273. .wanl-goods .price {
  1274. display: flex;
  1275. justify-content: space-between;
  1276. }
  1277. .wanl-goods .price .text-xxl {
  1278. font-size: 52rpx;
  1279. }
  1280. .wanl-goods .price .follow {
  1281. text-align: center;
  1282. }
  1283. .wanl-goods .price .follow text {
  1284. display: block;
  1285. }
  1286. .wanl-goods .price .follow text[class*="wlIcon-"] {
  1287. font-size: 36rpx;
  1288. }
  1289. /* 价格-拼团 */
  1290. .wanl-goods .price-pintuan{
  1291. background-image: linear-gradient(90deg, #ff5f00 0, #ff243a 97%);
  1292. }
  1293. .wanl-goods .price-pintuan .price {
  1294. padding-bottom: 20rpx;
  1295. }
  1296. .wanl-goods .price-pintuan .price .cu-capsule {
  1297. vertical-align: 0.25em;
  1298. }
  1299. .wanl-goods .price-pintuan .price .cu-capsule .cu-tag[class*="line-"]:after {
  1300. border-width: 3rpx;
  1301. }
  1302. /* 价格-抢购 */
  1303. .wanl-goods .price-rush .price {
  1304. padding-top: 20rpx;
  1305. padding-bottom: 20rpx;
  1306. }
  1307. .wanl-goods .price-rush .price .title {
  1308. display: flex;
  1309. }
  1310. .wanl-goods .price-rush .price .amount {
  1311. margin: 0 6rpx;
  1312. color: #ffdb00;
  1313. }
  1314. /* 标题 */
  1315. .wanl-goods .title {
  1316. display: flex;
  1317. position: relative;
  1318. }
  1319. .wanl-goods .title .name {
  1320. width: 80%;
  1321. }
  1322. .wanl-goods .title .share .button {
  1323. position: absolute;
  1324. top: 6rpx;
  1325. right: 0;
  1326. background-color: #f4f4f4;
  1327. border-radius: 500rpx 0 0 500rpx;
  1328. padding: 7rpx 12rpx;
  1329. display: flex;
  1330. align-items: center;
  1331. white-space: nowrap;
  1332. }
  1333. /* 物流 */
  1334. .wanl-goods .block {
  1335. display: flex;
  1336. justify-content: space-between;
  1337. align-items: center;
  1338. }
  1339. .wanl-goods .block .margin-right-xs {
  1340. margin-right: 5rpx;
  1341. }
  1342. /* 营销 */
  1343. .wanl-goods .promotion .item {
  1344. display: flex;
  1345. position: relative;
  1346. padding: 20rpx 25rpx;
  1347. }
  1348. .wanl-goods .promotion .item:after {
  1349. position: absolute;
  1350. top: 0;
  1351. left: 0;
  1352. box-sizing: border-box;
  1353. width: 200%;
  1354. height: 200%;
  1355. border-bottom: 0.5px solid #ddd;
  1356. border-radius: inherit;
  1357. content: " ";
  1358. -webkit-transform: scale(.5);
  1359. transform: scale(.5);
  1360. -webkit-transform-origin: 0 0;
  1361. transform-origin: 0 0;
  1362. pointer-events: none;
  1363. }
  1364. .wanl-goods .promotion .item:last-child:after {
  1365. border: none;
  1366. }
  1367. .wanl-goods .promotion .item .label {
  1368. height: 24px;
  1369. line-height: 24px;
  1370. width: 80rpx;
  1371. }
  1372. .wanl-goods .promotion .item .conten {
  1373. width: 80%;
  1374. }
  1375. .wanl-goods .promotion .item .conten .promotion-header {
  1376. padding-top: 6rpx;
  1377. margin-bottom: 16rpx;
  1378. height: 36rpx;
  1379. display: flex;
  1380. align-items: center;
  1381. white-space: nowrap;
  1382. }
  1383. .wanl-goods .promotion .item .conten .promotion-header:last-child {
  1384. margin-bottom: 10rpx;
  1385. }
  1386. .wanl-goods .promotion .item .conten .promotion-header .cu-tag {
  1387. font-size: 22rpx;
  1388. padding: 0px 8rpx;
  1389. color: #ff243a;
  1390. }
  1391. .wanl-goods .promotion .item .bnt-quan {
  1392. display: block;
  1393. vertical-align: top;
  1394. position: absolute;
  1395. right: 25rpx;
  1396. top: 26rpx;
  1397. }
  1398. /* 活动 */
  1399. .wanl-goods .partake .item {
  1400. display: flex;
  1401. justify-content: space-between;
  1402. align-items: center;
  1403. }
  1404. .wanl-goods .partake .item .info {
  1405. display: flex;
  1406. align-items: center;
  1407. }
  1408. /* 选择 */
  1409. .wanl-goods .choice {}
  1410. .wanl-goods .choice .commodity {
  1411. display: flex;
  1412. justify-content: space-between;
  1413. align-items: flex-start;
  1414. }
  1415. .wanl-goods .choice .commodity .opt {
  1416. display: flex;
  1417. }
  1418. .wanl-goods .choice .commodity .opt .title {
  1419. width: 80rpx;
  1420. flex-shrink: 0;
  1421. }
  1422. .wanl-goods .choice .commodity .opt .option {}
  1423. .wanl-goods .choice .commodity .opt .option .selected {
  1424. display: flex;
  1425. }
  1426. .wanl-goods .choice .commodity .opt .option .option-list .cu-tag {
  1427. background-color: #f7f7f7;
  1428. color: #999;
  1429. border-radius: 12rpx;
  1430. height: 60rpx;
  1431. margin-right: 15rpx;
  1432. margin-top: 25rpx;
  1433. padding: 0px 20rpx;
  1434. font-size: 24rpx;
  1435. }
  1436. .wanl-goods .choice .commodity .opt .option .option-list .cu-tag+.cu-tag {
  1437. margin-left: 0;
  1438. }
  1439. /* 评价 */
  1440. .wanl-goods .comment {}
  1441. .wanl-goods .comment .head {
  1442. display: flex;
  1443. justify-content: space-between;
  1444. }
  1445. .wanl-goods .comment .label .cu-tag {
  1446. background-color: #fff5ef;
  1447. margin-right: 18rpx;
  1448. margin-top: 25rpx;
  1449. height: 60rpx;
  1450. line-height: 60rpx;
  1451. padding: 0 22rpx;
  1452. color: #272727;
  1453. font-size: 26rpx;
  1454. }
  1455. .wanl-goods .comment .label .cu-tag+.cu-tag {
  1456. margin-left: 0;
  1457. }
  1458. .wanl-goods .comment .user {
  1459. margin-bottom: 25rpx;
  1460. }
  1461. .wanl-goods .comment .user .userinfo {
  1462. display: flex;
  1463. justify-content: space-between;
  1464. align-items: center;
  1465. }
  1466. .wanl-goods .comment .user .userinfo .avatar {
  1467. display: flex;
  1468. align-items: center;
  1469. }
  1470. .wanl-goods .comment .user .grid.col-1>view {
  1471. width: 50%;
  1472. }
  1473. .wanl-goods .comment .user .details {
  1474. margin: 20rpx 0;
  1475. }
  1476. .wanl-goods .comment .more {
  1477. display: flex;
  1478. justify-content: center;
  1479. align-items: center;
  1480. }
  1481. /* 店铺 */
  1482. .wanl-goods .shop .shopinfo {
  1483. display: flex;
  1484. align-items: center;
  1485. position: relative;
  1486. }
  1487. .wanl-goods .shop .shopinfo .cu-avatar {}
  1488. .wanl-goods .shop .shopinfo .shopname {
  1489. position: absolute;
  1490. left: 116rpx;
  1491. }
  1492. .wanl-goods .shop .shopinfo .bnt {
  1493. position: absolute;
  1494. right: 0;
  1495. }
  1496. .wanl-goods .shop .shopinfo .bnt .cu-btn {
  1497. padding: 0 16rpx;
  1498. font-size: 24rpx;
  1499. height: 54rpx;
  1500. }
  1501. .wanl-goods .shop .quality {
  1502. display: flex;
  1503. justify-content: space-between;
  1504. align-items: center;
  1505. }
  1506. .wanl-goods .shop .quality .cu-tag {
  1507. vertical-align: baseline;
  1508. font-size: 20rpx;
  1509. padding: 0 6rpx;
  1510. height: 30rpx;
  1511. }
  1512. .wanl-goods .shop .quality text {
  1513. margin: 0 15rpx;
  1514. }
  1515. .wanl-goods .shop .quality .cu-tag.gao {
  1516. background-color: #feebe2;
  1517. color: #ff6601;
  1518. }
  1519. /* 店铺推荐 */
  1520. .wanl-goods .shop-recom .head {
  1521. display: flex;
  1522. justify-content: space-between;
  1523. }
  1524. .wanl-goods .shop-recom .recommend {
  1525. display: flex;
  1526. justify-content: space-between;
  1527. flex-wrap: wrap;
  1528. }
  1529. .wanl-goods .shop-recom .recommend:after {
  1530. content: '';
  1531. width: 32%;
  1532. border: 1px solid transparent;
  1533. }
  1534. .wanl-goods .shop-recom .recommend .item {
  1535. width: 32%;
  1536. margin-top: 25rpx;
  1537. }
  1538. .wanl-goods .shop-recom .recommend .item image {
  1539. height: 220rpx;
  1540. overflow: hidden;
  1541. border-radius: 8rpx;
  1542. }
  1543. .wanl-goods-content {
  1544. width: 100%;
  1545. overflow: hidden;
  1546. }
  1547. /* 评论页 */
  1548. .wanl-goods-comment .head .cu-tag {
  1549. height: 60rpx;
  1550. background-color: #ffeee3;
  1551. color: #383736;
  1552. padding: 0 25rpx;
  1553. margin: 25rpx 15rpx 0 0;
  1554. }
  1555. .wanl-goods-comment .head .cu-tag.active {
  1556. background-color: #fe6600;
  1557. color: white;
  1558. }
  1559. .wanl-goods-comment .list {
  1560. margin-bottom: 25rpx;
  1561. background-color: white;
  1562. padding-bottom: 0;
  1563. }
  1564. .wanl-goods-comment .list .userinfo {
  1565. display: flex;
  1566. justify-content: space-between;
  1567. align-items: center;
  1568. }
  1569. .wanl-goods-comment .list .userinfo .avatar {
  1570. display: flex;
  1571. align-items: center;
  1572. }
  1573. .wanl-goods-comment .list .grid.col-1>view {
  1574. width: 450rpx;
  1575. }
  1576. .wanl-goods-comment .list .details {
  1577. margin: 20rpx 0;
  1578. }
  1579. .wanl-goods-comment .list .goods {
  1580. background-color: #f5f5f5;
  1581. display: flex;
  1582. align-items: center;
  1583. }
  1584. .wanl-goods-comment .list .goods .cu-avatar {
  1585. width: 120rpx;
  1586. height: 120rpx;
  1587. }
  1588. .wanl-goods-comment .list .goods .content {
  1589. width: calc(100% - 145rpx);
  1590. }
  1591. /* ==================搜索页面==================== */
  1592. .wanl-search .history>view {
  1593. margin-bottom: 50rpx;
  1594. }
  1595. .wanl-search .history .title {
  1596. display: flex;
  1597. align-items: center;
  1598. justify-content: space-between;
  1599. margin-top: 30rpx;
  1600. margin-bottom: 10rpx;
  1601. }
  1602. .wanl-search .list {
  1603. display: flex;
  1604. flex-wrap: wrap;
  1605. }
  1606. .wanl-search .list>view {
  1607. background: #f8f8f8;
  1608. color: #666666;
  1609. margin: 20rpx 20rpx 0 0;
  1610. padding: 10rpx 25rpx;
  1611. border-radius: 9999rpx;
  1612. position: relative;
  1613. }
  1614. .wanl-search .cu-list.menu>.cu-item {
  1615. min-height: 86rpx;
  1616. }
  1617. /* ==================搜索列表==================== */
  1618. .wanl-list .headtop {
  1619. height: 80rpx;
  1620. }
  1621. .wanl-list .headtop .cue {
  1622. position: fixed;
  1623. width: 100%;
  1624. animation-name: fluctuate;
  1625. animation-duration: .2s;
  1626. z-index: 1000;
  1627. }
  1628. .wanl-list .bar {
  1629. padding: 0 40rpx;
  1630. display: flex;
  1631. align-items: center;
  1632. justify-content: space-between;
  1633. min-height: 80rpx;
  1634. font-size: 28rpx;
  1635. background-color: #f7f7f7;
  1636. }
  1637. .wanl-list .bar .item {
  1638. color: #555;
  1639. display: flex;
  1640. justify-content: center;
  1641. align-items: center;
  1642. }
  1643. .wanl-list .bar .item.current {
  1644. color: #ff4f00;
  1645. }
  1646. .wanl-list .bar .item .box {
  1647. display: flex;
  1648. flex-direction: column;
  1649. height: 42rpx;
  1650. line-height: 1;
  1651. }
  1652. .wanl-list .bar .item .box text[class*="wlIcon-"] {
  1653. color: #cccccc;
  1654. margin: 0 10rpx;
  1655. font-weight: bold;
  1656. font-size: 22rpx;
  1657. }
  1658. .wanl-list .bar .item .box text[class*="wlIcon-"].active {
  1659. color: #ff4f00;
  1660. }
  1661. .wanl-list .menus {
  1662. height: 80rpx;
  1663. background-color: white;
  1664. display: flex;
  1665. align-items: center;
  1666. }
  1667. /* ==================聊天窗口==================== */
  1668. .wanl-chat .chatfoot {
  1669. position: fixed;
  1670. width: 100%;
  1671. bottom: 0;
  1672. z-index: 1024;
  1673. }
  1674. /* ==================订单列表==================== */
  1675. .wanl-order-list {
  1676. height: 100%;
  1677. }
  1678. .wanl-order-list .list-scroll-content {
  1679. height: 100%;
  1680. }
  1681. .wanl-order-list .uni-swiper-item {
  1682. height: auto;
  1683. }
  1684. /* 菜单 */
  1685. .wanl-order-list .navbar {
  1686. display: flex;
  1687. height: 60rpx;
  1688. color: #3d4144;
  1689. font-size: 26rpx;
  1690. z-index: 10;
  1691. }
  1692. .wanl-order-list .navbar .nav-item {
  1693. flex: 1;
  1694. display: flex;
  1695. justify-content: center;
  1696. align-items: center;
  1697. height: 100%;
  1698. position: relative;
  1699. }
  1700. .wanl-order-list .navbar .nav-item.current {
  1701. color: #ff4f00;
  1702. }
  1703. .wanl-order-list .navbar .nav-item.current:after {
  1704. content: "";
  1705. position: absolute;
  1706. left: 50%;
  1707. bottom: 0;
  1708. transform: translateX(-50%);
  1709. width: 40%;
  1710. height: 0;
  1711. border-bottom: 2px solid #ff4f00;
  1712. }
  1713. /* 商品 */
  1714. .wanl-order-list .order-item {
  1715. display: flex;
  1716. flex-direction: column;
  1717. padding-left: 25rpx;
  1718. background: #fff;
  1719. margin: 0 18rpx;
  1720. margin-top: 25rpx;
  1721. }
  1722. .wanl-order-list .order-item .head {
  1723. display: flex;
  1724. align-items: center;
  1725. justify-content: space-between;
  1726. height: 80rpx;
  1727. }
  1728. .wanl-order-list .order-item .goods-box {
  1729. display: flex;
  1730. padding-top: 25rpx;
  1731. }
  1732. .wanl-order-list .order-item .goods-box .content {
  1733. flex: 1;
  1734. display: flex;
  1735. }
  1736. .wanl-order-list .order-item .goods-box .content .describe {
  1737. flex: 1;
  1738. }
  1739. .wanl-order-list .order-item .goods-box .content .parameter {
  1740. width: 140rpx;
  1741. text-align: right;
  1742. }
  1743. .wanl-order-list .order-item .price-box {
  1744. display: flex;
  1745. justify-content: flex-end;
  1746. align-items: baseline;
  1747. padding: 28rpx;
  1748. padding-top: 50rpx;
  1749. }
  1750. .wanl-order-list .order-item .action-box {
  1751. display: flex;
  1752. justify-content: flex-end;
  1753. align-items: center;
  1754. position: relative;
  1755. }
  1756. .wanl-order-list .order-item .action-box .cu-btn {
  1757. padding: 0 30rpx;
  1758. font-size: 24rpx;
  1759. height: 60rpx;
  1760. }
  1761. /* ================== 优惠券 ==================== */
  1762. .wanl-coupon .item {
  1763. height: 210rpx;
  1764. position: relative;
  1765. overflow: hidden;
  1766. display: flex;
  1767. }
  1768. /* 样式开始 */
  1769. .wanl-coupon .item.reduction .colour {
  1770. color: #ff4f00;
  1771. }
  1772. .wanl-coupon .item.reduction .tagstyle {
  1773. background-color: #fff0e6;
  1774. color: #ff4f00;
  1775. }
  1776. .wanl-coupon .item.reduction .cu-btn {
  1777. color: #ffffff;
  1778. background-color: #ff4f00;
  1779. }
  1780. .wanl-coupon .item.reduction .cu-btn.line-colour {
  1781. color: #ff4f00;
  1782. background-color: transparent;
  1783. }
  1784. .wanl-coupon .item.discount .colour {
  1785. color: #39b54a;
  1786. }
  1787. .wanl-coupon .item.discount .tagstyle {
  1788. background-color: #e9ffec;
  1789. color: #39b54a;
  1790. }
  1791. .wanl-coupon .item.discount .cu-btn {
  1792. color: #ffffff;
  1793. background-color: #39b54a;
  1794. }
  1795. .wanl-coupon .item.discount .cu-btn.line-colour {
  1796. color: #39b54a;
  1797. background-color: transparent;
  1798. }
  1799. .wanl-coupon .item.shipping .colour {
  1800. color: #0081ff;
  1801. }
  1802. .wanl-coupon .item.shipping .tagstyle {
  1803. background-color: #e1f0ff;
  1804. color: #0081ff;
  1805. }
  1806. .wanl-coupon .item.shipping .cu-btn {
  1807. color: #ffffff;
  1808. background-color: #0081ff;
  1809. }
  1810. .wanl-coupon .item.shipping .cu-btn.line-colour {
  1811. color: #0081ff;
  1812. background-color: transparent;
  1813. }
  1814. .wanl-coupon .item.vip .colour {
  1815. color: #f5a623;
  1816. }
  1817. .wanl-coupon .item.vip .tagstyle {
  1818. background-color: #fff7e9;
  1819. color: #f5a623;
  1820. }
  1821. .wanl-coupon .item.vip .cu-btn {
  1822. color: #ffffff;
  1823. background-color: #f5a623;
  1824. }
  1825. .wanl-coupon .item.vip .cu-btn.line-colour {
  1826. color: #f5a623;
  1827. background-color: transparent;
  1828. }
  1829. /* 样式结束 */
  1830. .wanl-coupon .item .coupon-bg {
  1831. width: 100%;
  1832. height: 210rpx;
  1833. position: absolute;
  1834. left: 0;
  1835. top: 0;
  1836. z-index: 1;
  1837. }
  1838. .wanl-coupon .item .coupon-sign {
  1839. height: 110rpx;
  1840. width: 110rpx;
  1841. position: absolute;
  1842. z-index: 99;
  1843. top: -30rpx;
  1844. right: 30rpx;
  1845. }
  1846. .wanl-coupon .item .item-left {
  1847. width: 218rpx;
  1848. height: 210rpx;
  1849. position: relative;
  1850. z-index: 2;
  1851. display: flex;
  1852. align-items: center;
  1853. justify-content: center;
  1854. flex-direction: column;
  1855. flex-shrink: 0;
  1856. }
  1857. .wanl-coupon .item .item-left .price {
  1858. font-size: 52rpx;
  1859. font-weight: bold;
  1860. }
  1861. .wanl-coupon .item .item-left .prices {
  1862. font-size: 50rpx;
  1863. font-weight: bold;
  1864. }
  1865. .wanl-coupon .item .item-left .discount {
  1866. font-size: 22rpx;
  1867. }
  1868. .wanl-coupon .item .item-left .cu-tag {
  1869. margin-top: 8rpx;
  1870. }
  1871. .wanl-coupon .item .item-right {
  1872. display: flex;
  1873. flex-wrap: wrap;
  1874. flex: 1;
  1875. height: 210rpx;
  1876. z-index: 2;
  1877. overflow: hidden;
  1878. align-content: space-between;
  1879. }
  1880. .wanl-coupon .item .item-right .shop {
  1881. display: flex;
  1882. width: 100%;
  1883. justify-content: space-between;
  1884. }
  1885. .wanl-coupon .item .item-right .shop .name {
  1886. flex: 1;
  1887. }
  1888. .wanl-coupon .item .item-right .title {
  1889. display: flex;
  1890. align-items: center;
  1891. width: 100%;
  1892. }
  1893. .wanl-coupon .item .item-right .content {
  1894. display: flex;
  1895. align-items: flex-end;
  1896. justify-content: space-between;
  1897. width: 100%;
  1898. }
  1899. .wanl-coupon .item .item-right .cu-btn.sm {
  1900. padding: 0 25rpx;
  1901. font-size: 24rpx;
  1902. height: 60rpx;
  1903. }
  1904. /* ==================订单列表==================== */
  1905. .wanl-order .address .cu-avatar {
  1906. width: 82rpx;
  1907. height: 82rpx;
  1908. font-size: 1.6em;
  1909. }
  1910. .wanl-order .address.cu-list.menu-avatar>.cu-item>.cu-avatar {
  1911. left: 25rpx;
  1912. }
  1913. .wanl-order .address.cu-list.menu-avatar>.cu-item .content {
  1914. left: 130rpx;
  1915. width: calc(100% - 200rpx);
  1916. }
  1917. .wanl-order .address.cu-list.menu-avatar>.cu-item .action {
  1918. width: 40rpx;
  1919. }
  1920. .wanl-order .lists .shopname {
  1921. margin: 20rpx 25rpx 30rpx 25rpx;
  1922. }
  1923. .wanl-order .lists .cu-list.menu-avatar>.cu-item {
  1924. padding-right: 25rpx;
  1925. height: 160rpx;
  1926. align-items: flex-start;
  1927. }
  1928. .wanl-order .lists .cu-list.menu-avatar>.cu-item:after,
  1929. .wanl-order .lists .cu-list.menu>.cu-item:after {
  1930. border-bottom: 0;
  1931. }
  1932. .wanl-order .lists .cu-list.menu-avatar>.cu-item .content {
  1933. position: absolute;
  1934. left: 186rpx;
  1935. width: calc(100% - 350rpx);
  1936. line-height: 1.2em;
  1937. }
  1938. .wanl-order .lists .cu-list.menu-avatar>.cu-item .content>view:first-child {
  1939. font-size: 26rpx;
  1940. }
  1941. .wanl-order .lists .cu-list.menu-avatar>.cu-item>.cu-avatar {
  1942. position: absolute;
  1943. left: 25rpx;
  1944. width: 140rpx;
  1945. height: 140rpx;
  1946. }
  1947. .wanl-order .lists .cu-list.menu-avatar>.cu-item .action {
  1948. width: 180rpx;
  1949. text-align: right;
  1950. }
  1951. /* 操作 */
  1952. .wanl-order form .cu-form-group+.cu-form-group {
  1953. border-top: 0
  1954. }
  1955. .wanl-order form .cu-form-group {
  1956. padding: 0 25rpx;
  1957. }
  1958. .wanl-order form .cu-form-group .title {
  1959. font-size: 26rpx;
  1960. height: 52rpx;
  1961. line-height: 52rpx;
  1962. padding-right: 25rpx;
  1963. }
  1964. .wanl-order form .cu-form-group:first-child {
  1965. margin-top: 25rpx;
  1966. }
  1967. .wanl-order form .cu-form-group {
  1968. min-height: 76rpx;
  1969. }
  1970. .wanl-order form .cu-form-group picker:after {
  1971. line-height: 76rpx;
  1972. font-size: 30rpx;
  1973. color: #333333;
  1974. }
  1975. .wanl-order form .cu-form-group picker .picker {
  1976. line-height: 76rpx;
  1977. font-size: 26rpx;
  1978. }
  1979. .wanl-order form .wanl-numberBox {
  1980. width: 180rpx;
  1981. height: 54rpx;
  1982. padding: 6rpx;
  1983. }
  1984. .wanl-order form .wanl-numberBox text {
  1985. padding: 8rpx;
  1986. font-size: 30rpx;
  1987. }
  1988. /* 文本行高度 */
  1989. .wanl-order form .cu-form-group.align-start .title {
  1990. margin-top: 14rpx;
  1991. }
  1992. .wanl-order form .cu-form-group textarea {
  1993. font-size: 26rpx;
  1994. margin: 24rpx 0 0 0;
  1995. height: 3.5em;
  1996. }
  1997. .wanl-order .wanlian.cu-bar.tabbar {
  1998. background-color: white;
  1999. justify-content: flex-end;
  2000. }
  2001. .wanl-order .wanlian.cu-bar.tabbar .cu-btn {
  2002. font-size: 28rpx;
  2003. height: 76rpx;
  2004. }
  2005. /* ==================sku组件==================== */
  2006. .wanl_sku {
  2007. background-color: #fafafa;
  2008. color: #9c9c9c;
  2009. margin-top: 10rpx;
  2010. padding: 4rpx 8rpx;
  2011. border-radius: 6rpx;
  2012. display: inline-flex;
  2013. }
  2014. /* ==================支付页面==================== */
  2015. .wanl-pay .price-box {
  2016. background-color: #fff;
  2017. height: 300rpx;
  2018. display: flex;
  2019. flex-direction: column;
  2020. justify-content: center;
  2021. align-items: center;
  2022. font-size: 80rpx;
  2023. color: #666666;
  2024. }
  2025. .wanl-pay .list-box {
  2026. margin-top: 20rpx;
  2027. background-color: #fff;
  2028. padding-left: 60rpx;
  2029. }
  2030. .wanl-pay .list-box .item {
  2031. height: 120rpx;
  2032. padding: 20upx 0;
  2033. display: flex;
  2034. justify-content: space-between;
  2035. align-items: center;
  2036. padding-right: 60rpx;
  2037. font-size: 30rpx;
  2038. position: relative;
  2039. }
  2040. .wanl-pay .list-box .item .wlIcon-balance-pay {
  2041. color: #fe8e2e;
  2042. }
  2043. .wanl-pay .list-box .item .wlIcon-alipay-pay {
  2044. color: #06a0f8;
  2045. }
  2046. .wanl-pay .list-box .item .wlIcon-jssdk-pay {
  2047. color: #26af41;
  2048. }
  2049. .wanl-pay .list-box .item .wlIcon-wechat-pay {
  2050. color: #26af41;
  2051. }
  2052. .wanl-pay .list-box .item .wlIcon-baidu-pay {
  2053. color: #e84330;
  2054. }
  2055. .wanl-pay .list-box .item .wlIcon-fiuu-pay {
  2056. color: #1a4d8c;
  2057. }
  2058. .wanl-pay .list-box .item>text[class*="wlIcon-"] {
  2059. width: 100rpx;
  2060. font-size: 52rpx;
  2061. }
  2062. .wanl-pay .list-box .item .fiuu-pay-icon {
  2063. width: 100rpx;
  2064. height: 100rpx;
  2065. }
  2066. .wanl-pay .list-box .item .action {
  2067. flex: 1;
  2068. display: flex;
  2069. flex-direction: column;
  2070. font-size: 24rpx;
  2071. color: #999999;
  2072. }
  2073. .wanl-pay .list-box .item .action .title {
  2074. font-size: 32rpx;
  2075. margin-bottom: 4rpx;
  2076. }
  2077. .wanl-pay .mix-btn {
  2078. display: flex;
  2079. align-items: center;
  2080. justify-content: center;
  2081. width: 630rpx;
  2082. height: 80rpx;
  2083. margin: 80upx auto 30rpx;
  2084. font-size: 16px;
  2085. color: #fff;
  2086. border-radius: 10rpx;
  2087. }
  2088. .wanl-pay .footer {
  2089. position: fixed;
  2090. width: 100%;
  2091. bottom: 0;
  2092. color: #eaeaea;
  2093. z-index: 1;
  2094. height: 140rpx;
  2095. height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  2096. padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  2097. }
  2098. /* ==================客服服务==================== */
  2099. .wanl-service {
  2100. display: flex;
  2101. justify-content: space-around;
  2102. align-items: center;
  2103. align-content: center;
  2104. text-align: center;
  2105. height: 280rpx;
  2106. }
  2107. .wanl-service .cu-avatar.lg {
  2108. width: 100rpx;
  2109. height: 100rpx;
  2110. font-size: 50rpx;
  2111. }
  2112. .wanl-you-like {
  2113. background-size: 239rpx;
  2114. background-repeat: no-repeat;
  2115. background-position: 50% 50%;
  2116. width: 100%;
  2117. height: 50rpx;
  2118. margin-top: 20rpx;
  2119. }
  2120. .wanl-poster__main .image img {
  2121. -webkit-touch-callout: default;
  2122. }
  2123. /* CSS动画 */
  2124. [class*=animation-] {
  2125. animation-duration: .35s;
  2126. animation-timing-function: ease-out;
  2127. animation-fill-mode: both
  2128. }
  2129. .animation-fade {
  2130. animation-name: fade;
  2131. animation-duration: .8s;
  2132. animation-timing-function: linear
  2133. }
  2134. .animation-scale-up {
  2135. animation-name: scale-up
  2136. }
  2137. .animation-scale-down {
  2138. animation-name: scale-down
  2139. }
  2140. .animation-slide-top {
  2141. animation-name: slide-top
  2142. }
  2143. .animation-slide-bottom {
  2144. animation-name: slide-bottom
  2145. }
  2146. .animation-slide-left {
  2147. animation-name: slide-left
  2148. }
  2149. .animation-slide-right {
  2150. animation-name: slide-right
  2151. }
  2152. .animation-shake {
  2153. animation-name: shake
  2154. }
  2155. .animation-reverse {
  2156. animation-direction: reverse
  2157. }
  2158. .wlIconfont-spin {
  2159. -webkit-animation: wlIcon-spin 2s infinite linear;
  2160. animation: wlIcon-spin 2s infinite linear;
  2161. display: inline-block;
  2162. }
  2163. .wlIconfont-pulse {
  2164. -webkit-animation: wlIcon-spin 1s infinite steps(8);
  2165. animation: wlIcon-spin 1s infinite steps(8);
  2166. display: inline-block;
  2167. }
  2168. @keyframes wlIcon-spin {
  2169. 0% {
  2170. -webkit-transform: rotate(0);
  2171. transform: rotate(0);
  2172. }
  2173. 100% {
  2174. -webkit-transform: rotate(359deg);
  2175. transform: rotate(359deg);
  2176. }
  2177. }
  2178. @keyframes fluctuate {
  2179. 0% {
  2180. opacity: 0.5;
  2181. transform: translateY(-50rpx);
  2182. }
  2183. 100% {
  2184. opacity: 1;
  2185. transform: translateY(0)
  2186. }
  2187. }
  2188. @keyframes fade {
  2189. 0% {
  2190. opacity: 0
  2191. }
  2192. 100% {
  2193. opacity: 1
  2194. }
  2195. }
  2196. @keyframes scale-up {
  2197. 0% {
  2198. opacity: 0;
  2199. transform: scale(.2)
  2200. }
  2201. 100% {
  2202. opacity: 1;
  2203. transform: scale(1)
  2204. }
  2205. }
  2206. @keyframes scale-down {
  2207. 0% {
  2208. opacity: 0;
  2209. transform: scale(1.8)
  2210. }
  2211. 100% {
  2212. opacity: 1;
  2213. transform: scale(1)
  2214. }
  2215. }
  2216. @keyframes slide-top {
  2217. 0% {
  2218. opacity: 0;
  2219. transform: translateY(-100%)
  2220. }
  2221. 100% {
  2222. opacity: 1;
  2223. transform: translateY(0)
  2224. }
  2225. }
  2226. @keyframes slide-bottom {
  2227. 0% {
  2228. opacity: 0;
  2229. transform: translateY(100%)
  2230. }
  2231. 100% {
  2232. opacity: 1;
  2233. transform: translateY(0)
  2234. }
  2235. }
  2236. @keyframes shake {
  2237. 0%,
  2238. 100% {
  2239. transform: translateX(0)
  2240. }
  2241. 10% {
  2242. transform: translateX(-9px)
  2243. }
  2244. 20% {
  2245. transform: translateX(8px)
  2246. }
  2247. 30% {
  2248. transform: translateX(-7px)
  2249. }
  2250. 40% {
  2251. transform: translateX(6px)
  2252. }
  2253. 50% {
  2254. transform: translateX(-5px)
  2255. }
  2256. 60% {
  2257. transform: translateX(4px)
  2258. }
  2259. 70% {
  2260. transform: translateX(-3px)
  2261. }
  2262. 80% {
  2263. transform: translateX(2px)
  2264. }
  2265. 90% {
  2266. transform: translateX(-1px)
  2267. }
  2268. }
  2269. @keyframes slide-left {
  2270. 0% {
  2271. opacity: 0;
  2272. transform: translateX(-100%)
  2273. }
  2274. 100% {
  2275. opacity: 1;
  2276. transform: translateX(0)
  2277. }
  2278. }
  2279. @keyframes slide-right {
  2280. 0% {
  2281. opacity: 0;
  2282. transform: translateX(100%)
  2283. }
  2284. 100% {
  2285. opacity: 1;
  2286. transform: translateX(0)
  2287. }
  2288. }