42 lines
		
	
	
		
			750 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			42 lines
		
	
	
		
			750 B
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <section class="ai-card">
 | |
|     <ai-bar v-if="!hideTitle" :title="title" v-bind="$attrs">
 | |
|       <template #title>
 | |
|         <slot name="title"></slot>
 | |
|       </template>
 | |
|       <template #right>
 | |
|         <slot name="right"></slot>
 | |
|       </template>
 | |
|     </ai-bar>
 | |
|     <div class="ai-card__body">
 | |
|       <slot name="content"></slot>
 | |
|     </div>
 | |
|   </section>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| export default {
 | |
|   name: 'AiCard',
 | |
|   props: {
 | |
|     title: {
 | |
|       type: String
 | |
|     },
 | |
|     hideTitle: Boolean
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style scoped lang="scss">
 | |
| .ai-card {
 | |
|   margin-bottom: 20px;
 | |
|   background: #FFFFFF;
 | |
|   overflow: hidden;
 | |
|   box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
 | |
|   border-radius: 2px;
 | |
| 
 | |
|   .ai-card__body {
 | |
|     padding: 12px 40px 22px;
 | |
|   }
 | |
| }
 | |
| </style>
 |