55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<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> |