detail.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <div class="page">
  3. <div class="page-title">专业美容培训师</div>
  4. <div class="page-top"><div class="swiper"></div></div>
  5. <div class="page-content">
  6. <div class="doctor-info">
  7. <div class="name">宋医师</div>
  8. <div class="tag">皮肤美容科 | 主任医师 | 从业24年</div>
  9. </div>
  10. <div class="param-list">
  11. <div class="param">
  12. <div class="name">个人简介:</div>
  13. <div class="content">
  14. 宋美丽,医学博士,主任医师。从事皮肤性病医教研工作三十多年。
  15. 在皮肤素病、皮肤血管病、结缔组织病,化妆品皮肤损伤、皮肤激光
  16. 医学、医疗美容技术等均有较深的造诣
  17. </div>
  18. </div>
  19. <div class="param">
  20. <div class="name">擅长:</div>
  21. <div class="content">面部皮肤管理,女性健康保养</div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. export default {
  29. layout: 'app-ldm',
  30. }
  31. </script>
  32. <style scoped lang="scss">
  33. @media screen and (min-width: 768px) {
  34. .page {
  35. position: relative;
  36. display: flex;
  37. justify-content: space-between;
  38. width: 1016px;
  39. margin: 0 auto;
  40. padding-top: 117px;
  41. }
  42. .page-title {
  43. position: absolute;
  44. left: 0;
  45. top: 60px;
  46. font-size: 26px;
  47. color: #221815;
  48. }
  49. .page-top {
  50. .swiper {
  51. width: 452px;
  52. height: 452px;
  53. background-color: pink;
  54. }
  55. }
  56. .page-content {
  57. width: 503px;
  58. .doctor-info {
  59. padding-bottom: 35px;
  60. .name {
  61. font-size: 35px;
  62. font-weight: bold;
  63. color: #000;
  64. margin-bottom: 22px;
  65. &::after {
  66. content: '';
  67. display: inline-block;
  68. margin-left: 12px;
  69. width: 36px;
  70. height: 42px;
  71. background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-badge.png)
  72. no-repeat center;
  73. background-size: 36px 42px;
  74. vertical-align: -8px;
  75. }
  76. }
  77. .tag {
  78. font-size: 16px;
  79. color: #221815;
  80. }
  81. }
  82. .param-list {
  83. .param {
  84. padding: 32px 0;
  85. border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  86. &:first-child {
  87. border-top: 1px solid rgba(0, 0, 0, 0.3);
  88. }
  89. .name {
  90. font-size: 18px;
  91. font-weight: bold;
  92. color: #000;
  93. }
  94. .content {
  95. font-size: 16px;
  96. color: #9c9c9c;
  97. margin-top: 12px;
  98. text-align: justify;
  99. line-height: 1.7;
  100. }
  101. }
  102. }
  103. }
  104. }
  105. @media screen and (max-width: 768px) {
  106. .page-title {
  107. display: none;
  108. }
  109. .page-top {
  110. .swiper {
  111. width: 100vw;
  112. height: 100vw;
  113. background-color: pink;
  114. }
  115. }
  116. .page-content {
  117. padding: 4.7vw 6.2vw;
  118. .doctor-info {
  119. padding-bottom: 6vw;
  120. .name {
  121. font-size: 6.2vw;
  122. font-weight: bold;
  123. color: #000;
  124. margin-bottom: 3.2vw;
  125. &::after {
  126. content: '';
  127. display: inline-block;
  128. margin-left: 1.8vw;
  129. width: 6.5vw;
  130. height: 7.6vw;
  131. background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-badge.png)
  132. no-repeat center;
  133. background-size: 6.4vw 7.6vw;
  134. vertical-align: -1.4vw;
  135. }
  136. }
  137. .tag {
  138. font-size: 3vw;
  139. color: #221815;
  140. }
  141. }
  142. .param-list {
  143. .param {
  144. padding: 6vw 0;
  145. border-bottom: 0.1vw solid rgba(0, 0, 0, 0.3);
  146. &:first-child {
  147. border-top: 0.1vw solid rgba(0, 0, 0, 0.3);
  148. }
  149. .name {
  150. font-size: 3.2vw;
  151. font-weight: bold;
  152. color: #000;
  153. }
  154. .content {
  155. font-size: 3vw;
  156. color: #9c9c9c;
  157. margin-top: 1.6vw;
  158. text-align: justify;
  159. line-height: 1.7;
  160. }
  161. }
  162. }
  163. }
  164. }
  165. </style>