.spinnclass { // height: calc(100% - 245px); } :global { .ant-spin-container { height: 100%; } } .mapwrap { position: relative; // height: calc(100% - 285px); height: 100%; overflow: hidden; text-decoration: none; user-select: none; tap-highlight-color: rgba(0, 0, 0, 0); .controlBar { margin-bottom: 15px; } .mapControl { position: absolute; right: 20px; bottom: 20px; z-index: 1; // display: none; .iconfont { font-size: 25px; } .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; .hasPerson { position: absolute; top: 2px; right: 5px; display: flex; align-items: center; justify-content: center; height: 20px; padding: 0 5px; color: #626c78; font-size: 11px; white-space: nowrap; background-color: #edf1f5; border-radius: 10px; transform-origin: 100% 0%; } .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: 2px; left: 5px; z-index: 1; display: flex; width: 100%; transform-origin: 0% 0%; .icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 3px; color: #fff; font-size: 11px; background: transparent; border-radius: 22px; transform-origin: 0% 0%; } } .allTime { position: absolute; top: 4px; left: 4px; z-index: 1; // display: flex; box-sizing: border-box; width: 100%; padding-right: 4px; overflow: hidden; color: #4d5262; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; .overworkTime { color: #5e8bcf; font-weight: 700; } .meetTime { color: #00dc23; font-weight: 700; } } .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: 12px; 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; } .pointer { display: flex; align-items: center; height: 100%; } } .notclick { background: url(~@/assets/images/page-equipment/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: 5px; bottom: 5px; z-index: 2; display: flex; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 10px; line-height: 20px; background: #fff; border-radius: 20px; transform-origin: 100% 100%; } &:hover .showModal { display: flex; } } }