forked from github/dataease
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
<template>
|
|
<div class="content-container">
|
|
<div v-if="$slots.header || header" class="content-container__header">
|
|
<slot name="header">
|
|
<back-button v-if="showBack" :path="backPath" :name="backName" :to="backTo" />
|
|
{{ header }}
|
|
</slot>
|
|
</div>
|
|
<div v-if="$slots.toolbar" class="content-container__toolbar">
|
|
<slot name="toolbar" />
|
|
</div>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BackButton from '@/components/back-button'
|
|
|
|
export default {
|
|
name: 'LayoutContent',
|
|
components: { BackButton },
|
|
props: {
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
header: String,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
backPath: String,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
backName: String,
|
|
// eslint-disable-next-line vue/require-default-prop
|
|
backTo: Object
|
|
},
|
|
computed: {
|
|
showBack({ backPath, backName, backTo }) {
|
|
return backPath || backName || backTo
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "~@/styles/mixin.scss";
|
|
@import "~@/styles/variables.scss";
|
|
|
|
.content-container {
|
|
transition: 0.3s;
|
|
color: $--color-text-primary;
|
|
background-color: #FFFFFF;
|
|
overflow: auto;
|
|
height: 100%;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 14%);
|
|
box-sizing: border-box;
|
|
|
|
.content-container__header {
|
|
line-height: 60px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.content-container__toolbar {
|
|
@include flex-row(space-between, center);
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
</style>
|