minhnt-dev: make UI

This commit is contained in:
MoreStrive
2024-05-30 21:32:51 +07:00
parent 2aa5607c48
commit b52352660d
16 changed files with 315 additions and 169 deletions
@@ -141,7 +141,7 @@ const CLASS_FOR_SECTION = computed(() => {
</script>
<template>
<div class="section_layout" :class="[CLASS_FOR_SECTION.section_layout]">
<div class="section_layout grid gap-x-5 gap-y-2.5" :class="[CLASS_FOR_SECTION.section_layout]">
<div
v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
:key="index"
@@ -154,9 +154,6 @@ const CLASS_FOR_SECTION = computed(() => {
<style lang="scss" scoped>
.section_layout {
display: grid;
gap: 10px;
&.basic_column {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@@ -14,8 +14,8 @@ const props = defineProps<{
<template>
<section class="section-container">
<h2 class="section__title mb-3" v-if="props.label">{{ props.label || '' }}</h2>
<div class="section_layout">
<h2 class="text-4xl mb-3 font-600" v-if="props.label">{{ props.label || '' }}</h2>
<div class="layout_define grid grid-cols-1 gap-x-10 gap-y-2.5">
<template v-if="props.layout">
<DynamicLayout
:layout="props.layout"
@@ -24,25 +24,6 @@ const props = defineProps<{
:section= "props.section"
/>
</template>
<template v-else>
<div>
Bấm để chọn layout
</div>
</template>
</div>
</section>
</template>
<style lang="scss" scoped>
.section_layout {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 10px;
.empty {
min-height: 100px;
border-radius: 6px;
background: #409eff;
}
}
</style>