1330 lines
35 KiB
Vue
1330 lines
35 KiB
Vue
|
<template>
|
|||
|
|
<q-page>
|
|||
|
|
<!-- <article></article>
|
|||
|
|
|
|||
|
|
<div class="gallery-track">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-image-wrapper">
|
|||
|
|
<img src="https://source.unsplash.com/kL3u4Tqfn1s" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-image-wrapper">
|
|||
|
|
<img src="https://source.unsplash.com/yVUQlyRlJSw" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div> -->
|
|||
|
|
<div class="silder">
|
|||
|
|
<div class="menu-box">
|
|||
|
|
<div class="menu-bg"></div>
|
|||
|
|
<div class="menu-button" @click="setActiveButton(1)">
|
|||
|
|
<div class="no-act" v-show="activeButton === 2">
|
|||
|
|
<img src="../../assets/image/ai/ttp.png" />
|
|||
|
|
<div>AI生图</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="act" v-show="activeButton === 1">
|
|||
|
|
<img src="../../assets/image/ai/ttpact.png" />
|
|||
|
|
<div>AI生图</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="menu-button" @click="setActiveButton(2)">
|
|||
|
|
<div class="no-act" v-show="activeButton === 1">
|
|||
|
|
<img src="../../assets/image/ai/ptp.png" />
|
|||
|
|
<div>生图PLUS</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="act" v-show="activeButton === 2">
|
|||
|
|
<img src="../../assets/image/ai/ptpact.png" />
|
|||
|
|
<div>生图PLUS</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; width: 100%">
|
|||
|
|
<div class="setting-content">
|
|||
|
|
<q-scroll-area style="height: 87%">
|
|||
|
|
<div class="setting">
|
|||
|
|
<div class="prompt-title">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<img class="cirl" src="../../assets/image/ai/cirl.png" />
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
"
|
|||
|
|
>描述内容</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
<n-popover trigger="hover" content-class="popover">
|
|||
|
|
<template #trigger>
|
|||
|
|
<img
|
|||
|
|
@click="beautify"
|
|||
|
|
src="../../assets/image/ai/run.png"
|
|||
|
|
class="cursor-pointer runse"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<span>润色</span>
|
|||
|
|
</n-popover>
|
|||
|
|
</div>
|
|||
|
|
<div class="card ms-content">
|
|||
|
|
<n-spin :show="beautifyLoading">
|
|||
|
|
<template #icon>
|
|||
|
|
<svg
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<g
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
stroke-width="2"
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round"
|
|||
|
|
>
|
|||
|
|
<path d="M12 6V3"></path>
|
|||
|
|
<path d="M16.25 7.75L18.4 5.6"></path>
|
|||
|
|
<path d="M18 12h3"></path>
|
|||
|
|
<path d="M16.25 16.25l2.15 2.15"></path>
|
|||
|
|
<path d="M12 18v3"></path>
|
|||
|
|
<path d="M7.75 16.25L5.6 18.4"></path>
|
|||
|
|
<path d="M6 12H3"></path>
|
|||
|
|
<path d="M7.75 7.75L5.6 5.6"></path>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
</template>
|
|||
|
|
<n-input
|
|||
|
|
v-model:value="prompt"
|
|||
|
|
type="textarea"
|
|||
|
|
class="content-input"
|
|||
|
|
:maxlength="200"
|
|||
|
|
show-count
|
|||
|
|
placeholder="请输入一段话或短语、词汇，描述你的想法，用逗号隔开。可以是中文或英文"
|
|||
|
|
/>
|
|||
|
|
</n-spin>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref="fadeOut1"
|
|||
|
|
class="prompt-title animate__animated animate__fadeInLeft animate__fast"
|
|||
|
|
v-if="activeButton === 2"
|
|||
|
|
>
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<img class="cirl" src="../../assets/image/ai/cirl.png" />
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
"
|
|||
|
|
>反向词</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref="fadeOut2"
|
|||
|
|
v-if="activeButton === 2"
|
|||
|
|
class="ms-content animate__animated animate__fadeInLeft animate__fast"
|
|||
|
|
style="border: 1px solid #7e7e7e; height: 100px"
|
|||
|
|
>
|
|||
|
|
<n-input
|
|||
|
|
v-model:value="negative_prompt"
|
|||
|
|
type="textarea"
|
|||
|
|
class="content-input"
|
|||
|
|
:bordered="false"
|
|||
|
|
:maxlength="50"
|
|||
|
|
show-count
|
|||
|
|
placeholder="输入你画面中不想要的内容，中文或英文的短语、词汇"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref="fadeOut3"
|
|||
|
|
class="prompt-title animate__animated animate__fadeInLeft animate__fast"
|
|||
|
|
v-if="activeButton === 2"
|
|||
|
|
>
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<img class="cirl" src="../../assets/image/ai/cirl.png" />
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
"
|
|||
|
|
>参考图</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref="fadeOut4"
|
|||
|
|
v-if="activeButton === 2"
|
|||
|
|
class="animate__animated animate__fadeInLeft animate__fast"
|
|||
|
|
>
|
|||
|
|
<n-upload
|
|||
|
|
list-type="image-card"
|
|||
|
|
:max="1"
|
|||
|
|
:on-finish="handleChange"
|
|||
|
|
action="http://192.168.1.244:8085/api/ai/upload-file"
|
|||
|
|
>
|
|||
|
|
<n-upload-dragger>
|
|||
|
|
<div style="margin-bottom: 12px">
|
|||
|
|
<img src="../../assets/image/ai/plus.png" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
style="font-size: 16px; color: #7e7e7e; font-weight: bold"
|
|||
|
|
>
|
|||
|
|
拖拽图片至此或点击上传
|
|||
|
|
</div>
|
|||
|
|
</n-upload-dragger>
|
|||
|
|
</n-upload>
|
|||
|
|
</div>
|
|||
|
|
<div class="prompt-title" style="margin-top: 10px">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<img class="cirl" src="../../assets/image/ai/cirl.png" />
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
"
|
|||
|
|
>画风类型</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="model-box">
|
|||
|
|
<div class="row animate__animated animate__bounceIn">
|
|||
|
|
<div
|
|||
|
|
class="style-box card cursor-pointer"
|
|||
|
|
v-for="(n, index) in modelArr"
|
|||
|
|
:key="`lg-${n}`"
|
|||
|
|
:class="n.nowSelect ? 'border-change' : 'border-default'"
|
|||
|
|
@click="chooseModel(n)"
|
|||
|
|
:style="{
|
|||
|
|
marginLeft: index === 0 || index === 4 ? '0' : '32px',
|
|||
|
|
marginBottom: '25px',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<img style="width: 100%; height: 100%" :src="n.replaceImg" />
|
|||
|
|
</div>
|
|||
|
|
<div class="all-box cursor-pointer" @click="openAll">
|
|||
|
|
全部模型
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="prompt-title">
|
|||
|
|
<div style="display: flex; align-items: center">
|
|||
|
|
<img class="cirl" src="../../assets/image/ai/cirl.png" />
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
"
|
|||
|
|
>图片尺寸</span
|
|||
|
|
>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="model-box">
|
|||
|
|
<div class="row">
|
|||
|
|
<div
|
|||
|
|
class="size-box card cursor-pointer"
|
|||
|
|
v-for="(n, index) in sizeArr"
|
|||
|
|
:key="`lg-${n}`"
|
|||
|
|
:class="n.nowSelect ? 'border-change' : 'border-default'"
|
|||
|
|
@click="chooseSize(n)"
|
|||
|
|
:style="{
|
|||
|
|
marginLeft: index === 0 || index === 3 ? '0' : '18px',
|
|||
|
|
marginBottom: '10px',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
style="
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #212121;
|
|||
|
|
width: 128px;
|
|||
|
|
height: 65px;
|
|||
|
|
margin-top: 5px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
<div style="position: relative">
|
|||
|
|
<span
|
|||
|
|
style="
|
|||
|
|
position: absolute;
|
|||
|
|
top: 45%;
|
|||
|
|
left: 38%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
font-size: 10px;
|
|||
|
|
"
|
|||
|
|
>{{ n.proportion }}</span
|
|||
|
|
>
|
|||
|
|
<img class="left-img" :src="n.img" />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<div>{{ n.word }}</div>
|
|||
|
|
<div>{{ n.sizeWord }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="wh-box">
|
|||
|
|
宽
|
|||
|
|
<n-input-number
|
|||
|
|
v-model:value="width"
|
|||
|
|
:bordered="false"
|
|||
|
|
placeholder="请输入数值"
|
|||
|
|
></n-input-number>
|
|||
|
|
px
|
|||
|
|
<q-separator
|
|||
|
|
vertical
|
|||
|
|
style="
|
|||
|
|
background: #383838;
|
|||
|
|
margin-left: 16px;
|
|||
|
|
margin-right: 40px;
|
|||
|
|
"
|
|||
|
|
/>
|
|||
|
|
高
|
|||
|
|
<n-input-number
|
|||
|
|
v-model:value="height"
|
|||
|
|
:bordered="false"
|
|||
|
|
placeholder="请输入数值"
|
|||
|
|
></n-input-number>
|
|||
|
|
px
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</q-scroll-area>
|
|||
|
|
<div class="bottom-box">
|
|||
|
|
<div class="num-box">
|
|||
|
|
<n-select
|
|||
|
|
class="num-select"
|
|||
|
|
v-model:value="batch_size"
|
|||
|
|
:options="numOptions"
|
|||
|
|
placeholder="请选择"
|
|||
|
|
/>
|
|||
|
|
<div>图片数量</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="btn-box">
|
|||
|
|
<n-spin :show="createLoading">
|
|||
|
|
<template #icon> </template>
|
|||
|
|
<n-button @click="generate" class="create" quaternary>
|
|||
|
|
<img
|
|||
|
|
style="width: 24px; height: 28px; margin-right: 10px"
|
|||
|
|
src="../../assets/image/ai/star.png"
|
|||
|
|
/>
|
|||
|
|
<div style="display: grid" v-show="!createLoading">
|
|||
|
|
<div
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
font-size: 17px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
立即生成
|
|||
|
|
</div>
|
|||
|
|
<div style="color: #fff; font-size: 12px">
|
|||
|
|
消耗{{ batch_size }}积分
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
v-show="createLoading"
|
|||
|
|
style="
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bolder;
|
|||
|
|
font-size: 17px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
正在生成中
|
|||
|
|
</div>
|
|||
|
|
</n-button>
|
|||
|
|
</n-spin>
|
|||
|
|
<div>当前剩余积分：{{ coin }}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="img-content">
|
|||
|
|
<div class="plane" v-if="noImgData">
|
|||
|
|
<img
|
|||
|
|
ref="plane"
|
|||
|
|
class="animate__animated animate__fadeInBottomLeft"
|
|||
|
|
src="../../assets/image/ai/plane.png"
|
|||
|
|
/>
|
|||
|
|
<div ref="planeWord" class="word animate__animated animate__zoomIn">
|
|||
|
|
快开启您的AI之旅吧～
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="created-img-box" v-else>
|
|||
|
|
<q-scroll-area style="height: 820px" ref="scrollAreaRef">
|
|||
|
|
<div
|
|||
|
|
class="img-list-page"
|
|||
|
|
v-for="(n, index) in historyList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
class="animate__animated animate__slideInUp"
|
|||
|
|
style="display: flex; align-items: center"
|
|||
|
|
>
|
|||
|
|
<span style="color: #7e7e7e; margin-right: 10px">{{
|
|||
|
|
n.dateTime
|
|||
|
|
}}</span
|
|||
|
|
><q-separator style="width: 86%; background-color: #7e7e7e" />
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
class="animate__animated animate__slideInUp"
|
|||
|
|
style="color: #bebebe"
|
|||
|
|
>
|
|||
|
|
{{ n.prompt }}
|
|||
|
|
</div>
|
|||
|
|
<div class="img-list-box">
|
|||
|
|
<div
|
|||
|
|
v-for="(item, index2) in n.imgList"
|
|||
|
|
:key="index2"
|
|||
|
|
class="img-detail-box animate__animated animate__slideInUp"
|
|||
|
|
>
|
|||
|
|
<n-spin :show="item.length < 1">
|
|||
|
|
<template #icon>
|
|||
|
|
<svg
|
|||
|
|
xmlns="http://www.w3.org/2000/svg"
|
|||
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
>
|
|||
|
|
<g
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
stroke-width="2"
|
|||
|
|
stroke-linecap="round"
|
|||
|
|
stroke-linejoin="round"
|
|||
|
|
>
|
|||
|
|
<path d="M12 6V3"></path>
|
|||
|
|
<path d="M16.25 7.75L18.4 5.6"></path>
|
|||
|
|
<path d="M18 12h3"></path>
|
|||
|
|
<path d="M16.25 16.25l2.15 2.15"></path>
|
|||
|
|
<path d="M12 18v3"></path>
|
|||
|
|
<path d="M7.75 16.25L5.6 18.4"></path>
|
|||
|
|
<path d="M6 12H3"></path>
|
|||
|
|
<path d="M7.75 7.75L5.6 5.6"></path>
|
|||
|
|
</g>
|
|||
|
|
</svg>
|
|||
|
|
</template>
|
|||
|
|
<template #description>
|
|||
|
|
<span style="color: #bebebe">正在生成中，请稍等</span>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<q-parallax
|
|||
|
|
@click="checkDetail(item)"
|
|||
|
|
v-show="item.length"
|
|||
|
|
:src="item"
|
|||
|
|
>
|
|||
|
|
</q-parallax>
|
|||
|
|
</n-spin>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</q-scroll-area>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<image-detail
|
|||
|
|
:show="showModal"
|
|||
|
|
:detailSrc="detailSrc"
|
|||
|
|
@close-dialog="closeModal"
|
|||
|
|
/>
|
|||
|
|
<mode-list
|
|||
|
|
:show="showListModal"
|
|||
|
|
@handCloseDialog="closeListModal"
|
|||
|
|
@selectModal="selectedModel"
|
|||
|
|
/>
|
|||
|
|
</q-page>
|
|||
|
|
</template>
|
|||
|
|
<script setup>
|
|||
|
|
import "animate.css";
|
|||
|
|
import { ref, onMounted, onBeforeMount, computed, reactive, watch } from "vue";
|
|||
|
|
import { ModelApi,UserApi } from "src/api";
|
|||
|
|
import { processError, processSuccess } from "../../utils/message";
|
|||
|
|
import moment from "moment";
|
|||
|
|
import { LocalStorage, SessionStorage } from "quasar";
|
|||
|
|
import imageDetail from "./components/imageDetail.vue";
|
|||
|
|
import modeList from "./components/modeList.vue";
|
|||
|
|
import { useRoute, useRouter } from "vue-router";
|
|||
|
|
import img34 from "../../assets/image/ai/34.png";
|
|||
|
|
import img43 from "../../assets/image/ai/43.png";
|
|||
|
|
import img916 from "../../assets/image/ai/169.png";
|
|||
|
|
const router = useRouter();
|
|||
|
|
const scrollAreaRef = ref(null);
|
|||
|
|
const plane = ref(null);
|
|||
|
|
const planeWord = ref(null);
|
|||
|
|
const activeButton = ref(1);
|
|||
|
|
const createLoading = ref(false);
|
|||
|
|
const beautifyLoading = ref(false);
|
|||
|
|
const noImgData = ref(true);
|
|||
|
|
const prompt = ref("");
|
|||
|
|
const negative_prompt = ref("");
|
|||
|
|
const apiprompt = ref("");
|
|||
|
|
const init_images = ref([]);
|
|||
|
|
const seletedModel = ref({});
|
|||
|
|
const fadeOut1 = ref(null);
|
|||
|
|
const fadeOut2 = ref(null);
|
|||
|
|
const fadeOut3 = ref(null);
|
|||
|
|
const fadeOut4 = ref(null);
|
|||
|
|
const showModal = ref(false);
|
|||
|
|
const detailSrc = ref("");
|
|||
|
|
const coin = ref(0);
|
|||
|
|
const showListModal = ref(false);
|
|||
|
|
const selectedSize = ref({
|
|||
|
|
nowSelect: true,
|
|||
|
|
img: img34,
|
|||
|
|
word: "社交媒体",
|
|||
|
|
sizeWord: "600*800",
|
|||
|
|
proportion: "3:4",
|
|||
|
|
width: 600,
|
|||
|
|
height: 800,
|
|||
|
|
});
|
|||
|
|
const width = ref(0);
|
|||
|
|
const height = ref(0);
|
|||
|
|
const apiWidth = ref(0);
|
|||
|
|
const apiHeight = ref(0);
|
|||
|
|
const imgList = ref([]);
|
|||
|
|
const historyList = ref([]);
|
|||
|
|
//每次张数
|
|||
|
|
const batch_size = ref(1);
|
|||
|
|
const numOptions = ref([
|
|||
|
|
{
|
|||
|
|
label: "1",
|
|||
|
|
value: 1,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "2",
|
|||
|
|
value: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "3",
|
|||
|
|
value: 3,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "4",
|
|||
|
|
value: 4,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "5",
|
|||
|
|
value: 5,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "6",
|
|||
|
|
value: 6,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "7",
|
|||
|
|
value: 7,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "8",
|
|||
|
|
value: 8,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "9",
|
|||
|
|
value: 9,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "10",
|
|||
|
|
value: 10,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
const modelArr = ref([]);
|
|||
|
|
const sizeArr = ref([
|
|||
|
|
{
|
|||
|
|
nowSelect: true,
|
|||
|
|
img: img34,
|
|||
|
|
word: "社交媒体",
|
|||
|
|
sizeWord: "600*800",
|
|||
|
|
proportion: "3:4",
|
|||
|
|
width: 600,
|
|||
|
|
height: 800,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
nowSelect: false,
|
|||
|
|
img: img43,
|
|||
|
|
word: "文章配图",
|
|||
|
|
sizeWord: "800*600",
|
|||
|
|
proportion: "4:3",
|
|||
|
|
width: 800,
|
|||
|
|
height: 600,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
nowSelect: false,
|
|||
|
|
img: img916,
|
|||
|
|
word: "海报",
|
|||
|
|
sizeWord: "468*832",
|
|||
|
|
proportion: "9:16",
|
|||
|
|
width: 468,
|
|||
|
|
height: 832,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
nowSelect: false,
|
|||
|
|
img: img34,
|
|||
|
|
word: "电脑桌面",
|
|||
|
|
sizeWord: "832*468",
|
|||
|
|
proportion: "16:9",
|
|||
|
|
width: 832,
|
|||
|
|
height: 468,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
nowSelect: false,
|
|||
|
|
img: img34,
|
|||
|
|
word: "正方形",
|
|||
|
|
sizeWord: "512*512",
|
|||
|
|
proportion: "1:1",
|
|||
|
|
width: 512,
|
|||
|
|
height: 512,
|
|||
|
|
},
|
|||
|
|
]);
|
|||
|
|
// 打开详情弹窗
|
|||
|
|
const checkDetail = (item) => {
|
|||
|
|
showModal.value = true;
|
|||
|
|
detailSrc.value = item;
|
|||
|
|
};
|
|||
|
|
// 关闭详情弹窗
|
|||
|
|
const closeModal = () => {
|
|||
|
|
showModal.value = false;
|
|||
|
|
};
|
|||
|
|
// 打开模型列表
|
|||
|
|
const openAll = () => {
|
|||
|
|
showListModal.value = true;
|
|||
|
|
};
|
|||
|
|
// 关闭模型列表
|
|||
|
|
const closeListModal = () => {
|
|||
|
|
showListModal.value = false;
|
|||
|
|
};
|
|||
|
|
// 获取用户信息
|
|||
|
|
const getUserInfo = async() => {
|
|||
|
|
try {
|
|||
|
|
await UserApi.getUserInfo().then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
coin.value = res.data.coin;
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
};
|
|||
|
|
// 模型列表中选择模型
|
|||
|
|
const selectedModel = (model) => {
|
|||
|
|
console.log(model,111);
|
|||
|
|
seletedModel.value = model;
|
|||
|
|
// 将所有模型的nowSelect设置为false
|
|||
|
|
modelArr.value.forEach((item) => {
|
|||
|
|
item.nowSelect = false;
|
|||
|
|
});
|
|||
|
|
// 判断列表中选择的模型是否在初始化的七个模型中
|
|||
|
|
const isExist = modelArr.value.some((item) => item.hash === model.hash);
|
|||
|
|
// 如果存在，则将选中的模型放到第一个
|
|||
|
|
if (isExist) {
|
|||
|
|
modelArr.value.forEach((item) => {
|
|||
|
|
if (item.hash === model.hash) {
|
|||
|
|
item.nowSelect = true;
|
|||
|
|
} else {
|
|||
|
|
item.nowSelect = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 如果不存在，则将选中的模型放到第一个，并将其他模型放到后面
|
|||
|
|
modelArr.value = [model, ...modelArr.value.slice(0, 6)];
|
|||
|
|
modelArr.value.forEach((item, index) => {
|
|||
|
|
item.nowSelect = index === 0;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 上传完毕
|
|||
|
|
const handleChange = (file, List) => {
|
|||
|
|
showModal.value = true;
|
|||
|
|
let resData = JSON.parse(file.event.currentTarget.response);
|
|||
|
|
if (resData.status === 0) {
|
|||
|
|
processSuccess("上传成功");
|
|||
|
|
init_images.value = [resData.data.ori_url];
|
|||
|
|
} else {
|
|||
|
|
processError(resData.msg);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 获取模型列表
|
|||
|
|
const getModelList = async () => {
|
|||
|
|
try {
|
|||
|
|
await ModelApi.getModelList({
|
|||
|
|
page: 1,
|
|||
|
|
pageSize: 10,
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
modelArr.value = res.data.list.slice(0, 7).map((item, index) => ({
|
|||
|
|
...item,
|
|||
|
|
nowSelect: index === 0,
|
|||
|
|
}));
|
|||
|
|
seletedModel.value = modelArr.value[0];
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 美化
|
|||
|
|
const beautify = async () => {
|
|||
|
|
beautifyLoading.value = true;
|
|||
|
|
try {
|
|||
|
|
await ModelApi.beautify({
|
|||
|
|
txt: prompt.value,
|
|||
|
|
}).then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
beautifyLoading.value = false;
|
|||
|
|
processSuccess("美化成功");
|
|||
|
|
prompt.value = res.data.content;
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
beautifyLoading.value = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
beautifyLoading.value = false;
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 生成
|
|||
|
|
const generate = async () => {
|
|||
|
|
// 如果没登录，跳转登录
|
|||
|
|
const token = LocalStorage.getItem("sd-token");
|
|||
|
|
if (!token) {
|
|||
|
|
router.push("/login");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (!prompt.value) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
processError("请输入描述内容");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (JSON.stringify(selectedSize.value) !== "{}") {
|
|||
|
|
apiWidth.value = selectedSize.value.width;
|
|||
|
|
apiHeight.value = selectedSize.value.height;
|
|||
|
|
} else {
|
|||
|
|
apiHeight.value = height.value;
|
|||
|
|
apiWidth.value = width.value;
|
|||
|
|
}
|
|||
|
|
if (!apiWidth.value || !apiHeight.value) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
processError("请输入宽高");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
createLoading.value = true;
|
|||
|
|
apiprompt.value = await getTranslatePrompt();
|
|||
|
|
if (!apiprompt.value) {
|
|||
|
|
processError("描述内容不合法");
|
|||
|
|
createLoading.value = false;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (activeButton.value === 1) {
|
|||
|
|
txt2img();
|
|||
|
|
} else {
|
|||
|
|
// 如果没有上传图片
|
|||
|
|
if (!init_images.value.length) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
processError("请上传参考图");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
img2img();
|
|||
|
|
}
|
|||
|
|
if (plane.value) {
|
|||
|
|
plane.value.classList.add("animate__fadeOutTopRight");
|
|||
|
|
planeWord.value.classList.add("animate__zoomOut");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 放入和生成数量相同的空字符串
|
|||
|
|
historyList.value.unshift({
|
|||
|
|
imgList: new Array(batch_size.value).fill(""),
|
|||
|
|
prompt: prompt.value,
|
|||
|
|
dateTime: moment().format("YYYY年MM月DD日 HH:mm:ss"),
|
|||
|
|
});
|
|||
|
|
// 滚动到顶部
|
|||
|
|
if (scrollAreaRef.value) {
|
|||
|
|
scrollAreaRef.value.setScrollPosition("vertical", 0, 300);
|
|||
|
|
}
|
|||
|
|
setTimeout(() => {
|
|||
|
|
noImgData.value = false;
|
|||
|
|
}, 1000);
|
|||
|
|
};
|
|||
|
|
// 翻译描述内容
|
|||
|
|
const getTranslatePrompt = async () => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const data = {
|
|||
|
|
txt: prompt.value,
|
|||
|
|
};
|
|||
|
|
ModelApi.translate(data).then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
resolve(res.data.content);
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
createLoading.value = false;
|
|||
|
|
reject();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 文生图
|
|||
|
|
const txt2img = async () => {
|
|||
|
|
try {
|
|||
|
|
let data = {
|
|||
|
|
prompt: apiprompt.value,
|
|||
|
|
real_prompt: prompt.value,
|
|||
|
|
|
|||
|
|
sd_model_hash: seletedModel.value.hash,
|
|||
|
|
width: apiWidth.value,
|
|||
|
|
height: apiHeight.value,
|
|||
|
|
batch_size: batch_size.value, //每次张数
|
|||
|
|
n_iter: 1, //生成批次
|
|||
|
|
steps: 30, //生成步数
|
|||
|
|
override_settings_restore_afterwards: true,
|
|||
|
|
override_settings: {
|
|||
|
|
sd_model_checkpoint: seletedModel.value.title,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
await ModelApi.txt2img(data).then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
historyList.value[0].imgList = res.data.images;
|
|||
|
|
getUserInfo();
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
createLoading.value = false;
|
|||
|
|
historyList.value[0].imgList = new Array(batch_size.value).fill(
|
|||
|
|
"https://cdns.fontree.cn/fonchain-main/prod/image/default/ai/wrong.png"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 图生图
|
|||
|
|
const img2img = async () => {
|
|||
|
|
try {
|
|||
|
|
let data = {
|
|||
|
|
prompt: apiprompt.value,
|
|||
|
|
real_prompt: prompt.value,
|
|||
|
|
init_images: init_images.value,
|
|||
|
|
sd_model_hash: seletedModel.value.hash,
|
|||
|
|
real_negative_prompt: negative_prompt.value,
|
|||
|
|
negative_prompt: negative_prompt.value,
|
|||
|
|
width: apiWidth.value,
|
|||
|
|
height: apiHeight.value,
|
|||
|
|
batch_size: batch_size.value, //每次张数
|
|||
|
|
n_iter: 1, //生成批次
|
|||
|
|
steps: 30, //生成步数
|
|||
|
|
override_settings_restore_afterwards: true,
|
|||
|
|
override_settings: {
|
|||
|
|
sd_model_checkpoint: seletedModel.value.title,
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
await ModelApi.img2img(data).then((res) => {
|
|||
|
|
if (res.status === 0) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
historyList.value[0].imgList = res.data.images;
|
|||
|
|
getUserInfo();
|
|||
|
|
} else {
|
|||
|
|
processError(res.msg);
|
|||
|
|
createLoading.value = false;
|
|||
|
|
historyList.value[0].imgList = new Array(batch_size.value).fill(
|
|||
|
|
"https://cdns.fontree.cn/fonchain-main/prod/image/default/ai/wrong.png"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} catch (error) {
|
|||
|
|
createLoading.value = false;
|
|||
|
|
console.error(error);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// 切换模式
|
|||
|
|
const setActiveButton = (buttonNumber) => {
|
|||
|
|
if (buttonNumber === 1) {
|
|||
|
|
// 添加fade动画
|
|||
|
|
fadeOut1.value.classList.add("animate__fadeOutLeft");
|
|||
|
|
fadeOut2.value.classList.add("animate__fadeOutLeft");
|
|||
|
|
fadeOut3.value.classList.add("animate__fadeOutLeft");
|
|||
|
|
fadeOut4.value.classList.add("animate__fadeOutLeft");
|
|||
|
|
init_images.value = [];
|
|||
|
|
negative_prompt.value = "";
|
|||
|
|
}
|
|||
|
|
let timer = buttonNumber === 1 ? 500 : 0;
|
|||
|
|
setTimeout(() => {
|
|||
|
|
activeButton.value = buttonNumber;
|
|||
|
|
}, timer);
|
|||
|
|
// 背景menu-bg跟随点击的按钮移动
|
|||
|
|
const menuBg = document.querySelector(".menu-bg");
|
|||
|
|
const menuButton = document.querySelectorAll(".menu-button");
|
|||
|
|
const button = menuButton[buttonNumber - 1];
|
|||
|
|
const { top, left, width, height } = button.getBoundingClientRect();
|
|||
|
|
menuBg.style.top = `${top - height + 10}px`;
|
|||
|
|
menuBg.style.left = `${left}px`;
|
|||
|
|
};
|
|||
|
|
const chooseModel = (model) => {
|
|||
|
|
// 如果点击的是已经选中的模型，不做任何操作
|
|||
|
|
if (model.nowSelect) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
seletedModel.value = model;
|
|||
|
|
model.nowSelect = !model.nowSelect;
|
|||
|
|
modelArr.value.forEach((item) => {
|
|||
|
|
if (item !== model) {
|
|||
|
|
item.nowSelect = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
console.log(seletedModel.value);
|
|||
|
|
};
|
|||
|
|
const chooseSize = (size) => {
|
|||
|
|
// 如果点击的是已经选中的尺寸，不做任何操作
|
|||
|
|
if (size.nowSelect) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
selectedSize.value = size;
|
|||
|
|
size.nowSelect = !size.nowSelect;
|
|||
|
|
sizeArr.value.forEach((item) => {
|
|||
|
|
if (item !== size) {
|
|||
|
|
item.nowSelect = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// 监听with和height的值，如果都有值，取消图片和尺寸的选中状态
|
|||
|
|
watch([width, height], ([newWidth, newHeight]) => {
|
|||
|
|
if (newWidth && newHeight) {
|
|||
|
|
selectedSize.value = {};
|
|||
|
|
sizeArr.value.forEach((item) => {
|
|||
|
|
item.nowSelect = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onBeforeMount(() => {
|
|||
|
|
getModelList();
|
|||
|
|
getUserInfo();
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.q-page {
|
|||
|
|
background: #19191a;
|
|||
|
|
display: flex;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
.q-gutter-sm > * {
|
|||
|
|
margin-left: 15px;
|
|||
|
|
}
|
|||
|
|
.silder {
|
|||
|
|
width: 110px;
|
|||
|
|
background: #212121;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
overflow: hidden;
|
|||
|
|
.menu-box {
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
margin-top: 30px;
|
|||
|
|
|
|||
|
|
align-items: center;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
.menu-button {
|
|||
|
|
z-index: 20;
|
|||
|
|
height: 90px;
|
|||
|
|
width: 90px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background-color: transparent;
|
|||
|
|
padding: 20px 10px 20px 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background-color 0.5s ease;
|
|||
|
|
.act img {
|
|||
|
|
width: 55px;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.no-act img {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.act {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
text-shadow: 0px 3px 4px #de53ab;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.no-act {
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.menu-bg {
|
|||
|
|
position: absolute;
|
|||
|
|
padding: 20px 10px 20px 10px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
background: linear-gradient(to right, #62d1ef, #5f33f3, #dc4cac);
|
|||
|
|
z-index: 10;
|
|||
|
|
height: 90px;
|
|||
|
|
width: 90px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
transition: top 0.5s ease, left 0.5s ease;
|
|||
|
|
top: 0;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.img-content {
|
|||
|
|
height: 100%;
|
|||
|
|
padding: 15px;
|
|||
|
|
background: #19191a;
|
|||
|
|
flex: 1;
|
|||
|
|
background-image: url("../../assets/image/ai/img-bg.png");
|
|||
|
|
background-size: cover;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: center;
|
|||
|
|
.plane {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
.word {
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.created-img-box {
|
|||
|
|
.img-page {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
span {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.img-list-box {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
.img-detail-box {
|
|||
|
|
width: 400px;
|
|||
|
|
height: 400px;
|
|||
|
|
background: #212121;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
cursor: pointer;
|
|||
|
|
:deep(.n-spin-content) {
|
|||
|
|
height: 100%;
|
|||
|
|
&:hover {
|
|||
|
|
transform: scale(1.1);
|
|||
|
|
transition: transform 0.5s ease-in-out;
|
|||
|
|
}
|
|||
|
|
&:not(:hover) {
|
|||
|
|
transform: scale(1);
|
|||
|
|
transition: transform 0.5s ease-in-out;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.setting-content {
|
|||
|
|
width: 490px;
|
|||
|
|
padding: 15px;
|
|||
|
|
.setting {
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 14px;
|
|||
|
|
height: 87%;
|
|||
|
|
background: #212121;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 20px 20px 20px 20px;
|
|||
|
|
.prompt-title {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
.cirl {
|
|||
|
|
width: 17px;
|
|||
|
|
height: 20px;
|
|||
|
|
}
|
|||
|
|
// 鼠标悬浮放大后在点击按钮上添加动画
|
|||
|
|
.runse {
|
|||
|
|
width: 22px;
|
|||
|
|
height: 22px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: transform 0.5s ease;
|
|||
|
|
&:hover {
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ms-content {
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
animation-play-state: running !important;
|
|||
|
|
height: 125px;
|
|||
|
|
width: 100%;
|
|||
|
|
margin-bottom: 14px;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
.content-input {
|
|||
|
|
background: #212121;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.model-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 200px;
|
|||
|
|
text-align: center;
|
|||
|
|
.style-box {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
animation-play-state: running !important;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
.all-box {
|
|||
|
|
width: 80px;
|
|||
|
|
height: 80px;
|
|||
|
|
// 文字上下左右居中
|
|||
|
|
display: flex;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-left: 32px;
|
|||
|
|
align-items: center;
|
|||
|
|
background: linear-gradient(260deg, #c448b8, #591df5);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
.size-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #212121 !important;
|
|||
|
|
width: 128px;
|
|||
|
|
height: 65px;
|
|||
|
|
animation-play-state: running !important;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
.left-img {
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
font-size: 11px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.border-change {
|
|||
|
|
border: 2px solid transparent;
|
|||
|
|
animation-play-state: running;
|
|||
|
|
}
|
|||
|
|
.border-default {
|
|||
|
|
border: 2px solid #7e7e7e;
|
|||
|
|
}
|
|||
|
|
.wh-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 40px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #ffffff;
|
|||
|
|
padding: 10px 30px 10px 20px;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
border: 2px solid #7e7e7e;
|
|||
|
|
background: #19191a;
|
|||
|
|
:deep(.n-input) {
|
|||
|
|
background-color: #19191a;
|
|||
|
|
}
|
|||
|
|
:deep(.n-input__suffix) {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom-box {
|
|||
|
|
height: 13%;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
background: #212121;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
padding: 17px 17px 27px 27px;
|
|||
|
|
display: flex;
|
|||
|
|
.num-box {
|
|||
|
|
width: 120px;
|
|||
|
|
text-align: center;
|
|||
|
|
|
|||
|
|
.num-select {
|
|||
|
|
height: 57px;
|
|||
|
|
:deep(.n-base-selection-label) {
|
|||
|
|
height: 57px;
|
|||
|
|
background-color: #212121;
|
|||
|
|
width: 110px;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
:deep(.n-base-selection-input__content) {
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.btn-box {
|
|||
|
|
flex: 1;
|
|||
|
|
text-align: center;
|
|||
|
|
.create {
|
|||
|
|
width: 260px;
|
|||
|
|
height: 55px;
|
|||
|
|
background: linear-gradient(260deg, #c448b8, #591df5);
|
|||
|
|
border-radius: 6px;
|
|||
|
|
color: #fff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-left: 15px;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
}
|
|||
|
|
div {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.popover {
|
|||
|
|
background: red;
|
|||
|
|
}
|
|||
|
|
.popout {
|
|||
|
|
background: #212121;
|
|||
|
|
}
|
|||
|
|
@property --bg-angle {
|
|||
|
|
inherits: false;
|
|||
|
|
initial-value: 0deg;
|
|||
|
|
syntax: "<angle>";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes spin {
|
|||
|
|
to {
|
|||
|
|
--bg-angle: 360deg;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//
|
|||
|
|
.gallery-track {
|
|||
|
|
position: fixed;
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 0.25rem;
|
|||
|
|
padding: 0.25rem;
|
|||
|
|
will-change: transform;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
border-radius: 1rem;
|
|||
|
|
color: white;
|
|||
|
|
width: min(400px, 90vw);
|
|||
|
|
height: 400px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
animation: spin 2.5s infinite linear paused;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
to bottom,
|
|||
|
|
oklch(0.1 0 240 / 0.95),
|
|||
|
|
oklch(0.1 0 240 / 0.95)
|
|||
|
|
)
|
|||
|
|
padding-box,
|
|||
|
|
conic-gradient(
|
|||
|
|
from var(--bg-angle) in oklch longer hue,
|
|||
|
|
oklch(0.85 0.17 0) 0 0
|
|||
|
|
)
|
|||
|
|
border-box;
|
|||
|
|
|
|||
|
|
& .card-image-wrapper {
|
|||
|
|
height: 135%;
|
|||
|
|
will-change: transform;
|
|||
|
|
|
|||
|
|
& img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
@media (width < 800px) {
|
|||
|
|
.gallery-track {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (width < 550px) {
|
|||
|
|
.gallery-track {
|
|||
|
|
grid-template-columns: repeat(1, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//
|
|||
|
|
:deep(.n-input .n-input__border) {
|
|||
|
|
border: 0;
|
|||
|
|
}
|
|||
|
|
// 更改placeholder的颜色
|
|||
|
|
:deep(.n-input__placeholder) {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
:deep(.n-input__textarea-el) {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
:deep(.n-input__input-el) {
|
|||
|
|
color: #7e7e7e;
|
|||
|
|
}
|
|||
|
|
:deep(.n-spin) {
|
|||
|
|
color: #c348b8;
|
|||
|
|
}
|
|||
|
|
:deep(.n-spin-container) {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
:deep(.n-spin-content) {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
:deep(.n-upload-dragger) {
|
|||
|
|
background: #212121;
|
|||
|
|
height: 420px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
:deep(.n-upload-trigger.n-upload-trigger--image-card) {
|
|||
|
|
width: 420px;
|
|||
|
|
height: 400px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
:deep(.n-upload-file) {
|
|||
|
|
width: 420px !important;
|
|||
|
|
height: 400px !important;
|
|||
|
|
}
|
|||
|
|
</style>
|