.map_content_container { // 定义循环混合宏 .loop (@i: 1) when (@i <= 5) { .line-@{i} { // 第1行:单行省略 & when (@i = 1) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } // 第2-5行:多行省略 & when not (@i = 1) { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-line-clamp: @i; -webkit-box-orient: vertical !important; } } // 递归调用 .loop(@i + 1); } // 执行循环 .loop(); &__content { width: 430px; position: absolute; &.port { top: 75px; max-height: calc(100vh - 75px); } &.branch_office { top: 70px; max-height: calc(100vh - 70px); } } .collapse_menu { position: absolute; top: calc(50vh - 44.5px); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; &.left { left: 465px; &.active { left: 0; img { transform: translate(-50%, -50%) rotate(180deg); } } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0); } &.port { width: 30px; height: 89px; img { width: 10px; height: 17px; } } &.branch_office { width: 33px; height: 116px; img { width: 13px; height: 34px; } } } &.right { right: 465px; &.active { right: 0; img { transform: translate(-50%, -50%) rotate(180deg); } } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0); } &.port { width: 30px; height: 89px; transform: rotate(180deg); img { width: 10px; height: 17px; } } &.branch_office { width: 33px; height: 116px; transform: rotate(180deg); img { width: 13px; height: 34px; } } } } }