优化首屏加载
Former-commit-id: fd7950a8a68a49c53f36d423fe0b298593a52b9b Former-commit-id: 3f101ce3fd1393a4e218fa29cb6074ef1b7adc79 Former-commit-id: 801c1e8b41b3f15cffba421160b2b0529084dcbb Former-commit-id: 1da627eb3dba8426f5134112bdac6a0d7ae995f1 [formerly eed4473502064e2953411e965e4c4db6986870b6] Former-commit-id: 6521ed46633aa4c4f9c4f48b7059b1e42d0b5c8f Former-commit-id: 2ae023459c3201e66f65c8d650ef302abe52d001 Former-commit-id: 9d06f049d6ebf6171ef56ca9608cf9ed9032ad00 Former-commit-id: e326a6c04f10b64f232367b0759499acbe0d4cdf Former-commit-id: 8d4564fc2f1d7eb7b23d84429f780761110ca3da
This commit is contained in:
FairyEver
450
src/assets/style/theme/theme-base.scss
Normal file
450
src/assets/style/theme/theme-base.scss
Normal file
@@ -0,0 +1,450 @@
|
||||
// 减小弹出菜单的项目高度
|
||||
.el-menu--popup {
|
||||
.el-menu-item {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
.el-submenu__title {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
// 整体框架结构
|
||||
.d2-layout-header-aside-group {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 900px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// 背景上面的半透明遮罩
|
||||
.d2-layout-header-aside-mask {
|
||||
@extend %full;
|
||||
}
|
||||
// 内容层
|
||||
.d2-layout-header-aside-content {
|
||||
@extend %full;
|
||||
.d2-theme-header {
|
||||
height: 60px;
|
||||
.d2-theme-header-menu {
|
||||
overflow: hidden;
|
||||
&.is-scrollable {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.d2-theme-header-menu__content {
|
||||
overflow: hidden;
|
||||
.d2-theme-header-menu__scroll {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
-webkit-transition: -webkit-transform .3s;
|
||||
transition: -webkit-transform .3s;
|
||||
transition: transform .3s;
|
||||
transition: transform .3s, -webkit-transform .3s;
|
||||
transition: transform .3s,-webkit-transform .3s;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
.d2-theme-header-menu__prev {
|
||||
left: 0;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.d2-theme-header-menu__next {
|
||||
right: 0;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-theme-container {
|
||||
.d2-theme-container-aside {
|
||||
transition: width .3s;
|
||||
position: relative;
|
||||
.d2-layout-header-aside-menu-side {
|
||||
@extend %full;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.d2-theme-container-main {
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.d2-theme-container-main-layer {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
.d2-theme-container-main-body {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 主题公用
|
||||
.d2-layout-header-aside-group {
|
||||
&.grayMode {
|
||||
-webkit-filter: grayscale(100%);
|
||||
-moz-filter: grayscale(100%);
|
||||
-ms-filter: grayscale(100%);
|
||||
-o-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
filter: gray;
|
||||
}
|
||||
// 主体
|
||||
.d2-layout-header-aside-content {
|
||||
// [布局] 顶栏
|
||||
.d2-theme-header {
|
||||
// logo区域
|
||||
.logo-group {
|
||||
transition: width .3s;
|
||||
float: left;
|
||||
text-align: center;
|
||||
img {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
// 折叠侧边栏切换按钮
|
||||
.toggle-aside-btn {
|
||||
float: left;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@extend %unable-select;
|
||||
i {
|
||||
font-size: 20px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
// [菜单] 顶栏
|
||||
.el-menu {
|
||||
float: left;
|
||||
border-bottom: none;
|
||||
background-color: transparent;
|
||||
%header-menu-item {
|
||||
@extend %unable-select;
|
||||
i.fa {
|
||||
font-size: 16px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
@extend %header-menu-item;
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-submenu {
|
||||
@extend %header-menu-item;
|
||||
.el-submenu__title {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 顶栏右侧的按钮
|
||||
.d2-header-right {
|
||||
float: right;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn-text {
|
||||
padding: 14px 12px;
|
||||
border-radius: 4px;
|
||||
margin: 0px !important;
|
||||
&.el-color-picker.el-color-picker--mini {
|
||||
padding: 9px 6px;
|
||||
}
|
||||
}
|
||||
.el-dropdown {
|
||||
@extend %unable-select;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [布局] 顶栏下面
|
||||
.d2-theme-container {
|
||||
// 侧边栏
|
||||
.d2-theme-container-aside {
|
||||
%d2-theme-container-aside-menu-icon {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
// [菜单] 正常状态
|
||||
.el-menu {
|
||||
@extend %unable-select;
|
||||
background-color: transparent;
|
||||
border-right: none;
|
||||
.el-menu-item {
|
||||
i {
|
||||
@extend %d2-theme-container-aside-menu-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
@extend %unable-select;
|
||||
.el-submenu__title {
|
||||
i {
|
||||
@extend %d2-theme-container-aside-menu-icon;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 菜单为空的时候显示的信息
|
||||
.d2-layout-header-aside-menu-empty {
|
||||
height: 160px;
|
||||
margin: 10px;
|
||||
margin-top: 0px;
|
||||
border-radius: 4px;
|
||||
@extend %unable-select;
|
||||
i {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
// [菜单] 折叠状态
|
||||
.el-menu--collapse {
|
||||
background-color: transparent;
|
||||
.el-submenu__title {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 右下 主体
|
||||
.d2-theme-container-main {
|
||||
// 主体部分分为多页面控制器 和主体
|
||||
.d2-theme-container-main-header {
|
||||
height: 41px;
|
||||
// 多页面控制器
|
||||
.d2-multiple-page-control-group {
|
||||
padding-right: 20px;
|
||||
.d2-multiple-page-control-content {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
.d2-multiple-page-control-content-inner {
|
||||
.d2-multiple-page-control {
|
||||
.el-tabs__header.is-top {
|
||||
margin: 0px;
|
||||
}
|
||||
.el-tabs__nav {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-multiple-page-control-btn {
|
||||
position: relative;
|
||||
bottom: -1px;
|
||||
.el-dropdown {
|
||||
.el-button-group {
|
||||
.el-button:first-child {
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
.el-button:last-child {
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 主体
|
||||
.d2-theme-container-main-body {
|
||||
// 布局组件
|
||||
.container-component {
|
||||
@extend %full;
|
||||
overflow: hidden;
|
||||
// 填充式布局组件
|
||||
.d2-container-full {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-full__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-full__body {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
padding: 20px 20px;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-full__footer {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
// 填充式布局组件 - 滚动优化
|
||||
.d2-container-full-bs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-full-bs__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-full-bs__body {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.d2-container-full-bs__body-wrapper-inner {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.d2-container-full-bs__footer {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
// 隐形布局组件
|
||||
.d2-container-ghost {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-ghost__header {
|
||||
padding: 20px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.d2-container-ghost__body {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-ghost__footer {
|
||||
padding: 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
// 隐形布局组件 - 滚动优化
|
||||
.d2-container-ghost-bs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-ghost-bs__header {
|
||||
padding: 20px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
.d2-container-ghost-bs__body {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.d2-container-ghost-bs__footer {
|
||||
padding: 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
// 卡片式布局组件
|
||||
.d2-container-card {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-card__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-card__body {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
.d2-container-card__body-card {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
.d2-container-card__footer {
|
||||
padding: 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
// 卡片式布局组件 - 滚动优化
|
||||
.d2-container-card-bs {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 20px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.d2-container-card-bs__header {
|
||||
padding: 20px;
|
||||
}
|
||||
.d2-container-card-bs__body {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
.d2-container-card-bs__body-wrapper-inner {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.d2-container-card-bs__body-card {
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
.d2-container-card-bs__footer {
|
||||
padding: 20px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
b9f3262f3fb1e36a9bdc4b480799afc6ea5e7b07
|
||||
416
src/assets/style/theme/theme.scss
Normal file
416
src/assets/style/theme/theme.scss
Normal file
@@ -0,0 +1,416 @@
|
||||
// 每个主题特有的设置
|
||||
.theme-#{$theme-name} {
|
||||
|
||||
.el-card {
|
||||
&.d2-card {
|
||||
border: $theme-container-border-outer;
|
||||
.el-card__header {
|
||||
border-bottom: $theme-container-border-outer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 背景图片和遮罩
|
||||
.d2-layout-header-aside-group {
|
||||
background-color: $theme-bg-color;
|
||||
.d2-layout-header-aside-mask {
|
||||
background: $theme-bg-mask;
|
||||
}
|
||||
}
|
||||
|
||||
// 菜单项目
|
||||
@mixin theme-menu-hover-style {
|
||||
color: $theme-menu-item-color-hover;
|
||||
i.fa {
|
||||
color: $theme-menu-item-color-hover;
|
||||
}
|
||||
background: $theme-menu-item-background-color-hover;
|
||||
}
|
||||
%el-menu-icon {
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
svg {
|
||||
margin: 0px;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.el-submenu__title {
|
||||
@extend %unable-select;
|
||||
@extend %el-menu-icon;
|
||||
}
|
||||
.el-menu-item {
|
||||
@extend %unable-select;
|
||||
@extend %el-menu-icon;
|
||||
}
|
||||
.el-submenu__title:hover {
|
||||
@include theme-menu-hover-style;
|
||||
}
|
||||
.el-menu-item:hover {
|
||||
@include theme-menu-hover-style;
|
||||
}
|
||||
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
|
||||
@include theme-menu-hover-style;
|
||||
}
|
||||
.el-menu--horizontal .el-menu .el-submenu__title:hover {
|
||||
@include theme-menu-hover-style;
|
||||
}
|
||||
|
||||
// 顶栏
|
||||
.d2-theme-header {
|
||||
// 顶栏菜单空间不足时显示的滚动控件
|
||||
.d2-theme-header-menu {
|
||||
.d2-theme-header-menu__prev, .d2-theme-header-menu__next {
|
||||
color: $theme-header-item-color;
|
||||
background: $theme-header-item-background-color;
|
||||
&:hover {
|
||||
color: $theme-header-item-color-hover;
|
||||
background: $theme-header-item-background-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 切换按钮
|
||||
.toggle-aside-btn {
|
||||
i {
|
||||
color: $theme-header-item-color;
|
||||
background: $theme-header-item-background-color;
|
||||
&:hover {
|
||||
color: $theme-header-item-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 顶栏菜单
|
||||
.el-menu {
|
||||
.el-menu-item {
|
||||
transition: border-top-color 0s;
|
||||
color: $theme-header-item-color;
|
||||
background: $theme-header-item-background-color;
|
||||
i.fa { color: inherit; }
|
||||
&:hover {
|
||||
color: $theme-header-item-color-hover;
|
||||
background: $theme-header-item-background-color-hover;
|
||||
i.fa { color: inherit; }
|
||||
}
|
||||
&:focus {
|
||||
color: $theme-header-item-color-focus;
|
||||
background: $theme-header-item-background-color-focus;
|
||||
i.fa { color: inherit; }
|
||||
}
|
||||
&.is-active {
|
||||
color: $theme-header-item-color-active;
|
||||
background: $theme-header-item-background-color-active;
|
||||
i.fa { color: inherit; }
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
&.is-active {
|
||||
.el-submenu__title {
|
||||
color: $theme-header-item-color-active;
|
||||
background: $theme-header-item-background-color-active;
|
||||
i.fa { color: inherit; }
|
||||
}
|
||||
}
|
||||
.el-submenu__title {
|
||||
transition: border-top-color 0s;
|
||||
color: $theme-header-item-color;
|
||||
background: $theme-header-item-background-color;
|
||||
i.fa { color: inherit; }
|
||||
.el-submenu__icon-arrow {
|
||||
color: $theme-header-item-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $theme-header-item-color-hover;
|
||||
background: $theme-header-item-background-color-hover;
|
||||
i.fa { color: inherit; }
|
||||
.el-submenu__icon-arrow {
|
||||
color: $theme-header-item-color-hover;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: $theme-header-item-color-focus;
|
||||
background: $theme-header-item-background-color-focus;
|
||||
i.fa { color: inherit; }
|
||||
.el-submenu__icon-arrow {
|
||||
color: $theme-header-item-color-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 顶栏右侧
|
||||
.d2-header-right {
|
||||
.btn-text {
|
||||
color: $theme-header-item-color;
|
||||
&.can-hover {
|
||||
&:hover {
|
||||
color: $theme-header-item-color-hover;
|
||||
background: $theme-header-item-background-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// [布局] 顶栏下面
|
||||
.d2-theme-container {
|
||||
// 侧边栏
|
||||
.d2-theme-container-aside {
|
||||
// 菜单为空的时候显示的信息
|
||||
.d2-layout-header-aside-menu-empty {
|
||||
background: $theme-aside-menu-empty-background-color;
|
||||
i {
|
||||
color: $theme-aside-menu-empty-icon-color;
|
||||
}
|
||||
span {
|
||||
color: $theme-aside-menu-empty-text-color;
|
||||
}
|
||||
&:hover {
|
||||
background: $theme-aside-menu-empty-background-color-hover;
|
||||
i {
|
||||
color: $theme-aside-menu-empty-icon-color-hover;
|
||||
}
|
||||
span {
|
||||
color: $theme-aside-menu-empty-text-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
// [菜单] 正常状态
|
||||
.el-menu {
|
||||
.el-menu-item {
|
||||
color: $theme-aside-item-color;
|
||||
background: $theme-aside-item-background-color;
|
||||
i {
|
||||
color: $theme-aside-item-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $theme-aside-item-color-hover;
|
||||
fill: $theme-aside-item-color-hover;
|
||||
background: $theme-aside-item-background-color-hover;
|
||||
i {
|
||||
color: $theme-aside-item-color-hover;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: $theme-aside-item-color-focus;
|
||||
fill: $theme-aside-item-color-focus;
|
||||
background: $theme-aside-item-background-color-focus;
|
||||
i {
|
||||
color: $theme-aside-item-color-focus;
|
||||
}
|
||||
}
|
||||
&.is-active {
|
||||
color: $theme-aside-item-color-active;
|
||||
fill: $theme-aside-item-color-active;
|
||||
background: $theme-aside-item-background-color-active;
|
||||
i {
|
||||
color: $theme-aside-item-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-submenu {
|
||||
.el-submenu__title {
|
||||
color: $theme-aside-item-color;
|
||||
background: $theme-aside-item-background-color;
|
||||
i {
|
||||
color: $theme-aside-item-color;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
color: $theme-aside-item-color;
|
||||
}
|
||||
&:hover {
|
||||
color: $theme-aside-item-color-hover;
|
||||
background: $theme-aside-item-background-color-hover;
|
||||
i {
|
||||
color: $theme-aside-item-color-hover;
|
||||
}
|
||||
.el-submenu__icon-arrow {
|
||||
color: $theme-aside-item-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-theme-container-main {
|
||||
// 主体部分分为多页面控制器 和主体
|
||||
.d2-theme-container-main-header {
|
||||
// 多页面控制器
|
||||
.d2-multiple-page-control {
|
||||
.el-tabs__header.is-top {
|
||||
border-bottom-color: $theme-multiple-page-control-border-color;
|
||||
}
|
||||
.el-tabs__nav {
|
||||
border-color: $theme-multiple-page-control-border-color;
|
||||
.el-tabs__item {
|
||||
@extend %unable-select;
|
||||
color: $theme-multiple-page-control-color;
|
||||
background-color: $theme-multiple-page-control-background-color;
|
||||
border-left-color: $theme-multiple-page-control-border-color;
|
||||
&:first-child {
|
||||
border-left: none;
|
||||
&:hover {
|
||||
padding: 0px 20px;
|
||||
}
|
||||
.el-icon-close {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-tabs__item.is-active {
|
||||
color: $theme-multiple-page-control-color-active;
|
||||
background-color: $theme-multiple-page-control-background-color-active;
|
||||
border-bottom-color: $theme-multiple-page-control-border-color-active;
|
||||
}
|
||||
}
|
||||
%el-tabs__nav {
|
||||
font-size: 20px;
|
||||
}
|
||||
.el-tabs__nav-prev {
|
||||
@extend %el-tabs__nav;
|
||||
color: $theme-multiple-page-control-nav-prev-color;
|
||||
}
|
||||
.el-tabs__nav-next {
|
||||
@extend %el-tabs__nav;
|
||||
color: $theme-multiple-page-control-nav-next-color;
|
||||
}
|
||||
}
|
||||
// 多页控制器的关闭控制
|
||||
.d2-multiple-page-control-btn {
|
||||
.el-dropdown {
|
||||
.el-button-group {
|
||||
.el-button {
|
||||
border-color: $theme-multiple-page-control-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 主体
|
||||
.d2-theme-container-main-body {
|
||||
// 布局组件
|
||||
.container-component {
|
||||
// [组件]
|
||||
// d2-container-full 填充型
|
||||
.d2-container-full {
|
||||
border: $theme-container-border-outer;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
.d2-container-full__header {
|
||||
border-bottom: $theme-container-border-inner;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-full__body {
|
||||
background: $theme-container-background-color;
|
||||
}
|
||||
.d2-container-full__footer {
|
||||
border-top: $theme-container-border-inner;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
// [组件]
|
||||
// d2-container-full-bs 填充型 滚动优化
|
||||
.d2-container-full-bs {
|
||||
border: $theme-container-border-outer;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
.d2-container-full-bs__header {
|
||||
border-bottom: $theme-container-border-inner;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-full-bs__body {
|
||||
background: $theme-container-background-color;
|
||||
}
|
||||
.d2-container-full-bs__footer {
|
||||
border-top: $theme-container-border-inner;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
// [组件]
|
||||
// d2-container-ghost 隐形布局组件
|
||||
.d2-container-ghost {
|
||||
.d2-container-ghost__header {
|
||||
border-bottom: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-ghost__footer {
|
||||
border-top: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
// [组件]
|
||||
// d2-container-ghost-bs 隐形布局组件 滚动优化
|
||||
.d2-container-ghost-bs {
|
||||
.d2-container-ghost-bs__header {
|
||||
border-bottom: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-ghost-bs__footer {
|
||||
border-top: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
// [组件]
|
||||
// d2-container-card 卡片型
|
||||
.d2-container-card {
|
||||
.d2-container-card__header {
|
||||
border-bottom: $theme-container-border-inner;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-card__body {
|
||||
.d2-container-card__body-card {
|
||||
background: $theme-container-background-color;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
border-bottom: $theme-container-border-outer;
|
||||
}
|
||||
}
|
||||
.d2-container-card__footer {
|
||||
border-top: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
// [组件]
|
||||
// d2-container-card-bs 卡片型 滚动优化
|
||||
.d2-container-card-bs {
|
||||
.d2-container-card-bs__header {
|
||||
border-bottom: $theme-container-border-inner;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
.d2-container-card-bs__body {
|
||||
.d2-container-card-bs__body-card {
|
||||
background: $theme-container-background-color;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
border-bottom: $theme-container-border-outer;
|
||||
}
|
||||
}
|
||||
.d2-container-card-bs__footer {
|
||||
border-top: $theme-container-border-outer;
|
||||
border-left: $theme-container-border-outer;
|
||||
border-right: $theme-container-border-outer;
|
||||
background: $theme-container-header-footer-background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
9202418760b87afc757e37f9cfad91a6a51a303e
|
||||
365
src/components/d2-highlight/libs/htmlFormat.js
Normal file
365
src/components/d2-highlight/libs/htmlFormat.js
Normal file
@@ -0,0 +1,365 @@
|
||||
/* eslint-disable */
|
||||
|
||||
// 功能
|
||||
// 将HTML字符串格式化
|
||||
|
||||
const format = (function() {
|
||||
function style_html(html_source, indent_size, indent_character, max_char) {
|
||||
var Parser, multi_parser;
|
||||
function Parser() {
|
||||
this.pos = 0;
|
||||
this.token = '';
|
||||
this.current_mode = 'CONTENT';
|
||||
this.tags = {
|
||||
parent: 'parent1',
|
||||
parentcount: 1,
|
||||
parent1: ''
|
||||
};
|
||||
this.tag_type = '';
|
||||
this.token_text = this.last_token = this.last_text = this.token_type = '';
|
||||
this.Utils = {
|
||||
whitespace: "\n\r\t ".split(''),
|
||||
single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
|
||||
extra_liners: 'head,body,/html'.split(','),
|
||||
in_array: function(what, arr) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (what === arr[i]) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
this.get_content = function() {
|
||||
var char = '';
|
||||
var content = [];
|
||||
var space = false;
|
||||
while (this.input.charAt(this.pos) !== '<') {
|
||||
if (this.pos >= this.input.length) {
|
||||
return content.length ? content.join('') : ['', 'TK_EOF'];
|
||||
}
|
||||
char = this.input.charAt(this.pos);
|
||||
this.pos++;
|
||||
this.line_char_count++;
|
||||
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
||||
if (content.length) {
|
||||
space = true;
|
||||
}
|
||||
this.line_char_count--;
|
||||
continue;
|
||||
} else if (space) {
|
||||
if (this.line_char_count >= this.max_char) {
|
||||
content.push('\n');
|
||||
for (var i = 0; i < this.indent_level; i++) {
|
||||
content.push(this.indent_string);
|
||||
}
|
||||
this.line_char_count = 0;
|
||||
} else {
|
||||
content.push(' ');
|
||||
this.line_char_count++;
|
||||
}
|
||||
space = false;
|
||||
}
|
||||
content.push(char);
|
||||
}
|
||||
return content.length ? content.join('') : '';
|
||||
}
|
||||
this.get_script = function() {
|
||||
var char = '';
|
||||
var content = [];
|
||||
var reg_match = new RegExp('\<\/script' + '\>', 'igm');
|
||||
reg_match.lastIndex = this.pos;
|
||||
var reg_array = reg_match.exec(this.input);
|
||||
var end_script = reg_array ? reg_array.index: this.input.length;
|
||||
while (this.pos < end_script) {
|
||||
if (this.pos >= this.input.length) {
|
||||
return content.length ? content.join('') : ['', 'TK_EOF'];
|
||||
}
|
||||
char = this.input.charAt(this.pos);
|
||||
this.pos++;
|
||||
content.push(char);
|
||||
}
|
||||
return content.length ? content.join('') : '';
|
||||
}
|
||||
this.record_tag = function(tag) {
|
||||
if (this.tags[tag + 'count']) {
|
||||
this.tags[tag + 'count']++;
|
||||
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
|
||||
} else {
|
||||
this.tags[tag + 'count'] = 1;
|
||||
this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
|
||||
}
|
||||
this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent;
|
||||
this.tags.parent = tag + this.tags[tag + 'count'];
|
||||
}
|
||||
this.retrieve_tag = function(tag) {
|
||||
if (this.tags[tag + 'count']) {
|
||||
var temp_parent = this.tags.parent;
|
||||
while (temp_parent) {
|
||||
if (tag + this.tags[tag + 'count'] === temp_parent) {
|
||||
break;
|
||||
}
|
||||
temp_parent = this.tags[temp_parent + 'parent'];
|
||||
}
|
||||
if (temp_parent) {
|
||||
this.indent_level = this.tags[tag + this.tags[tag + 'count']];
|
||||
this.tags.parent = this.tags[temp_parent + 'parent'];
|
||||
}
|
||||
delete this.tags[tag + this.tags[tag + 'count'] + 'parent'];
|
||||
delete this.tags[tag + this.tags[tag + 'count']];
|
||||
if (this.tags[tag + 'count'] == 1) {
|
||||
delete this.tags[tag + 'count'];
|
||||
} else {
|
||||
this.tags[tag + 'count']--;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.get_tag = function() {
|
||||
var char = '';
|
||||
var content = [];
|
||||
var space = false;
|
||||
do {
|
||||
if (this.pos >= this.input.length) {
|
||||
return content.length ? content.join('') : ['', 'TK_EOF'];
|
||||
}
|
||||
char = this.input.charAt(this.pos);
|
||||
this.pos++;
|
||||
this.line_char_count++;
|
||||
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
||||
space = true;
|
||||
this.line_char_count--;
|
||||
continue;
|
||||
}
|
||||
if (char === "'" || char === '"') {
|
||||
if (!content[1] || content[1] !== '!') {
|
||||
char += this.get_unformatted(char);
|
||||
space = true;
|
||||
}
|
||||
}
|
||||
if (char === '=') {
|
||||
space = false;
|
||||
}
|
||||
if (content.length && content[content.length - 1] !== '=' && char !== '>' && space) {
|
||||
if (this.line_char_count >= this.max_char) {
|
||||
this.print_newline(false, content);
|
||||
this.line_char_count = 0;
|
||||
} else {
|
||||
content.push(' ');
|
||||
this.line_char_count++;
|
||||
}
|
||||
space = false;
|
||||
}
|
||||
content.push(char);
|
||||
} while ( char !== '>');
|
||||
var tag_complete = content.join('');
|
||||
var tag_index;
|
||||
if (tag_complete.indexOf(' ') != -1) {
|
||||
tag_index = tag_complete.indexOf(' ');
|
||||
} else {
|
||||
tag_index = tag_complete.indexOf('>');
|
||||
}
|
||||
var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
|
||||
if (tag_complete.charAt(tag_complete.length - 2) === '/' || this.Utils.in_array(tag_check, this.Utils.single_token)) {
|
||||
this.tag_type = 'SINGLE';
|
||||
} else if (tag_check === 'script') {
|
||||
this.record_tag(tag_check);
|
||||
this.tag_type = 'SCRIPT';
|
||||
} else if (tag_check === 'style') {
|
||||
this.record_tag(tag_check);
|
||||
this.tag_type = 'STYLE';
|
||||
} else if (tag_check.charAt(0) === '!') {
|
||||
if (tag_check.indexOf('[if') != -1) {
|
||||
if (tag_complete.indexOf('!IE') != -1) {
|
||||
var comment = this.get_unformatted('-->', tag_complete);
|
||||
content.push(comment);
|
||||
}
|
||||
this.tag_type = 'START';
|
||||
} else if (tag_check.indexOf('[endif') != -1) {
|
||||
this.tag_type = 'END';
|
||||
this.unindent();
|
||||
} else if (tag_check.indexOf('[cdata[') != -1) {
|
||||
var comment = this.get_unformatted(']]>', tag_complete);
|
||||
content.push(comment);
|
||||
this.tag_type = 'SINGLE';
|
||||
} else {
|
||||
var comment = this.get_unformatted('-->', tag_complete);
|
||||
content.push(comment);
|
||||
this.tag_type = 'SINGLE';
|
||||
}
|
||||
} else {
|
||||
if (tag_check.charAt(0) === '/') {
|
||||
this.retrieve_tag(tag_check.substring(1));
|
||||
this.tag_type = 'END';
|
||||
} else {
|
||||
this.record_tag(tag_check);
|
||||
this.tag_type = 'START';
|
||||
}
|
||||
if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) {
|
||||
this.print_newline(true, this.output);
|
||||
}
|
||||
}
|
||||
return content.join('');
|
||||
}
|
||||
this.get_unformatted = function(delimiter, orig_tag) {
|
||||
if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
|
||||
return '';
|
||||
}
|
||||
var char = '';
|
||||
var content = '';
|
||||
var space = true;
|
||||
do {
|
||||
char = this.input.charAt(this.pos);
|
||||
this.pos++
|
||||
if (this.Utils.in_array(char, this.Utils.whitespace)) {
|
||||
if (!space) {
|
||||
this.line_char_count--;
|
||||
continue;
|
||||
}
|
||||
if (char === '\n' || char === '\r') {
|
||||
content += '\n';
|
||||
for (var i = 0; i < this.indent_level; i++) {
|
||||
content += this.indent_string;
|
||||
}
|
||||
space = false;
|
||||
this.line_char_count = 0;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
content += char;
|
||||
this.line_char_count++;
|
||||
space = true;
|
||||
|
||||
} while ( content . indexOf ( delimiter ) == -1);
|
||||
return content;
|
||||
}
|
||||
this.get_token = function() {
|
||||
var token;
|
||||
if (this.last_token === 'TK_TAG_SCRIPT') {
|
||||
var temp_token = this.get_script();
|
||||
if (typeof temp_token !== 'string') {
|
||||
return temp_token;
|
||||
}
|
||||
//token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level);
|
||||
//return [token, 'TK_CONTENT'];
|
||||
return [temp_token, 'TK_CONTENT'];
|
||||
}
|
||||
if (this.current_mode === 'CONTENT') {
|
||||
token = this.get_content();
|
||||
if (typeof token !== 'string') {
|
||||
return token;
|
||||
} else {
|
||||
return [token, 'TK_CONTENT'];
|
||||
}
|
||||
}
|
||||
if (this.current_mode === 'TAG') {
|
||||
token = this.get_tag();
|
||||
if (typeof token !== 'string') {
|
||||
return token;
|
||||
} else {
|
||||
var tag_name_type = 'TK_TAG_' + this.tag_type;
|
||||
return [token, tag_name_type];
|
||||
}
|
||||
}
|
||||
}
|
||||
this.printer = function(js_source, indent_character, indent_size, max_char) {
|
||||
this.input = js_source || '';
|
||||
this.output = [];
|
||||
this.indent_character = indent_character || ' ';
|
||||
this.indent_string = '';
|
||||
this.indent_size = indent_size || 2;
|
||||
this.indent_level = 0;
|
||||
this.max_char = max_char || 70;
|
||||
this.line_char_count = 0;
|
||||
for (var i = 0; i < this.indent_size; i++) {
|
||||
this.indent_string += this.indent_character;
|
||||
}
|
||||
this.print_newline = function(ignore, arr) {
|
||||
this.line_char_count = 0;
|
||||
if (!arr || !arr.length) {
|
||||
return;
|
||||
}
|
||||
if (!ignore) {
|
||||
while (this.Utils.in_array(arr[arr.length - 1], this.Utils.whitespace)) {
|
||||
arr.pop();
|
||||
}
|
||||
}
|
||||
arr.push('\n');
|
||||
for (var i = 0; i < this.indent_level; i++) {
|
||||
arr.push(this.indent_string);
|
||||
}
|
||||
}
|
||||
this.print_token = function(text) {
|
||||
this.output.push(text);
|
||||
}
|
||||
this.indent = function() {
|
||||
this.indent_level++;
|
||||
}
|
||||
this.unindent = function() {
|
||||
if (this.indent_level > 0) {
|
||||
this.indent_level--;
|
||||
}
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
multi_parser = new Parser();
|
||||
multi_parser.printer(html_source, indent_character, indent_size);
|
||||
while (true) {
|
||||
var t = multi_parser.get_token();
|
||||
multi_parser.token_text = t[0];
|
||||
multi_parser.token_type = t[1];
|
||||
if (multi_parser.token_type === 'TK_EOF') {
|
||||
break;
|
||||
}
|
||||
switch (multi_parser.token_type) {
|
||||
case 'TK_TAG_START':
|
||||
case 'TK_TAG_SCRIPT':
|
||||
case 'TK_TAG_STYLE':
|
||||
multi_parser.print_newline(false, multi_parser.output);
|
||||
multi_parser.print_token(multi_parser.token_text);
|
||||
multi_parser.indent();
|
||||
multi_parser.current_mode = 'CONTENT';
|
||||
break;
|
||||
case 'TK_TAG_END':
|
||||
multi_parser.print_newline(true, multi_parser.output);
|
||||
multi_parser.print_token(multi_parser.token_text);
|
||||
multi_parser.current_mode = 'CONTENT';
|
||||
break;
|
||||
case 'TK_TAG_SINGLE':
|
||||
multi_parser.print_newline(false, multi_parser.output);
|
||||
multi_parser.print_token(multi_parser.token_text);
|
||||
multi_parser.current_mode = 'CONTENT';
|
||||
break;
|
||||
case 'TK_CONTENT':
|
||||
if (multi_parser.token_text !== '') {
|
||||
multi_parser.print_newline(false, multi_parser.output);
|
||||
multi_parser.print_token(multi_parser.token_text);
|
||||
}
|
||||
multi_parser.current_mode = 'TAG';
|
||||
break;
|
||||
}
|
||||
multi_parser.last_token = multi_parser.token_type;
|
||||
multi_parser.last_text = multi_parser.token_text;
|
||||
}
|
||||
return multi_parser.output.join('');
|
||||
}
|
||||
return function(data) {
|
||||
var dataHolder = ['__dataHolder_', [Math.random(), Math.random(), Math.random(), Math.random()].join('_').replace(/[^0-9]/g, '_'), '_'].join('_');
|
||||
var dataHolders = {};
|
||||
var index = 0;
|
||||
data = data.replace(/(\")(data:[^\"]*)(\")/g,
|
||||
function($0, $1, $2, $3) {
|
||||
var name = dataHolder + index++;
|
||||
dataHolders[name] = $2;
|
||||
return $1 + name + $3;
|
||||
})
|
||||
data = style_html(data, 2, ' ', 0x10000000);
|
||||
data = data.replace(new RegExp(dataHolder + '[0-9]+', 'g'),
|
||||
function($0) {
|
||||
return dataHolders[$0];
|
||||
});
|
||||
return data;
|
||||
}
|
||||
})();
|
||||
|
||||
export default format
|
||||
@@ -1 +0,0 @@
|
||||
637e1ab54544a3296a996a352314ab659e5b43a2
|
||||
1004
src/components/d2-icon-select/data/index.js
Normal file
1004
src/components/d2-icon-select/data/index.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
3283c245146c8130af1352a64561e780a3f585c5
|
||||
4
src/components/d2-icon/font-awesome-4.7.0/css/font-awesome.min.css
vendored
Normal file
4
src/components/d2-icon/font-awesome-4.7.0/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
4fe37fedf35f9df6259a1bf841d11aa11e9a00e2
|
||||
BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/FontAwesome.otf
Normal file
BIN
src/components/d2-icon/font-awesome-4.7.0/fonts/FontAwesome.otf
Normal file
Binary file not shown.
@@ -1 +0,0 @@
|
||||
401ec0f36e4f73b8efa40bd6f604fe80d286db70
|
||||
Binary file not shown.
@@ -1 +0,0 @@
|
||||
e9f60ca953f93e35eab4108bd414bc02ddcf3928
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
@@ -1 +0,0 @@
|
||||
855c845e538b65548118279537a04eab2ec6ef0d
|
||||
Binary file not shown.
@@ -1 +0,0 @@
|
||||
35acda2fa1196aad98c2adf4378a7611dd713aa3
|
||||
Binary file not shown.
@@ -1 +0,0 @@
|
||||
400014a4b06eee3d0c0d54402a47ab2601b2862b
|
||||
Binary file not shown.
@@ -1 +0,0 @@
|
||||
4d13fc60404b91e398a37200c4a77b645cfd9586
|
||||
12
src/main.js
12
src/main.js
@@ -7,13 +7,6 @@ import d2Admin from '@/plugin/d2admin'
|
||||
// store
|
||||
import store from '@/store/index'
|
||||
|
||||
// [ 可选组件 ] JSON 树状视图
|
||||
import vueJsonTreeView from 'vue-json-tree-view'
|
||||
// [ 可选组件 ] 区域划分
|
||||
import SplitPane from 'vue-splitpane'
|
||||
// [ 可选组件 ] UEditor
|
||||
import VueUeditorWrap from 'vue-ueditor-wrap'
|
||||
|
||||
// 菜单和路由设置
|
||||
import router from './router'
|
||||
import { menuHeader, menuAside } from '@/menu'
|
||||
@@ -22,11 +15,6 @@ import { frameInRoutes } from '@/router/routes'
|
||||
// 核心插件
|
||||
Vue.use(d2Admin)
|
||||
|
||||
// 可选插件组件
|
||||
Vue.use(vueJsonTreeView)
|
||||
Vue.component('SplitPane', SplitPane)
|
||||
Vue.component('VueUeditorWrap', VueUeditorWrap)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
|
||||
419
src/store/modules/d2admin/modules/page.js
Normal file
419
src/store/modules/d2admin/modules/page.js
Normal file
@@ -0,0 +1,419 @@
|
||||
import { get } from 'lodash'
|
||||
import router from '@/router'
|
||||
import setting from '@/setting.js'
|
||||
|
||||
// 判定是否需要缓存
|
||||
const isKeepAlive = data => get(data, 'meta.cache', false)
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
// 可以在多页 tab 模式下显示的页面
|
||||
pool: [],
|
||||
// 当前显示的多页面列表
|
||||
opened: setting.page.opened,
|
||||
// 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||
openedLoaded: false,
|
||||
// 当前页面
|
||||
current: '',
|
||||
// 需要缓存的页面 name
|
||||
keepAlive: []
|
||||
},
|
||||
actions: {
|
||||
/**
|
||||
* @description 确认已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||
* @param {Object} context
|
||||
*/
|
||||
isLoaded ({ state }) {
|
||||
if (state.openedLoaded) return Promise.resolve()
|
||||
return new Promise(resolve => {
|
||||
const timer = setInterval(() => {
|
||||
if (state.openedLoaded) {
|
||||
resolve(clearInterval(timer))
|
||||
}
|
||||
}, 10)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 从持久化数据载入标签页列表
|
||||
* @param {Object} context
|
||||
*/
|
||||
openedLoad ({ state, commit, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// store 赋值
|
||||
const value = await dispatch('d2admin/db/get', {
|
||||
dbName: 'sys',
|
||||
path: 'page.opened',
|
||||
defaultValue: setting.page.opened,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
|
||||
// 以 fullPath 字段为准
|
||||
// 如果页面过多的话可能需要优化算法
|
||||
// valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
|
||||
const valid = []
|
||||
// 处理数据
|
||||
state.opened = value.map(opened => {
|
||||
// 忽略首页
|
||||
if (opened.fullPath === '/index') {
|
||||
valid.push(1)
|
||||
return opened
|
||||
}
|
||||
// 尝试在所有的支持多标签页的页面里找到 name 匹配的页面
|
||||
const find = state.pool.find(item => item.name === opened.name)
|
||||
// 记录有效或无效信息
|
||||
valid.push(find ? 1 : 0)
|
||||
// 返回合并后的数据 新的覆盖旧的
|
||||
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
|
||||
return Object.assign({}, opened, find)
|
||||
}).filter((opened, index) => valid[index] === 1)
|
||||
// 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||
state.openedLoaded = true
|
||||
// 根据 opened 数据生成缓存设置
|
||||
commit('keepAliveRefresh')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
|
||||
* @param {Object} context
|
||||
*/
|
||||
opened2db ({ state, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// 设置数据
|
||||
dispatch('d2admin/db/set', {
|
||||
dbName: 'sys',
|
||||
path: 'page.opened',
|
||||
value: state.opened,
|
||||
user: true
|
||||
}, { root: true })
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 更新页面列表上的某一项
|
||||
* @param {Object} context
|
||||
* @param {Object} payload { index, params, query, fullPath } 路由信息
|
||||
*/
|
||||
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 更新页面列表某一项
|
||||
let page = state.opened[index]
|
||||
page.params = params || page.params
|
||||
page.query = query || page.query
|
||||
page.fullPath = fullPath || page.fullPath
|
||||
state.opened.splice(index, 1, page)
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 新增一个 tag (打开一个页面)
|
||||
* @param {Object} context
|
||||
* @param {Object} payload new tag info
|
||||
*/
|
||||
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
|
||||
let newTag = tag
|
||||
newTag.params = params || newTag.params
|
||||
newTag.query = query || newTag.query
|
||||
newTag.fullPath = fullPath || newTag.fullPath
|
||||
// 添加进当前显示的页面数组
|
||||
state.opened.push(newTag)
|
||||
// 如果这个页面需要缓存 将其添加到缓存设置
|
||||
if (isKeepAlive(newTag)) {
|
||||
commit('keepAlivePush', tag.name)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class current
|
||||
* @description 打开一个新的页面
|
||||
* @param {Object} context
|
||||
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
|
||||
*/
|
||||
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
|
||||
return new Promise(async resolve => {
|
||||
// 已经打开的页面
|
||||
let opened = state.opened
|
||||
// 判断此页面是否已经打开 并且记录位置
|
||||
let pageOpendIndex = 0
|
||||
const pageOpend = opened.find((page, index) => {
|
||||
const same = page.fullPath === fullPath
|
||||
pageOpendIndex = same ? index : pageOpendIndex
|
||||
return same
|
||||
})
|
||||
if (pageOpend) {
|
||||
// 页面以前打开过
|
||||
await dispatch('openedUpdate', {
|
||||
index: pageOpendIndex,
|
||||
params,
|
||||
query,
|
||||
fullPath
|
||||
})
|
||||
} else {
|
||||
// 页面以前没有打开过
|
||||
let page = state.pool.find(t => t.name === name)
|
||||
// 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
|
||||
if (page) {
|
||||
await dispatch('add', {
|
||||
tag: Object.assign({}, page),
|
||||
params,
|
||||
query,
|
||||
fullPath
|
||||
})
|
||||
}
|
||||
}
|
||||
commit('currentSet', fullPath)
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭一个 tag (关闭一个页面)
|
||||
* @param {Object} context
|
||||
* @param {Object} payload { tagName: 要关闭的标签名字 }
|
||||
*/
|
||||
close ({ state, commit, dispatch }, { tagName }) {
|
||||
return new Promise(async resolve => {
|
||||
// 下个新的页面
|
||||
let newPage = state.opened[0]
|
||||
const isCurrent = state.current === tagName
|
||||
// 如果关闭的页面就是当前显示的页面
|
||||
if (isCurrent) {
|
||||
// 去找一个新的页面
|
||||
let len = state.opened.length
|
||||
for (let i = 1; i < len; i++) {
|
||||
if (state.opened[i].fullPath === tagName) {
|
||||
if (i < len - 1) {
|
||||
newPage = state.opened[i + 1]
|
||||
} else {
|
||||
newPage = state.opened[i - 1]
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// 找到这个页面在已经打开的数据里是第几个
|
||||
const index = state.opened.findIndex(page => page.fullPath === tagName)
|
||||
if (index >= 0) {
|
||||
// 如果这个页面是缓存的页面 将其在缓存设置中删除
|
||||
commit('keepAliveRemove', state.opened[index].name)
|
||||
// 更新数据 删除关闭的页面
|
||||
state.opened.splice(index, 1)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// 最后需要判断是否需要跳到首页
|
||||
if (isCurrent) {
|
||||
const { name = '', params = {}, query = {} } = newPage
|
||||
let routerObj = {
|
||||
name,
|
||||
params,
|
||||
query
|
||||
}
|
||||
router.push(routerObj)
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前标签左边的标签
|
||||
* @param {Object} context
|
||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
if (currentIndex > 0) {
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
}
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前标签右边的标签
|
||||
* @param {Object} context
|
||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
// 设置当前的页面
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭当前激活之外的 tag
|
||||
* @param {Object} context
|
||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||
*/
|
||||
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||
return new Promise(async resolve => {
|
||||
const pageAim = pageSelect || state.current
|
||||
let currentIndex = 0
|
||||
state.opened.forEach((page, index) => {
|
||||
if (page.fullPath === pageAim) {
|
||||
currentIndex = index
|
||||
}
|
||||
})
|
||||
// 删除打开的页面数据 并更新缓存设置
|
||||
if (currentIndex === 0) {
|
||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
} else {
|
||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
}
|
||||
// 设置新的页面
|
||||
state.current = pageAim
|
||||
if (router.app.$route.fullPath !== pageAim) {
|
||||
router.push(pageAim)
|
||||
}
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @class opened
|
||||
* @description 关闭所有 tag
|
||||
* @param {Object} context
|
||||
*/
|
||||
closeAll ({ state, commit, dispatch }) {
|
||||
return new Promise(async resolve => {
|
||||
// 删除打开的页面 并在缓存设置中删除
|
||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||
// 持久化
|
||||
await dispatch('opened2db')
|
||||
// 关闭所有的标签页后需要判断一次现在是不是在首页
|
||||
if (router.app.$route.name !== 'index') {
|
||||
router.push({
|
||||
name: 'index'
|
||||
})
|
||||
}
|
||||
// end
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
/**
|
||||
* @class keepAlive
|
||||
* @description 从已经打开的页面记录中更新需要缓存的页面记录
|
||||
* @param {Object} state state
|
||||
*/
|
||||
keepAliveRefresh (state) {
|
||||
state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name)
|
||||
},
|
||||
/**
|
||||
* @description 删除一个页面的缓存设置
|
||||
* @param {Object} state state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAliveRemove (state, name) {
|
||||
const list = [ ...state.keepAlive ]
|
||||
const index = list.findIndex(item => item === name)
|
||||
|
||||
if (index !== -1) {
|
||||
list.splice(index, 1)
|
||||
state.keepAlive = list
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 增加一个页面的缓存设置
|
||||
* @param {Object} state state
|
||||
* @param {String} name name
|
||||
*/
|
||||
keepAlivePush (state, name) {
|
||||
const keep = [ ...state.keepAlive ]
|
||||
keep.push(name)
|
||||
state.keepAlive = keep
|
||||
},
|
||||
/**
|
||||
* @description 清空页面缓存设置
|
||||
* @param {Object} state state
|
||||
*/
|
||||
keepAliveClean (state) {
|
||||
state.keepAlive = []
|
||||
},
|
||||
/**
|
||||
* @class current
|
||||
* @description 设置当前激活的页面 fullPath
|
||||
* @param {Object} state state
|
||||
* @param {String} fullPath new fullPath
|
||||
*/
|
||||
currentSet (state, fullPath) {
|
||||
state.current = fullPath
|
||||
},
|
||||
/**
|
||||
* @class pool
|
||||
* @description 保存 pool (候选池)
|
||||
* @param {Object} state state
|
||||
* @param {Array} routes routes
|
||||
*/
|
||||
init (state, routes) {
|
||||
const pool = []
|
||||
const push = function (routes) {
|
||||
routes.forEach(route => {
|
||||
if (route.children && route.children.length > 0) {
|
||||
push(route.children)
|
||||
} else {
|
||||
if (!route.hidden) {
|
||||
const { meta, name, path } = route
|
||||
pool.push({ meta, name, path })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
push(routes)
|
||||
state.pool = pool
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
2773390b9589c2fc28361ed183c88a17cdd87e1b
|
||||
1
src/views/demo/charts/list/_data/beijing.json
Normal file
1
src/views/demo/charts/list/_data/beijing.json
Normal file
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
8a2b03e0745b33a15d68fd8c98c73b68ba057482
|
||||
1
src/views/demo/charts/list/_data/china.json
Normal file
1
src/views/demo/charts/list/_data/china.json
Normal file
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
28bbf7a8cf2cd33dc30fba1bd876a43acd4743f5
|
||||
@@ -23,6 +23,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import VueUeditorWrap from 'vue-ueditor-wrap'
|
||||
Vue.component('VueUeditorWrap', VueUeditorWrap)
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
||||
1004
src/views/demo/components/icon/data/index.js
Normal file
1004
src/views/demo/components/icon/data/index.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1 +0,0 @@
|
||||
3283c245146c8130af1352a64561e780a3f585c5
|
||||
@@ -5,6 +5,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import vueJsonTreeView from 'vue-json-tree-view'
|
||||
Vue.use(vueJsonTreeView)
|
||||
import packJson from '../../../../../package.json'
|
||||
export default {
|
||||
data () {
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import SplitPane from 'vue-splitpane'
|
||||
Vue.component('SplitPane', SplitPane)
|
||||
export default {
|
||||
mounted () {
|
||||
// 加载完成后显示提示
|
||||
|
||||
322
src/views/demo/element/form-input/index.vue
Normal file
322
src/views/demo/element/form-input/index.vue
Normal file
@@ -0,0 +1,322 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
|
||||
<h1 class="d2-mt-0">基础用法</h1>
|
||||
<el-input v-model="input" placeholder="请输入内容" class="input-demo-200"></el-input>
|
||||
|
||||
<h1>禁用状态</h1>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input1"
|
||||
:disabled="true"
|
||||
class="input-demo-200">
|
||||
</el-input>
|
||||
<h1>可清空</h1>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input10"
|
||||
clearable
|
||||
class="input-demo-200">
|
||||
</el-input>
|
||||
|
||||
<h1>带 icon 的输入框</h1>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">属性方式</p>
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input2"
|
||||
class="input-demo-200 d2-mr-10">
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
prefix-icon="el-icon-search"
|
||||
v-model="input21"
|
||||
class="input-demo-200 d2-mt-10">
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">slot 方式</p>
|
||||
<el-input
|
||||
placeholder="请选择日期"
|
||||
v-model="input22"
|
||||
class="input-demo-200 d2-mr-10">
|
||||
<i slot="suffix" class="el-input__icon el-icon-date"></i>
|
||||
</el-input>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="input23"
|
||||
class="input-demo-200 d2-mt-10">
|
||||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||
</el-input>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>文本域</h1>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea"
|
||||
class="input-demo-400">
|
||||
</el-input>
|
||||
|
||||
<h1>可自适应文本高度的文本域</h1>
|
||||
<div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
autosize
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea2"
|
||||
class="input-demo-400">
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4}"
|
||||
placeholder="请输入内容"
|
||||
v-model="textarea3"
|
||||
class="d2-mt-10 input-demo-400">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<h1>复合型输入框</h1>
|
||||
<div>
|
||||
<el-input placeholder="请输入内容" v-model="input3" class="input-demo-400">
|
||||
<template slot="prepend">Http://</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input4" class="input-demo-400">
|
||||
<template slot="append">.com</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<el-input placeholder="请输入内容" v-model="input5" class="input-demo-400">
|
||||
<el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 120px;">
|
||||
<el-option label="餐厅名" value="1"></el-option>
|
||||
<el-option label="订单号" value="2"></el-option>
|
||||
<el-option label="用户电话" value="3"></el-option>
|
||||
</el-select>
|
||||
<el-button slot="append" icon="el-icon-search"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<h1>尺寸</h1>
|
||||
<div>
|
||||
<el-input
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input6"
|
||||
class="input-demo-200 d2-mr-10">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="medium"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input7"
|
||||
class="input-demo-200 d2-mr-10">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input8"
|
||||
class="input-demo-200 d2-mr-10">
|
||||
</el-input>
|
||||
<el-input
|
||||
size="mini"
|
||||
placeholder="请输入内容"
|
||||
suffix-icon="el-icon-date"
|
||||
v-model="input9"
|
||||
class="input-demo-200">
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<h1>输入建议</h1>
|
||||
<el-row class="demo-autocomplete">
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">激活即列出输入建议</p>
|
||||
<el-autocomplete
|
||||
class="input-demo-200"
|
||||
v-model="state1"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect">
|
||||
</el-autocomplete>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<p class="d2-mt-0">输入后匹配输入建议</p>
|
||||
<el-autocomplete
|
||||
class="input-demo-200"
|
||||
v-model="state2"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
:trigger-on-focus="false"
|
||||
@select="handleSelect">
|
||||
</el-autocomplete>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<h1>自定义模板</h1>
|
||||
<el-autocomplete
|
||||
v-model="state3"
|
||||
:fetch-suggestions="querySearch"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
class="input-demo-400">
|
||||
<i
|
||||
class="el-icon-edit el-input__icon"
|
||||
slot="suffix"
|
||||
@click="handleIconClick">
|
||||
</i>
|
||||
<template slot-scope="{ item }">
|
||||
<div style="text-overflow: ellipsis; overflow: hidden;">{{ item.value }}</div>
|
||||
<span style="font-size: 12px; color: #b4b4b4;">{{ item.address }}</span>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
|
||||
<h1>远程搜索</h1>
|
||||
<el-autocomplete
|
||||
v-model="state4"
|
||||
:fetch-suggestions="querySearchAsync"
|
||||
placeholder="请输入内容"
|
||||
@select="handleSelect"
|
||||
class="input-demo-200">
|
||||
</el-autocomplete>
|
||||
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
textarea: '',
|
||||
textarea2: '',
|
||||
textarea3: '',
|
||||
input: '',
|
||||
input1: '',
|
||||
input2: '',
|
||||
input3: '',
|
||||
input4: '',
|
||||
input5: '',
|
||||
input6: '',
|
||||
input7: '',
|
||||
input8: '',
|
||||
input9: '',
|
||||
input10: '',
|
||||
input21: '',
|
||||
input22: '',
|
||||
input23: '',
|
||||
select: '',
|
||||
restaurants: [],
|
||||
state1: '',
|
||||
state2: '',
|
||||
state3: '',
|
||||
state4: '',
|
||||
timeout: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
querySearch (queryString, cb) {
|
||||
var restaurants = this.restaurants
|
||||
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
|
||||
// 调用 callback 返回建议列表的数据
|
||||
cb(results)
|
||||
},
|
||||
createFilter (queryString) {
|
||||
return (restaurant) => {
|
||||
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
||||
}
|
||||
},
|
||||
loadAll () {
|
||||
return [
|
||||
{ value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
|
||||
{ value: 'Hot honey 首尔炸鸡（仙霞路）', address: '上海市长宁区淞虹路661号' },
|
||||
{ value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
|
||||
{ value: '泷千家(天山西路店)', address: '天山西路438号' },
|
||||
{ value: '胖仙女纸杯蛋糕（上海凌空店）', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
|
||||
{ value: '贡茶', address: '上海市长宁区金钟路633号' },
|
||||
{ value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
|
||||
{ value: '茶芝兰（奶茶，手抓饼）', address: '上海市普陀区同普路1435号' },
|
||||
{ value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
|
||||
{ value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
|
||||
{ value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
|
||||
{ value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
|
||||
{ value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
|
||||
{ value: '浮生若茶（凌空soho店）', address: '上海长宁区金钟路968号9号楼地下一层' },
|
||||
{ value: 'NONO JUICE 鲜榨果汁', address: '上海市长宁区天山西路119号' },
|
||||
{ value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
|
||||
{ value: '快乐柠檬（神州智慧店）', address: '上海市长宁区天山西路567号1层R117号店铺' },
|
||||
{ value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
|
||||
{ value: '猫山王（西郊百联店）', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
|
||||
{ value: '枪会山', address: '上海市普陀区棕榈路' },
|
||||
{ value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
|
||||
{ value: '钱记', address: '上海市长宁区天山西路' },
|
||||
{ value: '壹杯加', address: '上海市长宁区通协路' },
|
||||
{ value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
|
||||
{ value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
|
||||
{ value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
|
||||
{ value: '鲜果榨汁（金沙江路和美广店）', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
|
||||
{ value: '开心丽果（缤谷店）', address: '上海市长宁区威宁路天山路341号' },
|
||||
{ value: '超级鸡车（丰庄路店）', address: '上海市嘉定区丰庄路240号' },
|
||||
{ value: '妙生活果园（北新泾店）', address: '长宁区新渔路144号' },
|
||||
{ value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
|
||||
{ value: '凡仔汉堡（老真北路店）', address: '上海市普陀区老真北路160号' },
|
||||
{ value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
|
||||
{ value: '蜀香源麻辣香锅（剑河路店）', address: '剑河路443-1' },
|
||||
{ value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
|
||||
{ value: '饭典*新简餐（凌空SOHO店）', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
|
||||
{ value: '焦耳·川式快餐（金钟路店）', address: '上海市金钟路633号地下一层甲部' },
|
||||
{ value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
|
||||
{ value: '浏阳蒸菜', address: '天山西路430号' },
|
||||
{ value: '四海游龙（天山西路店）', address: '上海市长宁区天山西路' },
|
||||
{ value: '樱花食堂（凌空店）', address: '上海市长宁区金钟路968号15楼15-105室' },
|
||||
{ value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
|
||||
{ value: '福荣祥烧腊（平溪路店）', address: '上海市长宁区协和路福泉路255弄57-73号' },
|
||||
{ value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
|
||||
{ value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
|
||||
{ value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
|
||||
{ value: '阳阳麻辣烫', address: '天山西路389号' },
|
||||
{ value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
|
||||
]
|
||||
},
|
||||
querySearchAsync (queryString, cb) {
|
||||
var restaurants = this.restaurants
|
||||
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
|
||||
clearTimeout(this.timeout)
|
||||
this.timeout = setTimeout(() => {
|
||||
cb(results)
|
||||
}, 3000 * Math.random())
|
||||
},
|
||||
createStateFilter (queryString) {
|
||||
return (state) => {
|
||||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
|
||||
}
|
||||
},
|
||||
handleSelect (item) {
|
||||
console.log(item)
|
||||
},
|
||||
handleIconClick (ev) {
|
||||
console.log(ev)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.restaurants = this.loadAll()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
.input-demo-200 {
|
||||
width: 200px;
|
||||
}
|
||||
.input-demo-400 {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
08273e04f8e05e4179e8d487d595fc7af0ad72e3
|
||||
BIN
src/views/demo/playground/log/console/image/demo.png
Normal file
BIN
src/views/demo/playground/log/console/image/demo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
@@ -1 +0,0 @@
|
||||
35a5c716cffd640daf38b058ac428e434cd440bc
|
||||
2162
src/views/system/index/components/d2-help/image/qq.svg
Normal file
2162
src/views/system/index/components/d2-help/image/qq.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 84 KiB |
@@ -1 +0,0 @@
|
||||
0ff3f882f9e99f9c56657863a926d44efeebb574
|
||||
707
src/views/system/index/components/d2-help/image/we.svg
Normal file
707
src/views/system/index/components/d2-help/image/we.svg
Normal file
@@ -0,0 +1,707 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="468" height="468" viewBox="0 0 468 468">
|
||||
<desc></desc>
|
||||
<rect width="468" height="468" fill="#ffffff" cx="0" cy="0" />
|
||||
<defs>
|
||||
<rect id="p" width="12" height="12" />
|
||||
</defs>
|
||||
<g fill="#000000">
|
||||
<use x="12" y="12" xlink:href="#p" />
|
||||
<use x="24" y="12" xlink:href="#p" />
|
||||
<use x="36" y="12" xlink:href="#p" />
|
||||
<use x="48" y="12" xlink:href="#p" />
|
||||
<use x="60" y="12" xlink:href="#p" />
|
||||
<use x="72" y="12" xlink:href="#p" />
|
||||
<use x="84" y="12" xlink:href="#p" />
|
||||
<use x="108" y="12" xlink:href="#p" />
|
||||
<use x="144" y="12" xlink:href="#p" />
|
||||
<use x="156" y="12" xlink:href="#p" />
|
||||
<use x="180" y="12" xlink:href="#p" />
|
||||
<use x="204" y="12" xlink:href="#p" />
|
||||
<use x="240" y="12" xlink:href="#p" />
|
||||
<use x="264" y="12" xlink:href="#p" />
|
||||
<use x="276" y="12" xlink:href="#p" />
|
||||
<use x="288" y="12" xlink:href="#p" />
|
||||
<use x="300" y="12" xlink:href="#p" />
|
||||
<use x="348" y="12" xlink:href="#p" />
|
||||
<use x="372" y="12" xlink:href="#p" />
|
||||
<use x="384" y="12" xlink:href="#p" />
|
||||
<use x="396" y="12" xlink:href="#p" />
|
||||
<use x="408" y="12" xlink:href="#p" />
|
||||
<use x="420" y="12" xlink:href="#p" />
|
||||
<use x="432" y="12" xlink:href="#p" />
|
||||
<use x="444" y="12" xlink:href="#p" />
|
||||
<use x="12" y="24" xlink:href="#p" />
|
||||
<use x="84" y="24" xlink:href="#p" />
|
||||
<use x="108" y="24" xlink:href="#p" />
|
||||
<use x="132" y="24" xlink:href="#p" />
|
||||
<use x="144" y="24" xlink:href="#p" />
|
||||
<use x="168" y="24" xlink:href="#p" />
|
||||
<use x="192" y="24" xlink:href="#p" />
|
||||
<use x="216" y="24" xlink:href="#p" />
|
||||
<use x="228" y="24" xlink:href="#p" />
|
||||
<use x="240" y="24" xlink:href="#p" />
|
||||
<use x="264" y="24" xlink:href="#p" />
|
||||
<use x="276" y="24" xlink:href="#p" />
|
||||
<use x="336" y="24" xlink:href="#p" />
|
||||
<use x="348" y="24" xlink:href="#p" />
|
||||
<use x="372" y="24" xlink:href="#p" />
|
||||
<use x="444" y="24" xlink:href="#p" />
|
||||
<use x="12" y="36" xlink:href="#p" />
|
||||
<use x="36" y="36" xlink:href="#p" />
|
||||
<use x="48" y="36" xlink:href="#p" />
|
||||
<use x="60" y="36" xlink:href="#p" />
|
||||
<use x="84" y="36" xlink:href="#p" />
|
||||
<use x="108" y="36" xlink:href="#p" />
|
||||
<use x="120" y="36" xlink:href="#p" />
|
||||
<use x="180" y="36" xlink:href="#p" />
|
||||
<use x="192" y="36" xlink:href="#p" />
|
||||
<use x="204" y="36" xlink:href="#p" />
|
||||
<use x="216" y="36" xlink:href="#p" />
|
||||
<use x="240" y="36" xlink:href="#p" />
|
||||
<use x="252" y="36" xlink:href="#p" />
|
||||
<use x="264" y="36" xlink:href="#p" />
|
||||
<use x="276" y="36" xlink:href="#p" />
|
||||
<use x="324" y="36" xlink:href="#p" />
|
||||
<use x="372" y="36" xlink:href="#p" />
|
||||
<use x="396" y="36" xlink:href="#p" />
|
||||
<use x="408" y="36" xlink:href="#p" />
|
||||
<use x="420" y="36" xlink:href="#p" />
|
||||
<use x="444" y="36" xlink:href="#p" />
|
||||
<use x="12" y="48" xlink:href="#p" />
|
||||
<use x="36" y="48" xlink:href="#p" />
|
||||
<use x="48" y="48" xlink:href="#p" />
|
||||
<use x="60" y="48" xlink:href="#p" />
|
||||
<use x="84" y="48" xlink:href="#p" />
|
||||
<use x="120" y="48" xlink:href="#p" />
|
||||
<use x="144" y="48" xlink:href="#p" />
|
||||
<use x="168" y="48" xlink:href="#p" />
|
||||
<use x="192" y="48" xlink:href="#p" />
|
||||
<use x="204" y="48" xlink:href="#p" />
|
||||
<use x="216" y="48" xlink:href="#p" />
|
||||
<use x="288" y="48" xlink:href="#p" />
|
||||
<use x="300" y="48" xlink:href="#p" />
|
||||
<use x="312" y="48" xlink:href="#p" />
|
||||
<use x="324" y="48" xlink:href="#p" />
|
||||
<use x="336" y="48" xlink:href="#p" />
|
||||
<use x="372" y="48" xlink:href="#p" />
|
||||
<use x="396" y="48" xlink:href="#p" />
|
||||
<use x="408" y="48" xlink:href="#p" />
|
||||
<use x="420" y="48" xlink:href="#p" />
|
||||
<use x="444" y="48" xlink:href="#p" />
|
||||
<use x="12" y="60" xlink:href="#p" />
|
||||
<use x="36" y="60" xlink:href="#p" />
|
||||
<use x="48" y="60" xlink:href="#p" />
|
||||
<use x="60" y="60" xlink:href="#p" />
|
||||
<use x="84" y="60" xlink:href="#p" />
|
||||
<use x="132" y="60" xlink:href="#p" />
|
||||
<use x="144" y="60" xlink:href="#p" />
|
||||
<use x="156" y="60" xlink:href="#p" />
|
||||
<use x="168" y="60" xlink:href="#p" />
|
||||
<use x="180" y="60" xlink:href="#p" />
|
||||
<use x="192" y="60" xlink:href="#p" />
|
||||
<use x="204" y="60" xlink:href="#p" />
|
||||
<use x="240" y="60" xlink:href="#p" />
|
||||
<use x="276" y="60" xlink:href="#p" />
|
||||
<use x="300" y="60" xlink:href="#p" />
|
||||
<use x="324" y="60" xlink:href="#p" />
|
||||
<use x="372" y="60" xlink:href="#p" />
|
||||
<use x="396" y="60" xlink:href="#p" />
|
||||
<use x="408" y="60" xlink:href="#p" />
|
||||
<use x="420" y="60" xlink:href="#p" />
|
||||
<use x="444" y="60" xlink:href="#p" />
|
||||
<use x="12" y="72" xlink:href="#p" />
|
||||
<use x="84" y="72" xlink:href="#p" />
|
||||
<use x="108" y="72" xlink:href="#p" />
|
||||
<use x="168" y="72" xlink:href="#p" />
|
||||
<use x="180" y="72" xlink:href="#p" />
|
||||
<use x="192" y="72" xlink:href="#p" />
|
||||
<use x="228" y="72" xlink:href="#p" />
|
||||
<use x="264" y="72" xlink:href="#p" />
|
||||
<use x="288" y="72" xlink:href="#p" />
|
||||
<use x="300" y="72" xlink:href="#p" />
|
||||
<use x="324" y="72" xlink:href="#p" />
|
||||
<use x="336" y="72" xlink:href="#p" />
|
||||
<use x="348" y="72" xlink:href="#p" />
|
||||
<use x="372" y="72" xlink:href="#p" />
|
||||
<use x="444" y="72" xlink:href="#p" />
|
||||
<use x="12" y="84" xlink:href="#p" />
|
||||
<use x="24" y="84" xlink:href="#p" />
|
||||
<use x="36" y="84" xlink:href="#p" />
|
||||
<use x="48" y="84" xlink:href="#p" />
|
||||
<use x="60" y="84" xlink:href="#p" />
|
||||
<use x="72" y="84" xlink:href="#p" />
|
||||
<use x="84" y="84" xlink:href="#p" />
|
||||
<use x="108" y="84" xlink:href="#p" />
|
||||
<use x="132" y="84" xlink:href="#p" />
|
||||
<use x="156" y="84" xlink:href="#p" />
|
||||
<use x="180" y="84" xlink:href="#p" />
|
||||
<use x="204" y="84" xlink:href="#p" />
|
||||
<use x="228" y="84" xlink:href="#p" />
|
||||
<use x="252" y="84" xlink:href="#p" />
|
||||
<use x="276" y="84" xlink:href="#p" />
|
||||
<use x="300" y="84" xlink:href="#p" />
|
||||
<use x="324" y="84" xlink:href="#p" />
|
||||
<use x="348" y="84" xlink:href="#p" />
|
||||
<use x="372" y="84" xlink:href="#p" />
|
||||
<use x="384" y="84" xlink:href="#p" />
|
||||
<use x="396" y="84" xlink:href="#p" />
|
||||
<use x="408" y="84" xlink:href="#p" />
|
||||
<use x="420" y="84" xlink:href="#p" />
|
||||
<use x="432" y="84" xlink:href="#p" />
|
||||
<use x="444" y="84" xlink:href="#p" />
|
||||
<use x="108" y="96" xlink:href="#p" />
|
||||
<use x="180" y="96" xlink:href="#p" />
|
||||
<use x="192" y="96" xlink:href="#p" />
|
||||
<use x="216" y="96" xlink:href="#p" />
|
||||
<use x="240" y="96" xlink:href="#p" />
|
||||
<use x="276" y="96" xlink:href="#p" />
|
||||
<use x="300" y="96" xlink:href="#p" />
|
||||
<use x="312" y="96" xlink:href="#p" />
|
||||
<use x="348" y="96" xlink:href="#p" />
|
||||
<use x="36" y="108" xlink:href="#p" />
|
||||
<use x="48" y="108" xlink:href="#p" />
|
||||
<use x="60" y="108" xlink:href="#p" />
|
||||
<use x="84" y="108" xlink:href="#p" />
|
||||
<use x="108" y="108" xlink:href="#p" />
|
||||
<use x="120" y="108" xlink:href="#p" />
|
||||
<use x="144" y="108" xlink:href="#p" />
|
||||
<use x="180" y="108" xlink:href="#p" />
|
||||
<use x="192" y="108" xlink:href="#p" />
|
||||
<use x="204" y="108" xlink:href="#p" />
|
||||
<use x="228" y="108" xlink:href="#p" />
|
||||
<use x="276" y="108" xlink:href="#p" />
|
||||
<use x="312" y="108" xlink:href="#p" />
|
||||
<use x="324" y="108" xlink:href="#p" />
|
||||
<use x="348" y="108" xlink:href="#p" />
|
||||
<use x="360" y="108" xlink:href="#p" />
|
||||
<use x="372" y="108" xlink:href="#p" />
|
||||
<use x="384" y="108" xlink:href="#p" />
|
||||
<use x="420" y="108" xlink:href="#p" />
|
||||
<use x="432" y="108" xlink:href="#p" />
|
||||
<use x="444" y="108" xlink:href="#p" />
|
||||
<use x="24" y="120" xlink:href="#p" />
|
||||
<use x="36" y="120" xlink:href="#p" />
|
||||
<use x="72" y="120" xlink:href="#p" />
|
||||
<use x="168" y="120" xlink:href="#p" />
|
||||
<use x="204" y="120" xlink:href="#p" />
|
||||
<use x="252" y="120" xlink:href="#p" />
|
||||
<use x="276" y="120" xlink:href="#p" />
|
||||
<use x="288" y="120" xlink:href="#p" />
|
||||
<use x="300" y="120" xlink:href="#p" />
|
||||
<use x="312" y="120" xlink:href="#p" />
|
||||
<use x="336" y="120" xlink:href="#p" />
|
||||
<use x="348" y="120" xlink:href="#p" />
|
||||
<use x="444" y="120" xlink:href="#p" />
|
||||
<use x="36" y="132" xlink:href="#p" />
|
||||
<use x="84" y="132" xlink:href="#p" />
|
||||
<use x="108" y="132" xlink:href="#p" />
|
||||
<use x="120" y="132" xlink:href="#p" />
|
||||
<use x="132" y="132" xlink:href="#p" />
|
||||
<use x="144" y="132" xlink:href="#p" />
|
||||
<use x="180" y="132" xlink:href="#p" />
|
||||
<use x="192" y="132" xlink:href="#p" />
|
||||
<use x="204" y="132" xlink:href="#p" />
|
||||
<use x="216" y="132" xlink:href="#p" />
|
||||
<use x="228" y="132" xlink:href="#p" />
|
||||
<use x="252" y="132" xlink:href="#p" />
|
||||
<use x="312" y="132" xlink:href="#p" />
|
||||
<use x="324" y="132" xlink:href="#p" />
|
||||
<use x="336" y="132" xlink:href="#p" />
|
||||
<use x="372" y="132" xlink:href="#p" />
|
||||
<use x="384" y="132" xlink:href="#p" />
|
||||
<use x="396" y="132" xlink:href="#p" />
|
||||
<use x="420" y="132" xlink:href="#p" />
|
||||
<use x="432" y="132" xlink:href="#p" />
|
||||
<use x="444" y="132" xlink:href="#p" />
|
||||
<use x="48" y="144" xlink:href="#p" />
|
||||
<use x="120" y="144" xlink:href="#p" />
|
||||
<use x="156" y="144" xlink:href="#p" />
|
||||
<use x="180" y="144" xlink:href="#p" />
|
||||
<use x="216" y="144" xlink:href="#p" />
|
||||
<use x="228" y="144" xlink:href="#p" />
|
||||
<use x="240" y="144" xlink:href="#p" />
|
||||
<use x="264" y="144" xlink:href="#p" />
|
||||
<use x="276" y="144" xlink:href="#p" />
|
||||
<use x="288" y="144" xlink:href="#p" />
|
||||
<use x="324" y="144" xlink:href="#p" />
|
||||
<use x="336" y="144" xlink:href="#p" />
|
||||
<use x="372" y="144" xlink:href="#p" />
|
||||
<use x="384" y="144" xlink:href="#p" />
|
||||
<use x="396" y="144" xlink:href="#p" />
|
||||
<use x="432" y="144" xlink:href="#p" />
|
||||
<use x="444" y="144" xlink:href="#p" />
|
||||
<use x="24" y="156" xlink:href="#p" />
|
||||
<use x="36" y="156" xlink:href="#p" />
|
||||
<use x="60" y="156" xlink:href="#p" />
|
||||
<use x="84" y="156" xlink:href="#p" />
|
||||
<use x="168" y="156" xlink:href="#p" />
|
||||
<use x="192" y="156" xlink:href="#p" />
|
||||
<use x="204" y="156" xlink:href="#p" />
|
||||
<use x="240" y="156" xlink:href="#p" />
|
||||
<use x="264" y="156" xlink:href="#p" />
|
||||
<use x="300" y="156" xlink:href="#p" />
|
||||
<use x="312" y="156" xlink:href="#p" />
|
||||
<use x="324" y="156" xlink:href="#p" />
|
||||
<use x="360" y="156" xlink:href="#p" />
|
||||
<use x="372" y="156" xlink:href="#p" />
|
||||
<use x="384" y="156" xlink:href="#p" />
|
||||
<use x="396" y="156" xlink:href="#p" />
|
||||
<use x="408" y="156" xlink:href="#p" />
|
||||
<use x="420" y="156" xlink:href="#p" />
|
||||
<use x="432" y="156" xlink:href="#p" />
|
||||
<use x="444" y="156" xlink:href="#p" />
|
||||
<use x="24" y="168" xlink:href="#p" />
|
||||
<use x="36" y="168" xlink:href="#p" />
|
||||
<use x="48" y="168" xlink:href="#p" />
|
||||
<use x="60" y="168" xlink:href="#p" />
|
||||
<use x="96" y="168" xlink:href="#p" />
|
||||
<use x="120" y="168" xlink:href="#p" />
|
||||
<use x="192" y="168" xlink:href="#p" />
|
||||
<use x="216" y="168" xlink:href="#p" />
|
||||
<use x="228" y="168" xlink:href="#p" />
|
||||
<use x="240" y="168" xlink:href="#p" />
|
||||
<use x="252" y="168" xlink:href="#p" />
|
||||
<use x="312" y="168" xlink:href="#p" />
|
||||
<use x="324" y="168" xlink:href="#p" />
|
||||
<use x="336" y="168" xlink:href="#p" />
|
||||
<use x="348" y="168" xlink:href="#p" />
|
||||
<use x="360" y="168" xlink:href="#p" />
|
||||
<use x="384" y="168" xlink:href="#p" />
|
||||
<use x="408" y="168" xlink:href="#p" />
|
||||
<use x="420" y="168" xlink:href="#p" />
|
||||
<use x="12" y="180" xlink:href="#p" />
|
||||
<use x="36" y="180" xlink:href="#p" />
|
||||
<use x="84" y="180" xlink:href="#p" />
|
||||
<use x="96" y="180" xlink:href="#p" />
|
||||
<use x="108" y="180" xlink:href="#p" />
|
||||
<use x="120" y="180" xlink:href="#p" />
|
||||
<use x="132" y="180" xlink:href="#p" />
|
||||
<use x="144" y="180" xlink:href="#p" />
|
||||
<use x="168" y="180" xlink:href="#p" />
|
||||
<use x="180" y="180" xlink:href="#p" />
|
||||
<use x="192" y="180" xlink:href="#p" />
|
||||
<use x="204" y="180" xlink:href="#p" />
|
||||
<use x="228" y="180" xlink:href="#p" />
|
||||
<use x="240" y="180" xlink:href="#p" />
|
||||
<use x="252" y="180" xlink:href="#p" />
|
||||
<use x="264" y="180" xlink:href="#p" />
|
||||
<use x="276" y="180" xlink:href="#p" />
|
||||
<use x="288" y="180" xlink:href="#p" />
|
||||
<use x="300" y="180" xlink:href="#p" />
|
||||
<use x="312" y="180" xlink:href="#p" />
|
||||
<use x="324" y="180" xlink:href="#p" />
|
||||
<use x="336" y="180" xlink:href="#p" />
|
||||
<use x="348" y="180" xlink:href="#p" />
|
||||
<use x="372" y="180" xlink:href="#p" />
|
||||
<use x="408" y="180" xlink:href="#p" />
|
||||
<use x="432" y="180" xlink:href="#p" />
|
||||
<use x="444" y="180" xlink:href="#p" />
|
||||
<use x="12" y="192" xlink:href="#p" />
|
||||
<use x="24" y="192" xlink:href="#p" />
|
||||
<use x="60" y="192" xlink:href="#p" />
|
||||
<use x="96" y="192" xlink:href="#p" />
|
||||
<use x="108" y="192" xlink:href="#p" />
|
||||
<use x="120" y="192" xlink:href="#p" />
|
||||
<use x="156" y="192" xlink:href="#p" />
|
||||
<use x="180" y="192" xlink:href="#p" />
|
||||
<use x="192" y="192" xlink:href="#p" />
|
||||
<use x="204" y="192" xlink:href="#p" />
|
||||
<use x="216" y="192" xlink:href="#p" />
|
||||
<use x="228" y="192" xlink:href="#p" />
|
||||
<use x="288" y="192" xlink:href="#p" />
|
||||
<use x="300" y="192" xlink:href="#p" />
|
||||
<use x="324" y="192" xlink:href="#p" />
|
||||
<use x="360" y="192" xlink:href="#p" />
|
||||
<use x="372" y="192" xlink:href="#p" />
|
||||
<use x="384" y="192" xlink:href="#p" />
|
||||
<use x="396" y="192" xlink:href="#p" />
|
||||
<use x="432" y="192" xlink:href="#p" />
|
||||
<use x="72" y="204" xlink:href="#p" />
|
||||
<use x="84" y="204" xlink:href="#p" />
|
||||
<use x="132" y="204" xlink:href="#p" />
|
||||
<use x="144" y="204" xlink:href="#p" />
|
||||
<use x="156" y="204" xlink:href="#p" />
|
||||
<use x="180" y="204" xlink:href="#p" />
|
||||
<use x="216" y="204" xlink:href="#p" />
|
||||
<use x="240" y="204" xlink:href="#p" />
|
||||
<use x="264" y="204" xlink:href="#p" />
|
||||
<use x="276" y="204" xlink:href="#p" />
|
||||
<use x="300" y="204" xlink:href="#p" />
|
||||
<use x="312" y="204" xlink:href="#p" />
|
||||
<use x="324" y="204" xlink:href="#p" />
|
||||
<use x="360" y="204" xlink:href="#p" />
|
||||
<use x="372" y="204" xlink:href="#p" />
|
||||
<use x="396" y="204" xlink:href="#p" />
|
||||
<use x="420" y="204" xlink:href="#p" />
|
||||
<use x="432" y="204" xlink:href="#p" />
|
||||
<use x="444" y="204" xlink:href="#p" />
|
||||
<use x="24" y="216" xlink:href="#p" />
|
||||
<use x="36" y="216" xlink:href="#p" />
|
||||
<use x="48" y="216" xlink:href="#p" />
|
||||
<use x="72" y="216" xlink:href="#p" />
|
||||
<use x="120" y="216" xlink:href="#p" />
|
||||
<use x="168" y="216" xlink:href="#p" />
|
||||
<use x="180" y="216" xlink:href="#p" />
|
||||
<use x="192" y="216" xlink:href="#p" />
|
||||
<use x="276" y="216" xlink:href="#p" />
|
||||
<use x="288" y="216" xlink:href="#p" />
|
||||
<use x="348" y="216" xlink:href="#p" />
|
||||
<use x="360" y="216" xlink:href="#p" />
|
||||
<use x="384" y="216" xlink:href="#p" />
|
||||
<use x="12" y="228" xlink:href="#p" />
|
||||
<use x="24" y="228" xlink:href="#p" />
|
||||
<use x="36" y="228" xlink:href="#p" />
|
||||
<use x="60" y="228" xlink:href="#p" />
|
||||
<use x="84" y="228" xlink:href="#p" />
|
||||
<use x="96" y="228" xlink:href="#p" />
|
||||
<use x="132" y="228" xlink:href="#p" />
|
||||
<use x="156" y="228" xlink:href="#p" />
|
||||
<use x="168" y="228" xlink:href="#p" />
|
||||
<use x="180" y="228" xlink:href="#p" />
|
||||
<use x="204" y="228" xlink:href="#p" />
|
||||
<use x="228" y="228" xlink:href="#p" />
|
||||
<use x="252" y="228" xlink:href="#p" />
|
||||
<use x="264" y="228" xlink:href="#p" />
|
||||
<use x="276" y="228" xlink:href="#p" />
|
||||
<use x="288" y="228" xlink:href="#p" />
|
||||
<use x="312" y="228" xlink:href="#p" />
|
||||
<use x="336" y="228" xlink:href="#p" />
|
||||
<use x="432" y="228" xlink:href="#p" />
|
||||
<use x="444" y="228" xlink:href="#p" />
|
||||
<use x="24" y="240" xlink:href="#p" />
|
||||
<use x="48" y="240" xlink:href="#p" />
|
||||
<use x="60" y="240" xlink:href="#p" />
|
||||
<use x="108" y="240" xlink:href="#p" />
|
||||
<use x="120" y="240" xlink:href="#p" />
|
||||
<use x="168" y="240" xlink:href="#p" />
|
||||
<use x="180" y="240" xlink:href="#p" />
|
||||
<use x="192" y="240" xlink:href="#p" />
|
||||
<use x="264" y="240" xlink:href="#p" />
|
||||
<use x="276" y="240" xlink:href="#p" />
|
||||
<use x="300" y="240" xlink:href="#p" />
|
||||
<use x="324" y="240" xlink:href="#p" />
|
||||
<use x="348" y="240" xlink:href="#p" />
|
||||
<use x="396" y="240" xlink:href="#p" />
|
||||
<use x="432" y="240" xlink:href="#p" />
|
||||
<use x="444" y="240" xlink:href="#p" />
|
||||
<use x="12" y="252" xlink:href="#p" />
|
||||
<use x="24" y="252" xlink:href="#p" />
|
||||
<use x="72" y="252" xlink:href="#p" />
|
||||
<use x="84" y="252" xlink:href="#p" />
|
||||
<use x="108" y="252" xlink:href="#p" />
|
||||
<use x="120" y="252" xlink:href="#p" />
|
||||
<use x="132" y="252" xlink:href="#p" />
|
||||
<use x="144" y="252" xlink:href="#p" />
|
||||
<use x="156" y="252" xlink:href="#p" />
|
||||
<use x="168" y="252" xlink:href="#p" />
|
||||
<use x="216" y="252" xlink:href="#p" />
|
||||
<use x="252" y="252" xlink:href="#p" />
|
||||
<use x="264" y="252" xlink:href="#p" />
|
||||
<use x="288" y="252" xlink:href="#p" />
|
||||
<use x="300" y="252" xlink:href="#p" />
|
||||
<use x="324" y="252" xlink:href="#p" />
|
||||
<use x="360" y="252" xlink:href="#p" />
|
||||
<use x="372" y="252" xlink:href="#p" />
|
||||
<use x="384" y="252" xlink:href="#p" />
|
||||
<use x="396" y="252" xlink:href="#p" />
|
||||
<use x="408" y="252" xlink:href="#p" />
|
||||
<use x="420" y="252" xlink:href="#p" />
|
||||
<use x="432" y="252" xlink:href="#p" />
|
||||
<use x="444" y="252" xlink:href="#p" />
|
||||
<use x="12" y="264" xlink:href="#p" />
|
||||
<use x="48" y="264" xlink:href="#p" />
|
||||
<use x="60" y="264" xlink:href="#p" />
|
||||
<use x="72" y="264" xlink:href="#p" />
|
||||
<use x="96" y="264" xlink:href="#p" />
|
||||
<use x="120" y="264" xlink:href="#p" />
|
||||
<use x="180" y="264" xlink:href="#p" />
|
||||
<use x="192" y="264" xlink:href="#p" />
|
||||
<use x="204" y="264" xlink:href="#p" />
|
||||
<use x="216" y="264" xlink:href="#p" />
|
||||
<use x="228" y="264" xlink:href="#p" />
|
||||
<use x="252" y="264" xlink:href="#p" />
|
||||
<use x="276" y="264" xlink:href="#p" />
|
||||
<use x="360" y="264" xlink:href="#p" />
|
||||
<use x="384" y="264" xlink:href="#p" />
|
||||
<use x="432" y="264" xlink:href="#p" />
|
||||
<use x="12" y="276" xlink:href="#p" />
|
||||
<use x="24" y="276" xlink:href="#p" />
|
||||
<use x="60" y="276" xlink:href="#p" />
|
||||
<use x="72" y="276" xlink:href="#p" />
|
||||
<use x="84" y="276" xlink:href="#p" />
|
||||
<use x="144" y="276" xlink:href="#p" />
|
||||
<use x="156" y="276" xlink:href="#p" />
|
||||
<use x="192" y="276" xlink:href="#p" />
|
||||
<use x="216" y="276" xlink:href="#p" />
|
||||
<use x="228" y="276" xlink:href="#p" />
|
||||
<use x="240" y="276" xlink:href="#p" />
|
||||
<use x="252" y="276" xlink:href="#p" />
|
||||
<use x="288" y="276" xlink:href="#p" />
|
||||
<use x="312" y="276" xlink:href="#p" />
|
||||
<use x="324" y="276" xlink:href="#p" />
|
||||
<use x="336" y="276" xlink:href="#p" />
|
||||
<use x="372" y="276" xlink:href="#p" />
|
||||
<use x="444" y="276" xlink:href="#p" />
|
||||
<use x="48" y="288" xlink:href="#p" />
|
||||
<use x="60" y="288" xlink:href="#p" />
|
||||
<use x="96" y="288" xlink:href="#p" />
|
||||
<use x="132" y="288" xlink:href="#p" />
|
||||
<use x="144" y="288" xlink:href="#p" />
|
||||
<use x="168" y="288" xlink:href="#p" />
|
||||
<use x="192" y="288" xlink:href="#p" />
|
||||
<use x="216" y="288" xlink:href="#p" />
|
||||
<use x="372" y="288" xlink:href="#p" />
|
||||
<use x="384" y="288" xlink:href="#p" />
|
||||
<use x="432" y="288" xlink:href="#p" />
|
||||
<use x="444" y="288" xlink:href="#p" />
|
||||
<use x="12" y="300" xlink:href="#p" />
|
||||
<use x="36" y="300" xlink:href="#p" />
|
||||
<use x="48" y="300" xlink:href="#p" />
|
||||
<use x="84" y="300" xlink:href="#p" />
|
||||
<use x="96" y="300" xlink:href="#p" />
|
||||
<use x="108" y="300" xlink:href="#p" />
|
||||
<use x="132" y="300" xlink:href="#p" />
|
||||
<use x="144" y="300" xlink:href="#p" />
|
||||
<use x="216" y="300" xlink:href="#p" />
|
||||
<use x="228" y="300" xlink:href="#p" />
|
||||
<use x="240" y="300" xlink:href="#p" />
|
||||
<use x="252" y="300" xlink:href="#p" />
|
||||
<use x="264" y="300" xlink:href="#p" />
|
||||
<use x="300" y="300" xlink:href="#p" />
|
||||
<use x="312" y="300" xlink:href="#p" />
|
||||
<use x="324" y="300" xlink:href="#p" />
|
||||
<use x="348" y="300" xlink:href="#p" />
|
||||
<use x="372" y="300" xlink:href="#p" />
|
||||
<use x="396" y="300" xlink:href="#p" />
|
||||
<use x="420" y="300" xlink:href="#p" />
|
||||
<use x="444" y="300" xlink:href="#p" />
|
||||
<use x="12" y="312" xlink:href="#p" />
|
||||
<use x="24" y="312" xlink:href="#p" />
|
||||
<use x="72" y="312" xlink:href="#p" />
|
||||
<use x="108" y="312" xlink:href="#p" />
|
||||
<use x="132" y="312" xlink:href="#p" />
|
||||
<use x="144" y="312" xlink:href="#p" />
|
||||
<use x="192" y="312" xlink:href="#p" />
|
||||
<use x="204" y="312" xlink:href="#p" />
|
||||
<use x="228" y="312" xlink:href="#p" />
|
||||
<use x="240" y="312" xlink:href="#p" />
|
||||
<use x="264" y="312" xlink:href="#p" />
|
||||
<use x="300" y="312" xlink:href="#p" />
|
||||
<use x="336" y="312" xlink:href="#p" />
|
||||
<use x="348" y="312" xlink:href="#p" />
|
||||
<use x="360" y="312" xlink:href="#p" />
|
||||
<use x="384" y="312" xlink:href="#p" />
|
||||
<use x="444" y="312" xlink:href="#p" />
|
||||
<use x="12" y="324" xlink:href="#p" />
|
||||
<use x="48" y="324" xlink:href="#p" />
|
||||
<use x="84" y="324" xlink:href="#p" />
|
||||
<use x="108" y="324" xlink:href="#p" />
|
||||
<use x="120" y="324" xlink:href="#p" />
|
||||
<use x="132" y="324" xlink:href="#p" />
|
||||
<use x="156" y="324" xlink:href="#p" />
|
||||
<use x="168" y="324" xlink:href="#p" />
|
||||
<use x="216" y="324" xlink:href="#p" />
|
||||
<use x="240" y="324" xlink:href="#p" />
|
||||
<use x="264" y="324" xlink:href="#p" />
|
||||
<use x="300" y="324" xlink:href="#p" />
|
||||
<use x="324" y="324" xlink:href="#p" />
|
||||
<use x="336" y="324" xlink:href="#p" />
|
||||
<use x="348" y="324" xlink:href="#p" />
|
||||
<use x="372" y="324" xlink:href="#p" />
|
||||
<use x="384" y="324" xlink:href="#p" />
|
||||
<use x="396" y="324" xlink:href="#p" />
|
||||
<use x="432" y="324" xlink:href="#p" />
|
||||
<use x="444" y="324" xlink:href="#p" />
|
||||
<use x="12" y="336" xlink:href="#p" />
|
||||
<use x="48" y="336" xlink:href="#p" />
|
||||
<use x="60" y="336" xlink:href="#p" />
|
||||
<use x="108" y="336" xlink:href="#p" />
|
||||
<use x="168" y="336" xlink:href="#p" />
|
||||
<use x="180" y="336" xlink:href="#p" />
|
||||
<use x="204" y="336" xlink:href="#p" />
|
||||
<use x="240" y="336" xlink:href="#p" />
|
||||
<use x="252" y="336" xlink:href="#p" />
|
||||
<use x="300" y="336" xlink:href="#p" />
|
||||
<use x="324" y="336" xlink:href="#p" />
|
||||
<use x="336" y="336" xlink:href="#p" />
|
||||
<use x="348" y="336" xlink:href="#p" />
|
||||
<use x="360" y="336" xlink:href="#p" />
|
||||
<use x="384" y="336" xlink:href="#p" />
|
||||
<use x="432" y="336" xlink:href="#p" />
|
||||
<use x="12" y="348" xlink:href="#p" />
|
||||
<use x="36" y="348" xlink:href="#p" />
|
||||
<use x="48" y="348" xlink:href="#p" />
|
||||
<use x="60" y="348" xlink:href="#p" />
|
||||
<use x="72" y="348" xlink:href="#p" />
|
||||
<use x="84" y="348" xlink:href="#p" />
|
||||
<use x="96" y="348" xlink:href="#p" />
|
||||
<use x="120" y="348" xlink:href="#p" />
|
||||
<use x="132" y="348" xlink:href="#p" />
|
||||
<use x="168" y="348" xlink:href="#p" />
|
||||
<use x="180" y="348" xlink:href="#p" />
|
||||
<use x="204" y="348" xlink:href="#p" />
|
||||
<use x="216" y="348" xlink:href="#p" />
|
||||
<use x="240" y="348" xlink:href="#p" />
|
||||
<use x="252" y="348" xlink:href="#p" />
|
||||
<use x="264" y="348" xlink:href="#p" />
|
||||
<use x="276" y="348" xlink:href="#p" />
|
||||
<use x="300" y="348" xlink:href="#p" />
|
||||
<use x="312" y="348" xlink:href="#p" />
|
||||
<use x="348" y="348" xlink:href="#p" />
|
||||
<use x="360" y="348" xlink:href="#p" />
|
||||
<use x="372" y="348" xlink:href="#p" />
|
||||
<use x="384" y="348" xlink:href="#p" />
|
||||
<use x="396" y="348" xlink:href="#p" />
|
||||
<use x="420" y="348" xlink:href="#p" />
|
||||
<use x="432" y="348" xlink:href="#p" />
|
||||
<use x="108" y="360" xlink:href="#p" />
|
||||
<use x="132" y="360" xlink:href="#p" />
|
||||
<use x="144" y="360" xlink:href="#p" />
|
||||
<use x="180" y="360" xlink:href="#p" />
|
||||
<use x="192" y="360" xlink:href="#p" />
|
||||
<use x="204" y="360" xlink:href="#p" />
|
||||
<use x="240" y="360" xlink:href="#p" />
|
||||
<use x="252" y="360" xlink:href="#p" />
|
||||
<use x="276" y="360" xlink:href="#p" />
|
||||
<use x="312" y="360" xlink:href="#p" />
|
||||
<use x="336" y="360" xlink:href="#p" />
|
||||
<use x="348" y="360" xlink:href="#p" />
|
||||
<use x="396" y="360" xlink:href="#p" />
|
||||
<use x="432" y="360" xlink:href="#p" />
|
||||
<use x="12" y="372" xlink:href="#p" />
|
||||
<use x="24" y="372" xlink:href="#p" />
|
||||
<use x="36" y="372" xlink:href="#p" />
|
||||
<use x="48" y="372" xlink:href="#p" />
|
||||
<use x="60" y="372" xlink:href="#p" />
|
||||
<use x="72" y="372" xlink:href="#p" />
|
||||
<use x="84" y="372" xlink:href="#p" />
|
||||
<use x="132" y="372" xlink:href="#p" />
|
||||
<use x="144" y="372" xlink:href="#p" />
|
||||
<use x="168" y="372" xlink:href="#p" />
|
||||
<use x="216" y="372" xlink:href="#p" />
|
||||
<use x="264" y="372" xlink:href="#p" />
|
||||
<use x="276" y="372" xlink:href="#p" />
|
||||
<use x="324" y="372" xlink:href="#p" />
|
||||
<use x="336" y="372" xlink:href="#p" />
|
||||
<use x="348" y="372" xlink:href="#p" />
|
||||
<use x="372" y="372" xlink:href="#p" />
|
||||
<use x="396" y="372" xlink:href="#p" />
|
||||
<use x="408" y="372" xlink:href="#p" />
|
||||
<use x="432" y="372" xlink:href="#p" />
|
||||
<use x="444" y="372" xlink:href="#p" />
|
||||
<use x="12" y="384" xlink:href="#p" />
|
||||
<use x="84" y="384" xlink:href="#p" />
|
||||
<use x="120" y="384" xlink:href="#p" />
|
||||
<use x="156" y="384" xlink:href="#p" />
|
||||
<use x="168" y="384" xlink:href="#p" />
|
||||
<use x="180" y="384" xlink:href="#p" />
|
||||
<use x="228" y="384" xlink:href="#p" />
|
||||
<use x="324" y="384" xlink:href="#p" />
|
||||
<use x="348" y="384" xlink:href="#p" />
|
||||
<use x="396" y="384" xlink:href="#p" />
|
||||
<use x="12" y="396" xlink:href="#p" />
|
||||
<use x="36" y="396" xlink:href="#p" />
|
||||
<use x="48" y="396" xlink:href="#p" />
|
||||
<use x="60" y="396" xlink:href="#p" />
|
||||
<use x="84" y="396" xlink:href="#p" />
|
||||
<use x="108" y="396" xlink:href="#p" />
|
||||
<use x="132" y="396" xlink:href="#p" />
|
||||
<use x="168" y="396" xlink:href="#p" />
|
||||
<use x="180" y="396" xlink:href="#p" />
|
||||
<use x="192" y="396" xlink:href="#p" />
|
||||
<use x="204" y="396" xlink:href="#p" />
|
||||
<use x="216" y="396" xlink:href="#p" />
|
||||
<use x="228" y="396" xlink:href="#p" />
|
||||
<use x="240" y="396" xlink:href="#p" />
|
||||
<use x="252" y="396" xlink:href="#p" />
|
||||
<use x="264" y="396" xlink:href="#p" />
|
||||
<use x="276" y="396" xlink:href="#p" />
|
||||
<use x="300" y="396" xlink:href="#p" />
|
||||
<use x="312" y="396" xlink:href="#p" />
|
||||
<use x="336" y="396" xlink:href="#p" />
|
||||
<use x="348" y="396" xlink:href="#p" />
|
||||
<use x="360" y="396" xlink:href="#p" />
|
||||
<use x="372" y="396" xlink:href="#p" />
|
||||
<use x="384" y="396" xlink:href="#p" />
|
||||
<use x="396" y="396" xlink:href="#p" />
|
||||
<use x="420" y="396" xlink:href="#p" />
|
||||
<use x="432" y="396" xlink:href="#p" />
|
||||
<use x="12" y="408" xlink:href="#p" />
|
||||
<use x="36" y="408" xlink:href="#p" />
|
||||
<use x="48" y="408" xlink:href="#p" />
|
||||
<use x="60" y="408" xlink:href="#p" />
|
||||
<use x="84" y="408" xlink:href="#p" />
|
||||
<use x="108" y="408" xlink:href="#p" />
|
||||
<use x="180" y="408" xlink:href="#p" />
|
||||
<use x="252" y="408" xlink:href="#p" />
|
||||
<use x="264" y="408" xlink:href="#p" />
|
||||
<use x="300" y="408" xlink:href="#p" />
|
||||
<use x="312" y="408" xlink:href="#p" />
|
||||
<use x="372" y="408" xlink:href="#p" />
|
||||
<use x="396" y="408" xlink:href="#p" />
|
||||
<use x="408" y="408" xlink:href="#p" />
|
||||
<use x="12" y="420" xlink:href="#p" />
|
||||
<use x="36" y="420" xlink:href="#p" />
|
||||
<use x="48" y="420" xlink:href="#p" />
|
||||
<use x="60" y="420" xlink:href="#p" />
|
||||
<use x="84" y="420" xlink:href="#p" />
|
||||
<use x="108" y="420" xlink:href="#p" />
|
||||
<use x="120" y="420" xlink:href="#p" />
|
||||
<use x="168" y="420" xlink:href="#p" />
|
||||
<use x="180" y="420" xlink:href="#p" />
|
||||
<use x="204" y="420" xlink:href="#p" />
|
||||
<use x="228" y="420" xlink:href="#p" />
|
||||
<use x="264" y="420" xlink:href="#p" />
|
||||
<use x="276" y="420" xlink:href="#p" />
|
||||
<use x="300" y="420" xlink:href="#p" />
|
||||
<use x="324" y="420" xlink:href="#p" />
|
||||
<use x="336" y="420" xlink:href="#p" />
|
||||
<use x="348" y="420" xlink:href="#p" />
|
||||
<use x="360" y="420" xlink:href="#p" />
|
||||
<use x="384" y="420" xlink:href="#p" />
|
||||
<use x="420" y="420" xlink:href="#p" />
|
||||
<use x="444" y="420" xlink:href="#p" />
|
||||
<use x="12" y="432" xlink:href="#p" />
|
||||
<use x="84" y="432" xlink:href="#p" />
|
||||
<use x="144" y="432" xlink:href="#p" />
|
||||
<use x="168" y="432" xlink:href="#p" />
|
||||
<use x="180" y="432" xlink:href="#p" />
|
||||
<use x="192" y="432" xlink:href="#p" />
|
||||
<use x="228" y="432" xlink:href="#p" />
|
||||
<use x="240" y="432" xlink:href="#p" />
|
||||
<use x="252" y="432" xlink:href="#p" />
|
||||
<use x="276" y="432" xlink:href="#p" />
|
||||
<use x="300" y="432" xlink:href="#p" />
|
||||
<use x="336" y="432" xlink:href="#p" />
|
||||
<use x="348" y="432" xlink:href="#p" />
|
||||
<use x="360" y="432" xlink:href="#p" />
|
||||
<use x="372" y="432" xlink:href="#p" />
|
||||
<use x="444" y="432" xlink:href="#p" />
|
||||
<use x="12" y="444" xlink:href="#p" />
|
||||
<use x="24" y="444" xlink:href="#p" />
|
||||
<use x="36" y="444" xlink:href="#p" />
|
||||
<use x="48" y="444" xlink:href="#p" />
|
||||
<use x="60" y="444" xlink:href="#p" />
|
||||
<use x="72" y="444" xlink:href="#p" />
|
||||
<use x="84" y="444" xlink:href="#p" />
|
||||
<use x="132" y="444" xlink:href="#p" />
|
||||
<use x="168" y="444" xlink:href="#p" />
|
||||
<use x="204" y="444" xlink:href="#p" />
|
||||
<use x="216" y="444" xlink:href="#p" />
|
||||
<use x="240" y="444" xlink:href="#p" />
|
||||
<use x="252" y="444" xlink:href="#p" />
|
||||
<use x="276" y="444" xlink:href="#p" />
|
||||
<use x="288" y="444" xlink:href="#p" />
|
||||
<use x="300" y="444" xlink:href="#p" />
|
||||
<use x="324" y="444" xlink:href="#p" />
|
||||
<use x="336" y="444" xlink:href="#p" />
|
||||
<use x="372" y="444" xlink:href="#p" />
|
||||
<use x="384" y="444" xlink:href="#p" />
|
||||
<use x="408" y="444" xlink:href="#p" />
|
||||
<use x="420" y="444" xlink:href="#p" />
|
||||
<use x="432" y="444" xlink:href="#p" />
|
||||
<use x="444" y="444" xlink:href="#p" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 27 KiB |
@@ -1 +0,0 @@
|
||||
7aa2a79d23a7d4293f2bdd0d4c09191ed15fd4de
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 9.0 KiB |
BIN
src/views/system/index/image/qr@2x.png
Normal file
BIN
src/views/system/index/image/qr@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@@ -1 +0,0 @@
|
||||
2ef12d88b2011063784c37f8b8490336503a5f88
|
||||
BIN
src/views/system/login/image/login-code.png
Normal file
BIN
src/views/system/login/image/login-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
src/views/system/login/image/logo@2x.png
Normal file
BIN
src/views/system/login/image/logo@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -1 +0,0 @@
|
||||
f37e18711a040d8dd2ad2af9cfb9f4ea6760c07a
|
||||
485
src/views/system/login/page.vue
Normal file
485
src/views/system/login/page.vue
Normal file
@@ -0,0 +1,485 @@
|
||||
<template>
|
||||
<div class="page-login">
|
||||
<div class="page-login--layer page-login--layer-area">
|
||||
<ul class="circles">
|
||||
<li v-for="n in 10" :key="n"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="page-login--layer page-login--layer-time"
|
||||
flex="main:center cross:center">
|
||||
{{time}}
|
||||
</div>
|
||||
<div class="page-login--layer">
|
||||
<div
|
||||
class="page-login--content"
|
||||
flex="dir:top main:justify cross:stretch box:justify">
|
||||
<div class="page-login--content-header">
|
||||
<p class="page-login--content-header-motto">
|
||||
时间是一切财富中最宝贵的财富
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="page-login--content-main"
|
||||
flex="dir:top main:center cross:center">
|
||||
<!-- logo -->
|
||||
<img class="page-login--logo" src="./image/logo@2x.png">
|
||||
<!-- form -->
|
||||
<div class="page-login--form">
|
||||
<el-card shadow="never">
|
||||
<el-form
|
||||
ref="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
:model="formLogin"
|
||||
size="default">
|
||||
<el-form-item prop="username">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formLogin.username"
|
||||
placeholder="用户名">
|
||||
<i slot="prepend" class="fa fa-user-circle-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
v-model="formLogin.password"
|
||||
placeholder="密码">
|
||||
<i slot="prepend" class="fa fa-keyboard-o"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
type="text"
|
||||
v-model="formLogin.code"
|
||||
placeholder="验证码">
|
||||
<template slot="append">
|
||||
<img class="login-code" src="./image/login-code.png">
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
size="default"
|
||||
@click="submit"
|
||||
type="primary"
|
||||
class="button-login">
|
||||
登录
|
||||
</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<p
|
||||
class="page-login--options"
|
||||
flex="main:justify cross:center">
|
||||
<span><d2-icon name="question-circle"/> 忘记密码</span>
|
||||
<span>注册用户</span>
|
||||
</p>
|
||||
<!-- quick login -->
|
||||
<el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
|
||||
快速选择用户（测试功能）
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-login--content-footer">
|
||||
<p class="page-login--content-footer-locales">
|
||||
<a
|
||||
v-for="language in $languages"
|
||||
:key="language.value"
|
||||
@click="onChangeLocale(language.value)">
|
||||
{{ language.label }}
|
||||
</a>
|
||||
</p>
|
||||
<p class="page-login--content-footer-copyright">
|
||||
Copyright
|
||||
<d2-icon name="copyright"/>
|
||||
2018 D2 Projects 开源组织出品
|
||||
<a href="https://github.com/FairyEver">
|
||||
@FairyEver
|
||||
</a>
|
||||
</p>
|
||||
<p class="page-login--content-footer-options">
|
||||
<a href="#">帮助</a>
|
||||
<a href="#">隐私</a>
|
||||
<a href="#">条款</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
title="快速选择用户"
|
||||
:visible.sync="dialogVisible"
|
||||
width="400px">
|
||||
<el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
|
||||
<el-col v-for="(user, index) in users" :key="index" :span="8">
|
||||
<div class="page-login--quick-user" @click="handleUserBtnClick(user)">
|
||||
<d2-icon name="user-circle-o"/>
|
||||
<span>{{user.name}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs'
|
||||
import { mapActions } from 'vuex'
|
||||
import localeMixin from '@/locales/mixin.js'
|
||||
export default {
|
||||
mixins: [
|
||||
localeMixin
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
timeInterval: null,
|
||||
time: dayjs().format('HH:mm:ss'),
|
||||
// 快速选择用户
|
||||
dialogVisible: false,
|
||||
users: [
|
||||
{
|
||||
name: 'Admin',
|
||||
username: 'admin',
|
||||
password: 'admin'
|
||||
},
|
||||
{
|
||||
name: 'Editor',
|
||||
username: 'editor',
|
||||
password: 'editor'
|
||||
},
|
||||
{
|
||||
name: 'User1',
|
||||
username: 'user1',
|
||||
password: 'user1'
|
||||
}
|
||||
],
|
||||
// 表单
|
||||
formLogin: {
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
code: 'v9am'
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
code: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.timeInterval = setInterval(() => {
|
||||
this.refreshTime()
|
||||
}, 1000)
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timeInterval)
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/account', [
|
||||
'login'
|
||||
]),
|
||||
refreshTime () {
|
||||
this.time = dayjs().format('HH:mm:ss')
|
||||
},
|
||||
/**
|
||||
* @description 接收选择一个用户快速登录的事件
|
||||
* @param {Object} user 用户信息
|
||||
*/
|
||||
handleUserBtnClick (user) {
|
||||
this.formLogin.username = user.username
|
||||
this.formLogin.password = user.password
|
||||
this.submit()
|
||||
},
|
||||
/**
|
||||
* @description 提交表单
|
||||
*/
|
||||
// 提交登录信息
|
||||
submit () {
|
||||
this.$refs.loginForm.validate((valid) => {
|
||||
if (valid) {
|
||||
// 登录
|
||||
// 注意 这里的演示没有传验证码
|
||||
// 具体需要传递的数据请自行修改代码
|
||||
this.login({
|
||||
username: this.formLogin.username,
|
||||
password: this.formLogin.password
|
||||
})
|
||||
.then(() => {
|
||||
// 重定向对象不存在则返回顶层路径
|
||||
this.$router.replace(this.$route.query.redirect || '/')
|
||||
})
|
||||
} else {
|
||||
// 登录表单校验失败
|
||||
this.$message.error('表单校验失败，请检查')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page-login {
|
||||
@extend %unable-select;
|
||||
$backgroundColor: #F0F2F5;
|
||||
// ---
|
||||
background-color: $backgroundColor;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
// 层
|
||||
.page-login--layer {
|
||||
@extend %full;
|
||||
overflow: auto;
|
||||
}
|
||||
.page-login--layer-area {
|
||||
overflow: hidden;
|
||||
}
|
||||
// 时间
|
||||
.page-login--layer-time {
|
||||
font-size: 24em;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
// 登陆页面控件的容器
|
||||
.page-login--content {
|
||||
height: 100%;
|
||||
min-height: 500px;
|
||||
}
|
||||
// header
|
||||
.page-login--content-header {
|
||||
padding: 1em 0;
|
||||
.page-login--content-header-motto {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: $color-text-normal;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
// main
|
||||
.page-login--logo {
|
||||
width: 240px;
|
||||
margin-bottom: 2em;
|
||||
margin-top: -2em;
|
||||
}
|
||||
// 登录表单
|
||||
.page-login--form {
|
||||
width: 280px;
|
||||
// 卡片
|
||||
.el-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
// 登录按钮
|
||||
.button-login {
|
||||
width: 100%;
|
||||
}
|
||||
// 输入框左边的图表区域缩窄
|
||||
.el-input-group__prepend {
|
||||
padding: 0px 14px;
|
||||
}
|
||||
.login-code {
|
||||
height: 40px - 2px;
|
||||
display: block;
|
||||
margin: 0px -20px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
// 登陆选项
|
||||
.page-login--options {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 14px;
|
||||
color: $color-primary;
|
||||
margin-bottom: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.page-login--quick {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
// 快速选择用户面板
|
||||
.page-login--quick-user {
|
||||
@extend %flex-center-col;
|
||||
padding: 10px 0px;
|
||||
border-radius: 4px;
|
||||
&:hover {
|
||||
background-color: $color-bg;
|
||||
i {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
span {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 36px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
// footer
|
||||
.page-login--content-footer {
|
||||
padding: 1em 0;
|
||||
.page-login--content-footer-locales {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 15px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 .5em;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-login--content-footer-copyright {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
color: $color-text-normal;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
.page-login--content-footer-options {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
text-align: center;
|
||||
a {
|
||||
color: $color-text-normal;
|
||||
margin: 0 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 背景
|
||||
.circles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
li {
|
||||
position: absolute;
|
||||
display: block;
|
||||
list-style: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #FFF;
|
||||
animation: animate 25s linear infinite;
|
||||
bottom: -200px;
|
||||
@keyframes animate {
|
||||
0%{
|
||||
transform: translateY(0) rotate(0deg);
|
||||
opacity: 1;
|
||||
border-radius: 0;
|
||||
}
|
||||
100%{
|
||||
transform: translateY(-1000px) rotate(720deg);
|
||||
opacity: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
&:nth-child(1) {
|
||||
left: 15%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 5%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 12s;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 70%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 40%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 18s;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
left: 65%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
left: 75%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
&:nth-child(7) {
|
||||
left: 35%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
&:nth-child(8) {
|
||||
left: 50%;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
animation-delay: 15s;
|
||||
animation-duration: 45s;
|
||||
}
|
||||
&:nth-child(9) {
|
||||
left: 20%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
animation-delay: 2s;
|
||||
animation-duration: 35s;
|
||||
}
|
||||
&:nth-child(10) {
|
||||
left: 85%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
animation-delay: 0s;
|
||||
animation-duration: 11s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
1233019702184e7285e070b183c86ba6f3fb4be0
|
||||
Reference in New Issue
Block a user