common.css 4.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. /* 全屏状态栏占位 */
  2. .hold-status-bar{ height: var(--status-bar-height);width: 100%;display: none;}
  3. .hold-status-bar.show{display: block;background-color: #fff;}
  4. .custom-nav{position: fixed;top: var(--status-bar-height);left: 0;right: 0;height: 65rpx;line-height: 65rpx;color: #fff;z-index: 999;}
  5. .custom-nav-left{position: absolute;left: 0;top: 0;padding-right: 40rpx;transform: rotate(180deg);}
  6. .custom-nav-left .iconfont{font-size: 35rpx;}
  7. .custom-nav-center{text-align: center;}
  8. /* 全屏图片背景 */
  9. .page-bg-wrap{position: fixed;left: 0;right: 0;top: 0;bottom: 0;}
  10. .page-bg{width: 100%;max-height: 100%;}
  11. /* 头部图片 */
  12. .top-img{position: relative;height: 390rpx;overflow: hidden;}
  13. .top-img .img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;}
  14. .wrap{margin: 24rpx;}
  15. .padding24{padding: 24rpx;}
  16. .wrap40{margin: 32rpx 40rpx;}
  17. .full-btn{height: 98rpx;line-height: 98rpx;background-color: #26D18B;border-radius: 8rpx;font-size: 36rpx;color: #fff;text-align: center;}
  18. /* 浮底按钮 */
  19. .bottom-btn-wrap{height: 146rpx;margin-top: 44rpx;}
  20. .bottom-btn-wrap-bg{position: fixed;left: 0;right: 0;bottom: 0;background-color: #fff;height: inherit;}
  21. .bottom-btn{height: 98rpx;line-height: 98rpx;position: fixed;left: 24rpx;right: 24rpx;bottom: 24rpx;text-align: center;z-index: 99;border-radius: 8rpx;}
  22. .bottom-btn.btn{background-color: #26D18B;color: #fff;}
  23. /* 截取隐藏 */
  24. .f-ellipsis{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
  25. .common-content{margin-bottom: 32rpx;border-radius: 16rpx;box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.04);background-color: #fff;padding: 24rpx;}
  26. .common-content-title{display: flex;align-items: center;margin-bottom: 24rpx;}
  27. .common-content-icon{width: 45rpx;height: 45rpx;}
  28. .common-content-icon .icon{width: 100%;height: 100%;}
  29. .common-content-til{margin-left: 24rpx;font-size: 32rpx;color: #333;line-height: 45rpx;font-weight: 500;flex: 1;}
  30. .common-content-right{margin-right: 0;display: flex;align-items: center;font-size: 24rpx;color: #999;}
  31. .common-content-right .icon{width: 45rpx;height: 45rpx;margin-right: 18rpx;}
  32. .common-content-blink{margin-top: 6rpx;text-align: center;font-size: 24rpx;color: #26D18B;}
  33. .icon-form-item-wrap{margin-bottom: 32rpx;background-color: #fff;}
  34. .icon-form-item{display: flex;position: relative;height: 104rpx;align-items: center;}
  35. .icon-form-item::after{content: '';position: absolute;right: 0;bottom: 0;width: calc( 100% - 144rpx);height: 2rpx;background-color: #EDEEED;}
  36. .icon-form-item-wrap .icon-form-item:last-of-type::after{height: 0;}
  37. .icon-form-item-wrap .icon-form-item.full-border::after{width: 100%;}
  38. .icon-form-item-imgwrap{width: 144rpx;height: 44rpx;box-sizing: border-box;text-align: right;padding-right: 40rpx;}
  39. .icon-form-item-img{width: 44rpx;height: 100%;}
  40. .icon-form-item-text{flex: 1;font-size: 28rpx;color: #333;}
  41. .icon-form-item-icon{margin-right: 0;width: 68rpx;}
  42. .icon-form-item-icon .iconfont{font-size: 30rpx;color: #ccc;}
  43. /* 头部轮播 */
  44. .swiper-wrap{margin: 0 auto 32rpx;height: 320rpx;overflow: hidden;position: relative;}
  45. .swiper{height: 100%;text-align: center;background-color: #fbfffd;}
  46. .adv-item{height: 100%;}
  47. .swiper-wrap .pic{width: 100%;height: 100%;}
  48. .full-search{padding-left: 16rpx;margin-bottom: 24rpx;}
  49. /* css点点点 动画 */
  50. .dotting {
  51. display: inline-block; width: 10px; min-height: 2px;
  52. padding-right: 2px;
  53. border-left: 2px solid currentColor; border-right: 2px solid currentColor;
  54. background-color: currentColor; background-clip: content-box;
  55. box-sizing: border-box;
  56. animation: dot 4s infinite step-start both;
  57. /* *zoom: expression(this.innerHTML = '...'); */ /* IE7 */
  58. }
  59. .dotting:before { content: '...'; } /* IE8 */
  60. .dotting::before { content: ''; }
  61. :root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */
  62. @keyframes dot {
  63. 25% { border-color: transparent; background-color: transparent; } /* 0个点 */
  64. 50% { border-right-color: transparent; background-color: transparent; } /* 1个点 */
  65. 75% { border-right-color: transparent; } /* 2个点 */
  66. }