//引入全局配置
@import "c/conf";
@import "c/mx";
@import "c/f";
@import "a/c";

.m-upload {
  .list {
    display: flex;
    flex-wrap: wrap;
    margin: 10rpx -15rpx;

    .item {
      margin: 10rpx 15rpx;
      border-radius: 10rpx;

      &.z-error {
        box-shadow: 0 0 12rpx 4rpx #f33;
      }

      .item-add {
        position: relative;
        width: 150rpx;
        height: 150rpx;
        background: #e9e9e9;
        border-radius: 10rpx;
        image {
          @include hub;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .item-file {
        position: relative;
        box-sizing: border-box;
        padding: 15rpx;
        width: 150rpx;
        height: 150rpx;
        background: #fff;
        box-shadow: 0 3rpx 24rpx 0 rgba(211, 211, 211, 0.26);
        border-radius: 10rpx;
        overflow: hidden;

        .item-file-ico {
          image {
            display: block;
            margin: 5rpx auto;
            width: 60rpx;
            height: 60rpx;
          }
        }
        .item-file-name {
          @include toeM(2);
          margin-top: 12rpx;
          color: $fc1;
          font-size: 20rpx;
          line-height: 26rpx;
          text-align: center;
        }
      }
      .item-img {
        position: relative;
        box-sizing: border-box;
        width: 150rpx;
        height: 150rpx;
        background: #fff;
        box-shadow: 0 3rpx 24rpx 0 rgba(211, 211, 211, 0.26);
        border-radius: 10rpx;
        overflow: hidden;

        .item-img-bg {
          display: block;
          width: 150rpx;
          height: 150rpx;
        }

        .item-img-name {
          @include toe;
          position: absolute;
          bottom: 0;
          left: 0;
          box-sizing: border-box;
          width: 100%;
          padding: 0 15rpx;
          height: 50rpx;
          line-height: 50rpx;
          background: rgba(0, 0, 0, 0.3);
          color: #ffffff;
          font-size: 20rpx;
        }
      }
    }
  }
}