index.less

.alarmScrollAssemblyWrapper {
  width: 100%;

  .content {
    display: flex;
    align-items: center;

    .alarmScrollAssembly {
      &.moreThan1000 {
        :global {
          .swiper-container {
            width: 100%;
            min-width: 400px;
            height: 42px;

            .swiper-button-prev {
              right: 150px;
              left: auto !important;
            }

            .swiper-button-next:after,
            .swiper-button-prev:after {
              font-size: 12px;
            }

            .swiper-pagination-fraction {
              top: 15px;
              right: 24px;
              left: auto;
              width: 130px;
              line-height: 12px;
            }

            .swiper-wrapper {
              width: calc(100% - 140px);
            }

            .swiper-slide {
              height: 32px;
              line-height: 32px;
              text-align: center;
            }
          }
        }
      }

      &.lessThan1000 {
        :global {
          .swiper-container {
            width: 100%;
            min-width: 400px;
            height: 42px;

            .swiper-button-prev {
              right: 150px;
              left: auto !important;
            }

            .swiper-button-next:after,
            .swiper-button-prev:after {
              font-size: 12px;
            }

            .swiper-pagination-fraction {
              top: 15px;
              right: 24px;
              left: auto;
              width: 130px;
              line-height: 12px;
            }

            .swiper-wrapper {
              width: calc(100% - 140px);
            }

            .swiper-slide {
              height: 32px;
              line-height: 32px;
              text-align: center;
            }
          }
        }
      }

      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      min-width: 400px;
      height: 42px;
      //overflow-y: scroll;

      .warningWrapper {
        display: flex;
        align-items: center;
        max-width: 760px;
        padding: 4px 12px;
        background: #ffeeee;
        border: 1px solid #ffceca;
        border-radius: 3px;
      }

      .normalWrapper {
        display: flex;
        align-items: center;
        max-width: 760px;
        padding: 4px 12px;
        background: #fffbeb;
        border: 1px solid #ffd9a7;
        border-radius: 3px;
      }

      .warningTag {
        color: #ffffff;
        background: linear-gradient(180deg, #f98b5e 0%, #f44545 100%);
        border: none !important;
      }

      .normalTag {
        color: #ffffff;
        background: linear-gradient(180deg, #ffbf11 0%, #ff9c00 100%);
        border: none !important;
      }

      .fontSize13 {
        font-size: 13px;
      }

      .time {
        display: inline-block;
        width: 120px;
        max-width: 120px;
        overflow: hidden;
        color: #333333;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .location {
        display: inline-block;
        //flex: 230;
        //width: 230px;
        //min-width: 100px;
        flex: 1;
        align-items: center;
        margin-left: 14px;
        overflow: hidden;
        color: #333333;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .periodWrapper {
        display: flex;
        align-items: center;
        justify-content: right;
        max-width: 190px;

        .period {
          display: inline-block;
          width: 120px;
          max-width: 120px;
          margin-left: 10px;
          overflow: hidden;
          color: #333333;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .normalContent {
        display: inline-block;
        flex: 2;
        margin-left: 14px;
        overflow: hidden;
        //width: 290px;
        color: #fe7200;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .warningContent {
        display: inline-block;
        flex: 2;
        margin-left: 14px;
        overflow: hidden;
        //width: 290px;
        color: #ff2929;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}