.#{$namespace} {
  &-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    &-wrap {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    &-item {
      flex: 1;
      height: 100%;
      display: flex;
      cursor: pointer;

      &__box {
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
        padding: 20px 0;
        border-radius: $border-radius;
        box-shadow: $box-shadow;
        color: $white;

        h1 {
          font-size: $ft-lg;
          padding-top: 10px;
        }

        h2 {
          font-size: $ft-bg;
          padding-top: 10px;
        }
        h3 {
          font-size: $ft-sm;
          padding-top: 10px;
        }
   
      }
      &.grid {
        &-auto,
        &-1,
        &-2,
        &-3,
        &-4,
        &-5,
        &-6,
        &-7,
        &-8,
        &-9,
        &-10,
        &-11,
        &-12 {
          flex: 0 0 auto;
          -ms-flex: 0 0 auto;
        }
        &-auto {
          width: auto;
        }
        &-1 {
          width: 8.33333333%;
        }
        &-2 {
          width: 16.66666667%;
        }
        &-3 {
          width: 25%;
        }
        &-4 {
          width: 33.33333333%;
        }
        &-5 {
          width: 41.66666667%;
        }
        &-6 {
          width: 50%;
        }
        &-7 {
          width: 58.33333333%;
        }
        &-8 {
          width: 66.66666667%;
        }
        &-9 {
          width: 75%;
        }
        &-10 {
          width: 83.33333333%;
        }
        &-11 {
          width: 91.66666667%;
        }
        &-12 {
          width: 100%;
        }
      }

      // 浮动图标
      &.posi-icon {
        .svg-icon {
          opacity: 0.1;
          width: 150px;
          height: 150px;
          position: absolute;
          right: -30px;
          bottom: -30px;
        }
              // 装饰图标
         .adorn-icon {
              opacity: 1 !important;
              width: 20px !important;
              height: 20px !important;
              top: 10px;
              right: 10px;
              bottom: auto;
              color: $white;
              }
      }
    }
  }
}