caiping/app/admin/view/index/index.html

{extend name="common/base"/}
{block name="style"}
<link rel="stylesheet" href="{__GOUGU__}/gougu/css/layout.css" media="all">
<style>
    .total {
        margin-right: 80px;
        color: #999;
        margin-top: 5px;
        opacity: 0;
        transition: all 0.5s;
    }

    .box {
        text-align: center;
        position: absolute;
        top: 215%;
        left: 34%;
        transform: translate(-50%, -50%);
        background: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 0;

    }

    .top-text {
        width: 100%;
        height: 80%;
    }

    .bottom-button {
        width: 100%;
        height: 20%;
    }
    
    #read_num{
        color: white;
        position: absolute;
        top: 22px;
        left: 25px;
        background-color: #ff2f00bf;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    
    .layui-nav-itemed a{
        color: #162a48 !important;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="layui-layout-body">
    <div id="GouguApp">
        <div class="layui-layout gg-layout">
            <div class="layui-header">
                <!-- 头部区域 -->
                <div class="layui-layout-left">
                    <span class="gg-head-item">
                        <a href="javascript:;" gg-event="shrink" title="侧边伸缩"><i
                                class="layui-icon layui-icon-shrink-right"></i></a>
                    </span>
                    <span class="gg-head-item gg-head-cache">
                        <a href="javascript:;" gg-event="cache" data-href="/admin/api/cache_clear" title="清空缓存"><i
                                class="layui-icon layui-icon-fonts-clear"></i></a>
                    </span>
                    <span class="gg-head-item gg-head-home">
                        <a href="/" target="_blank" title="前台首页"><i class="layui-icon layui-icon-website"></i></a>
                    </span>
                </div>

                <div class="layui-layout-right">
                    <span class="gg-head-item gg-head-refresh">
                        <a href="javascript:;" class="refreshThis" gg-event="refresh" title="刷新">
                            <i class="layui-icon layui-icon-refresh"></i>
                        </a>
                    </span>
                    <span class="gg-head-item gg-head-screen">
                        <a href="javascript:;" gg-event="screen" data-screen="full">
                            <i class="fullScreen layui-icon layui-icon-screen-full"></i>
                        </a>
                    </span>
                    <span class="gg-head-item gg-head-set">

                        <a href="javascript:;" id="theme">
                            <i class="layui-icon layui-icon-set"></i>
                        </a>
                    </span>
                    <span class="gg-head-item gg-head-message">
                        <a data-href="/admin/message/index" href="javascript:;" data-id="1000"  id="clean_unread" data-title="消息中心"
                            class="side-menu-item" title="消息中心">
                            <i class="layui-icon layui-icon-notice">

                            </i>{if $count>0}<span id="read_num">{$count}</span>{/if}

                        </a>
                    </span>

                    <!-- <div class="box layui-card" style="opacity: 0;" id="message">
                        <div class="layui-card-header" style="border-bottom: 1px solid #e2e2e2;">
                            您有一条新的消息
                        </div>
                        <div class="layui-card-body">
                            <div class="top-text">
                                <span>张三</span><span>&nbsp;<b>审批通过</b>&nbsp;</span> <span style="color: #187FDD;">测试项目1</span>

                            </div>

                            <div class="bottom-button">
                                <a type="button" class="layui-btn layui-btn-xs side-menu-item"
                                    data-href="/admin/message/index" data-title="消息中心"
                                    href="javascript:;" data-id="1000"
                                    id = 'lock' style="color: white;"
                                >查看</a>
                                <button type="button" class="layui-btn layui-btn-xs layui-bg-orange" value="关闭"
                                    id="refreshParent">关闭</button>
                            </div>

                        </div>
                    </div> -->

                    <span class="gg-head-item gg-head-avatar">
                        <ul class="layui-nav">
                            <li class="layui-nav-item">
                                <a href="javascript:;">
                                    <img src="{:get_login_admin('thumb')}"
                                        onerror="javascript:this.src='{__ADMIN_IMG__}/nonepic360x360.jpg';this.onerror=null;">
                                    <cite>{:get_login_admin('nickname')}</cite>
                                </a>
                                <dl class="layui-nav-child" style="text-align: center; cursor: pointer;">
                                    <dd><a data-href="/admin/api/edit_personal" data-id="0101" data-title="基本资料"
                                            class="side-menu-item">基本资料</a></dd>
                                    <dd><a data-href="/admin/api/edit_password" data-id="0102" data-title="修改密码"
                                            class="side-menu-item">修改密码</a></dd>
                                    <dd><a data-href="/acctconnect/connect/index" data-id="0103" data-title="关联账号"
                                        class="side-menu-item">关联账号</a></dd>
                                    <hr>
                                    <dd gg-event="logout"><a>退出</a></dd>
                                </dl>
                            </li>
                        </ul>
                    </span>
                </div>
            </div>

            <!-- 侧边菜单 -->
            <div class="layui-side layui-side-menu layui-side-{$theme}">
                <div class="layui-side-scroll">
                    <div class="layui-logo" gg-event="closeAllTabs" style="color: black;font-size: 0.95vw;">
                        {$unit_name}
                        <!--                        <img src="{__ADMIN__}/images/syslogo.png" style="height: 40px;" class="syslogo">-->
                        <!--                        <img src="{__ADMIN__}/images/logo.png" style="height: 40px;" class="logo">-->
                    </div>

                    <ul id="menuList" class="layui-nav layui-nav-tree layui-inline" lay-shrink="all">
                        {foreach name="menu" item="a"}
                        <li class="layui-nav-item menu-li">
                            <a class="side-menu-item" href="javascript:;" class="side-menu-item" lay-tips="{$a.title}"
                                lay-direction="2" {notempty name="$a.isred" } data-red="{$a.isred}" {/notempty}
                                data-id="{$a.id}" data-title="{$a.title}" data-href="/{$a.src}"><i
                                    class="icon {$a.icon}"></i> {$a.title}</a>
                            {notempty name="$a.list"}
                            <dl class="layui-nav-child">
                                {foreach name="$a.list" item="b"}
                                <dd>
                                    <a href="javascript:;" class="side-menu-item" {notempty name="$b.isred" }
                                        data-red="{$b.isred}" {/notempty} data-id="{$b.id}" data-title="{$b.title}"
                                        data-href="/{$b.src}">{$b.title}</a>
                                    {notempty name="$b.list"}
                                    <dl class="layui-nav-child">
                                        {foreach name="$b.list" item="c"}
                                        <dd>
                                            <a href="javascript:;" class="side-menu-item" data-id="{$c.id}"
                                                data-title="{$c.title}" data-href="/{$c.src}">{$c.title}</a>
                                            {notempty name="$c.list"}
                                            <dl class="layui-nav-child">
                                                {foreach name="$c.list" item="d"}
                                                <dd><a href="javascript:;" class="side-menu-item" data-id="{$d.id}"
                                                        data-title="{$d.title}" data-href="/{$d.src}">{$d.title}</a>
                                                </dd>
                                                {/foreach}
                                            </dl>
                                            {/notempty}
                                        </dd>
                                        {/foreach}
                                    </dl>
                                    {/notempty}
                                </dd>
                                {/foreach}
                            </dl>
                            {/notempty}
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>

            <!-- 页面标签 -->
            <div id="pageTabs" class="page-tabs">
                <div class="layui-icon gg-tabs-control layui-icon-prev" gg-event="tabRollLeft"></div>
                <div class="layui-icon gg-tabs-control layui-icon-next" gg-event="tabRollRight"></div>
                <div class="layui-icon gg-tabs-control layui-icon-down">
                    <ul class="layui-nav gg-tabs-select">
                        <li class="layui-nav-item">
                            <a href="javascript:;"></a>
                            <dl class="layui-nav-child layui-anim-fadein">
                                <dd gg-event="closeThisTabs"><a href="javascript:;">关闭当前</a></dd>
                                <dd gg-event="closeOtherTabs"><a href="javascript:;">关闭其它</a></dd>
                                <dd gg-event="closeAllTabs"><a href="javascript:;">关闭全部</a></dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="layui-tab gg-admin-tab" lay-unauto lay-allowClose="true" lay-filter="gg-admin-tab">
                    <ul class="layui-tab-title" id="pageTabUl">
                        <li lay-id="0" lay-attr="view/home/index.html" class="layui-this"><i
                                class="layui-icon ri-home-smile-line"></i></li>

                    </ul>
                </div>
            </div>

            <!-- 主体内容 -->
            <div class="layui-body" id="GouguAppBody">
                <div class="gg-tab-page layui-show" id="tabItem0">
                    <iframe id="0" data-frameid="0" name="myiframe"
                        src="{if $type==0}{:url('/admin/index/main')}{elseif $type==2}{:url('/admin/index/main_company')}{/if}"
                        frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>
                </div>
            </div>



            <!-- 辅助元素，用于移动设备下遮罩 -->
            <div class="gg-body-shade" gg-event="shade"></div>
        </div>
    </div>
</div>
<!-- /主体 -->
{/block}
<!-- 脚本 -->
{block name="script"}

<script>
    const moduleInit = ['tool', 'admin'];

    function gouguInit() {
        layui.dropdown.render({
            elem: '#theme',
            trigger: 'mousedown',
            align: 'center',
            data: [{
                title: '经典黑',
                theme: 'black'
            }, {
                title: '简约白',
                theme: 'white'
            }, {
                title: '海军蓝',
                theme: 'blue'
            }],
            click: function (data, othis) {
                console.log(othis)
                $.ajax({
                    url: "/admin/index/set_theme",
                    data: {
                        'theme': data.theme
                    },
                    success: function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            setTimeout(function () {
                                parent.location.reload();
                            }, 1000)
                        }
                    }
                })
            }
        });

        window.showhongdian = function () {
            if($("a.layui-this").parent().parent().children().find('.hongdian').length == 1){
                // console.log($("a.layui-this").parent().parent().parent());
                $("a.layui-this").parent().parent().parent().find(".hongdian").css('display','none')
            }
            $('.layui-this').find('.hongdian').css('display','none')
        }

        var a = $('#menuList').find('a');

        for (let i = 0; i < a.length; i++) {
            if (a[i].dataset.red == 1) {
                a[i].innerHTML += ' <span  class="layui-badge-dot hongdian"></span>'
            }
        }

        $('#GouguApp').on("click", '[gg-event="logout"]', function () {
            layer.confirm('确认注销登录吗?', {
                icon: 7,
                title: '警告'
            }, function (index) {
                //注销
                $.ajax({
                    url: "/admin/login/login_out",
                    success: function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            setTimeout(function () {
                                location.href = "{:url('admin/login/index')}"
                            }, 1000)
                        }
                    }
                })
                layer.close(index);
            });
        });

        const box = document.querySelector('.box');

        function myfun1() {
            var opacity = 0;

            var fadeInterval = setInterval(function () {
                if (opacity < 1) {
                    opacity += 0.1;
                    box.style.opacity = opacity;
                } else {
                    clearInterval(fadeInterval);
                }
            }, 100);
        }


        //不要括号　　　　
        // window.onload = myfun1;

        // let i = 15
        // // 2.1 开启定时器
        // let n = setInterval(function myfun2() {
        //     i--
        //     if (i === 0) {
        //         clearInterval(n) // 关闭定时器

        //         var opacity = 1;

        //         var fadeInterval = setInterval(function () {
        //             if (opacity > 0) {
        //                 opacity -= 0.1;
        //                 box.style.opacity = opacity;
        //             } else {
        //                 clearInterval(fadeInterval);
        //                 box.style.display = "none";
        //             }
        //         }, 100);

        //     }
        // }, 1000)


        $("#clean_unread").click(function (){
            $("#read_num").css('display','none');
        })
        //关闭弹窗

        $('#refreshParent').click(()=>{
            let tanchuang = document.getElementById('message');
            tanchuang.style.display = 'none';
        })
        $('#lock').click(()=>{
            let tanchuang = document.getElementById('message');
            tanchuang.style.display = 'none';
        })


        function eliminate(type,lidom){
			let call=function (e){
				//写清除红点的js
				$(lidom[0]).find('.hongdian').css('display','none')
				let diannum = $('.hongdian').length
				let forcount = 0;
				if(diannum !== 0){
					for (let i = 0; i < diannum ; i++){

						let display = $('.hongdian')[i];
						console.log($(display).css('display'))
						if($(display).css('display') !== 'none'){
							forcount++
						}
					}
				}


				if(diannum == 0 || forcount == 0){
					parent.layui.pageTable.reloadData({
						done: function () {
							parent.hongdianselect()
						}
					})
				}

			}
			tool.post("/admin/project.api/eliminate", {type: type},call)
		}
    }
</script>
{/block}
<!-- /脚本 -->