模型选择器
This commit is contained in:
@@ -7,9 +7,14 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
p.text-gray-400 尝试可以应用于您的图像的不同风格样式 {{ imageCreate.models_show }}
|
||||
div.flex.flex-wrap.gap-2.items-center.pt-2
|
||||
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="ModelsShow(index)")
|
||||
div.flex.justify-center.items-center.h-full(v-if="!item.name" @click="ModelsShow(index, item)")
|
||||
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;`" @click="ModelsShow(index)")
|
||||
div.flex.items-end.h-full.border-purple-700.rounded-md(
|
||||
v-else
|
||||
:style="`background-image: url(${item.image}); background-size: cover; background-position: center;`"
|
||||
:class="{'border-2': new_task.model === item.name}"
|
||||
@click="ModelsChange(item)"
|
||||
)
|
||||
p(class="p-1") {{item.name}}
|
||||
// 风格滤镜列表(弹出/悬浮)
|
||||
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;")
|
||||
@@ -26,7 +31,12 @@ div(class="mt-[60px] grid grid-cols-1 lg:grid-cols-4 xl:grid-cols-5 text-white b
|
||||
div(class="h-32 lg:h-28")
|
||||
div(class="grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-3 gap-2 p-2 pt-0")
|
||||
template(v-for="item in models" :key="item.name")
|
||||
button.h-24(class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden active:border-blue-300/50 border-transparent hover:border-high" aria-label="Select filter style: Colorpop" style="transition-delay: 10ms;")
|
||||
button.h-24(
|
||||
class="transition-[transform,opacity] origin-center filter-button relative aspect-[6/5] duration-200 border-2 rounded-lg overflow-hidden active:border-blue-300/50 border-transparent hover:border-high"
|
||||
aria-label="Select filter style: Colorpop"
|
||||
style="transition-delay: 10ms;"
|
||||
@click="ModelsSelect(imageCreate.filter_ctive, item)"
|
||||
)
|
||||
span( style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;")
|
||||
img( alt="Colorpop" :src="item.image" decoding="async" data-nimg="fill" style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: cover;" sizes="100vw" srcset="https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 640w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 750w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 828w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1080w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1200w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 1920w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 2048w, https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png 3840w")
|
||||
div( class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 flex flex-col justify-end text-gray-100 text-left text-sm p-1") {{ item.name }}
|
||||
@@ -225,13 +235,18 @@ const imageCreate = ref({
|
||||
// 私有会话
|
||||
})
|
||||
|
||||
// 新任务表单
|
||||
const new_task = ref({
|
||||
model: 'None',
|
||||
})
|
||||
|
||||
|
||||
const filters = ref([
|
||||
{ name:'None', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop4', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
])
|
||||
|
||||
@@ -240,10 +255,10 @@ const models = ref([
|
||||
{ name:'Colorpop1', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop2', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop3', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop4', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop5', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop6', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
{ name:'Colorpop7', image:'https://storage.googleapis.com/pai-marketing/filters/elizaport_style.png' },
|
||||
])
|
||||
|
||||
const tasks = ref([
|
||||
@@ -263,12 +278,28 @@ const sizes = ref([
|
||||
{ id:'image-dim-6', width:768, height:512 },
|
||||
])
|
||||
|
||||
const ModelsShow = (index) => {
|
||||
console.log(index)
|
||||
imageCreate.value.filter_ctive = index
|
||||
// 显示模型列表
|
||||
const ModelsShow = (index, model) => {
|
||||
console.log(index, model)
|
||||
imageCreate.value.filter_ctive = index // 正在操作的坐标
|
||||
imageCreate.value.models_show = !imageCreate.value.models_show
|
||||
}
|
||||
|
||||
// 切换要使用的模型
|
||||
const ModelsChange = (model) => {
|
||||
console.log(model)
|
||||
new_task.value.model = model.name
|
||||
imageCreate.value.models_show = false
|
||||
}
|
||||
|
||||
// 选择模型到常用模型
|
||||
const ModelsSelect = (index, model) => {
|
||||
console.log(index, model)
|
||||
filters.value[index] = model
|
||||
new_task.value.model = model.name
|
||||
imageCreate.value.models_show = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Reference in New Issue
Block a user