<template>
    <div class="module-card">
        <div class="module-card-title">
            <span>{{ props.title }}</span>
        </div>
        <div class="module-card-body">
            <slot></slot>
        </div>
    </div>
</template>

<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps({
    w: {
        type: Number,
        default: 800
    },
    title: {
        type: String,
        default: '标题'
    }
})
const width = ref(`${props.w}px`);
const height = ref(`300px`);
const titleH = ref(`${props.w / 8}px`);
const bodyT = ref(`${props.w / 10}px`)
const bodyH = ref(`${props.w / 4}px`);
</script>

<style lang="stylus" scoped>
.module-card
    width v-bind(width)
    height v-bind(height)
    color #FFFFFF
    position relative
    .module-card-title
        height v-bind(titleH)
        background-image url(/assets/imgs/module/title-center-bg.png)
        background-size auto 100%
        background-repeat no-repeat
        background-position center
        text-align center
        span
            display block
            padding 25px 0 0 0
            font-weight bold
    .module-card-body
        position absolute
        width 100%
        left 0
        top v-bind(bodyT)
        height v-bind(bodyH)
</style>