基本结构

app.vue

@@ -10,3 +10,10 @@ div.min-h-screen.flex.flex-nowrap(style="background-color: #15191e")
     button.w-6.h-6 user
   NuxtPage
 </template>>
+
+<style>
+html, body {
+  font-size: 14px;
+  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
+}
+</style>

pages/index.vue

@@ -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.flex-1.pt-24.px-4
-  div.w-xs.border-l-1.border-gray-500.border-opacity-10.pt-24.px-4 end
+    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;
+  width: 38px;
-  height: 34px;
+  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;
+  height: 16px;
-  width: 26px;
+  width: 16px;
   left: 4px;
   bottom: 4px;
   background-color: white;
@@ -77,14 +106,14 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
+  -webkit-transform: translateX(14px);
-  -ms-transform: translateX(26px);
+  -ms-transform: translateX(14px);
-  transform: translateX(26px);
+  transform: translateX(14px);
 }
 
 /* Rounded sliders */
 .slider.round {
-  border-radius: 34px;
+  border-radius: 17px;
 }
 
 .slider.round:before {