caimei-authentic-www/pages/ldm/approve/personnel/training/index.vue

<template>
  <div class="page">
    <div class="page-top"></div>
    <div class="page-content">
      <div class="title">专业美容培训师</div>
      <div class="list">
        <div class="section flex items-center">
          <img class="cover" src="https://picsum.photos/200/200" />
          <div class="info">
            <div class="name">宋医师<i /></div>
            <div class="tag">皮肤美容科 | 主任医师│从业24年</div>
            <div class="more">点击查看</div>
          </div>
        </div>
        <div class="section flex items-center">
          <img class="cover" src="https://picsum.photos/200/200" />
          <div class="info">
            <div class="name">宋医师<i /></div>
            <div class="tag">皮肤美容科 | 主任医师│从业24年</div>
            <div class="more">点击查看</div>
          </div>
        </div>
        <div class="section flex items-center">
          <img class="cover" src="https://picsum.photos/200/200" />
          <div class="info">
            <div class="name">宋医师<i /></div>
            <div class="tag">皮肤美容科 | 主任医师│从业24年</div>
            <div class="more">点击查看</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  layout: 'app-ldm',
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .page-top {
    height: 596px;
    background: url(https://static.caimei365.com/www/authentic/pc/ldm-bg-training-doctor.png)
      no-repeat center;
    background-size: auto 596px;
  }
  .page-content {
    width: 838px;
    margin: 0 auto;
    overflow: hidden;
    .title {
      font-size: 22px;
      color: #221815;
      padding-top: 112px;
    }
    .list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 27px;
      .section {
        width: 407px;
        padding: 14px;
        background: #f1f1f1;
        border-radius: 20px;
        box-sizing: border-box;
        margin-bottom: 25px;
        .cover {
          display: block;
          width: 92px;
          height: 92px;
          border-radius: 17px;
        }
        .info {
          position: relative;
          flex: 1;
          margin-left: 25px;
          .name {
            font-size: 28px;
            color: #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            i {
              font-size: 0;
              display: inline-block;
              background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-star.png)
                no-repeat left center;
              padding-left: 13px;
              vertical-align: 2px;
              margin-left: 7px;
              &::after,
              &::before {
                display: inline-block;
                content: '';
                width: 13px;
                height: 13px;
                background: url(https://static.caimei365.com/www/authentic/pc/ldm-icon-star.png)
                  no-repeat center;
                vertical-align: middle;
                margin-left: 4px;
              }
            }
          }
          .tag {
            width: 190px;
            font-size: 10px;
            color: #221815;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 12px;
          }
          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 12px;
            color: #0080ed;
            cursor: pointer;
            &::after {
              content: '>';
              margin-left: 8px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .page-top {
    height: 59.6vw;
    background: url(https://static.caimei365.com/www/authentic/h5/ldm-bg-training-doctor.png);
    background-size: auto 59.6vw;
  }
  .page-content {
    .title {
      font-size: 3.6vw;
      color: #221815;
      padding-left: 5.6vw;
      padding-top: 9.8vw;
    }
    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 6vw;
      .section {
        width: 95vw;
        padding: 3.2vw;
        background: #f1f1f1;
        border-radius: 2vw;
        box-sizing: border-box;
        margin-bottom: 4.8vw;
        .cover {
          display: block;
          width: 21.5vw;
          height: 21.5vw;
          border-radius: 1.7vw;
        }
        .info {
          position: relative;
          flex: 1;
          margin-left: 2.7vw;
          .name {
            font-size: 6.6vw;
            color: #000;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;

            i {
              font-size: 0;
              display: inline-block;
              background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-star.png)
                no-repeat left center;
              padding-left: 3.2vw;
              vertical-align: 1vw;
              margin-left: 1.8vw;
              &::after,
              &::before {
                display: inline-block;
                content: '';
                width: 3.2vw;
                height: 3.2vw;
                background: url(https://static.caimei365.com/www/authentic/h5/ldm-icon-star.png)
                  no-repeat center;
                vertical-align: middle;
                margin-left: 0.9vw;
              }
            }
          }
          .tag {
            width: 46vw;
            font-size: 2.5vw;
            color: #221815;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-top: 1.2vw;
          }
          .more {
            position: absolute;
            bottom: 0;
            right: 0;
            font-size: 3vw;
            color: #0080ed;
            &::after {
              content: '>';
              margin-left: 1vw;
            }
          }
        }
      }
    }
  }
}
</style>