<template>
|
<!-- 组合卡片 -->
|
<view class="combination-card">
|
<view class="combination-card_wrapper">
|
<view class="combination-card_top" v-show="showTop">
|
<view class="combination-card_top__content">
|
<slot name="top"></slot>
|
</view>
|
</view>
|
<view class="combination-card_content">
|
<slot name="center"></slot>
|
</view>
|
<view class="combination-card_bottom" v-show="showBottom">
|
<slot name="bottom" a="$slots.name"></slot>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
showTop: {
|
type: Boolean,
|
default: true
|
},
|
showBottom: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {};
|
},
|
methods: {},
|
mounted() {
|
console.log(this.showTop,'showTop--------')
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.combination-card {
|
width: 91%;
|
// height: vww(196);
|
border: 1px solid #dddddd;
|
margin: 0 auto vww(16) ;
|
.combination-card_wrapper {
|
font-size:vww(13);
|
.combination-card_top {
|
// height: vww(16);
|
padding:vww(8);
|
background-color: #f5f5f5;
|
border-bottom:1px solid #dddddd;
|
.combination-card_top__content{
|
display:flex;
|
align-items: center;
|
}
|
}
|
.combination-card_content {
|
// height: vww(98);
|
padding:vww(16);
|
}
|
.combination-card_bottom {
|
height: vww(16);
|
padding:vww(8);
|
background-color: #f5f5f5;
|
border-top:1px solid #dddddd;
|
display:flex;
|
justify-content: center;
|
}
|
}
|
}
|
</style>
|
