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

列表排列方式

Browse Source
This commit is contained in:
桜華
2023-01-01 15:59:43 +08:00
parent be638bfd80
commit 595600f0b6
1 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pages/index.vue
View File

@@ -1,7 +1,7 @@
<template lang="pug"> <template lang="pug">
div.text-white.w-full.flex.bg-dark-900 div.text-white.w-full.flex.bg-dark-900
// 左侧信息 // 左侧信息
div.w-xs.border-r-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-4 div.w-md.border-r-1.border-gray-500.border-opacity-10.pt-24.px-8.flex.flex-col.gap-4
div div
p.font-bold 迅速に開発できる p.font-bold 迅速に開発できる
p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。 p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
@@ -28,18 +28,25 @@ div.text-white.w-full.flex.bg-dark-900
button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制 button.mt-4.rounded-lg.h-9.w-full.px-4.py-2.bg-gray-500.bg-opacity-5.border.border-gray-500.border-opacity-20.text-gray-500(value="Search" type="text" class="focus:outline-none") 开始绘制
// 中间输出 // 中间输出
div.flex-1.pt-24.px-4 div.flex-1.pt-24.px-4
div.flex.gap-2 div.flex.gap-2.pb-8
button.rounded-full.bg-gray-800.w-14.h-14.flex.justify-center.items-center button.rounded-full.w-14.h-14.flex.justify-center.items-center(
:class="{ 'bg-gray-800': views.cardMode }"
@click="views.cardMode = !views.cardMode"
)
img(:src="IconGrid") img(:src="IconGrid")
button.rounded-full.bg-gray-800.w-14.h-14.flex.justify-center.items-center button.rounded-full.w-14.h-14.flex.justify-center.items-center(
:class="{ 'bg-gray-800': !views.cardMode }"
@click="views.cardMode = !views.cardMode"
)
img(:src="IconStack") img(:src="IconStack")
div.p-12.flex.justify-start.relative(style="max-width: min(512px, 100%);") div.flex(:class="{'justify-center': !views.cardMode, 'flex-col': views.cardMode}")
div.bg-red-500.relative(style="max-width: min(512px, 100%);")
img(:src="ImageDemo" class="rounded-md object-contain") img(:src="ImageDemo" class="rounded-md object-contain")
div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0( div.rounded-md.absolute.inset-0.flex.flex-col.items-center.justify-center.transition-opacity.bg-gradient-to-t.to-transparent.opacity-0(
class="hover:cursor-pointer hover:opacity-100 from-black/90" class="hover:cursor-pointer hover:opacity-100 from-black/90"
) )
// 右侧参数 // 右侧参数
div.w-xs.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-8 div.w-md.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4.flex.flex-col.gap-8
div div
p.font-bold 模型 p.font-bold 模型
p.text-gray-400 Different AI models can produce different or better results so fell free to experiment. p.text-gray-400 Different AI models can produce different or better results so fell free to experiment.
@@ -61,6 +68,11 @@ import IconEdit from 'assets/icon/edit-2.svg'
import IconGrid from 'assets/icon/grid.svg' import IconGrid from 'assets/icon/grid.svg'
import IconStack from 'assets/icon/stack.svg' import IconStack from 'assets/icon/stack.svg'
import ImageDemo from 'assets/image/demo.png' import ImageDemo from 'assets/image/demo.png'
const views = ref({
cardMode: true
})
</script> </script>
<style> <style>