From 595600f0b6df93a17c5b4c335f75778b77b46df4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A1=9C=E8=8F=AF?= <huan0016@gmail.com>
Date: Sun, 1 Jan 2023 15:59:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=8E=92=E5=88=97=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index.vue | 34 +++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index ac2badd..fe048cf 100644
--- a/pages/index.vue
+++ b/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
-      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.flex.gap-2.pb-8
+      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")
+      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>