index.jsp 6.52 KB
<%@ include file="/WEB-INF/jsp/include/taglib.jsp" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--添加此行消除额外空格--%>
<%@ page trimDirectiveWhitespaces="true" %>
<%--添加此行消除额外空格--%>
<!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" ></video>
    <div class="bg-mask bg-mask-1"></div>
</div>

<div class="wrapper-index">
    <div id="large-header">
        <canvas id="demo-canvas" width="100%" height="100%"></canvas>
    </div>
    <div class="content">
        <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>
                <ul class="btn-sec clearfix">
                    <li><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></li>
                    <li><a class="icon-mic" href="javascript:;"></a></li>

                </ul>

                </a>
                <div class="decoration-box box-3"></div>
                <div class="decoration-box box-2"></div>
                <div class="decoration-box box-1"></div>
            </div>
            <div class="search-wrap clearfix">
                <div class="search-help"><a href="javascript:;">高级检索</a><a href="javascript:;">搜索助手</a><span class="icon-mark">?</span></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>
</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 src="/static/js/home/EasePack.min.js"></script>
<script src="/static/js/home/TweenLite.min.js"></script>
<script src="/static/js/home/rAF.js"></script>
<script src="/static/js/home/demo-1.js"></script>
<style>
    .wrapper-index .search-box .btn-search {
        border: none;
    }

    .content {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
    }

    .wrapper-index .icon-camera {
        right: 2.17rem;
    }
</style>
<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>