index.jsp 6.23 KB
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>辞海云</title>
    <link rel="stylesheet" href="/static/css1/vendor.css">
</head>
<body>
    <div class="bg-video">
        <video src="/static/temp/xingkong.mp4" autoplay loop preload="true" x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" x5-video-player-type="h5" controls></video>
        <div class="bg-mask bg-mask-1"></div>
    </div>
    <div class="wrapper-index">
        <div class="header clearfix">
            <div class="nav pull-left">
                <a href="/annal/country">万国志</a>
                <i>/</i>
                <a href="/annal/area">地方志</a>
                <i>/</i>
                <a href="/annal/people">人物志</a>
            </div>
            <div class="login pull-right">
                <a class="active" href="javascript:;">登录</a>
                <a href="javascript:;">注册</a>
            </div>
        </div>
        <div class="logo">
            <img src="/static/images1/logo-search2.png" title="云辞海">
        </div>
        <form class="j_search_form" action="/home/search" method="GET">
            <div class="search-box clearfix">
                <div class="input-group pull-left">
                    <input class="form-control j_search_content" name="keyword" placeholder="输入关键词搜索">
                </div>
                <button class="btn-search pull-left" type="submit" href="javascript:;">
                    <span class="icon-search"></span>
                </button>
                <a class="icon-camera" href="javascript:;">
                    <input name="image" type="file" class="j_search_image" style="opacity: 0;width:20px" accept=".png, .jpg, .jpeg">
                </a>
            </div>
            <div class="radio-box clearfix">
                <label class="radio-inline">
                    <input type="radio" name="search-type" checked>词头</label>
                <label class="radio-inline">
                    <input type="radio" name="search-type">全文</label>
                <label class="radio-inline">
                    <input type="radio" name="search-type">图片</label>
                <label class="radio-inline">
                    <input type="radio" name="search-type">视频</label>
                <div class="search-help">
                    <span class="icon-mark">?</span>
                    <a href="javascript:;">搜索助手</a>
                </div>
            </div>
        </form>
        <div class="link-box clearfix">
            <a class="knowledge" href="/word/592"></a>
            <a class="word" href="/word/1"></a>
            <a class="cloud" href="javascript:;"></a>
            <a class="today" href="/today"></a>
        </div>
    </div>
    <script src="/static/js1/vendor.js" merge="true"></script>
    <script src="/static/js/plugins/jquery.min.js"></script>
    <script src="/static/js/layer/layer.js"></script>
    <script src="/static/js/plugins/validator/jquery.validator.js"></script>
    <script src="/static/js/backend.js"></script>
    <script>
        var $indexitemHover = $('.index-item-hover');
        $('.index-item').hover(function() {
            var $this = $(this),
                _position = $this.position();
            if (!$this.data('hover')) return;
            $indexitemHover.attr('src', $this.data('hover')).css({
                'width': 0.3125 * $(window).width(),
                'left': _position.left + $this.width() - 40,
                'top': _position.top + $this.height() - (0.4 * $this.height()),
                'display': 'block'
            })
        }, function() {
            $indexitemHover.hide();
        })
        $(function(){
            backEndApp.init();
            var index;
            $('.j_search_form').ajaxSubmitForm({
                before: function () {
                    index = layer.load(2, 5000);
                },
                success: function ($form, data) {
                    if (data.code === "OK") {
                        location.href = '/word/' + data.data.wordId;
                    }
                    else {
                        $.tip(data.message);
                        layer.close(index);
                    }
                },

            });
            $('.j_search_image').change(function () {
                var $this = $(this);
                var $form = $this.closest('form');
                if ($this.val() == null) {
                    return;
                }
                var index = layer.load(2, 10000);
                $.ajax({
                    url: '/image/search',
                    type: 'POST',
                    data: new FormData($form[0]),
                    cache: false,
                    contentType: false,
                    processData: false,
                    xhr: function () {
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) {
                            // For handling the progress of the upload
                            myXhr.upload.addEventListener('progress', function (e) {
                                if (e.lengthComputable) {
                                    $('progress').attr({
                                        value: e.loaded,
                                        max: e.total,
                                    });
                                }
                            }, false);
                        }
                        return myXhr;
                    },
                    success: function (data) {
                        if (data.code === "OK") {
                            location.href = '/word/' + data.data.wordId;
                        }
                        else {
                            $.tip(data.message);
                            layer.close(index);
                        }
                    },
                    error: function () {
                        layer.close(index);
                    },
                });
            });

        })
    </script>
</body>
</html>