.content {
  padding: 12px;
}

.wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 2px solid #FFFFFF;
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  // padding-top: 22px;
  padding-bottom: 20px;
  box-sizing: border-box;

  div {
    box-sizing: border-box;
  }

  .icon {
    position: absolute;
    left: 50%;
    top: -8px;
    width: 126px;
    padding: 5px 10px;
    transform: translate(-50%, 0);
    z-index: 10;
    background-image: url('./image/icon-top.png');
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;

    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

.item {
  margin: 20px 0 0 0;
  padding: 0 8px;
  width: 33.333%;

  .cover {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  }

  .model {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    line-height: 18px;

    img {
      width: 12px;
      height: 12px;
      margin-right: 4px;
    }
  }

  .coverNum {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    color: rgba(116, 44, 0, 1);
    background-color: #fff;
    padding: 4px 6px;
    line-height: 1;
    font-size: 12px;
    z-index: 1;
    white-space: nowrap;
    word-break: break-all;
    min-width: 50px;
    text-align: center;
  }

  .coverImg {
    width: 100%;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAMAAAAPdrEwAAABOFBMVEUAAAC0tLTT09PU1NTt7e3////T09P////T09P////T09P////X19f////U1NTU1NTT09PT09PU1NTU1NTV1dXT09PU1NTU1NTV1dXZ2dn+/v7R0dH////////KysrIyMjT09O0tLTU1NS0tLTU1NS0tLTT09PT09PT09PU1NTU1NTU1NTT09O2trbU1NTV1dXV1dXW1tbV1dXW1tbV1dXJycm4uLj///+0tLT///+0tLT////p6em0tLT4+Pj///+2trb///+1tbX///+0tLT////T09P5+fn+/v63t7e8vLz8/Pzl5eXW1tbBwcH39/fw8PDs7Ozb29v7+/vg4ODOzs65ubny8vLJycnp6enGxsbFxcW+vr62trb09PTY2NjLy8vCwsLn5+fi4uLS0tLu7u7Q0NDd3d02Mu/gAAAARHRSTlMAnPwvBfv07ODdw5AbGezmyrirl5B4aT0kDZyclTwsIPj48+Ta1tPS0LGhiIaEcGJgV05FNhMS7++8vKyslZRzc1ZWJRSpe/cAAALfSURBVFjD7djXcuIwGAVg1pTQAiT0Ekiy6b1v7whsA6b3EGAJu+//BstaiWNiCYGlXGTG55KBDzH6j2xjMmJET5ZdDivQFavDtTxLXlsCFFlam7HmiUxl49ftApRxYWkHLe3A0lZa2oqlAXUMGk/fHG9vpCnSk/pZNJ18m6aOWELRN1CmtbMI+jjNJH0Evc2GlhD0Bhu6h6DTjPIq6Pqonb8XXoCWmjKSHTCnpccp5ges6bHCZAW2dBc8JcOWLqjoPFu6oqLLr2bVQxX9h/GElBWmKDCmxSKAyXWYt1GE677rLtLGejsLcuOCQMI7lVFlsMjxJJUeW3bP+OSTskBJqcuSFppAFT4vsqMrYDrVAitazMHV8kBJs8WGzsPmNoRCFSj5fcuA7vJKvcQ8UJKrCNT0WH0mdEpASbFOSdfhyClvzagGsSzR0D14LHTSSho1/mkQaw39dB9u2vThCU8KQj1JtFiVt+z5ONSLmnoSaeszuia/+lfzAaGS09STQDum6SH/cOXX5rY9Xz0Rj6Sqy0YmjUzrbp56ah6kIT2AH8Pe4M5TT83jP6ThsnALmq+eiD8tlIt/G8POWU8FVNMNuXc8rnH4epJpOHg1jIivJ5mWcvLg4ZqMryeZhnOLm1hyPfF0C95R9PAcvp4jcSYNL7UDHEWuJ56GO46FyPXE0+/+/7Lhgs+ffU093yPoDwCAEcki1/Mjgv4BQFUkSeR6/jQh8gn0SQy5np9NqFi+CgSDWE9rwmJCJ/X9yxt9iSdisVji2y+TESNGXjiW6LU7FYkkzQ9JRiIp93XUoodyX12cBg/9qyvOHbvXxmUw4Wxe+45zZdV/GDy9uHJbZqPhk7jTjrTI4ezO+EkY8wUBW4Y6tgCSPvNxtDLnOzOhEw2HAvt7Hj2oZ28/EApHyRtpvjwPBY/8B5Ot9O1u2b2eTds6x8nr4tZtmx6vfWvXN9nCA/9RMHR+aZ5sohEji+YfnN0/51L6d+cAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    border-radius: 2px;
    overflow: hidden;

    &>img {
      display: block;
      width: 100%;
      height: 120px;
      opacity: 0;
      transition: opacity .3s;
    }

    :global {
      .van-image__loading {
        position: relative;
        height: 120px;
        animation: van-skeleton-blink var(--van-skeleton-duration) ease-in-out infinite;
      }
    }

    &::before {
      content: '';
      position: absolute;
      left: 5px;
      width: 5px;
      height: 100%;
      background: linear-gradient(270deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.03) 100%);
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }

  .name {
    width: 109%;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 20px;
  }
}