YLShipBuildLandMap/YLShipBuildLandMap.Web/wwwroot/app/main/map-index.html

<div style="display: flex; justify-content: center; width: 100%; background-color: white;">
    <div>
        <img id="mapimg" src="images/map_index.png" ng-click="mapImgClick($event)" />
    </div>
    <div style="position:absolute;z-index:1000;top:50px;">
        <div style="border: 1px solid #1692f6; border-radius: 20px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 10px #1692f6;">
            <input type="text" style="width: 300px; height: 40px; border: none; margin-left: 20px; font-size: 16px; " ng-model="searchInput" />
            <img src="images/search3.png" style="margin: 5px 15px;cursor:pointer;" ng-click="searchBuilding()" />
        </div>
    </div>
</div>
<div ng-if="isShowNow" style="position: absolute; z-index: 1000;border:3px dashed #f00;" ng-style="nowPositionStyle">
    <div style="background-color:red;opacity:0.3;padding:3px;height:100%;width:100%;"></div>
</div>
<div ng-if="isShowNow" class="element" style="position: absolute; z-index: 1001;" ng-style="coordinateStyle">
    <img src="images/coordinate.png" />
</div>
<div ng-show="isShowNow" class="card" style="position: absolute; z-index: 1001; height: 500px; width: 300px; background-color: white; box-shadow: 0 0 10px #1692f6;border-radius:10px; " ng-style="modalStyle">
    <div class="header" style="height:50px;">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <div style="white-space: nowrap; width: 250px; overflow: hidden; text-overflow: ellipsis;">
            <h4 class="modal-title">{{nowBuilding.BuildingName}}</h4>
        </div>
    </div>
    <div class="body card-content" id="card-content" style="height: 440px; overflow-y: auto;">
        <div style="display:flex;">
            <div style="position: absolute; left: 15px;font-size:16px;">
                <p ng-repeat="it in floorList" ng-click="floorClick(it,$index)" ng-class="it.checked?'floorChecked':''">
                    {{it.FloorName}}
                </p>
            </div>
            <div style="margin-left:60px;">
                <p ng-repeat="it in roomList" style="height:30px;font-size:14px;">{{it.RoomName}}</p>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    /* 定义动画 */
    @keyframes jump {
        0% {
            transform: translateX(0);
        }
        /* 初始位置为原点 */
        50% {
            transform: translateY(-10px);
        }
        /* X轴移动-10像素并放大到80% */
        100% {
            transform: translateY(0);
        }
        /* 返回原点 */
    }

    /* 应用动画到元素 */
    .element {
        animation: jump 2s infinite; /* 无限重复播放动画，持续时间为2秒 */
    }


    .card-content::-webkit-scrollbar, .tab-pane::-webkit-scrollbar, .fht-tbody::-webkit-scrollbar, .zero-source-table-div::-webkit-scrollbar, .dropdown-menu::-webkit-scrollbar, .dropdown-menu > .inner::-webkit-scrollbar { /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 8px;
    }

    .card-content::-webkit-scrollbar-thumb, .tab-pane::-webkit-scrollbar-thumb, .menu::-webkit-scrollbar-thumb, .fht-tbody::-webkit-scrollbar-thumb, .zero-source-table-div::-webkit-scrollbar-thumb, .dropdown-menu::-webkit-scrollbar-thumb, .dropdown-menu > .inner::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 5px;
        background: #8DC7ED;
    }

    .card-content::-webkit-scrollbar-track, .tab-pane::-webkit-scrollbar-track, .menu::-webkit-scrollbar-track, .fht-tbody::-webkit-scrollbar-track, .zero-source-table-div::-webkit-scrollbar-track, .dropdown-menu::-webkit-scrollbar-track, .dropdown-menu > .inner::-webkit-scrollbar-track { /*滚动条里面轨道*/
        border-radius: 5px;
        background: #F1F1F1;
    }

    .floorChecked {
        color: #1692f6;
    }
</style>