index.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824
  1. /**index.wxss**/
  2. page{background: #fff;}
  3. .top-fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 50;background: var(--mina);}
  4. .topbg{width: 100%;height: 100%;}
  5. .top-title{position: absolute;left: 0;right: 0;text-align: left;font-size: 36rpx;color: #fff;padding-left: 34rpx;}
  6. .top-title image{height: 60rpx;position: absolute;left: 34rpx;top: 50%;transform: translateY(-50%);}
  7. .not-color{background: #fff;}
  8. .not-color .top-title{color: #333;}
  9. .top{box-sizing: border-box;align-items: center;position: relative;}
  10. .top-bg{width: 100%;height: 260rpx;position: absolute;top: 0;left: 0;z-index: 0;}
  11. .topcon{padding: 40rpx 45rpx;position: relative;z-index: 1;}
  12. .logo{width: 100rpx;height: 100rpx;border: 2rpx solid #fff;background: #fff;border-radius: 50%;margin-right: 25rpx;}
  13. .areas{font-size: 34rpx;color: #fff;}
  14. /* 服务 */
  15. .bg{
  16. position: absolute;
  17. top: 0;
  18. left: 0;
  19. right: 0;
  20. height: 540rpx;
  21. }
  22. .bg image{
  23. width: 100%;
  24. height: 100%;
  25. }
  26. .service-person{
  27. position: absolute;
  28. z-index: 2;
  29. left: 0;
  30. right: 0;
  31. }
  32. .service-person-header{
  33. width: 70rpx;
  34. height: 70rpx;
  35. margin: 0 30rpx;
  36. }
  37. .service-person-name{
  38. font-size: 32rpx;
  39. font-weight: bold;
  40. color: #FFFFFF;
  41. line-height: 45rpx;
  42. }
  43. .rico{
  44. width: 9rpx;
  45. height: 19rpx;
  46. margin-left: 10rpx;
  47. }
  48. .service-person-number{
  49. font-size: 20rpx;
  50. font-weight: 500;
  51. color: #FFFFFF;
  52. line-height: 28rpx;
  53. }
  54. .service-person-tag{
  55. padding: 0 10rpx;
  56. line-height: 29rpx;
  57. background: linear-gradient(319deg, #E6BB82 0%, #FAE4CD 100%);
  58. border-radius: 3rpx 3rpx 3rpx 3rpx;
  59. opacity: 1;
  60. font-size: 20rpx;
  61. font-family: PingFang SC-Regular, PingFang SC;
  62. font-weight: 400;
  63. color: #84600A;
  64. margin-right: 10rpx;
  65. }
  66. .service-person-options{
  67. font-size: 20rpx;
  68. font-family: PingFang SC-Regular, PingFang SC;
  69. font-weight: 400;
  70. color: #FFFFFF;
  71. line-height: 28rpx;
  72. margin-top: 18rpx;
  73. }
  74. .service-person-option{
  75. margin-right: 17rpx;
  76. }
  77. .service-person-option image{
  78. width: 28rpx;
  79. height: 28rpx;
  80. margin-right: 3rpx;
  81. }
  82. .service-person-phone{
  83. line-height: 28rpx;
  84. font-size: 20rpx;
  85. font-family: PingFang SC-Regular, PingFang SC;
  86. font-weight: 400;
  87. color: #FFFFFF;
  88. text-align: center;
  89. margin-left: 26rpx;
  90. }
  91. .service-person-phone image{
  92. width: 48rpx;
  93. height: 48rpx;
  94. }
  95. /* .areas image{width: 22rpx;height: 17rpx;margin-left: 10rpx;margin-top: 10rpx;} */
  96. .recent{align-items: center;font-size: 22rpx;color: #fff;margin-top: 10rpx;}
  97. .recent text{display: block;width: 100rpx;height: 32rpx;text-align: center;line-height: 32rpx;border-radius: 16rpx;margin-right: 9rpx;font-size: 22rpx;}
  98. .renqi{padding: 0 35rpx;text-align: center;font-size: 34rpx;color: #fff;}
  99. .renqi text{display: block;opacity: .7;font-size: 24rpx;margin-top: 10rpx;}
  100. /* .top{box-sizing: border-box;align-items: center;position: relative;}
  101. .top-bg{display: block;width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 1;}
  102. .topcon{position: relative;z-index: 2;display: flex;display: -webkit-flex;}
  103. .logo{display: block;width: 80rpx;height: 80rpx;z-index: 2;}
  104. .areas{align-items: center;color: #fff; z-index: 3;}
  105. .areas image{width: 22rpx;height: 17rpx;margin-left: 10rpx;margin-top: 10rpx;}
  106. .recent{align-items: center;font-size: 22rpx;color: #fff;margin-top: 10rpx;}
  107. .recent text{display: block;width: 100rpx;height: 32rpx;text-align: center;line-height: 32rpx;border-radius: 16rpx;margin-right: 9rpx;font-size: 22rpx;}
  108. .renqi{padding: 0 35rpx;text-align: center;font-size: 34rpx;color: #fff;}
  109. .renqi text{display: block;opacity: .7;font-size: 24rpx;margin-top: 10rpx;} */
  110. .tcon{position: relative;}
  111. .tcbg{width: 100%;height: 260rpx;position: absolute;top: 0;left: 0;z-index: 0;}
  112. .merchant{padding: 40rpx 45rpx;position: relative;z-index: 1;}
  113. .logo{width: 100rpx;height: 100rpx;border: 2rpx solid #fff;background: #fff;border-radius: 50%;margin-right: 25rpx;}
  114. .merchant-name{font-size: 36rpx;color: #fff;}
  115. .change{margin-left: 10rpx;font-size: 24rpx;color: rgba(255,255,255,.5);}
  116. .change image{width: 14rpx;height: 23rpx;margin-left: 6rpx;}
  117. .merchant-info{font-size: 24rpx;color: #FFDEC4;margin-top: 14rpx;}
  118. .merchant-info .li{margin-right: 20rpx;}
  119. .merchant-info image{width: 24rpx;height: 24rpx;margin-right: 8rpx;}
  120. .m-share{font-size: 22rpx;color: #fff;margin-left: 50rpx !important;}
  121. .m-share image{width: 34rpx;height: 34rpx;margin: 0 auto 15rpx;}
  122. .box1{border-radius: 50rpx 50rpx 0 0;padding-top: 26rpx;padding-bottom: 5rpx;position: relative;z-index: 2;}
  123. .search{background: #F0F2F3;height: 70rpx;border-radius: 35rpx;padding: 0 15rpx 0 30rpx;align-items: center;font-size: 26rpx;color: #666;}
  124. .search image{width: 30rpx;height: 30rpx;margin-right: 13rpx;}
  125. .search image.sao{width: 42rpx;height: 42rpx;}
  126. .banner{margin-top: 24rpx;overflow: hidden;position: relative;}
  127. .swiper,.swiper image{width: 100%;height: 394rpx;border-radius: 20rpx;}
  128. .swiper1{width: 100%;height: 400rpx;}
  129. .sat{padding-top: 1rpx;}
  130. .dotse,.dots1{position: absolute;left: 0;right: 0;bottom: 11rpx;align-items: center;justify-content: center;}
  131. .dot{background: #fff;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
  132. .dot.active{width: 30rpx;}
  133. .dot1{background: var(--mina);width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
  134. .dot1.active{width: 30rpx;}
  135. .nav{flex-wrap: wrap;margin-top: 30rpx;position: relative;}
  136. .nav .li{width: 25% !important;text-align: center;font-size: 28rpx;color: #333;margin-bottom: 35rpx;/* height: 41%; */}
  137. .nav .li button{font-size: 28rpx !important;color: #333 !important;}
  138. .nav .li image{width: 80rpx;height: 80rpx;margin: 0 auto 10rpx;}
  139. .grid{flex-wrap: wrap;}
  140. .more{width: 16rpx;height: 27rpx;}
  141. .quan{padding-bottom: 40rpx;}
  142. .quan .li{width: 212rpx;height: 220rpx;margin-right: 17rpx;position: relative;text-align: center;}
  143. .quan .li:last-child{margin-right: 0;}
  144. .quanbg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
  145. .quan .lic{position: relative;z-index: 2;width: 100%;height: 100%;overflow: hidden;}
  146. .quan .li.gray .sbglinear{background: linear-gradient(90deg,#ddd,#c7c6c6);color: #666;}
  147. .amount{font-weight: bold;font-size: 56rpx;color: #fff;margin: 20rpx 0 0;}
  148. .amount text{font-size: 24rpx;}
  149. .rule{font-size: 24rpx;color: #fff;margin: 0 0 40rpx;}
  150. .ling{width:140rpx;height:40rpx;line-height: 40rpx;font-size: 22rpx;color: #FF6009;position: absolute;left: 50%;transform: translateX(-50%);bottom: 15rpx;}
  151. .jingxuan{padding-bottom: 40rpx;flex-wrap: wrap;}
  152. .jingxuan .li{width: 47%;margin-right: 20rpx;text-align: center;overflow: hidden;margin-bottom: 25rpx;}
  153. .jingxuan .li image{width: 100%;height: 210rpx;border-radius: 10rpx;}
  154. .name{font-size: 28Prpx;color: #333;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: 15rpx 0 10rpx;}
  155. .price{font-size: 24rpx;color: #FE0419;}
  156. .price text{font-size: 36rpx;font-weight: bold;}
  157. .shequ .li{border-bottom: 2rpx solid #eee;padding: 0 20rpx 38rpx;margin-bottom: 38rpx;overflow: hidden;}
  158. .shequ .li:last-child{border-bottom: none;margin-bottom: 0;}
  159. .shequ .li .flex{overflow: hidden;}
  160. .proimg{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;}
  161. .proname{font-size: 28rpx;color: #333;overflow : hidden;line-height: 36rpx;height: 72rpx;}
  162. .endtime{display: inline-block;height: 32rpx;line-height: 32rpx;border: 2rpx solid #FE0419;border-radius: 6rpx;padding: 0 8rpx;font-size: 24rpx;color: #FE0419;margin: 0 0 10rpx;/* margin: 15rpx 0 25rpx; */}
  163. .operate{justify-content: space-between;align-items: center;}
  164. .price .del{font-weight: normal;font-size: 24rpx;color: #999;margin-left: 12rpx;text-decoration: line-through;}
  165. .price .vip{ font-size: 24rpx;margin-left: 12rpx;color: #333;font-weight: normal;}
  166. .add-cart image{width: 42rpx;height: 42rpx;}
  167. .nums{align-items: center;}
  168. .num{font-size: 30rpx;width: 50rpx;text-align: center;line-height: 42rpx;}
  169. .remind{width: 150rpx;height: 50rpx;border-radius: 25rpx;font-size: 24rpx;color: #fff;text-align: center;justify-content: center;line-height: 50rpx;}
  170. .datas{justify-content: space-between;align-items: center;font-size: 24rpx;color: #666;padding: 20rpx 0 0}
  171. .yigou{margin-left: 6rpx;align-items: center;}
  172. .yigou image{width: 40rpx;height: 40rpx;border-radius: 50%;margin-left: -6rpx;border: 2rpx solid #fff;}
  173. .yigou image.more1{border: none;width: 46rpx;height: 46rpx;}
  174. .yigou text{margin-left: 12rpx;}
  175. .xiaoliang{color: #999;}
  176. .miaosha{margin-top: 15rpx;}
  177. .times{margin-bottom: 30rpx;}
  178. .times .li{width: 20%;text-align: center;font-size: 20rpx;color: #999;position: relative;}
  179. .times .li::before{content: '';display: block;width: 2rpx;height: 61rpx;background: #D2D2D2;position: absolute;left: 0;bottom: 5rpx;}
  180. .times .li:first-child::before{display: none;}
  181. .times .li text{display: block;font-size: 36rpx;color: #333;margin-bottom: 5rpx;}
  182. .times .li.active,.times .li.active text{color: #FE0419;}
  183. .msinfos{padding: 20rpx 20rpx 32rpx}
  184. .msinfos image{width: 100%;height: 390rpx;}
  185. .msinfo{padding: 0 9rpx}
  186. .msname{font-size: 30rpx;line-height: 36rpx;margin: 20rpx 0 10rpx}
  187. .qgsta{align-items: center;justify-content: space-between;}
  188. .qiang{width: 100rpx;height: 40rpx;border-radius: 35rpx;text-align: center;line-height: 40rpx;font-size: 24rpx;color: #fff;}
  189. .pintuan{padding-bottom: 50rpx;}
  190. .pintuan .li{margin-bottom: 50rpx;}
  191. .pintuan .li:last-child{margin-bottom: 0;}
  192. .pinimgs{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;position: relative;}
  193. .pinimg{display: block;width: 100%;height: 100%;border-radius: 10rpx;}
  194. .tuan{display: block;width: 87rpx;height: 44rpx;font-size: 22rpx;color: #fff;text-align: center;line-height: 34rpx;position: absolute;top: 21rpx;left: -10rpx;}
  195. .tuan image{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
  196. .tuan text{position: relative;z-index: 2;display: block;}
  197. .pininfo{overflow: hidden;}
  198. .pininfo .endtime{margin-bottom: 45rpx;}
  199. .pininfo .del{font-size: 24rpx;color: #999;text-decoration: line-through;}
  200. /* .pininfo .price{color: #333;} */
  201. .jishida{margin: 20rpx 0;}
  202. /* .tab{align-items: center;font-size: 28rpx;color: #666;}
  203. .tab .li{width: 25%;text-align: center;position: relative;}
  204. .tab .li::after{content: '';display: block;width: 2rpx;height: 28rpx;background: #D2D2D2;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
  205. .tab .li:first-child::after{display: none;}
  206. .tab .li.active{color: var(--mina) !important;}
  207. .tabcon{flex-wrap: wrap;margin-top: 20rpx;}
  208. .tabcon .li{width: 50%;} */
  209. /* .tabcon .li{background: #fff;border-radius: 10rpx;width: 345rpx;margin: 20rpx 20rpx 0 0;} */
  210. /* .tabcon .li:nth-child(2n){margin-right: 0;} */
  211. .tabconTh .li{width: 223rpx;margin-right: 20rpx !important;}
  212. .tabconTh .li:nth-child(3n){margin-right: 0 !important;}
  213. .jsdimgs{width: 345rpx;height: 345rpx;position: relative;}
  214. .tabconTh .li .jsdimgs{width: 223rpx;height: 223rpx;}
  215. .jsdpro{width: 100%;height: 100%;}
  216. .jsdimg{width: 82rpx;height: 36rpx;position: absolute;top: 20rpx;left: 20rpx;}
  217. .jsdinfo{padding: 15rpx 20rpx 30rpx;}
  218. .kan-guoqi{background: #999;}
  219. .idxnav{justify-content: space-between;padding: 30rpx;}
  220. .zbgm image{width: 336rpx;height: 321rpx;}
  221. .lqzx{margin-bottom: 20rpx;}
  222. .lqzx image{width: 336rpx;height: 151rpx;}
  223. .myzx image{width: 336rpx;height: 151rpx;}
  224. .guide{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.7);z-index: 102;}
  225. .guide image{width: 100%;}
  226. .layer{
  227. position: fixed;
  228. top: 0;
  229. z-index: 101;
  230. left: 0;
  231. right: 0;
  232. display: flex;
  233. bottom: 0;
  234. background: rgba(0,0,0,0.7);
  235. justify-content: center;
  236. align-items: center;
  237. flex-direction: column;
  238. }
  239. .layer image{
  240. width: 535rpx;
  241. height: 650rpx;
  242. }
  243. /*关闭按钮样式 */
  244. .layer .close{
  245. color:#fff;
  246. width: 60rpx;
  247. height: 60rpx;
  248. margin-top: 80rpx;
  249. }
  250. /* 专题 */
  251. .ztdiv{height: 310rpx;
  252. background-color: #fff;
  253. margin-top: 20rpx;
  254. padding: 0rpx 0rpx 20rpx 0rpx;
  255. margin-right: 20rpx;
  256. border-radius: 20rpx;
  257. }
  258. .imgdiv{width: 100%;
  259. height: 240rpx;
  260. }
  261. .t-img{height:240rpx;width: 710rpx;border-radius: 20rpx 20rpx 0 0;}
  262. .txtdiv{padding-left: 20rpx;padding-top: 20rpx; border-top: 1rpx #eee solid;
  263. }
  264. .imgtit{width: 100%; margin-bottom:20rpx; }
  265. .jishida .imgtit{width: 100%; margin-bottom:10rpx; }
  266. /* 砍价活动 */
  267. .kjcon{overflow: hidden;}
  268. .kan-price{align-items: center;margin: 10rpx 0 45rpx;}
  269. .tag{width: 80rpx;height: 36rpx;border-radius: 8rpx;text-align: center;line-height: 36rpx;font-size: 20rpx;color: #fff;}
  270. .kan-price .price{font-size: 38rpx;color: #FE0419;margin: 0 20rpx 0 12rpx;}
  271. .kan-price .price text{font-size: 25rpx;}
  272. .kan-price .del{font-size: 24rpx;color: #999;text-decoration: line-through;}
  273. .kan-times{align-items: center;justify-content: space-between;}
  274. .kan-time{align-items: center;font-size: 20rpx;color: #333;margin: 15rpx 0 65rpx;}
  275. .kan-time text{display: block;width: 38rpx;height: 38rpx;border-radius: 8rpx;background: #333;line-height: 38rpx;text-align: center;margin: 0 7rpx;font-size: 24rpx;color: #fff;}
  276. .kan-time text:first-child{margin-left: 0;}
  277. .kan-time view{margin-left: 5rpx;}
  278. .kan-btn{width: 150rpx;height: 50rpx;border-radius: 25rpx;text-align: center;line-height: 50rpx;font-size: 24rpx;color: #fff;}
  279. .cont{flex-wrap: wrap;font-size: 26rpx;}
  280. .cont .li{align-items: center;margin-right: 20rpx; color: #fff;margin-top: 5rpx;}
  281. .cont image{width: 30rpx;height: 30rpx;}
  282. .ss{padding-bottom:20rpx ;}
  283. .li3{width: 33% !important;text-align: center;font-size: 28rpx;margin-bottom: 30rpx;}
  284. .li3 button{font-size: 28rpx !important;color: #333 !important;}
  285. .li5{width: 20% !important;text-align: center;font-size: 28rpx;margin-bottom: 30rpx;}
  286. .li5 button{font-size: 28rpx !important;color: #333 !important;}
  287. .nav .li3 image{width: 140rpx;height: 140rpx;margin: 0 auto 10rpx;}
  288. .nav .li5 image{width: 75rpx;height: 75rpx;margin: 0 auto 10rpx;}
  289. .swiper2{width: 100%;height: 240rpx;}/*一行三个*/
  290. .swiper3{width: 100%;height: 432rpx;}/*两行三个*/
  291. .swiper4{width: 100%;height: 200rpx;}/*一行四个*/
  292. .swiper5{width: 100%;height: 160rpx;}/*一行五个*/
  293. .kjpop{position: fixed;top: 50%;transform: translateY(-50%);left: 85rpx;right: 85rpx;background: #fff;border-radius: 20rpx;z-index: 100;overflow: hidden;}
  294. .kjpop .tops {height: 100rpx;}
  295. .kjpop .tops image{width: 100%;height: 100rpx;}
  296. .kjpop .cont{padding: 0rpx 44rpx;}
  297. .kjpop .cont text{font-size:24rpx ; color: #707070;}
  298. .kjpop .cont .title{text-align: center; font-size: 28rpx;color: #DC1515; font-weight: bold;margin: 30rpx 0 45rpx 0;}
  299. /* .kjpop .cont .btn{width: 430rpx; height: 60rpx;border-radius: 40rpx;border: 1rpx solid #DE1F20; color: #DE1E1F; font-size: 28rpx;text-align: center; line-height: 60rpx;margin: 0 auto;} */
  300. .kjpop .bottom{
  301. border-top: 1rpx solid #E4E4E4;
  302. }
  303. .botLeft,.botRight{
  304. width: 50%;
  305. text-align: center;
  306. padding: 20rpx 0;
  307. }
  308. .botLeft{
  309. border-right: 1rpx solid #E4E4E4;
  310. }
  311. .spinner {
  312. margin: 255px auto 0px auto ;
  313. width: 60rpx;
  314. height: 60rpx;
  315. position: relative;
  316. }
  317. .container1 > view, .container2 > view, .container3 > view {
  318. width: 15rpx;
  319. height: 15rpx;
  320. background-color: var(--mina);
  321. border-radius: 100%;
  322. position: absolute;
  323. -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  324. animation: bouncedelay 1.2s infinite ease-in-out;
  325. -webkit-animation-fill-mode: both;
  326. animation-fill-mode: both;
  327. }
  328. .spinner .spinner-container {
  329. position: absolute;
  330. width: 100%;
  331. height: 100%;
  332. }
  333. .container2 {
  334. -webkit-transform: rotateZ(45deg);
  335. transform: rotateZ(45deg);
  336. }
  337. .container3 {
  338. -webkit-transform: rotateZ(90deg);
  339. transform: rotateZ(90deg);
  340. }
  341. .circle1 { top: 0; left: 0; }
  342. .circle2 { top: 0; right: 0; }
  343. .circle3 { right: 0; bottom: 0; }
  344. .circle4 { left: 0; bottom: 0; }
  345. .container2 .circle1 {
  346. -webkit-animation-delay: -1.1s;
  347. animation-delay: -1.1s;
  348. }
  349. .container3 .circle1 {
  350. -webkit-animation-delay: -1.0s;
  351. animation-delay: -1.0s;
  352. }
  353. .container1 .circle2 {
  354. -webkit-animation-delay: -0.9s;
  355. animation-delay: -0.9s;
  356. }
  357. .container2 .circle2 {
  358. -webkit-animation-delay: -0.8s;
  359. animation-delay: -0.8s;
  360. }
  361. .container3 .circle2 {
  362. -webkit-animation-delay: -0.7s;
  363. animation-delay: -0.7s;
  364. }
  365. .container1 .circle3 {
  366. -webkit-animation-delay: -0.6s;
  367. animation-delay: -0.6s;
  368. }
  369. .container2 .circle3 {
  370. -webkit-animation-delay: -0.5s;
  371. animation-delay: -0.5s;
  372. }
  373. .container3 .circle3 {
  374. -webkit-animation-delay: -0.4s;
  375. animation-delay: -0.4s;
  376. }
  377. .container1 .circle4 {
  378. -webkit-animation-delay: -0.3s;
  379. animation-delay: -0.3s;
  380. }
  381. .container2 .circle4 {
  382. -webkit-animation-delay: -0.2s;
  383. animation-delay: -0.2s;
  384. }
  385. .container3 .circle4 {
  386. -webkit-animation-delay: -0.1s;
  387. animation-delay: -0.1s;
  388. }
  389. @-webkit-keyframes bouncedelay {
  390. 0%, 80%, 100% { -webkit-transform: scale(0.0) }
  391. 40% { -webkit-transform: scale(1.0) }
  392. }
  393. @keyframes bouncedelay {
  394. 0%, 80%, 100% {
  395. transform: scale(0.0);
  396. -webkit-transform: scale(0.0);
  397. } 40% {
  398. transform: scale(1.0);
  399. -webkit-transform: scale(1.0);
  400. }
  401. }
  402. .lond{
  403. text-align: center;
  404. margin-top: 30rpx;
  405. font-size: 30rpx;
  406. }
  407. .roll-notice{height: 60rpx;background: rgba(0,0,0,.55);border-radius: 30rpx;padding: 0 30rpx 0 15rpx;font-size: 24rpx;color: #fff;position: fixed;left: 35rpx;align-items: center;animation: spin 5s ease-in-out infinite;animation-fill-mode: forwards;z-index: 20;max-width: 435rpx;overflow: hidden;}
  408. .roll-notice .flex{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
  409. .roll-notice image{width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 11rpx;}
  410. @keyframes spin {
  411. 0% {
  412. top: 305rpx;
  413. opacity: 0;
  414. }
  415. 25% {
  416. top: 255rpx;
  417. opacity: 1;
  418. }
  419. 50% {
  420. top: 255rpx;
  421. opacity: 1;
  422. }
  423. 75% {
  424. top: 215rpx;
  425. opacity: 0;
  426. }
  427. 100%{
  428. top: 215rpx;
  429. opacity: 0;
  430. }
  431. }
  432. .index-box{
  433. margin: 30rpx;
  434. }
  435. .index-box-title{
  436. line-height: 45rpx;
  437. font-size: 32rpx;
  438. font-family: PingFang SC-Bold, PingFang SC;
  439. font-weight: bold;
  440. color: #302222;
  441. }
  442. .pic230{
  443. width: 335rpx;
  444. height: 230rpx;
  445. }
  446. .pic480{
  447. width: 335rpx;
  448. height: 480rpx;
  449. }
  450. /* 参与活动 */
  451. .map-ac{overflow: hidden;margin-top: 30rpx;}
  452. .map-acs{white-space: nowrap;height: 312rpx;}
  453. .map-acs .li{display: inline-block;background: #fff;width: 270rpx;height: 260rpx;border-radius: 15rpx;font-size: 32rpx;color: #333;box-sizing: border-box;margin-right: 20rpx;}
  454. .map-acs .li:last-child{margin-right: 30rpx;}
  455. .map-acs .li image{width: 270rpx;height: 174rpx;border-radius: 15rpx;}
  456. .ac-title{
  457. line-height: 37rpx;
  458. font-size: 24rpx;
  459. font-family: PingFang SC-Regular, PingFang SC;
  460. font-weight: 400;
  461. color: #000;
  462. margin-top: 10rpx;
  463. white-space: pre-wrap;
  464. }
  465. .ac-date{
  466. line-height: 25rpx;
  467. font-size: 18rpx;
  468. font-family: PingFang SC-Regular, PingFang SC;
  469. font-weight: 400;
  470. color: #999999;
  471. }
  472. .ac-type{
  473. position: absolute;
  474. top: 0;
  475. left: 0;
  476. height: 41rpx;
  477. background: linear-gradient(350deg, #FF7000 0%, #FF9C4E 100%);
  478. border-radius: 0rpx 0rpx 20rpx 0rpx;
  479. opacity: 1;
  480. font-size: 20rpx;
  481. color: #FFFFFF;
  482. line-height: 41rpx;
  483. padding: 0 10rpx;
  484. }
  485. /* 投保案例 */
  486. .tbal-nav{
  487. justify-content: center;
  488. margin-top: 39rpx;
  489. margin-bottom: 35rpx;
  490. }
  491. .tbal-nav-item{
  492. line-height: 40rpx;
  493. font-size: 28rpx;
  494. font-family: PingFang SC-Medium, PingFang SC;
  495. font-weight: 500;
  496. color: #333333;
  497. margin-right: 60rpx;
  498. text-align: center;
  499. }
  500. .tbal-nav-item:last-child{
  501. margin-right: 0;
  502. }
  503. .tbal-nav-item-active{
  504. color: #009B62;
  505. }
  506. .tbal-nav-label{
  507. padding: 0 10rpx;
  508. line-height: 29rpx;
  509. margin-top: 2rpx;
  510. text-align: center;
  511. border-radius: 15rpx 15rpx 15rpx 15rpx;
  512. opacity: 1;
  513. font-size: 20rpx;
  514. color: #7A7B7F;
  515. }
  516. .tbal-nav-item-active .tbal-nav-label{
  517. background: linear-gradient(319deg, #A5F3D6 0%, #FAE4CD 100%);
  518. color: #009B62;
  519. }
  520. .tbal-item{
  521. padding: 30rpx;
  522. background: #FFFFFF;
  523. border-radius: 10rpx 10rpx 10rpx 10rpx;
  524. opacity: 1;
  525. margin-top: 20rpx;
  526. position: relative;
  527. }
  528. .tbal-tag{
  529. position: absolute;
  530. right: 0;
  531. top: 0;
  532. width: 86rpx;
  533. padding: 0 10rpx;
  534. line-height: 31rpx;
  535. background: linear-gradient(319deg, #FFDB94 0%, #FAE4CD 100%);
  536. border-radius: 0rpx 10rpx 0rpx 20rpx;
  537. font-size: 22rpx;
  538. font-weight: 400;
  539. color: #77501C;
  540. text-align: center;
  541. }
  542. .tbal-pic{
  543. width: 335rpx;
  544. height: 228rpx;
  545. border-radius: 10rpx 10rpx 10rpx 10rpx;
  546. margin-right: 41rpx;
  547. }
  548. .tbal-title{
  549. font-size: 31rpx;
  550. font-weight: bold;
  551. color: #333333;
  552. margin-top: 18rpx;
  553. margin-bottom: 15rpx;
  554. }
  555. .tbal-line{
  556. width: 1rpx;
  557. height: 57rpx;
  558. background:#DEDEDE;
  559. opacity: 1;
  560. margin: auto 20rpx;
  561. }
  562. .tbal-price{
  563. line-height: 40rpx;
  564. font-size: 28rpx;
  565. font-family: PingFang SC-Medium, PingFang SC;
  566. font-weight: 500;
  567. color: #FF5700;
  568. }
  569. .tbal-price-text{
  570. font-size: 20rpx;
  571. font-weight: 400;
  572. color: #7A7B7F;
  573. }
  574. .tbal-btn{
  575. width: 113rpx;
  576. line-height: 41rpx;
  577. background: #27D699;
  578. border-radius: 20rpx 20rpx 20rpx 20rpx;
  579. opacity: 1;
  580. font-size: 24rpx;
  581. font-weight: 500;
  582. color: #FFFFFF;
  583. text-align: center;
  584. margin-top: 46rpx;
  585. }
  586. /* 真实理赔故事 */
  587. .lpgs-item{
  588. width: 440rpx;
  589. display: inline-block;
  590. margin-right: 20rpx;
  591. position: relative;
  592. }
  593. .lpgs-icon{
  594. width: 230rpx;
  595. height: 101rpx;
  596. position: absolute;
  597. right: 0;
  598. top: 0;
  599. }
  600. .lpgs-header{
  601. width: 440rpx;
  602. height: 100rpx;
  603. background: linear-gradient(124deg, #F9F3E1 0%, #F8D494 100%);
  604. color: #FF5700;
  605. border-radius: 10rpx 10rpx 0rpx 0rpx;
  606. opacity: 1;
  607. font-weight: bold;
  608. padding: 25rpx 20rpx;
  609. font-size: 36rpx;
  610. line-height: 50rpx;
  611. box-sizing: border-box;
  612. }
  613. .lpgs-header-c{
  614. background: linear-gradient(124deg, #D6FCE4 0%, #A1EBB9 100%);
  615. color: #009B62;
  616. }
  617. .lpgs-content{
  618. box-sizing: border-box;
  619. width: 440rpx;
  620. background: #FBFBFB;
  621. border-radius: 0rpx 0rpx 10rpx 10rpx;
  622. padding: 20rpx;
  623. }
  624. .lpgs-item-content{
  625. padding-bottom: 20rpx;
  626. border-bottom: 2rpx solid #F1F1F1;
  627. flex-wrap: nowrap;
  628. margin-bottom: 20rpx;
  629. }
  630. .lpgs-item-content:last-child{
  631. border-bottom: none;
  632. }
  633. .lpgs-item-content-title{
  634. height: 72rpx;
  635. font-size: 28rpx;
  636. font-family: PingFang SC-Medium, PingFang SC;
  637. font-weight: 500;
  638. color: #333333;
  639. line-height: 36rpx;
  640. white-space: break-spaces;
  641. }
  642. .lpgs-item-content-look{
  643. line-height: 33rpx;
  644. font-size: 24rpx;
  645. font-family: PingFang SC-Regular, PingFang SC;
  646. font-weight: 400;
  647. color: #7A7B7F;
  648. margin-top: 5rpx;
  649. }
  650. .lpgs-item-content-look image{
  651. width: 29rpx;
  652. height: 20rpx;
  653. margin-right: 10rpx;
  654. }
  655. .lpgs-item-content-pic{
  656. width: 114rpx;
  657. height: 114rpx;
  658. margin-left: 10rpx;
  659. }
  660. /* 发现 */
  661. .fx-nav{
  662. height: 40rpx;
  663. line-height: 40rpx;
  664. font-size: 28rpx;
  665. font-family: PingFang SC-Medium, PingFang SC;
  666. font-weight: 500;
  667. color: #7A7B7F;
  668. display: inline-block;
  669. margin-right: 50rpx;
  670. }
  671. .fx-nav:last-child{
  672. margin-right: 0rpx;
  673. }
  674. .fx-nav-active{
  675. font-size: 32rpx;
  676. font-weight: bold;
  677. position: relative;
  678. color: #333333;
  679. }
  680. .fx-nav-active::after{
  681. content: '';
  682. position: absolute;
  683. bottom:-10rpx;
  684. left:50%;
  685. transform: translateX(-50%);
  686. width: 40rpx;
  687. height: 9rpx;
  688. background: #009B62;
  689. border-radius: 5rpx 5rpx 5rpx 5rpx;
  690. opacity: 1;
  691. }
  692. .fx-bar{
  693. padding: 35rpx 30rpx;
  694. background: #FFFFFF;
  695. box-shadow: 0rpx 5rpx 15rpx 1rpx rgba(0,0,0,0.06);
  696. border-radius: 10rpx 10rpx 10rpx 10rpx;
  697. opacity: 1;
  698. margin-top: 30rpx;
  699. }
  700. .fx-header{
  701. justify-content: space-between;
  702. margin-bottom: 44rpx;
  703. }
  704. .fx-header-title{
  705. font-size: 28rpx;
  706. line-height: 40rpx;
  707. font-weight: bold;
  708. color: #009B62;
  709. }
  710. .fx-header-more{
  711. font-size: 24rpx;
  712. font-family: PingFang SC-Regular, PingFang SC;
  713. font-weight: 400;
  714. color: #7A7B7F;
  715. margin-left: 20rpx;
  716. }
  717. .fx-header-more image{
  718. width: 9rpx;
  719. height: 19rpx;
  720. margin-left: 10rpx;
  721. }
  722. .fx-item{
  723. padding-bottom: 30rpx;
  724. border-bottom: 2rpx solid #DEDEDE;
  725. margin-top: 32rpx;
  726. }
  727. .fx-item:last-child{
  728. border-bottom: none;
  729. }
  730. .fx-item-title{
  731. height: 94rpx;
  732. line-height: 47rpx;
  733. font-size: 32rpx;
  734. font-family: PingFang SC-Bold, PingFang SC;
  735. font-weight: bold;
  736. color: #333333;
  737. }
  738. .fx-item-time{
  739. line-height: 33rpx;
  740. font-size: 24rpx;
  741. font-weight: 400;
  742. color: #7A7B7F;
  743. }
  744. .fx-item-look{
  745. line-height: 33rpx;
  746. font-size: 24rpx;
  747. font-family: PingFang SC-Regular, PingFang SC;
  748. font-weight: 400;
  749. color: #7A7B7F;
  750. margin-left: 20rpx;
  751. }
  752. .fx-item-look image{
  753. width: 29rpx;
  754. height: 20rpx;
  755. margin-right: 10rpx;
  756. }
  757. .fx-item-pic{
  758. width: 200rpx;
  759. height: 150rpx;
  760. border-radius: 12rpx 12rpx 12rpx 12rpx;
  761. }
  762. .foot-logo{
  763. background-color: #F8F8F8;
  764. }
  765. .foot-logo image{
  766. width: 150rpx;
  767. height: 42rpx;
  768. margin: auto;
  769. padding: 53rpx 0;
  770. }