app.css 87 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914
  1. html,div,table,th,td,ul,.app li.panel-body,.app .panel,.app .app-preview .app-region .app-add-filed a{padding:0; margin:0;}
  2. html,body{font-family:arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti;font-size:14px;}
  3. a,a:hover,a:focus{text-decoration:none; cursor:pointer;}
  4. img{border:0;}
  5. ul{list-style:none;}
  6. /*商城自定义模*/
  7. .app{min-height:420px; position:relative; padding-bottom:100px;}
  8. .app>div{float:left;}
  9. .app .panel{background-color:#F8F8F8;}
  10. .app .red{color:#d9534f;}
  11. .app .green{color:#008000;}
  12. .app .modules{position: relative; width: 320px; height: 568px;}
  13. .app .modules .inner{min-height:30px;}
  14. .app .modules .modules-item{position: absolute;}
  15. [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {display: none !important;}
  16. /*页面展示条*/
  17. /*::-webkit-scrollbar{width:0;}*/
  18. .app .page-navigator{width:100px; background:#F5F5F5; position:absolute; left:0; top:-20px; bottom:0; border-right:1px solid #ddd; border-left:1px solid #ddd;}
  19. .app .page-navigator .top-title{height:45px; line-height: 45px; text-align: center; background: #eee; }
  20. .app .page-navigator .page-list{position:absolute; top:45px; left:0; bottom:45px;overflow-x:hidden; overflow-y: auto; width:100px;}
  21. .app .page-navigator .page-menu{margin-top: 5px;}
  22. .app .page-navigator .page-thumb-block{position: relative; width:90px; height:150px;background:#eee; margin: 0 auto 5px; border: 4px solid transparent; border-bottom-width: 30px;}
  23. .app .page-navigator .page-thumb-block:hover{border-color:#d6d6d6;}
  24. .app .page-navigator .page-thumb-block:hover .icon{visibility: visible;}
  25. .app .page-navigator .page-thumb-block.active{border-color:#428BCA;}
  26. .app .page-navigator .page-thumb-block.active .icon{visibility: visible;}
  27. .app .page-navigator .page-thumb{width: 64px; height: 113.6px; background: #fff; position: absolute; top:1px; left: 9px;}
  28. .app .page-navigator .page-thumb-block .page-menu-title{position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; bottom: -25px;}
  29. .app .page-navigator .page-thumb-block .icon{position: absolute; width: 20px; height: 20px; line-height: 20px; text-align: center; bottom: -25px; cursor: pointer; visibility: hidden;}
  30. .app .page-navigator .page-thumb-block .icon.icon-copy{right:5px;}
  31. .app .page-navigator .page-thumb-block .icon.icon-remove{right:30px;}
  32. .app .page-navigator .page-thumb-block .icon .fa{color: #fff; font-size: 18px; opacity: .5;}
  33. .app .page-navigator .page-thumb-block .icon .fa:hover{opacity: 1;}
  34. .app .page-navigator .template{width: 360px; height: 100%; position: absolute; top: 0; left: 100px; background: #f5f5f5; z-index: 101; overflow-y: auto}
  35. .app .page-navigator .template li a{color: #94979c;}
  36. .app .page-navigator .template li:hover a{border-bottom-color: #ddd;}
  37. .app .page-navigator .template li.active a{background: transparent; color: #333; border: 0; border-bottom: 2px solid #333;}
  38. .app .page-navigator .template-area{position: absolute; width: 360px; top: 63px; left:0; bottom: 0; overflow: scroll;}
  39. .app .page-navigator .template-item{float: left; width:150px; height: 266.25px; margin: 0 0 20px 20px; position: relative; cursor: pointer; background: #fff;}
  40. .app .page-navigator .template-item:hover{border: 2px solid #428BCA;}
  41. .app .page-navigator .template-item .add-icon{width: 30px; height: 30px; color: #999; font-size: 30px; position: absolute; top: 30%; left: 50%; margin-left: -15px;}
  42. .app .page-navigator .template-item .text{color: #999; font-size: 18px; position: absolute; left: 50%; margin-left: -27px; top: 55%;}
  43. .app .page-navigator .template-item img{width: 100%;}
  44. .app .page-navigator .add-blank-page{width:100px; height:45px; line-height:45px; text-align: center; background: #428BCA; color:#fff; font-size:40px; z-index:101; position:absolute; left:-1px; bottom:0; cursor: pointer;}
  45. /*app展示界面*/
  46. .app .app-preview{width:350px; border:1px solid #e5e5e5;padding-bottom:20px;}
  47. .app .app-preview .app-header{height:60px; background:url('../images/app/iphone_head.png') center center no-repeat;}
  48. .app .app-preview .app-content{width:322px; min-height: 568px; margin:0 auto; border:1px solid #c5c5c5; background-color:#f9f9f9;}
  49. .app .app-preview .app-content .title .app-header-actions,.app .modules .modules-actions{width:100%; border: 2px dashed rgba(255, 0, 0, 0.5); }
  50. .app .app-preview .app-content .title .app-header-actions .action-wrap,.app .modules .action-wrap{position:absolute; bottom:0; right:0; z-index:100; display:none;}
  51. .app .app-preview .app-content .title .app-header-actions span,.app .modules .action-wrap span{display:inline-block; color:#FFF; opacity:0.7; margin-left:1px; padding:0 5px; font-size:12px; cursor:pointer;}
  52. .app .modules-item>div{position: absolute; z-index: 0;}
  53. .app .modules>div{position:relative; cursor:move; width: 320px;}
  54. /*.app .modules>div:hover{border-color:rgba(255, 0, 0, 0.5);}*/
  55. .app .modules>div:hover .action-wrap, .app .app-preview .app-content .title .app-header-actions,.app .modules .modules-actions .action-wrap{display:block;}
  56. /*app店铺主页头部*/
  57. .app .modules .app-homepage-head .header{position:relative; height:100px; background-repeat:no-repeat; background-position-x:center; background-size:cover; }
  58. .app .modules .app-homepage-head .header .shop-title{position:absolute; bottom:10px; left:100px; font-size:16px; color:#FFF; text-shadow:0 1px 2px rgba(0,0,0,0.5);}
  59. .app .modules .app-homepage-head .header .shop-avatar{position:absolute; left:10px; bottom:-40px; width: 80px; height:80px;}
  60. .app .modules .app-homepage-head .header .shop-avatar img{width:80px; height:80px; background-color:#E4E4E4; border-radius:3px; -webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2); box-shadow:0 0 1px 1px rgba(0,0,0,0.2); max-width:100%; vertical-align:middle;}
  61. .app .modules .app-homepage-head .con{padding:7px 0; border:1px solid #E4E4E4; background:#fff;}
  62. .app .modules .app-homepage-head .con ul{margin:0 0 0 86px; padding:0;}
  63. .app .modules .app-homepage-head .con ul li{float:left; width:33%; list-style:none; border-right:1px solid #E4E4E4; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; margin-top:10px; margin-bottom:6px;}
  64. .app .modules .app-homepage-head .con ul li:last-child{border:0;}
  65. .app .modules .app-homepage-head .con ul a{display:block; margin-top:-10px; margin-bottom:-6px;}
  66. .app .modules .app-homepage-head .con ul a span{display:block; font-size:12px; text-align:center; color:#999;}
  67. .app .modules .app-homepage-head .con ul .count{height:21px; line-height:21px; font-size:18px; color:#333; overflow:hidden;}
  68. .app .app-side .app-homepage-head-edit .bg-img{height:100px; position:relative; background-size:cover; background-repeat:no-repeat; background-position-x:center;}
  69. .app .app-side .app-homepage-head-edit .bg-img .btn-delete{text-align:right; position:absolute; top:-10px; right:-10px;}
  70. .app .app-side .app-homepage-head-edit .bg-img .btn-delete a{display:inline-block; width:20px; height:20px; text-align:center; line-height:20px;color:#fff; background:rgba(0,0,0,.3); border-radius:50%;}
  71. .app .app-side .app-homepage-head-edit .bg-img .btn-delete a:hover{background:#000;}
  72. .app .app-side .app-homepage-head-edit .bg-img .btn-delete{display:none;}
  73. .app .app-side .app-homepage-head-edit .bg-img:hover .btn-delete{display:block;}
  74. /*app富文*/
  75. .app .modules .app-richText .inner ul{ list-style:disc;}
  76. .app .modules .app-richText .inner ol{ list-style:decimal;}
  77. .app .modules .app-richText .inner img{max-width:100%;}
  78. .app .modules .app-richText .inner ul {padding-left:40px;}
  79. .app .modules .app-richText .inner ul,.app .modules .app-richText .inner ol{margin:16px 0;}
  80. .app .modules .app-richText .inner h1,.app .modules .app-richText .inner h2,.app .modules .app-richText .inner h3,.app .modules .app-richText .inner h4,.app .modules .app-richText .inner h5,.app .modules .app-richText .inner h6{font-family: Verdana,Arial,Helvetica,sans-serif; font-weight:bold;}
  81. .app .modules .app-richText .inner{padding:10px; font-size:16px; overflow:hidden;}
  82. .app .modules .app-richText table{margin:10px 0; width:100%;}
  83. .app .modules .app-richText table td, .app .modules .app-richText table th{padding:5px 10px; border:1px solid #DDD}
  84. /*app商品*/
  85. .app .modules .app-goods .inner .goods-list,.app .modules .app-tagList2 .inner .goods-list{margin:10px;}
  86. .app .modules .app-goods .inner .goods-list li,.app .modules .app-tagList1 .inner .goods-list li,.app .modules .app-tagList2 .inner .goods-list li{position:relative; overflow:hidden; margin: 0 ;}
  87. .app .modules .app-goods .inner .goods-list .goods-card{display:block; border:1px solid #eee; padding:5px; background:#FFF; }
  88. .app .modules .app-goods .inner .goods-list a,.app .modules .app-tagList1 .inner .goods-list a{color:#333;}
  89. .app .modules .app-goods .inner .goods-list li .goods-title{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:3px 0;}
  90. .app .modules .app-goods .inner .goods-list li .goods-sub-title{width:100%; margin-bottom:3px; color:#666; word-break: break-all; white-space: normal;}
  91. .app .modules .app-goods .inner .goods-list li .goods-price,.app .modules .app-tagList2 .inner .goods-list li .goods-price{font-size:15px; margin-top:2px; font-weight: bold; }
  92. .app .modules .app-goods .inner .goods-list li .goods-price em,.app .modules .app-tagList2 .inner .goods-list li .goods-price em{font-style:normal; color:#f60;}
  93. .app .modules .app-goods .inner .goods-list .goods-buy,.app .modules .app-tagList1 .inner .goods-list .goods-buy,.app .modules .app-tagList2 .inner .goods-list .goods-buy{position:absolute; bottom:7px;}
  94. .app .modules .app-goods .inner .goods-list .goods-buy.btn1,.app .modules .app-tagList1 .inner .goods-list .goods-buy.btn1,.app .modules .app-tagList2 .inner .goods-list .goods-buy.btn1{width:30px; height:25px; background:url('../images/app/showcase.png') no-repeat; background-size:40px auto; right:10px; background-position:0 0;}
  95. .app .modules .app-goods .inner .goods-list .goods-buy.btn2,.app .modules .app-tagList1 .inner .goods-list .goods-buy.btn2,.app .modules .app-tagList2 .inner .goods-list .goods-buy.btn2{width:20px; height:20px; background:url('../images/app/showcase.png') no-repeat; background-size:40px auto; right:10px; background-position:0 -88px;}
  96. .app .modules .app-goods .inner .goods-list .goods-buy.btn3,.app .modules .app-tagList1 .inner .goods-list .goods-buy.btn3,.app .modules .app-tagList2 .inner .goods-list .goods-buy.btn3{width:40px; height:25px; background:url('../images/app/showcase.png') no-repeat; background-size:40px auto; right:-3px; background-position:0 -25px;}
  97. .app .modules .app-goods .inner .goods-list .goods-buy.btn4,.app .modules .app-tagList1 .inner .goods-list .goods-buy.btn4,.app .modules .app-tagList2 .inner .goods-list .goods-buy.btn4{width:37px; height:20px; background:url('../images/app/showcase.png') no-repeat; background-size:40px auto; right:10px; background-position:0 -50px;}
  98. .app .modules .app-goods .inner .goods-list .goods-simple .goods-info p{margin:6px 0 0 0;}
  99. .app .modules .app-goods .inner .goods-list .pic,.app .modules .app-tagList1 .inner .goods-list .pic,.app .modules .app-tagList2 .inner .goods-list .pic{text-align:center; overflow: hidden; min-height:100px;}
  100. .app .modules .app-goods .inner .goods-list img,.app .modules .app-tagList1 .inner .goods-list img,.app .modules .app-tagList2 .inner .goods-list img{max-width:100%; display:block; margin:auto; vertical-align: middle; }
  101. .app .modules .app-goods .inner .goods-list .lg img{max-height:500px; min-height:100px;}
  102. .app .modules .app-goods .inner .goods-list .sm img{max-height:143px;}
  103. .app .modules .app-goods .inner .detailList .goods-list img {max-width:139px; max-height:139px;}
  104. .app .modules .app-goods .inner .goods-list .cascade .pic{height:auto; max-width:100%;}
  105. .app .modules .app-goods .inner .goods-list .cascade{margin-bottom:8px;}
  106. .app .modules .app-goods .inner .goods-list .lg{margin:4px;}
  107. .app .modules .app-goods .inner .goods-list .col-xs-6,.app .modules .app-tagList2 .inner .goods-list .col-xs-6{padding:4px; margin-bottom: 5px;}
  108. .app .modules .app-goods .inner .smImg .goods-simple .goods-price{ display:inline; position:absolute; right:10px; bottom:10px;}
  109. .app .modules .app-goods .inner .smImg .goods-sale .goods-info{border:1px solid #eeeeee; height:40px; line-height:40px; border-top:0; border-right:0;}
  110. .app .modules .app-goods .inner .smImg .goods-sale .goods-info .goods-price{display:inline-block; height:40px; line-height:40px; font-size:15px; color:#d9534f;}
  111. .app .modules .app-goods .inner .smImg .goods-sale .goods-info .buy-btn{height:100%; width:45px; background:#d9534f; line-height:13px; padding:7px;}
  112. .app .modules .app-goods .inner .smImg .goods-sale .goods-info .buy-btn a{ color:#FFF;font-size:14px;}
  113. .app .modules .app-goods .inner .defaultList .goods-simple{position:relative;}
  114. .app .modules .app-goods .inner .defaultList .goods-simple .goods-info{position:absolute; width:auto; font-size:12px; bottom:5px; right:5px; background:rgba(0,0,0,0.5); color:#fff; border-radius:3px;}
  115. .app .modules .app-goods .inner .defaultList .sm.goods-simple .goods-info{bottom:10px; right:10px;}
  116. .app .modules .app-goods .inner .defaultList .lg.goods-simple .goods-info .goods-title{float:left;}
  117. .app .modules .app-goods .inner .defaultList .goods-simple .goods-info .goods-price{float:right;}
  118. .app .modules .app-goods .inner .defaultList .goods-simple .goods-info .goods-price em{color:#fff;}
  119. .app .modules .app-goods .inner .defaultList .goods-simple .goods-info p{padding:0; margin:0; font-weight:400;}
  120. .app .modules .app-goods .inner .detailList .col-xs-6{padding:0}
  121. .app .modules .app-goods .inner .detailList .pic,.app .modules .app-tagList1 .inner .detailList .pic{padding-right:10px;}
  122. .app .modules .app-goods .inner .detailList .goods-card{margin-bottom:10px;}
  123. .app .modules .app-goods .inner .detailList .goods-simple{padding:10px 0; border-bottom:1px solid #eee;}
  124. /*app图片广告*/
  125. .app .modules .app-adImg .inner h3,.app .app-side h3{margin:0;}
  126. .app .modules .app-adImg .inner img{max-width:100%; vertical-align: middle;}
  127. .app .modules .app-adImg .inner .show-separate .ad-list{font-size:12px; padding:0 5px; margin:0;}
  128. .app .modules .app-adImg .inner .show-separate .ad-list.lg .ad-list-item{margin:5px auto; position:relative;}
  129. .app .modules .app-adImg .inner .show-separate .ad-list.lg .ad-list-item>a{display:block; text-align:center;}
  130. .app .modules .app-adImg .inner .show-separate .ad-list .ad-list-item h3{position:absolute; bottom:0; left:0; width:100%; text-align:left; z-index:2; color:#fff; background:rgba(51,51,51,0.8); padding:5px 15px; font-size:14px; line-height:1.5em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  131. .app .modules .app-adImg .inner .show-separate .ad-list.sm .ad-list-item{padding:0; min-height:40px; overflow:hidden;}
  132. .app .modules .app-adImg .inner .show-separate .ad-list.sm .ad-list-item>a{display:block; margin:3px; position:relative; height:148px; overflow:hidden; text-align:center;}
  133. /*app标题*/
  134. .app .modules .app-title .title-detail{padding:10px;}
  135. .app .modules .app-title .title-detail h2{font-size:18px; height:22px; line-height:22px;}
  136. .app .modules .app-title .title-detail h2 span{font-size:12px; color:#999;}
  137. .app .modules .app-title .title-detail p{padding:0; color:#8c8c8c; font-size:11px; margin:5px 0 0;}
  138. /*app文本导航*/
  139. .app .modules .app-textNav .inner .list-group{margin-bottom:0}
  140. .app .modules .app-textNav .inner .list-group-item{border-radius:0; border:0; border-bottom:1px solid #ddd; margin-bottom:0; height:40px; padding:0;}
  141. .app .modules .app-textNav .inner .list-group-item a{color:#333; display:block; padding:10px 15px;}
  142. .app .modules .app-textNav .inner .list-group-item a span{display:block; width:100%; height:100%; padding-right:30px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  143. .app .modules .app-textNav .inner .list-group-item a i{color:#888; line-height:20px; position:absolute; right:0; top:0; font-size:22px;}
  144. /*图片导航*/
  145. .app .modules .app-navImg .inner{padding:5px;}
  146. .app .modules .app-navImg .inner ul li{width:25%; overflow:hidden; float:left;text-align:center;}
  147. .app .modules .app-navImg .inner ul li .nav-img{display:block; width:100%; overflow:hidden;}
  148. .app .modules .app-navImg .inner ul li .nav-img img{max-width:100%; vertical-align: middle;}
  149. .app .modules .app-navImg .inner ul li .title{color:#333; display:inline-block; width:100%; height:24px; padding:5px; font-size:12px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  150. /*关联链接*/
  151. .app .modules .app-link .inner .list-group,.micro-page-category .app-category .list-group,.usercenter .app-usercenter .list-group{margin:0;}
  152. .app .modules .app-link .inner .list-group-item,.micro-page-category .app-category .list-group-item,.usercenter .app-usercenter .list-group-item{border-radius:0; border-left:0; border-right:0; height:40px; padding:0;}
  153. .app .modules .app-link .inner .list-group-item a,.micro-page-category .app-category .list-group-item a,.usercenter .app-usercenter .list-group-item a{color:#333; display:block; padding:10px 15px;}
  154. .app .modules .app-link .inner .list-group-item a span,.micro-page-category .app-category .list-group-item a span,.usercenter .app-usercenter .list-group-item a span{display:block; width:100%; height:100%; padding-right:30px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  155. .app .modules .app-link .inner .list-group-item a i,.micro-page-category .app-category .list-group-item a i,.usercenter .app-usercenter .list-group-item a i{color:#888; line-height:20px; font-size:22px; position:absolute; right:0; top:0;}
  156. /*app商品搜索*/
  157. .app .modules .app-search .inner{padding:10px;}
  158. /*app橱窗*/
  159. .app .modules .app-showCase .inner .showCaseTitle{padding:10px; font-size:14px;}
  160. .app .modules .app-showCase .inner .showCaseBody{background:#fff;}
  161. .app .modules .app-showCase .inner .showCaseBody ul li{float:left; overflow:hidden; text-align:center; box-sizing: border-box;}
  162. .app .modules .app-showCase .inner .showCaseBody ul li img{max-width:100%; height:auto;}
  163. .app .modules .app-showCase .inner .showCaseBody ul li.lg{width:66%; height:213px; margin:0 1% 2px 0;}
  164. .app .modules .app-showCase .inner .showCaseBody ul li.sm{width:33%; height:106px; margin:0 0 2px 0;}
  165. .app .modules .app-showCase .inner .showCaseBody .three .sm{width:33%; height:105px; margin-right:0.5%;}
  166. .app .modules .app-showCase .inner .showCaseBody .three .sm:last-child{margin-right:0;}
  167. .app .modules .app-showCase .inner .showCaseBody .showCaseBodyTitle{font-size:14px; font-weight:700; padding:0 10px; margin:10px 0;}
  168. .app .modules .app-showCase .inner .showCaseBody .showCaseBodyDesc{font-size:12px; margin:0; padding:0 10px 10px 10px; line-height: 1.5em; word-break: break-all;}
  169. /*app辅助*/
  170. .app .modules .app-line .inner{height:30px; position:relative;}
  171. .app .modules .app-line .inner hr{width:100%;position:absolute; margin:14px 0; left:0; top:0; border-top: 1px dashed #bbb;}
  172. /*app辅助空白*/
  173. .app .modules .app-white .inner{padding:15px 10px;}
  174. /*app自定义模*/
  175. .app .modules .app-component .component-con{padding:10px;}
  176. /*app进入店铺*/
  177. .app .modules .app-store .inner{padding:10px; background:#fff; border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2;}
  178. .app .modules .app-store .inner a{color:#333;}
  179. .app .modules .app-store .inner .pull-right a{color:#999;}
  180. /*app商品分组1*/
  181. .app .modules .app-tagList1 .inner{background:#E6E6E6;}
  182. .app .modules .app-tagList1 .nav-left{padding:0; position:relative;}
  183. .app .modules .app-tagList1 .nav-tabs{border:0; position:relative; padding-top:25px;}
  184. .app .modules .app-tagList1 ul li a{color:#333;margin:0; padding:5px 10px; border:0; border-radius:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
  185. .app .modules .app-tagList1 .list{background:#fff; padding:0 2px;}
  186. .app .modules .app-tagList1 .nav-tabs>li.active>a, .app .modules .app-tagList1 .nav-tabs>li.active>a:hover, .app .modules .app-tagList1 .nav-tabs>li.active>a:focus{color:#f60; background-color:#fff; border:none;}
  187. .app .modules .app-tagList1 .list h2{height:25px; line-height:25px; background:#eee; padding-left:5px; font-size:14px;}
  188. .app .modules .app-tagList1 .list .goods-list,.app .modules .app-tagList2 .goods-list{margin:5px;}
  189. .app .modules .app-tagList1 .list .goods-list .goods-simple,.app .modules .app-tagList2 .goods-list .goods-simple{padding:5px 0; border-bottom:1px solid #eee;}
  190. .app .modules .app-tagList1 .list .goods-list .goods-simple:last-child,.app .modules .app-tagList2 .goods-list .goods-simple:last-child{border:0;}
  191. .app .modules .app-tagList1 .inner .detailList .col-xs-4{padding:0;}
  192. .app .modules .app-tagList1 .list .detailList .goods-price,.app .modules .app-tagList2 .goods-list .goods-price{color:#f60;}
  193. /*app商品分组2*/
  194. .app .modules .app-tagList2 ul.nav li{background:#fff; border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5;}
  195. .app .modules .app-tagList2 ul.nav .active{border-bottom:1px solid #d9534f;}
  196. .app .modules .app-tagList2 ul.nav .active a{color:#d9534f;}
  197. /*app语音*/
  198. .app .modules .app-audio .inner{padding:10px;}
  199. .app .modules .app-audio .inner img.audioLogo{width:40px; height:40px; display:inline-block;}
  200. .app .modules .app-audio .inner .wx{position:relative;}
  201. /*微信模式气泡居左(.wx.audioLeft)*/
  202. .app .modules .app-audio .inner .audioLeft{text-align:left;}
  203. .app .modules .app-audio .inner .audioLeft .audioBar{position:absolute; width:185px; height:42px; display:inline-block; left:55px; top:0; background:url('../images/app/sprite_v5.png') 0 0 no-repeat; background-size:400px 175px; cursor:pointer;}
  204. .app .modules .app-audio .inner .audioLeft .audioBar .audioStatic{display:block; position:absolute; width:13px; height:17px; left:21px; top:12px; z-index:2; background:url('../images/app/sprite_v5.png') 0 0 no-repeat; background-size:400px 175px; background-position:-180px -105px;}
  205. .app .modules .app-audio .inner .audioLeft .audioBar .audioAnimation{position:absolute; width:13px; height:17px; left:21px; top:12px; z-index:3;}
  206. .app .modules .app-audio .inner .audioLeft .audioBar .audioLoading{position:absolute; right:15px; top:12px;}
  207. .app .modules .app-audio .inner .audioLeft .audio-time{position:absolute; font-size:14px; color:#999; left:250px; bottom:5px;}
  208. /*微信模式气泡居右(.wx.audioRight)*/
  209. .app .modules .app-audio .inner .audioRight{text-align:right;}
  210. .app .modules .app-audio .inner .audioRight img{float:right;}
  211. .app .modules .app-audio .inner .audioRight .audioBar{position:absolute; width:185px; height:42px; display:inline-block; left:auto; right:50px; background:url('../images/app/sprite_v5.png') 0 0 no-repeat; background-position:-187px 0; background-size:400px 175px; cursor:pointer;}
  212. .app .modules .app-audio .inner .audioRight .audioBar .audioStatic{display:block; position:absolute; width:13px; height:17px; left:auto; right:21px; top:12px; z-index:2; background:url('../images/app/sprite_v5.png') 0 0 no-repeat; background-size:400px 175px; background-position:-180px -83px;}
  213. .app .modules .app-audio .inner .audioRight .audioBar .audioAnimation{position:absolute; width:13px; height:17px; left:auto; right:21px; top:12px; z-index:3; }
  214. .app .modules .app-audio .inner .audioRight .audioBar .audioLoading{position:absolute; left:15px; top:12px; right:auto;}
  215. .app .modules .app-audio .inner .audioRight .audio-time{position:absolute;display:inline-block; width:50px; font-size:14px; color:#999; right:240px; bottom:5px; left:auto;}
  216. /*简易音乐播放(.music)*/
  217. .app .modules .app-audio .inner .music{height:38px; border:1px solid #dddddd; line-height:38px; position:relative; background:#FFF; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
  218. .app .modules .app-audio .inner .music.music-play{height:38px; overflow:hidden;}
  219. .app .modules .app-audio .inner .music .audioStatic i{position: absolute; left:15px; top:-1px; font-size:22px; color:#6AAB30; display:inline-block; line-height:38px;}
  220. .app .modules .app-audio .inner .music .audioAnimation i{position:absolute; left:15px; top:9px; font-size:10px; color:#666; line-height:19px; width:19px; height:19px; border-radius:19px; border:1px solid #666; text-align:center;}
  221. .app .modules .app-audio .inner .music .musicTitle{position:absolute; left:42px; top:0; width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333;}
  222. .app .modules .app-audio .inner .music .audioLoading{position:absolute; right:15px; top:-1px;}
  223. .app .modules .app-audio .inner .music .audio-time{position:absolute; font-size:14px; color:#999; right:10px;top:-1px;}
  224. .app .modules .app-audio .inner .music .slider-bar{position:relative; top:36px; left:0; border-top:1px solid #ddd; width:100%; height:19px; background:#f9f9f9;}
  225. .app .modules .app-audio .inner .music .slider-bar .slider-fill{position:absolute; height:19px; background:#6AAB30;}
  226. .app .modules .app-audio .inner .music .slider-bar .slider-handle{cursor:pointer; display:inline-block; width:46px; height:21px; position:absolute; top:-1px; background-image: url("../images/app/slider-bar.png"); background-size:46px 21px;}
  227. /*app公告*/
  228. .app .modules .app-notice .inner{font-size:12px; overflow: hidden; color:#f90; border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2; padding:0 10px;}
  229. .app .modules .app-notice .inner .notice-box{height:37px; line-height:37px; word-break:break-all; font-size:12px; overflow:hidden;}
  230. .app .modules .app-notice .inner .scrollNotice{width:20000px;}
  231. .app .modules .app-notice .inner .scrollNotice span{position:relative;}
  232. /*底部蒙版*/
  233. .app .app-mask-bottom{width: 100%; height: 150px; z-index: 4; background: #F8F8F8; opacity: 0.5; pointer-events: none; }
  234. /*自定义内容项*/
  235. .app .app-region{position:relative; width:100%; margin-top: 11px;}
  236. .app .app-preview .app-region .arrow-top,.app .app-preview .arrow-top:after{width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent #d1d1d1 transparent; position: absolute; left: 50%; top: -10px;}
  237. .app .app-preview .app-region .arrow-top:after{content: ""; border-bottom-color: #f8f8f8; top: 1px; left:-8px; z-index:1;}
  238. .app .app-region{position:relative;width:100%;}
  239. .app .app-region .panel{border-radius:0; position:relative; background-color: transparent; width:100%; border-left:0; border-right:0; border-bottom:0;}
  240. .app .app-region .panel .panel-body{padding:0 11px 4px 11px; background-color: transparent;}
  241. .app .app-region .panel .panel-body label{height:40px;line-height:40px;}
  242. .app .app-region .panel .panel-body .js-editor-submit-div{margin-top:-75px;}
  243. .app .app-region .panel .panel-body .js-editor-submit{margin-left:50px;}
  244. .app .app-side .app-add-item .addItem-wrap h4{height:40px; line-height:40px; font-size:14px; font-weight:bold;}
  245. .app .app-region .panel .panel-body ul,.app .app-side .app-add-item .addItem-wrap ul{width:100%; margin: 0 auto;}
  246. .app .app-region .panel .panel-body ul li,.app .app-side .app-add-item .addItem-wrap ul li{float: left; display: table; margin: 0 0 10px 5px; background: #fff;}
  247. .app .app-region .app-add-filed a,.app .app-side .app-add-item .addItem-wrap .app-add-filed a {display:table-cell; width:60px; height:40px; text-align:center; box-sizing: border-box; white-space:normal; vertical-align:middle; line-height:14px; cursor:pointer; padding:6px 8px; color:#428bca;}
  248. .app .app-side{margin:71px 0 0 0;width: 560px; overflow-x: hidden; }
  249. .app .app-side .panel {border-radius: 0;}
  250. .app .app-side .panel-body{padding:12px 10px;}
  251. .app .app-side>div{position:relative; padding-bottom:60px; width:535px; margin-left:20px;}
  252. .app .app-side .pages{padding:0;margin-top:-50px;}
  253. .app .app-side .pages label{height:34px;line-height:34px;}
  254. .app .app-side .pages #plength{width:300px;}
  255. .app .app-side .card{padding:20px 0 20px 20px; margin:0 20px 20px 0; border:1px solid #ddd; background:#FFF;}
  256. .app .app-side .arrow-left,.app .app-side .arrow-left:after{width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent #d1d1d1 transparent transparent; position: absolute; left: -10px; top: 19px;}
  257. .app .app-side .arrow-left:after{content: ""; border-right-color: #f8f8f8; left: 1px; top: -8px;}
  258. .app .app-side .card .divider{margin:15px 0; padding-right:30px; width:95%;border-top:1px solid #DDD;}
  259. .app .app-side .card .btns{display:none;}
  260. .app .app-side .card:hover .btns{display:block;}
  261. .custom-link .popover{width:360px; max-width:600px;}
  262. /*页面标题设置*/
  263. /*商品*/
  264. .app .app-side .app-goods-edit .goods-thumb,.app .app-side .app-goods-edit .goods-select{display:inline-block; width:50px; height:50px; margin:0 10px 10px 0; position:relative; border:1px solid #ddd; line-height:46px; text-align:center; vertical-align:middle;}
  265. .app .app-side .app-goods-edit .goods-thumb:hover .remove{display:block;}
  266. .app .app-side .app-goods-edit .goods-thumb .remove{position:absolute; top:-25px; right:-5px;display:none;}
  267. .app .app-side .app-goods-edit .goods-thumb .remove i{display:inline-block; width:20px; height:20px; text-align:center; line-height:20px; color:#fff; background:rgba(0,0,0,.3); border-radius:50%;}
  268. .app .app-side .app-goods-edit .goods-thumb i:hover{background:#000;}
  269. /*图片广告******图片导航*/
  270. .app .app-side .app-adImg-edit .panel-body .card,.app .app-side .app-nav-edit .panel .card{margin:0 0 20px 0; padding:10px 15px;}
  271. .app .app-side .app-adImg-edit .add-adImg-item .img,.app .app-side .app-nav-edit .nav-item .img{height:92px; text-align:center; position:relative; overflow:hidden; padding:0; }
  272. .app .app-side .app-adImg-edit .add-adImg-item .img img,.app .app-side .app-nav-edit .nav-item .img img{display:block; max-width:100%; vertical-align:middle;}
  273. .app .app-side .app-adImg-edit .add-adImg-item .img h3,.app .app-side .app-nav-edit .nav-item .img h3,.app .app-side .app-image-edit .add-image-item .img h3{position:absolute; bottom:0; left:0; width:100%; text-align:center; z-index:2; color:#fff; background:rgba(51,51,51,0.5); padding:5px 15px; font-size:14px; line-height:1.5em;}
  274. /*魔方*/
  275. .app .app-side .app-cube-edit .add-cube-item{margin:0 0 20px 0; padding:10px; position:relative;}
  276. .app .app-side .app-cube-edit table{width:240px; table-layout:fixed;}
  277. .app .app-side .app-cube-edit table tr td{width:60px; height:60px; cursor:pointer; text-align:center; color:#ccc; background-color:rgba(0, 0, 0, 0.1); padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; overflow:hidden;}
  278. .app .app-side .app-cube-edit table td.empty{background-color:rgba(0, 0, 0, 0); border:#dddddd 1px dashed;}
  279. .app .app-side .app-cube-edit table td.current{-webkit-box-shadow:0 0 0 2px #858585 inset; box-shadow:0 0 0 2px #858585 inset; padding:2px;}
  280. .app .app-side .app-cube-edit table td.rows-2{height:120px;}
  281. .app .app-side .app-cube-edit table td.rows-3{height:180px;}
  282. .app .app-side .app-cube-edit table td.rows-4{height:240px;}
  283. .app .app-side .app-cube-edit table td.cols-2{width:120px;}
  284. .app .app-side .app-cube-edit table td.cols-3{width:180px;}
  285. .app .app-side .app-cube-edit table td.cols-4{width:240px;}
  286. .app .app-side .app-cube-edit table td.index-0{background-color:#BEEB9F;}
  287. .app .app-side .app-cube-edit table td.index-1{background-color:#FFFF9D;}
  288. .app .app-side .app-cube-edit table td.index-2{background-color:#DB9E36;}
  289. .app .app-side .app-cube-edit table td.index-3{background-color:#79BD8F;}
  290. .app .app-side .app-cube-edit table td.index-4{background-color:#00A388;}
  291. .app .app-side .app-cube-edit table td.index-5{background-color:#225378;}
  292. .app .app-side .app-cube-edit table td.index-6{background-color:#1695A3;}
  293. .app .app-side .app-cube-edit table td.index-7{background-color:#BEDB39;}
  294. .app .app-side .app-cube-edit table td.index-8{background-color:#F3FFE2;}
  295. .app .app-side .app-cube-edit table td.index-9{background-color:#EB7F00;}
  296. .app .app-side .app-cube-edit table td.index-10{background-color:#7D8A2E;}
  297. .app .app-side .app-cube-edit table td.index-11{background-color:#C9D787;}
  298. .app .app-side .app-cube-edit table td.index-12{background-color:#FFC0A9;}
  299. .app .app-side .app-cube-edit table td.index-13{background-color:#FF8598;}
  300. .app .app-side .app-cube-edit table td.index-14{background-color:#FFD34E;}
  301. .app .app-side .app-cube-edit table td.index-15{background-color:#ACF0F2;}
  302. .app .app-side .app-cube-edit table span{color:#fff; text-shadow:0 0 1px #000; position:relative; left:-2px;}
  303. .app .app-side .app-cube-edit table td.current span{top:-10px; left:0;}
  304. .app .modules .app-cube table{width:100%; table-layout:fixed;}
  305. .app .modules .app-cube table td{text-align:center; color:#ddd;}
  306. .app .app-side .app-cube-edit tr,.app .modules .app-cube tr{margin:0; padding:0; width:100%;}
  307. .app .app-side .app-cube-edit td,.app .modules .app-cube td{width:25%; margin:0; padding:0;}
  308. .app .app-side .app-cube-edit td img,.app .modules .app-cube td img{display:inline-block; vertical-align:middle; max-width:100%; max-height:100%; width:auto; height:auto;}
  309. .app .app-side .app-cube-edit td.cols-2,.app .modules .app-cube td.cols-2{width:50%;}
  310. .app .app-side .app-cube-edit td.cols-3,.app .modules .app-cube td.cols-3{width:75%;}
  311. .app .app-side .app-cube-edit td.cols-4,.app .modules .app-cube td.cols-4{width:100%;}
  312. .layout-table{width:250px; margin:40px auto;}
  313. .layout-cols li{float:left; background:#f8f8f8; width:60px; height:60px; border:1px solid #e9e9e9; border-right-width:2px; border-bottom-width:2px; margin:1px;}
  314. .layout-cols li.selected{background:#ddeafb; border-color:#c3d9ff;}
  315. /*标题*/
  316. .app .app-side .app-title-edit .card{margin:10px 0;}
  317. .app .app-side .app-title-edit .link{display:inline-block;}
  318. /*文本导航*/
  319. .app .app-side .app-textNav-edit .panel-body{padding:12px 10px;}
  320. .app .app-side .app-textNav-edit .panel-body .card{margin:0 0 20px 0; padding:10px; position:relative;}
  321. .app .app-side .card,.app .app-side .app-textNav-edit .add-textNav-con,.app .app-side .app-textNav-edit .add-textNav-con .link,.app .app-side .app-adImg-edit .add-adImg-item{position:relative;}
  322. .app .app-side .card .btns{text-align:right; position:absolute; top:-10px; right:-10px;}
  323. .app .app-side .card .btns a{display:inline-block; width:20px; height:20px; text-align:center; line-height:20px;color:#fff; background:rgba(0,0,0,.3); border-radius:50%;}
  324. .app .app-side .card .btns a:hover{background:#000;}
  325. /*图片导航*/
  326. .app .app-side .app-nav-edit .nav-item .img>span{display:block; border:1px solid #eee; height:100%; text-align:center; line-height:92px;}
  327. /*关联链接*/
  328. .app .app-side .app-link-edit .card{margin:0 0 20px 0; padding:10px;}
  329. .app .app-side .app-link-edit .link-item{position:relative;}
  330. /*橱窗*/
  331. .app .app-side .app-showCase-edit .inner .card{margin:0 0 20px 0; padding:10px;}
  332. .app .app-side .app-showCase-edit .showcase-item .img{padding:0; position:relative; overflow:hidden; height:92px; background-size:contain; background-repeat:no-repeat; background-position:50% 50%; cursor:pointer;}
  333. .app .app-side .app-showCase-edit .showcase-item img{width:100%;}
  334. .app .app-side .app-showCase-edit .showcase-item .img h3{position:absolute; bottom:0; left:0; width:100%; text-align:center; z-index:2; color:#fff; background:rgba(51,51,51,0.5); padding:5px 15px; font-size:14px; line-height:1.5em;}
  335. .app .app-side .app-showCase-edit .showcase-item .img>span{display:block; width:100%; border:1px solid #eee; height:100%; text-align:center; line-height:92px;}
  336. /*自定义模*/
  337. .app .app-side .app-component-edit .inner .componentAdd{cursor:pointer;}
  338. /*辅助空白*/
  339. .app .app-side .app-white-edit .slider{width:100%; padding-top:4px;}
  340. .app .app-side .app-white-edit .slider .slider-bar{position:relative; text-align:left; height:13px; border:1px solid #aaa; border-radius:10px; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .15);}
  341. .app .app-side .app-white-edit .slider .slider-bar a{position:absolute; z-index:2; width:20px; height:20px; cursor:default; border:1px solid #aaa; background-color:#ddd; border-radius:50%; margin-left:-10px; top:-5px;}
  342. /*添加内容*/
  343. .app .app-side .app-add-item .addItem-wrap{width:326px; margin:10px auto;}
  344. /*商品分组1*/
  345. .app .app-side .app-tagList1-edit .card{margin:0 0 20px 0; padding:10px;position:relative;}
  346. /*商品分组2*/
  347. .app .app-side .app-tagList2-edit .card{margin:0 0 20px 0; padding:10px;position:relative;}
  348. /*微页面分类*/
  349. .micro-page-category .category-list-filter{margin:15px 0;}
  350. .app .app-preview .title{position:relative;}
  351. .app .app-preview .title h1{margin:0; padding:18px 60px 0 60px; height:64px; line-height:46px; font-size:16px; color:#fff; text-align: center; background:url('../images/app/titlebar.png') no-repeat; cursor:pointer; left:-1px; right:-1px;}
  352. .app .app-preview .title h1 span{display:inline-block; width:200px; height:46px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  353. .micro-page-category .app-category .title .title-new{padding:10px; margin-bottom:10px; border-bottom:1px solid #dddddd;}
  354. .micro-page-category .app-category .title .title-new h2{margin:0; font-size:18px; line-height:22px;}
  355. .micro-page-category .app-category .title .app-paginations-container{padding:10px 5px;}
  356. .micro-page-category .app-category .rich-text{padding:10px 10px 0 10px;}
  357. .micro-page-category .app-category .app-paginations-container .category-messages{width:100%; margin-bottom:5px; border:1px solid #c9c9c9; background:#fff;}
  358. .micro-page-category .app-category .app-paginations-container .category-messages>a{display:block; padding:15px 9px;}
  359. .micro-page-category .app-category .app-paginations-container .img{width:94px; height:94px; margin-right:10px;display:table-cell; vertical-align: middle; text-align:center; overflow:hidden; border:1px solid #e5e5e5; }
  360. .micro-page-category .app-category .app-paginations-container .img img{max-height:94px; vertical-align:middle; width:auto; height:auto;}
  361. .micro-page-category .app-category .app-paginations-container .headline{font-size:17px; line-height:22px; color:#333; margin:5px 0 10px;}
  362. .micro-page-category .app-category .app-paginations-container .summary{font-size: 12px; line-height: 1.4; color: #666; margin: 10px 0 10px 105px; word-break: break-all;}
  363. .micro-page-category .app-category-edit .category-messages-list i{cursor:pointer; color:rgba(0,0,0,0.3); font-size:20px;}
  364. .micro-page-category .app-category-edit .category-messages-list i:hover{ color:rgba(0,0,0,1);}
  365. /*会员主页*/
  366. .usercenter .modules{height: auto;}
  367. .usercenter .app .app-header{position:relative;width: 100%;}
  368. .usercenter .app .app-header .app-header-content{width:350px;border: 1px solid #e5e5e5;border-radius: 18px 18px 0 0;height:60px; background:url('../images/app/iphone_head.png') center center no-repeat;}
  369. .usercenter .app .app-preview{overflow-x: hidden;overflow-y: auto;height:590px;}
  370. .usercenter .app .app-plength{width:350px;margin-top:-100px;height:35px}
  371. .usercenter .app-usercenter{background-color: #EFEFF4;}
  372. .usercenter .app-usercenter .head{position:relative; height:135px; width:100%; background-size:100% auto; -moz-background-size:100% auto; -webkit-background-size:100% auto;}
  373. .usercenter .app-usercenter .head .ptool{position: absolute; top: 18px; right: 16.5px; display:inline-block; text-decoration:none; padding: 3px 10px; line-height: 20px; color:#fff; background: rgba(0,0,0,.5); border-radius: 22px;}
  374. .usercenter .app-usercenter .head .logo-img img{position: absolute; left: 21px; top: 20px; width: 55px; height: 55px; border-radius: 100%; border: 3px solid #cfcfcf;}
  375. .usercenter .app-usercenter .head .banner-info{position: absolute; left: 99px; top:25px;}
  376. .usercenter .app-usercenter .head .name{font-size: 120%; color: #FFF;}
  377. .usercenter .app-usercenter .head .tel{margin-top: 5px; color: #FFF;}
  378. .usercenter .app-usercenter .head .head-nav{width: 100%; height:40px; line-height:30px; padding: 5px 0; position: absolute; bottom: 0; left: 0; background:rgba(0,0,0,0.4);}
  379. .usercenter .app-usercenter .head .head-nav .head-nav-list{display:inline-block; float:left; text-decoration:none; color:#FFF; width:50%; text-align:center;}
  380. .usercenter .app-usercenter .head .head-nav-list:first-child{border-right: 1px solid #fff;}
  381. .usercenter .app-usercenter .head .head-nav .head-nav-list .fa{display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 100%; color: #999; background: #fff; margin-right: 5px;}
  382. .usercenter .app-usercenter .nav-action{width: 100%; height: 70px; line-height: 40px; padding: 15px 0; margin-top: 15px; background-color: #fff;}
  383. .usercenter .app-usercenter .nav-action .nav-action-list{display: inline-block; float: left; text-decoration: none; color: #333; width: 50%; text-align: center;}
  384. .usercenter .app-usercenter .nav-action .nav-action-list:first-child{border-right: 1px solid #ddd;}
  385. .usercenter .app-usercenter .nav-action img{vertical-align: middle; width: 38px; height: 38px;}
  386. .usercenter .app-usercenter .mnav-box ul,.mnav-box ul li{padding:0; margin:0;}
  387. .usercenter .app-usercenter .mnav-box{color:#606366; }
  388. .usercenter .app-usercenter .mnav-box .mnav-box-ul{margin-top: 15px; list-style:none; background-color: #fff;}
  389. .usercenter .app-usercenter .mnav-box .mnav-box-ul li{ border-bottom:1px solid #ddd; position:relative; height:48px; padding: 12px 15px; overflow:hidden;}
  390. .usercenter .app-usercenter .mnav-box .mnav-box-ul li:first-child{border-top: 1px solid #ddd;}
  391. .usercenter .app-usercenter .mnav-box .mnav-box-ul li .mnav-box-list{color:#606366; font-size:15px; text-decoration:none; -webkit-box-sizing:border-box; overflow:hidden;}
  392. .usercenter .app-usercenter .mnav-box .mnav-box-ul li .mnav-box-list>i{width:25px; margin-right:10px; color:#8dd1db; text-align:center; font-size:20px;}
  393. .usercenter .app-usercenter .mnav-box .mnav-box-ul li .mnav-box-list .mnav-title{display:inline-block; padding-right:15px;}
  394. .usercenter .app-usercenter .mnav-box .mnav-box-ul li .mnav-box-list > .pull-right{display:inline-block; font-size:22px; line-height:0; color:#888; position:absolute; right:15px; top:12px;}
  395. .usercenter .app-usercenter .mnav-box .mnav-box-ul li .mnav-box-list > .pull-right .btn{background:#56c6d6; color:#FFF; border:0; border-radius:1px; margin-top:-5px; width:100px; height:32px; font-size:17px; white-space:pre-line;}
  396. .usercenter .app-usercenter .mnav-box .list-group-item{background-color:transparent;}
  397. .usercenter .app .modules .app-textNav .inner .list-group-item a{color:#606366;}
  398. /*店铺导航*/
  399. .shopNav .well {border-radius: 0;}
  400. .shopNav .well h3,.publicAd .well h3{margin:0 ; font-size:16px; line-height:30px; font-weight:bold;}
  401. .shopNav .app .app-preview{border-radius:18px; padding-bottom:100px; position:relative;}
  402. .shopNav .app .app-preview:after{content:""; position:absolute; bottom:20px; left:145px; width:60px; height:60px; border:1px solid #ddd; border-radius:100%;}
  403. .shopNav .app .app-content{border-bottom:1px solid #c5c5c5; min-height:430px; position:relative; background:#fff; overflow: hidden;}
  404. .shopNav .app .nav-menu .nav-menu-wx,.shopNav .app .nav-menu .nav-menu-app,.shopNav .app .nav-menu .nav-menu-cart{position:absolute; bottom:0; left:0; right:0; color:#333; text-align:center;}
  405. .shopNav .app .nav-menu a{display:block; height:100%;}
  406. .shopNav .alert{background:#f8f8f8; width:100%;}
  407. .shopNav .modal{z-index:1100;}
  408. .shopNav .action-wrap{ display:none;}
  409. .shopNav .modal .alert div{margin-top:12px;}
  410. .shopNav .modal .wx-example{width:320px; height:50px; background:url('../images/app/shopNavWx.png') 0 0 no-repeat;}
  411. .shopNav .modal .app-example{width:320px; height:50px; background:url('../images/app/shopNavWx.png') 0 -40px no-repeat;}
  412. .shopNav .modal .cart-example{width:360px; height:50px; background:url('../images/app/shopNavCart.png') 0 0 no-repeat;}
  413. .shopNav .modal .path-example{width:100%; height:160px; background:url('../images/app/shopNavPath.png') 0 0 no-repeat;}
  414. .shopNav .modal .sides-example{width:100%; height:160px; background:url('../images/app/shopNavSides.png') center center no-repeat; background-size: auto 125px;}
  415. .shopNav .app-side .shopNav-edit-header{height:44px; line-height:34px; padding-bottom:10px; border-bottom:1px solid #E5E5E5;}
  416. .shopNav .app-side .add-shopNav{margin-top:10px; height:45px; line-height:45px; padding:0 13px; border:1px dashed #ccc; background:#fff; font-size:13px; cursor:pointer;}
  417. .shopNav .app-side .card{margin:10px 0 5px 0 ; padding:15px;}
  418. /*微信导航样式*/
  419. .shopNav .app .nav-menu .nav-menu-wx{background:#FAFAFA; border-top:1px solid #e5e5e5;}
  420. .shopNav .app .nav-menu .nav-menu-wx .nav-home{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:100%; float:left; display:block; text-align:center; line-height:44px;}
  421. .shopNav .app .nav-menu .nav-menu-wx .nav-home i{color:#737373; font-size:30px; margin-top:4.5px;}
  422. .shopNav .app .nav-menu .nav-menu-wx .nav-group i{color:#888; display:inline-block; width:12px; height:12px; line-height:14px; text-align:center; font-size:14px; margin-right:5px;}
  423. .shopNav .app .nav-menu .nav-menu-wx.has-nav-0 .nav-home{width:100%;}
  424. .shopNav .app .nav-menu .nav-menu-wx.has-nav-1 .nav-home,.shopNav .app .nav-menu .nav-menu-wx.has-nav-2 .nav-home,.shopNav .app .nav-menu .nav-menu-wx.has-nav-3 .nav-home{width:16%;}
  425. .shopNav .app .nav-menu .nav-menu-wx .nav-group{width:84%; float:left;}
  426. .shopNav .app .nav-menu .nav-menu-wx .nav-group .nav-group-item{position:relative; float:left; display:block; height:100%; line-height:44px; text-align:center; border-left:1px solid #e5e5e5;}
  427. .shopNav .app .nav-menu .nav-menu-wx .nav-group .nav-group-item a{color:#333; text-shadow: 0 0 2px #f5f5f5; text-align:center; overflow:hidden; text-overflow:ellipsis;}
  428. .shopNav .app .nav-menu .nav-menu-wx .nav-group .nav-group-item.open dl{display: block;}
  429. .shopNav .app .nav-menu .nav-menu-wx.has-nav-1 .nav-group-item{width:100%;}
  430. .shopNav .app .nav-menu .nav-menu-wx.has-nav-2 .nav-group-item{width:50%;}
  431. .shopNav .app .nav-menu .nav-menu-wx.has-nav-3 .nav-group-item{width:33.3%;}
  432. .shopNav .app .nav-menu .nav-menu-wx .nav-group .dropup{position:relative;}
  433. .shopNav .app .nav-menu .nav-menu-wx dl{position:absolute; z-index:220; bottom:40px; left:50%; width:85px; margin-left:-45px; min-height:40px; background:#fff; border:1px solid #afaeaf; border-radius:5px; -webkit-box-shadow:inset 0 0 3px #fff;}
  434. .shopNav .app .nav-menu .nav-menu-wx dl:before, .shopNav .app .nav-menu .nav-menu-wx dl:after{content:""; display:inline-block; position:absolute; z-index:240; bottom:0;left:50%; width:0; height:0; border:8px solid red; border-color:#afaeaf transparent transparent transparent; margin-left:-8px; margin-bottom:-16px;}
  435. .shopNav .app .nav-menu .nav-menu-wx dl:after{z-index:241; border-color:#fff transparent transparent transparent; margin-bottom:-15px;}
  436. .shopNav .app .nav-menu .nav-menu-wx dl dd+dd{border-top:1px solid #ddd;}
  437. .shopNav .app .nav-menu .nav-menu-wx dl dd{margin:0; line-height:40px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  438. .shopNav .app .nav-menu .nav-menu-wx dl dd:last-of-type{background:none;}
  439. .shopNav .app .nav-menu .nav-menu-wx dl dd a{display:block; color:#4f4d4f; text-shadow:0 0 1px #fff;}
  440. .shopNav .app-side .app-shopNav-edit .first-nav h3{font-size:14px; font-weight:bold; margin-bottom:10px;}
  441. .shopNav .app-side .app-shopNav-edit .second-nav{margin-left:20px;}
  442. .shopNav .app-side .app-shopNav-edit .second-nav h4{font-size:12px; font-weight:bold;}
  443. .shopNav .app-side .app-shopNav-edit .second-nav .alert{ position:relative;}
  444. .shopNav .app-side .app-shopNav-edit .del{text-align:right; position:absolute; top:-10px; right:-10px; display:none;}
  445. .shopNav .app-side .app-shopNav-edit .del a{display:inline-block; width:20px; height:20px; text-align:center; line-height:20px;color:#fff; background:rgba(0,0,0,.3); border-radius:50%;}
  446. .shopNav .app-side .app-shopNav-edit .del a:hover{background:#000;}
  447. .shopNav .app-side .app-shopNav-edit .second-nav .alert:hover .del{display:block;}
  448. /*app导航样式*/
  449. .shopNav .app .nav-menu .nav-menu-app{width:100%; height:50px;}
  450. .shopNav .app .nav-menu .nav-menu-app .nav-group{width:100%; height:100%;}
  451. .shopNav .app .nav-menu .nav-menu-app .nav-group .nav-group-item{float:left; display:block; height:100%;}
  452. .shopNav .app .nav-menu .nav-menu-app .nav-group .nav-group-item a{display:block; height:30px; width:100%; text-align:center; background-size:contain; background-position:center center; background-repeat:no-repeat; color:#fff; }
  453. .shopNav .app .nav-menu .nav-menu-app .nav-group .nav-group-item a i{display:block; height:30px; padding-top:3px; line-height:30px; width:100%; text-align:center; font-size:25px; color:#fff;}
  454. .shopNav .app .nav-menu .nav-menu-app .nav-group .nav-group-item span{display:block; height:20px; width:100%; line-height:20px; overflow:hidden; font-size:12px; color:#fff;}
  455. .shopNav .app .nav-menu .nav-menu-app.has-nav-0 .nav-group .nav-group-item{width:0%;}
  456. .shopNav .app .nav-menu .nav-menu-app.has-nav-1 .nav-group .nav-group-item{width:100%;}
  457. .shopNav .app .nav-menu .nav-menu-app.has-nav-2 .nav-group .nav-group-item{width:50%;}
  458. .shopNav .app .nav-menu .nav-menu-app.has-nav-3 .nav-group .nav-group-item{width:33.33%;}
  459. .shopNav .app .nav-menu .nav-menu-app.has-nav-4 .nav-group .nav-group-item{width:25%;}
  460. .shopNav .app .nav-menu .nav-menu-app.has-nav-5 .nav-group .nav-group-item{width:20%;}
  461. .shopNav .app-side form{margin-top:15px;}
  462. .shopNav .app-side .app-shopNav-edit .nav-img-group{margin-bottom:10px; border-bottom:1px solid #e5e5e5;}
  463. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-box{position:relative; width:64px; margin-bottom:10px;}
  464. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-box .nav-img{height:50px; text-align:center; background-size:contain; background-position:50% 50%; background-repeat:no-repeat;}
  465. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-box .nav-img i{display:block; width:100%; height:100%; text-align:center; line-height:50px; font-size:30px; color:#fff;}
  466. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-box a{display:block; height:15px; color:#fff; line-height:17px; text-align:center; background-color:#797979;}
  467. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-highlight .nav-img-box:hover .del{display:block;}
  468. .shopNav .app-side .app-shopNav-edit .nav-img-group .nav-img-highlight{padding-left:15px; margin-left:15px; border-left:1px solid #e5e5e5;}
  469. /*购物车导航*/
  470. .shopNav .app .nav-menu .nav-menu-cart{width:100%; padding:0 10px; height:40px; text-align:center;}
  471. .shopNav .app .nav-menu .nav-menu-cart.has-nav-2 .nav-group-item,.shopNav .app .nav-menu .nav-menu-cart.has-nav-1 .nav-group-item,.shopNav .app .nav-menu .nav-menu-cart.has-nav-0 .nav-group-item{width:34%; height:40px;}
  472. .shopNav .app .nav-menu .nav-menu-cart.has-nav-2 .nav-home,.shopNav .app .nav-menu .nav-menu-cart.has-nav-1 .nav-home,.shopNav .app .nav-menu .nav-menu-cart.has-nav-0 .nav-home{width:32%;}
  473. .shopNav .app .nav-menu .nav-menu-cart.has-nav-4 .nav-group-item,.shopNav .app .nav-menu .nav-menu-cart.has-nav-3 .nav-group-item{width:17%;}
  474. .shopNav .app .nav-menu .nav-menu-cart.has-nav-4 .nav-group-item.nav-home,.shopNav .app .nav-menu .nav-menu-cart.has-nav-3 .nav-group-item.nav-home{width:32%;}
  475. .shopNav .app .nav-menu .nav-menu-cart .nav-group-item{height:40px;float:left;display:block;}
  476. .shopNav .app .nav-menu .nav-menu-cart .nav-group-item a{display:block; height:100%; width:100%; text-align:center; background-size:contain; background-position:center center; background-repeat:no-repeat;}
  477. .shopNav .app .nav-menu .nav-menu-cart .nav-group-item a i{display:block; height:100%; width:100%; text-align:center; line-height:40px; color:#fff; font-size:20px;}
  478. .shopNav .app .nav-menu .nav-menu-cart .nav-home a{background-color:#f90;height:40px;width:40px;margin:0 auto;margin-top:-10px;border-radius:100%;border:5px solid #292929;}
  479. .shopNav .app .nav-menu .nav-menu-cart .nav-home a i{line-height:30px;}
  480. /*path展开形式导航*/
  481. .shopNav .app .nav-menu .nav-menu-path{position:absolute; left:10px; bottom:10px;}
  482. .shopNav .app .nav-menu .nav-menu-path .nav-group-item a{display:block; height:100%; width:100%; border-radius:100%; overflow:hidden; background-color:#E23636; background-size:contain; background-position:center center; background-repeat:no-repeat; text-align:center;}
  483. .shopNav .app .nav-menu .nav-menu-path .nav-group-item a i{display:block; height:100%; width:100%; text-align:center; color:#fff; font-size:30px; line-height:45px; }
  484. .shopNav .app .nav-menu .nav-menu-path .nav-home{width:50px; height:50px; z-index:100; -webkit-transition: 0.2s all ease-in-out; -moz-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; position:absolute; left:0; bottom:0;}
  485. .shopNav .app .nav-menu .nav-menu-path .nav-home.on{transform:rotateZ(135deg); -webkit-transform:rotateZ(135deg); -moz-transform:rotateZ(135deg); -o-transform:rotateZ(135deg); -ms-transform:rotateZ(135deg);}
  486. .shopNav .app .nav-menu .nav-menu-path .nav-group .nav-group-item{width:45px; height:45px; border-radius:100%; position:absolute; left:2.5px; bottom:2.5px; -webkit-transition: -webkit-transform 200ms;-moz-transition: -webkit-transform 200ms;}
  487. .shopNav .app .nav-menu .nav-menu-path .nav-group .nav-group-item a{width:45px; height:45px; border-radius:45px;}
  488. .shopNav .app .nav-menu .nav-menu-path.has-nav-1 .nav-group .nav-group-item.on{transform: translate(50px, -50px) rotate(720deg); -webkit-transform: translate(50px, -50px) rotate(720deg); -moz-transform: translate(50px, -50px) rotate(720deg);}
  489. .shopNav .app .nav-menu .nav-menu-path.has-nav-2 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(3px, -60px) rotate(720deg); -webkit-transform: translate(3px, -60px) rotate(720deg); -moz-transform: translate(3px, -60px) rotate(720deg);}
  490. .shopNav .app .nav-menu .nav-menu-path.has-nav-2 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(60px, -3px) rotate(720deg); -webkit-transform: translate(60px, -3px) rotate(720deg); -moz-transform: translate(60px, -3px) rotate(720deg);}
  491. .shopNav .app .nav-menu .nav-menu-path.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(3px, -100px) rotate(720deg); -webkit-transform: translate(3px, -100px) rotate(720deg); -moz-transform: translate(3px, -100px) rotate(720deg);}
  492. .shopNav .app .nav-menu .nav-menu-path.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(72px, -72px) rotate(720deg); -webkit-transform: translate(72px, -72px) rotate(720deg); -moz-transform: translate(72px, -72px) rotate(720deg);}
  493. .shopNav .app .nav-menu .nav-menu-path.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(3){transform: translate(100px, -3px) rotate(720deg); -webkit-transform: translate(100px, -3px) rotate(720deg); -moz-transform: translate(100px, -3px) rotate(720deg);}
  494. .shopNav .app .nav-menu .nav-menu-path.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(3px, -136px) rotate(720deg); -webkit-transform: translate(3px, -136px) rotate(720deg); -moz-transform: translate(3px, -136px) rotate(720deg);}
  495. .shopNav .app .nav-menu .nav-menu-path.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(119px, -71px) rotate(720deg); -webkit-transform: translate(119px, -71px) rotate(720deg); -moz-transform: translate(119px, -71px) rotate(720deg);}
  496. .shopNav .app .nav-menu .nav-menu-path.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(3){transform: translate(71px, -119px) rotate(720deg); -webkit-transform: translate(71px, -119px) rotate(720deg); -moz-transform: translate(71px, -119px) rotate(720deg);}
  497. .shopNav .app .nav-menu .nav-menu-path.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(4){transform: translate(136px, -3px) rotate(720deg); -webkit-transform: translate(136px, -3px) rotate(720deg); -moz-transform: translate(136px, -3px) rotate(720deg);}
  498. /*两侧展开形式导航*/
  499. .shopNav .app .nav-menu .nav-menu-sides{position:absolute; left:50%; bottom:10px;}
  500. .shopNav .app .nav-menu .nav-menu-sides .main-nav{position:relative; margin-left:-50%; padding:8px 9px 0 9px; width:150px; height:50px; background:url(../images/app/nav5back.png) center center no-repeat; background-size:150px 50px;}
  501. .shopNav .app .nav-menu .nav-menu-sides .main-nav>div{width:43px; height:41px; overflow:hidden; border-radius:100%;}
  502. .shopNav .app .nav-menu .nav-menu-sides .nav-group-item a{display:block; height:100%; width:100%; border-radius:100%; text-align:center; background-color:#E23636; background-size:contain; background-position:center center; background-repeat:no-repeat; }
  503. .shopNav .app .nav-menu .nav-menu-sides .nav-group-item a i{display:block; height:100%; width:100%; border-radius:100%; font-size:25px; line-height:41px; color:#fff; text-align:center;}
  504. .shopNav .app .nav-menu .nav-menu-sides .nav-home{width:40px; height:40px; border-radius:100%; position:relative; left:1px; bottom:-6px; float:left; margin-top:-10px; -webkit-transition: 0.2s all ease-in-out; -moz-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out;}
  505. .shopNav .app .nav-menu .nav-menu-sides .nav-home.on{transform:rotateZ(135deg); -webkit-transform:rotateZ(135deg); -moz-transform:rotateZ(135deg); -o-transform:rotateZ(135deg); -ms-transform:rotateZ(135deg);}
  506. .shopNav .app .nav-menu .nav-menu-sides .nav-group .nav-group-item{width:45px; height:45px; border-radius:100%; position:absolute; left:-22px; bottom:3px; -webkit-transition: -webkit-transform 200ms;-moz-transition: -webkit-transform 200ms;}
  507. .shopNav .app .nav-menu .nav-menu-sides .nav-group .nav-group-item a{width:41px; height:41px; border-radius:100%; overflow:hidden;}
  508. .shopNav .app .nav-menu .nav-menu-sides.has-nav-1 .nav-group .nav-group-item.on{transform: translate(0px, -60px) rotate(720deg); -webkit-transform: translate(0px, -60px) rotate(720deg); -moz-transform: translate(0px, -60px) rotate(720deg);}
  509. .shopNav .app .nav-menu .nav-menu-sides.has-nav-2 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(-36px, -47px) rotate(720deg); -webkit-transform: translate(-36px, -47px) rotate(720deg); -moz-transform: translate(-36px, -47px) rotate(720deg);}
  510. .shopNav .app .nav-menu .nav-menu-sides.has-nav-2 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(36px, -47px) rotate(720deg); -webkit-transform: translate(36px, -47px) rotate(720deg); -moz-transform: translate(36px, -47px) rotate(720deg);}
  511. .shopNav .app .nav-menu .nav-menu-sides.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(-54px, -47px) rotate(720deg); -webkit-transform: translate(-54px, -47px) rotate(720deg); -moz-transform: translate(-54px, -47px) rotate(720deg);}
  512. .shopNav .app .nav-menu .nav-menu-sides.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(0px, -70px) rotate(720deg); -webkit-transform: translate(0px, -70px) rotate(720deg); -moz-transform: translate(0px, -70px) rotate(720deg);}
  513. .shopNav .app .nav-menu .nav-menu-sides.has-nav-3 .nav-group .nav-group-item.on:nth-of-type(3){transform: translate(54px, -47px) rotate(720deg); -webkit-transform: translate(54px, -47px) rotate(720deg); -moz-transform: translate(54px, -47px) rotate(720deg);}
  514. .shopNav .app .nav-menu .nav-menu-sides.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(1){transform: translate(-57px, -47px) rotate(720deg); -webkit-transform: translate(-57px, -47px) rotate(720deg); -moz-transform: translate(-57px, -47px) rotate(720deg);}
  515. .shopNav .app .nav-menu .nav-menu-sides.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(2){transform: translate(-26px, -94px) rotate(720deg); -webkit-transform: translate(-26px, -94px) rotate(720deg); -moz-transform: translate(-26px, -94px) rotate(720deg);}
  516. .shopNav .app .nav-menu .nav-menu-sides.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(3){transform: translate(26px, -94px) rotate(720deg); -webkit-transform: translate(26px, -94px) rotate(720deg); -moz-transform: translate(26px, -94px) rotate(720deg);}
  517. .shopNav .app .nav-menu .nav-menu-sides.has-nav-4 .nav-group .nav-group-item.on:nth-of-type(4){transform: translate(57px, -47px) rotate(720deg); -webkit-transform: translate(57px, -47px) rotate(720deg); -moz-transform: translate(57px, -47px) rotate(720deg);}
  518. /*公共广告*/
  519. /*底部操作按钮*/
  520. .app .shop-preview{position:fixed; padding:0 15px; bottom:0; right:0; z-index:100;}
  521. .app .shop-preview div{background:rgba(255,254,220,0.8);}
  522. /*会员卡*/
  523. .usercard .system-card{background: #efeff4;}
  524. .usercard .system-card .card{position:relative; width:100%; overflow:hidden; padding:15px;}
  525. .usercard .system-card .card .card-panel{position:relative; height: 160px;}
  526. .usercard .system-card .card-bg{width:100%; height: 100%;}
  527. .usercard .system-card .card-logo{position:absolute; top:0; left:22px; width: 49px; height: 52px; text-align: center;}
  528. .usercard .system-card .card-logo img{max-width:80%; height:80%; margin-top: 10%;}
  529. .usercard .system-card .card-info{position: absolute; top: 60px; left: 0; width: 100%; color: #fff;}
  530. .usercard .system-card .card-info .vip{font-size: 48px; line-height: 48px;}
  531. .usercard .system-card .card-info .card-rank{font-size: 22px;}
  532. .usercard .system-card .card-info .card-no{margin: 15px 22px 0 0;}
  533. .usercard .system-card .btn-manage{padding: 15px 0; background: #fff;}
  534. .usercard .system-card .btn-manage a{display:inline-block; width:50%; float:left; color:#333; text-align:center; border-right:1px solid #ddd; height: 40px; line-height: 40px;}
  535. .usercard .system-card .btn-manage a.payment{border:0;}
  536. .usercard .system-card .btn-manage img{max-height: 100%; margin-right: 10px;}
  537. .usercard .system-card .list-group{margin-top: 15px;}
  538. .usercard .system-card .list-group-item{padding: 10px 15px; border-right: 0; border-left: 0;}
  539. .usercard .system-card .list-group-item:first-child,.usercard .system-card .list-group-item:last-child{border-radius: 0;}
  540. .usercard .system-card .list-group-item .pull-right{color: #999;}
  541. .usercard .system-card .list-group-item .fa{display: inline-block; margin-left: 10px;}
  542. .usercard .system-card .info{position:absolute; right:20px; bottom:30px; text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);}
  543. .usercard .system-card .info span.money{display:inline-block; margin-right:10px;}
  544. .usercard .system-card .card .head-nav{width:100%; height:50px; line-height:20px; padding-top:7px; background:rgba(0,0,0,0.4); position:absolute; z-index:10; bottom:0; left:0;}
  545. .usercard .system-card .card .head-nav .head-nav-list{display:inline-block; float:left; text-decoration:none; color:#FFF; width:25%; text-align:center; font-size:16px; background:-webkit-gradient(linear, 0 0, 0 100, from(rgba(255,255,255,0.5)), to(rgba(255,255,255,0.5)) ) no-repeat left center; -webkit-background-size:1px 75%;}
  546. .usercard .system-card .card .head-nav .head-nav-list.has-nav-2{width:50%}
  547. .usercard .system-card .card .head-nav .head-nav-list.has-nav-3{width:33.3333333%}
  548. .usercard .system-card .card .head-nav .head-nav-list.has-nav-4{width:25%}
  549. .usercard .system-card .card .head-nav .head-nav-list:first-child{background:none;}
  550. .usercard .system-card .card .head-nav .head-nav-list > span{font-weight:bold; display:block; font-size:14px;}
  551. .usercard .system-card .nav-container ul,.nav-container ul li{padding:0; margin:0;}
  552. .usercard .system-card .nav-container{color:#606366; background:transparent url('../images/app/home-bg.jpg') no-repeat; background-size:100% 100%;}
  553. .usercard .system-card .nav-container ul{border-top:10px solid #e4e9e8; list-style:none; background:transparent -webkit-gradient(linear,0 0, 0 10%,from(rgba(90,197,212,1)), to(rgba(90,197,212,1))) no-repeat center top; -webkit-background-size:100% 2px; padding-top:2px;}
  554. .usercard .system-card .nav-container.no-bordertop ul{border-top:none;}
  555. .usercard .system-card .nav-container ul li{ border-bottom:1px solid #ddd; position:relative;}
  556. .usercard .system-card .nav-container ul li .nav-container-list{color:#606366; font-size:15px; height:47px; line-height:23px; padding: 12px 15px; overflow:hidden; text-decoration:none; -webkit-box-sizing:border-box; display:block;}
  557. .usercard .system-card .nav-container ul li .nav-container-list .nav-title{display:inline-block; width:50%; overflow:hidden; white-space:nowrap; word-break:break-all; text-overflow:ellipsis; line-height:22px;}
  558. .usercard .system-card .nav-container ul li .nav-container-list .nav-title i{width:25px; margin-right:10px; color:#8dd1db; text-align:center; font-size:20px;}
  559. .usercard .system-card .nav-container ul li .nav-container-list .pull-right{display:inline-block; width:50%; overflow:hidden; white-space:nowrap; word-break:break-all; text-overflow:ellipsis; text-align:right; height:23px; line-height:23px;}
  560. .usercard .system-card .nav-container ul li .nav-container-list .pull-right i.fa{display:inline-block; font-size:22px; color:#888;}
  561. .usercard .system-card .nav-container .collapse-con{padding:10px; background-color:#fff; display:block; border-top:1px solid #ddd;}
  562. .usercard .system-card .nav-container .collapse-con.padding-b-0{padding-bottom:0;}
  563. .usercard .system-card .nav-container .collapse-con.off{display:block;}
  564. .usercard .system-card .nav-container .collapse-con table{margin:0;}
  565. .usercard .system-card .nav-container .collapse-con table th,.usercard .system-card .nav-container .collapse-con table td{text-align:center;}
  566. .usercard .system-card .nav-container .collapse-con .btn-recharge{width:48%; margin-bottom:12px;}
  567. .usercard .system-card .nav-container .collapse-con .btn-recharge:nth-of-type(odd){margin-right:4%;}
  568. /*个性化菜单样式*/
  569. .conditionMenu .well h3,.publicAd .well h3{margin:0 ; font-size:16px; line-height:30px; font-weight:bold;}
  570. .conditionMenu .app .app-preview{border-radius:18px; padding-bottom:100px; position:relative;}
  571. .conditionMenu .app .app-preview:after{content:""; position:absolute; bottom:20px; left:145px; width:60px; height:60px; border:1px solid #ddd; border-radius:100%;}
  572. .conditionMenu .app .app-content{border-bottom:1px solid #c5c5c5; min-height:380px; position:relative; background:#fff;}
  573. .conditionMenu .alert{background:#f8f8f8; width:100%; margin-bottom:0;}
  574. .conditionMenu .app .nav-menu .nav-menu-wx,.conditionMenu .app .nav-menu .nav-menu-app,.conditionMenu .app .nav-menu .nav-menu-cart{position:absolute; bottom:0; left:0; right:0; color:#333; text-align:center;}
  575. .conditionMenu .app .nav-menu a{display:block; height:100%;}
  576. .conditionMenu .app .nav-menu .nav-menu-wx{background:#FAFAFA; border-top:1px solid #e5e5e5;}
  577. .conditionMenu .app .nav-menu .nav-menu-wx .nav-home{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:100%; float:left; display:block; text-align:center; line-height:44px;}
  578. .conditionMenu .app .nav-menu .nav-menu-wx .nav-home i{color:#737373; font-size:30px; margin-top:4.5px;}
  579. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group i{color:#888; display:inline-block; width:12px; height:12px; line-height:14px; text-align:center; font-size:14px; margin-right:5px;}
  580. .conditionMenu .app .nav-menu .nav-menu-wx.has-nav-0 .nav-home{width:100%;}
  581. .conditionMenu .app .nav-menu .nav-menu-wx.has-nav-1 .nav-home,.conditionMenu .app .nav-menu .nav-menu-wx.has-nav-2 .nav-home,.conditionMenu .app .nav-menu .nav-menu-wx.has-nav-3 .nav-home{width:16%;}
  582. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group{width:100%; float:left;}
  583. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group .nav-group-item{position:relative; float:left; display:block; height:100%; line-height:44px; text-align:center; border-left:1px solid #e5e5e5;}
  584. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group .nav-group-item.active{border:1px solid green;}
  585. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group .nav-group-item a{color:#333; text-shadow: 0 0 2px #f5f5f5; text-align:center; overflow:hidden; text-overflow:ellipsis;}
  586. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group .nav-group-item.open dl{display: block;}
  587. .conditionMenu .app .nav-menu .nav-menu-wx.has-nav-1 .nav-group-item{width:100%;}
  588. .conditionMenu .app .nav-menu .nav-menu-wx.has-nav-2 .nav-group-item{width:50%;}
  589. .conditionMenu .app .nav-menu .nav-menu-wx.has-nav-3 .nav-group-item{width:33.3%;}
  590. .conditionMenu .app .nav-menu .nav-menu-wx .nav-group .dropup{position:relative;}
  591. .conditionMenu .app .nav-menu .nav-menu-wx dl{display:block; position:absolute; z-index:220; bottom:40px; left:50%; width:85px; margin-left:-45px; min-height:40px; background:#fff; border:1px solid #afaeaf; border-radius:5px; -webkit-box-shadow:inset 0 0 3px #fff;}
  592. .conditionMenu .app .nav-menu .nav-menu-wx dl:before, .conditionMenu .app .nav-menu .nav-menu-wx dl:after{content:""; display:inline-block; position:absolute; z-index:240; bottom:0;left:50%; width:0; height:0; border:8px solid red; border-color:#afaeaf transparent transparent transparent; margin-left:-8px; margin-bottom:-16px;}
  593. .conditionMenu .app .nav-menu .nav-menu-wx dl:after{z-index:241; border-color:#fff transparent transparent transparent; margin-bottom:-15px;}
  594. .conditionMenu .app .nav-menu .nav-menu-wx dl dd+dd{border-top:1px solid #ddd;}
  595. .conditionMenu .app .nav-menu .nav-menu-wx dl dd{margin:0; line-height:40px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  596. .conditionMenu .app .nav-menu .nav-menu-wx dl dd:last-of-type{background:none;}
  597. .conditionMenu .app .nav-menu .nav-menu-wx dl dd.active{border:1px solid green;}
  598. .conditionMenu .app .nav-menu .nav-menu-wx dl dd a{display:block; color:#4f4d4f; text-shadow:0 0 1px #fff;}
  599. .conditionMenu .app-side .card{margin:10px 0 5px 0 ; padding:15px;}
  600. .conditionMenu .app-side .app-conditionMenu-edit .first-nav h3{font-size:14px; font-weight:bold; margin-bottom:10px;}
  601. .conditionMenu .app-side .app-conditionMenu-edit .second-nav{margin-left:20px;}
  602. .conditionMenu .app-side .app-conditionMenu-edit .second-nav h4{font-size:12px; font-weight:bold;}
  603. .conditionMenu .app-side .app-conditionMenu-edit .second-nav .alert{ position:relative;}
  604. .conditionMenu .app-side .app-conditionMenu-edit .del{text-align:right; position:absolute; top:-10px; right:-10px; display:none;}
  605. .conditionMenu .app-side .app-conditionMenu-edit .del a{display:inline-block; width:20px; height:20px; text-align:center; line-height:20px;color:#fff; background:rgba(0,0,0,.3); border-radius:50%;}
  606. .conditionMenu .app-side .app-conditionMenu-edit .del a:hover{background:#000;}
  607. .conditionMenu .app-side .app-conditionMenu-edit .second-nav .alert:hover .del{display:block;}
  608. .conditionMenu .menu-action .radio-inline{width:32.5%; padding:5px 0 5px 20px; margin-left:0;}
  609. .conditionMenu .fans-group .radio-inline{width:23%; padding:5px 0 5px 20px; margin-left:0;}
  610. /*专题页基础*/
  611. .modules div[ng-controller$='Ctrl'] > div[style^='transform']:hover{border:1px solid #08A1EF;}
  612. .modules div[ng-controller='HeaderCtrl']:hover{border:0;}
  613. #design .app .app-content{margin-top:64px;}
  614. #design .app .app-content .modules h1{margin-top:-64px;}
  615. #design .app .app-region,#design .app .app-preview{margin-left:105px;}
  616. #design .app .app-header{position:relative;width: 100%;margin-left:105px;}
  617. #design .app .app-header .app-header-content{width:350px;border: 1px solid #e5e5e5;border-radius: 18px 18px 0 0;height:60px; background:url('../images/app/iphone_head.png') center center no-repeat;}
  618. #design .app .app-preview{overflow-x: hidden;overflow-y: auto;height:654px;}
  619. .app .element-box{width: 100%; height: 100%; overflow: hidden;}
  620. .app .element,.app .element-link{width: 100%; height: 100%; color: inherit; min-width: 1px; min-height: 1px;}
  621. .app .app-footer{position:relative;width:100%;}
  622. #design .app .app-plength{width:350px;margin-left:105px;margin-top:-100px;height:35px}
  623. .app .app-plength .app-plength-change span{font-size:24px;}
  624. .app .app-plength .app-plength-info div{line-height:48px;text-align:center;}
  625. .app .app-plength .app-plength-info div span{font-size:16px;font-weight:700;}
  626. /*缩放框*/
  627. .app .bar{position: absolute; z-index: 998; }
  628. .app .bar-line{width: 1px; height: 18px; top: -18px; left: 50%; background-color: #44cb83;}
  629. .app .bar-radius{background-color: #fff; border: 1px solid #08a1ef; border-radius: 6px;}
  630. .app .bar-rotate{left: 50%; top: -30px; margin-left: -6px; background-color: #44cb83; border: none; cursor: url(../images/app/mouserotate.png) 5 5,default;}
  631. .app .radius-s{width: 12px; height: 12px;}
  632. .app .bar-n{width: 100%; height: 5px; top: 0; cursor: n-resize; background: url(../images/app/bar-1px.png) repeat-x;}
  633. .app .bar-n div{ position: absolute; left: 50%; top: -6px; margin-left: -6px;}
  634. .app .bar-s{width: 100%; height: 5px; bottom: 0; cursor: s-resize; background: url(../images/app/bar-1px.png) repeat-x bottom;}
  635. .app .bar-s div{ position: absolute; left: 50%; bottom: -6px; margin-left: -6px;}
  636. .app .bar-e{ width: 6px; height: 100%; top: 0; right: 0; cursor: e-resize; background: url(../images/app/bar-1px.png) repeat-y right;}
  637. .app .bar-e div{position: absolute; top: 50%; right: -6px; margin-top: -6px;}
  638. .app .bar-w{width: 6px; height: 100%; top: 0; cursor: w-resize; background: url(../images/app/bar-1px.png) repeat-y;}
  639. .app .bar-w div{position: absolute; top: 50%; left: -6px; margin-top: -6px;}
  640. .app .bar-nw{top: -6px; left: -6px; cursor: nw-resize;}
  641. .app .bar-se{bottom: -6px; right: -6px; cursor: se-resize;}
  642. .app .bar-sw{bottom: -6px; left: -6px; cursor: sw-resize;}
  643. .app .bar-ne{top: -6px; right: -6px; cursor: ne-resize;}
  644. /*文字编辑器*/
  645. .btn-toolbar{position: absolute; left: 5%; top: 50px; z-index: 1000; background-color: #eee; box-shadow: 0 3px 7px rgba(0,0,0,.3); height: 38px; padding: 4px 5px; border: 1px solid #ddd;}
  646. .btn-toolbar .tooltip{min-width: 50px; white-space: nowrap;}
  647. .btn-toolbar .btn-group{min-width:28px; height: 28px; line-height: 28px; padding:0 6px; position: relative; text-align: center; background-color: #fff; display: inline-block; vertical-align: middle; margin:0 5px 0 0; border: 1px solid #ddd;}
  648. .btn-toolbar .btn-group a{color: #828d98;}
  649. .btn-toolbar .setting-color{display: inline-block; width: 20px; height: 20px; position: relative; top: -2px; text-align: center; line-height: 18px;border-bottom: 4px solid #828d98;}
  650. .btn-toolbar .setting-bg-color{display: inline-block; width: 20px; height: 20px; background: url(../images/app/toobarbg.svg) no-repeat center center; background-size: contain; margin-top: 3px;}
  651. /*文字*/
  652. .app .app-onlyText{z-index: 0; color: #676767; line-height: 1; list-style: none !important; margin: 0; padding: 0; background: none; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
  653. .app .app-onlyText .element-box{line-height: 38px; position: relative;}
  654. .app .app-onlyText .element{padding:0 2px;}
  655. .app .app-text-edit .icons .icon-container{width: 12.5%; float: left; margin-bottom: 10px; text-align: center;}
  656. .app .app-text-edit .icons .icon{width: 48px; height: 48px; margin: auto; background-image: url(../images/app/animation-icons-gray.png); background-size: 228px 348px;}
  657. .app .app-text-edit .icons .icon-container{cursor: pointer;}
  658. .app .app-text-edit .icon-container:hover{background: #E1E1E1}
  659. .app .app-text-edit .select .icon,.app .app-text-edit .icon-container:hover .icon{background-image: url(../images/app/animation-icons.png);}
  660. .app .app-text-edit .icons .no-effect{background-position: 0px 0px;}
  661. .app .app-text-edit .icons .fade-in-normal{background-position: -60px 0px;}
  662. .app .app-text-edit .icons .rotate-in-down-left{background-position: -120px 0px;}
  663. .app .app-text-edit .icons .rotate-in-down-right{background-position: -180px 0px;}
  664. .app .app-text-edit .icons .zoom-in{background-position: 0px -60px;}
  665. .app .app-text-edit .icons .zoom-in-down{background-position: -60px -60px;}
  666. .app .app-text-edit .icons .fade-in{background-position: -120px -60px;}
  667. .app .app-text-edit .icons .expand-open{background-position: -180px -60px;}
  668. .app .app-text-edit .icons .fade-in-left{background-position: 0px -120px;}
  669. .app .app-text-edit .icons .fade-in-right{background-position: -60px -120px;}
  670. .app .app-text-edit .icons .fade-in-up{background-position: -120px -120px;}
  671. .app .app-text-edit .icons .fade-in-down{background-position: -180px -120px;}
  672. .app .app-text-edit .icons .rotate-in{background-position: 0px -180px;}
  673. .app .app-text-edit .icons .flip-in-y{background-position: -60px -180px;}
  674. .app .app-text-edit .icons .flip-in-x{background-position: -120px -180px;}
  675. .app .app-text-edit .icons .light-speed-in{background-position: -180px -180px;}
  676. .app .app-text-edit .icons .slide-right{background-position: 0px -240px;}
  677. .app .app-text-edit .icons .slide-left{background-position: -60px -240px;}
  678. .app .app-text-edit .icons .slide-up{background-position: -120px -240px;}
  679. .app .app-text-edit .icons .slide-down{background-position: -180px -240px;}
  680. .app .app-text-edit .icons .stretch-right{background-position: 0px -300px;}
  681. .app .app-text-edit .icons .stretch-left{background-position: -60px -300px;}
  682. .app .app-text-edit .icons .pull-up{background-position: -120px -300px;}
  683. .app .app-text-edit .icons .pull-down{background-position: -180px -300px;}
  684. /*形状*/
  685. .app-shape-edit .modal-header{padding:17px 20px;background-color:#f7f7f7;border-top-left-radius: 6px;border-top-right-radius: 6px;}
  686. .app-shape-edit .dialog-content{background-color: #f7f7f7;border-radius: 6px;padding-left: 0;margin-top: 0!important;}
  687. .app-shape-edit .dialog-content .cate-list{position: relative;padding-bottom: 76px;background-color: #fff;border-radius: 6px;float:left;width:690px;}
  688. .app-shape-edit .dialog-content .cate-list .tab-head{position:relative;margin:0 20px;}
  689. .app-shape-edit .dialog-content .cate-list .img_list{width:100%;}
  690. .app-shape-edit .dialog-content .cate-list .category_list{border-bottom:1px solid #ccc;padding:6px 0;}
  691. .app-shape-edit .dialog-content .cate-list .category_list ul li{height:36px;line-height:36px;font-size: 12px;margin-right: 20px;}
  692. .app-shape-edit .dialog-content .cate-list .cat_two_list{height:27px;}
  693. .app-shape-edit .dialog-content .cate-list .category_item{float:left;cursor:pointer;text-align:center;font-weight:300;}
  694. .app-shape-edit .dialog-content .cate-list .cat_two_item{float: left;font-size: 12px;margin-right: 13px;margin-top: 10px;cursor:pointer;font-weight:300;}
  695. .app-shape-edit .dialog-content .cate-list .img_list .active{color:#08a1ef;}
  696. .app-shape-edit .dialog-content .cate-list .photo_list{padding: 15px 7px 0 20px;}
  697. .app-shape-edit .dialog-content .cate-list .photo_list .img-box{height:380px;overflow:hidden;}
  698. .app-shape-edit .dialog-content .cate-list .photo_list li{curor:pointer;float:left;margin: 0 5px 16px 0;background-color: #e6ebed;}
  699. .app-shape-edit .dialog-content .cate-title{float:left;width:200px;}
  700. .app-shape-edit .dialog-content .cate-title .tabs-left li.active{background-color:#fff;border-bottom:1px solid #ccd5db;}
  701. .app-shape-edit .dialog-content .cate-title .tabs-left li a{height: 50px;line-height: 50px;display: block;padding: 0 20px;border-radius: 0;width: 200px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;background: 0 0;}
  702. .app-shape-edit .dialog-content .bg-pagination{position: absolute;bottom: 0;left: 200px;right: 0;border: none!important;padding:20px;text-align:right;}
  703. .app-shape-edit .dialog-content .bg-pagination .fl{float:left;}
  704. .app-shape-edit .dialog-content .bg-pagination .mr20{margin-right:20px;}
  705. .app-shape-edit .dialog-content .bg-pagination .current_page{height:30px;float:left;line-height:30px;margin-left:10px;}
  706. .app-shape-edit .dialog-content .bg-pagination .current_page {display: block;line-height: 36px;}
  707. .app-shape-edit .dialog-content .bg-pagination .current_page input{height: 36px;width: 36px;line-height: 36px;text-align: center;background-color: #f7f7f7;float: left;border-radius: 3px;margin: 0 5px;}
  708. .app-shape-edit .dialog-content .bg-pagination .current_page span{display: block;line-height: 36px;}
  709. .app-shape-edit .dialog-content .bg-pagination .current_page .go{display: block;float: left;border: 1px solid #ccd5db;background-color: #fff;border-radius: 3px;width: 36px;font-size: 12px;text-align: center;height: 36px;line-height: 36px;margin-left: 5px;}
  710. .app-shape-edit .action{color:#a3afb7;font-size:12px;padding-left:20px;}
  711. /*链接,拨号*/
  712. .app-pureLink-basic,.app-dialphone{z-index: 0; line-height: 1;}
  713. .app-pureLink-edit .nav-pills li:hover a,.app-dial-edit .nav-pills li:hover a{background: #eee;}
  714. .app-pureLink-edit .nav-pills li.active a,.app-dial-edit .nav-pills li.active a{background-color: #eee;}
  715. .app-pureLink-edit .img-container,.app-dial-edit .img-container{position: relative; width: 50px; height: 50px; text-align: center; overflow: hidden;}
  716. .app-pureLink-edit .img-container img,.app-dial-edit .img-container img{width: 100%; height: 100%;}
  717. .app-pureLink-edit .img-container .change-img,.app-dial-edit .change-img{display: inline-block; width: 100%; height: 15px; line-height: 15px; position: absolute; left: 0; bottom: 0; color: #fff; background: rgba(0,0,0,.5); cursor: pointer;}
  718. /*点赞,打赏*/
  719. .app-good-up .counter-vertical,.app-reward .counter-vertical{padding: 10px 0;}
  720. .app-good-up .counter-vertical *,.app-reward .counter-vertical *{display: block; text-align: center;}
  721. /*倒计时*/
  722. .app-count-down{z-index: 0; line-height: 1;}
  723. .app-count-down .element{padding: 0 10px;}
  724. .app-count-down small{font-size:50%;}
  725. /* ----------------元素动作------------ */
  726. /*淡入*/
  727. @keyframes fadeInNormal {
  728. 0% {opacity:0;}
  729. 100% {opacity: 1;}
  730. }
  731. /*从左滚入*/
  732. .rotateInDownLeft {
  733. animation: rotateInDownLeft 1.1s ease 1.6s both running;
  734. }
  735. @keyframes rotateInDownLeft{
  736. 0% {transform-origin: left bottom;transform: rotate(-90deg) translateZ(0);opacity: 0;}
  737. 100% {transform-origin: left bottom;transform: rotate(0) translateZ(0);opacity: 1;}
  738. }
  739. /*从右滚入*/
  740. @keyframes rotateInDownRight{
  741. 0% {transform-origin: right bottom;transform: rotate(90deg) translateZ(0);opacity: 0;}
  742. 100% {transform-origin: right bottom;transform: rotate(0) translateZ(0);opacity: 1;}
  743. }
  744. /*放大*/
  745. @keyframes zoomIn {
  746. 0% {opacity: 0;transform: scale3d(.3, .3, .3) translateZ(0);}
  747. 50% {opacity: 1;}
  748. }
  749. /*下落放大*/
  750. @keyframes zoomInDown {
  751. 0% {opacity: 0;transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}
  752. 60% {opacity: 1;transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
  753. }
  754. /*弹性放大*/
  755. @keyframes fadeIn {
  756. 0% {transform: scale(0) translateZ(0);opacity: 0;}
  757. 60% {transform: scale(1.1) translateZ(0);opacity: 1; }
  758. 80% {transform: scale(0.9) translateZ(0);opacity: 1; }
  759. 100% {transform: scale(1) translateZ(0);opacity: 1; }
  760. }
  761. /*弹性缩小*/
  762. @keyframes expandOpen {
  763. 0% {opacity: 0;transform: scale(1.8) translateZ(0);}
  764. 50% {opacity: 1;transform: scale(0.95) translateZ(0);}
  765. 80% {transform: scale(1.05) translateZ(0);}
  766. 90% {transform: scale(0.98) translateZ(0);}
  767. 100% {transform: scale(1) translateZ(0);}
  768. }
  769. /*向左飞入*/
  770. @keyframes fadeInLeft {
  771. 0% {opacity: 0;transform: translate3d(-100%, 0, 0);}
  772. 100% {opacity: 1;transform: translate3d(0,0,0);}
  773. }
  774. /*向右飞入*/
  775. @keyframes fadeInRight {
  776. 0% {opacity: 0;transform: translate3d(100%, 0, 0);}
  777. 100% {opacity: 1;transform: translate3d(0,0,0);}
  778. }
  779. /*向上飞入*/
  780. @keyframes fadeInUp {
  781. 0% { opacity: 0;transform: translate3d(0, 100%, 0);}
  782. 100% { opacity: 1;transform: translate3d(0, 0, 0);}
  783. }
  784. /*向下飞入*/
  785. @keyframes fadeInDown {
  786. 0% {opacity: 0;transform: translate3d(0, -100%, 0); }
  787. 100% {opacity: 1;transform: translate3d(0,0,0); }
  788. }
  789. /*旋转出现*/
  790. @keyframes rotateIn {
  791. 0% {transform-origin: center center;transform: rotate(-200deg) translateZ(0);opacity: 0; }
  792. 100% {transform-origin: center center;transform: rotate(0deg) translateZ(0);opacity: 1; }
  793. }
  794. /*左右翻转*/
  795. @keyframes flipInY {
  796. 0% {transform: perspective(400px) rotateY(90deg) translateZ(0);opacity: 0;}
  797. 40% {transform: perspective(400px) rotateY(-10deg) translateZ(0);}
  798. 70% {transform: perspective(400px) rotateY(10deg) translateZ(0);}
  799. 100% {transform: perspective(400px) rotateY(0deg) translateZ(0);opacity: 1;}
  800. }
  801. /*上下翻转*/
  802. @keyframes flipInX {
  803. 0% {transform: perspective(400px) rotateX(90deg);opacity: 0;}
  804. 40% {transform: perspective(400px) rotateX(-10deg);}
  805. 70% {transform: perspective(400px) rotateX(10deg);}
  806. 100% {transform: perspective(400px) rotateX(0deg);opacity: 1;}
  807. }
  808. /*刹车*/
  809. @keyframes lightSpeedIn {
  810. 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
  811. 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
  812. 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
  813. 100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
  814. }
  815. /*向右滑入*/
  816. @keyframes slideRight {
  817. 0% {opacity: 0;transform: translateX(-150%); }
  818. 50%{opacity: 1;transform: translateX(8%); }
  819. 65%{transform: translateX(-4%); }
  820. 80%{transform: translateX(4%); }
  821. 95%{transform: translateX(-2%); }
  822. 100% {transform: translateX(0%); }
  823. }
  824. /*向左滑入*/
  825. @keyframes slideLeft {
  826. 0% {opacity: 0;transform: translateX(150%); }
  827. 50%{opacity: 1;transform: translateX(-8%); }
  828. 65%{transform: translateX(4%); }
  829. 80%{transform: translateX(-4%); }
  830. 95%{transform: translateX(2%); }
  831. 100% {transform: translateX(0%); }
  832. }
  833. /*向上滑入*/
  834. @keyframes slideUp {
  835. 0% {opacity: 0;transform: translateY(100%); }
  836. 50%{opacity: 1;transform: translateY(-8%); }
  837. 65%{transform: translateY(4%); }
  838. 80%{transform: translateY(-4%); }
  839. 95%{transform: translateY(2%); }
  840. 100% {transform: translateY(0%); }
  841. }
  842. /*向下滑入*/
  843. @keyframes slideDown {
  844. 0% {opacity: 0;transform: translateY(-100%) translateZ(0); }
  845. 50%{opacity: 1;transform: translateY(8%); }
  846. 65%{transform: translateY(-4%); }
  847. 80%{transform: translateY(4%); }
  848. 95%{transform: translateY(-2%); }
  849. 100% {transform: translateY(0%); }
  850. }
  851. /*向右展开*/
  852. @keyframes stretchRight {
  853. 0% {opacity: 0;transform: scaleX(0.3);transform-origin: 0% 0%;}
  854. 40% {opacity: 1;transform: scaleX(1.02);transform-origin: 0% 0%; }
  855. 60% {transform: scaleX(0.98);transform-origin: 0% 0%; }
  856. 80% {transform: scaleX(1.01);transform-origin: 0% 0%; }
  857. 100% {transform: scaleX(0.98);transform-origin: 0% 0%; }
  858. }
  859. /*向左展开*/
  860. @keyframes stretchLeft {
  861. 0% {opacity: 0;transform: scaleX(0.3);transform-origin: 100% 0%; }
  862. 40% {opacity: 1;transform: scaleX(1.02);transform-origin: 100% 0%; }
  863. 60% {transform: scaleX(0.98);transform-origin: 100% 0%; }
  864. 80% {transform: scaleX(1.01);transform-origin: 100% 0%; }
  865. 100% {transform: scaleX(0.98);transform-origin: 100% 0%; }
  866. }
  867. /*向上展开*/
  868. @keyframes pullUp {
  869. 0% {opacity: 0;transform: scaleY(0.1) translateZ(0);transform-origin: 50% 100%; }
  870. 40% {opacity: 1;transform: scaleY(1.02);transform-origin: 50% 100%; }
  871. 60% {transform: scaleY(0.98);transform-origin: 50% 100%; }
  872. 80% {transform: scaleY(1.01);transform-origin: 50% 100%; }
  873. 100% {transform: scaleY(0.98);transform-origin: 50% 100%; }
  874. }
  875. /*向下展开*/
  876. @keyframes pullDown {
  877. 0% {opacity: 0;transform: scaleY(0.1) translateZ(0);transform-origin: 50% 0%; }
  878. 40% {opacity: 1;transform: scaleY(1.02) translateZ(0);transform-origin: 50% 0%; }
  879. 60% {transform: scaleY(0.98) translateZ(0);transform-origin: 50% 0%; }
  880. 80% {transform: scaleY(1.01) translateZ(0);transform-origin: 50% 0%; }
  881. 100% {transform: scaleY(0.98) translateZ(0);transform-origin: 50% 0%; }
  882. }
  883. /*右键菜单*/
  884. .right-hand-menu {position: absolute;left: 481px; top: 724px; width: 120px; padding: 2px; margin: 0; border: 1px solid #bbb; background: #eee; background: -webkit-linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%); background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100px, #e5e5e5 100%); z-index: 100; border-radius: 3px; box-shadow: 1px 1px 4px rgba(0,0,0,.2); opacity: 0; -webkit-transform: translate(0, 15px) scale(.95); transform: translate(0, 15px) scale(.95); transition: transform 0.1s ease-out, opacity 0.1s ease-out; pointer-events: none; }
  885. .menu-item {display: block; position: relative; margin: 0; padding: 0; white-space: nowrap; }
  886. .menu-btn {background: none; line-height: normal; overflow: visible; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; display: block; width: 100%; color: #444; font-family: 'Roboto', sans-serif; font-size: 13px; text-align: left; cursor: pointer; border: 1px solid transparent; white-space: nowrap; padding: 6px 8px; border-radius: 3px; }
  887. .menu-btn::-moz-focus-inner {border: 0; padding: 0; }
  888. .menu-text {margin-left: 25px; }
  889. .menu-btn .fa {position: absolute; left: 8px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  890. .menu-item:hover > .menu-btn {color: #fff; outline: none; background-color: #2E3940; background: -webkit-linear-gradient(to bottom, #5D6D79, #2E3940); background: linear-gradient(to bottom, #5D6D79, #2E3940); border: 1px solid #2E3940; }
  891. .menu-item.disabled {opacity: .5; pointer-events: none; }
  892. .menu-item.disabled .menu-btn {cursor: default; }
  893. .menu-separator {display:block; margin: 7px 5px; height:1px; border-bottom: 1px solid #fff; background-color: #aaa; }
  894. .right-hand-menu .menu {top: 4px; left: 99%; }
  895. .show-menu, .menu-item:hover > .menu {opacity: 1; -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); pointer-events: auto; }
  896. .menu-item:hover > .menu {-webkit-transition-delay: 100ms; transition-delay: 300ms; }
  897. .we7-hide {display:none; }