index.css 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. *{box-sizing: border-box;}
  2. p{margin-bottom: 0;}
  3. body{background: #f2f3f5;}
  4. /*顶部轮播图*/
  5. .fuwu-swiper,.activity-swiper{background: #fff;}
  6. .fuwu-swiper img{width: 100%;height: auto;display: block;margin: 0 auto;}
  7. /*我的活动*/
  8. .activity-swiper .swiper-slide{padding: 15px;}
  9. .activity-title{font-size: 17px;color: #333;line-height: 1.6;}
  10. .activity-title.line-clamp2{height: 54px;}
  11. .line-clamp2{text-overflow: -o-ellipsis-lastline;text-overflow: -webkit-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;text-overflow:display: -o-box;-webkit-line-clamp:2;-o-line-clamp:2;-webkit-box-orient: vertical;-o-box-orient: vertical;}
  12. .activity-swiper .activity-img{height: 120px;display: flex;align-items: center;border-radius: 8px;overflow: hidden;margin-bottom: 10px;}
  13. .activity-img img,.health-shop img{width: 100%;height: 100%;display: block; object-fit: contain;}
  14. .activity-other{line-height: 30px;}
  15. .activity-swiper .swiper-pagination-bullet{transition: all .3s ease-in-out;}
  16. .activity-swiper .swiper-pagination-bullet-active{background-color: #5cb85c;width: 20px;border-radius: 4px;}
  17. .activity-swiper>.swiper-pagination{bottom: 5px;}
  18. .swiper-button-next,.swiper-button-prev{height: 25px;}
  19. .activity-other .i-btn,.activity-list-item .i-btn{width: 90px;text-align: center;border-color: transparent;}
  20. .activity-list-item .i-btn[data-status="2"]{background-color: #ff9526;}
  21. .activity-list-item .i-btn[data-status="3"]{background-color: #ccc;}
  22. .hdbmz{position: absolute;right: 0;top: 0;width: 50px;height: auto;display: block;}
  23. /*公共样式*/
  24. .i-333{color: #333!important;}
  25. .i-666{color: #666!important;}
  26. .i-999{color: #999!important;}
  27. .i-909090{color: #909090!important;}
  28. .i-ff9526{color: #ff9526!important;}
  29. .i-f14{font-size: 14px!important;}
  30. .i-f12{font-size: 12px!important;}
  31. .i-f17{font-size: 17px!important;}
  32. .i-c-rang-right:before{width: 20px;content: '';display: inline-block;height: 100%;background: url(../images/tiaozhuan_icon.png) no-repeat center;background-size: 6px 13px;top: 0;color: #c8c8c8;font-size: 18px;position: absolute;right: 15px;}
  33. .i-c-rang-right .pull-right{padding-right: 20px;}
  34. .pull-right{float: right;}
  35. .p10-15{padding: 10px 15px;}
  36. .pt10{padding-bottom: 10px;}
  37. /*panel开始*/
  38. .i-panel{position: relative;margin-bottom: 10px;background: #fff;border-top: 1px solid #ececec;}
  39. .i-panel-title{position: relative;color: #323232;padding: 12px 15px;font-size: 14px;}
  40. .i-panel-body{position: relative;border-bottom: 1px solid #ececec;padding: 10px 15px;overflow: hidden;}
  41. .i-panel-title+.i-panel-body:before{height: 1px;left: 0;background: #ececec;display: block;content: '';position: absolute;right: 0;top: 0;}
  42. .i-panel-footer{padding: 10px;font-size: 14px;}
  43. /*panel结束*/
  44. /*积分列表*/
  45. .i-integral-list{display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  46. display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  47. display: -ms-flexbox; /* TWEENER - IE 10 */
  48. display: -webkit-flex; /* NEW - Chrome */
  49. display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  50. overflow: hidden;justify-content: center;flex-direction: row;align-items: center;line-height: 1;}
  51. .i-integral-item{position: relative;
  52. -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  53. -moz-box-flex: 1; /* OLD - Firefox 19- */
  54. width: 50%; /* For old syntax, otherwise collapses. */
  55. -webkit-flex: 1; /* Chrome */
  56. -ms-flex: 1; /* IE 10 */
  57. flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  58. height: 72px;padding: 4px 0;}
  59. .i-integral-content{position: relative;}
  60. .i-panel-body-title{margin-top: -10px;}
  61. .i-panel-body-title>span{font-size: 12px;line-height: 1;display: inline-block;}
  62. .i-panel-body-title .pull-right{padding: 6px 10px;}
  63. .integral-surplus{padding: 6px 15px;color: #fff;border-bottom-right-radius: 24px;background: #0AD800;position: relative;top: -1px;}
  64. .i-integral-item:before{cursor: pointer;content: '';position: absolute;height: 55%;top: 30%;width: 1px;background: #ececec;left: -1px;}
  65. .i-integral-item p{font-size: 14px;text-align: center;}
  66. /*积分小图标*/
  67. .i-jf-icon:after{content: '';width: 17.5px;margin-left: 4px;position: relative;top: 4px;height: 17.5px;display: inline-block;background: url(../images/icon_jifen2.png) no-repeat center;background-size: 17.5px 17.5px;}
  68. .i-integral-item .integral-number{font-size: 25px;bottom: 14px;text-align: center;margin-top: 10px;}
  69. /*积分规则*/
  70. .health-smelling p,.integral-rule p{font-size: 12px;line-height: 1.8;margin-bottom: .5em;position: relative;}
  71. .health-smelling p{margin-left: 25px;}
  72. .health-smelling p:before{content: '';background: url(../images/huodongweiwen_icon.png) no-repeat round;display: inline-block;width: 14px;height: 14px;position: absolute;left: -25px;top: 3px;}
  73. /*获取积分列表*/
  74. .get-integral-act-list{}
  75. .get-integral-act-item{display: -webkit-box; -webkit-box-align: center; border-radius: 5px;background: #eef1f8;padding: 10px;margin-bottom: 10px;}
  76. .integral-act-center{-webkit-box-flex: 1;padding-left: 10px;padding-right: 10px;}
  77. .integral-act-left,
  78. .integral-act-right{-webkit-box-flex: 0;}
  79. .integral-act-left img{width: 50px;height: 50px;display: block;}
  80. .integral-act-right .i-btn{width: 70px;}
  81. .acticity-after-img:after{content: '';display: inline-block;width: 50px;height: 17px;background: url(../images/huodong_img.png) no-repeat round;margin-left: 10px;position: relative;top: 2.5px;}
  82. .renwu-img img{width: 100%;height: auto;display: block;margin-bottom: 10px;}
  83. /*健康商城*/
  84. .health-shop,.activity-swiper{margin-left: -15px;margin-right: -15px;}
  85. .health-shop .swiper-wrapper .swiper-slide{ width: auto; border-radius: 10px;overflow: hidden;}
  86. .health-shop .swiper-wrapper .swiper-slide img{width: 100%; height: auto;display: block;transition: all .3s ease-in-out;}
  87. .health-shop .swiper-wrapper .swiper-slide-prev{transform: scale(0.8);transform-origin: 100% 0;}
  88. .health-shop .swiper-wrapper .swiper-slide-next{transform: scale(0.8);transform-origin: 0 0;}
  89. .health-shop .swiper-wrapper .swiper-slide-active{margin-top: 7px;}
  90. .new-news{position: relative;margin-bottom: 20px;padding-left: 80px;}
  91. .new-news:before{content: '';width: 50px;position: absolute;left: 15px;height: 20px;display: inline-block;background: url(../images/NEW_img.png) no-repeat round;}
  92. .new-news-scroll{font-size: 0;height: 20px;white-space: nowrap;overflow: hidden;}
  93. .new-news-list{white-space: nowrap;display:inline-block;}
  94. .new-news-list li{padding-right: 60px;color: #ff5e6c;display: inline-block;font-size: 14px;line-height: 20px;}
  95. .i-btn{display: inline-block;padding: 6px 12px;outline: none;margin-bottom: 0;font-size: 12px;font-weight: 400;line-height: 1.42857143;text-align: center;white-space: nowrap;vertical-align: middle;touch-action: manipulation;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;background-image: none;border: 1px solid transparent;border-radius: 4px;}
  96. .i-btn-success {color: #fff;background-color: #5cb85c;border-color: #4cae4c;}
  97. .i-btn-gray{color: #fff;background: #ccc;border-color: #bbb;}
  98. .i-btn.disabled{pointer-events: none;cursor: not-allowed;filter: alpha(opacity=65);-webkit-box-shadow: none;box-shadow: none;opacity: .65;}
  99. .i-border-radius-15{border-radius: 15px;}
  100. .i-text-center{text-align: center;}
  101. .i-text-right{text-align: right;}
  102. .integral-act-name{font-size: 14px;color: #323232;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
  103. .dialing{width: 90px;position: absolute;right: 10px;bottom: 5px;}
  104. .rxdh{font-size: 12px;color: #232323;position: relative;padding: 12px 10px;}
  105. .qytsfw{border-radius: 5px;overflow: hidden;border: 1px solid #ececec;}
  106. .qytsfw img{width: 100%;height: auto;display: block;}
  107. /*签约的好处*/
  108. .qydhc{margin: 0 15px 10px;}
  109. .qydhc-top{height: 10px;border: 3px solid #eef8f1;border-radius: 5px;padding: 0 2px;}
  110. .qydhc-top span{background: #5cb85c;display: block;height: 100%;border-radius: 2px;}
  111. .qydhc-body{margin: -5px 12px 0;background: #eef1f8;border-radius: 0 0 5px 5px;padding: 12px 5px 10px 10px;}
  112. .qydhc-title{color: #4dcd70;font-size: 16px;}
  113. .qydhc-title:before{background: url(../images/icon_qianyuehaochu.png) no-repeat;background-size: 100% auto;margin-right: 8px;position: relative;top: 2px;content: '';width: 15.5px;height: 15.5px;display: inline-block;}
  114. .haochu-item{position: relative;padding-left: 20px;font-size: 12px;color: #232323;line-height: 2;margin-bottom: .2em;}
  115. .haochu-item:before{position: absolute;content: 'O';left: 0;top: 0;color: #5cb85c;}
  116. .i-flex-box{display: -webkit-box; -webkit-box-align: center;}
  117. .i-flex-box-item{display: block; -webkit-box-flex: 1;}
  118. .action-list{margin-bottom: -12px;border-top: 1px solid #ececec;padding: 0 25px;}
  119. .action-list li{position: relative;padding: 10px 0 5px;}
  120. .action-list li span{position: relative;font-size: 14px;color: #323232;margin-left: 5px;top: 10px;}
  121. .action-list li img{width: 57px;height: auto;}
  122. .integral-source{background: #fff;}
  123. .integral-type>*{font-size: 15px;color: #323232;padding: 13px 0;position: relative;}
  124. .activity-square .integral-type>*{font-size: 16px;color: #666;}
  125. /*下划线动画*/
  126. .integral-type>*:after{transition: all .5s ease-in-out;position: absolute;content: '';width: 0;left: -50%;bottom: 0;height: 2px;background: transparent;}
  127. .integral-type .mui-active{color: #5cb85c!important;}
  128. .integral-type>*.mui-active:after{background: #5cb85c;height: 3px;width: 30px;margin-left: -15px;;left: 50%;}
  129. .all-total{padding: 15px 15px 30px;border: none;background: url(../images/shouyi_bg_img.png) no-repeat top center;background-size: 100% 100%;}
  130. .all-total p{color: #fff;}
  131. #totalIncome{font-size: 28px;}
  132. .icon-jifen{width: 17px;height: 17px;display: inline-block;vertical-align: sub;margin-right: 3px;background: url(../images/shouyi_icon.png) no-repeat;background-size: 100% 100%;}
  133. /*积分来源样式*/
  134. .integral-content{display: none;}
  135. .integral-list{background: #fff;}
  136. .integral-list-item{display: -webkit-box; -webkit-box-align: center;position: relative;padding: 9px 15px;font-size: 14px;}
  137. .integral-list-item .i-flex-box-item{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;position: relative;}
  138. .zwkf:before{position: absolute;left: -25px;right: 0;bottom: 2px;top: 0;content: '暂未开放';color: #fff;font-size: 14px;background-color: rgba(0,0,0,.5);z-index: 2;line-height: 72px;cursor: default;pointer-events: none;text-align: center;}
  139. .integral-list-item:after{left: 15px;right: 0;position: absolute;content: '';bottom: 0;background: #ececec;height: 1px;}
  140. .integral-list-item:last-child:after{left: 0;}
  141. .integral-value{-webkit-box-flex: 0;font-size: 17px;color: #4DCD70;white-space: nowrap;text-align: center;}
  142. .reduce-value{color: #323232;}
  143. .add-value {color: #ff9526;}
  144. .create-tiem{-webkit-box-flex: 0;font-size: 14px;color: #808080;margin-right: 20px;margin-left: 20px;}
  145. .create-tiem:empty{display: none;}
  146. .div-no-info{position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);text-align: center;}
  147. .div-no-info img{width: 100%;}
  148. .integral-source .mui-fullscreen{top: 165px;height: auto;background: #fff;}
  149. .activity-square .mui-fullscreen .mui-segmented-control~.mui-slider-group{top: 50px;}
  150. .activity-square .mui-fullscreen{height: auto;background: #F2F2F2;}
  151. .integral-source .mui-scroll,.activity-square .mui-scroll{width: 100%!important;}
  152. .integral-source .mui-segmented-control.mui-scroll-wrapper{height: 40px;}
  153. .activity-square .mui-segmented-control.mui-scroll-wrapper .mui-scroll,.activity-square .mui-segmented-control.mui-scroll-wrapper{height: 50px;background: #FFF;}
  154. .integral-source .mui-control-item{line-height: 40px;}
  155. .activity-square .mui-control-item{line-height: 50px;}
  156. .mui-pull-caption{font-weight: 100;font-size: 14px;}
  157. .i-btn-success+.i-btn-success{margin-top: 10px;}
  158. /*活动广场列表*/
  159. .activity-list{background: #F2F2F2;}
  160. .activity-list-item{background: #fff;padding: 15px 15px 10px;margin-bottom: 10px;}
  161. /*已参与活动统计*/
  162. .activity-statistics{margin-bottom: 5px;margin-top: 10px;border-radius: 4px;flex-wrap: wrap;border: 1px solid #ececec;height: 140px;line-height: 1;text-align: center;width: 100%;}
  163. .activity-statistics .i-flex-box-item{height: 68px;padding-top: 15px;font-size: 14px;position: relative;}
  164. .activity-statistics .i-flex-box-item:before{position: absolute;left: 0;top: 15px;bottom: 15px;width: 1px;background-color: #ececec;content: '';margin-left: -1px;}
  165. .my-rankings{height: 50%;width: 100%;border-top: 1px solid #ececec;padding-top: 10px;background: url(../images/paiming_bg_img.png) no-repeat;background-size: 100% 100%;}
  166. .rankings{font-size: 28px;color: #ff9526;}
  167. .activity-statistics > div > p:first-child{margin-bottom: 10px;}
  168. /*活动奖励*/
  169. .activity-detail .i-panel-title:after{left: 0;}
  170. .hdjl-swiper{padding-bottom: 28px;}
  171. .hdjl-swiper.swiper-container-horizontal>.swiper-pagination{bottom: 0;line-height: 1;}
  172. .hdjl-swiper .swiper-pagination-bullet-active{background: #4DCD70;}
  173. .hdjl-swiper .swiper-slide{border-radius: 5px;border: 1px solid #ddd;position: relative;padding-bottom: 20px;max-width: 33%;width: auto;}
  174. .hdjl-swiper .swiper-slide>p{position: absolute;bottom: 0;text-align: center;background: #4DCD70;color: #fff;font-size: 12px;line-height: 20px;left: 0;right: 0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
  175. /*活动介绍*/
  176. /*.activity-introduction{padding: 0 10px;}*/
  177. .activity-introduction span:first-child{display: block;width: 75px;text-align: right;align-self: flex-start;}
  178. .activity-introduction .i-flex-box{position: relative;padding-left: 20px;font-size: 14px;margin-bottom: 10px;color: #666;}
  179. .activity-introduction .i-flex-box:after,
  180. .activity-introduction .i-flex-box:before{position: absolute;content: '';display: inline-block;}
  181. .activity-introduction .i-flex-box:after{left: 0px;width: 14px;height: 14px;background: #4DCD70;top: 5px;z-index: 1;transform: rotateZ(45deg);}
  182. .activity-introduction .i-flex-box:before{left: 4px;width: 6px;height: 6px;background: #fff;top: 9px;z-index: 2;}
  183. .ycy{color: #ff9526;font-size: 20px;}
  184. .qcy{margin-top: 25px;width: 120px;height: 40px;border-radius: 20px;font-size: 14px;}
  185. /*报名成功提示*/
  186. .i-modal-open { overflow: hidden;}/*禁止屏幕滚动*/
  187. .i-modal{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99;display: none;}
  188. .i-modal-layer{position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: rgba(0,0,0,.3);z-index: 1;}
  189. .prompt-content{width: 255px;height: auto;background: #fff;border-radius: 10px;margin: 50px auto;z-index: 2;position: relative;}
  190. .success-image{font-size: 17px;color: #FF9526;text-align: center;border-top-left-radius: 10px;border-top-right-radius: 10px;overflow: hidden;}
  191. .success-image img {width: 100%;height: auto;display: block;}
  192. .user-info{padding: 15px 15px 20px;}
  193. .info-list{border-top: 1px solid #e1e1e1;}
  194. .info-list-item{color: #333;}
  195. .info-list-title{font-size: 17px;margin-top: 15px;}
  196. .item-name,.item-name+p{font-size: 14px;position: relative;line-height: 2;}
  197. .item-name{width: 75px;padding-right: 15px;text-align: justify;color: #999;text-align-last: justify;align-self: flex-start;}
  198. .item-name:after{content: ':';right: 3px;position: absolute;}
  199. .i-modal-close{position: absolute;bottom: -60px;left: 50%;margin-left: -15px;color: #999;background: #fff;text-align: center;font-weight: bold;width: 30px;height: 30px;line-height: 28px;border-radius: 100%;display: inline-block;font-size: 25px;}
  200. /*报名信息确认*/
  201. .comfirm-image{background: url(../images/baoming_biaoqian_img.png) no-repeat round;background-position: center top;background-size: 75% 100%;color: #fff;padding: 10px 40px 18px;font-size: 17px;line-height: 1;text-align: center;}
  202. .comfirm-info .prompt-content{padding-top: 15px;margin-top: 90px;}
  203. .help-block {display: block;margin-top: 10px;line-height: 1;margin-bottom: 15px;color: #737373;font-size: 14px;}
  204. .has-error .help-block{color: #ff5e6c;}
  205. .user-select{
  206. display: block;
  207. width: calc(100% - 15px);
  208. height: 43px;
  209. line-height: 43px;
  210. font-size: 14px;
  211. outline: none;
  212. color: #999;
  213. appearance:none;
  214. -moz-appearance:none;
  215. -webkit-appearance:none;
  216. border: none;
  217. border-radius: 25px;
  218. padding-right: 15px;
  219. background: #fff;
  220. }
  221. .select-box{
  222. position: relative;
  223. height: 45px;
  224. border-radius: 25px;
  225. background: #fff;
  226. border:1px solid #ececec;
  227. padding-left: 15px;
  228. }
  229. .select-box:after{
  230. content: '';
  231. position: absolute;
  232. width: 14px;
  233. height: 7px;
  234. right: 15px;
  235. top: 50%;
  236. margin-top: -3.5px;
  237. background: url(../images/xiazhan_icon.png) no-repeat;
  238. background-size: 100% 100%;
  239. }
  240. .select-user-info{border-top: 1px solid #ececec;padding: 10px 0 20px;}
  241. .comfirm-btn{font-size: 17px;padding: 7px 35px;border-radius: 40px;margin-bottom: -10px;}
  242. /*活动规则*/
  243. .rule-list{list-style: none;font-size: 12px;color: #999;}
  244. img.event_none {pointer-events: none;}