style: 转产品图弹窗样式
This commit is contained in:
zhangyh
@@ -71,32 +71,33 @@
|
|||||||
</a-slider>
|
</a-slider>
|
||||||
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
|
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
|
||||||
</div>
|
</div>
|
||||||
<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
|
<div
|
||||||
<div class="input_box">
|
class="prompt-container"
|
||||||
<div class="input_box_btnBox" style="height: auto;">
|
v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'"
|
||||||
<!-- <input
|
>
|
||||||
class="search_input"
|
<div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
|
||||||
:placeholder="$t('Generate.inputContent1')"
|
<div class="input_border productImg_content_item_generate">
|
||||||
v-model="productimgSearchName"
|
<div class="input_box">
|
||||||
@keydown.enter="getPrductimg()"
|
<div class="input_box_btnBox">
|
||||||
/>
|
<textarea
|
||||||
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
ref="textareaRef"
|
||||||
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
|
class="textarea"
|
||||||
<textarea
|
:placeholder="$t('Generate.inputContent1')"
|
||||||
ref="textarea"
|
@input="ifMaximumLength"
|
||||||
class="textarea "
|
@keydown.enter.prevent="getPrductimg()"
|
||||||
:placeholder="$t('Generate.inputContent1')"
|
v-model="productimgSearchName"
|
||||||
@input="ifMaximumLength"
|
></textarea>
|
||||||
@keydown.enter="getPrductimg()"
|
<div class="asistant-btn" @click="handleClickAssistBtn">
|
||||||
v-model="productimgSearchName"
|
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
||||||
></textarea>
|
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
|
<!-- <div class="selectText" v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage' && (speedData.value == 'advanced' || speedData.value == 'flux')">
|
||||||
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
|
<div :title="$t('poseTransfer.hint')" @click="()=>{productimgSearchName = $t('poseTransfer.hint');ifMaximumLength()}">{{ $t('poseTransfer.hint') }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
|
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
|
||||||
<div class="head">
|
<div class="head">
|
||||||
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
||||||
@@ -175,21 +176,22 @@
|
|||||||
<div class="mark_loading" v-show="loadingShow">
|
<div class="mark_loading" v-show="loadingShow">
|
||||||
<a-spin size="large" />
|
<a-spin size="large" />
|
||||||
</div>
|
</div>
|
||||||
|
<Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
|
import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed, useTemplateRef} from "vue";
|
||||||
import { Https } from "@/tool/https";
|
import { Https } from "@/tool/https";
|
||||||
import { Modal,message } from "ant-design-vue";
|
import { Modal,message } from "ant-design-vue";
|
||||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||||
import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
|
import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useStore } from "vuex";
|
import { useStore } from "vuex";
|
||||||
|
import Prompt from "@/component/home/tools/toProduct/Prompt.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components:{},
|
components:{ Prompt },
|
||||||
props:{
|
props:{
|
||||||
productData:{
|
productData:{
|
||||||
type:Object,
|
type:Object,
|
||||||
@@ -219,6 +221,7 @@ setup(props:any,{emit}) {
|
|||||||
return store.state.UserHabit.userDetail
|
return store.state.UserHabit.userDetail
|
||||||
})
|
})
|
||||||
let {t} = useI18n()
|
let {t} = useI18n()
|
||||||
|
const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
|
||||||
let productimg = reactive({
|
let productimg = reactive({
|
||||||
isGenerate:false,//判断是否进行generate
|
isGenerate:false,//判断是否进行generate
|
||||||
textarea:null as any,
|
textarea:null as any,
|
||||||
@@ -304,6 +307,29 @@ setup(props:any,{emit}) {
|
|||||||
let isLike:any = ref(true)
|
let isLike:any = ref(true)
|
||||||
let robotAssits:any = ref(0)
|
let robotAssits:any = ref(0)
|
||||||
|
|
||||||
|
const promptTextList = computed(() => {
|
||||||
|
const { ageGroup, httpType } = store.state.Workspace.probjects
|
||||||
|
const isSingleDesign = httpType === 'SINGLE_DESIGN'
|
||||||
|
const isAdult = ageGroup === 'Adult'
|
||||||
|
|
||||||
|
if (isSingleDesign) {
|
||||||
|
const secondPrompt = isAdult
|
||||||
|
? t('poseTransfer.SingleAdultTryOn')
|
||||||
|
: t('poseTransfer.SingleChildTryOn')
|
||||||
|
return [t('poseTransfer.SingleGarment'), secondPrompt]
|
||||||
|
} else {
|
||||||
|
return [
|
||||||
|
isAdult
|
||||||
|
? t('poseTransfer.SeriesAdultTryOn')
|
||||||
|
: t('poseTransfer.SeriesChildTryOn')
|
||||||
|
]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const showPromptAssist = ref(false)
|
||||||
|
const handleClickAssistBtn = () => {
|
||||||
|
showPromptAssist.value = true
|
||||||
|
}
|
||||||
|
|
||||||
let remPrductimgTime:any = null
|
let remPrductimgTime:any = null
|
||||||
let prductimgTime:any = null
|
let prductimgTime:any = null
|
||||||
const getData = ()=>{
|
const getData = ()=>{
|
||||||
@@ -708,17 +734,14 @@ setup(props:any,{emit}) {
|
|||||||
productimg.productimgRemProductimg= false
|
productimg.productimgRemProductimg= false
|
||||||
}
|
}
|
||||||
const ifMaximumLength = async ()=>{
|
const ifMaximumLength = async ()=>{
|
||||||
await nextTick()
|
// 等待 DOM 更新后再读取 scrollHeight，避免高度计算不准
|
||||||
let textarea = productimg.textarea;
|
await nextTick();
|
||||||
const scrollTop = textarea.scrollTop;
|
const textarea = textareaRef.value as HTMLTextAreaElement | null;
|
||||||
// 2. 计算单行高度
|
if (!textarea) return;
|
||||||
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
|
// 先重置高度，再用内容撑开的高度
|
||||||
// 3. 重置高度为1行
|
textarea.style.height = 'auto';
|
||||||
textarea.style.height = lineHeight + 'px';
|
const newHeight = textarea.scrollHeight;
|
||||||
// 4. 计算实际需要的高度
|
|
||||||
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
|
|
||||||
textarea.style.height = newHeight + 'px';
|
textarea.style.height = newHeight + 'px';
|
||||||
textarea.scrollTop = scrollTop;
|
|
||||||
}
|
}
|
||||||
onBeforeUnmount(()=>{
|
onBeforeUnmount(()=>{
|
||||||
clearInterval(prductimgTime)
|
clearInterval(prductimgTime)
|
||||||
@@ -740,6 +763,9 @@ setup(props:any,{emit}) {
|
|||||||
scaleImageMask,
|
scaleImageMask,
|
||||||
isLike,
|
isLike,
|
||||||
robotAssits,
|
robotAssits,
|
||||||
|
promptTextList,
|
||||||
|
showPromptAssist,
|
||||||
|
handleClickAssistBtn,
|
||||||
getPrductimg,
|
getPrductimg,
|
||||||
removeProductimg,
|
removeProductimg,
|
||||||
getPoseList,
|
getPoseList,
|
||||||
@@ -752,6 +778,7 @@ setup(props:any,{emit}) {
|
|||||||
prductimgTime,
|
prductimgTime,
|
||||||
remPrductimgTime,
|
remPrductimgTime,
|
||||||
ifMaximumLength,
|
ifMaximumLength,
|
||||||
|
textareaRef
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -843,120 +870,120 @@ overflow: visible !important;
|
|||||||
</style>
|
</style>
|
||||||
<style lang="less" >
|
<style lang="less" >
|
||||||
.editDesignType_modal {
|
.editDesignType_modal {
|
||||||
.ant-modal-body {
|
.ant-modal-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scaleImage_content{
|
.scaleImage_content{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
.productImg_modal{
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 0;
|
|
||||||
z-index: 9;
|
|
||||||
|
|
||||||
flex: 1;
|
width: 100%;
|
||||||
overflow: hidden;
|
.productImg_modal{
|
||||||
.productImg_left{
|
position: relative;
|
||||||
width: 24rem;
|
left: 0;
|
||||||
display: flex;
|
z-index: 9;
|
||||||
height: 100%;
|
|
||||||
flex-direction: column;
|
flex: 1;
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
align-items: stretch;
|
.productImg_left{
|
||||||
flex-wrap: nowrap;
|
width: 24rem;
|
||||||
.input_box_btnBox{
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
align-items: stretch;
|
||||||
.input_box{
|
flex-wrap: nowrap;
|
||||||
justify-content: flex-end;
|
.input_box_btnBox{
|
||||||
}
|
width: 100%;
|
||||||
.productImg_content_item_generate_btn{
|
}
|
||||||
// transform: translateY(100%);
|
.input_box{
|
||||||
// position: absolute;
|
justify-content: flex-end;
|
||||||
// bottom: 0;
|
}
|
||||||
width: 100%;
|
.productImg_content_item_generate_btn{
|
||||||
justify-content: space-around;
|
// transform: translateY(100%);
|
||||||
margin-top: 0;
|
// position: absolute;
|
||||||
}
|
// bottom: 0;
|
||||||
.productImg_content_item_title{
|
width: 100%;
|
||||||
font-weight: 600;
|
justify-content: space-around;
|
||||||
font-size: 1.6rem;
|
margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
}
|
||||||
&.productImg_content_item_title_menu{
|
.productImg_content_item_title{
|
||||||
margin-bottom: 6rem;
|
font-weight: 600;
|
||||||
:deep(.generalMenu_printModel){
|
font-size: 1.6rem;
|
||||||
margin: 0;
|
margin-bottom: 1rem;
|
||||||
width: 100%;
|
&.productImg_content_item_title_menu{
|
||||||
> div,> ul{
|
margin-bottom: 6rem;
|
||||||
|
:deep(.generalMenu_printModel){
|
||||||
|
margin: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
> div,> ul{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_content_item_title_menubtn{
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_title_menubtn{
|
&.productImg_content_item_title_similarity{
|
||||||
|
// margin-bottom: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.productImg_content_item_Direction{
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.selectText{
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
> div{
|
||||||
|
background: #efeff1;
|
||||||
|
width: 100%;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 500;
|
margin-right: 1.2rem;
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 1.2rem;
|
||||||
|
white-space: nowrap; /* 文本不换行 */
|
||||||
|
overflow: hidden; /* 溢出部分隐藏 */
|
||||||
|
text-overflow: ellipsis; /* 显示省略号 */
|
||||||
|
&:hover{
|
||||||
|
background: #F9FAFA;
|
||||||
|
}
|
||||||
|
&:first-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.productImg_content_item_title_similarity{
|
.selectText{
|
||||||
// margin-bottom: 8rem;
|
margin-bottom: 2rem;
|
||||||
}
|
display: flex;
|
||||||
}
|
|
||||||
.productImg_content_item_Direction{
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
margin-right: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.selectText{
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
> div{
|
|
||||||
background: #efeff1;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 1.6rem;
|
> div{
|
||||||
margin-right: 1.2rem;
|
background: #efeff1;
|
||||||
border-radius: 1.6rem;
|
width: 100%;
|
||||||
cursor: pointer;
|
height: 4.8rem;
|
||||||
padding: 1.2rem;
|
margin-right: 1.2rem;
|
||||||
white-space: nowrap; /* 文本不换行 */
|
border-radius: 1.6rem;
|
||||||
overflow: hidden; /* 溢出部分隐藏 */
|
cursor: pointer;
|
||||||
text-overflow: ellipsis; /* 显示省略号 */
|
padding: 1.2rem;
|
||||||
&:hover{
|
white-space: nowrap; /* 文本不换行 */
|
||||||
background: #F9FAFA;
|
overflow: hidden; /* 溢出部分隐藏 */
|
||||||
}
|
text-overflow: ellipsis; /* 显示省略号 */
|
||||||
&:first-child{
|
&:hover{
|
||||||
margin-right: 0;
|
background: #F9FAFA;
|
||||||
|
}
|
||||||
|
&:first-child{
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.selectText{
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
display: flex;
|
|
||||||
width: 100%;
|
|
||||||
> div{
|
|
||||||
background: #efeff1;
|
|
||||||
width: 100%;
|
|
||||||
height: 4.8rem;
|
|
||||||
margin-right: 1.2rem;
|
|
||||||
border-radius: 1.6rem;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 1.2rem;
|
|
||||||
white-space: nowrap; /* 文本不换行 */
|
|
||||||
overflow: hidden; /* 溢出部分隐藏 */
|
|
||||||
text-overflow: ellipsis; /* 显示省略号 */
|
|
||||||
&:hover{
|
|
||||||
background: #F9FAFA;
|
|
||||||
}
|
|
||||||
&:first-child{
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.transferPose{
|
.transferPose{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -1030,17 +1057,63 @@ overflow: visible !important;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.productImg_content_item_similarity{
|
.productImg_content_item_similarity{
|
||||||
padding-bottom: 2.4rem;
|
padding-bottom: 2.4rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
input{
|
input{
|
||||||
width: 5rem;
|
width: 5rem;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.prompt-container {
|
||||||
|
margin-top: 4rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
position: relative;
|
||||||
|
.prompt-title {
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
.input_border {
|
||||||
|
padding-bottom: 0;
|
||||||
|
.input_box {
|
||||||
|
.input_box_btnBox {
|
||||||
|
position: relative;
|
||||||
|
.textarea {
|
||||||
|
min-height: 12.7rem;
|
||||||
|
max-height: none;
|
||||||
|
resize: none;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.asistant-btn {
|
||||||
|
height: 2.3rem;
|
||||||
|
padding: 0 0.6rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #313131;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1.3rem;
|
||||||
|
left: 1.3rem;
|
||||||
|
display: flex;
|
||||||
|
column-gap: 0.3rem;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
border: 1px solid #dfdfdf;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
.asistant-icon {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-right: 0;
|
||||||
|
width: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.scaleImage_content_imgBox{
|
.scaleImage_content_imgBox{
|
||||||
|
|||||||
Reference in New Issue
Block a user