zh-chxs-pano/src/pages/home/index.scss

.home {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: url("./images/map-min.jpg") no-repeat top left / 1920px 1080px;

  &__hover {
    position: absolute;
    top: 268px;
    left: 374px;
    width: 586px;
    height: 466px;
    cursor: pointer;
    opacity: 0;
    transition: opacity linear 0.2s;

    &:hover {
      opacity: 1;
    }
  }

  .notice {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: white;
    background: rgba(36, 52, 114, 0.9);
    z-index: 3;

    &__content {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      width: 1300px;
      margin: 0 auto;

      > span {
        font-weight: bold;
      }
      div {
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;

        p {
          width: fit-content;
          font-size: 14px;
          transition-timing-function: linear;
        }
      }
      i {
        cursor: pointer;
      }
      &__close {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
    }
  }
}