style: 超过 20 条无滑动条

develop
时启龙 2024-11-19 16:45:09 +08:00
parent fff8e458d3
commit f64b12a86a
3 changed files with 44 additions and 48 deletions

View File

@ -1,18 +1,16 @@
<template> <template>
<div> <div class="wrapper">
<AmsPosition></AmsPosition> <AmsPosition></AmsPosition>
<div class="warpper"> <split-pane class="split-pane" :min-percent="10" :default-percent="20" split="vertical">
<split-pane class="split-pane" :min-percent="10" :default-percent="20" split="vertical"> <template slot="paneL">
<template slot="paneL"> <Tree ref="TreeRef" category="template" @handleNodeClick="handleNodeClick"></Tree>
<Tree ref="TreeRef" category="template" @handleNodeClick="handleNodeClick"></Tree> </template>
</template> <template slot="paneR">
<template slot="paneR"> <List ref="listRef" :currentModuleId="currentModuleId" @handleCreate="handleCreate" @getDetail="getDetail"></List>
<List ref="listRef" :currentModuleId="currentModuleId" @handleCreate="handleCreate" @getDetail="getDetail"></List> </template>
</template> </split-pane>
</split-pane> <AddData :addData="addData" v-if="visible" @goBack="goBack"></AddData>
<AddData :addData="addData" v-if="visible" @goBack="goBack"></AddData> <Detail :detail="detail" v-if="detailVisible" @goBack="goBack"></Detail>
<Detail :detail="detail" v-if="detailVisible" @goBack="goBack"></Detail>
</div>
</div> </div>
</template> </template>
@ -103,8 +101,13 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warpper { .wrapper {
height: calc(100vh);
background-color: #fff; background-color: #fff;
} }
::v-deep .vue-splitter-container {
display: flex !important;
.splitter-pane {
position: relative !important;
}
}
</style> </style>

View File

@ -1,16 +1,14 @@
<template> <template>
<div> <div class="wrapper">
<AmsPosition></AmsPosition> <AmsPosition></AmsPosition>
<div class="warpper"> <split-pane class="split-pane" :min-percent="10" :default-percent="20" split="vertical">
<split-pane class="split-pane" :min-percent="10" :default-percent="20" split="vertical"> <template slot="paneL">
<template slot="paneL"> <Tree ref="TreeRef" category="task" @handleNodeClick="handleNodeClick"></Tree>
<Tree ref="TreeRef" category="task" @handleNodeClick="handleNodeClick"></Tree> </template>
</template> <template slot="paneR">
<template slot="paneR"> <Content ref="ListRef" :currentModuleId="currentModuleId"></Content>
<Content ref="ListRef" :currentModuleId="currentModuleId"></Content> </template>
</template> </split-pane>
</split-pane>
</div>
</div> </div>
</template> </template>
@ -71,8 +69,13 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warpper { .wrapper {
height: calc(100vh);
background-color: #fff; background-color: #fff;
} }
::v-deep .vue-splitter-container {
display: flex !important;
.splitter-pane {
position: relative !important;
}
}
</style> </style>

View File

@ -173,7 +173,16 @@ export default {
}, },
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.wrapper {
background-color: #fff;
}
::v-deep .vue-splitter-container {
display: flex !important;
.splitter-pane {
position: relative !important;
}
}
.field-item { .field-item {
margin-top: 10px; margin-top: 10px;
cursor: move; cursor: move;
@ -276,25 +285,6 @@ span.title {
background-color: #dff0d8; background-color: #dff0d8;
} }
.wrapper {
height: calc(100vh - 110px);
.leftC {
height: 100%;
margin-left: 5px;
}
.rightC {
height: 100%;
margin-left: 10px;
}
.float-right {
position: absolute;
right: 10px;
top: 10px;
}
}
.splitter-pane-resizer { .splitter-pane-resizer {
margin-left: 20px; margin-left: 20px;
} }