[优化] 栅格文档

This commit is contained in:
就眠儀式 2021-11-17 23:51:15 +08:00
parent 624d4916e1
commit b817d323f6
4 changed files with 57 additions and 51 deletions

View File

@ -5,12 +5,12 @@
<template> <template>
<lay-row space="10"> <lay-row space="10">
<lay-col md="6"><div class="grid-demo">1</div></lay-col> <lay-col md="12"><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="12"><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="6"><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="6"><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="6"><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="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
</lay-row> </lay-row>
</template> </template>
@ -48,8 +48,8 @@ export default {
<template> <template>
<lay-row space="10"> <lay-row space="10">
<lay-col md="6"><div class="grid-demo">1</div></lay-col> <lay-col md="12"><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="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
</lay-row> </lay-row>
</template> </template>
@ -87,8 +87,8 @@ export default {
<template> <template>
<lay-row space="10"> <lay-row space="10">
<lay-col md="6" sm="6" xs="12"><div class="grid-demo">1</div></lay-col> <lay-col md="12" sm="12" xs="24"><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 grid-demo-bg1">2</div></lay-col>
</lay-row> </lay-row>
</template> </template>
@ -113,12 +113,12 @@ export default {
<template> <template>
<lay-container fluid> <lay-container fluid>
<lay-row space="10"> <lay-row space="10">
<lay-col md="2" sm="6" xs="12"><div class="grid-demo">1</div></lay-col> <lay-col md="4" sm="12" xs="24"><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="4" sm="12" xs="24"><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="4" sm="12" xs="24"><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="4" sm="12" xs="24"><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="4" sm="12" xs="24"><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 grid-demo-bg1">6</div></lay-col>
</lay-row> </lay-row>
</lay-container> </lay-container>
</template> </template>

View File

@ -5281,27 +5281,6 @@ body .layui-util-face .layui-layer-content {
width: 28px; 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 { .layui-anim {
-webkit-animation-duration: 0.3s; -webkit-animation-duration: 0.3s;
-webkit-animation-fill-mode: both; -webkit-animation-fill-mode: both;

View 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;
}

View File

@ -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> <template>
<div class="layui-empty"> <div class="layui-empty">
<div class="layui-empty-image"> <div class="layui-empty-image">
@ -7,17 +27,4 @@
{{ description }} {{ description }}
</div> </div>
</div> </div>
</template> </template>
<script setup name="LayEmpty" lang="ts">
import { defineProps, withDefaults } from 'vue'
const props = withDefaults(
defineProps<{
description?: string
}>(),
{
description: '暂无数据',
}
)
</script>