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:30:52 +08:00
parent 58825b0277
commit be638bfd80
3 changed files with 47 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
pages/index.vue
View File

@@ -1,5 +1,6 @@
<template lang="pug">
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
p.font-bold 迅速に開発できる
@@ -25,21 +26,49 @@ div.text-white.w-full.flex.bg-dark-900
span 画点什么
div
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
span Hello World
div.w-xs.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4 end
// 中间输出
div.flex-1.pt-24.px-4
div.flex.gap-2
button.rounded-full.bg-gray-800.w-14.h-14.flex.justify-center.items-center
img(:src="IconGrid")
button.rounded-full.bg-gray-800.w-14.h-14.flex.justify-center.items-center
img(:src="IconStack")
div.p-12.flex.justify-start.relative(style="max-width: min(512px, 100%);")
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(
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
p.font-bold 模型
p.text-gray-400 Different AI models can produce different or better results so fell free to experiment.
div
p.font-bold Image Dimensions
p.text-gray-400 width x height of the finished image.
div.flex.flex-wrap.gap-2
button.border.border-2.border-gray-500.rounded-md 512 x 512
button.border.border-2.border-gray-500.rounded-md 1024 x 1024
button.border.border-2.border-gray-500.rounded-md 640 x 384
button.border.border-2.border-gray-500.rounded-md 384 x 640
button.border.border-2.border-gray-500.rounded-md 768 x 512
button.border.border-2.border-gray-500.rounded-md 512 x 768
p Buy a paid plan for any width or height up to 1536px
</template>
<script setup>
import IconEdit from 'assets/icon/edit-2.svg'
import IconGrid from 'assets/icon/grid.svg'
import IconStack from 'assets/icon/stack.svg'
import ImageDemo from 'assets/image/demo.png'
</script>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
width: 38px;
height: 24px;
}
.switch input {display:none;}
@@ -59,8 +88,8 @@ import IconEdit from 'assets/icon/edit-2.svg'
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
@@ -77,14 +106,14 @@ input:focus + .slider {
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
-webkit-transform: translateX(14px);
-ms-transform: translateX(14px);
transform: translateX(14px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
border-radius: 17px;
}
.slider.round:before {