hospitalServices.acss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. .hospital-new-component .hospital-services-component {
  2. overflow: hidden;
  3. position: relative;
  4. z-index: 1;
  5. padding: 32rpx 24rpx;
  6. background-color: #fff;
  7. border-top-left-radius: 24rpx;
  8. border-top-right-radius: 24rpx;
  9. }
  10. .hospital-new-component .hospital-services-component .service-item {
  11. height: 156rpx;
  12. }
  13. .hospital-new-component .hospital-services-component .service-item .service-item-content {
  14. background-size: cover;
  15. background-position: center;
  16. background-repeat: no-repeat;
  17. display: flex;
  18. height: 100%;
  19. padding: 24rpx;
  20. border-radius: 16rpx;
  21. background-image: url("https://gw.alipayobjects.com/mdn/rms_373ab8/afts/img/A*XKPySZVmyGQAAAAAAAAAAAAAARQnAQ");
  22. }
  23. .hospital-new-component .hospital-services-component .icon-container {
  24. display: none;
  25. }
  26. .hospital-new-component .hospital-services-component .left-content {
  27. flex: 1;
  28. }
  29. .hospital-new-component .hospital-services-component .left-content .title {
  30. color: #fff;
  31. font-weight: bold;
  32. font-size: 32rpx;
  33. display: flex;
  34. align-items: center;
  35. justify-content: space-between;
  36. }
  37. .hospital-new-component .hospital-services-component .left-content .desc {
  38. color: #fff;
  39. font-size: 24rpx;
  40. margin-top: 8rpx;
  41. }
  42. .hospital-new-component .hospital-services-component .action-button {
  43. display: none;
  44. }
  45. .hospital-new-component .hospital-services-component.model-a .service-item {
  46. margin-bottom: 16rpx;
  47. }
  48. .hospital-new-component .hospital-services-component.model-a .service-item .service-item-content {
  49. align-items: center;
  50. }
  51. .hospital-new-component .hospital-services-component.model-a .service-item:last-child {
  52. margin-bottom: 0;
  53. }
  54. .hospital-new-component .hospital-services-component.model-a .icon-container {
  55. width: 80rpx;
  56. height: 80rpx;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. margin-right: 24rpx;
  61. border-radius: 50%;
  62. background-color: #fff;
  63. }
  64. .hospital-new-component .hospital-services-component.model-a .icon-image {
  65. width: 56rpx;
  66. height: 56rpx;
  67. display: block;
  68. }
  69. .hospital-new-component .hospital-services-component.model-a .action-button {
  70. display: block;
  71. height: 54rpx;
  72. padding: 0 32rpx;
  73. border: none;
  74. outline: none;
  75. line-height: 54rpx;
  76. border-radius: 28rpx;
  77. background-color: #fff;
  78. color: #FF9123;
  79. font-size: 24rpx;
  80. font-weight: bold;
  81. }
  82. .hospital-new-component .hospital-services-component.model-b,
  83. .hospital-new-component .hospital-services-component.model-c {
  84. display: flex;
  85. flex-wrap: wrap;
  86. margin-bottom: -16rpx;
  87. }
  88. .hospital-new-component .hospital-services-component.model-b .right-content,
  89. .hospital-new-component .hospital-services-component.model-c .right-content {
  90. height: 100%;
  91. }
  92. .hospital-new-component .hospital-services-component.model-b .left-content .title::after,
  93. .hospital-new-component .hospital-services-component.model-c .left-content .title::after {
  94. content: '';
  95. display: block;
  96. background-size: cover;
  97. background-position: center;
  98. background-repeat: no-repeat;
  99. width: 20rpx;
  100. height: 20rpx;
  101. background-image: url('https://gw.alipayobjects.com/mdn/rms_373ab8/afts/img/A*n_7ZTq7ZXb8AAAAAAAAAAAAAARQnAQ');
  102. }
  103. .hospital-new-component .hospital-services-component.model-b .service-item {
  104. margin-right: 16rpx;
  105. margin-bottom: 16rpx;
  106. width: calc(50% - 8rpx);
  107. }
  108. .hospital-new-component .hospital-services-component.model-b .service-item:nth-child(2n) {
  109. margin-right: 0;
  110. }
  111. .hospital-new-component .hospital-services-component.model-c .service-item {
  112. margin-right: 16rpx;
  113. margin-bottom: 16rpx;
  114. width: calc(33.3% - 10.66rpx);
  115. }
  116. .hospital-new-component .hospital-services-component.model-c .service-item:nth-child(3n) {
  117. margin-right: 0;
  118. }