style: 转产品图弹窗样式
This commit is contained in:
zhangyh
@@ -71,32 +71,33 @@
|
||||
</a-slider>
|
||||
<input style="margin-left: 2rem;" type="number" readonly v-model="productimgBrightenValue">
|
||||
</div>
|
||||
<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
|
||||
<div class="input_box">
|
||||
<div class="input_box_btnBox" style="height: auto;">
|
||||
<!-- <input
|
||||
class="search_input"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
v-model="productimgSearchName"
|
||||
@keydown.enter="getPrductimg()"
|
||||
/>
|
||||
<i v-show="!productimgIsTextarea" class="fi fi-br-expand" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i>
|
||||
<i v-show="productimgIsTextarea" class="fi fi-bs-compress" @click.stop="()=>productimgIsTextarea = !productimgIsTextarea"></i> -->
|
||||
<textarea
|
||||
ref="textarea"
|
||||
class="textarea "
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter="getPrductimg()"
|
||||
v-model="productimgSearchName"
|
||||
></textarea>
|
||||
<div
|
||||
class="prompt-container"
|
||||
v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'"
|
||||
>
|
||||
<div class="prompt-title">{{ $t('ProductImg.Prompt') }}</div>
|
||||
<div class="input_border productImg_content_item_generate">
|
||||
<div class="input_box">
|
||||
<div class="input_box_btnBox">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
class="textarea"
|
||||
:placeholder="$t('Generate.inputContent1')"
|
||||
@input="ifMaximumLength"
|
||||
@keydown.enter.prevent="getPrductimg()"
|
||||
v-model="productimgSearchName"
|
||||
></textarea>
|
||||
<div class="asistant-btn" @click="handleClickAssistBtn">
|
||||
<i class="fi fi-bs-magic-wand asistant-icon"></i>
|
||||
<span>{{ $t('ProductImg.PromptAssit') }}</span>
|
||||
</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>
|
||||
</div> -->
|
||||
<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
|
||||
<div class="head">
|
||||
<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
|
||||
@@ -175,21 +176,22 @@
|
||||
<div class="mark_loading" v-show="loadingShow">
|
||||
<a-spin size="large" />
|
||||
</div>
|
||||
|
||||
</a-modal>
|
||||
<Prompt v-model:showModal="showPromptAssist" :promptList="promptTextList" />
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<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 { Modal,message } from "ant-design-vue";
|
||||
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useStore } from "vuex";
|
||||
import Prompt from "@/component/home/tools/toProduct/Prompt.vue";
|
||||
|
||||
export default defineComponent({
|
||||
components:{},
|
||||
components:{ Prompt },
|
||||
props:{
|
||||
productData:{
|
||||
type:Object,
|
||||
@@ -219,6 +221,7 @@ setup(props:any,{emit}) {
|
||||
return store.state.UserHabit.userDetail
|
||||
})
|
||||
let {t} = useI18n()
|
||||
const textareaRef = useTemplateRef<HTMLTextAreaElement>('textareaRef')
|
||||
let productimg = reactive({
|
||||
isGenerate:false,//判断是否进行generate
|
||||
textarea:null as any,
|
||||
@@ -304,6 +307,29 @@ setup(props:any,{emit}) {
|
||||
let isLike:any = ref(true)
|
||||
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 prductimgTime:any = null
|
||||
const getData = ()=>{
|
||||
@@ -708,17 +734,14 @@ setup(props:any,{emit}) {
|
||||
productimg.productimgRemProductimg= false
|
||||
}
|
||||
const ifMaximumLength = async ()=>{
|
||||
await nextTick()
|
||||
let textarea = productimg.textarea;
|
||||
const scrollTop = textarea.scrollTop;
|
||||
// 2. 计算单行高度
|
||||
const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
|
||||
// 3. 重置高度为1行
|
||||
textarea.style.height = lineHeight + 'px';
|
||||
// 4. 计算实际需要的高度
|
||||
const newHeight = Math.max(lineHeight, textarea.scrollHeight);
|
||||
// 等待 DOM 更新后再读取 scrollHeight，避免高度计算不准
|
||||
await nextTick();
|
||||
const textarea = textareaRef.value as HTMLTextAreaElement | null;
|
||||
if (!textarea) return;
|
||||
// 先重置高度，再用内容撑开的高度
|
||||
textarea.style.height = 'auto';
|
||||
const newHeight = textarea.scrollHeight;
|
||||
textarea.style.height = newHeight + 'px';
|
||||
textarea.scrollTop = scrollTop;
|
||||
}
|
||||
onBeforeUnmount(()=>{
|
||||
clearInterval(prductimgTime)
|
||||
@@ -740,6 +763,9 @@ setup(props:any,{emit}) {
|
||||
scaleImageMask,
|
||||
isLike,
|
||||
robotAssits,
|
||||
promptTextList,
|
||||
showPromptAssist,
|
||||
handleClickAssistBtn,
|
||||
getPrductimg,
|
||||
removeProductimg,
|
||||
getPoseList,
|
||||
@@ -752,6 +778,7 @@ setup(props:any,{emit}) {
|
||||
prductimgTime,
|
||||
remPrductimgTime,
|
||||
ifMaximumLength,
|
||||
textareaRef
|
||||
};
|
||||
},
|
||||
data() {
|
||||
@@ -843,120 +870,120 @@ overflow: visible !important;
|
||||
</style>
|
||||
<style lang="less" >
|
||||
.editDesignType_modal {
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ant-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
.productImg_modal{
|
||||
.scaleImage_content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.productImg_left{
|
||||
width: 24rem;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
.input_box_btnBox{
|
||||
width: 100%;
|
||||
.productImg_modal{
|
||||
position: relative;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.productImg_left{
|
||||
width: 24rem;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.input_box{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
// transform: translateY(100%);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
margin-top: 0;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
margin-bottom: 6rem;
|
||||
:deep(.generalMenu_printModel){
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
> div,> ul{
|
||||
align-items: stretch;
|
||||
flex-wrap: nowrap;
|
||||
.input_box_btnBox{
|
||||
width: 100%;
|
||||
}
|
||||
.input_box{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
// transform: translateY(100%);
|
||||
// position: absolute;
|
||||
// bottom: 0;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
margin-top: 0;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
margin-bottom: 6rem;
|
||||
:deep(.generalMenu_printModel){
|
||||
margin: 0;
|
||||
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-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{
|
||||
// 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;
|
||||
.selectText{
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
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;
|
||||
> 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1030,17 +1057,63 @@ overflow: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
padding-bottom: 2.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
.productImg_content_item_similarity{
|
||||
padding-bottom: 2.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input{
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
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{
|
||||
|
||||
Reference in New Issue
Block a user