.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; } } } }