<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: 400
    },
    title: {
        type: String,
        default: '标题'
    }
})
const width = ref(`${props.w}px`);
const height = ref(`${props.w / 4 * 3}px`);
const titleH = ref(`${props.w / 4}px`);
const bodyT = ref(`${props.w / 6}px`)
const bodyH = ref(`${props.w / 2}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-left-bg.png)
        background-size auto 100%
        background-repeat no-repeat
        background-position left
        span
            display block
            padding 25px 0 0 60px
            font-weight bold
    .module-card-body
        position absolute
        width 100%
        left 0
        top v-bind(bodyT)
        height v-bind(bodyH)
</style>