whychdw
2020-07-29 f0d443cb6997a1979eb6c256f1ca3624aab1b45b
src/components/ContentBox.vue
@@ -1,10 +1,13 @@
<template>
    <div class="content-box" :class="{'no-border': noborder}">
    <div class="content-box" :class="{'no-border': noborder, 'footer': footer}">
        <div class="content-box-title" :class="getTitlePos">
            <slot name="title">{{title}}</slot>
        </div>
        <div class="content-box-content">
            <slot></slot>
        </div>
        <div class="content-box-footer" v-if="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
@@ -25,6 +28,10 @@
            type: Boolean,
            default: false
        },
        footer: {
            type: Boolean,
            default: false,
        }
    },
    computed: {
        getTitlePos: function() {
@@ -72,6 +79,22 @@
    bottom: 0;
    overflow-y: auto;
}
.footer .content-box-content {
    bottom: 0.32rem;
}
.content-box-footer {
    position: absolute;
    bottom: 0;
    left: 0.04rem;
    right: 0.04rem;
    padding-left: 0.1rem;
    border-radius: 0.06rem;
    font-size: 0.14rem;
    text-align: center;
    line-height: 0.32rem;
    font-weight: bold;
    z-index: 1;
}
</style>