|
|
@@ -0,0 +1,573 @@
|
|
|
+<script lang="tsx" setup>
|
|
|
+const route = useRoute()
|
|
|
+
|
|
|
+const loading = ref(true)
|
|
|
+const description = ref('')
|
|
|
+
|
|
|
+setTimeout(() => {
|
|
|
+ loading.value = false
|
|
|
+}, 700)
|
|
|
+
|
|
|
+const pagesId = computed(() => {
|
|
|
+ return route.params.id
|
|
|
+})
|
|
|
+
|
|
|
+
|
|
|
+const pages = computed(() => {
|
|
|
+ let acc = {
|
|
|
+ title: '',
|
|
|
+ desc: '',
|
|
|
+ submitTitle: '',
|
|
|
+ placeholder: '',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ switch(pagesId.value) {
|
|
|
+ case '1':
|
|
|
+ acc = {
|
|
|
+ title: '文生款',
|
|
|
+ desc: '通过详细的文字描述，AI将为您生成符合要求的服装设计方案。',
|
|
|
+ submitTitle: '详细描述您想要的服装款式、风格、颜色、材质等',
|
|
|
+ placeholder: '例如：一件适合夏季穿着的波西米亚风格长裙，采用丝绸面料，以佩斯利和花纹为主，土色调为橙色和蓝色...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case '2':
|
|
|
+ acc = {
|
|
|
+ title: '图生款',
|
|
|
+ desc: '上传参考图片，AI将基于图片内容创作新的服装设计。',
|
|
|
+ submitTitle: '描述您希望基于参考图片做出的修改和调整',
|
|
|
+ placeholder: '例如：保持整体造型，但将颜色改为深蓝色，材质换成丝绒...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case '3':
|
|
|
+ acc = {
|
|
|
+ title: '花型/面料',
|
|
|
+ desc: '描述您想要的花型图案或面料样式，AI将生成专业的设计效果。',
|
|
|
+ submitTitle: '描述您想要的花型图案或面料样式（如已上传参考图，请描述对其的修改需求）',
|
|
|
+ placeholder: '例如：设计一个复古花卉图案，包含玫瑰和叶子元素，适合用于丝巾。或者：保持现有图案的基本结构，但将颜色调整为暖色调...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case '4':
|
|
|
+ acc = {
|
|
|
+ title: '面料/颜色测试',
|
|
|
+ desc: '上传服装设计图，通过文字描述更换颜色或面料。',
|
|
|
+ submitTitle: '描述您希望更换的颜色或面料',
|
|
|
+ placeholder: '例如：将上衣颜色改为天蓝色，材质更换为纯棉...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case '5':
|
|
|
+ acc = {
|
|
|
+ title: '场景模拟',
|
|
|
+ desc: '上传服装设计图，生成试穿效果图或视频来确认氛围感。',
|
|
|
+ submitTitle: '描述您想要的场景氛围、模特姿势、拍摄角度等',
|
|
|
+ placeholder: '例如：在咖啡厅的温馨环境中，模特坐在窗边，自然光线，展现服装的日常穿搭效果...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ case '6':
|
|
|
+ acc = {
|
|
|
+ title: '线稿生成',
|
|
|
+ desc: '上传确定好的服装设计图，AI将提取静物轮廓生成专业线稿。',
|
|
|
+ submitTitle: '描述您希望提取线稿的方式或需求',
|
|
|
+ placeholder: '例如：提取服装的主要轮廓线条，保持设计细节，生成适合打版的专业线稿...',
|
|
|
+ uploadTitle: '',
|
|
|
+ uploadDesc: ''
|
|
|
+ }
|
|
|
+ break
|
|
|
+ }
|
|
|
+ acc.uploadTitle = '上传图片'
|
|
|
+ acc.uploadDesc = '拖拽文件到此处，或点击上传'
|
|
|
+ if (pagesId.value === '3') {
|
|
|
+ acc.uploadTitle = '上传花型或面料图案（可选）'
|
|
|
+ acc.uploadDesc = '点击上传现有花型或面料图案作为参考'
|
|
|
+ }
|
|
|
+ return acc
|
|
|
+})
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <LayoutCenterPanel
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <!-- 内容区域 -->
|
|
|
+ <div
|
|
|
+ flex="1 ~ col"
|
|
|
+ h-full
|
|
|
+ class="tool-direct-black"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ flex="~ items-center"
|
|
|
+ class="tools-header-block"
|
|
|
+ >
|
|
|
+ <div class="back">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="m12 19-7-7 7-7" /><path d="M19 12H5" /></svg>
|
|
|
+ </div>
|
|
|
+ <header class="header-block">
|
|
|
+ <h1>设计智能体</h1>
|
|
|
+ <p>
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke="currentColor"
|
|
|
+ ><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" /><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" /><path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" /><path d="M17.599 6.5a3 3 0 0 0 .399-1.375" /><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5" /><path d="M3.477 10.896a4 4 0 0 1 .585-.396" /><path d="M19.938 10.5a4 4 0 0 1 .585.396" /><path d="M6 18a4 4 0 0 1-1.967-.516" /><path d="M19.967 17.484A4 4 0 0 1 18 18" /></svg>
|
|
|
+ {{ pages.title }} - 专业设计工具
|
|
|
+ </p>
|
|
|
+ </header>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ flex="1 ~ col"
|
|
|
+ class="tool-direct-content-black"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ min-h-0
|
|
|
+ class="tool-direct-content"
|
|
|
+ >
|
|
|
+ <div class="tool-direct-left">
|
|
|
+ <div class="tool-direct-left__title">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg>
|
|
|
+ <h3>{{ pages.title }}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="tool-direct-left__desc">{{ pages.desc }}</div>
|
|
|
+ <div
|
|
|
+ v-if="pagesId != '1'"
|
|
|
+ class="tools-upload-black"
|
|
|
+ >
|
|
|
+ <div class="tools-upload__title">{{ pages.uploadTitle }}</div>
|
|
|
+ <div class="tools-upload">
|
|
|
+ <n-upload
|
|
|
+ directory-dnd
|
|
|
+ action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
|
|
+ >
|
|
|
+ <n-upload-dragger>
|
|
|
+ <div style="margin-bottom: 12px">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="17 8 12 3 7 8" /><line
|
|
|
+ x1="12"
|
|
|
+ x2="12"
|
|
|
+ y1="3"
|
|
|
+ y2="15"
|
|
|
+ /></svg>
|
|
|
+ </div>
|
|
|
+ <n-text style="font-size: 16px">
|
|
|
+ {{ pages.uploadDesc }}
|
|
|
+ </n-text>
|
|
|
+ <n-p
|
|
|
+ depth="3"
|
|
|
+ style="margin: 8px 0 0 0"
|
|
|
+ >
|
|
|
+ 支持 JPG, PNG, WEBP
|
|
|
+ </n-p>
|
|
|
+ </n-upload-dragger>
|
|
|
+ </n-upload>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="tool-direct-left__submit"
|
|
|
+ flex="1 ~ col"
|
|
|
+ >
|
|
|
+ <p>{{ pages.submitTitle }}</p>
|
|
|
+ <n-space
|
|
|
+ vertical
|
|
|
+ flex="1 ~ col"
|
|
|
+ >
|
|
|
+ <n-input
|
|
|
+ v-model:value="description"
|
|
|
+ class="full-input"
|
|
|
+ type="textarea"
|
|
|
+ :placeholder="pages.placeholder"
|
|
|
+ />
|
|
|
+ </n-space>
|
|
|
+ </div>
|
|
|
+ <div class="tool-direct-left__btns">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg>
|
|
|
+ 开始生成
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="tool-direct-right"
|
|
|
+ flex="1 ~ col"
|
|
|
+ >
|
|
|
+ <div class="tool-direct-right__title">
|
|
|
+ <h3>生成结果</h3>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="tool-direct-right__result"
|
|
|
+ flex="1 ~ col"
|
|
|
+ h-full
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="result-empty"
|
|
|
+ flex="1 ~ col"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" /><path d="M20 3v4" /><path d="M22 5h-4" /><path d="M4 17v2" /><path d="M5 18H3" /></svg>
|
|
|
+ 生成的设计将在这里显示
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="tool-direct-right__loading"
|
|
|
+ flex="1 ~ col"
|
|
|
+ >
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ style="color: rgb(154, 120, 110);"
|
|
|
+ ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
|
|
|
+ AI正在为您生成设计...
|
|
|
+ </div>
|
|
|
+ <div class="result-success">
|
|
|
+ <div class="preview-black__images">
|
|
|
+ <div class="images-preview">
|
|
|
+ <img
|
|
|
+ src="https://www.goelia1995.com/cdn/shop/files/Office_Inspiration_bc3a97ac-629a-4886-8091-2aa8431de2aa.jpg?v=1754637750"
|
|
|
+ alt=""
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="images-preview__icon">
|
|
|
+ <div class="like-icons icons">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="#EF4444"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg>
|
|
|
+ </div>
|
|
|
+ <div class="download-icon icons">
|
|
|
+ <svg
|
|
|
+ xmlns="http://www.w3.org/2000/svg"
|
|
|
+ width="24"
|
|
|
+ height="24"
|
|
|
+ viewBox="0 0 24 24"
|
|
|
+ fill="none"
|
|
|
+ stroke="currentColor"
|
|
|
+ stroke-width="2"
|
|
|
+ stroke-linecap="round"
|
|
|
+ stroke-linejoin="round"
|
|
|
+ ><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><polyline points="7 10 12 15 17 10" /><line
|
|
|
+ x1="12"
|
|
|
+ x2="12"
|
|
|
+ y1="15"
|
|
|
+ y2="3"
|
|
|
+ /></svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </LayoutCenterPanel>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .tool-direct-black {
|
|
|
+ padding: 24px;
|
|
|
+ background: #F7F3EE;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 100vh;
|
|
|
+ }
|
|
|
+ .tools-header-block {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .back {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: white;
|
|
|
+ color: rgb(80, 60, 55);
|
|
|
+ box-shadow: rgba(154, 120, 110, 0.2) 0px 1px 3px;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .header-block {
|
|
|
+ h1 {
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 36px;
|
|
|
+ color: rgb(80, 60, 55);
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgb(154, 120, 110);
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 4px;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ flex: 0 0 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-content {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 1536px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: flex;
|
|
|
+ align-items: stretch;
|
|
|
+ gap: 24px;
|
|
|
+ flex: 1 1 0%;
|
|
|
+
|
|
|
+ .tool-direct-left,
|
|
|
+ .tool-direct-right {
|
|
|
+ width: calc(50% - 12px);
|
|
|
+ flex: 1;
|
|
|
+ border: 1px solid rgba(154, 120, 110, 0.2);
|
|
|
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
+ background: rgb(255 255 255 / 0.8);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px;
|
|
|
+ min-height: 282px;
|
|
|
+ }
|
|
|
+ .tool-direct-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .tool-direct-left__title {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1;
|
|
|
+ color: rgb(80, 60, 55);
|
|
|
+ }
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ color: rgb(154, 120, 110);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-left__desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgb(154, 120, 110);
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .tools-upload-black {
|
|
|
+ margin-top: 24px;
|
|
|
+ .tools-upload__title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-left__submit {
|
|
|
+ margin-top: 24px;
|
|
|
+
|
|
|
+ .n-space > div {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .full-input {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-left__btns {
|
|
|
+ margin-top: 24px;
|
|
|
+ background: linear-gradient(135deg, rgb(194, 140, 110), rgb(154, 120, 110));
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ min-height: 40px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(135deg, rgb(194, 140, 110), rgb(154, 120, 110));
|
|
|
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-right {
|
|
|
+ .tool-direct-right__title {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ h3 {
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1;
|
|
|
+ color: rgb(80, 60, 55);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .result-empty {
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgb(154, 120, 110);
|
|
|
+ font-size: 14px;
|
|
|
+ gap: 16px;
|
|
|
+ display: none;
|
|
|
+ svg {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ color: rgb(154, 120, 110, 0.5);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tool-direct-right__loading {
|
|
|
+ font-size: 14px;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: rgb(154, 120, 110);
|
|
|
+ display: none;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ animation: spin 1s linear infinite;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .preview-black__images {
|
|
|
+ position: relative;
|
|
|
+ background: rgb(241 245 249 / var(--tw-bg-opacity, 1));
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .images-preview__icon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ gap: 8px;
|
|
|
+ display: none;
|
|
|
+ animation-duration: 300ms;
|
|
|
+
|
|
|
+ .icons {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
|
+ background: rgb(255 255 255 / 0.9);
|
|
|
+ border: 1px solid hsl(240 5.9% 90%);
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ .images-preview__icon {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @keyframes spin{to{transform:rotate(360deg)}}
|
|
|
+</style>
|
