123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- <template>
- <div class="page">
- <div class="page-title">专业美容培训师</div>
- <div class="page-top"><div class="swiper"></div></div>
- <div class="page-content">
- <div class="doctor-info">
- <div class="name">宋医师</div>
- <div class="tag">皮肤美容科 | 主任医师 | 从业24年</div>
- </div>
- <div class="param-list">
- <div class="param">
- <div class="name">个人简介:</div>
- <div class="content">
- 宋美丽,医学博士,主任医师。从事皮肤性病医教研工作三十多年。
- 在皮肤素病、皮肤血管病、结缔组织病,化妆品皮肤损伤、皮肤激光
- 医学、医疗美容技术等均有较深的造诣
- </div>
- </div>
- <div class="param">
- <div class="name">擅长:</div>
- <div class="content">面部皮肤管理,女性健康保养</div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- layout: 'app-ldm',
- }
- </script>
- <style scoped lang="scss">
- @media screen and (min-width: 768px) {
- .page {
- position: relative;
- display: flex;
- justify-content: space-between;
- width: 1016px;
- margin: 0 auto;
- padding-top: 117px;
- }
- .page-title {
- position: absolute;
- left: 0;
- top: 60px;
- font-size: 26px;
- color: #221815;
- }
- .page-top {
- .swiper {
- width: 452px;
- height: 452px;
- background-color: pink;
- }
- }
- .page-content {
- width: 503px;
- .doctor-info {
- padding-bottom: 35px;
- .name {
- font-size: 35px;
- font-weight: bold;
- color: #000;
- margin-bottom: 22px;
- &::after {
- content: '';
- display: inline-block;
- margin-left: 12px;
- width: 36px;
- height: 42px;
- background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-badge.png)
- no-repeat center;
- background-size: 36px 42px;
- vertical-align: -8px;
- }
- }
- .tag {
- font-size: 16px;
- color: #221815;
- }
- }
- .param-list {
- .param {
- padding: 32px 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.3);
- &:first-child {
- border-top: 1px solid rgba(0, 0, 0, 0.3);
- }
- .name {
- font-size: 18px;
- font-weight: bold;
- color: #000;
- }
- .content {
- font-size: 16px;
- color: #9c9c9c;
- margin-top: 12px;
- text-align: justify;
- line-height: 1.7;
- }
- }
- }
- }
- }
- @media screen and (max-width: 768px) {
- .page-title {
- display: none;
- }
- .page-top {
- .swiper {
- width: 100vw;
- height: 100vw;
- background-color: pink;
- }
- }
- .page-content {
- padding: 4.7vw 6.2vw;
- .doctor-info {
- padding-bottom: 6vw;
- .name {
- font-size: 6.2vw;
- font-weight: bold;
- color: #000;
- margin-bottom: 3.2vw;
- &::after {
- content: '';
- display: inline-block;
- margin-left: 1.8vw;
- width: 6.5vw;
- height: 7.6vw;
- background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-badge.png)
- no-repeat center;
- background-size: 6.4vw 7.6vw;
- vertical-align: -1.4vw;
- }
- }
- .tag {
- font-size: 3vw;
- color: #221815;
- }
- }
- .param-list {
- .param {
- padding: 6vw 0;
- border-bottom: 0.1vw solid rgba(0, 0, 0, 0.3);
- &:first-child {
- border-top: 0.1vw solid rgba(0, 0, 0, 0.3);
- }
- .name {
- font-size: 3.2vw;
- font-weight: bold;
- color: #000;
- }
- .content {
- font-size: 3vw;
- color: #9c9c9c;
- margin-top: 1.6vw;
- text-align: justify;
- line-height: 1.7;
- }
- }
- }
- }
- }
- </style>
|