orico-official-website-old/app/usmobile/view/include/top_nas.phtml

<div class="header">
    <div class="m_Container clearfix">
        <div class="left">
            <span class="icon-logo cursor_p">
                <a href="javascript:void(0);">
                    <img src="__PUBLIC__/m_weben/images/logo.png" />
                </a>
            </span>
        </div>
        <div class="right img-responsive cursor_p">
            <span class="cursor_p spn1">
                <i class="icon-menu-svg"></i>
            </span>
            <span class="icon-keyword cursor_p del-button del-btn">
                <i class="icon-search-svg"></i>
            </span>
            <span class="cursor_p mask-up">
                <i class="icon-lag-svg"></i>
            </span>
        </div>
    </div>
    <div class="menu" style="display: none;">
        {volist name="nav_header" id="vo"}
        <dl>
            <dt class="cursor_p">
                {if condition="empty($vo.items)"}
                <a href="{$vo.url}">{$vo.name}</a>
                {else /}
                <p>{$vo.name}</p><i class="rotate icon-arrow"></i>
                {/if}
            </dt>
            {if condition="!empty($vo.items)"}
                {volist name="vo.items" id="it"}
                <dd>
                    <a class="cursor_p" href="{$it.url}">{$it.name}</a>
                </dd>
                {/volist}
            {/if}
        </dl>
        {/volist}
    </div>
</div>

<!--搜索弹框-->
<div class="marsk-container" style="display: none;">
    <div class="popup-quick">
        <div class="ac-close float_r "><img src="__PUBLIC__/m_weben/images/close.png"></div>
        <div class="search-in">
            <input type="text" placeholder="产品 USB 2.0..." id="search-input1">
            <button id="search-btnput" class="search-button">搜索</button>
            <div class="title-text">
                <p><a href="#">搜索历史</a></p>
                <?php $history_list = getBannerList(90, 5);?>
                {volist name="history_list" id="vo"}
                <p><a href="{$vo.url}">{$vo.name}</a></p>
                {/volist}
            </div>
        </div>
    </div>
</div>
<!--弹出框-->
<script>
    $(function(){
        navHeader();
        $(window).scroll(function () {
            navHeader();
        })
        function navHeader() {
            if ($(window).scrollTop() > 0) {
                $(".header").addClass("m_nav");
            } else {
                $(".header").removeClass("m_nav");
            }
        }
    });

    /*menu菜单*/
    $(function() {
        $(".spn1").click(function() {
            $(this).toggleClass("icon-close");
            $(".menu").slideToggle(800);
            $(".m-Country").hide();
        });
    });

    /*字体大小变化*/
    /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
    /* 长宽占位 rem算法, 根据root的rem来计算各元素相对rem, 默认html 320/20 = 16px */
    function placeholderPic() {
        var w = document.documentElement.offsetWidth;
        if (w > 750) {
            document.documentElement.style.fontSize = 750 / 20 + 'px';
        } else {
            document.documentElement.style.fontSize = w / 20 + 'px';
        }
    }
    placeholderPic();
    window.onresize = function() {
        placeholderPic();
    }

    /*头部*/
    $(function() {
        $(".menu dl dt").click(function() {
            $(this).nextAll().slideToggle(500);
            $(this).children("i").toggleClass("rotate");
        })
    })

    /*搜索弹框*/
    $(function() {
        $('.del-button').click(function() {
            $(".marsk-container").show();
        });
    });
    /*弹出框关闭*/
    $(function() {
        $('.ac-close').click(function() {
            $(".marsk-container").hide();
        });
    });

    /************搜索****************/
    $(function() {
        var search_input = $("#search-input1");
        $(search_input).on("keyup", function(e) {
            $("#search-input1").keyup(function(event) {
                if (event && event.keyCode === 13) {
                    var keywords = $("#search-input1").val();
                    var href = "/mobile<?php echo url('/search'); ?>?skeyword=" +
                        encodeURIComponent(keywords);
                    location.href = href;
                    $("#modal").hide();
                }
            });
        });

        $("#search-btnput").bind("click", function(event) {
            var skeyword = $("#search-input1").val();
            if (skeyword) {
                var href = "<?php echo url('/mobile/search'); ?>?skeyword=" + encodeURIComponent(skeyword);
                location.href = href;
            } else {
                var href = "<?php echo url('/mobile/search'); ?>";
                location.href = href;
            }
        });
    });
</script>
<style>

    .search-in input {
        width: 72% !important;
        height: 2.8rem;
        background: #ffffff;
        border: 1px solid #d6d6d6;
        opacity: 1;
        border-radius: 20px;
        padding: 0 1rem;
    }
    .search-button {
        border: none;
        font-size: 0.9rem;
        color: #fff;
        position: absolute;
        right: 15px;
        top: 12.2rem;
        cursor: pointer;
        background: #0060ff;
        height: 2.5rem;
        border-radius: 20px;
        padding: 0 1rem;
    }
</style>