#content {
  padding-top: 30px;
  padding-bottom: 60px;
  .grid-data {
    &>.item-row {
      &:first-child {
        margin-top: 0!important;
      }
    }
  }
  .page-grid {
    &>.header {
      &>.page-head {
        &>.title {
          position: relative;
          padding-left: 10px;
          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 4px;
            height: 12px;
            margin-top: -5px;
            background-color: @primaryColor;
            border-radius: 2px;
          }
          &>.text {
            font-size: 20px;
            font-weight: bold;
          }
          &>.subtitle {
            margin-left: 30px;
            color: #999999;
            font-size: 12px;
            font-weight: bold;
          }
        }
        &>.filters {
          margin: 22px -8px -8px;
          .filter {
            margin: 8px;
            min-width: 52px;
            color: #666666;
            font-size: 12px;
            text-align: center;
            background-color: #EEEEEE;
            padding: 4px 12px;
            box-sizing: border-box;
            border-radius: 18px;
            cursor: pointer;
            transition: all .15s;
            &:hover {
              color: @primaryColor;
            }
            &.is-active {
              color: #fff!important;
              background-color: @primaryColor;
            }
          }
        }
      }
      &>.extra {
        .el-button {
          width: 26px;
          height: 26px;
          text-align: center;
          line-height: 24px;
          padding: 0;
          i {
            font-weight: bold;
          }
          &+.el-button {
            margin-left: 20px;
          }
        }
      }
    }
    &>.main {
      margin: 5px -15px -15px;
      position: relative;
      overflow: hidden;
      padding: 15px;
    }
    &>.footer {
      margin-top: 25px;
    }
  }
  .animation-pull-left- {
    &enter-active,
    &leave-active {
      transition: all .3s ease!important;
    }
    &enter {
      position: absolute;
      left: 0;
      right: 0;
      transform: translateX(-100%);
    }
    &leave-to {
      position: absolute;
      left: 0;
      right: 0;
      transform: translateX(100%);
    }
  }
  .animation-pull-right- {
    &enter-active,
    &leave-active {
      transition: all .3s ease!important;
    }
    &enter {
      position: absolute;
      left: 0;
      right: 0;
      transform: translateX(100%);
    }
    &leave-to {
      position: absolute;
      left: 0;
      right: 0;
      transform: translateX(-100%);
    }
  }
  .template-module {
    &:empty {
      display: none;
    }
    &+.template-module {
      margin-top: 40px;
    }
    .module-carousel-container {
      width: 100%;
      height: 360px;
    }
    .module-carousel-body {
      position: absolute;
      left: 0;
      right: 0;
      top: 70px;
      height: 390px;
      .poster {
        a {
          border-radius: 0!important;
        }
      }
    }
    .module-carousel {
      .poster {
        height: 100%;
        a {
          display: block;
          width: 100%;
          height: 100%;
          background: center no-repeat #EEEEEE;
          background-size: cover;
          border-radius: 8px;
        }
      }
      .el-carousel__indicators {
        .el-carousel__indicator {
          padding: 12px 5px;
          .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
          }
        }
      }
    }
    .module-live-course {
      .live-item {
        height: 300px;
        background-color: #fff;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        transition: all .3s;
        &:hover {
          box-shadow: 0 3px 10px rgba(0,0,0,.1)
        }
        &>.item-main {
          padding: 20px;
          &>.header {
            .status-bar {
              height: 22px;
              line-height: 22px;
              &>.icon {
                position: relative;
                color: #fff;
                width: 22px;
                text-align: center;
                border-radius: 4px 0 0 2px;
                i {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  font-size: 12px;
                  transform: translate(-50%,-50%) scale(.82);
                  margin-top: 1px;
                }
              }
              &>.text {
                font-size: 12px;
                padding: 0 6px;
              }
              &.status {
                &-0 {
                  color: @secondColor;
                  &>.icon {
                    background-color: @secondColor;
                  }
                  &>.text {
                    background-color: rgba(@secondColor, 10%);
                  }
                }
                &-1 {
                  color: @thirdColor;
                  &>.icon {
                    background-color: @thirdColor;
                  }
                  &>.text {
                    background-color: rgba(@thirdColor, 10%);
                  }
                }
                &-2 {
                  color: #DDDDDD;
                  &>.icon {
                    background-color: #DDDDDD;
                  }
                  &>.text {
                    background-color: #F7F7F7;
                  }
                  &.status-playback {
                    color: @primaryColor;
                    &>.icon {
                      background-color: @primaryColor;
                    }
                    &>.text {
                      background-color: rgba(@primaryColor, 10%);
                    }
                  }
                }
              }
            }
          }
          .detail {
            margin-top: 16px;
            &>.introduce {
              color: #777777;
              font-size: 12px;
              background-color: #F7F8FA;
              padding: 4px 8px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            &>.title {
              margin-top: 10px;
              font-size: 15px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .teachers {
            margin: 16px -8px -8px;
            .teacher {
              padding: 8px;
              &>.head-portrait {
                position: relative;
                display: block;
                width: 45px;
                height: 45px;
                background: center no-repeat #EEEEEE;
                background-size: cover;
                border-radius: 50%;
                &>.tag {
                  position: absolute;
                  left: 50%;
                  bottom: 0;
                  transform: translate(-50%,50%) scale(.6);
                  color: #fff;
                  font-size: 12px;
                  background-color: @secondColor;
                  padding: 4px 6px;
                  border-radius: 2px;
                  white-space: nowrap;
                }
              }
              &>.true-name {
                margin-top: 10px;
                color: #777777;
                font-size: 12px;
                text-align: center;
              }
            }
          }
        }
        &>.item-footer {
          padding: 20px;
          border-top: 1px solid #EEEEEE;
          .el-button {
            min-width: 88px;
            padding: 8px 15px;
          }
        }
      }
    }
    .module-course-recommend,
    .module-project-course {
      &>.main {
        .course-item {
          height: 300px;
          background-color: #fff;
          border: 1px solid #EEEEEE;
          border-radius: 4px;
          cursor: pointer;
          transition: all .3s;
          &:hover {
            box-shadow: 0 3px 10px rgba(0,0,0,.1)
          }
          &>.poster {
            position: relative;
            height: 160px;
            a {
              display: block;
              width: 100%;
              height: 100%;
              background: center no-repeat #EEEEEE;
              background-size: cover;
              border-radius: 4px;
            }
            .count {
              position: absolute;
              right: 0;
              top: 0;
              background-color: rgba(51,51,51,.6);
              border-radius: 4px;
              color: #fff;
              font-size: 13px;
              padding: 3px 10px;
              letter-spacing: 1px;
            }
          }
          &>.detail {
            &>.top {
              padding: 15px 12px 10px;
              .title {
                font-size: 15px;
                font-weight: bold;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                max-height: 42px;
              }
            }
            &>.bottom {
              padding: 0 12px 10px;
              .introduce {
                color: #777777;
                font-size: 13px;
                font-weight: bold;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .label-name {
                height: 23px;
                font-size: 12px;
                margin-top: 5px;
                color: #fff;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                span {
                  display: inline-block;
                  border-radius: 4px;
                  padding: 2px 5px;
                  background-color: #F76E6E;
                  margin-right: 5px;
                  &:last-child{
                    margin-right: 0;
                  }
                }
              }
              .price {
                margin-top: 4px;
                font-size: 15px;
                &>.cost {
                  color: @emphasizeColor;
                }
                &>.prime-cost {
                  margin-left: 10px;
                  color: #CCCCCC;
                  text-decoration: line-through;
                }
                .fee {
                  &:before {
                    content: '\ffe5';
                  }
                }
              }
            }
          }
        }
      }
      &>.footer {
        text-align: center;
        .view-more {
          color: #999999;
          font-size: 13px;
          text-decoration: none;
          span {
            cursor: pointer;
          }
        }
      }
    }
    .module-teacher-recommend {
      .teacher-item {
        position: relative;
        height: 324px;
        background-color: #fff;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        transition: all .3s;
        padding: 20px;
        box-sizing: border-box;
        overflow: hidden;
        &:after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 3px;
          background-color: #DFF0FF;
          transition: all .3s;
        }
        &:hover {
          box-shadow: 0 3px 10px rgba(0,0,0,.1);
          &:after {
            background-color: @primaryColor;
          }
        }
        &>.detail {
          &>.head-portrait {
            display: block;
            margin: auto;
            width: 64px;
            height: 64px;
            background: center no-repeat #EEEEEE;
            background-size: cover;
            border-radius: 50%;
          }
          &>.true-name {
            margin-top: 10px;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
          }
          &>.tag {
            margin-top: 8px;
            color: #999999;
            font-size: 13px;
            text-align: center;
          }
        }
        &>.introduce {
          margin-top: 20px;
          position: relative;
          font-size: 14px;
          line-height: 22px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          line-clamp: 5;
          -webkit-box-orient: vertical;
          overflow: hidden;
          max-height: 112px;
        }
      }
    }
    .module-news {
      &>.header {
        &>.title {
          position: relative;
          padding-left: 10px;
          &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 4px;
            height: 12px;
            margin-top: -5px;
            background-color: @primaryColor;
            border-radius: 2px;
          }
          &>.text {
            font-size: 20px;
            font-weight: bold;
          }
          &>.subtitle {
            margin-left: 30px;
            color: #999999;
            font-size: 12px;
            font-weight: bold;
          }
        }
      }
      &>.main {
        margin-top: 30px;
        &>.poster-news {
          width: 480px;
          .poster {
            position: relative;
            height: 268px;
            cursor: pointer;
            .img {
              display: block;
              width: 100%;
              height: 100%;
              background: center no-repeat #EEEEEE;
              background-size: cover;
              border-radius: 4px;
            }
            .date {
              position: absolute;
              left: 20px;
              top: 20px;
              width: 64px;
              height: 64px;
              background: rgba(51,51,51,.9);
              border-radius: 4px;
              &>.day {
                color: #CCCCCC;
                font-size: 22px;
              }
              &>.period {
                margin-top: 4px;
                color: #999999;
                font-size: 13px;
              }
            }
            .detail {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              height: 88px;
              background: rgba(51,51,51,.8);
              opacity: 0.8;
              border-radius: 0 0 4px 4px;
              padding: 8px 25px;
              box-sizing: border-box;
              &>.title {
                display: inline-block;
                width: 100%;
                color: #fff;
                font-size: 20px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &>.introduce {
                margin-top: 8px;
                color: #CCCCCC;
                font-size: 13px;
                line-height: 18px;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                max-height: 40px;
              }
            }
          }
        }
        &>.listed-news {
          margin-left: 40px;
          .news-item {
            &+.news-item {
              padding-top: 21px;
            }
            .date {
              width: 64px;
              height: 64px;
              background: #F7F8FA;
              border-radius: 4px;
              &>.day {
                font-size: 22px;
              }
              &>.period {
                margin-top: 4px;
                color: #999999;
                font-size: 13px;
              }
              cursor: pointer;
            }
            .detail {
              margin-left: 30px;
              cursor: pointer;
              &>.title {
                display: inline-block;
                width: 100%;
                font-size: 22px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                  color: @primaryColor;
                }
              }
              &>.introduce {
                margin-top: 8px;
                color: #666666;
                font-size: 13px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              &>.more {
                margin-top: 10px;
                &>.view-count {
                  color: #999999;
                  font-size: 13px;
                }
                &>.tag {
                  margin-left: 15px;
                  color: #999999;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
      &>.footer {
        margin-top: 25px;
        text-align: center;
        .view-more {
          color: #999999;
          font-size: 13px;
          text-decoration: none;
          span {
            cursor: pointer;
          }
        }
      }
    }
    .module-site {
      .site-item {
        height: 100px;
        background-color: #fff;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        transition: all .3s;
        // padding: 10px 12px;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
        }
        .logo {
          display: block;
          height: 100%;
          background: center no-repeat #fff;
          background-size: contain;
        }
      }
    }
  }
  .module-home-img {
    .poster {
      height: 100%;
      a {
        display: block;
        width: 100%;
        height: 100%;
        background: center no-repeat #fff;
        background-size: cover;
        border-radius: 4px;
      }
    }
    .el-carousel__indicators {
      .el-carousel__indicator {
        padding: 12px 5px;
        .el-carousel__button {
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }
      }
    }
  }
}