[优化] 栅格文档
This commit is contained in:
parent
624d4916e1
commit
b817d323f6
@ -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>
|
||||||
|
@ -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;
|
||||||
|
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>
|
<template>
|
||||||
<div class="layui-empty">
|
<div class="layui-empty">
|
||||||
<div class="layui-empty-image">
|
<div class="layui-empty-image">
|
||||||
@ -8,16 +28,3 @@
|
|||||||
</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>
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user