@-webkit-keyframes fade {
  0% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@keyframes fade {
  0% {
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    opacity: 0
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

.active-list {
  margin-top: 30px;
  display: flex;
  flex-flow: wrap;

  .active-list-item {
    flex-basis: 23.3%;
    margin: 1% 0;
    -webkit-transform: translate3d(0, 3em, 0);
    transform: translate3d(0, 3em, 0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    opacity: 0;
    -webkit-animation: fade ease-out 0.5s forwards;
    animation: fade ease-out 0.5s forwards;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    margin: 1% 2% 1% 0;
    border: 1px solid #cccccc;
    border-radius: 4px;
    overflow: hidden;

    &:nth-child(4n+4) {
      margin: 1% 0;
    }

    .inner {
      display: flex;
      flex-flow: column;
      max-width: none;
      height: 100%;
      background: #fff;
      box-sizing: border-box;
      transition: all ease-out 0.2s;
      -webkit-transform: scale(1);
      transform: scale(1);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;

      .active-list-item-bg {
        width: 100%;
        height: 10.37vw;
        min-height: 142px;
        overflow: hidden;
        background-color: #D8D8D8;
        border-radius: 4px 4px 0px 0px;
        border-bottom: 1px solid #cccccc;

        ::v-deep .el-image {
          width: 100%;
          height: 100%;
          transition: all .5s;
          -webkit-transition: all .5s;

          .el-image__error {
            background-color: #D8D8D8;
          }

          &:hover {
            transform: scale(1.1);
            -ms-transform: scale(1.1); /* IE 9 */
            -moz-transform: scale(1.1); /* Firefox */
            -webkit-transform: scale(1.1); /* Safari 和 Chrome */
            -o-transform: scale(1.1);
          }
        }
      }

      .active-list-item-cont {
        flex: 1;
        padding: 10px 20px 0;
        background-color: #ffffff;
        border-radius: 0 0 4px 4px;
        font-family: PingFang SC;
        font-weight: 400;

        .active-list-item-cont-header {
          line-height: 28px;

          .label {
            height: 26px;
            font-size: 12px;
            margin: 0.2vw 0 0.4vw;

            > span {
              padding: 5px 10px;
              border-radius: 13px;
              color: #ffffff;
              background-color: var(--all_color);
              margin-right: 5px;
              vertical-align: middle;
            }
          }

          .title {
            line-height: 28px;
            font-size: 16px;
            font-weight: 500;
            margin: 0.3vw 0;
            color: #000000;
          }
        }

        .active-list-item-cont-txt1 {
          font-size: 13px;
          line-height: 20px;
          margin: 0.2vw 0;

          .sign-box {
            display: inline-block;

            &::after {
              content: '|';
              color: #333333;
              margin: 0 5px;
            }

            &:last-child {
              &::after {
                content: '';
                margin: 0;
              }
            }

            .sign {
              display: inline-block;
              padding: 0 5px 0 0;

              &:last-child {
                padding-right: 0;
              }
            }
          }
        }

        .active-list-item-cont-txt2 {
          font-size: 13px;
          //color: #999999;
          color: #333333;
          line-height: 20px;
          margin: 0.2vw 0;
        }

        .active-list-item-cont-txt3 {
          font-size: 13px;
          color: #FEB77A;
          line-height: 20px;
          margin: 0.2vw 0;
        }
      }

      .active-list-item-bottom {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid #cccccc;
        margin-top: 0.5vw;
        padding: 0.5vw 20px;
        font-size: 13px;
        line-height: 28px;
        cursor: pointer;
        color: #999999;

        .el-icon-right {
          font-size: 18px;
        }

        &:hover {
          color: var(--all_color);
        }
      }
    }

    &:hover {
      box-shadow: 6px 6px 40px rgba(0, 0, 0, 0.08);

      .inner {
        .active-list-item-bg {
          ::v-deep .el-image {
            transform: scale(1.1);
            -ms-transform: scale(1.1); /* IE 9 */
            -moz-transform: scale(1.1); /* Firefox */
            -webkit-transform: scale(1.1); /* Safari 和 Chrome */
            -o-transform: scale(1.1);
          }
        }
      }
    }
  }
}
