[优化] 栅格文档
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