index.vue

<template>
    <section class="layout-wrapper beauty-scroll">
        <aside :class="['layout-side', 'beauty-scroll', isCollapsed ? 'collapsed' : 'expansion']">
            <div class="layout-side-children">
                <div class="logo dark">
                    <a aria-current="page">
                        <img src="@/assets/images/logo.png" />
                        <h1>{{ setting.name.zh }}</h1>
                    </a>
                </div>
                <ul role="menu" class="menu">
                    <TreeMenu v-for="(menu, index) in menuList" :key="index" :data="menu" :isCollapsed="isCollapsed"></TreeMenu>
                </ul>
            </div>
        </aside>
        <div :class="['layout-virtual-side', isCollapsed ? 'collapsed' : 'expansion']"></div><!-- 占位 -->
        <!-- <div class="layout-side-setting">
            <div :class="['mask', drawerShow ? 'open':'close']"></div>
            <div :class="['drawer', 'right', drawerShow ? 'open':'close']" ref="drawer">
                <div class="content beauty-scroll">
                    <div class="side-setting">
                        <div class="setting-item">
                            <button type="button" class="primary">
                                <i aria-label="图标: save" class="webicon">
                                    <svg viewBox="64 64 896 896" data-icon="save" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"></path></svg>
                                </i>
                                <span>保存配置</span>
                            </button>
                            <button type="button" class="dashed" style="float: right;">
                                <i aria-label="图标: redo" class="webicon">
                                    <svg viewBox="64 64 896 896" data-icon="redo" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M758.2 839.1C851.8 765.9 912 651.9 912 523.9 912 303 733.5 124.3 512.6 124 291.4 123.7 112 302.8 112 523.9c0 125.2 57.5 236.9 147.6 310.2 3.5 2.8 8.6 2.2 11.4-1.3l39.4-50.5c2.7-3.4 2.1-8.3-1.2-11.1-8.1-6.6-15.9-13.7-23.4-21.2a318.64 318.64 0 0 1-68.6-101.7C200.4 609 192 567.1 192 523.9s8.4-85.1 25.1-124.5c16.1-38.1 39.2-72.3 68.6-101.7 29.4-29.4 63.6-52.5 101.7-68.6C426.9 212.4 468.8 204 512 204s85.1 8.4 124.5 25.1c38.1 16.1 72.3 39.2 101.7 68.6 29.4 29.4 52.5 63.6 68.6 101.7 16.7 39.4 25.1 81.3 25.1 124.5s-8.4 85.1-25.1 124.5a318.64 318.64 0 0 1-68.6 101.7c-9.3 9.3-19.1 18-29.3 26L668.2 724a8 8 0 0 0-14.1 3l-39.6 162.2c-1.2 5 2.6 9.9 7.7 9.9l167 .8c6.7 0 10.5-7.7 6.3-12.9l-37.3-47.9z"></path></svg>
                                </i>
                                <span>重置配置</span>
                            </button>
                        </div>
                        <div class="setting-item">
                            <h3>整体风格设置</h3>
                            <div style="display: flex;">
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/antfincdn/hmKaLQvmY2/LCkqqYNmvBEbokSDscrm.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="setting-item">
                            <h3>主题色</h3>
                            <div>
                                <div class="theme-color" style="background-color: rgb(245, 34, 45);"></div>
                                <div class="theme-color" style="background-color: rgb(250, 84, 28);"></div>
                                <div class="theme-color" style="background-color: rgb(250, 219, 20);"></div>
                                <div class="theme-color" style="background-color: rgb(62, 175, 124);"></div>
                                <div class="theme-color" style="background-color: rgb(19, 194, 194);">
                                    <i aria-label="图标: check" class="webicon">
                                        <svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                            <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path>
                                        </svg>
                                    </i>
                                </div>
                                <div class="theme-color" style="background-color: rgb(24, 144, 255);"></div>
                                <div class="theme-color" style="background-color: rgb(114, 46, 209);"></div>
                                <div class="theme-color" style="background-color: rgb(235, 47, 150);"></div>
                                <div style="clear: both"></div>
                            </div>
                        </div>
                        <div class="divider-horizontal"></div>
                        <div class="setting-item">
                            <h3>导航设置</h3>
                            <div style="display: flex;">
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                                <div class="img-check-box">
                                    <img src="https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg">
                                    <div class="check-item">
                                        <i aria-label="图标: check" class="webicon"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="setting-item">
                            <ul class="list-wrapper">
                                <li class="list-item">
                                    内容区域宽度
                                    <ul class="list-item-action">
                                        <li>
                                            <div tabindex="0" class="drop-down-list">
                                                <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="drop-down-list-selection">
                                                    <div class="drop-down-list-selection-rendered">
                                                        <div title="定宽" class="drop-down-list-selection-value">定宽</div>
                                                    </div>
                                                    <span unselectable="on" class="drop-down-list-selection-arrow" style="user-select: none;">
                                                        <i aria-label="图标: down" class="webicon">
                                                            <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                                                <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                                            </svg>
                                                        </i>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    固定Header
                                    <ul class="list-item-action">
                                        <li>
                                            <button type="button" role="switch" class="switch-button">
                                                <span class="switch-inner"></span>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    固定侧边栏
                                    <ul class="list-item-action">
                                        <li>
                                            <button type="button" role="switch" class="switch-button checked">
                                                <span class="switch-inner"></span>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="divider-horizontal"></div>
                        <div class="setting-item">
                            <h3>其他设置</h3>
                            <ul class="list-wrapper">
                                <li class="list-item">
                                    色弱模式
                                    <ul class="list-item-action">
                                        <li>
                                            <div tabindex="0" class="drop-down-list">
                                                <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="drop-down-list-selection">
                                                    <div class="drop-down-list-selection-rendered">
                                                        <div title="定宽" class="drop-down-list-selection-value">定宽</div>
                                                    </div>
                                                    <span unselectable="on" class="drop-down-list-selection-arrow" style="user-select: none;">
                                                        <i aria-label="图标: down" class="webicon">
                                                            <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                                                <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                                            </svg>
                                                        </i>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    多页签模式
                                    <ul class="list-item-action">
                                        <li>
                                            <button type="button" role="switch" class="switch-button">
                                                <span class="switch-inner"></span>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    隐藏设置抽屉
                                    <ul class="list-item-action">
                                        <li>
                                            <button type="button" role="switch" class="switch-button checked">
                                                <span class="switch-inner"></span>
                                            </button>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="divider-horizontal"></div>
                        <div class="setting-item">
                            <h3>页面切换动画</h3>
                            <ul class="list-wrapper">
                                <li class="list-item">
                                    禁用动画
                                    <ul class="list-item-action">
                                        <li>
                                            <div tabindex="0" class="drop-down-list">
                                                <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="drop-down-list-selection">
                                                    <div class="drop-down-list-selection-rendered">
                                                        <div title="定宽" class="drop-down-list-selection-value">定宽</div>
                                                    </div>
                                                    <span unselectable="on" class="drop-down-list-selection-arrow" style="user-select: none;">
                                                        <i aria-label="图标: down" class="webicon">
                                                            <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                                                <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                                            </svg>
                                                        </i>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    动画效果
                                    <ul class="list-item-action">
                                        <li>
                                            <div tabindex="0" class="drop-down-list">
                                                <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="drop-down-list-selection">
                                                    <div class="drop-down-list-selection-rendered">
                                                        <div title="光速" class="drop-down-list-selection-value">光速</div>
                                                    </div>
                                                    <span unselectable="on" class="drop-down-list-selection-arrow" style="user-select: none;">
                                                        <i aria-label="图标: down" class="webicon">
                                                            <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                                                <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                                            </svg>
                                                        </i>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                                <li class="list-item">
                                    动画方向
                                    <ul class="list-item-action">
                                        <li>
                                            <div tabindex="0" class="drop-down-list">
                                                <div role="combobox" aria-autocomplete="list" aria-haspopup="true" class="drop-down-list-selection">
                                                    <div class="drop-down-list-selection-rendered">
                                                        <div title="left" class="drop-down-list-selection-value">left</div>
                                                    </div>
                                                    <span unselectable="on" class="drop-down-list-selection-arrow" style="user-select: none;">
                                                        <i aria-label="图标: down" class="webicon">
                                                            <svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                                                <path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
                                                            </svg>
                                                        </i>
                                                    </span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="alert alert-warning" style="max-width: 240px; margin: -16px 0px 8px; word-break: break-all;">
                            <span class="alert-message">拷贝配置后，直接覆盖文件 src/config/config.js 中的全部内容，然后重启即可。（注意：仅会拷贝与默认配置不同的项）</span>
                            <span class="alert-description"></span>
                        </div>
                        <button data-clipboard-text="Sorry, you have copied nothing O(∩_∩)O~" type="button" class="web-btn" style="width: 100%;">
                            <i aria-label="图标: copy" class="webicon">
                                <svg viewBox="64 64 896 896" data-icon="copy" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"></path></svg>
                            </i>
                            <span>拷贝配置</span>
                        </button>
                    </div>
                </div>
                <div class="handler-button">
                    <div class="setting" @click.stop="drawerToggle">
                        <i v-if="true" aria-label="图标：setting" class="webicon">
                            <svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                <path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"></path>
                            </svg>
                        </i>
                        <i v-else aria-label="图标：close" class="webicon">
                            <svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
                            </svg>
                        </i>
                    </div>
                </div>
            </div>
        </div> -->
        <section class="layout-content beauty-scroll">
            <header :class="['layout-content-header', isCollapsed ? 'fixed-collapsed' : 'fixed-expansion']">
                <div class="header-wide side">
                    <i aria-label="图标：menu-fold" tabindex="-1" :class="['trigger', 'webicon', isCollapsed ? 'collapsed' : 'expansion']" @click.stop="collapseToggle">
                        <svg viewBox="64 64 896 896" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 0 0 0 13.8z"></path></svg>
                    </i>
                    <div class="header-right">
                        <!-- <div class="header-item">
                            <i aria-label="图标: search" tabindex="-1" class="webicon search-icon" @click.stop="onSelectClick">
                                <svg viewBox="64 64 896 896" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg>
                            </i>
                            <div tabindex="-1" class="header-select">
                                <input placeholder="站内搜索" type="text" value="" ref="headerInput" autofocus="autofocus" v-show="inputShow" v-on:focus="onSelectFocus" @blur="onSelectBlur">
                                <ul v-show="selectShow">
                                    <li>选项一</li>
                                    <li>选项二</li>
                                    <li>选项三</li>
                                </ul>
                            </div>
                        </div>
                        <a class="header-item">
                            <i aria-label="图标: question-circle-o">
                                <svg viewBox="64 64 896 896" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>
                                    <path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0 1 30.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1 0 80 0 40 40 0 1 0-80 0z"></path>
                                </svg>
                            </i>
                        </a> -->
                        <span class="header-item header-notice" @click.stop="tabsToggle">
                            <span class="notice-badge">
                                <i aria-label="图标: bell" class="webicon">
                                    <svg viewBox="64 64 896 896" data-icon="bell" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                        <path d="M816 768h-24V428c0-141.1-104.3-257.7-240-277.1V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.9c-135.7 19.4-240 136-240 277.1v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48zM304 768V428c0-55.6 21.6-107.8 60.9-147.1S456.4 220 512 220c55.6 0 107.8 21.6 147.1 60.9S720 372.4 720 428v340H304z"></path>
                                    </svg>
                                </i>
                                <sup title="12" class="badge-count" data-show="true" v-show="warnings.length">{{ warnings.length }}</sup>
                            </span>
                        </span>
                        <div class="header-item header-avatar" @click.stop="onAvatarClick" ref="avatar">
                            <span class="avatar">
                                <img src="https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png">
                            </span>
                            <span class="name">{{ $store.getters.name }}</span>
                        </div>
                        <!-- <div class="header-item" @click="onLangClick" ref="lang">
                            <i aria-label="图标: global" class="webicon">
                                <svg viewBox="64 64 896 896" data-icon="global" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                    <path d="M854.4 800.9c.2-.3.5-.6.7-.9C920.6 722.1 960 621.7 960 512s-39.4-210.1-104.8-288c-.2-.3-.5-.5-.7-.8-1.1-1.3-2.1-2.5-3.2-3.7-.4-.5-.8-.9-1.2-1.4l-4.1-4.7-.1-.1c-1.5-1.7-3.1-3.4-4.6-5.1l-.1-.1c-3.2-3.4-6.4-6.8-9.7-10.1l-.1-.1-4.8-4.8-.3-.3c-1.5-1.5-3-2.9-4.5-4.3-.5-.5-1-1-1.6-1.5-1-1-2-1.9-3-2.8-.3-.3-.7-.6-1-1C736.4 109.2 629.5 64 512 64s-224.4 45.2-304.3 119.2c-.3.3-.7.6-1 1-1 .9-2 1.9-3 2.9-.5.5-1 1-1.6 1.5-1.5 1.4-3 2.9-4.5 4.3l-.3.3-4.8 4.8-.1.1c-3.3 3.3-6.5 6.7-9.7 10.1l-.1.1c-1.6 1.7-3.1 3.4-4.6 5.1l-.1.1c-1.4 1.5-2.8 3.1-4.1 4.7-.4.5-.8.9-1.2 1.4-1.1 1.2-2.1 2.5-3.2 3.7-.2.3-.5.5-.7.8C103.4 301.9 64 402.3 64 512s39.4 210.1 104.8 288c.2.3.5.6.7.9l3.1 3.7c.4.5.8.9 1.2 1.4l4.1 4.7c0 .1.1.1.1.2 1.5 1.7 3 3.4 4.6 5l.1.1c3.2 3.4 6.4 6.8 9.6 10.1l.1.1c1.6 1.6 3.1 3.2 4.7 4.7l.3.3c3.3 3.3 6.7 6.5 10.1 9.6 80.1 74 187 119.2 304.5 119.2s224.4-45.2 304.3-119.2a300 300 0 0 0 10-9.6l.3-.3c1.6-1.6 3.2-3.1 4.7-4.7l.1-.1c3.3-3.3 6.5-6.7 9.6-10.1l.1-.1c1.5-1.7 3.1-3.3 4.6-5 0-.1.1-.1.1-.2 1.4-1.5 2.8-3.1 4.1-4.7.4-.5.8-.9 1.2-1.4a99 99 0 0 0 3.3-3.7zm4.1-142.6c-13.8 32.6-32 62.8-54.2 90.2a444.07 444.07 0 0 0-81.5-55.9c11.6-46.9 18.8-98.4 20.7-152.6H887c-3 40.9-12.6 80.6-28.5 118.3zM887 484H743.5c-1.9-54.2-9.1-105.7-20.7-152.6 29.3-15.6 56.6-34.4 81.5-55.9A373.86 373.86 0 0 1 887 484zM658.3 165.5c39.7 16.8 75.8 40 107.6 69.2a394.72 394.72 0 0 1-59.4 41.8c-15.7-45-35.8-84.1-59.2-115.4 3.7 1.4 7.4 2.9 11 4.4zm-90.6 700.6c-9.2 7.2-18.4 12.7-27.7 16.4V697a389.1 389.1 0 0 1 115.7 26.2c-8.3 24.6-17.9 47.3-29 67.8-17.4 32.4-37.8 58.3-59 75.1zm59-633.1c11 20.6 20.7 43.3 29 67.8A389.1 389.1 0 0 1 540 327V141.6c9.2 3.7 18.5 9.1 27.7 16.4 21.2 16.7 41.6 42.6 59 75zM540 640.9V540h147.5c-1.6 44.2-7.1 87.1-16.3 127.8l-.3 1.2A445.02 445.02 0 0 0 540 640.9zm0-156.9V383.1c45.8-2.8 89.8-12.5 130.9-28.1l.3 1.2c9.2 40.7 14.7 83.5 16.3 127.8H540zm-56 56v100.9c-45.8 2.8-89.8 12.5-130.9 28.1l-.3-1.2c-9.2-40.7-14.7-83.5-16.3-127.8H484zm-147.5-56c1.6-44.2 7.1-87.1 16.3-127.8l.3-1.2c41.1 15.6 85 25.3 130.9 28.1V484H336.5zM484 697v185.4c-9.2-3.7-18.5-9.1-27.7-16.4-21.2-16.7-41.7-42.7-59.1-75.1-11-20.6-20.7-43.3-29-67.8 37.2-14.6 75.9-23.3 115.8-26.1zm0-370a389.1 389.1 0 0 1-115.7-26.2c8.3-24.6 17.9-47.3 29-67.8 17.4-32.4 37.8-58.4 59.1-75.1 9.2-7.2 18.4-12.7 27.7-16.4V327zM365.7 165.5c3.7-1.5 7.3-3 11-4.4-23.4 31.3-43.5 70.4-59.2 115.4-21-12-40.9-26-59.4-41.8 31.8-29.2 67.9-52.4 107.6-69.2zM165.5 365.7c13.8-32.6 32-62.8 54.2-90.2 24.9 21.5 52.2 40.3 81.5 55.9-11.6 46.9-18.8 98.4-20.7 152.6H137c3-40.9 12.6-80.6 28.5-118.3zM137 540h143.5c1.9 54.2 9.1 105.7 20.7 152.6a444.07 444.07 0 0 0-81.5 55.9A373.86 373.86 0 0 1 137 540zm228.7 318.5c-39.7-16.8-75.8-40-107.6-69.2 18.5-15.8 38.4-29.7 59.4-41.8 15.7 45 35.8 84.1 59.2 115.4-3.7-1.4-7.4-2.9-11-4.4zm292.6 0c-3.7 1.5-7.3 3-11 4.4 23.4-31.3 43.5-70.4 59.2-115.4 21 12 40.9 26 59.4 41.8a373.81 373.81 0 0 1-107.6 69.2z"></path>
                                </svg>
                            </i>
                            简体
                        </div> -->
                    </div>
                </div>
            </header>
            <header class="layout-virtual-header" style="display: block;"></header>
            <main class="layout-content-main">
                <transition name="fade-transform" mode="out-in">
                    <keep-alive v-if="$route.meta.keepAlive">
                        <router-view :key="key"></router-view>
                    </keep-alive>
                    <router-view v-else :key="key"></router-view>
                </transition>
            </main>
            <footer class="layout-content-footer">
                <div class="footer">
                    <div class="copyright">
                        Copyright
                        <i aria-label="图标: copyright" class="webicon">
                            <svg viewBox="64 64 896 896" data-icon="copyright" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372zm5.6-532.7c53 0 89 33.8 93 83.4.3 4.2 3.8 7.4 8 7.4h56.7c2.6 0 4.7-2.1 4.7-4.7 0-86.7-68.4-147.4-162.7-147.4C407.4 290 344 364.2 344 486.8v52.3C344 660.8 407.4 734 517.3 734c94 0 162.7-58.8 162.7-141.4 0-2.6-2.1-4.7-4.7-4.7h-56.8c-4.2 0-7.6 3.2-8 7.3-4.2 46.1-40.1 77.8-93 77.8-65.3 0-102.1-47.9-102.1-133.6v-52.6c.1-87 37-135.5 102.2-135.5z"></path>
                            </svg>
                        </i>{{ setting.author }}
                        <!-- <a target="_blank" href="https://pro.ant.design">Pro首页</a>
                        <a target="_blank" href="https://github.com/iczer/vue-antd-admin">
                            <i aria-label="图标: github" class="webicon">
                                <svg viewBox="64 64 896 896" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
                                    <path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path>
                                </svg>
                            </i>
                        </a>
                        <a target="_blank" href="https://ant.design">Ant Design</a> -->
                    </div>
                </div>
            </footer>
        </section>

        <div class="layout-drawer-side-menu">
            <div :class="['mask', drawerSideShow ? 'open':'close']"></div>
            <div :class="['drawer', 'left', drawerSideShow ? 'open':'close']" ref="drawer">
                <aside class="layout-side beauty-scroll expansion" ref="aside">
                    <div class="layout-side-children">
                        <div class="logo dark">
                            <a aria-current="page">
                                <img src="@/assets/images/logo.png" />
                                <h1>{{ setting.name }}</h1>
                            </a>
                        </div>
                        <ul role="menu" class="menu">
                            <TreeMenu v-for="(menu, index) in menuList" :key="index" :data="menu" :isCollapsed="false"></TreeMenu>
                        </ul>
                    </div>
                </aside>
            </div>
        </div>

        <div class="dropdown-tabs" v-show="tabsShow" ref="tabs">
            <div class="tabs-nav-wrap top">
                <p class="header">
                    <label>通知</label>
                    <span>全部标记已读</span>
                </p>
            </div>
            <div class="tabs-content beauty-scroll">
                <transition-group tag="div" :name="animate">
                    <ul v-show="currentTabIndex == 0" :key="0">
                        <li v-for="(item, index) in warnings" :key="index">
                            <div class="avatar" :style="{ background: item.color }">
                                <label :style="{ color: item.color == 'yellow' ? 'blue':'white' }">{{ item.color | getStatus }}</label>
                            </div>
                            <div class="content">
                                <h4 class="title">{{ item.title }}</h4>
                                <div class="description">
                                    <p>{{ item.time }}</p>
                                    <span>已读</span>
                                </div>
                            </div>
                        </li>
                        <li class="empty" v-if="warnings.length == 0">
                            <div class="empty-image">
                                <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fillRule="evenodd"><ellipse fill="#F5F5F5" cx="32" cy="33" rx="32" ry="7"></ellipse><g fillRule="nonzero" stroke="#D9D9D9"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#FAFAFA"></path></g></g></svg>
                                <p class="empty-description">暂无数据</p>
                            </div>
                        </li>
                    </ul>
                </transition-group>
            </div>
            <div class="tabs-nav-wrap bottom">
                <p class="all-text" @click="redirectTo('/alarm/log')">查看全部通知</p>
            </div>
        </div>

        <div class="dropdown" v-show="userShow" style="right: 20px;">
            <ul>
                <li @click="redirectTo('/profile')">
                    <i aria-label="图标: user" class="webicon">
                        <svg viewBox="64 64 896 896" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg>
                    </i>个人中心
                </li>
                <!-- <li @click="redirectTo('/system/profile')">
                    <i aria-label="图标: setting" class="webicon">
                        <svg viewBox="64 64 896 896" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 0 0 9.3-35.2l-.9-2.6a443.74 443.74 0 0 0-79.7-137.9l-1.8-2.1a32.12 32.12 0 0 0-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 0 0-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 0 0-25.8 25.7l-15.8 85.4a351.86 351.86 0 0 0-99 57.4l-81.9-29.1a32 32 0 0 0-35.1 9.5l-1.8 2.1a446.02 446.02 0 0 0-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 0 0-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0 0 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0 0 25.8 25.7l2.7.5a449.4 449.4 0 0 0 159 0l2.7-.5a32.05 32.05 0 0 0 25.8-25.7l15.7-85a350 350 0 0 0 99.7-57.6l81.3 28.9a32 32 0 0 0 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 0 1-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 0 1-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 0 1 512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 0 1 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 0 1 624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg>
                    </i>设置
                </li> -->
                <li class="divider"></li>
                <li @click="redirectTo('/login')">
                    <i aria-label="图标: poweroff" class="webicon">
                        <svg viewBox="64 64 896 896" data-icon="poweroff" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"><path d="M705.6 124.9a8 8 0 0 0-11.6 7.2v64.2c0 5.5 2.9 10.6 7.5 13.6a352.2 352.2 0 0 1 62.2 49.8c32.7 32.8 58.4 70.9 76.3 113.3a355 355 0 0 1 27.9 138.7c0 48.1-9.4 94.8-27.9 138.7a355.92 355.92 0 0 1-76.3 113.3 353.06 353.06 0 0 1-113.2 76.4c-43.8 18.6-90.5 28-138.5 28s-94.7-9.4-138.5-28a353.06 353.06 0 0 1-113.2-76.4A355.92 355.92 0 0 1 184 650.4a355 355 0 0 1-27.9-138.7c0-48.1 9.4-94.8 27.9-138.7 17.9-42.4 43.6-80.5 76.3-113.3 19-19 39.8-35.6 62.2-49.8 4.7-2.9 7.5-8.1 7.5-13.6V132c0-6-6.3-9.8-11.6-7.2C178.5 195.2 82 339.3 80 506.3 77.2 745.1 272.5 943.5 511.2 944c239 .5 432.8-193.3 432.8-432.4 0-169.2-97-315.7-238.4-386.7zM480 560h64c4.4 0 8-3.6 8-8V88c0-4.4-3.6-8-8-8h-64c-4.4 0-8 3.6-8 8v464c0 4.4 3.6 8 8 8z"></path></svg>
                    </i>退出登录
                </li>
            </ul>
        </div>

    </section>
</template>

<script>
import TreeMenu from './TreeMenu'
import setting from "@/settings.js";
import ResizeMixin from "./mixin/ResizeHandler";

const pageInfos = setting.pageInfos;

export default {
    name: 'Layout',
    components: {
        TreeMenu
    },
    mixins: [ResizeMixin],
    watch: {
        currentTabIndex(n, o) {
            if (n > o) this.animate = "slide-left"
            else this.animate = "slide-right"
        },
    },
    filters: {
        getStatus(status) {
            if (status == 'red') return '紧急'
            else if (status == 'orange') return '重要'
            else return '一般'
        }
    },
    computed: {
        key() {
            return this.$route.path;
        },
    },
    data () {
        return {
            setting,
            animate: "",
            isCollapsed: false,
            inputShow: false,
            drawerShow: false,
            selectShow: false,
            tabsShow: false,
            userShow: false,
            drawerSideShow: false,
            currentTabIndex: 0,
            menuList: pageInfos,
            warnings: [],
        }
    },
    methods: {
        redirectTo(path) {
            if (path == "/login") {
                this.$store.dispatch("user/removeRole")
                this.$store.dispatch("user/removeToken")
            }
            this.$router.push(path)
        },
        setRootStyle() {
            // const wrapperDom = this.$el;
            const wrapperDom = document.querySelector(".layout-wrapper");
            if (wrapperDom) {
                wrapperDom.parentNode.setAttribute("class", "beauty-scroll");
                wrapperDom.parentNode.setAttribute("style", "height: 100vh;overflow-y: scroll;");
            }
        },
        onSelectClick() {
            this.inputShow = true
            this.$refs.headerInput.focus()
        },
        onSelectFocus() {
            // this.selectShow = true
            console.log('select focus')
        },
        onSelectBlur() {
            this.inputShow = false
            // this.selectShow = false
        },
        onTabsClick(idx) {
            this.currentTabIndex = idx
        },
        onAvatarClick() {
            this.userShow = true
        },
        drawerToggle() {
            this.drawerShow = !this.drawerShow
        },
        tabsToggle() {
            this.tabsShow = !this.tabsShow
        },
        collapseToggle() {
            this.isCollapsed = !this.isCollapsed

            const windowWidth = document.body.clientWidth || document.documentElement.clientWidth
            if (windowWidth < 768) { // 根据可视范围内窗口宽度决定点击按钮显示哪个菜单
                this.drawerSideShow = !this.drawerSideShow
            }
        },
        userToggle() {
            this.userShow = !this.userShow
        },
        handleDocumentClick(e) {
            if (!e || !e.target) return
            if (this.drawerShow && this.$refs.drawer && !this.$refs.drawer.contains(e.target)) {
                this.drawerShow = false
            }
            else if (this.tabsShow && this.$refs.tabs && !this.$refs.tabs.contains(e.target)) {
                this.tabsShow = false
            }
            else if (this.userShow && this.$refs.avatar && this.$refs.avatar && !this.$refs.avatar.contains(e.target)) {
                this.userShow = false
            }
            else if (this.drawerSideShow && this.$refs.aside && !this.$refs.aside.contains(e.target)) {
                this.drawerSideShow = false
            }
        },
    },
    mounted() {
        this.setRootStyle()
        document.addEventListener('click', this.handleDocumentClick)
    },
    created() {},
}
</script>

<style lang="less">
.beauty-scroll {
    position: relative;
    scrollbar-color: #13c2c2 #b5f5ec;
    scrollbar-width: thin;
    -ms-overflow-style: none;
}
.beauty-scroll::-webkit-scrollbar {
    width: 3px;
    height: 1px;
}
.beauty-scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: #13c2c2;
}
.beauty-scroll::-webkit-scrollbar-track {
    background: #87e8de;
    border-radius: 3px;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
}
.wrapper {
    color: #2c3e50;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    margin-top: 60px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.layout-wrapper {
    background: #f0f2f5;
    box-sizing: border-box;
    display: flex;
    flex: auto;
    flex-direction: row;
    position: relative;
    min-height: 0;
    -webkit-box-direction: normal;
    -webkit-box-flex: 1;
    -webkit-box-orient: horizontal;
    aside.layout-side {
        background: #032121;
        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
        box-sizing: border-box;
        display: block;
        height: 100vh;
        left: 0;
        min-height: 100vh;
        overflow-y: auto;
        position: fixed;
        top: 0;
        transition: all 0.2s;
        z-index: 10;
        -webkit-box-direction: normal;
        -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
        -webkit-box-sizing: border-box;
        -webkit-transition: all 0.2s;
        &.expansion {
            flex: 0 0 256px;
            max-width: 256px;
            min-width: 256px;
            width: 256px;
        }
        &.collapsed {
            flex: 0 0 80px;
            max-width: 80px;
            min-width: 80px;
            width: 80px;
        }
        & > div.layout-side-children {
            height: 100%;
            margin-top: -0.1px;
            padding-top: 0.1px;
            & > div.logo {
                background-color: #053434;
                height: 64px;
                position: relative;
                line-height: 64px;
                overflow: hidden;
                padding-left: 24px;
                transition: all 0.3s;
                -webkit-transition: all 0.3s;
                & > a {
                    & > img {
                        vertical-align: middle;
                        width: 32px;
                    }
                    & > h1 {
                        color: #fefefe;
                        display: inline-block;
                        font-size: 20px;
                        margin: 0 0 0 12px;
                        vertical-align: middle;
                    }
                }
            }
            ul.menu {
                background: #032121;
                border-right: 0;
                box-shadow: none;
                box-sizing: border-box;
                color: rgba(254, 254, 254, 0.65);
                font-feature-settings: 'tnum';
                font-size: 14px;
                font-variant: tabular-nums;
                line-height: 0;
                list-style: none;
                margin: 0;
                margin-bottom: 0;
                outline: none;
                padding: 16px 0;
                transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
                width: 100%;
                zoom: 1;
                -webkit-box-shadow: none;
                -webkit-transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
                &::before {
                    display: table;
                    content: '';
                }
                & > li.menu-submenu {
                    color: rgba(254, 254, 254, 0.65);
                    padding-bottom: 0.02px;
                    transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    -webkit-transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    & > div.menu-submenu-title {
                        cursor: pointer;
                        display: block;
                        font-size: 14px;
                        height: 40px;
                        line-height: 40px;
                        margin: 0;
                        margin-bottom: 4px;
                        margin-top: 4px;
                        overflow: hidden;
                        padding: 0 16px;
                        padding-right: 34px;
                        position: relative;
                        text-overflow: ellipsis;
                        transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                        white-space: nowrap;
                        width: 100%;
                        -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                        &.collapsed {
                            padding: 0 32px !important;
                            left: 0;
                            text-overflow: clip;
                            i {
                                font-size: 18px !important;
                                margin-right: 0px;
                            }
                        }
                        & > span {
                            overflow: hidden;
                            text-overflow: clip;
                            white-space: normal;
                            & > i {
                                font-size: 14px;
                                margin-right: 10px;
                                min-width: 14px;
                                transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                                -webkit-font-smoothing: antialiased;
                                -webkit-transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                            }
                        }
                        & > i.menu-submenu-arrow {
                            border-color: #fff;
                            border-style: solid;
                            content: "";
                            display: inline-block;
                            height: 7px;
                            opacity: 0.45;
                            position: absolute;
                            right: 16px;
                            top: 38%;
                            width: 7px;
                            transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
                            -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
                            transition: border 0.3s ease-in-out;
                            transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                            &.up {
                                border-width: 2px 0 0 2px; // 上箭头
                            }
                            &.down {
                                border-width: 0 2px 2px 0; // 下箭头
                            }
                            &.left {
                                border-width: 0 0 2px 2px; // 左箭头
                            }
                            &.right {
                                border-width: 2px 2px 0 0; // 右箭头
                            }
                        }
                    }
                    &:hover {
                        color: #fff;
                    }
                    & > ul.menu.menu-sub {
                        background: #110203;
                        border: 0;
                        border-radius: 0;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
                        box-sizing: border-box;
                        color: rgba(254,254,254, 0.65);
                        cursor: initial;
                        font-size: 14px;
                        font-feature-settings: 'tnum';
                        font-variant: tabular-nums;
                        line-height: 0;
                        list-style: none;
                        margin: 0;
                        outline: none;
                        padding: 0;
                        transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        width: 100%;
                        zoom: 1;
                        -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset;
                        &::before, &::after {
                            display: table;
                            content: '';
                        }
                        & > li.menu-item {
                            & > a {
                                overflow: hidden;
                                text-overflow: clip;
                                white-space: normal;
                                &.router-link-active {
                                    color: #13c2c2;;
                                }
                            }
                        }
                    }
                }
                & > li.menu-item {
                    border-right: 0;
                    color: rgba(254, 254, 254, 0.65);
                    cursor: pointer;
                    display: block;
                    font-size: 14px;
                    height: 40px;
                    left: 0;
                    line-height: 40px;
                    margin-left: 0;
                    margin-top: 4px;
                    overflow: hidden;
                    padding: 0 16px;
                    position: relative;
                    text-overflow: ellipsis;
                    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    white-space: nowrap;
                    width: 100%;
                    -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
                    &:not(:last-child) {
                        margin-bottom: 8px;
                    }
                    &.collapsed {
                        padding: 0 32px !important;
                        left: 0;
                        text-overflow: clip;
                        i {
                            font-size: 18px !important;
                        }
                    }
                    &.selected {
                        background-color: #13c2c2;
                        & > a {
                            color: #fff;
                        }
                    }
                    &::after {
                        border-right: 0;
                        bottom: 0;
                        content: '';
                        opacity: 0;
                        position: absolute;
                        right: 0;
                        top: 0;
                        transform: scaleY(0.0001);
                        transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
                        transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
                        transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
                        -webkit-transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
                    }
                    & > a {
                        color: rgba(254, 254, 254, 0.65);
                        display: block;
                        // overflow: hidden;
                        text-overflow: clip;
                        white-space: normal;
                        &::before {
                            background-color: transparent;
                            bottom: 0;
                            content: '';
                            left: 0;
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                        &:hover {
                            color: #fff;
                        }
                        & > i {
                            font-size: 14px;
                            margin-right: 10px;
                            min-width: 14px;
                            transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                            -webkit-transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                            &.collapsed {
                                font-size: 16px;
                                margin-right: 0px;
                            }
                        }
                    }
                }
            }
        }
    }
    & > div.layout-drawer-side-menu {
        z-index: 9999;
        aside.layout-side {
            position: relative!important;
            li.collapsed {
                i {
                    margin-right: 5px!important;
                }
            }
        }
    }
    & > div.layout-virtual-side {
        box-sizing: border-box;
        display: block;
        transition: all 0.2s;
        -webkit-box-direction: normal;
        -webkit-box-sizing: border-box;
        -webkit-transition: all 0.2s;
        &.expansion {
            flex: 0 0 256px;
            max-width: 256px;
            min-width: 256px;
            width: 256px;
        }
        &.collapsed {
            flex: 0 0 80px;
            max-width: 80px;
            min-width: 80px;
            width: 80px;
        }
    }
    & > div.layout-side-setting {
        z-index: 10000;
        div.content {
            box-sizing: border-box;
            // display: inline-block;
            float: right;
            height: 100vh;
            overflow-y: auto;
            position: relative;
            -webkit-box-sizing: border-box;
            & > div.side-setting {
                background-color: #fff;
                font-size: 14px;
                line-height: 1.5;
                min-height: 100%;
                padding: 24px;
                position: relative;
                & > div.setting-item {
                    margin-bottom: 24px;
                    & > button {
                        background-image: none;
                        border: 1px solid transparent;
                        border-radius: 4px;
                        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
                        cursor: pointer;
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 400;
                        height: 32px;
                        line-height: 1.499;
                        outline: 0;
                        padding: 0 15px;
                        position: relative;
                        text-align: center;
                        touch-action: manipulation;
                        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        user-select: none;
                        white-space: nowrap;
                        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
                        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        -ms-touch-action: manipulation;
                        & > span {
                            margin-left: 8px;
                            display: inline-block;
                            transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                            pointer-events: none;
                            -webkit-transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        }
                    }
                    & > button.primary {
                        background-color: #13c2c2;
                        border-color: #13c2c2;
                        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
                        color: #fff;
                        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
                        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
                    }
                    & > button.dashed {
                        color: rgba(0, 0, 0, 0.65);
                        background-color: #fff;
                        border-color: #d9d9d9;
                        border-style: dashed;
                    }
                    & > h3 {
                        color: rgba(0, 0, 0, 0.85);
                        font-size: 14px;
                        line-height: 22px;
                        margin-bottom: 12px;
                    }
                    div.img-check-box {
                        border-radius: 4px;
                        cursor: pointer;
                        margin-right: 16px;
                        position: relative;
                        & > div.check-item {
                            color: #13c2c2;
                            font-size: 14px;
                            font-weight: bold;
                            height: 100%;
                            padding-left: 24px;
                            padding-top: 15px;
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 100%;
                        }
                    }
                    div.theme-color {
                        border-radius: 2px;
                        color: #fff;
                        cursor: pointer;
                        float: left;
                        font-weight: bold;
                        height: 20px;
                        margin-right: 8px;
                        text-align: center;
                        width: 20px;
                    }
                    ul.list-wrapper {
                        list-style: none;
                        outline: none;
                        padding: 0px;
                        position: relative;
                        transition: opacity 0.3s;
                        -webkit-transition: opacity 0.3s;
                        & > li.list-item {
                            align-items: center;
                            display: flex;
                            justify-content: space-between;
                            padding: 12px 0;
                            -webkit-box-align: center;
                            -webkit-box-pack: justify;
                            & > ul.list-item-action {
                                flex: 0 0 auto;
                                font-size: 0;
                                list-style: none;
                                margin-left: 48px;
                                padding: 0;
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 auto;
                                & > li {
                                    color: rgba(0, 0, 0, 0.45);
                                    cursor: pointer;
                                    display: inline-block;
                                    font-size: 14px;
                                    padding: 0 8px;
                                    position: relative;
                                    line-height: 22px;
                                    text-align: center;
                                    &:first-child {
                                        padding-left: 0;
                                    }
                                    & > div.drop-down-list {
                                        box-sizing: border-box;
                                        color: rgba(0, 0, 0, 0.65);
                                        display: inline-block;
                                        font-feature-settings: 'tnum';
                                        font-size: 14px;
                                        font-variant: tabular-nums;
                                        line-height: 1.5;
                                        list-style: none;
                                        margin: 0;
                                        outline: 0;
                                        padding: 0;
                                        position: relative;
                                        width: 80px;
                                        -webkit-box-sizing: border-box;
                                        -webkit-font-feature-settings: 'tnum';
                                        & > div.drop-down-list-selection {
                                            background-color: #fff;
                                            border: 1px solid #d9d9d9;
                                            border-radius: 4px;
                                            border-top-width: 1.02px;
                                            box-sizing: border-box;
                                            cursor: pointer;
                                            display: block;
                                            height: 24px;
                                            outline: none;
                                            position: relative;
                                            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                                            user-select: none;
                                            -webkit-box-sizing: border-box;
                                            -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                                            -webkit-user-select: none;
                                            -moz-user-select: none;
                                            -ms-user-select: none;
                                            & > div.drop-down-list-selection-rendered {
                                                display: block;
                                                line-height: 22px;
                                                margin-left: 7px;
                                                margin-right: 24px;
                                                position: relative;
                                                & > div.drop-down-list-selection-value {
                                                    display: block;
                                                    float: left;
                                                    max-width: 100%;
                                                    opacity: 1;
                                                    overflow: hidden;
                                                    text-overflow: ellipsis;
                                                    white-space: nowrap;
                                                }
                                                &::after {
                                                    content: '.';
                                                    display: inline-block;
                                                    pointer-events: none;
                                                    visibility: hidden;
                                                    width: 0;
                                                }
                                            }
                                            & > span.drop-down-list-selection-arrow {
                                                color: rgba(0, 0, 0, 0.25);
                                                display: inline-block;
                                                font-size: 12px;
                                                font-style: normal;
                                                line-height: 1;
                                                margin-top: -6px;
                                                position: absolute;
                                                right: 8px;
                                                text-align: center;
                                                text-rendering: optimizeLegibility;
                                                text-transform: none;
                                                top: 50%;
                                                transform-origin: 50% 50%;
                                                vertical-align: -0.125em;
                                                -webkit-font-smoothing: antialiased;
                                                -webkit-transform-origin: 50% 50%;
                                                -moz-osx-font-smoothing: grayscale;
                                            }
                                        }
                                    }
                                    & > button.switch-button {
                                        background-color: rgba(0, 0, 0, 0.25);
                                        border: 1px solid transparent;
                                        border-radius: 100px;
                                        box-sizing: border-box;
                                        color: rgba(0, 0, 0, 0.65);
                                        cursor: pointer;
                                        display: inline-block;
                                        font-feature-settings: 'tnum';
                                        font-size: 14px;
                                        font-variant: tabular-nums;
                                        height: 16px;
                                        line-height: 14px;
                                        list-style: none;
                                        margin: 0;
                                        min-width: 28px;
                                        outline: none;
                                        padding: 0;
                                        position: relative;
                                        transition: all 0.36s;
                                        vertical-align: middle;
                                        user-select: none;
                                        -webkit-box-sizing: border-box;
                                        -webkit-font-feature-settings: 'tnum';
                                        -webkit-transition: all 0.36s;
                                        -webkit-user-select: none;
                                        -moz-user-select: none;
                                        -ms-user-select: none;
                                        &.checked {
                                            background-color: #13c2c2;
                                        }
                                        & > span.switch-inner {
                                            color: #fff;
                                            font-size: 12px;
                                            margin-left: 18px;
                                            margin-right: 3px;
                                            &::after {
                                                background-color: #fff;
                                                border-radius: 18px;
                                                box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
                                                content: ' ';
                                                cursor: pointer;
                                                height: 12px;
                                                left: 1px;
                                                position: absolute;
                                                top: 1px;
                                                width: 12px;
                                                transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                                                -webkit-box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
                                                -webkit-transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        &::after {
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            z-index: 10;
                            display: none \9;
                            width: 100%;
                            height: 100%;
                            background: #fff;
                            opacity: 0;
                            -webkit-transition: all 0.3s;
                            transition: all 0.3s;
                            content: '';
                            pointer-events: none;
                        }
                    }
                }
                & > div.divider-horizontal {
                    background: #f0f0f0;
                    clear: both;
                    color: rgba(0, 0, 0, 0.65);
                    display: block;
                    font-feature-settings: 'tnum';
                    font-size: 14px;
                    font-variant: tabular-nums;
                    height: 1px;
                    line-height: 1.5;
                    list-style: none;
                    margin: 24px 0;
                    min-width: 100%;
                    padding: 0;
                    position: relative;
                    top: -0.06em;
                    // vertical-align: middle;
                    width: 100%;
                }
                & > div.alert {
                    border-radius: 4px;
                    box-sizing: border-box;
                    color: rgba(0, 0, 0, 0.65);
                    font-feature-settings: 'tnum';
                    font-size: 14px;
                    font-variant: tabular-nums;
                    line-height: 1.5;
                    list-style: none;
                    margin: 0;
                    padding: 8px 15px 8px 37px;
                    padding: 8px 15px;
                    position: relative;
                    word-wrap: break-word;
                    -webkit-font-feature-settings: 'tnum';
                    -webkit-box-sizing: border-box;
                    &.alert-warning {
                        background-color: #fffbe6;
                        border: 1px solid #ffe58f;
                    }
                    & > span.alert-message {
                        color: rgba(0, 0, 0, 0.85);
                    }
                    & > span.alert-description {
                        display: none;
                        font-size: 14px;
                        line-height: 22px;
                    }
                }
            }
        }
        div.handler-button {
            cursor: pointer;
            display: inline-block;
            left: -40px;
            position: absolute;
            text-align: center;
            transition: all 0.5s;
            top: 200px;
            z-index: 100;
            -webkit-transition: all 0.5s;
            & > div.setting {
                background-color: #13c2c2;
                border-radius: 5px 0 0 5px;
                box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
                color: #fff;
                font-size: 22px;
                height: 40px;
                line-height: 40px;
                width: 40px;
                -webkit-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
            }
        }
    }
    & > section.layout-content {
        background: #f0f2f5;    
        box-sizing: border-box;
        display: flex;
        flex: auto;
        flex-direction: column;
        min-height: 0;
        overflow-x: hidden;
        position: relative;
        -webkit-box-flex: 1;
        -webkit-box-orient: vertical;
        -webkit-box-sizing: border-box;
        -webkit-box-direction: normal;
        & > header.layout-content-header {
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            display: block;
            flex: 0 0 auto;
            height: 64px;
            line-height: 64px;
            overflow: hidden;
            padding: 0;
            right: 0;
            top: 0;
            transition: all 0.2s;
            z-index: 10;
            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            -webkit-box-flex: 0;
            // -webkit-box-sizing: border-box;
            -webkit-transition: all 0.2s;
            &.fixed-collapsed {
                width: calc(100% - 80px);
                position: fixed;
            }
            &.fixed-expansion {
                width: calc(100% - 256px);
                position: fixed;
            }
            &.absolute {
                width: 100%;
                position: absolute;    
            }
            &.static {
                width: 100%;
                position: static;
            }
            & > div.header-wide {
                padding-left: 12px;
                & > i.trigger {
                    cursor: pointer;
                    font-size: 20px;
                    line-height: 64px;
                    padding: 0 24px;
                    transition: transform 0.3s;
                    vertical-align: top;
                    -webkit-transition: color 0.3s;
                    &.collapsed {
                        transform: rotate(180deg);
                        -ms-transform: rotate(180deg); 	    /* IE 9 */
                        -moz-transform: rotate(180deg); 	/* Firefox */
                        -webkit-transform: rotate(180deg);  /* Safari 和 Chrome */
                        -o-transform: rotate(180deg); 	    /* Opera */
                    }
                    &.expansion {
                        transform: rotate(0deg);
                        -ms-transform: rotate(0deg); 	    /* IE 9 */
                        -moz-transform: rotate(0deg); 	    /* Firefox */
                        -webkit-transform: rotate(0deg);    /* Safari 和 Chrome */
                        -o-transform: rotate(0deg); 	    /* Opera */
                    }
                }
                & > div.header-right {
                    color: inherit;
                    display: flex;
                    float: right;
                    & > .header-item {
                        align-self: center;
                        color: inherit;
                        cursor: pointer;
                        padding: 0 12px;
                        position: relative;
                        transition: width 0.3s ease-in-out;
                        & > i.search-icon {
                            cursor: pointer;
                            font-size: 16px;
                        }
                        & > div.header-select {
                            display: inline-block;
                            margin-left: 10px;
                            position: relative;
                            & > input {
                                border-bottom: 1px solid #aaa;
                                border-left: none;
                                border-right: none;
                                border-top: none;
                                font-size: 14px;
                                outline: none;
                                padding: 4px 8px;
                                ::-webkit-input-placeholder {
                                    /* Chrome/Opera/Safari */
                                    color: #999;
                                }
                                ::-moz-placeholder {
                                    /* Firefox 19+ */
                                    color: #999;
                                }
                                :-ms-input-placeholder {
                                    /* IE 10+ */
                                    color: #999;
                                }
                                :-moz-placeholder {
                                    /* Firefox 18- */
                                    color: #999;
                                }
                            }
                            & > ul {
                                background: #fff;
                                left: 0px;
                                list-style: none;
                                position: absolute;
                                top: 50px;
                                transform: translateZ(0px);
                                width: 100%;
                                z-index: 1000;
                                & > li {
                                    font-size: 14px;
                                    height: 20px;
                                    line-height: 20px;
                                }
                            }
                        }
                    }
                    & > .header-notice {
                        display: inline-block;
                        transition: all 0.3s;
                        -webkit-transition: all 0.3s;
                        & > span.notice-badge {
                            color: inherit;
                            display: inline-block;
                            font-feature-settings: 'tnum';
                            font-size: 14px;
                            font-variant: tabular-nums;
                            line-height: 1;
                            list-style: none;
                            margin: 0;
                            padding: 0;
                            position: relative;
                            vertical-align: initial;
                            & > i {
                                font-feature-settings: 'tnum';
                                font-size: 16px;
                                font-variant: tabular-nums;
                                list-style: none;
                                padding: 4px;
                            }
                            & > sup {
                                background: #f5222d;
                                border-radius: 10px;
                                box-shadow: 0 0 0 1px #fff;
                                color: #fff;
                                font-size: 12px;
                                font-weight: normal;
                                height: 20px;
                                line-height: 20px;
                                min-width: 20px;
                                overflow: hidden;
                                padding: 0 8px;
                                position: absolute;
                                right: 0;
                                text-align: center;
                                top: 0;
                                transform: translate(50%, -50%);
                                transform-origin: 100% 0%;
                                vertical-align: baseline;
                                white-space: nowrap;
                                z-index: 1;
                                -webkit-box-shadow: 0 0 0 1px #fff;
                                -webkit-transform: translate(50%, -50%);
                                -webkit-transform-origin: 100% 0%;
                            }
                        }
                    }
                    & > .header-avatar {
                        display: -webkit-inline-box;
                        display: -ms-inline-flexbox;
                        display: inline-flex;
                        & > .avatar {
                            align-self: center;
                            background: transparent;
                            border-radius: 50%;
                            color: #fff;
                            display: inline-block;
                            font-size: 14px;
                            font-feature-settings: 'tnum';
                            font-variant: tabular-nums;
                            height: 24px;
                            line-height: 24px;
                            list-style: none;
                            margin: 0;
                            margin-right: 8px;
                            overflow: hidden;
                            padding: 0;
                            position: relative;
                            text-align: center;
                            vertical-align: middle;
                            white-space: nowrap;
                            width: 24px;
                            & > img {
                                border-style: none;
                                display: block;
                                height: 100%;
                                object-fit: cover;
                                // vertical-align: middle;
                                width: 100%;
                                -o-object-fit: cover;
                            }
                        }
                        & > span.name {
                            font-weight: 500;
                        }
                    }
                }
            }
            & > div.header-wide.side {
                padding-right: 12px;
            }
        }
        & > header.layout-virtual-header {
            background: #032121;
            height: 64px;
            line-height: 64px;
            opacity: 0;
            padding: 0 50px;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
        }
        & > main.layout-content-main {
            display: block;
            flex: auto;
            min-height: calc(100vh - 64px - 122px);
            overflow-x: hidden;
            padding: 24px 24px 0;
            -ms-flex: auto;
            -webkit-box-flex: 1;
        }
        & > footer.layout-content-footer {
            color: rgba(0, 0, 0, 0.65);
            background: #f0f2f5;
            flex: 0 0 auto;
            font-size: 14px;
            padding: 24px 50px;
            -webkit-box-flex: 0;
            & > div.footer {
                color: rgba(0, 0, 0, 0.65);
                font-size: 14px;
                padding: 48px 16px 24px;
                text-align: center;
                & > div.links {
                    margin-bottom: 8px;
                    & > a {
                        color: rgba(0, 0, 0, 0.45);
                        transition: all 0.3s;
                        -webkit-transition: all 0.3s;
                    }
                    & > a:not(:last-child) {
                        margin-right: 40px;
                    }
                }
                & > div.copyright {
                    color: rgba(0, 0, 0, 0.45);
                    font-size: 14px;
                    & > i {
                        margin: 0 10px;
                        color: inherit;
                        display: inline-block;
                        font-style: normal;
                        line-height: 0;
                        text-align: center;
                        text-rendering: optimizeLegibility;
                        text-transform: none;
                        vertical-align: -0.125em;
                        -webkit-font-smoothing: antialiased;
                    }
                    & > a {
                        margin: 0px 5px;
                        display: inline-block;
                    }
                }
            }
        }
    }
    .dropdown-tabs {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        float: right;
        right: 120px;
        position: fixed; // 如果没有固定header，则设置为absolute
        top: 68px;
        width: 300px;
        z-index: 100;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        & > div.tabs-nav-wrap {
            &.top {
                border-bottom: 1px solid #f0f0f0;
            }
            &.bottom {
                border-top: 1px solid #f0f0f0;
            }
            & > ul {
                display: flex;
                padding: 0px 20px;
                position: relative;
                & > li {
                    flex: 1;
                    cursor: pointer;
                    padding: 15px 0px;
                    position: relative;
                    text-align: center;
                    transition: 0.2s all linear;
                    width: 33.3333%;
                    &::before {
                        border-bottom: 2px solid #13c2c2;
                        content: "";
                        height: 100%;
                        left: 100%;
                        position: absolute;
                        top: 0;
                        transition: 0.2s all linear;
                        width: 0;
                    }
                    &.active {
                        color: #13c2c2;
                    }
                    &.active::before {
                        width: 100%;
                        left: 0;
                        top: 0;
                    }
                    &.active~&::before {
                        left: 0;
                    }
                }
                // &::after {
                //     background-color: #13c2c2;
                //     bottom: 1px;
                //     content: "";
                //     box-sizing: border-box;
                //     display: block;
                //     height: 2px;
                //     left: 10px;
                //     position: absolute;
                //     transform: translate3d(0px, 0px, 0px);
                //     transform-origin: 0 0;
                //     transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                //     width: 33%;
                // }
            }
            & > p.header {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 0px 15px;
                & > label {
                    font-size: 14px;
                    font-weight: bold;
                    color: #110203;
                }
                & > span {
                    cursor: pointer;
                    font-size: 13px;
                }
            }
            & > p.all-text {
                color: #13c2c2;
                cursor: pointer;
                font-size: 13px;
                margin: 10px auto;
                text-align: center;
            }
        }
        & > div.tabs-content {
            height: 250px;
            overflow-y: auto;
            padding: 0px 20px 10px 20px;
            & > div {
                & > ul {
                    list-style: none;
                    & > li {
                        align-items: center;
                        border-bottom: 1px solid #f0f0f0;
                        display: flex;
                        justify-content: space-between;
                        padding: 12px 0;
                        &.empty {
                            color: rgba(0, 0, 0, 0.25);
                            font-size: 14px;
                            padding: 50px 15px;
                            justify-content: center;
                        }
                        & > div.avatar {
                            border-radius: 50%;
                            box-sizing: border-box;
                            color: #fff;
                            display: inline-block;
                            height: 32px;
                            font-size: 14px;
                            line-height: 32px;
                            margin-right: 16px;
                            overflow: hidden;
                            position: relative;
                            text-align: center;
                            vertical-align: middle;
                            white-space: nowrap;
                            width: 32px;
                            & > img {
                                display: block;
                                height: 100%;
                                -o-object-fit: cover;
                                object-fit: cover;
                                width: 100%;
                            }
                            & > label {
                                width: 50px;
                                height: 50px;
                                color: #ffffff;
                                border-radius: 50%;
                            }
                        }
                        & > div.content {
                            flex: 1;
                            & > .title {
                                cursor: pointer;
                                color: rgba(0, 0, 0, 0.65);
                                font-size: 14px;
                                line-height: 22px;
                                margin-bottom: 4px;
                            }
                            & > .description {
                                color: rgba(0, 0, 0, 0.45);
                                display: flex;
                                flex-direction: row;
                                font-size: 14px;
                                line-height: 22px;
                                justify-content: space-between;
                                & > p {
                                    margin: 0px;
                                }
                                & > span {
                                    color: #13c2c2;
                                    cursor: pointer;
                                    font-size: 13px;
                                    text-decoration-line: underline;
                                }
                            }
                        }
                        &:last-child {
                            border-bottom: none;
                        }
                    }
                }
                .slide-right-enter-active,
                .slide-right-leave-active,
                .slide-left-enter-active,
                .slide-left-leave-active {
                    will-change: transform;
                    transition: all 300ms;
                }
                .slide-right-enter {
                    opacity: 0;
                    transform: translate3d(-100%, 0, 0);
                }
                .slide-right-leave-active {
                    opacity: 0;
                    transform: translate3d(100%, 0, 0);
                }
                .slide-left-enter {
                    opacity: 0;
                    transform: translate3d(100%, 0, 0);
                }
                .slide-left-leave-active {
                    opacity: 0;
                    transform: translate3d(-100%, 0, 0);
                }                
            }

        }
    }
    .dropdown {
        box-sizing: border-box;
        color: rgba(0, 0, 0, 0.65);
        display: block;
        float: right;
        font-feature-settings: 'tnum';
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        margin: 0;
        padding: 0;
        position: fixed;
        top: 68px;
        z-index: 101;
        -webkit-box-sizing: border-box;
        -webkit-font-feature-settings: 'tnum';
        & > ul {
            background-clip: padding-box;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0, 0.15);
            list-style-type: none;
            margin: 0;
            outline: none;
            padding: 4px 0;
            position: relative;
            text-align: left;
            transform: translate3d(0,0,0);
            width: 150px;
            -webkit-box-shadow: 0 2px 8px rgba(0,0,0, 0.15);
            -webkit-transform: translate3d(0,0,0);
            & > li {
                clear: both;
                color: rgba(0, 0, 0, 0.65);
                cursor: pointer;
                font-size: 14px;
                font-weight: normal;
                line-height: 22px;
                margin: 0;
                padding: 5px 12px;
                transition: all 0.3s;
                white-space: nowrap;
                -webkit-transition: all 0.3s;
                &:hover {
                    background-color: #e1f0e7;
                }
                & > i {
                    font-size: 12px;
                    margin-right: 8px;
                    min-width: 12px;
                }
            }
            & > li.divider {
                background-color: #f0f0f0;
                height: 1px;
                line-height: 0px;
                margin: 4px 0px;
                overflow: hidden;
                padding: 0px;
            }
        }
    }
    .mask {
        background-color: rgba(0, 0, 0, 0.35);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        transition: all 0.5s;
        z-index: 100;
        -webkit-transition: all 0.5s;
    }
    .mask.close {
        display: none;
    }
    .mask.open {
        display: inline-block;
    }
    .drawer {
        position: fixed;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
        height: 100vh;
        z-index: 100;
    }
    .drawer.left {
        left: 0px;
    }
    .drawer.left.close {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
    .drawer.right {
        right: 0px;
    }
    .drawer.right.close {
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
    }
    .webicon {
        color: inherit;
        display: inline-block;
        font-style: normal;
        line-height: 0;
        outline: none;
        text-align: center;
        text-rendering: optimizeLegibility;
        text-transform: none;
        vertical-align: -0.125em;
        -webkit-font-smoothing: antialiased;
    }
    .web-btn {
        background-color: #fff;
        background-image: none;
        border: 1px solid transparent;
        border-color: #d9d9d9;
        border-radius: 4px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        color: rgba(0, 0, 0, 0.65);
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: 400;
        height: 32px;
        line-height: 1.499;
        padding: 0 15px;
        position: relative;
        white-space: nowrap;
        text-align: center;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        touch-action: manipulation;
        user-select: none;
        -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -ms-touch-action: manipulation;
        & > span {
            margin-left: 8px;
        }
        &::before {
            background: #fff;
            border-radius: inherit;
            bottom: -1px;
            content: '';
            display: none;
            left: -1px;
            opacity: 0.35;
            pointer-events: none;
            position: absolute;
            top: -1px;
            transition: opacity 0.2s;
            right: -1px;
            z-index: 1;
            -webkit-transition: opacity 0.2s;
        }
    }
    &::-webkit-scrollbar {
        width: 3px;
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: #13c2c2;
    }
    &::-webkit-scrollbar-track {
        border-radius: 3px;
        background: #87e8de;
        box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
    }
}

@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;

@media (max-width: @screen-sm-min - 1) {
    .layout-wrapper {
        & > aside.layout-side {
            display: none!important;
        }
        & > div.layout-virtual-side {
            display: none!important;
        }
        & > section.layout-content {
            & > header.layout-content-header {
                width: 100%!important;
            }
        }
        & > div.layout-drawer-side-menu {
            display: block;
        }
    }
}

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) {
    .layout-wrapper {
        & > aside.layout-side {
            display: block;
            flex: 0 0 80px;
            max-width: 80px;
            min-width: 80px;
            width: 80px;
        }
        & > div.layout-virtual-side {
            display: block;
            max-width: 80px;
            min-width: 80px;
            width: 80px;
        }
        & > div.layout-drawer-side-menu {
            display: none;
        }
    }
}
 
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) {
    .layout-wrapper {
        .layout-side {
            flex: 0 0 256px;
            max-width: 256px;
            min-width: 256px;
            width: 256px;
        }
        .layout-virtual-side {
            max-width: 256px;
            min-width: 256px;
            width: 256px;
        }
    }
}
 
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) {
    
}
</style>