列表排列方式

pages/index.vue

@@ -1,7 +1,7 @@
 <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.w-md.border-r-1.border-gray-500.border-opacity-10.pt-24.px-8.flex.flex-col.gap-4
     div
       p.font-bold 迅速に開発できる
       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") 开始绘制
   // 中间输出
   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(
-        img(:src="IconGrid")
+        :class="{ 'bg-gray-800': views.cardMode }"
-      button.rounded-full.bg-gray-800.w-14.h-14.flex.justify-center.items-center
+        @click="views.cardMode = !views.cardMode"
-        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"
       )
+        img(:src="IconGrid")
+      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")
+    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")
+        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.w-md.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.
@@ -61,6 +68,11 @@ 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'
+
+const views = ref({
+  cardMode: true
+})
+
 </script>
 
 <style>