|  |  |  | 
|---|
|  |  |  | <!-- 组合卡片 --> | 
|---|
|  |  |  | <view class="combination-card"> | 
|---|
|  |  |  | <view class="combination-card_wrapper"> | 
|---|
|  |  |  | <view class="combination-card_top" v-show="showTop"> | 
|---|
|  |  |  | <view class="combination-card_top" v-if="showTop"> | 
|---|
|  |  |  | <view class="combination-card_top__content"> | 
|---|
|  |  |  | <slot name="top"></slot> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | 
|---|
|  |  |  | <view class="combination-card_content"> | 
|---|
|  |  |  | <slot name="center"></slot> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | <view class="combination-card_bottom" v-show="showBottom"> | 
|---|
|  |  |  | <view class="combination-card_bottom" v-if="showTop"> | 
|---|
|  |  |  | <slot name="bottom" a="$slots.name"></slot> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | showTop: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | showBottom: { | 
|---|
|  |  |  | type: Boolean, | 
|---|
|  |  |  | default: true | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss" scoped> | 
|---|
|  |  |  | .combination-card { | 
|---|
|  |  |  | width: 91%; | 
|---|
|  |  |  | width: 94%; | 
|---|
|  |  |  | // height: vww(196); | 
|---|
|  |  |  | border: 1px solid #dddddd; | 
|---|
|  |  |  | margin: 0 auto vww(16) ; | 
|---|
|  |  |  | border: vww(1) solid #dddddd; | 
|---|
|  |  |  | border-radius: vww(4); | 
|---|
|  |  |  | margin: 0 auto vww(16) ; | 
|---|
|  |  |  | box-shadow: 0 2px 16px #e5e5e5, 0 0 1px #e5e5e5, 0 0 1px #e5e5e5; | 
|---|
|  |  |  | .combination-card_wrapper { | 
|---|
|  |  |  | font-size:vww(13); | 
|---|
|  |  |  | .combination-card_top { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|
|  |  |  | </style> | 
|---|