forgeplus-react/src/forge/TeachingPractice/Teaching.scss

.teaching{
  font-family: PingFangSC-Medium, PingFang SC;
  font-size: 16px;
  color: #333333;
  & .tea_title{
    font-size: 38px;
    font-weight: bold;
    color: #1E1E1E;
    line-height: 53px;
    margin-bottom: 20px !important;
  }
  .tea_small_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(153, 153, 153, 0.15);
    margin: 30px 0;
    &>span{
      color: #1E1E1E;
      font-size: 20px;
      font-weight: bold;
    }
    & a{
      font-size: 14px;
      color: #466AFF;
      &:hover{opacity: 0.8; }
    }
  }
  & .tea_part1 .vertical:hover, .tea_part2 .vertical:hover, .tea_part3 .content:hover, .practice div{
    cursor: pointer;
  }
}
.tea_head{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F9FAFD;
  padding: 30px 0 50px;
  & div{
    display: flex;
    flex-direction: column;
    margin-right: 30px;
    & .head_til1{
      background-image: url('./image/image20.svg');
    }
    & .head_til2{
      background-image: url('./image/image21.svg');
    }
    & .head_til3{
      background-image: url('./image/image22.svg');
    }
    & div{
      width: 358px;
      height: 118px;
      line-height: 118px;
      padding-left: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #000000;
    }
  }
  & img{
    width: 750px;
    height: 410px;
  }
}
.tea_part1, .tea_part2, .tea_part3{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  & p{
    margin: 0 auto;
  }
  & .content{
    display: flex;
    justify-content: space-between;
  }
}
.tea_part1{
  padding-top: 50px;
  & .vertical{
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    & img{
      width: 270px;
    }
    & p{
      font-weight: bold;
      color: #000000;
      line-height: 22px;
      margin: 25px 0 -5px 20px;
    }
    & div{
      margin: 15px 0 20px 20px;
      & i{margin-right: 5px;}
    }
    & .hover_bar{
      width: 98%;
      height: 4px;
      margin-left: 1% !important;
    }
    &:hover{
      box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.07);
      & .hover_bar{background-color: #466AFF;}
    }
  }
  & .practice{
    margin-bottom: 40px;
    & div{
      &:hover{
        padding: 3px;
        border-radius: 6px;
        box-shadow: 0px 0px 8px 7px rgba(0, 0, 0, 0.08);
        & img{
          width: 368px;
          height: 217px;
        }
      }
      & img{
        border-radius: 6px;
        width: 375px;
        height: 223px;
      }
    }
  }
}
.tea_part2_bg{
  background: linear-gradient(180deg, #EDF4FF 0%, #EBEDF5 100%);
  margin-top: 30px;
  & .tea_part2{
    padding: 50px 0 100px;
    & .vertical{
      width: 275px;
      background: linear-gradient(180deg, #F0F8FF 0%, #FFFFFF 46%, #FFFFFF 76%, #FBFDFF 100%);
      box-shadow: 0px 4px 4px 1px rgba(0, 0, 0, 0.05);
      border-radius: 4px;
      border: 2px solid #FFFFFF;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-size: 100% 100%;
      &>p{
        font-weight: bold;
        color: #000000;
        line-height: 22px;
      }
      & img{
        width: 68px;
        margin: 40px 0 20px 0;
      }
      & .thread{
        margin: 20px 0 !important;
        border-top: 1px solid #EDEDED;
        width: 270px;
      }
      &>div{
        display: flex;
        & div{
          text-align: center;
        }
        & .mr45{
          margin-right: 45px;
        }
        & .num{
          font-size: 24px;
          font-weight: bold;
          color: #466AFF;
          line-height: 33px;
        }
        & p{
          color: #666666;
        }
      }
      & .hover_bar{
        width: 116%;
        margin-left: -8% !important;
        height: 4px;
        position: relative;
        top: 23px;
      }
      &:hover{
        box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.07);
        & .hover_bar{background-color: #466AFF;}
      }
    }
    & .classroom1{
      padding: 20px 0 20px 15px;
      & .hover_bar{
        width: 104.5%;
        margin-left: -5% !important;
      }
      // background-image: url('./image/image11.svg');
    }
    & .classroom2{
      & img{margin: 20px 0;}
      // background-image: url('./image/image12.svg');
    }
    // & .classroom3{
    //   background-image: url('./image/image13.svg');
    // }
    // & .classroom4{
    //   background-image: url('./image/image14.svg');
    // }
  }
}
.tea_part3_bg{
  background: #F6F8FB;
  & .tea_part3{
    padding: 80px 0 70px;
    & .content{
      padding: 15px 30px;
      align-items: center;
      &:hover{
        background: #FFFFFF;
        box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.06);
        border-radius: 6px;
        & .center .title{color: #466AFF;}
      }
      & img{
        width: 300px;
        height: 160px;
        border-radius: 7px;
        margin-right: -50px;
      }
      & .center{
        width: 57.5%;;
        text-align: left;
        font-size: 14px;
        color: #595959;
        & .title{
          color: #26282F;
          font-size: 20px;
          font-weight: bold;
        }
        & .tip{
          margin: 5px 0 8px !important;
        }
      }
      & .col85{color: #858999;}
      & .col18{color: #181818;}
      & .col{
        color: #000000;
        font-weight: bold;
      }
    }
  }
}