.spinnclass { // height: calc(100% - 245px); } :global { .ant-spin-container { height: 100%; } } .mapwrap { position: relative; // height: calc(100% - 285px); height: 100%; overflow: hidden; .mapControl { position: absolute; right: 20px; bottom: 20px; z-index: 1; .zoom { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 7px; font-size: 25px; background: #fff; border-radius: 4px; cursor: pointer; } .zoom:hover { box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), 0 4px 15px rgba(0, 0, 0, 0.05); } .zoom.disable { opacity: 0.4; } } } .map { position: relative; width: 3000px; height: 1200px; transform-origin: 0% 0%; cursor: pointer; .houseWrap { position: absolute; box-sizing: border-box; padding: 3px; } .house { position: relative; box-sizing: border-box; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 6px; // .noDevice { // position: absolute; // top: 0; // left: 0; // box-sizing: border-box; // width: 100%; // height: 100%; // padding: 4px; // white-space: nowrap; // // background: rgba(255, 255, 255, 0.8); // .noText { // padding: 4px 6px; // background-color: #ccc; // border-radius: 5px; // } // } .allDevice { position: absolute; top: 6px; left: 6px; z-index: 1; display: flex; width: 100%; .icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 3px; color: #fff; font-size: 11px; background: transparent; border-radius: 22px; } } .allTime { position: absolute; top: 4px; left: 4px; z-index: 1; display: flex; width: 100%; color: #4d5262; font-size: 10px; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; .overworkTime { color: #5e8bcf; } .meetTime { color: #00dc23; } } .content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; .name { box-sizing: border-box; width: 100%; padding: 0 3px; color: #000; font-size: 13px; text-align: center; //text-shadow: 1px 1px 1px #fff; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; } } .contentDiv { display: inline-block; // padding: 6px; text-align: center; } } .notclick { background: url(../images/bg_disable.png) repeat; border-color: #dfe3ed; cursor: default; .contentDiv { background-color: #eceff4; } } .searchSel { border-color: rgba(77, 148, 255, 0.8); } } .equipmentMap { .house { cursor: pointer; .showModal { position: absolute; right: 6px; bottom: 7px; z-index: 2; display: flex; display: none; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 12px; background: #fff; border-radius: 22px; } &:hover .showModal { display: flex; } } }