d2d8cbe65c
Former-commit-id: 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 3abf62d49fb5fe3cd3a0af903715f9f6212a3e99 [formerly 01e0619729e2c82b414d8021bd6dd8366a77a2a6 [formerly c9ecfb5a06c4c8efbd3a462151689aae96d969a8]]]]] Former-commit-id: dd8bf6fcb3bd8f8e26ffe641116c1553ed79f1c8 Former-commit-id: 1e1e94223145fc3e6cb1f99c2ce8498e7c65d297 Former-commit-id: 501f1733b5b8e2d563c1534dec6959fc2c7a2062 [formerly 40e4587ab21042b4bcdc9de9710ba42dd7947e76] Former-commit-id: 9a702dd00fb9817c6173596e45fc43f9139d5e77 Former-commit-id: 40f0b9178a03920b3051b52e003575875e3e95cd Former-commit-id: 5308f1435a0a8c45440b6cf8a4b3503e05327ce0 Former-commit-id: b954ec0ba7a0350cfe02f60e8d65d326276ffd82 Former-commit-id: fb45d77d2d3aa4ba2d2a3cb76240e1dcb864fcfb
74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
<template>
|
|
<div class="container-component" :class="{responsive}">
|
|
<!-- [card] 卡片容器 -->
|
|
<el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr d2-mb">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
</el-card>
|
|
<!-- [ghost] 隐形的容器 -->
|
|
<div v-if="type === 'ghost'" class="d2-container-ghost">
|
|
<slot name="header"/>
|
|
<slot/>
|
|
</div>
|
|
<!-- [container-full] 撑满 -->
|
|
<d2-container-full v-if="type === 'full'">
|
|
<slot v-if="$slots.header" name="header" slot="header"/>
|
|
<slot/>
|
|
<slot v-if="$slots.footer" name="footer" slot="footer"/>
|
|
</d2-container-full>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import d2ContainerFull from './components/d2-container-full.vue'
|
|
export default {
|
|
name: 'd2-container',
|
|
props: {
|
|
// 容器样式
|
|
type: {
|
|
type: String,
|
|
required: false,
|
|
default: 'card'
|
|
},
|
|
// 是否开启响应式尺寸变化
|
|
responsive: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: false
|
|
}
|
|
},
|
|
components: {
|
|
'd2-container-full': d2ContainerFull
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '~@/assets/style/public.scss';
|
|
.container-component {
|
|
position: absolute;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
overflow: auto;
|
|
}
|
|
@media (min-width: 576px) {
|
|
// 根据你的需要在这里添加样式
|
|
}
|
|
@media (min-width: 768px) {
|
|
// 根据你的需要在这里添加样式
|
|
}
|
|
@media (min-width: 992px) {
|
|
// 根据你的需要在这里添加样式
|
|
}
|
|
// 在大于1920分辨率的时候
|
|
@media (min-width: 1921px) {
|
|
.container-component.responsive {
|
|
margin: 0px auto;
|
|
margin-bottom: 20px;
|
|
max-width: 1920px - 200px;
|
|
}
|
|
}
|
|
</style>
|