refactor(client): use css modules
This commit is contained in:
		
							parent
							
								
									bb5d2bda51
								
							
						
					
					
						commit
						c1b6378951
					
				
					 1 changed files with 7 additions and 7 deletions
				
			
		|  | @ -1,27 +1,27 @@ | ||||||
| <template> | <template> | ||||||
| <div class="terlnhxf"> | <div :class="$style.root"> | ||||||
| 	<slot></slot> | 	<slot></slot> | ||||||
| </div> | </div> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts" setup> | <script lang="ts" setup> | ||||||
|  | import { provide } from 'vue'; | ||||||
|  | 
 | ||||||
| const props = withDefaults(defineProps<{ | const props = withDefaults(defineProps<{ | ||||||
| 	minWidth?: number; | 	minWidth?: number; | ||||||
| }>(), { | }>(), { | ||||||
| 	minWidth: 210, | 	minWidth: 210, | ||||||
| }); | }); | ||||||
| 
 | 
 | ||||||
|  | provide('splited', true); | ||||||
|  | 
 | ||||||
| const minWidth = props.minWidth + 'px'; | const minWidth = props.minWidth + 'px'; | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" scoped> | <style lang="scss" module> | ||||||
| .terlnhxf { | .root { | ||||||
| 	display: grid; | 	display: grid; | ||||||
| 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr)); | 	grid-template-columns: repeat(auto-fill, minmax(v-bind('minWidth'), 1fr)); | ||||||
| 	grid-gap: 12px; | 	grid-gap: 12px; | ||||||
| 
 |  | ||||||
| 	> ::v-deep(*) { |  | ||||||
| 		margin: 0 !important; |  | ||||||
| 	} |  | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue