diy.min.css 66 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444
  1. html {
  2. font-size: 20px;
  3. -ms-text-size-adjust: 100%;
  4. -webkit-text-size-adjust: 100%;
  5. font-family: sans-serif;
  6. }
  7. .text-yellow {
  8. color: #feb312;
  9. }
  10. .text-orange {
  11. color: #ff741d;
  12. }
  13. .text-blue {
  14. color: #50b6fe;
  15. }
  16. .text-red {
  17. color: #fd5454;
  18. }
  19. .diy-richtext {
  20. min-height: 20px;
  21. display: block;
  22. margin: 0;
  23. padding: 0;
  24. height: auto;
  25. overflow: hidden;
  26. }
  27. .diy-banner {
  28. display: block;
  29. margin: 0;
  30. padding: 0;
  31. height: auto;
  32. overflow: hidden;
  33. position: relative;
  34. }
  35. .diy-banner img {
  36. display: none;
  37. width: 100%;
  38. }
  39. .diy-banner img:first-child {
  40. display: block;
  41. }
  42. .diy-banner .dots {
  43. height: 14px;
  44. padding: 0 10px;
  45. position: absolute;
  46. left: 0;
  47. right: 0;
  48. bottom: 10px;
  49. opacity: 0.5;
  50. }
  51. .diy-banner .dots.left {
  52. text-align: left;
  53. }
  54. .diy-banner .dots.center {
  55. text-align: center;
  56. }
  57. .diy-banner .dots.right {
  58. text-align: right;
  59. }
  60. .diy-banner .dots.rectangle span {
  61. height: 12px;
  62. width: 20px;
  63. }
  64. .diy-banner .dots.square span {
  65. height: 12px;
  66. width: 12px;
  67. }
  68. .diy-banner .dots.round span {
  69. height: 12px;
  70. width: 12px;
  71. border-radius: 12px;
  72. }
  73. .diy-banner .dots span {
  74. display: inline-block;
  75. }
  76. .fui-icon-group {
  77. position: relative;
  78. overflow: hidden;
  79. border-top: 1px solid #ebebeb;
  80. background: #fff;
  81. }
  82. .fui-icon-group .fui-icon-col {
  83. width: 25%;
  84. height: auto;
  85. position: relative;
  86. padding: 0;
  87. margin: 10px 0;
  88. text-align: center;
  89. transition: background-color 300ms;
  90. -webkit-transition: background-color 300ms;
  91. float: left;
  92. }
  93. .fui-icon-group .fui-icon-col:active {
  94. background: #ececec;
  95. }
  96. .fui-icon-group .fui-icon-col .icon {
  97. height: 44px;
  98. margin: auto;
  99. text-align: center;
  100. line-height: 44px;
  101. }
  102. .fui-icon-group.col-3 .fui-icon-col {
  103. width: 33.3%;
  104. }
  105. .fui-icon-group.col-5 .fui-icon-col {
  106. width: 20%;
  107. }
  108. .fui-icon-group .fui-icon-col .icon img {
  109. height: 44px;
  110. width: 44px;
  111. }
  112. .fui-icon-group.radius .fui-icon-col img {
  113. border-radius: 10px;
  114. }
  115. .fui-icon-group.circle .fui-icon-col img {
  116. border-radius: 44px;
  117. }
  118. .fui-icon-group.col-3 .fui-icon-col.radius img {
  119. border-radius: 33.3%;
  120. }
  121. .fui-icon-group.col-5 .fui-icon-col.radius img {
  122. border-radius: 20%;
  123. }
  124. .fui-icon-group .fui-icon-col .text {
  125. font-size: 12px;
  126. text-align: center;
  127. overflow: hidden;
  128. text-overflow: ellipsis;
  129. white-space: nowrap;
  130. padding: 4px;
  131. color: #7a7a7a;
  132. }
  133. .fui-icon-group.noborder {
  134. border-top: 0;
  135. }
  136. .fui-icon-group.noborder .fui-icon-col:before {
  137. border: 0;
  138. }
  139. .fui-icon-group .fui-icon-col .icon i {
  140. color: #aaa;
  141. font-size: 32px;
  142. margin-top: 7px;
  143. }
  144. .fui-icon-group .fui-icon-col .badge {
  145. background: red none repeat scroll 0 0;
  146. border-radius: 10px;
  147. color: white;
  148. font-size: 12px;
  149. height: 16px;
  150. left: 50%;
  151. line-height: 16px;
  152. margin-left: 7px;
  153. min-width: 16px;
  154. padding: 0 4px;
  155. position: absolute;
  156. top: 10px;
  157. vertical-align: top;
  158. text-align: center;
  159. z-index: 100;
  160. }
  161. .fui-icon-group.pb10 {
  162. padding-bottom: 10px;
  163. }
  164. .fui-icon-group .fui-icon-group-pagination {
  165. height: 10px;
  166. position: absolute;
  167. left: 0;
  168. right: 0;
  169. bottom: 8px;
  170. text-align: center;
  171. padding: 0;
  172. margin: 0;
  173. line-height: 10px;
  174. }
  175. .fui-icon-group .fui-icon-group-pagination a {
  176. height: 8px;
  177. width: 8px;
  178. background: #000;
  179. border-radius: 8px;
  180. display: inline-block;
  181. opacity: 0.3;
  182. }
  183. .fui-icon-group .fui-icon-group-pagination a.active {
  184. opacity: 0.5;
  185. }
  186. .diy-search {
  187. background: #f1f1f2;
  188. padding: 10px 10px;
  189. }
  190. .diy-search .inner {
  191. height: 30px;
  192. background: #fff;
  193. overflow: hidden;
  194. }
  195. .diy-search.radius .inner {
  196. border-radius: 5px;
  197. }
  198. .diy-search.round .inner {
  199. border-radius: 30px;
  200. }
  201. .diy-search .inner .search-icon {
  202. height: 30px;
  203. width: 30px;
  204. text-align: center;
  205. line-height: 30px;
  206. font-size: 18px;
  207. color: #b4b4b4;
  208. }
  209. .diy-search .inner .search-input {
  210. height: 30px;
  211. width: 100%;
  212. line-height: 30px;
  213. font: 12px;
  214. color: #999999;
  215. }
  216. .diy-search .inner .search-input span {
  217. padding: 0 10px 0;
  218. }
  219. .diy-search .inner.left .search-icon {
  220. float: left;
  221. }
  222. .diy-search .inner.right .search-icon {
  223. float: right;
  224. }
  225. /* notice 样式 */
  226. .fui-notice {
  227. height: auto;
  228. font-size: 16px;
  229. background: #fff;
  230. padding: 6px;
  231. overflow: hidden;
  232. position: relative;
  233. border-top: 1px solid #e2e2e2;
  234. border-bottom: 1px solid #e2e2e2;
  235. }
  236. .fui-notice .image {
  237. height: 20px;
  238. width: auto;
  239. position: relative;
  240. float: left;
  241. padding-right: 4px;
  242. }
  243. .fui-notice .image img {
  244. height: 100%;
  245. max-width: 100px;
  246. display: block;
  247. }
  248. .fui-notice .image:before {
  249. content: " ";
  250. position: absolute;
  251. width: 0;
  252. top: 2px;
  253. right: 0;
  254. bottom: 2px;
  255. border-right: 1px solid #e2e2e2;
  256. }
  257. .fui-notice .icon {
  258. height: 20px;
  259. padding-left: 4px;
  260. float: left;
  261. color: #fd5454;
  262. line-height: 22px;
  263. }
  264. .fui-notice .text {
  265. height: 20px;
  266. padding-left: 4px;
  267. font-size: 12px;
  268. color: #333;
  269. line-height: 20px;
  270. overflow: hidden;
  271. }
  272. .fui-notice .text ul li {
  273. display: block;
  274. white-space: nowrap;
  275. overflow: hidden;
  276. text-overflow: ellipsis;
  277. }
  278. .fui-notice a {
  279. color: #333;
  280. }
  281. /**/
  282. .fui-goods-group {
  283. height: auto;
  284. overflow: hidden;
  285. background: #f9f9f9;
  286. }
  287. .fui-goods-item {
  288. position: relative;
  289. height: auto;
  290. padding: 10px;
  291. border-bottom: 1px solid #e7e7e7;
  292. background: #fff;
  293. overflow: hidden;
  294. display: -webkit-box;
  295. display: -webkit-flex;
  296. display: -ms-flexbox;
  297. display: flex;
  298. }
  299. .fui-goods-item .image img {
  300. height: 100%;
  301. width: 100%;
  302. display: block;
  303. }
  304. .fui-goods-item .detail {
  305. -webkit-box-flex: 1;
  306. -webkit-flex: 1;
  307. -ms-flex: 1;
  308. flex: 1;
  309. background: #fff;
  310. padding-left: 10px;
  311. }
  312. .fui-goods-item .detail .name {
  313. height: 60px;
  314. font-size: 14px;
  315. color: #262626;
  316. }
  317. .fui-goods-item .detail .price {
  318. position: relative;
  319. display: -webkit-box;
  320. display: -webkit-flex;
  321. display: -ms-flexbox;
  322. display: flex;
  323. -webkit-box-align: center;
  324. -webkit-align-items: center;
  325. -ms-flex-align: center;
  326. align-items: center;
  327. font-size: 14px;
  328. margin-top: 6px;
  329. }
  330. .fui-goods-item .detail .price .text {
  331. -webkit-box-flex: 1;
  332. -webkit-flex: 1;
  333. -ms-flex: 1;
  334. flex: 1;
  335. color: #ed2822;
  336. }
  337. .fui-goods-item .detail .price .minprice {
  338. font-size: 15px;
  339. }
  340. .fui-goods-item .detail .price .productprice {
  341. color: #777;
  342. font-size: 11px;
  343. }
  344. .color {
  345. color: #fd5454;
  346. }
  347. .bgcolor {
  348. background: #fd5454
  349. }
  350. .fui-goods-group.block .fui-goods-item {
  351. width: 50%;
  352. float: left;
  353. border-bottom: 0;
  354. background: none;
  355. padding: 5px;
  356. display: block;
  357. }
  358. .fui-goods-group.block .fui-goods-item .image {
  359. width: 100%;
  360. height: 0;
  361. overflow: hidden;
  362. margin: 0;
  363. padding-bottom: 100%; /* 关键就在这里 */
  364. background-position: center;
  365. background-repeat: no-repeat;
  366. background-size: cover;
  367. }
  368. .fui-goods-group.block {
  369. padding: 4px;
  370. }
  371. .fui-goods-group.block .fui-goods-item .image {
  372. float: none;
  373. }
  374. .fui-goods-group.block .fui-goods-item .detail {
  375. padding: 4px;
  376. overflow: hidden;
  377. }
  378. .fui-goods-group.block .fui-goods-item .detail .name {
  379. height: 40px;
  380. overflow: hidden;
  381. }
  382. .fui-goods-group.block .fui-goods-item .center-image {
  383. max-width: 100%;
  384. height: 0;
  385. padding-bottom: 100%;
  386. background-size: contain;
  387. }
  388. .fui-goods-group.block .fui-goods-item .detail .name {
  389. height: 40px;
  390. overflow: hidden;
  391. }
  392. .fui-goods-group.block.one .fui-goods-item {
  393. width: 100%;
  394. float: none;
  395. }
  396. .fui-goods-group.block.three .fui-goods-item {
  397. width: 33.33%;
  398. }
  399. /**/
  400. .fui-cube {
  401. height: 0;
  402. width: 100%;
  403. margin: 0;
  404. padding-bottom: 50%;
  405. position: relative;
  406. }
  407. .fui-cube .fui-cube-left {
  408. width: 50%;
  409. height: 100%;
  410. position: absolute;
  411. top: 0;
  412. left: 0;
  413. }
  414. .fui-cube .fui-cube-right {
  415. width: 50%;
  416. height: 100%;
  417. position: absolute;
  418. top: 0;
  419. left: 50%;
  420. }
  421. .fui-cube .fui-cube-right1 {
  422. width: 100%;
  423. height: 50%;
  424. position: absolute;
  425. top: 0;
  426. left: 0;
  427. }
  428. .fui-cube .fui-cube-right2 {
  429. width: 100%;
  430. height: 50%;
  431. position: absolute;
  432. top: 50%;
  433. left: 0;
  434. }
  435. .fui-cube .fui-cube-right2 .left {
  436. width: 50%;
  437. height: 100%;
  438. position: absolute;
  439. top: 0;
  440. left: 0;
  441. }
  442. .fui-cube .fui-cube-right2 .right {
  443. width: 50%;
  444. height: 100%;
  445. position: absolute;
  446. top: 0;
  447. left: 50%;
  448. }
  449. .fui-cube img {
  450. width: 100%;
  451. height: 100%;
  452. }
  453. .diy-followbar {
  454. position: absolute;
  455. top: 0;
  456. left: 0;
  457. right: 0;
  458. height: 50px;
  459. background: #444444;
  460. position: relative;
  461. display: -webkit-box;
  462. display: -webkit-flex;
  463. display: -ms-flexbox;
  464. display: flex;
  465. padding: 6px;
  466. -webkit-box-align: center;
  467. -webkit-align-items: center;
  468. -ms-flex-align: center;
  469. align-items: center;
  470. overflow: hidden;
  471. z-index: 887;
  472. }
  473. .diy-followbar .logo {
  474. width: 38px;
  475. height: 38px;
  476. background: #f4f4f4;
  477. display: -webkit-box;
  478. display: -webkit-flex;
  479. display: flex;
  480. -webkit-flex-shrink: 0;
  481. -ms-flex: 0 0 auto;
  482. -webkit-flex-shrink: 0;
  483. flex-shrink: 0;
  484. -webkit-box-lines: single;
  485. -moz-box-lines: single;
  486. -webkit-flex-wrap: nowrap;
  487. flex-wrap: nowrap;
  488. box-sizing: border-box;
  489. -webkit-box-align: center;
  490. -webkit-align-items: center;
  491. align-items: center;
  492. margin-right: 8px;
  493. position: relative;
  494. overflow: hidden;
  495. }
  496. .diy-followbar .logo img {
  497. height: inherit;
  498. width: inherit;
  499. display: block;
  500. }
  501. .diy-followbar .logo.radius {
  502. border-radius: 5px;
  503. }
  504. .diy-followbar .logo.circle {
  505. border-radius: 40px;
  506. }
  507. .diy-followbar .text {
  508. height: 38px;
  509. position: relative;
  510. width: 100%;
  511. overflow: hidden;
  512. box-sizing: border-box;
  513. display: -webkit-box;
  514. display: -webkit-flex;
  515. display: flex;
  516. -webkit-box-flex: 1;
  517. -ms-flex: 1;
  518. -webkit-box-align: center;
  519. -webkit-align-items: center;
  520. align-items: center;
  521. color: #fff;
  522. }
  523. .diy-followbar .text .inner {
  524. height: auto;
  525. max-height: 38px;
  526. overflow: hidden;
  527. }
  528. .diy-followbar .btn {
  529. background: #04be02;
  530. height: 10px;
  531. margin-left: 4px;
  532. height: 24px;
  533. padding: 0 6px;
  534. line-height: 22px;
  535. font-size: 12px;
  536. color: #fff;
  537. }
  538. .fui-cell-group {
  539. margin-top: 10px;
  540. background-color: #fff;
  541. line-height: 1.4;
  542. font-size: 16px;
  543. overflow: hidden;
  544. position: relative;
  545. }
  546. .fui-cell-group.sm * {
  547. font-size: 14px;
  548. }
  549. .fui-cell-group.fui-cell-group-o {
  550. margin: 0 10px;
  551. margin-top: 10px;
  552. border-radius: 10px;
  553. }
  554. .fui-cell-group.fui-cell-group-o:active a:last-child {
  555. border-bottom-left-radius: 6px;
  556. border-bottom-right-radius: 6px;
  557. }
  558. .fui-cell-group.fui-cell-group-o:active a:first-child {
  559. border-top-left-radius: 6px;
  560. border-top-right-radius: 6px;
  561. }
  562. .fui-cell-group:not(.fui-cell-group-o):before {
  563. content: " ";
  564. position: absolute;
  565. left: 0;
  566. top: 0;
  567. width: 100%;
  568. height: 1px;
  569. border-top: 1px solid #D9D9D9;
  570. color: #D9D9D9;
  571. -webkit-transform-origin: 0 0;
  572. -ms-transform-origin: 0 0;
  573. transform-origin: 0 0;
  574. -webkit-transform: scaleY(0.5);
  575. -ms-transform: scaleY(0.5);
  576. transform: scaleY(0.5);
  577. }
  578. .fui-cell-group:after {
  579. content: "";
  580. position: absolute;
  581. left: 0;
  582. bottom: 0;
  583. width: 100%;
  584. height: 1px;
  585. border-bottom: 1px solid #D9D9D9;
  586. color: #D9D9D9;
  587. -webkit-transform-origin: 0 100%;
  588. -ms-transform-origin: 0 100%;
  589. transform-origin: 0 100%;
  590. -webkit-transform: scaleY(0.5);
  591. -ms-transform: scaleY(0.5);
  592. transform: scaleY(0.5);
  593. }
  594. .fui-cell-group .fui-cell {
  595. position: relative;
  596. padding: 8px;
  597. display: -webkit-box;
  598. display: -webkit-flex;
  599. display: -ms-flexbox;
  600. display: flex;
  601. -webkit-box-align: center;
  602. -webkit-align-items: center;
  603. -ms-flex-align: center;
  604. align-items: center;
  605. -moz-transition-duration: 300ms;
  606. -webkit-transition-duration: 300ms;
  607. transition-duration: 300ms;
  608. -webkit-transition-property: background-color;
  609. transition-property: background-color;
  610. }
  611. .fui-cell-group .fui-cell:before {
  612. content: " ";
  613. position: absolute;
  614. left: 10px;
  615. right: 10px;
  616. top: 0;
  617. height: 1px;
  618. border-top: 1px solid #D9D9D9;
  619. color: #D9D9D9;
  620. -webkit-transform-origin: 0 0;
  621. -ms-transform-origin: 0 0;
  622. transform-origin: 0 0;
  623. -webkit-transform: scaleY(0.5);
  624. -ms-transform: scaleY(0.5);
  625. transform: scaleY(0.5);
  626. }
  627. .fui-cell-group .fui-cell.must .fui-cell-label:after {
  628. content: "*";
  629. position: absolute;
  630. right: 4px;
  631. top: 4px;
  632. color: #f30;
  633. font-size: 16px
  634. }
  635. .fui-cell-group-o:after,
  636. .fui-cell-group .fui-cell:first-child:before {
  637. display: none;
  638. }
  639. .fui-cell-group.fui-cell-click .fui-cell:active,
  640. .fui-cell-group .fui-cell.fui-cell-click:active {
  641. background: #ececec;
  642. }
  643. .fui-cell-title {
  644. color: #333;
  645. font-size: 15px;
  646. padding: 10px 14px;
  647. }
  648. .fui-cell-tip {
  649. color: #999;
  650. font-size: 12px;
  651. padding: 6px 14px;
  652. }
  653. .fui-cell-group .fui-cell .fui-cell-info {
  654. -webkit-box-flex: 1;
  655. -webkit-flex: 1;
  656. -ms-flex: 1;
  657. flex: 1;
  658. white-space: nowrap;
  659. text-overflow: ellipsis;
  660. overflow: hidden;
  661. font-size: 15px;
  662. color: #666;
  663. }
  664. .fui-cell-group .fui-cell .fui-cell-info.overflow {
  665. word-break: break-all;
  666. overflow: auto;
  667. white-space: normal;
  668. height: auto;
  669. }
  670. .fui-cell-group .fui-cell .fui-cell-info .checkbox-inline,
  671. .fui-cell-group .fui-cell .fui-cell-info .radio-inline {
  672. float: left;
  673. margin-bottom: 4px;
  674. }
  675. .fui-cell-group .fui-cell .fui-cell-label {
  676. position: relative;
  677. display: block;
  678. width: 80px;
  679. padding: 0 4px;
  680. font-size: 15px;
  681. }
  682. .fui-cell-group .fui-cell .fui-cell-label.big {
  683. display: block;
  684. width: 90px;
  685. padding: 0 4px;
  686. font-size: 16px;
  687. }
  688. .fui-cell-group .fui-cell .fui-cell-info select {
  689. -webkit-appearance: none;
  690. border: 0;
  691. outline: 0;
  692. background-color: transparent;
  693. width: 100%;
  694. font-size: inherit;
  695. height: 24px;
  696. position: relative;
  697. z-index: 1;
  698. padding-left: 15px;
  699. }
  700. .fui-cell-group .fui-cell .fui-cell-info select {
  701. padding: 0;
  702. }
  703. .fui-cell-group .fui-cell .fui-cell-icon {
  704. color: #333;
  705. margin-right: 6px;
  706. width: 16px;
  707. color: #999;
  708. text-align: center;
  709. }
  710. .fui-cell-group .fui-cell .fui-cell-icon.pull-left {
  711. font-size: 17px;
  712. }
  713. .fui-cell-group .fui-cell .fui-cell-text {
  714. -webkit-box-flex: 1;
  715. -webkit-flex: 1;
  716. -ms-flex: 1;
  717. flex: 1;
  718. color: #333;
  719. font-size: 14px;
  720. }
  721. .fui-cell-group .fui-cell .fui-cell-remark {
  722. color: #888;
  723. text-align: right;
  724. font-size: 13px;
  725. margin-right: 4px;
  726. }
  727. .fui-cell-group .fui-cell .fui-cell-remark:after {
  728. content: " ";
  729. display: inline-block;
  730. -webkit-transform: rotate(45deg);
  731. -ms-transform: rotate(45deg);
  732. transform: rotate(45deg);
  733. height: 6px;
  734. width: 6px;
  735. border-width: 2px 2px 0 0;
  736. border-color: #C8C8CD;
  737. border-style: solid;
  738. position: relative;
  739. top: -1px;
  740. margin-left: 6px;
  741. }
  742. .fui-cell-group .fui-cell .fui-cell-remark.noremark:after {
  743. display: none;
  744. margin-left: 0;
  745. }
  746. .fui-cell-group .fui-cell.fui-cell-textarea .fui-cell-label {
  747. margin-top: -30px;
  748. }
  749. .headinfo {
  750. position: relative;
  751. height: auto;
  752. background: #fe5455;
  753. padding-top: 20px;
  754. border-top: 1px #b2423f solid;
  755. border-bottom: 1px #fa9d9d solid;
  756. display: -webkit-box;
  757. display: -webkit-flex;
  758. display: -ms-flexbox;
  759. display: flex;
  760. -webkit-box-pack: justify;
  761. -ms-flex-pack: justify;
  762. -webkit-justify-content: space-between;
  763. justify-content: space-between;
  764. -webkit-box-align: center;
  765. -ms-flex-align: center;
  766. -webkit-align-items: center;
  767. }
  768. .headinfo .setbtn {
  769. height: 24px;
  770. width: 24px;
  771. position: absolute;
  772. top: 4px;
  773. right: 10px;
  774. font-size: 24px;
  775. color: #fff;
  776. line-height: 24px;
  777. text-align: center;
  778. }
  779. .headinfo .child {
  780. width: 30%;
  781. height: auto;
  782. padding-bottom: 24px;
  783. text-align: center;
  784. }
  785. .headinfo .child.userinfo {
  786. width: 40%;
  787. color: #fff;
  788. }
  789. .headinfo .child.userinfo .face {
  790. height: 56px;
  791. width: 56px;
  792. background: #fff;
  793. margin: auto;
  794. border-radius: 56px;
  795. border: 2px solid #fff;
  796. }
  797. .headinfo .child.userinfo .face img {
  798. height: 52px;
  799. width: 52px;
  800. border-radius: 52px;
  801. display: block;
  802. }
  803. .headinfo .child.userinfo .face.radius {
  804. border-radius: 10px;
  805. }
  806. .headinfo .child.userinfo .face.radius img {
  807. border-radius: 10px;
  808. }
  809. .headinfo .child.userinfo .name {
  810. height: 20px;
  811. padding-top: 4px;
  812. font-size: 12px;
  813. color: inherit;
  814. text-align: center;
  815. white-space: nowrap;
  816. text-overflow: ellipsis;
  817. overflow: hidden;
  818. }
  819. .headinfo .child.userinfo .level {
  820. font-size: 12px;
  821. color: inherit;
  822. text-align: center;
  823. }
  824. .headinfo .child .title {
  825. padding-top: 24px;
  826. font-size: 14px;
  827. color: #fff;
  828. text-align: center;
  829. }
  830. .headinfo .child .num {
  831. font-size: 14px;
  832. color: #fef31f;
  833. text-align: center;
  834. white-space: nowrap;
  835. text-overflow: ellipsis;
  836. overflow: hidden;
  837. }
  838. .headinfo .child .btn {
  839. width: 52px;
  840. height: 20px;
  841. padding: 0;
  842. margin: 4px auto 0;
  843. color: #fff;
  844. font-size: 12px;
  845. line-height: 18px;
  846. text-align: center;
  847. border-radius: 20px;
  848. border: 1px solid #fff;
  849. }
  850. .headinfo.style-2 {
  851. padding: 15px 15px;
  852. }
  853. .headinfo.style-2 .face {
  854. height: 60px;
  855. width: 60px;
  856. border-radius: 60px;
  857. float: left;
  858. position: relative;
  859. display: -webkit-box;
  860. display: -webkit-flex;
  861. display: flex;
  862. -webkit-flex-shrink: 0;
  863. -ms-flex: 0 0 auto;
  864. -webkit-flex-shrink: 0;
  865. flex-shrink: 0;
  866. -webkit-box-lines: single;
  867. -moz-box-lines: single;
  868. -webkit-flex-wrap: nowrap;
  869. flex-wrap: nowrap;
  870. box-sizing: border-box;
  871. -webkit-box-align: center;
  872. -webkit-align-items: center;
  873. align-items: center;
  874. }
  875. .headinfo.style-2 .face img {
  876. height: 60px;
  877. width: 60px;
  878. border-radius: 60px;
  879. display: block;
  880. }
  881. .headinfo.style-2 .face.radius {
  882. border-radius: 10px;
  883. }
  884. .headinfo.style-2 .face.radius img {
  885. border-radius: 10px;
  886. }
  887. .headinfo.style-2 .inner {
  888. height: auto;
  889. position: relative;
  890. width: 100%;
  891. overflow: hidden;
  892. box-sizing: border-box;
  893. display: -webkit-box;
  894. display: -webkit-flex;
  895. display: flex;
  896. -webkit-box-flex: 1;
  897. -ms-flex: 1;
  898. display: block;
  899. padding-left: 10px;
  900. color: #fff;
  901. }
  902. .headinfo.style-2 .inner .name {
  903. font-size: 16px;
  904. }
  905. .headinfo.style-2 .inner .level,
  906. .headinfo.style-2 .inner .credit {
  907. font-size: 14px;
  908. }
  909. .headinfo.style-2 .inner span {
  910. color: #fef31f;
  911. }
  912. .headinfo.commission {
  913. height: auto;
  914. background: #FE5455;
  915. border-top: 1px #b94749 solid;
  916. border-bottom: 1px #fa9d9d solid;
  917. display: block;
  918. padding-top: 0;
  919. }
  920. .headinfo.commission .userinfo {
  921. height: 4rem;
  922. padding: 0.3rem 0.6rem;
  923. border-bottom: 1px solid #fe9292;
  924. position: relative
  925. }
  926. .headinfo.commission .userinfo .fui-list {
  927. padding: 0rem;
  928. padding-top: .2rem;
  929. }
  930. .headinfo.commission .userinfo .fui-list:active {
  931. background: transparent
  932. }
  933. .headinfo.commission .userinfo .fui-list-media img {
  934. height: 2.5rem;
  935. width: 2.5rem;
  936. border-radius: 2.5rem;
  937. border: 2px solid #fff;
  938. }
  939. .headinfo.commission .userinfo .fui-list .fui-list-info .title {
  940. color: #fff;
  941. font-size: 0.7rem;
  942. line-height: 1rem;
  943. }
  944. .headinfo.commission .userinfo .fui-list .fui-list-info .subtitle {
  945. color: #fef31f;
  946. font-size: 0.65rem;
  947. }
  948. .headinfo.commission .userinfo .fui-list .fui-list-info .text {
  949. color: #fff;
  950. font-size: 0.6rem;
  951. }
  952. .headinfo.commission .userinfo .setbtn {
  953. position: absolute;
  954. height: 1.4rem;
  955. width: 1.2rem;
  956. font-size: 1.2rem;
  957. color: #fff;
  958. line-height: 1.4rem;
  959. text-align: center;
  960. right: .5rem;
  961. top: .5rem;
  962. }
  963. .headinfo.commission .userblock {
  964. height: auto;
  965. padding: 0 0.6rem;
  966. }
  967. .headinfo.commission .userblock .line {
  968. height: auto;
  969. padding: 0.9rem 0 0;
  970. color: #fff;
  971. overflow: hidden;
  972. }
  973. .headinfo.commission .userblock .line.total {
  974. height: auto;
  975. }
  976. .headinfo.commission .userblock .line.total .title {
  977. font-size: 0.7rem;
  978. }
  979. .headinfo.commission .userblock .line.total .num {
  980. font-size: 1.4rem;
  981. line-height: 1.7rem;
  982. font-weight: 100;
  983. }
  984. .headinfo.commission .userblock .line.usable {
  985. height: auto;
  986. padding-bottom: 0.9rem;
  987. padding-top: 1.1rem;
  988. }
  989. .headinfo.commission .userblock .line.usable .btn {
  990. height: 1.2rem;
  991. width: auto;
  992. padding: 0 0.4rem;
  993. border: 1px solid #fff;
  994. line-height: 1.2rem;
  995. border-radius: 0.6rem;
  996. font-size: 0.7rem;
  997. float: right;
  998. color: inherit;
  999. }
  1000. .headinfo.commission .userblock .line.usable .btn.disabled {
  1001. height: 1.2rem;
  1002. width: auto;
  1003. padding: 0 0.4rem;
  1004. border: 1px solid #ccc;
  1005. line-height: 1.2rem;
  1006. border-radius: 0.6rem;
  1007. font-size: 0.7rem;
  1008. float: right;
  1009. color: #ccc;
  1010. }
  1011. .headinfo.commission .userblock .line.usable .text {
  1012. padding-right: 4rem;
  1013. }
  1014. .headinfo.commission .userblock .line.usable .text .title {
  1015. font-size: 0.6rem;
  1016. line-height: 0.6rem;
  1017. }
  1018. .headinfo.commission .userblock .line.usable .text .num {
  1019. font-size: 1rem;
  1020. font-weight: 100;
  1021. line-height: 1.4rem;
  1022. }
  1023. /* tab */
  1024. .fui-tab {
  1025. -webkit-align-self: center;
  1026. align-self: center;
  1027. display: -webkit-box;
  1028. display: -webkit-flex;
  1029. display: flex;
  1030. -webkit-box-lines: single;
  1031. -moz-box-lines: single;
  1032. -webkit-flex-wrap: nowrap;
  1033. flex-wrap: nowrap;
  1034. margin-bottom: 2px;
  1035. background: white;
  1036. position: relative;
  1037. }
  1038. .fui-tab:after {
  1039. content: '';
  1040. position: absolute;
  1041. left: 0;
  1042. bottom: 0;
  1043. right: auto;
  1044. top: auto;
  1045. height: 1px;
  1046. width: 100%;
  1047. background-color: #d0d0d0;
  1048. display: block;
  1049. z-index: 0;
  1050. -webkit-transform-origin: 50% 100%;
  1051. transform-origin: 50% 100%;
  1052. }
  1053. .fui-tab nav {
  1054. text-align: center;
  1055. cursor: default;
  1056. color: #666;
  1057. font-size: 0.8rem;
  1058. width: 100%;
  1059. height: 2rem;
  1060. line-height: 2rem;
  1061. -webkit-box-flex: 1;
  1062. -ms-flex: 1;
  1063. border: 0;
  1064. border-bottom: 2px solid transparent;
  1065. border-radius: 0;
  1066. }
  1067. .fui-tab.fui-tab-danger nav.active {
  1068. color: #ef4f4f;
  1069. border-color: #ef4f4f;
  1070. z-index: 100;
  1071. }
  1072. .diy-swipe {
  1073. height: auto;
  1074. overflow: hidden;
  1075. }
  1076. .diy-swipe img {
  1077. height: auto;
  1078. width: 100%;
  1079. display: block;
  1080. }
  1081. .diy-swipe .dots {
  1082. height: 14px;
  1083. padding: 0 10px;
  1084. position: absolute;
  1085. left: 0;
  1086. right: 0;
  1087. bottom: 10px;
  1088. opacity: 0.5;
  1089. }
  1090. .diy-swipe .dots.left {
  1091. text-align: left;
  1092. }
  1093. .diy-swipe .dots.center {
  1094. text-align: center;
  1095. }
  1096. .diy-swipe .dots.right {
  1097. text-align: right;
  1098. }
  1099. .diy-swipe .dots.rectangle span {
  1100. height: 12px;
  1101. width: 20px;
  1102. }
  1103. .diy-swipe .dots.square span {
  1104. height: 12px;
  1105. width: 12px;
  1106. }
  1107. .diy-swipe .dots.round span {
  1108. height: 12px;
  1109. width: 12px;
  1110. border-radius: 12px;
  1111. }
  1112. .diy-swipe .dots span {
  1113. display: inline-block;
  1114. }
  1115. .fui-navbar,.fui-footer {
  1116. width: 100%;
  1117. bottom: 0;
  1118. height: 2.5rem;
  1119. background: #fff;
  1120. box-shadow:0 0 4px rgba(0,0,0,0.1);
  1121. -webkit-box-shadow:0 0 4px rgba(0,0,0,0.1);
  1122. -moz-box-shadow:0 0 4px rgba(0,0,0,0.1);
  1123. }
  1124. .fui-navbar .nav-item.btn {
  1125. color:#fff; border-radius: 0;
  1126. }
  1127. .fui-navbar .nav-item {
  1128. position: relative;
  1129. display: table-cell;
  1130. height: 2.5rem;
  1131. text-align: center;
  1132. vertical-align: middle;
  1133. width: 1%;
  1134. color:#999;
  1135. }
  1136. .fui-navbar .nav-item.active,
  1137. .fui-navbar .nav-item:active {
  1138. color: red
  1139. }
  1140. .fui-navbar .nav-item .label {
  1141. display: block;
  1142. font-size: 0.55rem;
  1143. position: relative;
  1144. top: -0.1rem;
  1145. background: none;
  1146. color: #999;
  1147. }
  1148. .fui-navbar .nav-item .icon {
  1149. font-size: 1rem;
  1150. padding: 0;
  1151. }
  1152. .fui-navbar .nav-item .badge {
  1153. background: red none repeat scroll 0 0;
  1154. border-radius: 0.5rem;
  1155. color: white;
  1156. font-size: 0.6rem;
  1157. height: 0.8rem;
  1158. left: 50%;
  1159. line-height: 0.8rem;
  1160. margin-left: 0.1rem;
  1161. min-width: 0.8rem;
  1162. padding: 0 0.2rem;
  1163. position: absolute;
  1164. top: 0.1rem;
  1165. vertical-align: top;
  1166. z-index: 100;
  1167. }
  1168. .fui-navbar .cartbtn {
  1169. background: #fe9402;
  1170. }
  1171. .fui-navbar .buybtn {
  1172. background: #fd5555;
  1173. }
  1174. .fui-detail-group {
  1175. margin-top: 0
  1176. }
  1177. .fui-detail-group .fui-cell {
  1178. padding: 0 0.5rem;
  1179. }
  1180. .fui-detail-group .fui-cell:before {
  1181. border: 0;
  1182. }
  1183. .fui-detail-group .fui-cell .price {
  1184. font-size: 1rem;
  1185. color: #fd5454;
  1186. line-height: 1.4rem;
  1187. font-weight: 100;
  1188. font-weight: bold;
  1189. }
  1190. .fui-detail-group .fui-cell .price .original {
  1191. font-size: 0.6rem;
  1192. color: #C0C0C0;
  1193. text-decoration: line-through;
  1194. padding-left: 0.2rem;
  1195. font-weight: normal
  1196. }
  1197. .fui-detail-group .fui-cell .name {
  1198. padding: 0.4rem 0 0;
  1199. font-size: 0.75rem;
  1200. }
  1201. .fui-detail-group .fui-cell .share {
  1202. padding-left: 0.8rem;
  1203. margin-top: 0.4rem;
  1204. position: relative;
  1205. text-align: center;
  1206. }
  1207. .fui-detail-group .fui-cell .share:before {
  1208. content: " ";
  1209. border-left: 1px solid #C0C0C0;
  1210. height: 100%;
  1211. left: 0rem;
  1212. position: absolute;
  1213. }
  1214. .fui-detail-group .fui-cell .share:after {
  1215. display: none;
  1216. }
  1217. .fui-detail-group .fui-cell .flex {
  1218. display: -webkit-box;
  1219. display: -webkit-flex;
  1220. display: -ms-flexbox;
  1221. display: flex;
  1222. font-size: 0.6rem;
  1223. color: #C0C0C0;
  1224. padding-bottom: 0.4rem;
  1225. }
  1226. .fui-detail-group .fui-cell .flex span {
  1227. width: 100%;
  1228. text-align: center;
  1229. }
  1230. .fui-detail-group .fui-cell .flex span:first-child {
  1231. text-align: left;
  1232. }
  1233. .fui-detail-group .fui-cell .flex span:last-child {
  1234. text-align: right;
  1235. }
  1236. .goods-subtitle span {
  1237. font-size: .65rem;
  1238. padding: .2rem 0
  1239. }
  1240. .fui-cell-group .fui-cell .row-time {
  1241. padding: 0 0 .5rem .5rem;
  1242. overflow: hidden;
  1243. }
  1244. .fui-cell-group .fui-cell .fui-labeltext .text .number {
  1245. font-weight: bold;
  1246. }
  1247. .fui-cell-group .fui-cell .fui-labeltext .text .time {
  1248. font-size: .65rem;
  1249. padding: 0 .1rem;
  1250. }
  1251. .fui-cell-group.fui-sale-group:before {
  1252. border: 0;
  1253. }
  1254. .fui-cell-group.fui-sale-group .fui-cell .fui-cell-text,
  1255. .fui-cell-group.fui-sale-group .fui-according-header .text {
  1256. font-size: 0.65rem;
  1257. color: #666;
  1258. text-overflow: ellipsis;
  1259. white-space: nowrap;
  1260. overflow: hidden;
  1261. }
  1262. .fui-cell-group.fui-sale-group .fui-according-header .text .title {
  1263. font-weight: bold;
  1264. }
  1265. /* 限时购 */
  1266. .fui-labeltext {
  1267. position: relative;
  1268. border:1px solid #d9d9d9;
  1269. display: table-cell;
  1270. border-radius: .2rem;
  1271. height:1.5rem;
  1272. }
  1273. .fui-labeltext.fui-labeltext-success {border:1px solid #04ab02 }
  1274. .fui-labeltext.fui-labeltext-primary{border:1px solid #0290be }
  1275. .fui-labeltext.fui-labeltext-warning {border:1px solid #ff9326 }
  1276. .fui-labeltext.fui-labeltext-danger { border:1px solid #ef4f4f }
  1277. .fui-labeltext .label {
  1278. background:#d9d9d9;
  1279. font-size:0.75rem;
  1280. float:left;
  1281. height:1.5rem; line-height:1.5rem;
  1282. padding:0 .2rem;
  1283. }
  1284. .fui-labeltext.fui-labeltext-success .label {background: #04ab02;color:#fff; }
  1285. .fui-labeltext.fui-labeltext-primary .label{background:#0290be;color:#fff; }
  1286. .fui-labeltext.fui-labeltext-warning .label {background:#ff9326;color:#fff; }
  1287. .fui-labeltext.fui-labeltext-danger .label { background:#ef4f4f;color:#fff; }
  1288. .fui-labeltext .text {
  1289. float:left;
  1290. height:1.5rem; line-height:1.5rem;
  1291. padding:0 .2rem;
  1292. }
  1293. /* 店铺信息 */
  1294. .fui-shop-group .fui-cell:before {
  1295. display: none;
  1296. }
  1297. .fui-shop-group .fui-cell {
  1298. padding: 0 0.5rem;
  1299. }
  1300. .fui-shop-group .fui-cell .shopname {
  1301. height: 2rem;
  1302. width: 100%;
  1303. padding-left: 0.5rem;
  1304. margin-top: 0.5rem;
  1305. font-size: 0.8rem;
  1306. line-height: 1rem;
  1307. }
  1308. .fui-shop-group .fui-cell .center {
  1309. text-align: center;
  1310. margin: 0.4rem 0;
  1311. position: relative;
  1312. font-size: 0.7rem;
  1313. }
  1314. .fui-shop-group .fui-cell .center:before {
  1315. height: 100%;
  1316. width: 1px;
  1317. content: " ";
  1318. position: absolute;
  1319. left: 0;
  1320. top: 0;
  1321. background: #dbdbdb;
  1322. }
  1323. .fui-shop-group .fui-cell .center:first-child:before {
  1324. background: none;
  1325. }
  1326. .fui-shop-group .fui-cell .center p {
  1327. color: #7c7c7c;
  1328. font-size: 0.6rem;
  1329. }
  1330. .fui-shop-group .fui-cell .btn-default-o {
  1331. width: 4rem;
  1332. height: 1.2rem;
  1333. border-color: #7c7c7c;
  1334. color: #7c7c7c;
  1335. font-size: 0.7rem;
  1336. padding: 0;
  1337. margin: 0 0.5rem 0.2rem;
  1338. line-height: 1.2rem;
  1339. display: inline-block;
  1340. }
  1341. .fui-shop-group .fui-list:after {
  1342. display: none
  1343. }
  1344. .fui-shop-group .title {
  1345. font-size: 0.8rem;
  1346. }
  1347. .fui-shop-group .subtitle {
  1348. font-size: 0.7rem;
  1349. }
  1350. .fui-list-media.radius img {
  1351. border-radius: 0.3rem;
  1352. }
  1353. .fui-list-media.circle img {
  1354. border-radius: 2.5rem;
  1355. }
  1356. /*评论组*/
  1357. .fui-comment-group .fui-cell:before {
  1358. border: 0;
  1359. }
  1360. .fui-comment-group .fui-cell {
  1361. padding: 0 0.5rem;
  1362. }
  1363. .fui-comment-group .fui-cell .comment {
  1364. padding: 0;
  1365. position: relative;
  1366. }
  1367. .fui-comment-group .fui-cell .comment:before {
  1368. content: " ";
  1369. width: 100%;
  1370. height: 1px;
  1371. border-top: 1px solid #eee;
  1372. top: 0;
  1373. left: 0;
  1374. position: absolute;
  1375. }
  1376. .fui-comment-group .fui-cell .comment .info {
  1377. color: #7C7C7C;
  1378. font-size: 0.6rem;
  1379. width: 100%;
  1380. }
  1381. .fui-comment-group .fui-cell .comment .info.head {
  1382. height: 1.3rem;
  1383. line-height: 1.2rem;
  1384. }
  1385. .fui-comment-group .fui-cell .comment .info .img {
  1386. float: left;
  1387. }
  1388. .fui-comment-group .fui-cell .comment .info .img img {
  1389. width: 1.2rem;
  1390. height: 1.2rem;
  1391. border-radius: .6rem;
  1392. }
  1393. .fui-comment-group .fui-cell .comment .info .nickname {
  1394. float: left;
  1395. padding-left: .3rem;
  1396. }
  1397. .fui-comment-group .fui-cell .comment .info .star {
  1398. float: left;
  1399. color: #666;
  1400. }
  1401. .fui-comment-group .fui-cell .comment .info .star span {
  1402. padding: 0;
  1403. margin: 0
  1404. }
  1405. .fui-comment-group .fui-cell .comment .info .star .shine {
  1406. color: #fd5454;
  1407. }
  1408. .fui-comment-group .fui-cell .comment .info .star.star1 {
  1409. clear: both
  1410. }
  1411. .fui-comment-group .fui-cell .comment .info .date {
  1412. text-align: right;
  1413. }
  1414. .fui-comment-group .fui-cell .comment .remark {
  1415. font-size: 0.7rem;
  1416. display: -webkit-box;
  1417. display: -webkit-flex;
  1418. display: -ms-flexbox;
  1419. display: flex;
  1420. width: 100%;
  1421. }
  1422. .fui-comment-group .fui-cell .comment .remark .img {
  1423. padding: 0.2rem 0.2rem 0 0;
  1424. }
  1425. .fui-comment-group .fui-cell .comment .remark .img img {
  1426. height: 50px;
  1427. }
  1428. .fui-comment-group .fui-cell .desc.label {
  1429. font-size: 0.6rem;
  1430. text-align: right;
  1431. background: none;
  1432. font-weight: 100;
  1433. }
  1434. .fui-comment-group .fui-cell .desc.label span {
  1435. color: #fd5454;
  1436. }
  1437. .fui-comment-group .fui-cell .desc {
  1438. font-size: 0.6rem;
  1439. color: #7c7c7c;
  1440. line-height: 1.5rem;
  1441. padding: .2rem 0
  1442. }
  1443. .comment-block.in {
  1444. -webkit-transform: translate3d(0, 0, 0);
  1445. transform: translate3d(0, 0, 0);
  1446. }
  1447. .comment-block .fui-icon-group {
  1448. font-size: .65rem;
  1449. }
  1450. /** According **/
  1451. .fui-according-group {
  1452. margin-top: 0.5rem;
  1453. background-color: #fff;
  1454. line-height: 1.4;
  1455. font-size: 0.8rem;
  1456. overflow: hidden;
  1457. position: relative;
  1458. }
  1459. .fui-according-group.fui-according-group-o {
  1460. margin: 0 .5rem;
  1461. border-radius: .5rem;
  1462. margin-top: 0.5rem;
  1463. }
  1464. .fui-according-group:not(.fui-according-group-o):before {
  1465. content: " ";
  1466. position: absolute;
  1467. left: 0;
  1468. top: 0;
  1469. width: 100%;
  1470. height: 1px;
  1471. border-top: 1px solid #D9D9D9;
  1472. color: #D9D9D9;
  1473. -webkit-transform-origin: 0 0;
  1474. -ms-transform-origin: 0 0;
  1475. transform-origin: 0 0;
  1476. -webkit-transform: scaleY(0.5);
  1477. -ms-transform: scaleY(0.5);
  1478. transform: scaleY(0.5);
  1479. }
  1480. .fui-according-group:after {
  1481. content: "";
  1482. position: absolute;
  1483. left: 0;
  1484. bottom: 0;
  1485. width: 100%;
  1486. height: 1px;
  1487. border-bottom: 1px solid #D9D9D9;
  1488. color: #D9D9D9;
  1489. -webkit-transform-origin: 0 100%;
  1490. -ms-transform-origin: 0 100%;
  1491. transform-origin: 0 100%;
  1492. -webkit-transform: scaleY(0.5);
  1493. -ms-transform: scaleY(0.5);
  1494. transform: scaleY(0.5);
  1495. }
  1496. .fui-according {
  1497. position: relative;
  1498. }
  1499. .fui-according:before {
  1500. content: " ";
  1501. position: absolute;
  1502. left: 0;
  1503. top: 0;
  1504. width: 100%;
  1505. height: 1px;
  1506. border-top: 1px solid #D9D9D9;
  1507. color: #D9D9D9;
  1508. -webkit-transform-origin: 0 0;
  1509. -ms-transform-origin: 0 0;
  1510. transform-origin: 0 0;
  1511. -webkit-transform: scaleY(0.5);
  1512. -ms-transform: scaleY(0.5);
  1513. transform: scaleY(0.5);
  1514. left: .5rem;
  1515. }
  1516. .fui-according:first-child:before {
  1517. display: none;
  1518. }
  1519. .fui-according-header {
  1520. position: relative;
  1521. display: -webkit-box;
  1522. display: -webkit-flex;
  1523. display: -ms-flexbox;
  1524. display: flex;
  1525. width: 100%;
  1526. padding: 0.5rem 0.5rem;
  1527. -moz-transition-duration: 300ms;
  1528. -webkit-transition-duration: 300ms;
  1529. transition-duration: 300ms;
  1530. -webkit-transition-property: background-color;
  1531. transition-property: background-color;
  1532. }
  1533. .fui-according-header:active {
  1534. background: #d9d9d9;
  1535. }
  1536. .fui-according-header .text {
  1537. -webkit-box-flex: 1;
  1538. -webkit-flex: 1;
  1539. -ms-flex: 1;
  1540. flex: 1;
  1541. color: #333;
  1542. font-size: 0.75rem;text-overflow: ellipsis;
  1543. white-space: nowrap;
  1544. overflow: hidden;
  1545. padding: 0 0.2rem;
  1546. }
  1547. .fui-according-header .remark {
  1548. color: #888;
  1549. text-align: right;
  1550. font-size: 0.75rem;
  1551. }
  1552. .fui-according-header .remark:after {
  1553. content: " ";
  1554. display: inline-block;
  1555. -webkit-transform: rotate(45deg);
  1556. -ms-transform: rotate(45deg);
  1557. transform: rotate(45deg);
  1558. height: 0.3rem;
  1559. width: 0.3rem;
  1560. border-width: 2px 2px 0 0;
  1561. border-color: #C8C8CD;
  1562. border-style: solid;
  1563. position: relative;
  1564. top: -1px;
  1565. margin-left: .3em;
  1566. }
  1567. .fui-according.expanded .remark:after,
  1568. .fui-according-header:active .remark:after {
  1569. content: " ";
  1570. display: inline-block;
  1571. -webkit-transform: rotate(135deg);
  1572. -ms-transform: rotate(135deg);
  1573. transform: rotate(135deg);
  1574. height: 0.3rem;
  1575. width: 0.3rem;
  1576. border-width: 2px 2px 0 0;
  1577. border-color: #C8C8CD;
  1578. border-style: solid;
  1579. position: relative;
  1580. top: -1px;
  1581. margin-left: .3em;
  1582. }
  1583. .fui-according-content .content-block {
  1584. padding: .5rem .5rem;
  1585. color: #666;
  1586. box-sizing: border-box;
  1587. }
  1588. .package-goods {
  1589. padding: 0.2rem 0.5rem;
  1590. }
  1591. .package-goods .package-goods-img {
  1592. width: 6.4rem;
  1593. width: 6.4rem;
  1594. }
  1595. .package-goods p {
  1596. color: #fd5454;
  1597. font-size: 0.6rem;
  1598. }
  1599. .package-goods span {
  1600. height: 1.6rem;
  1601. line-height: 0.8rem;
  1602. overflow: hidden;
  1603. display: block;
  1604. color: #333;
  1605. font-size: 0.6rem;
  1606. }
  1607. .package-list {
  1608. padding: 0;
  1609. overflow-y: auto;
  1610. }
  1611. .package-buy {
  1612. height: 2.4rem;
  1613. }
  1614. .package-buy a.package-buy-a {
  1615. height: 2.4rem;
  1616. display: block;
  1617. line-height: 2.4rem;
  1618. color: #fff;
  1619. text-align: center;
  1620. background: #ef4f4f;
  1621. }
  1622. .package-list-inner {
  1623. white-space: nowrap;
  1624. height: 7rem;
  1625. }
  1626. .package-list-inner .package-goods {
  1627. width: 33.33333333%;
  1628. float: left;
  1629. }
  1630. /* 按钮组2*/
  1631. .fui-menu-group {
  1632. height: auto;
  1633. background: #fff;
  1634. margin-top: 0.5rem;
  1635. }
  1636. .fui-menu-group .fui-menu-item {
  1637. padding: 0.5rem;
  1638. text-align: center;
  1639. position: relative;
  1640. color: #666;
  1641. font-size: 0.75rem;
  1642. width: 1%;
  1643. display: table-cell;
  1644. -webkit-user-select: none;
  1645. -moz-user-select: none;
  1646. transition:background-color 300ms;
  1647. -webkit-transition: background-color 300ms;
  1648. }
  1649. .fui-menu-group .fui-menu-item:active {
  1650. background: #ececec;
  1651. }
  1652. .fui-menu-group .fui-menu-item:before {
  1653. content: '';
  1654. position: absolute;
  1655. left: 0;
  1656. top: 0.5rem;
  1657. bottom: 0.5rem;
  1658. border-left: 1px solid #eee;
  1659. }
  1660. .fui-menu-group .fui-menu-item:first-child:before {
  1661. border: 0;
  1662. }
  1663. .fui-menu-group .fui-menu-item i {
  1664. vertical-align: top;
  1665. }
  1666. /*LIST*/
  1667. .fui-list-group {
  1668. background-color: #fff;
  1669. position: relative;
  1670. }
  1671. .fui-list-group.fui-list-group-o {
  1672. margin: 0 .5rem;
  1673. border-radius: .5rem;
  1674. margin-top: 0.5rem;
  1675. }
  1676. .fui-list-group:not(.fui-list-group-o):before {
  1677. content: " ";
  1678. position: absolute;
  1679. left: 0;
  1680. top: 0;
  1681. width: 100%;
  1682. height: 1px;
  1683. border-top: 1px solid #d9d9d9;
  1684. color: #D9D9D9;
  1685. -webkit-transform-origin: 0 0;
  1686. -ms-transform-origin: 0 0;
  1687. transform-origin: 0 0;
  1688. -webkit-transform: scaleY(0.5);
  1689. -ms-transform: scaleY(0.5);
  1690. transform: scaleY(0.5);
  1691. }
  1692. .fui-list-group:not(.fui-list-group-o):after {
  1693. content: " ";
  1694. position: absolute;
  1695. left: 0;
  1696. bottom: 0;
  1697. width: 100%;
  1698. height: 1px;
  1699. border-top: 1px solid #d9d9d9;
  1700. color: #D9D9D9;
  1701. -webkit-transform-origin: 0 100%;
  1702. -ms-transform-origin: 0 100%;
  1703. transform-origin: 0 100%;
  1704. -webkit-transform: scaleY(0.5);
  1705. -ms-transform: scaleY(0.5);
  1706. transform: scaleY(0.5);
  1707. }
  1708. .fui-list {
  1709. position: relative;
  1710. display: -webkit-box;
  1711. display: -webkit-flex;
  1712. display: -ms-flexbox;
  1713. display: flex;
  1714. padding: .5rem;
  1715. -webkit-transition-duration: 300ms;
  1716. transition-duration: 300ms;
  1717. -webkit-box-align: center;
  1718. -webkit-align-items: center;
  1719. -ms-flex-align: center;
  1720. align-items: center;
  1721. overflow: hidden;
  1722. }
  1723. .fui-list:before {
  1724. content: " ";
  1725. position: absolute;
  1726. left: 0;
  1727. top: 0;
  1728. width: 100%;
  1729. height: 1px;
  1730. border-top: 1px solid #D9D9D9;
  1731. color: #D9D9D9;
  1732. -webkit-transform-origin: 0 0;
  1733. -ms-transform-origin: 0 0;
  1734. transform-origin: 0 0;
  1735. -webkit-transform: scaleY(0.5);
  1736. -ms-transform: scaleY(0.5);
  1737. transform: scaleY(0.5);
  1738. left: .5rem;
  1739. }
  1740. .fui-list:first-child:before {
  1741. display: none;
  1742. }
  1743. .fui-list:active {
  1744. background: #ECECEC;
  1745. }
  1746. .fui-list-media {
  1747. position: relative;
  1748. display: -webkit-box;
  1749. display: -webkit-flex;
  1750. display: flex;
  1751. -webkit-flex-shrink: 0;
  1752. -ms-flex: 0 0 auto;
  1753. -webkit-flex-shrink: 0;
  1754. flex-shrink: 0;
  1755. -webkit-box-lines: single;
  1756. -moz-box-lines: single;
  1757. -webkit-flex-wrap: nowrap;
  1758. flex-wrap: nowrap;
  1759. box-sizing: border-box;
  1760. -webkit-box-align: center;
  1761. -webkit-align-items: center;
  1762. align-items: center;
  1763. margin-right:.5rem;
  1764. }
  1765. .fui-list-media img {
  1766. display: block;
  1767. width:2.5rem;
  1768. }
  1769. .fui-list-media img.round {
  1770. border-radius: .3rem;
  1771. }
  1772. .fui-list-media .badge {
  1773. background: red none repeat scroll 0 0;
  1774. border-radius: 0.5rem;
  1775. color: white;
  1776. font-size: 0.7rem;
  1777. height: 0.9rem;
  1778. right: -.35rem;
  1779. line-height: 0.9rem;
  1780. min-width: 0.9rem;
  1781. padding: 0 0.15rem;
  1782. position: absolute;
  1783. top: -.3rem;
  1784. text-align: center;
  1785. vertical-align: top;
  1786. z-index: 100;
  1787. }
  1788. .fui-list-inner {
  1789. position: relative;
  1790. width: 100%;
  1791. overflow: hidden;
  1792. box-sizing: border-box;
  1793. display: -webkit-box;
  1794. display: -webkit-flex;
  1795. display: flex;
  1796. -webkit-box-flex: 1;
  1797. -ms-flex: 1;
  1798. display: block;
  1799. }
  1800. .fui-list-inner .subtitle {
  1801. position: relative;
  1802. font-size: 0.7rem;
  1803. color: #666;
  1804. white-space: nowrap;
  1805. text-overflow: ellipsis;
  1806. overflow: hidden;
  1807. }
  1808. .fui-list-inner .text {
  1809. position: relative;
  1810. font-size: 0.65rem;
  1811. color: #666;
  1812. }
  1813. .fui-list-inner .title {
  1814. position: relative;
  1815. font-size: 0.85rem;
  1816. color: #333;
  1817. white-space: nowrap;
  1818. text-overflow: ellipsis;
  1819. overflow: hidden;
  1820. height:1rem;
  1821. line-height:1rem;
  1822. }
  1823. .fui-list-inner .row {
  1824. position: relative;
  1825. display: -webkit-box;
  1826. display: -webkit-flex;
  1827. display: -ms-flexbox;
  1828. display: flex;
  1829. margin: 0;
  1830. height:1rem;
  1831. line-height:1rem;
  1832. }
  1833. .fui-list-inner .row .row-text {
  1834. font-size: 0.85rem;
  1835. color: #333;
  1836. white-space: nowrap;
  1837. text-overflow: ellipsis;
  1838. overflow: hidden;
  1839. -webkit-box-flex: 1;
  1840. -webkit-flex: 1;
  1841. -ms-flex: 1;
  1842. flex: 1;
  1843. }
  1844. .fui-list-inner .row .row-remark {
  1845. font-size: 0.75rem;
  1846. color: #666;
  1847. text-align: right;
  1848. }
  1849. .fui-list .angle:after {
  1850. content: " ";
  1851. display: inline-block;
  1852. -webkit-transform: rotate(45deg);
  1853. -ms-transform: rotate(45deg);
  1854. transform: rotate(45deg);
  1855. height: 0.3rem;
  1856. width: 0.3rem;
  1857. border-width: 2px 2px 0 0;
  1858. border-color: #C8C8CD;
  1859. border-style: solid;
  1860. position: relative;
  1861. top: -.2rem;
  1862. margin-right: .1rem;
  1863. }
  1864. .fui-list-angle {
  1865. position: relative;
  1866. vertical-align: middle;
  1867. margin-right: .5rem;
  1868. }
  1869. .fui-list-angle .angle:after {
  1870. position: absolute;
  1871. top: 50%;
  1872. margin-top:-.3rem;
  1873. }
  1874. /* 秒杀组 */
  1875. .seckill-group {
  1876. margin-top: 0.5rem;
  1877. background-color: #fff;
  1878. line-height: 1.4;
  1879. font-size: 0.8rem;
  1880. overflow: hidden;
  1881. position: relative;
  1882. }
  1883. .seckill-group:before {
  1884. content: " ";
  1885. position: absolute;
  1886. left: 0;
  1887. top: 0;
  1888. width: 100%;
  1889. height: 1px;
  1890. border-top: 1px solid #D9D9D9;
  1891. color: #D9D9D9;
  1892. -webkit-transform-origin: 0 0;
  1893. -ms-transform-origin: 0 0;
  1894. transform-origin: 0 0;
  1895. -webkit-transform: scaleY(0.5);
  1896. -ms-transform: scaleY(0.5);
  1897. transform: scaleY(0.5);
  1898. }
  1899. .seckill-group:after {
  1900. content: "";
  1901. position: absolute;
  1902. left: 0;
  1903. bottom: 0;
  1904. width: 100%;
  1905. height: 1px;
  1906. border-bottom: 1px solid #D9D9D9;
  1907. color: #D9D9D9;
  1908. -webkit-transform-origin: 0 100%;
  1909. -ms-transform-origin: 0 100%;
  1910. transform-origin: 0 100%;
  1911. -webkit-transform: scaleY(0.5);
  1912. -ms-transform: scaleY(0.5);
  1913. transform: scaleY(0.5);
  1914. }
  1915. .seckill-group.noborder:before,
  1916. .seckill-group.noborder:after {
  1917. border: 0;
  1918. }
  1919. .seckill-group .seckill-title {
  1920. position: relative;
  1921. padding: 0.5rem 0.5rem;
  1922. display: -webkit-box;
  1923. display: -webkit-flex;
  1924. display: -ms-flexbox;
  1925. display: flex;
  1926. -webkit-box-align: center;
  1927. -webkit-align-items: center;
  1928. -ms-flex-align: center;
  1929. align-items: center;
  1930. -moz-transition-duration: 300ms;
  1931. -webkit-transition-duration: 300ms;
  1932. transition-duration: 300ms;
  1933. -webkit-transition-property: background-color;
  1934. transition-property: background-color;
  1935. }
  1936. .seckill-group .seckill-title .seckill-text {
  1937. -webkit-box-flex: 1;
  1938. -webkit-flex: 1;
  1939. -ms-flex: 1;
  1940. flex: 1;
  1941. white-space: nowrap;
  1942. text-overflow: ellipsis;
  1943. overflow: hidden;
  1944. font-size:.75rem;
  1945. color:#666;
  1946. display: -webkit-box;
  1947. display: -webkit-flex;
  1948. display: -ms-flexbox;
  1949. display: flex;
  1950. -webkit-box-align: center;
  1951. -webkit-align-items: center;
  1952. -ms-flex-align: center;
  1953. align-items: center;
  1954. }
  1955. .seckill-group .seckill-title .seckill-remark {
  1956. color: #888;
  1957. text-align: right;
  1958. font-size: 0.7rem;
  1959. margin-right: .2rem;
  1960. }
  1961. .seckill-group .seckill-title .seckill-remark:after {
  1962. content: " ";
  1963. display: inline-block;
  1964. -webkit-transform: rotate(45deg);
  1965. -ms-transform: rotate(45deg);
  1966. transform: rotate(45deg);
  1967. height: 0.3rem;
  1968. width: 0.3rem;
  1969. border-width: 2px 2px 0 0;
  1970. border-color: #C8C8CD;
  1971. border-style: solid;
  1972. position: relative;
  1973. top: -1px;
  1974. margin-left: .3em;
  1975. }
  1976. .seckill-group .seckill-goods {
  1977. padding: 0 0.5rem 0.5rem;
  1978. display: -webkit-box;
  1979. display: -webkit-flex;
  1980. display: -ms-flexbox;
  1981. display: flex;
  1982. }
  1983. .seckill-group .seckill-goods .swiper-wrapper {
  1984. display: -webkit-box;
  1985. display: -webkit-flex;
  1986. display: -ms-flexbox;
  1987. display: flex;
  1988. }
  1989. .swiper-container-autoheight .swiper-wrapper {
  1990. -webkit-box-align: center;
  1991. -webkit-align-items: center;
  1992. -ms-flex-align: center;
  1993. align-items: center;
  1994. }
  1995. .seckill-group .seckill-goods .item {
  1996. height: auto;
  1997. width: 4rem;
  1998. float: left;
  1999. }
  2000. .seckill-group .seckill-goods .item.last-item {
  2001. height: auto;
  2002. width: 1.5rem;
  2003. font-size: 0.55rem;
  2004. color: #666;
  2005. text-align: center;
  2006. display: -webkit-box;
  2007. display: -webkit-flex;
  2008. display: -ms-flexbox;
  2009. display: flex;
  2010. -webkit-box-align: center;
  2011. -webkit-align-items: center;
  2012. -ms-flex-align: center;
  2013. align-items: center;
  2014. margin-left: -0.5rem;
  2015. }
  2016. .seckill-group .seckill-goods .item.last-item .inner {
  2017. width: 1rem;
  2018. text-align: right;
  2019. }
  2020. .seckill-group .seckill-goods .item .thumb {
  2021. height: 4rem;
  2022. width: 4rem;
  2023. margin: auto;
  2024. position: relative;
  2025. }
  2026. .seckill-group .seckill-goods .item .thumb img {
  2027. height: 4rem;
  2028. width: 4rem;
  2029. display: block;
  2030. }
  2031. .seckill-group .seckill-goods .item .thumb .tag {
  2032. position: absolute;
  2033. bottom: 0;
  2034. left: 0;
  2035. background: #ef4f4f;
  2036. color: #fff;
  2037. font-size: 0.5rem;
  2038. padding: 0 0.1rem;
  2039. line-height: 0.65rem;
  2040. }
  2041. .seckill-group .seckill-goods .item .thumb .tag.orange {
  2042. background: #fe9402;
  2043. }
  2044. .seckill-group .seckill-goods .item .thumb .tag.purple {
  2045. background: #7e42fd;
  2046. }
  2047. .seckill-group .seckill-goods .item .thumb .tag.green {
  2048. background: #4fd88a;
  2049. }
  2050. .seckill-group .seckill-goods .item .marketprice {
  2051. color: #ef4f4f;
  2052. text-align: center;
  2053. font-size: 0.8rem;
  2054. line-height: 1.2rem;
  2055. font-weight: bold;
  2056. }
  2057. .seckill-group .seckill-goods .item .productprice {
  2058. color: #999;
  2059. text-decoration: line-through;
  2060. font-size: 0.6rem;
  2061. text-align: center;
  2062. line-height: 0.6rem;
  2063. }
  2064. .seckill-group .killtime {
  2065. display: inline-block;
  2066. font-size: 0.65rem;
  2067. color: #444;
  2068. }
  2069. .seckill-group {
  2070. height: auto;
  2071. }
  2072. .seckill-group img {
  2073. height: 0.9rem;
  2074. max-width: 5rem;
  2075. margin-right: 0.2rem
  2076. }
  2077. .seckill-group .title {
  2078. font-size: 0.7rem;
  2079. color: #444;
  2080. margin-right: 0.2rem;
  2081. }
  2082. .seckill-group .killtime span {
  2083. display: inline-block;
  2084. padding: 0;
  2085. margin: 0;
  2086. }
  2087. .seckill-group .killtime .item {
  2088. height: 0.8rem;
  2089. line-height: 0.75rem;
  2090. border: 1px solid #ddd;
  2091. padding: 0 0.1rem;
  2092. margin: 0 1px;
  2093. }
  2094. .fui-audio {
  2095. height: auto;
  2096. background: #f1f1f1;
  2097. margin: 0.8rem;
  2098. padding: 0.6rem;
  2099. border: 1px solid #ededed;
  2100. display: -webkit-box;
  2101. display: -webkit-flex;
  2102. display: -ms-flexbox;
  2103. display: flex;
  2104. -webkit-box-align: center;
  2105. -webkit-align-items: center;
  2106. -ms-flex-align: center;
  2107. align-items: center;
  2108. position: relative;
  2109. }
  2110. .fui-audio .horn {
  2111. width: 1.4rem;
  2112. height: 1.25rem;
  2113. background-image: url(../images/icon_audio_reading_3.png);
  2114. background-size: auto 100%;
  2115. background-repeat: no-repeat;
  2116. }
  2117. .fui-audio .horn.playing {
  2118. -webkit-animation: audio_playing 1s infinite;
  2119. }
  2120. .fui-audio .center {
  2121. width: 100%;
  2122. padding-right: 0.2rem;
  2123. font-size: 0.75rem;
  2124. white-space: nowrap;
  2125. text-overflow: ellipsis;
  2126. overflow: hidden;
  2127. -webkit-box-flex: 1;
  2128. -webkit-flex: 1;
  2129. -ms-flex: 1;
  2130. flex: 1;
  2131. }
  2132. .fui-audio .center p {
  2133. white-space: nowrap;
  2134. text-overflow: ellipsis;
  2135. overflow: hidden;
  2136. }
  2137. .fui-audio .time {
  2138. font-size: 0.7rem;
  2139. color: #666;
  2140. }
  2141. .fui-audio .speed {
  2142. position: absolute;
  2143. bottom: -1px;
  2144. left: -1px;
  2145. width: 20%;
  2146. height: 0.1rem;
  2147. background: #44b549;
  2148. -webkit-transition: width .3s;
  2149. transition: width .3s;
  2150. }
  2151. .fui-chat-item {
  2152. height: 2.2rem;
  2153. margin: 0.8rem;
  2154. display: -webkit-box;
  2155. display: -webkit-flex;
  2156. display: -ms-flexbox;
  2157. display: flex;
  2158. justify-content: flex-start;
  2159. }
  2160. .fui-chat-item .face {
  2161. height: 2.2rem;
  2162. width: 2.2rem;
  2163. background: #eee;
  2164. -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);
  2165. -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.1);
  2166. box-shadow:0 0 2px rgba(0, 0, 0, 0.1);
  2167. }
  2168. .fui-chat-item .face img {
  2169. height: inherit;
  2170. width: inherit;
  2171. display: block;
  2172. }
  2173. .fui-chat-item .msg {
  2174. margin: 0 2.7rem 0 0.5rem;
  2175. background: #fefefe;
  2176. padding: 0 0.8rem;
  2177. position: relative;
  2178. border-radius: 0.25rem;
  2179. border: 1px solid rgba(195, 195, 195, 0.3);
  2180. -webkit-box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2181. -moz-box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2182. box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2183. display: -webkit-box;
  2184. display: -webkit-flex;
  2185. display: -ms-flexbox;
  2186. display: flex;
  2187. -webkit-box-align: center;
  2188. -webkit-align-items: center;
  2189. -ms-flex-align: center;
  2190. align-items: center;
  2191. justify-content: flex-start;
  2192. min-width: 4rem;
  2193. }
  2194. .fui-chat-item .msg:before {
  2195. content: "";
  2196. position: absolute;
  2197. top: 50%;
  2198. left: -0.28rem;
  2199. height: 0.4rem;
  2200. width: 0.4rem;
  2201. background: #fefefe;
  2202. margin-top: -0.2rem;
  2203. transform:rotate(45deg);
  2204. -ms-transform:rotate(45deg);
  2205. -moz-transform:rotate(45deg);
  2206. -webkit-transform:rotate(45deg);
  2207. -o-transform:rotate(45deg);
  2208. border: 1px solid rgba(195, 195, 195, 0.3);
  2209. -webkit-box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2210. -moz-box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2211. box-shadow:0 0 1px rgba(195, 195, 195, 0.1);
  2212. }
  2213. .fui-chat-item .msg:after {
  2214. content: "";
  2215. position: absolute;
  2216. top: 50%;
  2217. left: -0.2rem;
  2218. height: 0.45rem;
  2219. width: 0.45rem;
  2220. background: #fefefe;
  2221. margin-top: -0.18rem;
  2222. transform:rotate(45deg);
  2223. -ms-transform:rotate(45deg);
  2224. -moz-transform:rotate(45deg);
  2225. -webkit-transform:rotate(45deg);
  2226. -o-transform:rotate(45deg);
  2227. }
  2228. .fui-chat-item .msg .horn {
  2229. height: 1rem;
  2230. width: 1.4rem;
  2231. background-image: url(../images/icon_audio_reading_gray_3.png);
  2232. background-size: auto 100%;
  2233. background-repeat: no-repeat;
  2234. }
  2235. .fui-chat-item .msg .horn.playing {
  2236. -webkit-animation: chat_playing_gray 1s infinite;
  2237. }
  2238. .fui-chat-item.right {
  2239. justify-content: flex-end;
  2240. }
  2241. .fui-chat-item.right .msg {
  2242. border: 1px solid rgba(20, 80, 36, 0.15);
  2243. -webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2244. -moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2245. box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2246. background: #a0e75a;
  2247. margin: 0 0.5rem 0 2.7rem;
  2248. transform:rotate(180deg);
  2249. -ms-transform:rotate(180deg);
  2250. -moz-transform:rotate(180deg);
  2251. -webkit-transform:rotate(180deg);
  2252. -o-transform:rotate(180deg);
  2253. }
  2254. .fui-chat-item.right .msg:before {
  2255. content: "";
  2256. position: absolute;
  2257. top: 50%;
  2258. left: -0.28rem;
  2259. height: 0.4rem;
  2260. width: 0.4rem;
  2261. background: #a0e75a;
  2262. margin-top: -0.2rem;
  2263. transform:rotate(45deg);
  2264. -ms-transform:rotate(45deg);
  2265. -moz-transform:rotate(45deg);
  2266. -webkit-transform:rotate(45deg);
  2267. -o-transform:rotate(45deg);
  2268. border: 1px solid rgba(20, 80, 36, 0.15);
  2269. -webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2270. -moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2271. box-shadow:0 0 1px rgba(0, 0, 0, 0.1);
  2272. }
  2273. .fui-chat-item.right .msg:after {
  2274. content: "";
  2275. position: absolute;
  2276. top: 50%;
  2277. left: -0.2rem;
  2278. height: 0.5rem;
  2279. width: 0.5rem;
  2280. background: #a0e75a;
  2281. margin-top: -0.20rem;
  2282. transform:rotate(45deg);
  2283. -ms-transform:rotate(45deg);
  2284. -moz-transform:rotate(45deg);
  2285. -webkit-transform:rotate(45deg);
  2286. -o-transform:rotate(45deg);
  2287. }
  2288. .fui-chat-item.right .msg .horn {
  2289. height: 1rem;
  2290. width: 1.4rem;
  2291. background-image: url(../images/icon_audio_reading_green_3.png);
  2292. background-size: auto 100%;
  2293. background-repeat: no-repeat;
  2294. }
  2295. .fui-chat-item.right .msg .horn.playing {
  2296. -webkit-animation: chat_playing_green 1s infinite;
  2297. }
  2298. .seckill-page {
  2299. position: relative;
  2300. overflow: hidden;
  2301. }
  2302. .seckill-page .swiper-container.room-container {
  2303. width:100%;
  2304. position:relative;
  2305. }
  2306. .seckill-page .swiper-container.room-container .swiper-wrapper {
  2307. display: flex;
  2308. }
  2309. .seckill-page .swiper-container.room-container:after {
  2310. content: "";
  2311. position: absolute;
  2312. left: 0;
  2313. bottom: 0;
  2314. width: 100%;
  2315. height: 1px;
  2316. border-bottom: 1px solid #D9D9D9;
  2317. -webkit-transform-origin: 0 100%;
  2318. -ms-transform-origin: 0 100%;
  2319. transform-origin: 0 100%;
  2320. -webkit-transform: scaleY(0.5);
  2321. -ms-transform: scaleY(0.5);
  2322. transform: scaleY(0.5);
  2323. }
  2324. .seckill-page .swiper-container.room-container .room-slide {
  2325. text-align: center;
  2326. font-size:.7rem;
  2327. color:#666;
  2328. float:left;
  2329. width:20%;
  2330. padding:5px 0;
  2331. }
  2332. .seckill-page .swiper-container.time-container {
  2333. width:100%;
  2334. padding-top:.1rem;
  2335. text-align: center;
  2336. }
  2337. .seckill-page .swiper-container.time-container .swiper-wrapper{
  2338. }
  2339. .seckill-page .swiper-slide.time-slide {
  2340. width:20%;
  2341. text-align: center;
  2342. padding:.1rem 0;
  2343. float:left;
  2344. }
  2345. .seckill-page .swiper-slide.time-slide.current{
  2346. color:#ff3300;
  2347. }
  2348. .seckill-page .swiper-slide.time-slide .text,
  2349. .seckill-page .swiper-slide.time-slide .time {
  2350. display: block;
  2351. -moz-transition-duration: 100ms;
  2352. -webkit-transition-duration: 100ms;
  2353. transition-duration: 100ms;
  2354. -webkit-transition-property: color,font-size;
  2355. transition-property: color,font-size;
  2356. }
  2357. .seckill-page .swiper-slide.time-slide .time {
  2358. font-size:.7rem;
  2359. height:1.2rem;
  2360. padding-top:.2rem;
  2361. }
  2362. .seckill-page .swiper-slide.time-slide .text {
  2363. font-size:.5rem;
  2364. height:1rem;
  2365. }
  2366. .seckill-page .swiper-slide.time-slide.current .time {
  2367. font-size:.9rem;
  2368. height:1.2rem;
  2369. padding-top:0rem;
  2370. }
  2371. .seckill-page .swiper-slide.time-slide.current .text {
  2372. padding-top:-.2rem;
  2373. }
  2374. .seckill-page .swiper-container.adv-container {
  2375. width:100%;
  2376. }
  2377. .seckill-page .swiper-slide.adv-slide {
  2378. width:33.33%;
  2379. text-align: center;
  2380. background:#fff;
  2381. padding:2px;
  2382. float:left;
  2383. }
  2384. .seckill-page .swiper-slide.adv-slide img {
  2385. width:100%;
  2386. }
  2387. .seckill-page .fui-list {
  2388. padding-top:.2rem;
  2389. padding-bottom:.5rem;
  2390. }
  2391. .seckill-page .fui-list .fui-list-media{
  2392. -webkit-box-align: start;
  2393. -webkit-align-items: flex-start;
  2394. -ms-flex-align: start;
  2395. align-items: start
  2396. }
  2397. .seckill-page .fui-list .fui-list-media img {
  2398. width:4rem;
  2399. height:4rem;
  2400. }
  2401. .seckill-page .fui-list .fui-list-inner .text{
  2402. color: #444;
  2403. display: block;
  2404. font-size:.7rem;
  2405. padding-bottom:.5rem;
  2406. }
  2407. .seckill-page .fui-list .fui-list-inner .info {
  2408. display:block;width:100%;
  2409. }
  2410. .seckill-page .fui-list .fui-list-inner .info .button {
  2411. float:right;
  2412. margin-top:-.2rem;
  2413. }
  2414. .seckill-page .fui-list .fui-list-inner .info .price {
  2415. color:#f02b2b;
  2416. font-size:.9rem;
  2417. } .seckill-page .fui-list .fui-list-inner .info .price1 {
  2418. color:#949598;
  2419. font-size:.6rem;
  2420. text-decoration: line-through;
  2421. }
  2422. .seckill-page .fui-list .fui-list-inner .info.info1{
  2423. height:.4rem;
  2424. line-height:.4rem;
  2425. }
  2426. .seckill-page .fui-list-group-title {
  2427. padding:5px 0;
  2428. }
  2429. .seckill-page .fui-list-group-title .timer {
  2430. float:right;
  2431. color:#6b6b6b;
  2432. }
  2433. .seckill-page .fui-list-group-title .timer span {
  2434. display: inline-block;
  2435. background:#464553;
  2436. color:#fff;
  2437. width:20px;height:20px;
  2438. border-radius: .1rem;
  2439. line-height:20px;
  2440. margin:0 2px;
  2441. font-size:12px; text-align: center;
  2442. }
  2443. .seckill-page .fui-list:before {
  2444. left: 0;
  2445. right:0;
  2446. }
  2447. .seckill-page .fui-list .fui-list-inner .info .process-text {
  2448. float:left;
  2449. font-size:10px;
  2450. color:#d0d1d2;
  2451. padding-right:5px;
  2452. padding-top:1px;
  2453. height:10px;
  2454. }
  2455. .seckill-page .fui-list .fui-list-inner .info .process {
  2456. float:left;
  2457. width:80px;
  2458. height:8px;
  2459. border:1px solid #ff8f8f;
  2460. border-radius: 2px;
  2461. overflow:hidden;
  2462. margin-top:2px;
  2463. }
  2464. .seckill-page .fui-list .fui-list-inner .info .process .inner {
  2465. width:5rem;
  2466. height:.5rem;
  2467. background:#ff8f8f;
  2468. }
  2469. .seckill-page .fui-list .fui-list-inner .btn.btn-success{
  2470. background:#04be02;border:1px solid #04ab02;color:#fff;
  2471. }
  2472. .seckill-page .swiper-container.goods-container {
  2473. width:100%;
  2474. }
  2475. .seckill-page .fui-list-group .fui-list.align-start {
  2476. -webkit-box-align: start;
  2477. -webkit-align-items: start;
  2478. -ms-flex-align: start;
  2479. align-items: start
  2480. }
  2481. .page-goods-detail .seckill-container {
  2482. display: -webkit-box;
  2483. display: -ms-flexbox;
  2484. display: -webkit-flex;
  2485. display: flex;
  2486. }
  2487. .page-goods-detail .seckill-container .seckill-list,
  2488. .page-goods-detail .seckill-container .seckill-list1 {
  2489. }
  2490. .page-goods-detail .seckill-container.notstart .seckill-list,
  2491. .page-goods-detail .seckill-container.notstart .seckill-list1,
  2492. .page-goods-detail .seckill-container.notstart .seckill-list2 {
  2493. }
  2494. .page-goods-detail .seckill-container .seckill-list{
  2495. flex:1;
  2496. color:#fff;
  2497. padding:0em .5rem;
  2498. margin-top:-1px;
  2499. }
  2500. .page-goods-detail .seckill-container .seckill-list .fui-list-inner .text{
  2501. color:#fff;
  2502. height:.9rem;
  2503. }
  2504. .page-goods-detail .seckill-container .seckill-list .seckill-price{
  2505. font-size:1rem;
  2506. color:#fff;
  2507. -webkit-box-align: baseline;
  2508. -webkit-align-items: baseline;
  2509. -ms-flex-align: baseline;
  2510. align-items: baseline;
  2511. width:auto;
  2512. }
  2513. .page-goods-detail .seckill-container .seckill-list .seckill-price span{
  2514. font-size:1.85rem;
  2515. }
  2516. .page-goods-detail .seckill-container .seckill-list .oldprice{
  2517. color:rgba(255,255,255,.5);
  2518. }
  2519. .page-goods-detail .seckill-container .seckill-list .fui-list-media{
  2520. }
  2521. .page-goods-detail .seckill-container .seckill-list .stitle{
  2522. display: inline-block;
  2523. border:1px solid #fff;
  2524. border-radius: .2rem;
  2525. font-size:.4rem;
  2526. padding:0 .2rem;
  2527. }
  2528. .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text{
  2529. text-align: center;
  2530. color:#fff;
  2531. }
  2532. .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text .process {
  2533. float:left;
  2534. width:4rem;
  2535. height:.6rem;
  2536. border:1px solid #efd74f;
  2537. border-radius: .5rem;
  2538. overflow:hidden;
  2539. margin-top:.3rem;
  2540. }
  2541. .page-goods-detail .seckill-container .seckill-list1 .fui-list-inner .text .process .inner {
  2542. width:5rem;
  2543. height:.6rem;
  2544. background:#efd74f;
  2545. }
  2546. .page-goods-detail .seckill-container .seckill-list2 .fui-list-inner .text {
  2547. font-size:.6rem;
  2548. text-align: center;
  2549. height:.95rem;
  2550. color:#ef4f4f
  2551. }
  2552. .page-goods-detail .seckill-container .seckill-list2 .fui-list-inner .text.timer span {
  2553. display: inline-block;
  2554. background:#582e19;
  2555. color:#fff;
  2556. width:.9rem;height:.9rem;
  2557. border-radius: .1rem;
  2558. line-height:.9rem;
  2559. font-size:.5rem; text-align: center;
  2560. }
  2561. .page-goods-detail .seckill-container .seckill-list2{
  2562. padding:0;
  2563. width:5rem;
  2564. background:#ffef32;
  2565. }
  2566. .page-goods-detail .seckill-container .seckill-list2,
  2567. .page-goods-detail .seckill-container .seckill-list1 {
  2568. margin-top:-.1rem;
  2569. }
  2570. .page-goods-detail .seckill-container.notstart .seckill-list2 .fui-list-inner .text {
  2571. color:#fff;
  2572. }
  2573. .page-goods-detail .seckill-container.notstart .seckill-list2 .fui-list-inner .text.timer span{
  2574. background:rgba(0,0,0,.7);
  2575. }
  2576. .page-goods-detail .buybtn.seckill-notstart {
  2577. background:#00b950;
  2578. }
  2579. /* 兑换页面 兑换规则 */
  2580. .diy-exchange-rule {
  2581. padding: 0.5rem 0 1.4rem;
  2582. background: #fafafa;
  2583. }
  2584. .diy-exchange-rule .head {
  2585. height: 2rem;
  2586. line-height: 2rem;
  2587. text-align: center;
  2588. position: relative;
  2589. }
  2590. .diy-exchange-rule .head:before {
  2591. position: absolute;
  2592. top: 50%;
  2593. left: 0;
  2594. right: 0;
  2595. border-top: 1px solid #efefef;
  2596. content: "";
  2597. height: 0;
  2598. z-index: 1;
  2599. }
  2600. .diy-exchange-rule .head .title {
  2601. height: 2rem;
  2602. background: #f9f9f9;
  2603. max-width: 80%;
  2604. padding: 0 0.6rem;
  2605. position: relative;
  2606. z-index: 2;
  2607. display: inline-block;
  2608. position: relative;
  2609. overflow: hidden;
  2610. color: #555;
  2611. }
  2612. .diy-exchange-rule .head .title:before,
  2613. .diy-exchange-rule .head .title:after {
  2614. content: '';
  2615. position: absolute;
  2616. top: 50%;
  2617. left: 0;
  2618. height: 0.2rem;
  2619. width: 0.2rem;
  2620. background: #cdcdcd;
  2621. border-radius: 0.2rem;
  2622. margin-top: -0.07rem;
  2623. }
  2624. .diy-exchange-rule .head .title:after {
  2625. left: auto;
  2626. right: 0;
  2627. }
  2628. .diy-exchange-rule .info {
  2629. padding: 0 1rem;
  2630. color: #666;
  2631. font-size: 0.7rem;
  2632. }
  2633. /* 兑换中心 中部区域 */
  2634. .diy-exchange-input {
  2635. height: auto;
  2636. overflow: hidden;
  2637. padding-bottom: 10px;
  2638. background: #fafafa;
  2639. }
  2640. .diy-exchange-input .title {
  2641. text-align: center;
  2642. font-size: 16px;
  2643. padding: 12px 18px 14px;
  2644. line-height: 16px;
  2645. }
  2646. .diy-exchange-input .title .num {
  2647. font-size: 12px;
  2648. color: #999;
  2649. }
  2650. .diy-exchange-input .input {
  2651. height: auto;
  2652. overflow: hidden;
  2653. border: 1px solid #efefef;
  2654. margin: 0 48px 12px;
  2655. border-radius: 4px;
  2656. }
  2657. .diy-exchange-input .input input {
  2658. height: 30px;
  2659. width: 100%;
  2660. border-radius: 0.2rem;
  2661. border: 0;
  2662. padding: 0 0.4rem;
  2663. font-size: 0.7rem;
  2664. text-align: center;
  2665. color: #666;
  2666. -webkit-appearance: none;
  2667. }
  2668. .diy-exchange-input .btn-danger{
  2669. margin: 0 2.4rem;
  2670. border: 0;
  2671. }
  2672. .diy-exchange-input .btn-default {
  2673. margin: 0.5rem 1rem 0;
  2674. overflow: hidden;
  2675. }
  2676. .diy-exchange-input .list {
  2677. background: #fff;
  2678. margin: 0 1rem;
  2679. border-radius: 0.2rem;
  2680. }
  2681. .diy-exchange-input .list .item {
  2682. padding: 0.6rem;
  2683. display: -webkit-box;
  2684. display: -ms-flexbox;
  2685. display: -webkit-flex;
  2686. display: flex;
  2687. -webkit-box-align: center;
  2688. -webkit-align-items: center;
  2689. align-items: center;
  2690. position: relative;
  2691. }
  2692. .diy-exchange-input .list .item:after {
  2693. content: '';
  2694. position: absolute;
  2695. bottom: 0;
  2696. right: 0.5rem;
  2697. left: 3rem;
  2698. border-bottom: 1px solid #efefef;
  2699. -webkit-transform: scaleY(0.5);
  2700. -ms-transform: scaleY(0.5);
  2701. transform: scaleY(0.5);
  2702. }
  2703. .diy-exchange-input .list .item:last-child:after {
  2704. display: none;
  2705. }
  2706. .diy-exchange-input .list .item .ico {
  2707. height: 2rem;
  2708. width: 2rem;
  2709. background-repeat: no-repeat;
  2710. background-size: 100% auto;
  2711. background-position: center;
  2712. }
  2713. .diy-exchange-input .list .item .ico.money {
  2714. background-image: url("../images/default/icon_money.png");
  2715. }
  2716. .diy-exchange-input .list .item .ico.credit {
  2717. background-image: url("../images/default/icon_credit.png");
  2718. }
  2719. .diy-exchange-input .list .item .ico.coupon {
  2720. background-image: url("../images/default/icon_coupon.png");
  2721. }
  2722. .diy-exchange-input .list .item .ico.redbag {
  2723. background-image: url("../images/default/icon_redbag.png");
  2724. }
  2725. .diy-exchange-input .list .item .info {
  2726. width: 100%;
  2727. -webkit-box-flex: 1;
  2728. -webkit-flex: 1;
  2729. -ms-flex: 1;
  2730. flex: 1;
  2731. padding: 0 0.5rem;
  2732. line-height: 0.9rem;
  2733. }
  2734. .diy-exchange-input .list .item .info .t1 {
  2735. font-size: 0.75rem;
  2736. color: #444;
  2737. }
  2738. .diy-exchange-input .list .item .info .t2 {
  2739. color: #aaa;
  2740. font-size: 0.65rem;
  2741. }
  2742. .diy-exchange-input .list .item .btn-exc {
  2743. margin: 0;
  2744. padding: 0;
  2745. text-align: center;
  2746. width: 3.2rem;
  2747. }
  2748. .diy-exchange-input .list .item .btn-exc.disabled {
  2749. background: #ccc;
  2750. color: #fff;
  2751. border: 0;
  2752. }
  2753. .fui-danmu {
  2754. height: 32px;
  2755. max-width: 240px;
  2756. border-radius: 16px;
  2757. position: absolute;
  2758. top: 20px;
  2759. left: 10px;
  2760. z-index: 999;
  2761. padding: 3px;
  2762. display: -webkit-box;
  2763. display: -webkit-flex;
  2764. display: -ms-flexbox;
  2765. display: flex;
  2766. -webkit-box-align: center;
  2767. -webkit-align-items: center;
  2768. -ms-flex-align: center;
  2769. align-items: center;
  2770. font-size: 14px;
  2771. color: #fff;
  2772. overflow: hidden;
  2773. }
  2774. .fui-danmu:before {
  2775. content: "";
  2776. position: absolute;
  2777. top: 0;
  2778. left: 0;
  2779. right: 0;
  2780. bottom: 0;
  2781. background: #000;
  2782. z-index: 1;
  2783. opacity: 0.7;
  2784. }
  2785. .fui-danmu.style2 {
  2786. border-radius: 4px;
  2787. }
  2788. .fui-danmu.style2 .thumb {
  2789. border-radius: 4px;
  2790. }
  2791. .fui-danmu .thumb {
  2792. height: 26px;
  2793. width: 26px;
  2794. border-radius: 50%;
  2795. background: #fff;
  2796. position: relative;
  2797. z-index: 2;
  2798. }
  2799. .fui-danmu .text {
  2800. -webkit-box-flex: 1;
  2801. -webkit-flex: 1;
  2802. -ms-flex: 1;
  2803. flex: 1;
  2804. padding-left: 4px;
  2805. overflow: hidden;
  2806. text-overflow: ellipsis;
  2807. white-space: nowrap;
  2808. position: relative;
  2809. z-index: 2;
  2810. }
  2811. .fui-danmu .time {
  2812. text-align: right;
  2813. padding: 0 4px;
  2814. font-size: 13px;
  2815. position: relative;
  2816. z-index: 2;
  2817. }
  2818. .fui-startadv {
  2819. position: absolute;
  2820. top: 0;
  2821. left: 0;
  2822. top: 0;
  2823. right: 0;
  2824. bottom: 0;
  2825. z-index: 10000;
  2826. }
  2827. .fui-startadv:before {
  2828. content: "";
  2829. position: absolute;
  2830. top: 0;
  2831. left: 0;
  2832. right: 0;
  2833. bottom: 0;
  2834. background: #000;
  2835. opacity: 0.6;
  2836. }
  2837. .fui-startadv .inner {
  2838. position: absolute;
  2839. top: 0;
  2840. left: 0;
  2841. right: 0;
  2842. bottom: 0;
  2843. background: #fff;
  2844. z-index: 10001;
  2845. }
  2846. .fui-startadv .inner img {
  2847. display: none;
  2848. }
  2849. .fui-startadv .inner img:first-child {
  2850. display: block;
  2851. }
  2852. .fui-startadv.small-bot .inner,
  2853. .fui-startadv.small-top .inner {
  2854. width: 80%;
  2855. height: 70%;
  2856. position: relative;
  2857. margin: 14% auto 0;
  2858. }
  2859. .fui-startadv.small-top .inner {
  2860. margin: 22% auto 0;
  2861. }
  2862. .fui-startadv .inner img {
  2863. width: 100%;
  2864. height: 100%;
  2865. }
  2866. .fui-startadv.default .inner .close-adv {
  2867. position: absolute;
  2868. top: 14px;
  2869. right: 14px;
  2870. z-index: 10002;
  2871. background: rgba(0,0,0,0.5);
  2872. color: #fff;
  2873. font-size: 14px;
  2874. padding: 2px 8px;
  2875. border-radius: 20px;
  2876. }
  2877. .fui-startadv.small-bot .inner .close-adv,
  2878. .fui-startadv.small-top .inner .close-adv {
  2879. width: 100%;
  2880. height: 90px;
  2881. position: absolute;
  2882. bottom: -90px;
  2883. }
  2884. .fui-startadv.small-top .inner .close-adv {
  2885. top: -60px;
  2886. height: 60px;
  2887. bottom: 0;
  2888. }
  2889. .fui-startadv.small-bot .inner .close-adv:before,
  2890. .fui-startadv.small-top .inner .close-adv:before {
  2891. position: absolute;
  2892. height: 42px;
  2893. content: "";
  2894. width: 1px;
  2895. background: #fff;
  2896. left: 50%;
  2897. margin-left: -0.5px;
  2898. display: none;
  2899. }
  2900. .fui-startadv.small-top .inner .close-adv:before {
  2901. left: auto;
  2902. right: 18px;
  2903. bottom: 0;
  2904. height: 24px;
  2905. }
  2906. .fui-startadv.small-bot .inner .close-adv .close-btn,
  2907. .fui-startadv.small-top .inner .close-adv .close-btn {
  2908. height: 48px;
  2909. width: 48px;
  2910. position: absolute;
  2911. bottom: 0;
  2912. left: 50%;
  2913. margin-left: -24px;
  2914. }
  2915. .fui-startadv.small-top .inner .close-adv .close-btn {
  2916. height: 36px;
  2917. width: 36px;
  2918. top: 0;
  2919. left: auto;
  2920. right: 0;
  2921. }
  2922. .fui-startadv.small-bot .inner .close-adv .close-btn:before,
  2923. .fui-startadv.small-top .inner .close-adv .close-btn:before {
  2924. height: 48px;
  2925. width: 48px;
  2926. position: absolute;
  2927. content: "×";
  2928. color: #fff;
  2929. line-height: 38px;
  2930. text-align: center;
  2931. font-size: 56px;
  2932. font-weight: 100;
  2933. border: 1px solid #fff;
  2934. border-radius: 48px;
  2935. left: -1px;
  2936. top: -1px;
  2937. }
  2938. .fui-startadv.small-top .inner .close-adv .close-btn:before {
  2939. height: 36px;
  2940. width: 36px;
  2941. line-height: 30px;
  2942. font-size: 42px;
  2943. }
  2944. .fui-startadv .fui-swipe {
  2945. height: 100%;
  2946. }
  2947. .fui-startadv .fui-swipe-bullet {
  2948. background: #fff;
  2949. margin: 0 3px;
  2950. }
  2951. .fui-startadv .dots {
  2952. height: 14px;
  2953. padding: 0 10px;
  2954. position: absolute;
  2955. left: 0;
  2956. right: 0;
  2957. bottom: 10px;
  2958. text-align: center;
  2959. }
  2960. .fui-startadv .dots span {
  2961. height: 10px;
  2962. width: 10px;
  2963. background: #fff;
  2964. display: inline-block;
  2965. opacity: 0.5;
  2966. border-radius: 10px;
  2967. }
  2968. .fui-startadv .dots span:first-child {
  2969. opacity: 1;
  2970. }
  2971. .fui-tab a {
  2972. color: #666;
  2973. font-size: 14px;
  2974. width: 100%;
  2975. height: 38px;
  2976. line-height: 38px;
  2977. -webkit-box-flex: 1;
  2978. -ms-flex: 1;
  2979. border: 0;
  2980. border-bottom: 2px solid transparent;
  2981. border-radius: 0;
  2982. text-align: center;
  2983. }
  2984. .fui-tab.fui-tab-danger a.active {
  2985. color: #ef4f4f;
  2986. border-color: #ef4f4f;
  2987. z-index: 2;
  2988. }