Skip to content

iBiz-Vue-R7-Res
iBiz-Vue-R7-Res
提交 c129eeef 编写于 作者: tony001's avatar tony001
浏览文件
操作

调整整体样式

上级 bc0b8169
隐藏空白字符变更
内嵌 并排
正在显示 包含 753 行增加 和 541 行删除
src/app-register.ts
浏览文件 @ c129eeef
......@@ -76,6 +76,7 @@ import AppDepartmentSelect from './components/app-department-select/app-departme
import IBizGroupSelect from './components/ibiz-group-select/ibiz-group-select.vue'
import IBizGroupPicker from './components/ibiz-group-picker/ibiz-group-picker.vue'
import AppWFApproval from './components/app-wf-approval/app-wf-approval.vue'
import Breadcrumb from './components/app-breadcrumb/app-breadcrumb.vue';
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
......@@ -161,5 +162,6 @@ export const AppComponents = {
v.component('ibiz-group-select',IBizGroupSelect);
v.component('ibiz-group-picker',IBizGroupPicker);
v.component('app-wf-approval',AppWFApproval);
v.component('app-breadcrumb',Breadcrumb);
},
};
\ No newline at end of file
src/components/app-breadcrumb/app-breadcrumb.less 0 → 100644
浏览文件 @ c129eeef
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #97a8be;
cursor: text;
}
}
\ No newline at end of file
src/components/app-breadcrumb/app-breadcrumb.vue 0 → 100644
浏览文件 @ c129eeef
<template>
<el-breadcrumb
class="app-breadcrumb"
separator="/"
>
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="(item, index) in breadcrumbs"
:key="item.path"
>
<span
v-if="item.redirect === 'noredirect' || index === breadcrumbs.length-1"
class="no-redirect"
>{{ $t(item.meta.caption) }}</span>
<a
v-else
@click.prevent="handleLink(item)"
>{{ $t(item.meta.caption) }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script lang="ts">
import { compile } from 'path-to-regexp'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { RouteRecord, Route } from 'vue-router'
@Component({
name: 'Breadcrumb'
})
export default class extends Vue {
private breadcrumbs: RouteRecord[] = []
@Watch('$route')
private onRouteChange(route: Route) {
// if you go to the redirect page, do not update the breadcrumbs
if (route.path.startsWith('/redirect/')) {
return
}
this.getBreadcrumb()
}
created() {
this.getBreadcrumb()
}
private getBreadcrumb() {
let matched = this.$route.matched.filter((item) => item.meta && item.meta.caption)
const first = matched[0]
if (!this.isDashboard(first)) {
matched = [{ path: "/index/:index?", meta: {
caption: 'app.views.index.caption',
viewType: 'APPINDEX',
parameters: [
{ pathName: 'index', parameterName: 'index' },
],
requireAuth: true, } } as RouteRecord].concat(matched)
}
this.breadcrumbs = matched.filter((item) => {
return item.meta && item.meta.caption && item.meta.breadcrumb !== false
})
}
private isDashboard(route: RouteRecord) {
const name = route && route.meta.parameters[0].pathName;
if (!name) {
return false
}
return name.trim().toLocaleLowerCase() === 'index'.toLocaleLowerCase()
}
private pathCompile(path: string) {
const { params } = this.$route
const toPath = compile(path)
return toPath(params)
}
private handleLink(item: any) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect).catch(err => {
console.warn(err)
})
return
}
this.$router.push(this.pathCompile(path)).catch(err => {
console.warn(err)
})
}
}
</script>
<style lang='less'>
@import "./app-breadcrumb.less";
</style>
\ No newline at end of file
src/components/tab-page-exp/tab-page-exp.less
浏览文件 @ c129eeef
// .ibiz-page-tag {
// position: relative;
// box-sizing: border-box;
// // width: calc(100% + 30px);
// height: 38px;
// padding: 0 60px 0 30px;
// background: #f6f6f6;
// .tags-body {
// position: relative;
// width: 100%;
// height: 100%;
// overflow: hidden;
// .tags-container {
// position: absolute;
// overflow: visible;
// white-space: nowrap;
// transition: left .3s ease;
// .ivu-tag {
// margin: 0;
// height: 38px;
// line-height: 38px;
// border: 0;
// border-radius: 0;
// border-right: 1px solid #ddd;
// font-size: 14px;
// .text-icon {
// height: 16px;
// margin-bottom: -3px;
// }
// .ivu-icon-ios-close {
// visibility: hidden;
// }
// .tag-text {
// display: table-cell;
// .ivu-tooltip {
// display: block;
// .ivu-tooltip-rel {
// display: block;
// max-width: 200px;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// }
// }
// }
// .ivu-tag.tag-is-active {
// background: #fff;
// }
// .ivu-tag:hover,.ivu-tag.tag-is-active {
// .ivu-icon-ios-close {
// visibility: initial;
// }
// }
// }
// }
// .move-btn {
// font-size: 18px;
// width: 30px;
// height: 38px;
// line-height: 38px;
// border-left: 1px solid #ddd;
// border-right: 1px solid #ddd;
// text-align: center;
// cursor: pointer;
// }
// .move-btn:hover {
// background: #efefef;
// }
// .move-left, .move-right, .ivu-dropdown{
// position: absolute;
// top: 0;
// }
// .move-left {
// left: 0;
// }
// .move-right {
// right: 30px;
// }
// .ivu-dropdown {
// right: 0;
// }
// }
// .tags-transition-move {
// transition: transform .3s;
// }
// .tags-transition-enter,.tags-transition-leave-to{
// opacity: 0;
// }
.ibiz-page-tag {
position: relative;
box-sizing: border-box;
// width: calc(100% + 30px);
height: 38px;
padding: 0 60px 0 30px;
background: #f6f6f6;
.tags-body {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.tags-container {
position: absolute;
overflow: visible;
white-space: nowrap;
transition: left .3s ease;
.ivu-tag {
margin: 0;
height: 38px;
line-height: 38px;
border: 0;
border-radius: 0;
border-right: 1px solid #ddd;
font-size: 14px;
.text-icon {
height: 16px;
margin-bottom: -3px;
}
.ivu-icon-ios-close {
visibility: hidden;
}
.tag-text {
display: table-cell;
.ivu-tooltip {
display: block;
.ivu-tooltip-rel {
display: block;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.ivu-tag.tag-is-active {
background: #fff;
}
.ivu-tag:hover,.ivu-tag.tag-is-active {
.ivu-icon-ios-close {
visibility: initial;
}
}
.el-tabs{
.el-tabs__nav{
border:none;
}
.el-tabs__item{
color:#ccc;
border:none;
}
.el-tabs__item:hover{
color:#409eff;
}
.is-active{
color:#409eff;
border-bottom:2px solid #409eff !important;
}
.el-tabs__nav-scroll{
background-color: white;
}
}
.move-btn {
font-size: 18px;
width: 30px;
height: 38px;
line-height: 38px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
text-align: center;
cursor: pointer;
}
.move-btn:hover {
background: #efefef;
}
.move-left, .move-right, .ivu-dropdown{
position: absolute;
top: 0;
}
.move-left {
left: 0;
}
.move-right {
right: 30px;
}
.ivu-dropdown {
right: 0;
}
}
.tags-transition-move {
transition: transform .3s;
}
.tags-transition-enter,.tags-transition-leave-to{
opacity: 0;
}
\ No newline at end of file
src/components/tab-page-exp/tab-page-exp.vue
浏览文件 @ c129eeef
<template>
<div class="ibiz-page-tag" v-if="$store.state.pageMetas.length > 0">
<div class="move-btn move-left" @click="leftMove">
<icon type="ios-arrow-back" />
</div>
<div ref="scrollBody" class="tags-body">
<div ref="scrollChild" class="tags-container" :style="{left: styleLeft + 'px'}">
<transition-group name="tags-transition">
<template v-for="(meta, index) of $store.state.pageMetas">
<Tag ref="tagElement" :key="index" :class="isActive(index) ? 'tag-is-active' : ''" :name="index" closable @click.native="changePage(index)" @on-close="onClose(index)">
<div class="tag-text">
<tooltip :content="getCaption(meta.caption, meta.info)" transfer :max-width="300">
<i v-if="meta.iconCls && !Object.is(meta.iconCls, '')" :class="meta.iconCls"></i>
<img v-else :src="meta.imgPath" class="text-icon" />
&nbsp;{{getCaption(meta.caption, meta.info)}}
</tooltip>
</div>
</Tag>
</template>
</transition-group>
</div>
</div>
<div class="move-btn move-right" @click="rightMove">
<icon type="ios-arrow-forward" />
</div>
<Dropdown @on-click="doTagAction" placement="bottom-end">
<div class="move-btn">
<icon type="ios-close-circle-outline" />
</div>
<DropdownMenu slot="list">
<template v-for="(action, index) of actions">
<DropdownItem :key="index" :name="action.value">{{$t(action.text)}}</DropdownItem>
</template>
</DropdownMenu>
</Dropdown >
</div >
<div class="ibiz-page-tag">
<el-tabs
type="card"
@tab-click="changePage"
v-model="editableTabsValue"
closable
@tab-remove="onClose"
>
<el-tab-pane
v-for="(meta, index) of $store.state.pageMetas"
:label="getCaption(meta.caption, meta.info)"
:name="index+''"
:key="index+''"
></el-tab-pane>
</el-tabs>
</div>
</template>
<script lang="ts">
import { Vue, Component, Provide, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '../../environments/environment';
import { Vue, Component, Provide, Prop, Watch } from "vue-property-decorator";
import { Environment } from "../../environments/environment";
@Component({})
export default class TabPageExp extends Vue {
@Provide()
public styleLeft: number = 0;
@Provide()
public styleLeft: number = 0;
@Provide()
public actions: any[] = [{ text: 'app.tabpage.closeall', value: 'closeAll' }, { text: 'app.tabpage.closeother', value: 'closeOther' }];
@Provide()
public actions: any[] = [
{ text: "app.tabpage.closeall", value: "closeAll" },
{ text: "app.tabpage.closeother", value: "closeOther" }
];
@Watch("$route")
public onRouteChange(newVal: any) {
this.moveToView(newVal);
this.$emit('change', newVal);
}
public editableTabsValue: any = "";
public created() {
Vue.prototype.$tabPageExp = this;
}
@Watch("$route")
public onRouteChange(newVal: any) {
this.moveToView(newVal);
this.$emit("change", newVal);
}
public getCaption(caption: any, info: any):any {
return info && !Object.is(info, '') ? `${this.$t(caption)} - ${info}` : this.$t(caption);
}
public created() {
Vue.prototype.$tabPageExp = this;
}
/**
* 向左移动
*
* @memberof TabPageExp
*/
public leftMove() {
const scrollBody: any = this.$refs.scrollBody;
const scrollChild: any = this.$refs.scrollChild;
if (scrollBody && scrollChild && scrollChild.offsetWidth > scrollBody.offsetWidth) {
if ((scrollChild.offsetWidth - scrollBody.offsetWidth + this.styleLeft) > 100) {
this.styleLeft -= 100;
} else {
this.styleLeft = scrollBody.offsetWidth - scrollChild.offsetWidth;
}
}
}
public getCaption(caption: any, info: any): any {
return info && !Object.is(info, "")
? `${this.$t(caption)} - ${info}`
: this.$t(caption);
}
/**
* 向右移动
*
* @memberof TabPageExp
*/
public rightMove() {
if (this.styleLeft < 0) {
if (this.styleLeft + 100 > 0) {
this.styleLeft = 0;
} else {
this.styleLeft += 100;
}
}
/**
* 向左移动
*
* @memberof TabPageExp
*/
public leftMove() {
const scrollBody: any = this.$refs.scrollBody;
const scrollChild: any = this.$refs.scrollChild;
if (
scrollBody &&
scrollChild &&
scrollChild.offsetWidth > scrollBody.offsetWidth
) {
if (
scrollChild.offsetWidth - scrollBody.offsetWidth + this.styleLeft >
100
) {
this.styleLeft -= 100;
} else {
this.styleLeft = scrollBody.offsetWidth - scrollChild.offsetWidth;
}
}
}
/**
* 是否选中
*
* @param {(string | number)} index
* @returns
* @memberof TabPageExp
*/
public isActive(index: string | number) {
const page = this.$store.state.pageTagList[index];
if (Object.is(page.fullPath, this.$route.fullPath)) {
return true;
}
return false;
/**
* 向右移动
*
* @memberof TabPageExp
*/
public rightMove() {
if (this.styleLeft < 0) {
if (this.styleLeft + 100 > 0) {
this.styleLeft = 0;
} else {
this.styleLeft += 100;
}
}
}
/**
* 关闭
*
* @param {*} event
* @param {*} name
* @memberof TabPageExp
*/
public onClose(name: any) {
const page = this.$store.getters.getPage(name);
if (!page) {
this.$store.commit("deletePage", name);
this.gotoPage();
}
const appview = this.$store.getters['viewaction/getAppView'](page.viewtag);
if (appview && appview.viewdatachange) {
const title: any = this.$t('app.tabpage.sureclosetip.title');
const content: any = this.$t('app.tabpage.sureclosetip.content');
this.$Modal.confirm({
title: title,
content: content,
onOk: () => {
this.$store.commit("deletePage", name);
this.gotoPage();
},
onCancel: () => {
}
});
} else {
this.$store.commit("deletePage", name);
this.gotoPage();
}
/**
* 是否选中
*
* @param {(string | number)} index
* @returns
* @memberof TabPageExp
*/
public isActive(index: string | number) {
const page = this.$store.state.pageTagList[index];
if (Object.is(page.fullPath, this.$route.fullPath)) {
return true;
}
return false;
}
/**
* 是否显示关闭
*
* @returns
* @memberof TabPageExp
*/
public isClose() {
const pageTagList = this.$store.state.pageTagList;
if (pageTagList.length > 1) {
return true;
}
return false;
/**
* 关闭
*
* @param {*} event
* @param {*} name
* @memberof TabPageExp
*/
public onClose(name: any) {
const page = this.$store.getters.getPage(name);
if (!page) {
this.$store.commit("deletePage", name);
this.gotoPage();
}
/**
* 切换分页
*
* @param {*} index
* @memberof TabPageExp
*/
public changePage(index: any) {
this.$store.commit("setCurPage", index);
this.gotoPage();
const appview = this.$store.getters["viewaction/getAppView"](page.viewtag);
if (appview && appview.viewdatachange) {
const title: any = this.$t("app.tabpage.sureclosetip.title");
const content: any = this.$t("app.tabpage.sureclosetip.content");
this.$Modal.confirm({
title: title,
content: content,
onOk: () => {
this.$store.commit("deletePage", name);
this.gotoPage();
},
onCancel: () => {}
});
} else {
this.$store.commit("deletePage", name);
this.gotoPage();
}
}
/**
* 跳转页面
*
* @returns
* @memberof TabPageExp
*/
public gotoPage() {
const length = this.$store.state.historyPathList.length;
if (length > 0) {
const path = this.$store.state.historyPathList[length - 1];
if (Object.is(path, this.$route.fullPath)) {
return;
}
const index = this.$store.state.pageTagList.findIndex((page: any) => Object.is(page.fullPath, path));
if (index >= 0) {
const page = this.$store.state.pageTagList[index];
this.$router.push({ path: page.path, params: page.params, query: page.query });
}
} else {
let path: string | null = window.sessionStorage.getItem(Environment.AppName);
if(path) {
this.$router.push({path: path});
} else {
this.$router.push('/');
}
}
/**
* 是否显示关闭
*
* @returns
* @memberof TabPageExp
*/
public isClose() {
const pageTagList = this.$store.state.pageTagList;
if (pageTagList.length > 1) {
return true;
}
return false;
}
/**
* 设置当前页标题
*
* @param {*} caption
* @memberof TabPageExp
*/
public setCurPageCaption(caption: string, title: any, info: string) {
if(this.$route.meta && (!Object.is(this.$route.meta.caption, caption))) {
return;
}
this.$store.commit("setCurPageCaption", { route: this.$route, caption: title, info: info });
setTimeout(() => {
this.moveToView(this.$route);
}, 1);
}
/**
* 切换分页
*
* @param {*} index
* @memberof TabPageExp
*/
public changePage(tab: any, event: any) {
this.editableTabsValue = tab.index;
this.$store.commit("setCurPage", tab.index);
this.gotoPage();
}
/**
* 移动至指定页面标签
*
* @param {*} to
* @memberof TabPageExp
*/
public moveToView(to: any) {
const pages: any[] = this.$store.state.pageTagList;
let leftWidth: number = 0;
this.$nextTick(() => {
pages.forEach((page, index) => {
const tag: any = this.$refs.tagElement;
if (!tag) {
return ;
}
const el = tag[index].$el;
if (Object.is(page.fullPath, to.fullPath)) {
this.setLeft(el, leftWidth);
} else {
leftWidth += el.offsetWidth;
}
});
/**
* 跳转页面
*
* @returns
* @memberof TabPageExp
*/
public gotoPage() {
const length = this.$store.state.historyPathList.length;
if (length > 0) {
const path = this.$store.state.historyPathList[length - 1];
if (Object.is(path, this.$route.fullPath)) {
return;
}
const index = this.$store.state.pageTagList.findIndex((page: any) =>
Object.is(page.fullPath, path)
);
if (index >= 0) {
const page = this.$store.state.pageTagList[index];
this.$router.push({
path: page.path,
params: page.params,
query: page.query
});
}
} else {
let path: string | null = window.sessionStorage.getItem(
Environment.AppName
);
if (path) {
this.$router.push({ path: path });
} else {
this.$router.push("/");
}
}
}
/**
* 设置左侧边距
*
* @param {{ offsetWidth: number; }} tag
* @param {number} leftWidth
* @memberof TabPageExp
*/
public setLeft(tag: { offsetWidth: number; }, leftWidth: number) {
if (tag) {
const scrollBody: any = this.$refs.scrollBody;
if (leftWidth < -this.styleLeft) {
this.styleLeft = -leftWidth;
} else if ((leftWidth + tag.offsetWidth) > (scrollBody.offsetWidth - this.styleLeft)) {
this.styleLeft -= (leftWidth + tag.offsetWidth) - (scrollBody.offsetWidth - this.styleLeft);
}
}
/**
* 设置当前页标题
*
* @param {*} caption
* @memberof TabPageExp
*/
public setCurPageCaption(caption: string, title: any, info: string) {
if (this.$route.meta && !Object.is(this.$route.meta.caption, caption)) {
return;
}
this.$store.commit("setCurPageCaption", {
route: this.$route,
caption: title,
info: info
});
setTimeout(() => {
this.moveToView(this.$route);
}, 1);
}
/**
* 执行行为操作
*
* @param {string} name
* @memberof TabPageExp
*/
public doTagAction(name: string) {
if (Object.is(name, 'closeAll')) {
this.$store.commit("removeAllPage");
this.gotoPage();
} else if (Object.is(name, 'closeOther')) {
this.$store.commit("removeOtherPage");
this.moveToView(this.$route);
/**
* 移动至指定页面标签
*
* @param {*} to
* @memberof TabPageExp
*/
/**
* 移动至指定页面标签
*
* @param {*} to
* @memberof TabPageExp
*/
public moveToView(to: any) {
let that: any = this;
const pages: any[] = this.$store.state.pageTagList;
let leftWidth: number = 0;
this.$nextTick(() => {
let _index: any = "";
pages.forEach((page, index) => {
if (Object.is(page.path, to.path)) {
_index = index + "";
}
}
});
if (_index !== "") {
that.editableTabsValue = _index + "";
}
});
}
/**
* 设置左侧边距
*
* @param {{ offsetWidth: number; }} tag
* @param {number} leftWidth
* @memberof TabPageExp
*/
public setLeft(tag: { offsetWidth: number }, leftWidth: number) {
if (tag) {
const scrollBody: any = this.$refs.scrollBody;
if (leftWidth < -this.styleLeft) {
this.styleLeft = -leftWidth;
} else if (
leftWidth + tag.offsetWidth >
scrollBody.offsetWidth - this.styleLeft
) {
this.styleLeft -=
leftWidth +
tag.offsetWidth -
(scrollBody.offsetWidth - this.styleLeft);
}
}
}
/**
* 执行行为操作
*
* @param {string} name
* @memberof TabPageExp
*/
public doTagAction(name: string) {
if (Object.is(name, "closeAll")) {
this.$store.commit("removeAllPage");
this.gotoPage();
} else if (Object.is(name, "closeOther")) {
this.$store.commit("removeOtherPage");
this.moveToView(this.$route);
}
}
}
</script>
<style lang="less">
@import './tab-page-exp.less';
@import "./tab-page-exp.less";
</style>
src/styles/default.less
浏览文件 @ c129eeef
......@@ -63,10 +63,11 @@
}
.view-container {
height: calc(100% - 38px);
// height: 100%;
// display: flex;
padding: 0 15px;
height: calc(100% - 65px);
padding: 0 12px;
margin: 0px 12px;
background: white;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
// flex-direction: column;
> .view-card {
height: 100%;
......@@ -110,11 +111,16 @@
.viewcontainer2 {
height: 100%;
width: 100%;
padding: 0px 12px !important;
margin: 0px !important;
-webkit-box-shadow: none !important;
}
.viewcontainer3 {
height: 100%;
width: 100%;
padding: 0px;
padding: 0px 12px !important;
margin: 0px !important;
-webkit-box-shadow: none !important;
}
......@@ -207,7 +213,7 @@
}
}
.view-container.degridview, .view-container.degridview9, .view-container.dewfgridview, .view-container.delistview, .view-container.delistview9, .view-container.dedataview, .view-container.dedataview9, .view-container.decalendarview, .view-container.decalendarview9{
.view-container.degridview, .view-container.degridview9, .view-container.dewfgridview, .view-container.delistview, .view-container.delistview9, .view-container.dedataview, .view-container.dedataview9{
>.view-card.view-no-caption{
>.ivu-card-body{
height: 100%;
......
src/theme/blue.theme.less
浏览文件 @ c129eeef
/*** BRGIN:默认蓝色主题 ***/
.app_theme_blue {
> header {
> .ivu-layout-has-sider > .ivu-layout > header{
background-color: #2d5f8b;
color: #6ba1d1;
.app-theme-icon {
color: #6ba1d1;
}
.page-logo {
color: #fff;
}
.header-right {
> div:hover {
background: #3774aa;
}
}
.header-left {
i{
color:#b4bcc8;
}
i:hover{
color:#fff;
}
> .app-breadcrumb{
> span .el-breadcrumb__item .el-breadcrumb__inner{
a{
color:#b4bcc8 !important;
cursor: pointer !important;
}
a:last-child:hover{
color:#fff !important;
}
}
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2d5f8b;
......@@ -47,29 +63,31 @@
color: #6ba1d1;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #d64635;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #4276a4;
.el-menu-item:hover, .el-menu-item.is-active {
.el-menu-item:hover, .el-menu-item:hover {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu_title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item.is-active{
border-left: 4px solid #d64635;
background: #3c6c95 !important;
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
background: #4276a4;
}
}
.el-submenu__title, .el-menu-item {
......@@ -78,9 +96,16 @@
color: #c9dff5;
}
}
.el-submenu__title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item {
border-top: 1px solid #4276a4;
background: #4276a4;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #4276a4;
......@@ -97,5 +122,8 @@
.ivu-menu-submenu-title{
color: #f5f5f5;
}
.sider-top{
color:#fff;
}
}
/*** END:默认蓝色主题 ***/
\ No newline at end of file
src/theme/dark-blue.theme.less
浏览文件 @ c129eeef
/*** BRGIN:默认Dark Blue主题 ***/
.app_theme_darkblue {
> header {
background-color: #2b3643;
color: #606d80;
.app-theme-icon {
color: #606d80;
}
.page-logo {
color: #fff;
}
.header-right {
> div:hover {
background: #3b4a5c;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2b3643;
color: #606d80;
i {
color: #606d80;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #364150;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #364150;
.sider-top {
.ivu-icon {
background: #2b3643;
color: #606d80;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1caf9a;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #364150;
.el-menu-item:hover, .el-menu-item.is-active {
> .ivu-layout-has-sider > .ivu-layout > header{
background-color: #2b3643;
color: #606d80;
.app-theme-icon {
color: #606d80;
}
.header-right {
> div:hover {
background: #3b4a5c;
}
}
.header-left {
i{
color:#b4bcc8;
}
i:hover{
color:#fff;
}
> .app-breadcrumb{
> span .el-breadcrumb__item .el-breadcrumb__inner{
a{
color:#b4bcc8 !important;
cursor: pointer !important;
}
a:last-child:hover{
color:#fff !important;
}
}
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2b3643;
color: #606d80;
i {
color: #606d80;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #364150;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #364150;
.sider-top {
.ivu-icon {
background: #2b3643;
color: #606d80;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #364150;
.el-menu-item:hover, .el-menu-item:hover {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu__title:hover{
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-menu-item.is-active{
border-left: 4px solid #1caf9a;
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
.el-submenu__title, .el-menu-item {
color: #b4bcc8;
i {
color: #b4bcc8;
}
}
.el-menu-item {
border-top: 1px solid #364150;
background: #364150;
}
.el-submenu {
border-top: 1px solid #364150;
background: #364150;
> .el-menu {
border-top: 1px solid #364150;
background: #364150;
}
}
}
.ivu-menu-light{
background: #364150;
}
.ivu-menu-submenu-title{
color: #fff;
color:white;
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #364150;
}
}
.el-submenu__title, .el-menu-item {
color: #b4bcc8;
i {
color: #b4bcc8;
}
}
.el-menu-item {
border-top: 1px solid #364150;
background: #364150;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #364150;
background: #364150;
> .el-menu {
border-top: 1px solid #364150;
background: #364150;
}
}
}
.ivu-menu-light{
background: #364150;
}
.ivu-menu-submenu-title{
color: #fff;
}
.sider-top{
color:#fff;
}
}
}
/*** END:默认Dark Blue主题 ***/
\ No newline at end of file
/*** END:默认Dark Blue主题 ***/
\ No newline at end of file
src/theme/default.theme.less
浏览文件 @ c129eeef
/*** BRGIN:默认亮色主题 ***/
.app-default-theme {
> header {
background-color: #e8eaec;
color: #aaaaaa;
.app-theme-icon {
color: #aaaaaa;
}
.page-logo {
color: #535c70;
}
.header-right {
> div:hover {
background: #d4d4d4;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1;
color: #aaaaaa;
i {
color: #aaaaaa;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6;
color: #666666;
i {
color: #666666;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9;
color: #666666 !important;
i {
color: #666666;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #f6f6f6;
.sider-top {
.ivu-icon {
background: #f6f6f6;
color: #aaaaaa;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1890ff;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6;
.el-menu-item:hover, .el-menu-item.is-active {
> header {
background-color: #e8eaec;
color: #aaaaaa;
.app-theme-icon {
color: #aaaaaa;
}
.header-right {
> div:hover {
background: #d4d4d4;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1;
color: #aaaaaa;
i {
color: #aaaaaa;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6;
color: #666666;
i {
color: #666666;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9;
color: #666666 !important;
i {
color: #666666;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #f6f6f6;
.sider-top {
.ivu-icon {
background: #f6f6f6;
color: #aaaaaa;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6;
.el-menu-item:hover, .el-menu-item:hover,.el-menu-item.is-active {
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-submenu__title:hover{
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-menu-item.is-active{
border-left: 4px solid #1890ff;
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
}
.el-submenu__title, .el-menu-item {
color: #666666;
i {
color: #666666;
}
}
.el-menu-item {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
.el-submenu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
> .el-menu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
}
}
.ivu-menu-light{
background: #f6f6f6;
}
.ivu-menu-submenu-title{
color: #000;
}
.el-submenu.is-opened, .el-submenu:hover{
> .el-submenu__title {
background: #f6f6f6;
}
}
.el-submenu__title, .el-menu-item {
color: #666666;
i {
color: #666666;
}
}
.el-menu-item {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
border-left: 4px solid transparent;
}
.el-submenu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
> .el-menu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
}
}
.ivu-menu-light{
background: #f6f6f6;
}
.ivu-menu-submenu-title{
color: #000;
}
.sider-top{
color:#000;
}
}
}
/*** END:默认亮色主题 ***/
\ No newline at end of file
/*** END:默认亮色主题 ***/
\ No newline at end of file
src/utils/app-modal/app-modal.less
浏览文件 @ c129eeef
......@@ -11,7 +11,7 @@
padding: 0;
height: calc(100% - 52px);
.view-container{
padding: 15px;
padding: 12px;
}
}
}
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或