
<template>
  <div class="container">
    <AppHead/>
    <div class="banner">
      <div class="banner_main">
        <h2>教育培训</h2>
        <p>安全第一 预防为主 综合治理</p>
      </div>
    </div>
    <div class="new_container">
      <div class="new_main">
        <div>教育培训内容</div>

      </div>
    </div>

    <AppFoot/>
    <right/>
  </div>
</template>
<script setup lang="ts">

</script>

<style scoped lang="scss">
.container {
  background: #f6f8fa;
  .banner {
    width: 100%;
    height: 320px;
    background: url("@/assets/images/newbanner.png") no-repeat top center;
    .banner_main {
      width: 1400px;
      margin: 0 auto;
      padding-top: 135px;
      h2 {
        font-size: 60px;
        color: #ffffff;
        margin: 0;
        padding: 0;
      }
      p {
        margin: 0;
        color: #ffffff;
      }
    }
  }
  .new_container {
    width: 100%;

    .top {
      width: 100%;
      height: 60px;
      background: #ffffff;

      .wrap {
        width: 1400px;
        margin: 0 auto;
        display: flex;

        .list {
          font-size: 16px;
          line-height: 60px;
          cursor: pointer;
          position: relative;
          margin-right: 40px;

          &.active {
            color: #006aff;
            &:before {
              opacity: 1;
            }
          }

          &:before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 3px solid #006aff;
            width: 100%;
            opacity: 0;
          }
          &:hover {
            color: #006aff;
            &:before {
              opacity: 1;
            }
          }
        }
      }
    }
    .new_main{
      width: 1400px;
      margin: 20px auto;
      background: #ffffff;
      padding: 20px;
      box-sizing: border-box;
      min-height: 500px;
      a{
        text-decoration: none;
      }

    }
  }
}


</style>
