index.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. .content {
  2. padding: 0 48upx 150upx;
  3. word-wrap: break-all;
  4. word-break: normal; }
  5. .content .tip {
  6. font-size: 28upx;
  7. color: #3384FF;
  8. background: #F0F8FF;
  9. border-radius: 12upx;
  10. padding: 24upx 12upx;
  11. margin: 24upx auto; }
  12. .content .item .item-head {
  13. padding: 30upx 0; }
  14. .content .item .item-head.between {
  15. display: flex;
  16. justify-content: space-between;
  17. align-items: center; }
  18. .content .item .item-head button {
  19. float: right; }
  20. .content .item .item-head .title {
  21. display: flex;
  22. justify-content: flex-start;
  23. align-items: center; }
  24. .content .item .item-head .title .dot {
  25. width: 36upx;
  26. height: 36upx;
  27. border-radius: 50%;
  28. position: relative;
  29. background: rgba(51, 132, 255, 0.2); }
  30. .content .item .item-head .title .dot::after {
  31. width: 18upx;
  32. height: 18upx;
  33. border-radius: 50%;
  34. display: block;
  35. content: "";
  36. position: absolute;
  37. left: 50%;
  38. top: 50%;
  39. margin-top: -8upx;
  40. margin-left: -8upx;
  41. background: #3384FF; }
  42. .content .item .item-head .title .name {
  43. font-size: 30upx;
  44. color: #0a0a0a;
  45. padding-left: 15upx; }
  46. .content .item .desc, .content .item .aiDiagnose {
  47. text-align: justify;
  48. color: #333;
  49. line-height: 40upx;
  50. /* #ifdef H5 */
  51. /* #endif */ }
  52. .content .item .desc /deep/ image, .content .item .desc img, .content .item .aiDiagnose /deep/ image, .content .item .aiDiagnose img {
  53. display: block;
  54. width: 600upx;
  55. margin: 20upx auto; }
  56. .content .item .desc::v-deep image, .content .item .desc img, .content .item .aiDiagnose::v-deep image, .content .item .aiDiagnose img {
  57. display: block;
  58. width: 600upx;
  59. margin: 20upx auto; }
  60. .content .item .tags {
  61. padding-top: 16upx; }
  62. .content .item .tags .item {
  63. display: inline-block;
  64. color: #409eff;
  65. border: 1px solid #d9ecff;
  66. background-color: #ecf5ff;
  67. margin-right: 8upx;
  68. padding: 4upx 12upx;
  69. border-radius: 4upx;
  70. font-size: 22upx; }
  71. .content .item.doctor-info .user {
  72. display: flex;
  73. justify-content: flex-start;
  74. align-items: center;
  75. padding-bottom: 18upx; }
  76. .content .item.doctor-info .user .avatar {
  77. display: block;
  78. width: 72upx;
  79. height: 72upx;
  80. border-radius: 50%; }
  81. .content .item.doctor-info .user .info {
  82. padding-left: 16upx; }
  83. .content .item.doctor-info .user .info .user-name {
  84. font-size: 24upx;
  85. color: #333; }
  86. .content .item.doctor-info .user .info .user-tags {
  87. font-size: 22upx;
  88. color: #666;
  89. padding-top: 8upx; }
  90. .content .item.doctor-info .hospital .hospital-name {
  91. font-size: 22upx;
  92. color: #666;
  93. padding-right: 12upx; }
  94. .content .item.doctor-info .hospital .hospital-level {
  95. font-size: 18upx;
  96. color: #3384FF;
  97. padding: 6upx 8upx;
  98. background-color: #EDF4FF; }
  99. .content .item.doctor-info .specialty {
  100. line-height: 34upx;
  101. padding-top: 21upx; }
  102. .content .item.doctor-info .specialty .specialty-head {
  103. color: #3384FF;
  104. position: relative; }
  105. .content .item.doctor-info .specialty .specialty-head::after {
  106. width: 40%;
  107. height: 6upx;
  108. display: block;
  109. content: "";
  110. position: absolute;
  111. left: 50%;
  112. transform: translateX(-50%);
  113. bottom: -5upx;
  114. background-color: #FA6400;
  115. z-index: 999; }
  116. .content .item.doctor-info .specialty .specialty-message {
  117. font-size: 22upx;
  118. color: #999;
  119. padding-left: 7upx; }
  120. .content .item.assist-container .head-highlight {
  121. color: #3384ff;
  122. font-size: 30upx; }
  123. .content .item.image-container .item-cont {
  124. display: flex;
  125. justify-content: flex-start;
  126. flex-direction: column; }
  127. .content .item.image-container .item-cont .imgbox {
  128. width: 220upx;
  129. height: 220upx;
  130. border-radius: 6upx;
  131. overflow: hidden;
  132. margin-right: 15upx;
  133. border: 1px solid #eaeaea; }
  134. .content .item.image-container .item-cont .imgbox .image-pic {
  135. display: block;
  136. width: 220upx;
  137. height: 220upx; }
  138. .content .handle-wrap {
  139. width: 100%;
  140. position: fixed;
  141. bottom: 0;
  142. left: 0;
  143. padding: 10upx 0; }
  144. .content .submit-BT {
  145. width: 702upx;
  146. height: 100upx;
  147. line-height: 100upx;
  148. text-align: center;
  149. background-color: #3384FF;
  150. border-radius: 12upx;
  151. color: #fff;
  152. font-size: 32upx;
  153. margin: 0 auto; }
  154. .content .submit-BT.appraise {
  155. background-color: #FA6400; }
  156. .content .submit-BT.recommend {
  157. width: 500upx;
  158. margin: 20upx auto; }
  159. .content .appraise-wrap {
  160. position: fixed;
  161. left: 0;
  162. bottom: 0;
  163. right: 0;
  164. top: 0;
  165. z-index: 999; }
  166. .content .appraise-wrap .appraise-wrap-mask {
  167. width: 100%;
  168. height: 100%;
  169. background-color: rgba(0, 0, 0, 0.6);
  170. display: flex;
  171. align-items: flex-end; }
  172. .content .appraise-wrap .appraise-wrap-mask .appraise-container {
  173. width: 100%;
  174. padding: 0 32upx 20upx;
  175. background-color: #fff;
  176. box-sizing: border-box; }
  177. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-title {
  178. height: 96upx;
  179. border-bottom: 1px solid #e5e5e5;
  180. text-align: center;
  181. line-height: 96upx;
  182. font-size: 32upx;
  183. color: #323233;
  184. position: relative; }
  185. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-title .closeBt {
  186. width: 100upx;
  187. height: 96upx;
  188. position: absolute;
  189. right: 10upx;
  190. top: 0; }
  191. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-title .closeBt .close {
  192. display: block;
  193. width: 50upx;
  194. height: 50upx;
  195. position: relative;
  196. margin: 23upx auto;
  197. transform: rotate(45deg); }
  198. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-title .closeBt .close::after {
  199. width: 4upx;
  200. height: 50upx;
  201. position: absolute;
  202. display: block;
  203. content: "";
  204. left: 50%;
  205. top: 50%;
  206. transform: translate(-50%, -50%);
  207. background-color: #C8C9CC; }
  208. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-title .closeBt .close::before {
  209. width: 50upx;
  210. height: 4upx;
  211. position: absolute;
  212. display: block;
  213. content: "";
  214. left: 50%;
  215. top: 50%;
  216. transform: translate(-50%, -50%);
  217. background-color: #C8C9CC; }
  218. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-cont {
  219. padding-bottom: 66upx; }
  220. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-cont .item {
  221. height: 88upx;
  222. border-bottom: 1px solid #ccc; }
  223. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-cont .item .radio {
  224. height: 100%;
  225. display: flex;
  226. justify-content: flex-start;
  227. align-items: center; }
  228. .content .appraise-wrap .appraise-wrap-mask .appraise-container .appraise-cont .item .radio .star {
  229. padding-left: 20upx; }
  230. .content .appraise-wrap .appraise-wrap-mask .appraise-container .submit-BT {
  231. width: auto; }