yanting/src/components/index.module.scss

.Layout {
  width: 100%;
  height: 40%;
  padding: 20px 0;
  margin-left: 20px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  $gap: 50px;
  :global {
    .hjbg {
      height: 100%;
      position: relative;
      z-index: 99;
      left: -2px;
    }
    .inner {
      height: 80%;
      position: relative;
      &::before {
        position: absolute;
        content: "";
        display: inline-block;
        height: 100%;
        z-index: 99;
        left: -2px;
        width: 30px;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }
      .innerimg {
        height: 100%;
        position: relative;
        transition: left 0.5s linear;
        .texture {
          height: 100%;
        }
        .gaoliang {
          position: absolute;
          animation: opacity-cycle 2s linear infinite;
        }

        .line_boat {
          width: 6%;
          right: 23%;
          top: 53.8%;
        }
        .line_friends {
          width: 4%;
          right: -0.4%;
          top: 79%;
        }
        .line_mount {
          width: 4%;
          right: 33.8%;
          top: 50%;
        }
      }
    }
  }
}