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/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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或