update 面包屑,页面样式

This commit is contained in:
赵霄
2023-09-22 10:27:00 +08:00
parent 7360dcff84
commit 84315607bc
4 changed files with 35 additions and 26 deletions
+2 -2
View File
@@ -1,7 +1,7 @@
@primary-color: #D52C26;
/* 页面不出全局滚动条的高度,如果在vue文件使用,就只能在style里引入common.less */
/*59px是用户信息那块,52px是标签,12px是上下的留白*/
@page-content-h: calc(100vh - 59px - 52px - 12px);
/*59px是用户信息那块,21px是面包屑,24px是上下的留白*/
@page-content-h: calc(100vh - 59px - 21px - 24px);
/*列表上方操作按钮区域*/
/*.ant-card-body .table-operator {
+20 -16
View File
@@ -4,21 +4,23 @@
<!-- update-begin- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
<contextmenu :itemList="menuItemList" :visible.sync="menuVisible" style="z-index: 9999;" @select="onMenuSelect" />
<!-- update-end- author:sunjianlei --- date:20191009 --- for: 提升右键菜单的层级 -->
<a-tabs
@contextmenu.native="e => onContextmenu(e)"
v-if="multipage"
:active-key="activePage"
class="tab-layout-tabs"
style="height:52px"
:hide-add="true"
type="editable-card"
@change="changePage"
@tabClick="tabCallBack"
@edit="editPage">
<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
<span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>
</a-tab-pane>
</a-tabs>
<!--<a-tabs-->
<!-- @contextmenu.native="e => onContextmenu(e)"-->
<!-- v-if="multipage"-->
<!-- :active-key="activePage"-->
<!-- class="tab-layout-tabs"-->
<!-- style="height:52px"-->
<!-- :hide-add="true"-->
<!-- type="editable-card"-->
<!-- @change="changePage"-->
<!-- @tabClick="tabCallBack"-->
<!-- @edit="editPage">-->
<!-- <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">-->
<!-- <span slot="tab" :pagekey="page.fullPath">{{ page.meta.title }}</span>-->
<!-- </a-tab-pane>-->
<!--</a-tabs>-->
<breadcrumb/>
<div style="margin: 12px 12px 0;">
<!-- update-begin-author:taoyan date:20201221 for:此处删掉transition标签 不知道为什么加上后 页面路由切换的时候即1及菜单切到2及菜单的时候 两个菜单页面会同时出现300-500秒左右 -->
<keep-alive v-if="multipage">
@@ -42,6 +44,7 @@ import { triggerWindowResizeEvent } from '@/utils/util'
import Vue from 'vue'
import { CACHE_INCLUDED_ROUTES } from '@/store/mutation-types'
import BlankLayout from './BlankLayout.vue'
import Breadcrumb from '../tools/Breadcrumb.vue'
const indexKey = '/'
@@ -50,7 +53,8 @@ export default {
components: {
BlankLayout,
GlobalLayout,
Contextmenu
Contextmenu,
Breadcrumb
},
mixins: [mixin, mixinDevice],
data () {
+13 -7
View File
@@ -10,6 +10,8 @@
</template>
<script>
import '@assets/less/common.less'
export default {
data () {
return {
@@ -22,15 +24,12 @@ export default {
},
methods: {
getBreadcrumb () {
console.log('this.$route.matched', this.$route.matched)
this.breadList = []
this.breadList.push({ name: 'dashboard-analysis', path: '/dashboard/analysis', meta: { title: '首页' } })
this.name = this.$route.name
this.$route.matched.forEach((item) => {
// item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
this.breadList.push(item)
if (!(!item.path && item.name === 'dashboard')) {
this.breadList.push(item)
}
})
}
},
@@ -42,6 +41,13 @@ export default {
}
</script>
<style scoped>
<style scoped lang="less">
.ant-breadcrumb {
margin: 12px;
}
.ant-breadcrumb > span:last-child {
color: @primary-color;
font-weight: 550;
}
</style>
@@ -191,7 +191,6 @@ import SplitDetailNodeAdd from './modules/SplitDetailNodeAdd.vue'
// 批量设置弹框
import SplitDetailBatchSetting from './modules/SplitDetailBatchSetting.vue'
import { mapGetters } from 'vuex'
import { getAction } from '../../../api/manage.js'
import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin.js'
import {
getDocSplitTableHeader,