orchestra-app/src/school/orchestra/compontent/photo.module.less

.phone {
  overflow: hidden;
  padding: 0 13px 0;

  .select {
    margin-top: 12px;
    border-radius: 10px;
    overflow: hidden;
    height: 45px;

    .icon {
      width: 17px;
      height: 17px;
      margin-right: 4px;
      flex-shrink: 0;
    }

    :global {
      .van-cell__title {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .van-cell__right-icon {
        color: #333;
        transform: rotate(90deg);
        margin: 0 0 0 4px;
      }
    }
  }
}

.addPhotoTop {
  color: var(--van-primary-text);
  font-size: 14px;
}

.addPhone {
  margin-top: 12px;
  color: var(--van-primary-text);
  border-color: #F67146;
  border-radius: 10px;
  font-size: 16px;
  background: #FFF7F3;
}

.btnGroup {
  display: flex;
  padding: 12px;

  .addPhone {
    margin: 0 8px;
  }
}

.phoneContainer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 32px;
  margin: 0 12px;

  .item {
    position: relative;
    padding-top: 12px;

    .more {
      display: inline-block;
      position: absolute;
      top: 130px;
      right: 8px;
      background: url('../images/icon_more.png') center center no-repeat;
      background-size: contain;
      width: 24px;
      height: 24px;
      z-index: 12;
    }

    .img {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eaeaea;
      width: 150px;
      height: 150px;
      border-radius: 2px;
      overflow: hidden;
      background-color: #eaeaea;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url('../images/icon-photo-default.png');
      z-index: 10;
    }

    .imgSection {
      position: relative;

      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #CACED1;
        z-index: -1;
        transform: rotate(5deg);
      }
    }

    .name {
      padding: 6px 0 4px;
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      max-width: 168px;
    }

    .num {
      font-size: 12px;
      color: #777777;
      line-height: 17px;
    }
  }
}

.dialogTitle {
  i {
    display: inline-block;
    width: 4px;
    height: 14px;
    background: #ff8057;
    border-radius: 2px;
    margin-right: 6px;
  }

  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  line-height: 25px;
  padding: 20px 0 20px 25px;
}

.phoneName {
  background: #f2f2f2;
  border-radius: 10px;
  margin: 0 15px 30px;
  width: auto;
}

.photos {
  padding: 0 16px 16px;
}

:global {
  .van-image-preview {

    .van-image-preview__close-icon,
    .van-image-preview__index {
      top: 50px;
    }
  }
}