gameui/drawing
2
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

展示model选择

Browse Source
This commit is contained in:
桜華
2023-02-13 23:35:05 +08:00
parent c5ec54ece6
commit 3bb0139810
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
pages/index.vue
View File

@@ -4,15 +4,15 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
aside.p-4(class="flex flex-col divide-y divide-white/10 pt-6 space-y-6 lg:overflow-y-auto scrollbar-hide") aside.p-4(class="flex flex-col divide-y divide-white/10 pt-6 space-y-6 lg:overflow-y-auto scrollbar-hide")
div div
p.font-bold Filter p.font-bold Filter
p.text-gray-400 尝试可以应用于您的图像的不同风格样式 p.text-gray-400 尝试可以应用于您的图像的不同风格样式 {{ imageCreate.models_show }}
div.flex.flex-wrap.gap-2.items-center.pt-2 div.flex.flex-wrap.gap-2.items-center.pt-2
div(v-for="item in filters" class="w-5/16 h-20 bg-gray-500 rounded-lg") div.cursor-pointer.select-none(v-for="(item, index) in filters" :key="item.name" class="w-5/16 h-20 bg-gray-500 rounded-lg")
div.flex.justify-center.items-center.h-full(v-if="!item.name" :click="imageCreate.models_show = !imageCreate.models_show") div.flex.justify-center.items-center.h-full(v-if="!item.name" @click="ModelsShow(index)")
img.w-6.h-6(:src="IconPlusCircle" alt="PlusCircle") img.w-6.h-6(:src="IconPlusCircle" alt="PlusCircle")
div.flex.items-end.h-full(v-else :style="`background-image: url(${item.image}); background-size: cover; background-position: center;`") div.flex.items-end.h-full(v-else :style="`background-image: url(${item.image}); background-size: cover; background-position: center;`" @click="ModelsShow(index)")
p(class="p-1") {{item.name}} p(class="p-1") {{item.name}}
// 风格滤镜列表(弹出/悬浮) // 风格滤镜列表(弹出/悬浮)
div(v-if="imageCreate.models_show" class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 394px; top: 6vh;") div(v-show="imageCreate.models_show" class="absolute w-screen lg:w-[400px] bottom-2 flex flex-col" style="max-height: 80vh; left: 394px; top: 6vh;")
div(class="overflow-auto scrollbar-hide transition-[transform,opacity] duration-[50ms] z-50 pai-border rounded-lg bg-gray-900 shadow-2xl opacity-100") div(class="overflow-auto scrollbar-hide transition-[transform,opacity] duration-[50ms] z-50 pai-border rounded-lg bg-gray-900 shadow-2xl opacity-100")
div(class="space-y-2 items-center absolute overflow-hidden w-[calc(100%-2px)] px-4 pb-2 pt-4 lg:pt-2 z-50 bg-inherit rounded-t-lg border-b border-low border-white border-opacity-10") div(class="space-y-2 items-center absolute overflow-hidden w-[calc(100%-2px)] px-4 pb-2 pt-4 lg:pt-2 z-50 bg-inherit rounded-t-lg border-b border-low border-white border-opacity-10")
div(class="flex justify-between") div(class="flex justify-between")
@@ -196,7 +196,7 @@ import ImageDemo from 'assets/image/demo.png'
import IconPlusCircle from 'assets/icon/plus-circle.svg' import IconPlusCircle from 'assets/icon/plus-circle.svg'
const views = ref({ const views = ref({
cardMode: true, cardMode: true, // 卡片模式, 列表模式
active: true, active: true,
}) })
@@ -263,6 +263,11 @@ const sizes = ref([
{ id:'image-dim-6', width:768, height:512 }, { id:'image-dim-6', width:768, height:512 },
]) ])
const ModelsShow = (index) => {
console.log(index)
imageCreate.value.filter_ctive = index
imageCreate.value.models_show = !imageCreate.value.models_show
}
</script> </script>