my_loan/htmldev/wxMini/pages/media/media.scss

.wrapper {
  width: 100%;
  padding-top: 20rpx;
}

.page-section {
  width: 100%;
  margin: 22rpx auto 40rpx;

  swiper {
    height: 360rpx;
  }

  .swiper-item {
    position: relative;
    left: 0;
    top: 0;
    width: 690rpx;
    height: 100%;
    margin: 0 auto;
    border-radius: 24rpx;
    overflow: hidden;
  }

  .photo {
    display: block;
    width: 100%;
    height: 100%;
    background: pink;
  }

  .info {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 24rpx 8rpx;
  }

  .label-wrap,
  .value-wrap {
    display: flex;
    align-items: center;
  }

  .value-wrap {
    width: calc(100% - 118rpx);
  }

  .icon {
    width: 35rpx;
    height: 34rpx;
    background: pink;
  }

  .label,
  .name {
    font-size: 28rpx;
    line-height: 46rpx;
    color: rgba(255, 255, 255, 1);
  }

  .name,
  .address {
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .address {
    padding-left: 6rpx;
    font-size: 20rpx;
    line-height: 46rpx;
    color: rgba(229, 229, 229, 1);
  }

  .swiper-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;

    & > view {
      width: 16rpx;
      height: 16rpx;
      margin-left: 16rpx;
      border-radius: 6rpx;
      background: rgba(145, 179, 121, 0.6);

      &:nth-of-type(1) {
        margin-left: 0;
      }

      &.active {
        background: rgba(145, 179, 121, 1);
      }
    }
  }
}

.main {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  padding: 30rpx 0 314rpx;
}

.list {
  width: 336rpx;
  min-height: 314rpx;
  margin-left: 18rpx;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;

  &:nth-of-type(2n + 1) {
    margin-left: 0;
  }
}