<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('/system/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>