grayzhao
/
IOmga


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>IOmga</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='layui-v2.9.7/css/layui.css') }}">
    <style>
        /* 字体集 */
        @font-face {
          font-family: "思源黑体 Regular";
          font-weight: 400;
          src: url("{{ url_for('static', filename='font/SourceHanSans.Regular.woff2') }}") format("woff2"),
               url("{{ url_for('static', filename='font/SourceHanSans.Regular.woff') }}") format("woff");
          font-display: swap;
        }

        body, html {
            height: 100vh;
            margin: 0;
            padding: 0;
            font-family: '思源黑体 Regular', Helvetica, 'Microsoft YaHei', Arial, sans-serif;
        }

        .my-logo {
            height: 68px;
        }

        .my-icon {
            font-size: 18px;
            margin-right: 6px;
        }

        .main-container {
            height: 100%;
            width: 100%;
        }

        li#search-tab .layui-tab-close {
            display: none;
        }

        .index-tab-content {
            height: calc(100% - (41px + 10px));
            padding: 0;
        }

        .index-tab-content .layui-tab-item {
            height: 100%;
            width: 100%
        }

        .search-body-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .search-main-container {
            width: calc(100% - 200px);
            height: 300px;
        }

        .gradient {
            /* 背景渐变色 */
            background: linear-gradient(-45deg, #2af598 0%, #009efd 100%);
            /* 背景尺寸 */
            background-size: 600% 600%;
            /* 循环动画 */
            animation: gradientBG 5s ease infinite;
        }

        /* 动画，控制背景 background-position */
        @keyframes gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        .fish-gradient {
            background: -webkit-linear-gradient(left,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
			background: -o-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
			background: -moz-linear-gradient(right,rgba(89,114,192,0.8),rgba(89,114,192,0.2));
			background: linear-gradient(to right, rgba(89,114,192,0.8), rgba(89,114,192,0.2));
			background-size: 400% 400%;
			animation: fish-gradientBG 5s ease infinite;
        }

        @keyframes fish-gradientBG {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        /* 定义底部承载游动小鱼特效的div样式 */
        .fish-container {
            margin:0;
			padding:0;
			background-color:transparent;
			width:100%;
			height:200px;
			/* z-index:-1; */
			position:absolute;
			bottom:4px;
			left:0;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-fluid" style="height: 100%; padding: 0">
    <div class="layui-row" style="height: 100%">
        <div class="layui-col-md2" style="height: 100%;background-color: pink">
            <div class="layui-logo layui-hide-xs layui-bg-gray my-logo">
                <object data="{{ url_for('static', filename='img/LOGO.svg') }}">
                    <embed src="{{ url_for('static', filename='img/LOGO.svg') }}" ></embed>
                </object>
{#                <img src="{{ url_for('static', filename='img/LOGO.svg') }}">#}
            </div>
            <div class="layui-row" style="height: calc(100% - 68px)">
                <ul class="layui-nav layui-nav-tree" style="width: 100%; height: 100%; position: relative;">
                    <li class="layui-nav-item layui-this">
                        <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-home my-icon"></i>首页</a>
                    </li>
                    <li class="layui-nav-item">
                        <a class="layui-font-18" href="javascript:;"><i
                                class="layui-icon layui-icon-download-circle my-icon"></i>下载
                            <span class="layui-badge">9</span>
                        </a>
                    </li>
                    <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i
                            class="layui-icon layui-icon-component my-icon"></i>插件</a></li>
                    <li class="layui-nav-item"><a class="layui-font-18" href="javascript:;"><i
                            class="layui-icon layui-icon-set my-icon"></i>设置</a></li>
                    <li class="layui-nav-item" style="position: absolute; bottom: 0">
                        <hr class="layui-bg-black" style="margin: 0; border-bottom-width: 2px">
                        <a class="layui-font-18" href="javascript:;"><i class="layui-icon layui-icon-tips my-icon"></i>关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="layui-col-md10" style="height: 100%;background-color: white">
            <div class="main-container">
                {% block container %}main-container{% endblock %}
            </div>
        </div>
    </div>
</div>

<!-- 引入 layui.js 的 <script> 标签最好放置在 html 末尾 -->
<script src="{{ url_for('static', filename='layui-v2.9.7/layui.js') }}"></script>
<script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/fish.js') }}"></script>
<script>
    layui.config({
        base: "{{ url_for('static', filename='layui-modules/') }}",
        version: true
    }).use(["layer", "form", "laypage", "element", "util", "tag"], function () {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , element = layui.element
            , util = layui.util
            , tag = layui.tag;

        //欢迎信息
        layer.msg('Hello World');
        // 渲染 nav 导航菜单
        element.render('nav');
        // tab 切换事件
        element.on('tab(body-handle)', function(data){
            console.log(data.index); // 得到当前 tab 项的所在下标
            if (data.index === 0) {
                $("#jsi-flying-fish-container").empty();
                RENDERER.init();
            }
        });

        tag.on('click(demo)', function (data) {
            console.log('点击');
            console.log(this); //当前Tag标签所在的原始DOM元素
            console.log(data.index); //得到当前Tag的所在下标
            console.log(data.elem); //得到当前的Tag大容器
        });

        // 新增 tab
        util.on("lay-on", {
            openSearch: function () {
                let form_data = form.val('search-form');
                console.log(JSON.stringify(form_data));
                $.ajax({
                    url: "{{ url_for('get_search_url') }}",
                    method: 'GET',
                    data: form_data,
                    success: function(response) {
                        console.log(response);
                        let data = response.data;
                        // 创建一个新的 iframe 元素
                        let iframe = $('<iframe>', {
                            src: data.search_url,
                            id: data.id,
                            frameborder: 0,
                            scrolling: 'auto',
                            style: 'height: 100%; width: 100%; display: block;'
                        });
                        console.log(iframe.prop('outerHTML'));
                        element.tabAdd("body-handle", {
                            title: '搜索结果: ' + data.title,
                            content: iframe.prop('outerHTML'),
                            id: data.id,
                            change: true
                        });
                    },
                    error: function() {
                        console.error('Failed to get dynamic URL');
                    }
                });
            }
        })

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