中间搜索样式

liuyg

2021-06-02 94c4faad963bf6dc92e544ddaeb8297cc5fd0c21

中间搜索样式

 index.html

@@ -116,10 +116,27 @@

        .index_query {
            position: absolute;
            left: 45%;
            left: 42%;
            top: 60px;
            z-index: 999;
            width: 260px;
            width: 300px;
            /* border: 1px seagreen solid; */
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 6px 6px 6px 6px;
        }

        .input-font {
            /* width: 3rem; */
            height: 35px;
            /* color: #fff; */
            display: flex;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            border-right: 1px solid rgba(0, 0, 0, .2);
            cursor:pointer
        }

        #mh_query li {
@@ -154,12 +171,13 @@
            outline: 0;
            float: left;
            border: none;
            box-shadow: 0 2px 6px #3a3c42;
            /* box-shadow: 0 2px 6px #3a3c42; */
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
            color: #fff;
            background-color: rgba(63, 72, 84, .7);
            color: #000;
            /* background-color: rgba(63, 72, 84, .7); */
            border: none;
            border-radius: 0px 5px 5px 0px;
        }

        input::-webkit-input-placeholder {
@@ -171,6 +189,7 @@
            right: 0;
            height: 35px;
            cursor: pointer;
            /* border-radius: 0px 0px 5px 5px; */
        }

        .cesium-viewer-toolbar {
@@ -210,12 +229,19 @@
    <div id="jimu-layout-manager"></div>

    <div class="index_query">
        <div>
            <!-- <div>
            <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"
                   placeholder="输入关键字以搜索"/>
            <img class="input_img" src="images/query.png">
        </div>
        <div id="mh_query"></div>
        <div id="mh_query"></div> -->
            <div id="i-f-gjz" class="input-font"
                style="border-radius: 5px 0 0px 5px;width:4.7rem;background-color: #3E9FFC;color: #fff;">关键字</div>
            <div id="i-f-zb" class="input-font" style="width:3.5rem">坐标</div>
            <!-- <input type="text" placeholder="输入关键字以搜索" class="input-sm /> -->
            <input id="local_data" autocomplete="off" data-provide="typeahead" type="text" class="input-sm"
                placeholder="输入关键字以搜索" />
            <img class="input_img" src="images/query.png">
    </div>

</div>
@@ -232,7 +258,18 @@
<script>

    var indData = [];

        //关键字和坐标点击事件
        var states = 'gjz';
        $("#i-f-gjz").click(function () {
            console.log("gjz");
            $("#i-f-zb").css({'backgroundColor': '#fff','color': '#000'});
            $("#i-f-gjz").css({'backgroundColor': '#3E9FFC','color': '#fff'});
        })
        $("#i-f-zb").click(function () {
            console.log("zb");
            $("#i-f-gjz").css({'backgroundColor': '#fff','color': '#000'});
            $("#i-f-zb").css({'backgroundColor': '#3E9FFC','color': '#fff'});
        })
    //搜索点击事件
    $(".input_img").click(function () {
        var query = $("#local_data").val();
@@ -388,4 +425,5 @@

</script>
</body>

</html>