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

<div class="map_page">
    <div>
        <img id="mapimg" src="images/map_index.png" ng-click="mapImgClick($event)" />
    </div>
    <div class="search_panel">
        <div class="search_label">
            <input type="text" style="" ng-model="searchInput" />
            <img src="images/search3.png" ng-click="searchBuilding()" />
        </div>
    </div>
</div>
<div ng-if="isShowMark" id="nowPositionMask" class="nowPositionMask" ng-click="showModal()" ng-style="nowPositionStyle">
    <div class="mask"></div>
</div>
<div ng-if="isShowMark" id="nowPositionCoordinate" ng-click="showModal()" class="nowPositionCoordinate element" ng-style="coordinateStyle">
    <img src="images/coordinate.png" />
</div>
<div ng-show="isShowNowModal" ng-class="isShowNowModal?'enter-x-right':'back-x-right'" class="card building_modal" ng-style="modalStyle">
    <div class="header" style="height:50px;">
        <button type="button" class="close" ng-click="isShowNowModal=false">&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">
        <div class="floor_content">
            <div class="left_content">
                <p ng-repeat="it in floorList" ng-click="floorClick(it,$index)" ng-class="it.checked?'floorChecked':''" style="padding:0 8px;">
                    {{it.Name}}
                </p>
            </div>
            <div class="right_content">
                <p ng-repeat="it in roomList" ng-click="showRoom(it)" style="height:30px;font-size:14px;cursor:pointer;" ng-style="{'padding-bottom':$index==(roomList.length-1)?(floorList.length*80+'px'):''}">
                    {{it.RoomName}}&nbsp;&nbsp;{{it.DepartmentOrServiceName}}
                </p>
            </div>
        </div>
    </div>
</div>
<div ng-show="isShowNowModal && showModalType==2" class="card card_modal detail_modal" ng-class="showModalType==2?'enter-x-right':'back-x-right'" ng-style="modalStyle">
    <div>
        <button type="button" class="close bcak_btn" ng-click="coloseRoom()">返回</button>
        <div class="top_img">
            <!--<img src="images/test.png" />-->
            <img ng-if="roomModel.ImgUrl" ng-src="{{roomModel.ImgUrl}}"/>
        </div>
        <div class="detail_content">
            <div style="font-size:16px;font-weight:bold;">
                {{roomModel.DepartmentOrServiceName}}
            </div>
            <hr />
            <div>
                <div class="row">
                    <div class="col_label">楼层</div>
                    <div class="col_value">{{roomModel.FloorName}}</div>
                </div>
                <div class="row">
                    <div class="col_label">房间号/服务点</div>
                    <div class="col_value">{{roomModel.RoomName}}</div>
                </div>
                <div class="row">
                    <div class="col_label">开放时间</div>
                    <div class="col_value">{{roomModel.OpenTime}}</div>
                </div>
                <div class="row">
                    <div class="col_label">联系方式</div>
                    <div class="col_value">{{roomModel.ContactType}}</div>
                </div>
                <div class="row">
                    <div class="col_label">简介</div>
                    <div class="col_value">{{roomModel.Description}}</div>
                </div>
            </div>
        </div>
    </div>
</div>
<style type="text/css">
    .map_page {
        display: flex;
        justify-content: center;
        width: 100%;
        background-color: white;
    }

        .map_page .search_panel {
            position: absolute;
            z-index: 1000;
            top: 50px;
        }
            .map_page .search_panel .search_label {
                border: 1px solid #1692f6;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 0 10px #1692f6;
            }

                .map_page .search_panel .search_label input {
                    width: 300px;
                    height: 40px;
                    border: none;
                    margin-left: 20px;
                    font-size: 16px;
                }

                .map_page .search_panel .search_label img {
                    margin: 5px 15px;
                    cursor: pointer;
                }

    .nowPositionMask {
        position: absolute;
        z-index: 1000;
        border: 3px dashed #f00;
    }

        .nowPositionMask .mask {
            background-color: red;
            opacity: 0.3;
            padding: 3px;
            height: 100%;
            width: 100%;
        }

    .nowPositionCoordinate {
        position: absolute;
        z-index: 1001;
    }
    /* 定义动画 */
    @keyframes jump {
        0% {
            transform: translateX(0);
        }
        /* 初始位置为原点 */
        50% {
            transform: translateY(-10px);
        }
        /* X轴移动-10像素并放大到80% */
        100% {
            transform: translateY(0);
        }
        /* 返回原点 */
    }

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

    .card_modal {
        position: absolute;
        z-index: 1001;
        height: 500px;
        width: 350px;
        background-color: white;
        box-shadow: 0 0 18px #1692f6;
        border-radius: 10px;
    }

    .card-content {
        height: 440px;
        overflow-y: auto;
    }

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

    .floor_content {
        display: flex;
    }

    .left_content {
        position: absolute;
        left: 15px;
        font-size: 14px;
        margin-top: 20px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-weight: bold;
    }

        .left_content p {
            cursor: pointer;
        }

            .left_content p:first-child {
                padding-top: 10px !important;
            }

    .right_content {
        margin-left: 80px;
    }

    .row {
        margin: 15px 0px;
        display: flex;
    }

        .row .col_label {
            width: 30%;
        }

        .row .col_value {
            width: 70%;
        }

    @keyframes enter-x-right {
        0% {
            transform: translateX(100px);
            opacity: 0;
        }

        25% {
            transform: translateX(75px);
            opacity: 0.5;
        }

        50% {
            transform: translateX(50px);
            opacity: 0.8;
        }

        100% {
            transform: translateX(0px);
            opacity: 1;
        }
    }

    .enter-x-right {
        animation: enter-x-right 0.5s linear;
    }

    @keyframes back-x-right {
        0% {
            transform: translateX(0px);
            opacity: 1;
        }

        25% {
            transform: translateX(80px);
            opacity: 0.8;
        }

        50% {
            transform: translateX(160px);
            opacity: 0.6;
        }

        75% {
            transform: translateX(220px);
            opacity: 0.3;
        }

        100% {
            transform: translateX(300px);
            opacity: 0;
        }
    }

    .back-x-right {
        animation: back-x-right 0.5s linear;
    }

    .bcak_btn {
        position: absolute;
        top: 15px;
        left: 15px;
        font-size: 14px;
        opacity: 1;
        color: #5e5a5a;
    }

    .detail_modal .top_img {
        height: 150px;
    }

        .detail_modal .top_img img {
            height: 150px;
            width: 100%;
            object-fit: cover;
            border-radius: 10px;
        }

    .detail_modal .detail_content {
        margin: 20px;
    }

    .building_modal {
        position: absolute;
        z-index: 1001;
        height: 500px;
        width: 350px;
        background-color: white;
        box-shadow: 0 0 18px #1692f6;
        border-radius: 10px;
    }
</style>