4dkankan_official/src/page/cases/style.scss

.case-con {
  position: relative;
  width: 100%;
  background-color: #fff;
  .case-header {
    position: relative;
    max-width: 1200px;
    padding-left: 260px;
    img {
      position: absolute;
      left: 0;
      margin-top: 48px;
      padding-left: 70px;
      height: 126px;
      width: auto;
    }
    .case-nav {
      padding-top: 38px;
      border-left: 1px solid #e5e5e5;
      padding-bottom: 44px;
      .nav-con {
        font-size: 48px;
        .list-txt {
          padding-left: 30px;
          font-weight: bold;
        }
        .list-navs {
          border-bottom: 1px solid #e5e5e5;
          margin-top: 30px;
          line-height: 70px;
          height: 70px;
          font-size: 0;
          .active {
            color: #111111;
          }
          li {
            border-right: 1px solid #e5e5e5;
            // width: 97px;
            padding: 0 20px;
            text-align: center;
            float: left;
            cursor: pointer;
            height: 70px;
            font-size: 14px;
            line-height: 70px;
            color: #a1a1a1;
            &:hover {
              color: #111111;
            }
            
            &:first-child {
              background-color: #1fe4dc;
              width: 240px;
              color: #fff;
              padding-left: 40px;
              text-align: left;
              cursor: auto;
              span {
                font-size: 18px;
              }
              &:hover {
                color: #fff;
              }
            }
          }
        }
      }
    }
  }
}
.case-body {
  max-width: 1470px;
  .card {
    margin-bottom: 20px;
  }
  .paging {
    // border-left: #e5e5e5 1px solid;
    height: 100%;
    margin-bottom: 40px;
    & /deep/ .layout {
      text-align: center;
      margin-top: 40px;
    }
    & /deep/ .layout a:not(:last-child) {
      margin: 10px 8px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      color: #999;
      position: relative;
      transition: color 0.3s;
    }
    & /deep/ .layout a:last-child {
      position: relative;
      top: -5px;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      height: 22px;
      padding: 0 9.6px;
      padding: 0 0.6rem;
    }
    & /deep/ .layout a:last-child::before,
    & /deep/ .layout a:last-child::after {
      content: "";
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s;
    }

    & /deep/ .layout a:not(:last-child).active::after,
    & /deep/ .layout a:not(:last-child).active,
    & /deep/ .layout a:not(:last-child):hover,
    & /deep/ .layout a:not(:last-child):hover::after {
      color: #111111;
      transform: scaleX(1);
    }

    & /deep/ .layout a:not(:last-child)::after {
      content: "";
      height: 3px;
      width: 140%;
      background-color: #111;
      display: block;
      margin-left: -20%;
      margin-top: 3px;
      transform-origin: 50% 50%;
      transform: scaleX(0);
      will-change: transform;
      transition: transform 0.3s;
    }
  }
}