[优化] 栅格文档
This commit is contained in:
		
							parent
							
								
									624d4916e1
								
							
						
					
					
						commit
						b817d323f6
					
				@ -5,12 +5,12 @@
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-row space="10">
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
     <lay-col md="3"><div class="grid-demo">3</div></lay-col>
 | 
			
		||||
     <lay-col md="3"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
 | 
			
		||||
     <lay-col md="3"><div class="grid-demo">5</div></lay-col>
 | 
			
		||||
     <lay-col md="3"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
 | 
			
		||||
     <lay-col md="12"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo">3</div></lay-col>
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo">5</div></lay-col>
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
 | 
			
		||||
  </lay-row>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -48,8 +48,8 @@ export default {
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-row space="10">
 | 
			
		||||
     <lay-col md="6"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="3" mdOffset="3"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
     <lay-col md="12"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
  </lay-row>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -87,8 +87,8 @@ export default {
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-row space="10">
 | 
			
		||||
     <lay-col md="6" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="6" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
     <lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
     <lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
  </lay-row>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -113,12 +113,12 @@ export default {
 | 
			
		||||
<template>
 | 
			
		||||
  <lay-container fluid>
 | 
			
		||||
    <lay-row space="10">
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">3</div></lay-col>
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo">5</div></lay-col>
 | 
			
		||||
      <lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
 | 
			
		||||
      <lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
 | 
			
		||||
    </lay-row>
 | 
			
		||||
  </lay-container>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
@ -5281,27 +5281,6 @@ body .layui-util-face .layui-layer-content {
 | 
			
		||||
  width: 28px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty {
 | 
			
		||||
  margin: 0 8px;
 | 
			
		||||
  font-size: 14px;
 | 
			
		||||
  line-height: 22px;
 | 
			
		||||
  text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-image {
 | 
			
		||||
  height: 100px;
 | 
			
		||||
  margin-bottom: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-image img {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  margin: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-description {
 | 
			
		||||
  margin: 0;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-anim {
 | 
			
		||||
  -webkit-animation-duration: 0.3s;
 | 
			
		||||
  -webkit-animation-fill-mode: both;
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										20
									
								
								src/module/empty/index.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										20
									
								
								src/module/empty/index.less
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,20 @@
 | 
			
		||||
.layui-empty {
 | 
			
		||||
    margin: 0 8px;
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    line-height: 22px;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-image {
 | 
			
		||||
    height: 100px;
 | 
			
		||||
    margin-bottom: 8px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-image img {
 | 
			
		||||
    height: 100%;
 | 
			
		||||
    margin: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.layui-empty-description {
 | 
			
		||||
    margin: 0;
 | 
			
		||||
}
 | 
			
		||||
@ -1,3 +1,23 @@
 | 
			
		||||
<script lang="ts">
 | 
			
		||||
export default {
 | 
			
		||||
  name: "LayEmpty",
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<script setup lang="ts">
 | 
			
		||||
import { defineProps, withDefaults } from "vue";
 | 
			
		||||
import "./index.less";
 | 
			
		||||
 | 
			
		||||
export interface LayEmptyProps {
 | 
			
		||||
  description?: string;
 | 
			
		||||
  image?: string;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(defineProps<LayEmptyProps>(), {
 | 
			
		||||
  description: "暂无数据",
 | 
			
		||||
});
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="layui-empty">
 | 
			
		||||
    <div class="layui-empty-image">
 | 
			
		||||
@ -7,17 +27,4 @@
 | 
			
		||||
      {{ description }}
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script setup name="LayEmpty" lang="ts">
 | 
			
		||||
import { defineProps, withDefaults } from 'vue'
 | 
			
		||||
 | 
			
		||||
const props = withDefaults(
 | 
			
		||||
  defineProps<{
 | 
			
		||||
    description?: string
 | 
			
		||||
  }>(),
 | 
			
		||||
  {
 | 
			
		||||
    description: '暂无数据',
 | 
			
		||||
  }
 | 
			
		||||
)
 | 
			
		||||
</script>
 | 
			
		||||
</template>
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user