94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<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 迅速に開発できる
|
|
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>
|