diy.min.css 71 KB

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