清空
Former-commit-id: d88f8229de770edd6beb1483cb0ff29bf4d609cb
This commit is contained in:
liyang
-15
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public-class.scss';
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
import request from '@/plugin/axios'
|
||||
|
||||
export function httpGet (url, params = {}) {
|
||||
return request({
|
||||
url,
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function httpPost (url, data = {}) {
|
||||
return request({
|
||||
url,
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import request from '@/plugin/axios'
|
||||
|
||||
export function AccountLogin (data) {
|
||||
return request({
|
||||
url: '/login',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// 过渡动画 横向渐变
|
||||
.fade-transverse-leave-active,
|
||||
.fade-transverse-enter-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.fade-transverse-enter {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
.fade-transverse-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
// 过渡动画 缩放渐变
|
||||
.fade-scale-leave-active,
|
||||
.fade-scale-enter-active {
|
||||
transition: all .5s;
|
||||
}
|
||||
.fade-scale-enter {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
// 优化显示
|
||||
|
||||
html, body {
|
||||
margin: 0px;
|
||||
height: 100%;
|
||||
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
|
||||
#app {
|
||||
@extend %full;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
// element 样式补丁
|
||||
|
||||
.el-card {
|
||||
&.is-always-shadow {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
}
|
||||
&.is-hover-shadow {
|
||||
&:hover {
|
||||
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--horizontal {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.el-tabs__item:focus.is-active.is-focus:not(:active) {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
#nprogress {
|
||||
.bar {
|
||||
background: $color-primary !important;
|
||||
}
|
||||
.peg {
|
||||
box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
|
||||
}
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
@import 'public';
|
||||
|
||||
// 补丁 base
|
||||
@import '~@/assets/style/fixed/base.scss';
|
||||
// 补丁 element
|
||||
@import '~@/assets/style/fixed/element.scss';
|
||||
// 补丁 n-progress
|
||||
@import '~@/assets/style/fixed/n-progress.scss';
|
||||
|
||||
// 动画
|
||||
@import '~@/assets/style/animate/vue-transition.scss';
|
||||
|
||||
// 在这里写公用的class
|
||||
// 注意 这个文件里只写class
|
||||
// mixin等内容请在 public.scss 里书写
|
||||
|
||||
// 文字相关
|
||||
.#{$prefix}-text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// 浮动相关
|
||||
.#{$prefix}-fl {
|
||||
float: left;
|
||||
}
|
||||
.#{$prefix}-fr {
|
||||
float: right;
|
||||
}
|
||||
.#{$prefix}-clearfix:before,
|
||||
.#{$prefix}-clearfix:after {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.#{$prefix}-clearfix:after {
|
||||
clear: both
|
||||
}
|
||||
|
||||
// 边距相关
|
||||
$sizes: (0, 5, 10, 15, 20);
|
||||
|
||||
@for $index from 1 to 6 {
|
||||
.#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
|
||||
|
||||
.#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
|
||||
.#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
|
||||
}
|
||||
|
||||
// 快速使用
|
||||
|
||||
.#{$prefix}-m { margin: 20px !important; }
|
||||
.#{$prefix}-mt { margin-top: 20px !important; }
|
||||
.#{$prefix}-mr { margin-right: 20px !important; }
|
||||
.#{$prefix}-mb { margin-bottom: 20px !important; }
|
||||
.#{$prefix}-ml { margin-left: 20px !important; }
|
||||
|
||||
.#{$prefix}-p { padding: 20px !important; }
|
||||
.#{$prefix}-pt { padding-top: 20px !important; }
|
||||
.#{$prefix}-pr { padding-right: 20px !important; }
|
||||
.#{$prefix}-pb { padding-bottom: 20px !important; }
|
||||
.#{$prefix}-pl { padding-left: 20px !important; }
|
||||
@@ -1,44 +0,0 @@
|
||||
@import '~@/assets/style/unit/color.scss';
|
||||
|
||||
// 工具类名统一前缀
|
||||
$prefix: d2;
|
||||
|
||||
// 禁止用户选中 鼠标变为手形
|
||||
%unable-select {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// 填满父元素
|
||||
// 组要父元素 position: relative | absolute;
|
||||
%full {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
// flex 垂直水平居中
|
||||
%flex-center-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
%flex-center-col {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// 将元素模拟成卡片外观
|
||||
%card {
|
||||
border: 1px solid #dddee1;
|
||||
border-color: #e9eaec;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
@import './setting.scss';
|
||||
@import '../theme.scss';
|
||||
@@ -1,59 +0,0 @@
|
||||
// 主题名称
|
||||
$theme-name: 'd2';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #ebf1f6;
|
||||
// 主题背景图片遮罩
|
||||
$theme-bg-mask: rgba(#000, 0);
|
||||
|
||||
// container组件
|
||||
$theme-container-background-color: rgba(#FFF, 1);
|
||||
$theme-container-header-footer-background-color: #FFF;
|
||||
$theme-container-border-inner: 1px solid #cfd7e5;
|
||||
$theme-container-border-outer: 1px solid #cfd7e5;
|
||||
|
||||
$theme-multiple-page-control-color: $color-text-normal;
|
||||
$theme-multiple-page-control-color-active: #2f74ff;
|
||||
$theme-multiple-page-control-nav-prev-color: #cfd7e5;
|
||||
$theme-multiple-page-control-nav-next-color: #cfd7e5;
|
||||
$theme-multiple-page-control-border-color: #cfd7e5;
|
||||
$theme-multiple-page-control-border-color-active: #FFF;
|
||||
$theme-multiple-page-control-background-color: rgba(#000, .03);
|
||||
$theme-multiple-page-control-background-color-active: #FFF;
|
||||
|
||||
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||
$theme-menu-item-color-hover: #293849;
|
||||
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||
|
||||
// 顶栏上的文字颜色
|
||||
$theme-header-item-color: $color-text-normal;
|
||||
$theme-header-item-background-color: transparent;
|
||||
// 顶栏上的项目在 hover 时
|
||||
$theme-header-item-color-hover: #2f74ff;
|
||||
$theme-header-item-background-color-hover: rgba(#FFF, .5);
|
||||
// 顶栏上的项目在 focus 时
|
||||
$theme-header-item-color-focus: #2f74ff;
|
||||
$theme-header-item-background-color-focus: rgba(#FFF, .5);
|
||||
// 顶栏上的项目在 active 时
|
||||
$theme-header-item-color-active: #2f74ff;
|
||||
$theme-header-item-background-color-active: rgba(#FFF, .5);
|
||||
|
||||
// 侧边栏上的文字颜色
|
||||
$theme-aside-item-color: $color-text-normal;
|
||||
$theme-aside-item-background-color: transparent;
|
||||
// 侧边栏上的项目在 hover 时
|
||||
$theme-aside-item-color-hover: #2f74ff;
|
||||
$theme-aside-item-background-color-hover: rgba(#FFF, .5);
|
||||
// 侧边栏上的项目在 focus 时
|
||||
$theme-aside-item-color-focus: #2f74ff;
|
||||
$theme-aside-item-background-color-focus: rgba(#FFF, .5);
|
||||
// 侧边栏上的项目在 active 时
|
||||
$theme-aside-item-color-active: #2f74ff;
|
||||
$theme-aside-item-background-color-active: rgba(#FFF, .5);
|
||||
|
||||
// 侧边栏菜单为空的时候显示的元素
|
||||
$theme-aside-menu-empty-icon-color: $color-text-normal;
|
||||
$theme-aside-menu-empty-text-color: $color-text-normal;
|
||||
$theme-aside-menu-empty-background-color: rgba(#000, .03);
|
||||
$theme-aside-menu-empty-icon-color-hover: $color-text-main;
|
||||
$theme-aside-menu-empty-text-color-hover: $color-text-main;
|
||||
$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
|
||||
@@ -1,2 +0,0 @@
|
||||
@import './setting.scss';
|
||||
@import '../theme.scss';
|
||||
@@ -1,59 +0,0 @@
|
||||
// 主题名称
|
||||
$theme-name: 'line';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #f8f8f9;
|
||||
// 主题背景图片遮罩
|
||||
$theme-bg-mask: rgba(#000, 0);
|
||||
|
||||
// container组件
|
||||
$theme-container-background-color: rgba(#FFF, .8);
|
||||
$theme-container-header-footer-background-color: #FFF;
|
||||
$theme-container-border-inner: 1px solid $color-border-2;
|
||||
$theme-container-border-outer: 1px solid #cfd7e5;
|
||||
|
||||
$theme-multiple-page-control-color: #FFF;
|
||||
$theme-multiple-page-control-color-active: $color-text-normal;
|
||||
$theme-multiple-page-control-nav-prev-color: #cfd7e5;
|
||||
$theme-multiple-page-control-nav-next-color: #cfd7e5;
|
||||
$theme-multiple-page-control-border-color: #cfd7e5;
|
||||
$theme-multiple-page-control-border-color-active: #FFF;
|
||||
$theme-multiple-page-control-background-color: #cfd7e5;
|
||||
$theme-multiple-page-control-background-color-active: #FFF;
|
||||
|
||||
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||
$theme-menu-item-color-hover: #293849;
|
||||
$theme-menu-item-background-color-hover: #EFEFEF;
|
||||
|
||||
// 顶栏上的文字颜色
|
||||
$theme-header-item-color: $color-text-normal;
|
||||
$theme-header-item-background-color: transparent;
|
||||
// 顶栏上的项目在 hover 时
|
||||
$theme-header-item-color-hover: $color-text-main;
|
||||
$theme-header-item-background-color-hover: rgba(#000, .02);
|
||||
// 顶栏上的项目在 focus 时
|
||||
$theme-header-item-color-focus: $color-text-main;
|
||||
$theme-header-item-background-color-focus: rgba(#000, .02);
|
||||
// 顶栏上的项目在 active 时
|
||||
$theme-header-item-color-active: $color-text-main;
|
||||
$theme-header-item-background-color-active: rgba(#000, .03);
|
||||
|
||||
// 侧边栏上的文字颜色
|
||||
$theme-aside-item-color: $color-text-normal;
|
||||
$theme-aside-item-background-color: transparent;
|
||||
// 侧边栏上的项目在 hover 时
|
||||
$theme-aside-item-color-hover: $color-text-main;
|
||||
$theme-aside-item-background-color-hover: rgba(#000, .02);
|
||||
// 侧边栏上的项目在 focus 时
|
||||
$theme-aside-item-color-focus: $color-text-main;
|
||||
$theme-aside-item-background-color-focus: rgba(#000, .02);
|
||||
// 侧边栏上的项目在 active 时
|
||||
$theme-aside-item-color-active: $color-text-main;
|
||||
$theme-aside-item-background-color-active: rgba(#000, .03);
|
||||
|
||||
// 侧边栏菜单为空的时候显示的元素
|
||||
$theme-aside-menu-empty-icon-color: $color-text-normal;
|
||||
$theme-aside-menu-empty-text-color: $color-text-normal;
|
||||
$theme-aside-menu-empty-background-color: rgba(#000, .03);
|
||||
$theme-aside-menu-empty-icon-color-hover: $color-text-main;
|
||||
$theme-aside-menu-empty-text-color-hover: $color-text-main;
|
||||
$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
|
||||
@@ -1,8 +0,0 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
@import '~@/assets/style/theme/theme-base.scss';
|
||||
|
||||
@import '~@/assets/style/theme/d2/index.scss';
|
||||
@import '~@/assets/style/theme/line/index.scss';
|
||||
@import '~@/assets/style/theme/star/index.scss';
|
||||
@import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
|
||||
@import '~@/assets/style/theme/violet/index.scss';
|
||||
@@ -1,2 +0,0 @@
|
||||
@import './setting.scss';
|
||||
@import '../theme.scss';
|
||||
@@ -1,59 +0,0 @@
|
||||
// 主题名称
|
||||
$theme-name: 'star';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #EFF4F8;
|
||||
// 主题背景图片遮罩
|
||||
$theme-bg-mask: rgba(#000, .3);
|
||||
|
||||
// container组件
|
||||
$theme-container-background-color: rgba(#FFF, .9);
|
||||
$theme-container-header-footer-background-color: #FFF;
|
||||
$theme-container-border-inner: 1px solid $color-border-1;
|
||||
$theme-container-border-outer: 1px solid #114450;
|
||||
|
||||
$theme-multiple-page-control-color: #FFF;
|
||||
$theme-multiple-page-control-color-active: $color-text-normal;
|
||||
$theme-multiple-page-control-nav-prev-color: #FFF;
|
||||
$theme-multiple-page-control-nav-next-color: #FFF;
|
||||
$theme-multiple-page-control-border-color: #114450;
|
||||
$theme-multiple-page-control-border-color-active: #FFF;
|
||||
$theme-multiple-page-control-background-color: rgba(#FFF, .5);
|
||||
$theme-multiple-page-control-background-color-active: #FFF;
|
||||
|
||||
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||
$theme-menu-item-color-hover: #293849;
|
||||
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||
|
||||
// 顶栏上的文字颜色
|
||||
$theme-header-item-color: #FFF;
|
||||
$theme-header-item-background-color: transparent;
|
||||
// 顶栏上的项目在 hover 时
|
||||
$theme-header-item-color-hover: #FFF;
|
||||
$theme-header-item-background-color-hover: rgba(#000, .2);
|
||||
// 顶栏上的项目在 focus 时
|
||||
$theme-header-item-color-focus: #FFF;
|
||||
$theme-header-item-background-color-focus: rgba(#000, .2);
|
||||
// 顶栏上的项目在 active 时
|
||||
$theme-header-item-color-active: #FFF;
|
||||
$theme-header-item-background-color-active: rgba(#000, .3);
|
||||
|
||||
// 侧边栏上的文字颜色
|
||||
$theme-aside-item-color: #FFF;
|
||||
$theme-aside-item-background-color: transparent;
|
||||
// 侧边栏上的项目在 hover 时
|
||||
$theme-aside-item-color-hover: #FFF;
|
||||
$theme-aside-item-background-color-hover: rgba(#000, .2);
|
||||
// 侧边栏上的项目在 focus 时
|
||||
$theme-aside-item-color-focus: #FFF;
|
||||
$theme-aside-item-background-color-focus: rgba(#000, .2);
|
||||
// 侧边栏上的项目在 active 时
|
||||
$theme-aside-item-color-active: #FFF;
|
||||
$theme-aside-item-background-color-active: rgba(#000, .3);
|
||||
|
||||
// 侧边栏菜单为空的时候显示的元素
|
||||
$theme-aside-menu-empty-icon-color: #FFF;
|
||||
$theme-aside-menu-empty-text-color: #FFF;
|
||||
$theme-aside-menu-empty-background-color: rgba(#FFF, .2);
|
||||
$theme-aside-menu-empty-icon-color-hover: #FFF;
|
||||
$theme-aside-menu-empty-text-color-hover: #FFF;
|
||||
$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);
|
||||
@@ -1,445 +0,0 @@
|
||||
// 减小弹出菜单的项目高度
|
||||
.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-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 {
|
||||
// 多页面控制器
|
||||
.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;
|
||||
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,413 +0,0 @@
|
||||
// 每个主题特有的设置
|
||||
.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;
|
||||
background: $theme-aside-item-background-color-hover;
|
||||
i {
|
||||
color: $theme-aside-item-color-hover;
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
color: $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;
|
||||
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,2 +0,0 @@
|
||||
@import './setting.scss';
|
||||
@import '../theme.scss';
|
||||
@@ -1,59 +0,0 @@
|
||||
// 主题名称
|
||||
$theme-name: 'tomorrow-night-blue';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #002253;
|
||||
// 主题背景图片遮罩
|
||||
$theme-bg-mask: rgba(#000, 0);
|
||||
|
||||
// container组件
|
||||
$theme-container-background-color: rgba(#FFF, 1);
|
||||
$theme-container-header-footer-background-color: #FFF;
|
||||
$theme-container-border-inner: 1px solid $color-border-1;
|
||||
$theme-container-border-outer: 1px solid #002253;
|
||||
|
||||
$theme-multiple-page-control-color: #FFF;
|
||||
$theme-multiple-page-control-color-active: $color-text-normal;
|
||||
$theme-multiple-page-control-nav-prev-color: #FFF;
|
||||
$theme-multiple-page-control-nav-next-color: #FFF;
|
||||
$theme-multiple-page-control-border-color: #002253;
|
||||
$theme-multiple-page-control-border-color-active: #FFF;
|
||||
$theme-multiple-page-control-background-color: rgba(#FFF, .2);
|
||||
$theme-multiple-page-control-background-color-active: #FFF;
|
||||
|
||||
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||
$theme-menu-item-color-hover: #293849;
|
||||
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||
|
||||
// 顶栏上的文字颜色
|
||||
$theme-header-item-color: #FF929A;
|
||||
$theme-header-item-background-color: transparent;
|
||||
// 顶栏上的项目在 hover 时
|
||||
$theme-header-item-color-hover: #FFEBA4;
|
||||
$theme-header-item-background-color-hover: rgba(#FFF, .05);
|
||||
// 顶栏上的项目在 focus 时
|
||||
$theme-header-item-color-focus: #FFB870;
|
||||
$theme-header-item-background-color-focus: rgba(#FFF, .05);
|
||||
// 顶栏上的项目在 active 时
|
||||
$theme-header-item-color-active: #FFB870;
|
||||
$theme-header-item-background-color-active: rgba(#FFF, .05);
|
||||
|
||||
// 侧边栏上的文字颜色
|
||||
$theme-aside-item-color: #FF929A;
|
||||
$theme-aside-item-background-color: transparent;
|
||||
// 侧边栏上的项目在 hover 时
|
||||
$theme-aside-item-color-hover: #FFEBA4;
|
||||
$theme-aside-item-background-color-hover: rgba(#FFF, .05);
|
||||
// 侧边栏上的项目在 focus 时
|
||||
$theme-aside-item-color-focus: #FFB870;
|
||||
$theme-aside-item-background-color-focus: rgba(#FFF, .05);
|
||||
// 侧边栏上的项目在 active 时
|
||||
$theme-aside-item-color-active: #FFB870;
|
||||
$theme-aside-item-background-color-active: rgba(#FFF, .05);
|
||||
|
||||
// 侧边栏菜单为空的时候显示的元素
|
||||
$theme-aside-menu-empty-icon-color: #FFB870;
|
||||
$theme-aside-menu-empty-text-color: #FFB870;
|
||||
$theme-aside-menu-empty-background-color: rgba(#FFF, .1);
|
||||
$theme-aside-menu-empty-icon-color-hover: #FFEBA4;
|
||||
$theme-aside-menu-empty-text-color-hover: #FFEBA4;
|
||||
$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);
|
||||
@@ -1,9 +0,0 @@
|
||||
@import './setting.scss';
|
||||
@import '../theme.scss';
|
||||
|
||||
.theme-#{$theme-name} {
|
||||
.d2-layout-header-aside-group {
|
||||
background: #bc00e3;
|
||||
background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%);
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
// 主题名称
|
||||
$theme-name: 'violet';
|
||||
// 主题背景颜色
|
||||
$theme-bg-color: #000;
|
||||
// 主题背景图片遮罩
|
||||
$theme-bg-mask: rgba(#000, 0);
|
||||
|
||||
// container组件
|
||||
$theme-container-background-color: #FFF;
|
||||
$theme-container-header-footer-background-color: #FFF;
|
||||
$theme-container-border-inner: 1px solid $color-border-2;
|
||||
$theme-container-border-outer: 1px solid #8C40E2;
|
||||
|
||||
$theme-multiple-page-control-color: #FFF;
|
||||
$theme-multiple-page-control-color-active: $color-text-normal;
|
||||
$theme-multiple-page-control-nav-prev-color: #FFF;
|
||||
$theme-multiple-page-control-nav-next-color: #FFF;
|
||||
$theme-multiple-page-control-border-color: #8C40E2;
|
||||
$theme-multiple-page-control-border-color-active: #FFF;
|
||||
$theme-multiple-page-control-background-color: rgba(#FFF, .3);
|
||||
$theme-multiple-page-control-background-color-active: #FFF;
|
||||
|
||||
// 顶栏和侧边栏中展开的菜单 hover 状态下
|
||||
$theme-menu-item-color-hover: #293849;
|
||||
$theme-menu-item-background-color-hover: #ecf5ff;
|
||||
|
||||
// 顶栏上的文字颜色
|
||||
$theme-header-item-color: #FFF;
|
||||
$theme-header-item-background-color: transparent;
|
||||
// 顶栏上的项目在 hover 时
|
||||
$theme-header-item-color-hover: #FFF;
|
||||
$theme-header-item-background-color-hover: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
|
||||
// 顶栏上的项目在 focus 时
|
||||
$theme-header-item-color-focus: #FFF;
|
||||
$theme-header-item-background-color-focus: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
|
||||
// 顶栏上的项目在 active 时
|
||||
$theme-header-item-color-active: #FFF;
|
||||
$theme-header-item-background-color-active: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
|
||||
|
||||
// 侧边栏上的文字颜色
|
||||
$theme-aside-item-color: #FFF;
|
||||
$theme-aside-item-background-color: transparent;
|
||||
// 侧边栏上的项目在 hover 时
|
||||
$theme-aside-item-color-hover: #FFF;
|
||||
$theme-aside-item-background-color-hover: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
|
||||
// 侧边栏上的项目在 focus 时
|
||||
$theme-aside-item-color-focus: #FFF;
|
||||
$theme-aside-item-background-color-focus: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
|
||||
// 侧边栏上的项目在 active 时
|
||||
$theme-aside-item-color-active: #FFF;
|
||||
$theme-aside-item-background-color-active: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
|
||||
|
||||
// 侧边栏菜单为空的时候显示的元素
|
||||
$theme-aside-menu-empty-icon-color: #FFF;
|
||||
$theme-aside-menu-empty-text-color: #FFF;
|
||||
$theme-aside-menu-empty-background-color: rgba(#000, .1);
|
||||
$theme-aside-menu-empty-icon-color-hover: #FFF;
|
||||
$theme-aside-menu-empty-text-color-hover: #FFF;
|
||||
$theme-aside-menu-empty-background-color-hover: rgba(#000, .15);
|
||||
@@ -1,23 +0,0 @@
|
||||
// 主色
|
||||
$color-primary: #409EFF;
|
||||
|
||||
// 辅助色
|
||||
$color-info: #909399;
|
||||
$color-success: #67C23A;
|
||||
$color-warning: #E6A23C;
|
||||
$color-danger: #F56C6C;
|
||||
|
||||
// 文字
|
||||
$color-text-main: #303133;
|
||||
$color-text-normal: #606266;
|
||||
$color-text-sub: #909399;
|
||||
$color-text-placehoder: #C0C4CC;
|
||||
|
||||
// 边框
|
||||
$color-border-1: #DCDFE6;
|
||||
$color-border-2: #E4E7ED;
|
||||
$color-border-3: #EBEEF5;
|
||||
$color-border-4: #F2F6FC;
|
||||
|
||||
// 背景
|
||||
$color-bg: #f8f8f9;
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 7.8 KiB |
@@ -1,13 +0,0 @@
|
||||
|
||||
<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<desc>D2Admin</desc>
|
||||
<defs></defs>
|
||||
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="logo-no-shadow" transform="translate(-3.000000, -3.000000)">
|
||||
<path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
|
||||
<path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
|
||||
<path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
|
||||
<path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@@ -1,7 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
const req = require.context('./icons', false, /\.svg$/)
|
||||
const iconMap = requireAll(req)
|
||||
|
||||
Vue.prototype.$IconSvg = iconMap.map(e => e.default.id.slice(3))
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-card-bs">
|
||||
<div v-if="$slots.header" class="d2-container-card-bs__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-card-bs__body" ref="wrapper">
|
||||
<div class="d2-container-card-bs__body-wrapper-inner">
|
||||
<div class="d2-container-card-bs__body-card">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-card-bs__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bs from './mixins/bs'
|
||||
export default {
|
||||
name: 'd2-container-card-bs',
|
||||
mixins: [
|
||||
bs
|
||||
]
|
||||
}
|
||||
</script>
|
||||
@@ -1,21 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-card">
|
||||
<div v-if="$slots.header" class="d2-container-card__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-card__body">
|
||||
<div class="d2-container-card__body-card">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-card__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-container-card'
|
||||
}
|
||||
</script>
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-full-bs">
|
||||
<div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-full-bs__body" ref="wrapper">
|
||||
<div class="d2-container-full-bs__body-wrapper-inner">
|
||||
<slot/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bs from './mixins/bs'
|
||||
export default {
|
||||
name: 'd2-container-card-bs',
|
||||
mixins: [
|
||||
bs
|
||||
]
|
||||
}
|
||||
</script>
|
||||
@@ -1,19 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-full">
|
||||
<div v-if="$slots.header" class="d2-container-full__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-full__body">
|
||||
<slot/>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-container-full'
|
||||
}
|
||||
</script>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-ghost-bs">
|
||||
<div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-ghost-bs__body" ref="wrapper">
|
||||
<slot/>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bs from './mixins/bs'
|
||||
export default {
|
||||
name: 'd2-container-card-bs',
|
||||
mixins: [
|
||||
bs
|
||||
]
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-container-ghost">
|
||||
<div v-if="$slots.header" class="d2-container-ghost__header" ref="header">
|
||||
<slot name="header"/>
|
||||
</div>
|
||||
<div class="d2-container-ghost__body">
|
||||
<slot/>
|
||||
</div>
|
||||
<div v-if="$slots.footer" class="d2-container-ghost__footer" ref="footer">
|
||||
<slot name="footer"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,41 +0,0 @@
|
||||
import BScroll from 'better-scroll'
|
||||
export default {
|
||||
props: {
|
||||
betterScrollOptions: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$refs.wrapper, Object.assign({
|
||||
mouseWheel: true,
|
||||
scrollbar: {
|
||||
fade: true,
|
||||
interactive: false
|
||||
}
|
||||
}, this.betterScrollOptions))
|
||||
},
|
||||
scrollDestroy () {
|
||||
// https://github.com/d2-projects/d2-admin/issues/75
|
||||
try {
|
||||
this.BS.destroy()
|
||||
} catch (e) {
|
||||
delete this.BS
|
||||
this.BS = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<div class="container-component" ref="container">
|
||||
<!-- [card] 卡片容器 -->
|
||||
<d2-container-card v-if="type === 'card' && !betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-card>
|
||||
<!-- [card] 卡片容器 滚动优化 -->
|
||||
<d2-container-card-bs v-bind="$attrs" v-if="type === 'card' && betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-card-bs>
|
||||
<!-- [ghost] 隐形容器 -->
|
||||
<d2-container-ghost v-if="type === 'ghost' && !betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-ghost>
|
||||
<!-- [ghost] 隐形容器 滚动优化 -->
|
||||
<d2-container-ghost-bs v-bind="$attrs" v-if="type === 'ghost' && betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-ghost-bs>
|
||||
<!-- [container-full] 填充 -->
|
||||
<d2-container-full v-if="type === 'full' && !betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full>
|
||||
<!-- [container-full-bs] 填充 滚动优化 -->
|
||||
<d2-container-full-bs v-bind="$attrs" v-if="type === 'full' && betterScroll">
|
||||
<slot v-if="$slots.header" name="header" slot="header"/>
|
||||
<slot/>
|
||||
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
||||
</d2-container-full-bs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件
|
||||
import d2ContainerFull from './components/d2-container-full.vue'
|
||||
import d2ContainerFullBs from './components/d2-container-full-bs.vue'
|
||||
import d2ContainerGhost from './components/d2-container-ghost.vue'
|
||||
import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
|
||||
import d2ContainerCard from './components/d2-container-card.vue'
|
||||
import d2ContainerCardBs from './components/d2-container-card-bs.vue'
|
||||
export default {
|
||||
name: 'd2-container',
|
||||
components: {
|
||||
'd2-container-full': d2ContainerFull,
|
||||
'd2-container-full-bs': d2ContainerFullBs,
|
||||
'd2-container-ghost': d2ContainerGhost,
|
||||
'd2-container-ghost-bs': d2ContainerGhostBs,
|
||||
'd2-container-card': d2ContainerCard,
|
||||
'd2-container-card-bs': d2ContainerCardBs
|
||||
},
|
||||
props: {
|
||||
// 容器样式
|
||||
type: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'full'
|
||||
},
|
||||
// 滚动优化
|
||||
betterScroll: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<svg aria-hidden="true">
|
||||
<use :xlink:href="icon"></use>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-icon-svg',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
icon () {
|
||||
return `#d2-${this.name}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<i class="fa" :class="`fa-${name}`" aria-hidden="true"></i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import './font-awesome-4.7.0/css/font-awesome.min.css'
|
||||
export default {
|
||||
name: 'd2-icon',
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'font-awesome'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
@@ -1,56 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-page-cover">
|
||||
<div class="d2-page-cover__logo">
|
||||
<slot/>
|
||||
</div>
|
||||
<p class="d2-page-cover__title">{{title}}</p>
|
||||
<p class="d2-page-cover__sub-title d2-mt-0">{{subTitle}}</p>
|
||||
<slot name="footer"/>
|
||||
<a target="blank" href="https://github.com/d2-projects/d2-admin">
|
||||
<img
|
||||
style="position: absolute; top: 0; right: 0; border: 0; width: 150px;"
|
||||
src="./image/darkblue@2x.png"
|
||||
alt="Fork me on GitHub">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'Title'
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'subTitle'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.d2-page-cover {
|
||||
@extend %full;
|
||||
@extend %unable-select;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.d2-page-cover__logo {
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.d2-page-cover__title {
|
||||
color: $color-text-main;
|
||||
}
|
||||
.d2-page-cover__sub-title {
|
||||
color: $color-text-sub;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
|
||||
import d2Container from './d2-container'
|
||||
|
||||
// 注意 有些组件使用异步加载会有影响
|
||||
Vue.component('d2-container', d2Container)
|
||||
Vue.component('d2-page-cover', () => import('./d2-page-cover'))
|
||||
Vue.component('d2-icon', () => import('./d2-icon'))
|
||||
Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
|
||||
@@ -1,17 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
||||
import cn from './lang/cn'
|
||||
import ja from './lang/ja'
|
||||
import en from './lang/en'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
export default new VueI18n({
|
||||
locale: 'cn',
|
||||
messages: {
|
||||
cn,
|
||||
ja,
|
||||
en
|
||||
}
|
||||
})
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
pub: {
|
||||
pageHeader: {
|
||||
demo: '示例'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
pub: {
|
||||
pageHeader: {
|
||||
demo: 'Demo'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
export default {
|
||||
pub: {
|
||||
pageHeader: {
|
||||
demo: 'サンプル'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<el-menu-item :index="menu.path || uniqueId">
|
||||
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
|
||||
<i v-else class="fa fa-file-o"></i>
|
||||
<span slot="title">{{menu.title || '未命名菜单'}}</span>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
export default {
|
||||
name: 'd2-layout-header-aside-menu-item',
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
uniqueId: uniqueId('d2-menu-empty-')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<el-submenu :index="menu.path || uniqueId">
|
||||
<template slot="title">
|
||||
<i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
|
||||
<d2-icon-svg v-else-if="menu.iconSvg" :name="menu.iconSvg"/>
|
||||
<i v-else class="fa fa-folder-o"></i>
|
||||
<span slot="title">{{menu.title}}</span>
|
||||
</template>
|
||||
<template v-for="(child, childIndex) in menu.children">
|
||||
<d2-layout-header-aside-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
|
||||
<d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uniqueId } from 'lodash'
|
||||
// 组件
|
||||
import d2LayoutMainMenuItem from '../menu-item'
|
||||
|
||||
export default {
|
||||
name: 'd2-layout-header-aside-menu-sub',
|
||||
components: {
|
||||
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem
|
||||
},
|
||||
props: {
|
||||
menu: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
uniqueId: uniqueId('d2-menu-empty-')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,61 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-contentmenu-list"
|
||||
@click="rowClick">
|
||||
<div
|
||||
v-for="item in menulist"
|
||||
:key="item.value"
|
||||
:data-value="item.value"
|
||||
class="d2-contentmenu-item"
|
||||
flex="cross:center main:center">
|
||||
<d2-icon
|
||||
v-if="item.icon"
|
||||
:name="item.icon"/>
|
||||
<div
|
||||
class="d2-contentmenu-item-title"
|
||||
flex-box="1">
|
||||
{{item.title}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-contextmenu-list',
|
||||
props: {
|
||||
menulist: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
rowClick (event) {
|
||||
let target = event.target
|
||||
while (!target.dataset.value) {
|
||||
target = target.parentNode
|
||||
}
|
||||
this.$emit('rowClick', target.dataset.value)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.d2-contentmenu-list {
|
||||
.d2-contentmenu-item {
|
||||
padding: 8px 20px 8px 15px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #ecf5ff;
|
||||
color: #66b1ff;
|
||||
}
|
||||
.d2-contentmenu-item-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,71 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-contextmenu"
|
||||
v-show="flag"
|
||||
:style="style">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-contextmenu',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
x: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
y: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
flag: {
|
||||
get () {
|
||||
if (this.visible) {
|
||||
// 注册全局监听事件 [ 目前只考虑鼠标解除触发 ]
|
||||
window.addEventListener('mousedown', this.watchContextmenu)
|
||||
}
|
||||
return this.visible
|
||||
},
|
||||
set (newVal) {
|
||||
this.$emit('update:visible', newVal)
|
||||
}
|
||||
},
|
||||
style () {
|
||||
return {
|
||||
left: this.x + 'px',
|
||||
top: this.y + 'px',
|
||||
display: this.visible ? 'block' : 'none '
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
watchContextmenu (event) {
|
||||
if (!this.$el.contains(event.target) || event.button !== 0) this.flag = false
|
||||
window.removeEventListener('mousedown', this.watchContextmenu)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 将菜单放置到body下
|
||||
document.querySelector('body').appendChild(this.$el)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.d2-contextmenu {
|
||||
position: absolute;
|
||||
padding: 5px 0;
|
||||
z-index: 2018;
|
||||
background: #FFF;
|
||||
border: 1px solid #cfd7e5;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
</style>
|
||||
-30
@@ -1,30 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-error-log-list__expand"
|
||||
:class="className">
|
||||
<p class="d2-error-log-list__expand-title">{{title}}</p>
|
||||
<p class="d2-error-log-list__expand-value">{{value === '' ? '无数据' : value}}</p>
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
default: 'log'
|
||||
},
|
||||
title: {
|
||||
default: ''
|
||||
},
|
||||
value: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
className () {
|
||||
return this.type === 'log' ? 'd2-error-log-list__expand--log' : 'd2-error-log-list__expand--error'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,195 +0,0 @@
|
||||
<template>
|
||||
<el-table
|
||||
:data="logReverse"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
size="mini">
|
||||
|
||||
<el-table-column type="expand">
|
||||
<div slot-scope="props" class="d2-error-log-list__expand-group">
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="类型"
|
||||
:value="props.row.type === 'log' ? '日志' : '异常'"/>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="内容"
|
||||
:value="props.row.info"/>
|
||||
<expand-item
|
||||
v-if="props.row.type === 'error'"
|
||||
type="error"
|
||||
title="报错组件"
|
||||
:value="get(props.row.vm, '$vnode.tag', '')"/>
|
||||
<expand-item
|
||||
v-if="props.row.type === 'error'"
|
||||
type="error"
|
||||
title="错误名称"
|
||||
:value="get(props.row.err, 'name', '')"/>
|
||||
<expand-item
|
||||
v-if="props.row.type === 'error'"
|
||||
type="error"
|
||||
title="错误信息"
|
||||
:value="get(props.row.err, 'message', '')"/>
|
||||
<expand-item
|
||||
v-if="props.row.type === 'error'"
|
||||
type="error"
|
||||
title="错误堆栈"
|
||||
value="见下">
|
||||
<div style="overflow: auto;">
|
||||
<pre>{{stackBeautify(props.row.err)}}</pre>
|
||||
</div>
|
||||
</expand-item>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="用户名"
|
||||
:value="get(props.row.user, 'name', '')"/>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="uuid"
|
||||
:value="props.row.uuid"/>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="token"
|
||||
:value="props.row.token"/>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="页面地址"
|
||||
:value="props.row.url"/>
|
||||
<expand-item
|
||||
:type="props.row.type"
|
||||
title="时间"
|
||||
:value="props.row.time"/>
|
||||
</div>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="类型"
|
||||
width="80px"
|
||||
align="center"
|
||||
:filters="[
|
||||
{ text: '日志', value: 'log' },
|
||||
{ text: '异常', value: 'error' }
|
||||
]"
|
||||
:filter-multiple="false"
|
||||
:filter-method="filterType"
|
||||
filter-placement="bottom">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.type === 'error'"
|
||||
size="mini"
|
||||
type="danger">
|
||||
<d2-icon name="bug"/> Bug
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-else
|
||||
size="mini"
|
||||
type="info">
|
||||
<d2-icon name="dot-circle-o"/> Log
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="地址"
|
||||
prop="url"
|
||||
width="140px"
|
||||
:show-overflow-tooltip="true">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="内容"
|
||||
prop="info"
|
||||
:show-overflow-tooltip="true">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="错误类型"
|
||||
width="140px"
|
||||
:show-overflow-tooltip="true">
|
||||
<template
|
||||
slot-scope="scope">
|
||||
{{get(scope.row.err, 'name', '')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
label="错误信息"
|
||||
width="300px">
|
||||
<template
|
||||
slot-scope="scope">
|
||||
{{get(scope.row.err, 'message', '')}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import { get } from 'lodash'
|
||||
import ExpandItem from './components/ExpandItem'
|
||||
export default {
|
||||
name: 'd2-error-log-list',
|
||||
components: {
|
||||
ExpandItem
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin', {
|
||||
logList: state => state.log.list
|
||||
}),
|
||||
logReverse () {
|
||||
// 直接 reverse 的话有点问题
|
||||
const res = []
|
||||
const loglength = this.logList.length
|
||||
this.logList.forEach((log, index) => {
|
||||
res.push(this.logList[loglength - 1 - index])
|
||||
})
|
||||
return res
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
get,
|
||||
filterType (value, row) {
|
||||
return row.type === value
|
||||
},
|
||||
stackBeautify (err) {
|
||||
if (!err) {
|
||||
return ''
|
||||
}
|
||||
return err.stack
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/assets/style/public.scss';
|
||||
.d2-error-log-list__expand-group {
|
||||
.d2-error-log-list__expand {
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.d2-error-log-list__expand-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.d2-error-log-list__expand-value {
|
||||
font-size: 12px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
.d2-error-log-list__expand--log {
|
||||
border-left: 4px solid $color-info;
|
||||
}
|
||||
.d2-error-log-list__expand--error {
|
||||
border-left: 4px solid $color-danger;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,82 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="tooltipContent"
|
||||
placement="bottom">
|
||||
<el-button
|
||||
class="d2-ml-0 d2-mr btn-text can-hover"
|
||||
type="text"
|
||||
@click="handleClick">
|
||||
<el-badge
|
||||
v-if="logLength > 0"
|
||||
:max="99"
|
||||
:value="logLengthError"
|
||||
:is-dot="logLengthError === 0">
|
||||
<d2-icon
|
||||
:name="logLengthError === 0 ? 'dot-circle-o' : 'bug'"
|
||||
style="font-size: 20px"/>
|
||||
</el-badge>
|
||||
<d2-icon
|
||||
v-else
|
||||
name="dot-circle-o"
|
||||
style="font-size: 20px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-dialog
|
||||
:title="tooltipContent"
|
||||
:fullscreen="true"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true">
|
||||
<div class="d2-mb-10">
|
||||
<el-button type="danger" size="mini" @click="handleLogClean">
|
||||
<d2-icon name="trash-o"/>
|
||||
清空
|
||||
</el-button>
|
||||
</div>
|
||||
<d2-error-log-list/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
import D2ErrorLogList from './components/list'
|
||||
export default {
|
||||
components: {
|
||||
D2ErrorLogList
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('d2admin', {
|
||||
logLength: 'log/length',
|
||||
logLengthError: 'log/lengthError'
|
||||
}),
|
||||
tooltipContent () {
|
||||
return this.logLength === 0
|
||||
? '没有日志或异常'
|
||||
: `${this.logLength} 条日志${this.logLengthError > 0
|
||||
? ` | 包含 ${this.logLengthError} 个异常`
|
||||
: ''}`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations('d2admin/log', [
|
||||
'clean'
|
||||
]),
|
||||
handleClick () {
|
||||
if (this.logLength > 0) {
|
||||
this.dialogVisible = true
|
||||
}
|
||||
},
|
||||
handleLogClean () {
|
||||
this.dialogVisible = false
|
||||
this.clean()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="active ? '退出全屏' : '全屏'"
|
||||
placement="bottom">
|
||||
<el-button class="d2-mr btn-text can-hover" type="text" @click="toggle">
|
||||
<d2-icon v-if="active" name="compress"/>
|
||||
<d2-icon v-else name="arrows-alt" style="font-size: 16px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState('d2admin/fullscreen', [
|
||||
'active'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/fullscreen', [
|
||||
'toggle'
|
||||
])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,15 +0,0 @@
|
||||
<template>
|
||||
<el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
|
||||
<d2-icon name="search" style="font-size: 18px;"/>
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,67 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown placement="bottom" size="small" @command="handleChange">
|
||||
<el-button class="d2-mr btn-text can-hover" type="text">
|
||||
<d2-icon name="font" style="font-size: 16px;"/>
|
||||
</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="default">
|
||||
<d2-icon :name="iconName('default')" class="d2-mr-5"/>默认
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="medium">
|
||||
<d2-icon :name="iconName('medium')" class="d2-mr-5"/>中
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="small">
|
||||
<d2-icon :name="iconName('small')" class="d2-mr-5"/>小
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="mini">
|
||||
<d2-icon :name="iconName('mini')" class="d2-mr-5"/>最小
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapMutations, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: 'd2-header-size',
|
||||
computed: {
|
||||
...mapState('d2admin/size', [
|
||||
'value'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
// 注意 这里是关键
|
||||
// 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
|
||||
value: {
|
||||
handler (val) {
|
||||
if (this.$ELEMENT.size !== val) {
|
||||
// 设置 element 全局尺寸
|
||||
this.$ELEMENT.size = val
|
||||
// 清空缓存设置
|
||||
this.pageKeepAliveClean()
|
||||
// 刷新此页面
|
||||
const { path, query } = this.$route
|
||||
this.$router.replace({
|
||||
path: '/redirect/' + JSON.stringify({ path, query })
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
pageKeepAliveClean: 'd2admin/page/keepAliveClean'
|
||||
}),
|
||||
...mapActions({
|
||||
sizeSet: 'd2admin/size/set'
|
||||
}),
|
||||
handleChange (value) {
|
||||
this.sizeSet(value)
|
||||
},
|
||||
iconName (name) {
|
||||
return name === this.value ? 'dot-circle-o' : 'circle-o'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<el-table :data="list" v-bind="table">
|
||||
<el-table-column prop="title" align="center" width="160"/>
|
||||
<el-table-column label="预览" width="120">
|
||||
<div
|
||||
slot-scope="scope"
|
||||
class="theme-preview"
|
||||
:style="{'backgroundImage': `url(${$baseUrl}${scope.row.preview})`}">
|
||||
</div>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-if="activeName === scope.row.name" type="success" icon="el-icon-check" round>已激活</el-button>
|
||||
<el-button v-else round @click="handleSelectTheme(scope.row.name)">使用</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
name: 'd2-theme-list',
|
||||
data () {
|
||||
return {
|
||||
table: {
|
||||
showHeader: false,
|
||||
border: true
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/theme', [
|
||||
'list',
|
||||
'activeName'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/theme', [
|
||||
'set'
|
||||
]),
|
||||
handleSelectTheme (name) {
|
||||
this.set(name)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.theme-preview {
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
border-radius: 4px;
|
||||
background-size: cover;
|
||||
border: 1px solid $color-border-1;
|
||||
}
|
||||
</style>
|
||||
@@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="主题" placement="bottom">
|
||||
<el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
|
||||
<d2-icon name="diamond" style="font-size: 16px"/>
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
<el-dialog title="主题" width="600px" :visible.sync="dialogVisible" :append-to-body="true">
|
||||
<d2-theme-list style="margin-top: -25px;"/>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import themeList from './components/d2-theme-list'
|
||||
export default {
|
||||
components: {
|
||||
'd2-theme-list': themeList
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<el-dropdown size="small" class="d2-mr">
|
||||
<span class="btn-text">你好 {{info.name}}</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="logOff">
|
||||
<d2-icon name="power-off" class="d2-mr-5"/>
|
||||
注销
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
computed: {
|
||||
...mapState('d2admin/user', [
|
||||
'info'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/account', [
|
||||
'logout'
|
||||
]),
|
||||
/**
|
||||
* @description 登出
|
||||
*/
|
||||
logOff () {
|
||||
this.logout({
|
||||
vm: this,
|
||||
confirm: true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,122 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-theme-header-menu" ref="page" :class="{'is-scrollable': isScroll}" flex="cross:center">
|
||||
<div class="d2-theme-header-menu__content" ref="content" flex-box="1" flex>
|
||||
<div class="d2-theme-header-menu__scroll" ref="scroll" flex-box="0" :style="'transform: translateX(' + currentTranslateX + 'px);'">
|
||||
<el-menu mode="horizontal" :default-active="active" @select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in header">
|
||||
<d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isScroll" class="d2-theme-header-menu__prev" flex-box="0" @click="scroll('left')" flex="main:center cross:center">
|
||||
<i class="el-icon-arrow-left"></i>
|
||||
</div>
|
||||
<div v-if="isScroll" class="d2-theme-header-menu__next" flex-box="0" @click="scroll('right')" flex="cross:center">
|
||||
<i class="el-icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { throttle } from 'lodash'
|
||||
import { mapState } from 'vuex'
|
||||
import menuMixin from '../mixin/menu'
|
||||
import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
|
||||
import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
|
||||
export default {
|
||||
name: 'd2-layout-header-aside-menu-header',
|
||||
mixins: [
|
||||
menuMixin
|
||||
],
|
||||
components: {
|
||||
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
|
||||
'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/menu', [
|
||||
'header'
|
||||
])
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: '',
|
||||
isScroll: false,
|
||||
scrollWidth: 0,
|
||||
contentWidth: 0,
|
||||
currentTranslateX: 0,
|
||||
throttledCheckScroll: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.matched': {
|
||||
handler (val) {
|
||||
this.active = val[val.length - 1].path
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scroll (direction) {
|
||||
if (direction === 'left') {
|
||||
// 向右滚动
|
||||
this.currentTranslateX = 0
|
||||
} else {
|
||||
// 向左滚动
|
||||
if (this.contentWidth * 2 - this.currentTranslateX <= this.scrollWidth) {
|
||||
this.currentTranslateX -= this.contentWidth
|
||||
} else {
|
||||
this.currentTranslateX = this.contentWidth - this.scrollWidth
|
||||
}
|
||||
}
|
||||
},
|
||||
checkScroll () {
|
||||
let contentWidth = this.$refs.content.clientWidth
|
||||
let scrollWidth = this.$refs.scroll.clientWidth
|
||||
if (this.isScroll) {
|
||||
// 页面依旧允许滚动的情况，需要更新width
|
||||
if (this.contentWidth - this.scrollWidth === this.currentTranslateX) {
|
||||
// currentTranslateX 也需要相应变化【在右端到头的情况时】
|
||||
this.currentTranslateX = contentWidth - scrollWidth
|
||||
// 快速的滑动依旧存在判断和计算时对应的contentWidth变成正数，所以需要限制一下
|
||||
if (this.currentTranslateX > 0) {
|
||||
this.currentTranslateX = 0
|
||||
}
|
||||
}
|
||||
// 更新元素数据
|
||||
this.contentWidth = contentWidth
|
||||
this.scrollWidth = scrollWidth
|
||||
// 判断何时滚动消失: 当scroll > content
|
||||
if (contentWidth > scrollWidth) {
|
||||
this.isScroll = false
|
||||
}
|
||||
}
|
||||
// 判断何时滚动出现: 当scroll < content
|
||||
if (!this.isScroll && contentWidth < scrollWidth) {
|
||||
this.isScroll = true
|
||||
// 注意，当isScroll变为true，对应的元素盒子大小会发生变化
|
||||
this.$nextTick(() => {
|
||||
contentWidth = this.$refs.content.clientWidth
|
||||
scrollWidth = this.$refs.scroll.clientWidth
|
||||
this.contentWidth = contentWidth
|
||||
this.scrollWidth = scrollWidth
|
||||
this.currentTranslateX = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 初始化判断
|
||||
// 默认判断父元素和子元素的大小，以确定初始情况是否显示滚动
|
||||
this.checkScroll()
|
||||
// 全局窗口变化监听，判断父元素和子元素的大小，从而控制isScroll的开关
|
||||
this.throttledCheckScroll = throttle(this.checkScroll, 300)
|
||||
window.addEventListener('resize', this.throttledCheckScroll)
|
||||
},
|
||||
beforeDestroy () {
|
||||
// 取消监听
|
||||
window.removeEventListener('resize', this.throttledCheckScroll)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,98 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-layout-header-aside-menu-side">
|
||||
<el-menu
|
||||
:collapse="asideCollapse"
|
||||
:unique-opened="true"
|
||||
:default-active="active"
|
||||
ref="menu"
|
||||
@select="handleMenuSelect">
|
||||
<template v-for="(menu, menuIndex) in aside">
|
||||
<d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
|
||||
<d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
|
||||
</template>
|
||||
</el-menu>
|
||||
<div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
|
||||
<d2-icon name="inbox"/>
|
||||
<span>没有侧栏菜单</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import menuMixin from '../mixin/menu'
|
||||
import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
|
||||
import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
|
||||
import BScroll from 'better-scroll'
|
||||
export default {
|
||||
name: 'd2-layout-header-aside-menu-side',
|
||||
mixins: [
|
||||
menuMixin
|
||||
],
|
||||
components: {
|
||||
'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
|
||||
'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
active: '',
|
||||
asideHeight: 300,
|
||||
BS: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/menu', [
|
||||
'aside',
|
||||
'asideCollapse'
|
||||
])
|
||||
},
|
||||
watch: {
|
||||
// 折叠和展开菜单的时候销毁 better scroll
|
||||
asideCollapse (val) {
|
||||
this.scrollDestroy()
|
||||
setTimeout(() => {
|
||||
this.scrollInit()
|
||||
}, 500)
|
||||
},
|
||||
// 监听路由 控制侧边栏激活状态
|
||||
'$route.matched': {
|
||||
handler (val) {
|
||||
this.active = val[val.length - 1].path
|
||||
this.$nextTick(() => {
|
||||
if (this.aside.length > 0) {
|
||||
this.$refs.menu.activeIndex = this.active
|
||||
}
|
||||
})
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.scrollInit()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.scrollDestroy()
|
||||
},
|
||||
methods: {
|
||||
scrollInit () {
|
||||
this.BS = new BScroll(this.$el, {
|
||||
mouseWheel: true
|
||||
// 如果你愿意可以打开显示滚动条
|
||||
// scrollbar: {
|
||||
// fade: true,
|
||||
// interactive: false
|
||||
// }
|
||||
})
|
||||
},
|
||||
scrollDestroy () {
|
||||
// https://github.com/d2-projects/d2-admin/issues/75
|
||||
try {
|
||||
this.BS.destroy()
|
||||
} catch (e) {
|
||||
delete this.BS
|
||||
this.BS = null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,17 +0,0 @@
|
||||
import util from '@/libs/util.js'
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleMenuSelect (index, indexPath) {
|
||||
if (/^d2-menu-empty-\d+$/.test(index) || index === undefined) {
|
||||
this.$message.warning('临时菜单')
|
||||
} else if (/^https:\/\/|http:\/\//.test(index)) {
|
||||
util.open(index)
|
||||
} else {
|
||||
this.$router.push({
|
||||
path: index
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
-105
@@ -1,105 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-panel-search-item" :class="hoverMode ? 'can-hover' : ''" flex>
|
||||
<div class="d2-panel-search-item__icon" flex-box="0">
|
||||
<div class="d2-panel-search-item__icon-box" flex="main:center cross:center">
|
||||
<d2-icon v-if="item.icon" :name="item.icon"/>
|
||||
<d2-icon-svg v-else-if="item.iconSvg" :name="item.iconSvg"/>
|
||||
<d2-icon v-else name="file-o"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2-panel-search-item__info" flex-box="1" flex="dir:top">
|
||||
<div class="d2-panel-search-item__info-title" flex-box="1" flex="cross:center">
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<div class="d2-panel-search-item__info-fullTitle" flex-box="0">
|
||||
<span>{{item.fullTitle}}</span>
|
||||
</div>
|
||||
<div class="d2-panel-search-item__info-path" flex-box="0">
|
||||
<span>{{item.path}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: {
|
||||
default: () => ({})
|
||||
},
|
||||
hoverMode: {
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.d2-panel-search-item {
|
||||
height: 64px;
|
||||
margin: 0px -20px;
|
||||
&.can-hover {
|
||||
@extend %unable-select;
|
||||
margin: 0px;
|
||||
&:hover {
|
||||
background-color: #F5F7FA;
|
||||
.d2-panel-search-item__icon {
|
||||
.d2-panel-search-item__icon-box {
|
||||
i {
|
||||
font-size: 24px;
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-panel-search-item__info {
|
||||
.d2-panel-search-item__info-title {
|
||||
color: $color-text-main;
|
||||
}
|
||||
.d2-panel-search-item__info-fullTitle {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
.d2-panel-search-item__info-path {
|
||||
color: $color-text-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-panel-search-item__icon {
|
||||
width: 64px;
|
||||
.d2-panel-search-item__icon-box {
|
||||
height: 64px;
|
||||
width: 64px;
|
||||
border-right: 1px solid $color-border-3;
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: $color-text-sub;
|
||||
}
|
||||
svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.d2-panel-search-item__info {
|
||||
margin-left: 10px;
|
||||
.d2-panel-search-item__info-title {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
font-weight: bold;
|
||||
color: $color-text-normal;
|
||||
}
|
||||
.d2-panel-search-item__info-fullTitle {
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
color: $color-text-placehoder;
|
||||
}
|
||||
.d2-panel-search-item__info-path {
|
||||
margin-bottom: 4px;
|
||||
font-size: 10px;
|
||||
line-height: 14px;
|
||||
color: $color-text-placehoder;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,221 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="panel-search"
|
||||
flex="dir:top">
|
||||
<div
|
||||
class="panel-search__input-group"
|
||||
flex-box="0"
|
||||
flex="dir:top main:center cross:center"
|
||||
@click.self="handlePanelClick">
|
||||
<d2-icon-svg
|
||||
class="panel-search__logo"
|
||||
name="d2-admin-text"/>
|
||||
<el-autocomplete
|
||||
class="panel-search__input"
|
||||
ref="input"
|
||||
v-model="searchText"
|
||||
suffix-icon="el-icon-search"
|
||||
placeholder="搜索页面"
|
||||
:fetch-suggestions="querySearch"
|
||||
:trigger-on-focus="false"
|
||||
:clearable="true"
|
||||
@keydown.esc.native="handleEsc"
|
||||
@select="handleSelect">
|
||||
<d2-panel-search-item
|
||||
slot-scope="{ item }"
|
||||
:item="item"/>
|
||||
</el-autocomplete>
|
||||
<div class="panel-search__tip">
|
||||
您可以使用快捷键
|
||||
<span class="panel-search__key">{{hotkey.open}}</span>
|
||||
唤醒搜索面板，按
|
||||
<span class="panel-search__key">{{hotkey.close}}</span>
|
||||
关闭
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="resultsList.length > 0"
|
||||
class="panel-search__results-group"
|
||||
flex-box="1">
|
||||
<el-card>
|
||||
<div class="panel-search__results-group-inner">
|
||||
<d2-panel-search-item
|
||||
v-for="(item, index) in resultsList"
|
||||
:key="index"
|
||||
:item="item"
|
||||
:hover-mode="true"
|
||||
@click.native="handleResultsGroupItemClick(item.path)"/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Fuse from 'fuse.js'
|
||||
import { mapState } from 'vuex'
|
||||
import mixin from '../mixin/menu'
|
||||
export default {
|
||||
mixins: [
|
||||
mixin
|
||||
],
|
||||
components: {
|
||||
'd2-panel-search-item': () => import('./components/panel-search-item/index.vue')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
searchText: '',
|
||||
results: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/search', [
|
||||
'hotkey',
|
||||
'pool'
|
||||
]),
|
||||
// 这份数据是展示在搜索面板下面的
|
||||
resultsList () {
|
||||
return (this.results.length === 0 && this.searchText === '') ? this.pool.map(e => ({
|
||||
value: e.fullTitle,
|
||||
...e
|
||||
})) : this.results
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* @description 过滤选项 这个方法在每次输入框的值发生变化时会触发
|
||||
*/
|
||||
querySearch (queryString, callback) {
|
||||
var pool = this.pool
|
||||
const results = this.query(queryString ? pool : [], queryString)
|
||||
this.results = results
|
||||
callback(results)
|
||||
},
|
||||
/**
|
||||
* @description 指定的数据源中根据指定的查询字符串过滤数据
|
||||
* @param {Object} pool 需要过滤的数据
|
||||
* @param {String} queryString 查询字符串
|
||||
*/
|
||||
query (pool, queryString) {
|
||||
return new Fuse(pool, {
|
||||
shouldSort: true,
|
||||
tokenize: true,
|
||||
threshold: 0.6,
|
||||
location: 0,
|
||||
distance: 100,
|
||||
maxPatternLength: 32,
|
||||
minMatchCharLength: 1,
|
||||
keys: [
|
||||
'fullTitle',
|
||||
'path'
|
||||
]
|
||||
})
|
||||
.search(queryString)
|
||||
.map(e => ({
|
||||
value: e.fullTitle,
|
||||
...e
|
||||
}))
|
||||
},
|
||||
/**
|
||||
* @description 聚焦输入框
|
||||
*/
|
||||
focus () {
|
||||
this.input = ''
|
||||
setTimeout(() => {
|
||||
this.$refs.input.focus()
|
||||
// 还原
|
||||
this.searchText = ''
|
||||
this.results = []
|
||||
}, 500)
|
||||
},
|
||||
/**
|
||||
* @description 接收用户在列表中选择项目的事件
|
||||
*/
|
||||
handleResultsGroupItemClick (path) {
|
||||
// 如果用户选择的就是当前页面 就直接关闭搜索面板
|
||||
if (path === this.$route.path) {
|
||||
this.handleEsc()
|
||||
return
|
||||
}
|
||||
// 用户选择的是其它页面
|
||||
this.handleMenuSelect(path)
|
||||
},
|
||||
/**
|
||||
* @description 接收用户在下拉菜单中选中事件
|
||||
*/
|
||||
handleSelect ({ path }) {
|
||||
// 如果用户选择的就是当前页面 就直接关闭搜索面板
|
||||
if (path === this.$route.path) {
|
||||
this.handleEsc()
|
||||
return
|
||||
}
|
||||
// 用户选择的是其它页面
|
||||
this.$nextTick(() => {
|
||||
this.handleMenuSelect(path)
|
||||
})
|
||||
},
|
||||
/**
|
||||
* @augments 关闭输入框的下拉菜单
|
||||
*/
|
||||
closeSuggestion () {
|
||||
if (this.$refs.input.activated) {
|
||||
this.$refs.input.suggestions = []
|
||||
this.$refs.input.activated = false
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @augments 接收用户点击空白区域的关闭
|
||||
*/
|
||||
handlePanelClick () {
|
||||
this.handleEsc()
|
||||
},
|
||||
/**
|
||||
* @augments 接收用户触发的关闭
|
||||
*/
|
||||
handleEsc () {
|
||||
this.closeSuggestion()
|
||||
this.$nextTick(() => {
|
||||
this.$emit('close')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.panel-search {
|
||||
margin: 20px;
|
||||
.panel-search__input-group {
|
||||
height: 240px;
|
||||
.panel-search__logo {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.panel-search__input {
|
||||
width: 500px;
|
||||
}
|
||||
.panel-search__tip {
|
||||
@extend %unable-select;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 12px;
|
||||
color: $color-text-sub;
|
||||
.panel-search__key {
|
||||
padding: 1px 5px;
|
||||
margin: 0px 2px;
|
||||
border-radius: 2px;
|
||||
background-color: $color-text-normal;
|
||||
color: $color-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.panel-search__results-group {
|
||||
overflow: auto;
|
||||
.panel-search__results-group-inner {
|
||||
margin: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,185 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-multiple-page-control-group" flex>
|
||||
<div class="d2-multiple-page-control-content" flex-box="1">
|
||||
<div class="d2-multiple-page-control-content-inner">
|
||||
<d2-contextmenu
|
||||
:visible.sync="contextmenuFlag"
|
||||
:x="contentmenuX"
|
||||
:y="contentmenuY">
|
||||
<d2-contextmenu-list
|
||||
:menulist="tagName === 'index' ? contextmenuListIndex : contextmenuList"
|
||||
@rowClick="contextmenuClick"/>
|
||||
</d2-contextmenu>
|
||||
<el-tabs
|
||||
class="d2-multiple-page-control"
|
||||
:value="current"
|
||||
type="card"
|
||||
:closable="true"
|
||||
@tab-click="handleClick"
|
||||
@edit="handleTabsEdit"
|
||||
@contextmenu.native="handleContextmenu">
|
||||
<el-tab-pane
|
||||
v-for="(page, index) in opened"
|
||||
:key="index"
|
||||
:label="page.meta.title || '未命名'"
|
||||
:name="page.name"/>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="d2-multiple-page-control-btn"
|
||||
flex-box="0">
|
||||
<el-dropdown
|
||||
size="default"
|
||||
split-button
|
||||
@click="handleControlBtnClick"
|
||||
@command="command => handleControlItemClick(command)">
|
||||
<d2-icon name="times-circle"/>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item command="left">
|
||||
<d2-icon name="arrow-left" class="d2-mr-10"/>
|
||||
关闭左侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="right">
|
||||
<d2-icon name="arrow-right" class="d2-mr-10"/>
|
||||
关闭右侧
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="other">
|
||||
<d2-icon name="times" class="d2-mr-10"/>
|
||||
关闭其它
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item command="all">
|
||||
<d2-icon name="times-circle" class="d2-mr-10"/>
|
||||
全部关闭
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
D2Contextmenu: () => import('../contextmenu'),
|
||||
D2ContextmenuList: () => import('../contextmenu/components/contentmenuList')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
contextmenuFlag: false,
|
||||
contentmenuX: 0,
|
||||
contentmenuY: 0,
|
||||
contextmenuListIndex: [
|
||||
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
|
||||
],
|
||||
contextmenuList: [
|
||||
{ icon: 'arrow-left', title: '关闭左侧', value: 'left' },
|
||||
{ icon: 'arrow-right', title: '关闭右侧', value: 'right' },
|
||||
{ icon: 'times', title: '关闭其它', value: 'other' },
|
||||
{ icon: 'times-circle', title: '关闭全部', value: 'all' }
|
||||
],
|
||||
tagName: 'index'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin/page', [
|
||||
'opened',
|
||||
'current'
|
||||
])
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/page', [
|
||||
'close',
|
||||
'closeLeft',
|
||||
'closeRight',
|
||||
'closeOther',
|
||||
'closeAll'
|
||||
]),
|
||||
/**
|
||||
* @description 右键菜单功能点击
|
||||
*/
|
||||
handleContextmenu (event) {
|
||||
let target = event.target
|
||||
// 解决 https://github.com/d2-projects/d2-admin/issues/54
|
||||
let flag = false
|
||||
if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
||||
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
||||
target = target.parentNode
|
||||
flag = true
|
||||
}
|
||||
if (flag) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
this.contentmenuX = event.clientX
|
||||
this.contentmenuY = event.clientY
|
||||
this.tagName = target.getAttribute('aria-controls').slice(5)
|
||||
this.contextmenuFlag = true
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 右键菜单的row-click事件
|
||||
*/
|
||||
contextmenuClick (command) {
|
||||
this.handleControlItemClick(command, this.tagName)
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上选项的事件
|
||||
*/
|
||||
handleControlItemClick (command, tagName = null) {
|
||||
if (tagName) {
|
||||
this.contextmenuFlag = false
|
||||
}
|
||||
const params = {
|
||||
pageSelect: tagName,
|
||||
vm: this
|
||||
}
|
||||
switch (command) {
|
||||
case 'left':
|
||||
this.closeLeft(params)
|
||||
break
|
||||
case 'right':
|
||||
this.closeRight(params)
|
||||
break
|
||||
case 'other':
|
||||
this.closeOther(params)
|
||||
break
|
||||
case 'all':
|
||||
this.closeAll(this)
|
||||
break
|
||||
default:
|
||||
this.$message.error('无效的操作')
|
||||
break
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 接收点击关闭控制上按钮的事件
|
||||
*/
|
||||
handleControlBtnClick () {
|
||||
this.closeAll(this)
|
||||
},
|
||||
/**
|
||||
* @description 接收点击 tab 标签的事件
|
||||
*/
|
||||
handleClick (tab, event) {
|
||||
// 找到点击的页面在 tag 列表里是哪个
|
||||
const page = this.opened.find(page => page.name === tab.name)
|
||||
const { name, params, query } = page
|
||||
if (page) {
|
||||
this.$router.push({ name, params, query })
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
||||
*/
|
||||
handleTabsEdit (tagName, action) {
|
||||
if (action === 'remove') {
|
||||
this.close({
|
||||
tagName,
|
||||
vm: this
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,3 +0,0 @@
|
||||
import layout from './layout'
|
||||
|
||||
export default layout
|
||||
@@ -1,148 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="d2-layout-header-aside-group"
|
||||
:style="styleLayoutMainGroup"
|
||||
:class="{grayMode: grayActive}">
|
||||
<!-- 半透明遮罩 -->
|
||||
<div class="d2-layout-header-aside-mask"></div>
|
||||
<!-- 主体内容 -->
|
||||
<div class="d2-layout-header-aside-content" flex="dir:top">
|
||||
<!-- 顶栏 -->
|
||||
<div
|
||||
class="d2-theme-header"
|
||||
:style="{
|
||||
opacity: this.searchActive ? 0.5 : 1
|
||||
}"
|
||||
flex-box="0"
|
||||
flex>
|
||||
<div class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
|
||||
<img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
|
||||
<img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
|
||||
</div>
|
||||
<div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
|
||||
<d2-icon name="bars"/>
|
||||
</div>
|
||||
<d2-menu-header flex-box="1"/>
|
||||
<!-- 顶栏右侧 -->
|
||||
<div class="d2-header-right" flex-box="0">
|
||||
<!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
|
||||
<d2-header-search @click="handleSearchClick"/>
|
||||
<d2-header-error-log/>
|
||||
<d2-header-fullscreen/>
|
||||
<d2-header-theme/>
|
||||
<d2-header-size/>
|
||||
<d2-header-user/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下面 主体 -->
|
||||
<div class="d2-theme-container" flex-box="1" flex>
|
||||
<!-- 主体 侧边栏 -->
|
||||
<div
|
||||
flex-box="0"
|
||||
ref="aside"
|
||||
class="d2-theme-container-aside"
|
||||
:style="{
|
||||
width: asideCollapse ? asideWidthCollapse : asideWidth,
|
||||
opacity: this.searchActive ? 0.5 : 1
|
||||
}">
|
||||
<d2-menu-side/>
|
||||
</div>
|
||||
<!-- 主体 -->
|
||||
<div class="d2-theme-container-main" flex-box="1" flex>
|
||||
<!-- 搜索 -->
|
||||
<transition name="fade-scale">
|
||||
<div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
|
||||
<d2-panel-search
|
||||
ref="panelSearch"
|
||||
@close="searchPanelClose"/>
|
||||
</div>
|
||||
</transition>
|
||||
<!-- 内容 -->
|
||||
<transition name="fade-scale">
|
||||
<div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
|
||||
<!-- tab -->
|
||||
<div class="d2-theme-container-main-header" flex-box="0">
|
||||
<d2-tabs/>
|
||||
</div>
|
||||
<!-- 页面 -->
|
||||
<div class="d2-theme-container-main-body" flex-box="1">
|
||||
<transition :name="transitionActive ? 'fade-transverse' : ''">
|
||||
<keep-alive :include="keepAlive">
|
||||
<router-view/>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapGetters, mapActions } from 'vuex'
|
||||
import mixinSearch from './mixins/search'
|
||||
export default {
|
||||
name: 'd2-layout-header-aside',
|
||||
mixins: [
|
||||
mixinSearch
|
||||
],
|
||||
components: {
|
||||
'd2-menu-side': () => import('./components/menu-side'),
|
||||
'd2-menu-header': () => import('./components/menu-header'),
|
||||
'd2-tabs': () => import('./components/tabs'),
|
||||
'd2-header-fullscreen': () => import('./components/header-fullscreen'),
|
||||
'd2-header-search': () => import('./components/header-search'),
|
||||
'd2-header-size': () => import('./components/header-size'),
|
||||
'd2-header-theme': () => import('./components/header-theme'),
|
||||
'd2-header-user': () => import('./components/header-user'),
|
||||
'd2-header-error-log': () => import('./components/header-error-log')
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// [侧边栏宽度] 正常状态
|
||||
asideWidth: '200px',
|
||||
// [侧边栏宽度] 折叠状态
|
||||
asideWidthCollapse: '65px'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin', {
|
||||
keepAlive: state => state.page.keepAlive,
|
||||
grayActive: state => state.gray.active,
|
||||
transitionActive: state => state.transition.active,
|
||||
asideCollapse: state => state.menu.asideCollapse
|
||||
}),
|
||||
...mapGetters('d2admin', {
|
||||
themeActiveSetting: 'theme/activeSetting'
|
||||
}),
|
||||
/**
|
||||
* @description 最外层容器的背景图片样式
|
||||
*/
|
||||
styleLayoutMainGroup () {
|
||||
return {
|
||||
...this.themeActiveSetting.backgroundImage ? {
|
||||
backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`
|
||||
} : {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('d2admin/menu', [
|
||||
'asideCollapseToggle'
|
||||
]),
|
||||
/**
|
||||
* 接收点击切换侧边栏的按钮
|
||||
*/
|
||||
handleToggleAside () {
|
||||
this.asideCollapseToggle()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 注册主题
|
||||
@import '~@/assets/style/theme/register.scss';
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
|
||||
import hotkeys from 'hotkeys-js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
'd2-panel-search': () => import('../components/panel-search')
|
||||
},
|
||||
mounted () {
|
||||
// 绑定搜索功能快捷键 [ 打开 ]
|
||||
hotkeys(this.searchHotkey.open, event => {
|
||||
event.preventDefault()
|
||||
this.searchPanelOpen()
|
||||
})
|
||||
// 绑定搜索功能快捷键 [ 关闭 ]
|
||||
hotkeys(this.searchHotkey.close, event => {
|
||||
event.preventDefault()
|
||||
this.searchPanelClose()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
hotkeys.unbind(this.searchHotkey.open)
|
||||
hotkeys.unbind(this.searchHotkey.close)
|
||||
},
|
||||
computed: {
|
||||
...mapState('d2admin', {
|
||||
searchActive: state => state.search.active,
|
||||
searchHotkey: state => state.search.hotkey
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
searchToggle: 'd2admin/search/toggle',
|
||||
searchSet: 'd2admin/search/set'
|
||||
}),
|
||||
/**
|
||||
* 接收点击搜索按钮
|
||||
*/
|
||||
handleSearchClick () {
|
||||
this.searchToggle()
|
||||
if (this.searchActive) {
|
||||
this.$refs.panelSearch.focus()
|
||||
}
|
||||
},
|
||||
searchPanelOpen () {
|
||||
if (!this.searchActive) {
|
||||
this.searchSet(true)
|
||||
this.$refs.panelSearch.focus()
|
||||
}
|
||||
},
|
||||
// 关闭搜索面板
|
||||
searchPanelClose () {
|
||||
if (this.searchActive) {
|
||||
this.searchSet(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import low from 'lowdb'
|
||||
import LocalStorage from 'lowdb/adapters/LocalStorage'
|
||||
import setting from '@/setting.js'
|
||||
|
||||
const adapter = new LocalStorage(`d2admin-${setting.releases.version}`)
|
||||
const db = low(adapter)
|
||||
|
||||
db
|
||||
.defaults({
|
||||
sys: {},
|
||||
database: {}
|
||||
})
|
||||
.write()
|
||||
|
||||
export default db
|
||||
@@ -1,43 +0,0 @@
|
||||
import Cookies from 'js-cookie'
|
||||
import setting from '@/setting.js'
|
||||
|
||||
const cookies = {}
|
||||
|
||||
/**
|
||||
* @description 存储 cookie 值
|
||||
* @param {String} name cookie name
|
||||
* @param {String} value cookie value
|
||||
* @param {Object} setting cookie setting
|
||||
*/
|
||||
cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
|
||||
let currentCookieSetting = {
|
||||
expires: 1
|
||||
}
|
||||
Object.assign(currentCookieSetting, cookieSetting)
|
||||
Cookies.set(`d2admin-${setting.releases.version}-${name}`, value, currentCookieSetting)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 拿到 cookie 值
|
||||
* @param {String} name cookie name
|
||||
*/
|
||||
cookies.get = function (name = 'default') {
|
||||
return Cookies.get(`d2admin-${setting.releases.version}-${name}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 拿到 cookie 全部的值
|
||||
*/
|
||||
cookies.getAll = function () {
|
||||
return Cookies.get()
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 删除 cookie
|
||||
* @param {String} name cookie name
|
||||
*/
|
||||
cookies.remove = function (name = 'default') {
|
||||
return Cookies.remove(`d2admin-${setting.releases.version}-${name}`)
|
||||
}
|
||||
|
||||
export default cookies
|
||||
@@ -1,32 +0,0 @@
|
||||
import log from './util.log.js'
|
||||
import cookies from './util.cookies.js'
|
||||
|
||||
let util = {
|
||||
cookies,
|
||||
log
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 更新标题
|
||||
* @param {String} title 标题
|
||||
*/
|
||||
util.title = function (titleText) {
|
||||
const processTitle = process.env.VUE_APP_TITLE || 'D2Admin'
|
||||
window.document.title = `${processTitle}${titleText ? ` | ${titleText}` : ''}`
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打开新页面
|
||||
* @param {String} url 地址
|
||||
*/
|
||||
util.open = function (url) {
|
||||
var a = document.createElement('a')
|
||||
a.setAttribute('href', url)
|
||||
a.setAttribute('target', '_blank')
|
||||
a.setAttribute('id', 'd2admin-menu-link')
|
||||
document.body.appendChild(a)
|
||||
a.click()
|
||||
document.body.removeChild(document.getElementById('d2admin-menu-link'))
|
||||
}
|
||||
|
||||
export default util
|
||||
@@ -1,80 +0,0 @@
|
||||
const log = {}
|
||||
|
||||
/**
|
||||
* @description 返回这个样式的颜色值
|
||||
* @param {String} type 样式名称 [ primary | success | warning | danger | text ]
|
||||
*/
|
||||
function typeColor (type = 'default') {
|
||||
let color = ''
|
||||
switch (type) {
|
||||
case 'default': color = '#35495E'; break
|
||||
case 'primary': color = '#3488ff'; break
|
||||
case 'success': color = '#43B883'; break
|
||||
case 'warning': color = '#e6a23c'; break
|
||||
case 'danger': color = '#f56c6c'; break
|
||||
default:; break
|
||||
}
|
||||
return color
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印一个 [ title | text ] 样式的信息
|
||||
* @param {String} title title text
|
||||
* @param {String} info info text
|
||||
* @param {String} type style
|
||||
*/
|
||||
log.capsule = function (title, info, type = 'primary') {
|
||||
console.log(
|
||||
`%c ${title} %c ${info} %c`,
|
||||
'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
|
||||
`background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0; color: #fff;`,
|
||||
'background:transparent'
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印彩色文字
|
||||
*/
|
||||
log.colorful = function (textArr) {
|
||||
console.log(
|
||||
`%c${textArr.map(t => t.text || '').join('%c')}`,
|
||||
...textArr.map(t => `color: ${typeColor(t.type)};`)
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印 default 样式的文字
|
||||
*/
|
||||
log.default = function (text) {
|
||||
log.colorful([{ text }])
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印 primary 样式的文字
|
||||
*/
|
||||
log.primary = function (text) {
|
||||
log.colorful([{ text, type: 'primary' }])
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印 success 样式的文字
|
||||
*/
|
||||
log.success = function (text) {
|
||||
log.colorful([{ text, type: 'success' }])
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印 warning 样式的文字
|
||||
*/
|
||||
log.warning = function (text) {
|
||||
log.colorful([{ text, type: 'warning' }])
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打印 danger 样式的文字
|
||||
*/
|
||||
log.danger = function (text) {
|
||||
log.colorful([{ text, type: 'danger' }])
|
||||
}
|
||||
|
||||
export default log
|
||||
-56
@@ -1,56 +0,0 @@
|
||||
// polyfill
|
||||
import 'babel-polyfill'
|
||||
// Vue
|
||||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
// store
|
||||
import store from '@/store/index'
|
||||
// 模拟数据
|
||||
import '@/mock'
|
||||
// 多国语
|
||||
import i18n from './i18n'
|
||||
// 核心插件
|
||||
import d2Admin from '@/plugin/d2admin'
|
||||
|
||||
// [ 可选插件组件 ]D2-Crud
|
||||
import D2Crud from '@d2-projects/d2-crud'
|
||||
|
||||
// 菜单和路由设置
|
||||
import router from './router'
|
||||
import menuHeader from '@/menu/header'
|
||||
import menuAside from '@/menu/aside'
|
||||
import { frameInRoutes } from '@/router/routes'
|
||||
|
||||
// 核心插件
|
||||
Vue.use(d2Admin)
|
||||
|
||||
// 可选插件组件
|
||||
// https://github.com/d2-projects/d2-crud
|
||||
Vue.use(D2Crud)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App),
|
||||
created () {
|
||||
// 处理路由 得到每一级的路由设置
|
||||
this.$store.commit('d2admin/page/init', frameInRoutes)
|
||||
// 设置顶栏菜单
|
||||
this.$store.commit('d2admin/menu/headerSet', menuHeader)
|
||||
// 设置侧边栏菜单
|
||||
this.$store.commit('d2admin/menu/asideSet', menuAside)
|
||||
// 初始化菜单搜索功能
|
||||
this.$store.commit('d2admin/search/init', menuHeader)
|
||||
},
|
||||
mounted () {
|
||||
// 展示系统信息
|
||||
this.$store.commit('d2admin/releases/versionShow')
|
||||
// 用户登录后从数据库加载一系列的设置
|
||||
this.$store.dispatch('d2admin/account/load')
|
||||
// 获取并记录用户 UA
|
||||
this.$store.commit('d2admin/ua/get')
|
||||
// 初始化全屏监听
|
||||
this.$store.dispatch('d2admin/fullscreen/listen')
|
||||
}
|
||||
}).$mount('#app')
|
||||
@@ -1,13 +0,0 @@
|
||||
// 菜单 侧边栏
|
||||
export default [
|
||||
{ path: '/index', title: '首页', icon: 'home' },
|
||||
{
|
||||
title: '演示页面',
|
||||
icon: 'folder-o',
|
||||
children: [
|
||||
{ path: '/demo/page1', title: '页面 1' },
|
||||
{ path: '/demo/page2', title: '页面 2' },
|
||||
{ path: '/demo/page3', title: '页面 3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,13 +0,0 @@
|
||||
// 菜单 顶栏
|
||||
export default [
|
||||
{ path: '/index', title: '首页', icon: 'home' },
|
||||
{
|
||||
title: '演示页面',
|
||||
icon: 'folder-o',
|
||||
children: [
|
||||
{ path: '/demo/page1', title: '页面 1' },
|
||||
{ path: '/demo/page2', title: '页面 2' },
|
||||
{ path: '/demo/page3', title: '页面 3' }
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -1,43 +0,0 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
const userDB = [
|
||||
{
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
uuid: 'admin-uuid',
|
||||
name: '管理员'
|
||||
},
|
||||
{
|
||||
username: 'editor',
|
||||
password: 'editor',
|
||||
uuid: 'editor-uuid',
|
||||
name: '编辑'
|
||||
},
|
||||
{
|
||||
username: 'user1',
|
||||
password: 'user1',
|
||||
uuid: 'user1-uuid',
|
||||
name: '用户1'
|
||||
}
|
||||
]
|
||||
|
||||
Mock.mock('/api/login', 'post', ({ url, type, body }) => {
|
||||
const bodyObj = JSON.parse(body)
|
||||
const user = userDB.find(e => e.username === bodyObj.username && e.password === bodyObj.password)
|
||||
if (user) {
|
||||
return {
|
||||
code: 0,
|
||||
msg: '登录成功',
|
||||
data: {
|
||||
...user,
|
||||
token: 'd787syv8dys8cas80d9s0a0d8f79ads56f7s4d56f879a8as89fd980s7dg'
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return {
|
||||
code: 401,
|
||||
msg: '用户名或密码错误',
|
||||
data: {}
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,15 +0,0 @@
|
||||
import Mock from 'mockjs'
|
||||
|
||||
// 补丁 解决 mock.js 影响 Cookie 携带
|
||||
import PatchCookie from './patch/cookie'
|
||||
|
||||
PatchCookie(Mock)
|
||||
|
||||
// 导入所有的接口
|
||||
const req = context => context.keys().map(context)
|
||||
req(require.context('./api/', true, /\.js$/))
|
||||
|
||||
// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留
|
||||
Mock.setup({
|
||||
timeout: '300-600'
|
||||
})
|
||||
@@ -1,10 +0,0 @@
|
||||
export default function (Mock) {
|
||||
// 解决 Mock 情况下，携带 withCredentials = true，且未被拦截的跨域请求丢失 Cookies 的问题
|
||||
Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
|
||||
Mock.XHR.prototype.send = function () {
|
||||
if (this.custom.xhr) {
|
||||
this.custom.xhr.withCredentials = this.withCredentials || false
|
||||
}
|
||||
this.proxy_send(...arguments)
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 1 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page1'
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 2 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page2'
|
||||
}
|
||||
</script>
|
||||
@@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 3 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page3'
|
||||
}
|
||||
</script>
|
||||
@@ -1,3 +0,0 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
@@ -1,25 +0,0 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<p class="page_title">page not found</p>
|
||||
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
|
||||
background-blend-mode: multiply,multiply;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.page_title {
|
||||
font-size: 20px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,36 +0,0 @@
|
||||
<template>
|
||||
<div class="d2-badge">
|
||||
<p align="center">
|
||||
<a><img src="https://img.shields.io/github/release/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/forks/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/stars/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-closed/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-pr/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-pr-closed/d2-projects/d2-admin.svg"/></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a><img src="https://img.shields.io/npm/v/@d2-admin/ice-scaffold.svg"/></a>
|
||||
<a href="https://www.travis-ci.org/d2-projects/d2-admin"><img src="https://www.travis-ci.org/d2-projects/d2-admin.svg?branch=master"/></a>
|
||||
<a><img src="https://img.shields.io/github/last-commit/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"/></a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d2-badge {
|
||||
margin-bottom: 20px;
|
||||
p {
|
||||
margin: 0px;
|
||||
margin-bottom: 2px;
|
||||
:nth-last-child() {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
src="./image/d2-help-button@2x.png"
|
||||
style="width: 138px;"
|
||||
@click="dialogVisible = true">
|
||||
<el-dialog
|
||||
title="帮助"
|
||||
width="600px"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true">
|
||||
<div style="margin-top: -25px; margin-bottom: -25px;">
|
||||
<el-button-group class="d2-mb">
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin')">
|
||||
<d2-icon name="github" class="d2-mr-5"/>
|
||||
主页
|
||||
</el-button>
|
||||
<el-button @click="$open('https://d2-projects.github.io/d2-admin-doc/zh/')">
|
||||
<d2-icon name="book" class="d2-mr-5"/>
|
||||
中文文档
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues')">
|
||||
<d2-icon name="question" class="d2-mr-5"/>
|
||||
issues
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues/new/choose')">
|
||||
<d2-icon name="plus" class="d2-mr-5"/>
|
||||
New issue
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="扫码进 QQ 群 [ 推荐 ]" class="d2-mb"/>
|
||||
<img src="./image/qq.jpg" style="width: 100%;">
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="作者微信 加好友后邀请进微信群" class="d2-mb"/>
|
||||
<img src="./image/we.jpg" style="width: 100%;">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-page-cover',
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
@@ -1,3 +0,0 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<d2-page-cover
|
||||
title="I AM D2ADMIN"
|
||||
sub-title="追求简约美感的后台管理系统集成方案">
|
||||
<d2-icon-svg style="width: 120px;" name="d2-admin"/>
|
||||
<template slot="footer">
|
||||
<div class="page__btn-group">
|
||||
<span @click="$open('https://github.com/d2-projects')">开源组织</span> |
|
||||
<span @click="$open('https://doc.d2admin.fairyever.com/zh/')">文档</span> |
|
||||
<span @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版</span> |
|
||||
<span @click="$open('https://alibaba.github.io/ice/scaffold?type=vue')">飞冰</span> |
|
||||
<span @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金</span> |
|
||||
<span @click="$open('https://awesome.fairyever.com/daily/')">程序员日报</span> |
|
||||
<el-popover
|
||||
:width="172"
|
||||
trigger="hover">
|
||||
<p class="d2-mt-0 d2-mb-10">D2Projects</p>
|
||||
<img src="./image/qr@2x.png" style="width: 172px;">
|
||||
<span slot="reference">微信公众号</span>
|
||||
<p
|
||||
style="
|
||||
font-size: 12px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
">
|
||||
官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息
|
||||
</p>
|
||||
</el-popover>
|
||||
</div>
|
||||
<d2-badge/>
|
||||
<d2-help-btn/>
|
||||
</template>
|
||||
</d2-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import D2HelpBtn from './components/d2-help-btn'
|
||||
import D2Badge from './components/d2-badge'
|
||||
export default {
|
||||
components: {
|
||||
D2HelpBtn,
|
||||
D2Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.page__btn-group {
|
||||
color: $color-text-placehoder;
|
||||
font-size: 12px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 20px;
|
||||
span {
|
||||
color: $color-text-sub;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,2 +0,0 @@
|
||||
// 例子插件配置地址
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 6,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#444"
|
||||
},
|
||||
"shape": {
|
||||
"type": "polygon",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 6
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 160,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 10,
|
||||
"size_min": 40,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 200,
|
||||
"color": "#ffffff",
|
||||
"opacity": 1,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 8,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": false,
|
||||
"mode": "grab"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": false,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#DCDFE6"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 4,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#DCDFE6",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 160,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4,
|
||||
"size_min": 0.3,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 150,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"direction": "none",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 600
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 250,
|
||||
"size": 0,
|
||||
"duration": 2,
|
||||
"opacity": 0,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 400,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
/* eslint-disable */
|
||||
|
||||
export default {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 400,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#fff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 10,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": false,
|
||||
"distance": 500,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.4,
|
||||
"width": 2
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 6,
|
||||
"direction": "bottom",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "bubble"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 0.5
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 4,
|
||||
"duration": 0.3,
|
||||
"opacity": 1,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user