基本结构

pages/index.vue

@@ -1,11 +1,93 @@
 <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
+  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 迅速に開発できる
       p.text-gray-400 あなたのアイデアを素早く実現するためのフレームワークです。
       textarea.mt-4.rounded-lg.h-32.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
+      div.flex.items-center.justify-between
+        span.font-bold 从图像中删除特征
+        label.switch
+          input(type="checkbox" checked)
+          div.slider.round
+      p.text-gray-400 描述您不希望出现在图像中的细节, 例如颜色, 物体或是风景
+    div
+      p.font-bold 筛选
+      p.text-gray-400 尝试可以应用于您的图像的不同风格样式
+      input.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
+      p.font-bold 通过图像生成图像
+      p.text-gray-400 上传或绘制图像以用作灵感
+      input.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.overflow-hidden.flex.gap-2.items-center
+        img.relative.right-6.w-4(:src="IconEdit" style="filter: drop-shadow(#ffffff 24px 0);")
+        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
 </template>
+
+<script setup>
+import IconEdit from 'assets/icon/edit-2.svg'
+</script>
+
+<style>
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+</style>