部分页面调整
This commit is contained in:
X1627315083
@@ -48,10 +48,10 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="productimgMenu.value == 'ProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.Similarity')}}</span>
|
||||
</div>
|
||||
<div v-show="productimgMenu.value == 'ProductImage'" class="productImg_content_item_similarity">
|
||||
<div v-show="productimgMenu.value == 'ToProductImage'" class="productImg_content_item_similarity">
|
||||
<a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
@afterChange="setSimilarity"
|
||||
@@ -61,6 +61,20 @@
|
||||
</a-slider>
|
||||
<input type="number" readonly v-model="similarity">
|
||||
</div>
|
||||
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
|
||||
<span>{{$t('ProductImg.RelightDirection')}}</span>
|
||||
</div>
|
||||
<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
|
||||
<!-- <a-slider class="system_silder"
|
||||
v-model:value="similarity"
|
||||
@afterChange="setSimilarity"
|
||||
:tooltipVisible="false"
|
||||
:step="5"
|
||||
>
|
||||
</a-slider> -->
|
||||
<a-select style="width: 100%;" v-model:value="RelightDirection" :options="RelightDirectionList"></a-select>
|
||||
</div>
|
||||
|
||||
<div class="productImg_content_item_title">{{$t('ProductImg.SelectCollection')}}</div>
|
||||
<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
|
||||
<div class="content_item_imgBox_itemImg" v-for="item in selectList[productimgMenu.value]" :key="item.id" >
|
||||
@@ -131,7 +145,7 @@
|
||||
<div class="productImg_content_item_title">{{$t('ProductImg.GenerateProduct')}}</div>
|
||||
<div class="productImg_right_item_box generalScroll" v-mousewheel>
|
||||
<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
|
||||
<div class="productImg_right_item_imgBox" v-if="item?.status != 'Success'">
|
||||
<div class="productImg_right_item_imgBox" v-if="item?.status != 'Success' && !item.imgUrl">
|
||||
<img class="loadingImg" src="@/assets/images/homePage/loading.gif" alt="">
|
||||
</div>
|
||||
<div class="productImg_right_item_imgBox" v-else>
|
||||
@@ -139,7 +153,7 @@
|
||||
<div class="productImg_right_item_like" @click.stop="likeFile(item,'like',index)">
|
||||
<i class="fi fi-rr-heart"></i>
|
||||
</div>
|
||||
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(generateList,index)">
|
||||
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(generateList,index,true)">
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
</div>
|
||||
<div class="productImg_right_item_menu iconLeft" @click.stop="setMenuShow(item)">
|
||||
@@ -164,7 +178,7 @@
|
||||
<div class="productImg_right_item_like" @click.stop="likeFile(item,'noLike',index)">
|
||||
<i class="fi fi-sr-heart"></i>
|
||||
</div>
|
||||
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(likeList,index)">
|
||||
<div class="productImg_right_item_scale iconLeft" @click.stop="setScaleImage(likeList,index,false)">
|
||||
<i class="fi fi-bs-expand-arrows-alt"></i>
|
||||
</div>
|
||||
<div class="productImg_right_item_menu iconLeft" @click.stop="setMenuShow(item)">
|
||||
@@ -180,7 +194,12 @@
|
||||
</div>
|
||||
|
||||
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
|
||||
<scaleImage ref="scaleImage"></scaleImage>
|
||||
<scaleImage ref="scaleImage"
|
||||
:productData="{
|
||||
upload:upload,
|
||||
similarity:similarity,
|
||||
}"
|
||||
:isProductimg="true"></scaleImage>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
@@ -228,7 +247,7 @@ export default defineComponent({
|
||||
})
|
||||
let productimgMenuList = ref([
|
||||
{
|
||||
value:'ProductImage',
|
||||
value:'ToProductImage',
|
||||
label:useI18n().t('ProductImg.ProductImage')
|
||||
},{
|
||||
value:'Relight',
|
||||
@@ -236,6 +255,22 @@ export default defineComponent({
|
||||
}
|
||||
])
|
||||
let productimgMenu:any = ref(productimgMenuList.value[0])
|
||||
let RelightDirectionList = ref([
|
||||
{
|
||||
value:'Right Light',
|
||||
label:useI18n().t('ProductImg.RightLight')
|
||||
},{
|
||||
value:'Left Light',
|
||||
label:useI18n().t('ProductImg.LeftLight')
|
||||
},{
|
||||
value:'Top Light',
|
||||
label:useI18n().t('ProductImg.TopLight')
|
||||
},{
|
||||
value:'Bottom Light',
|
||||
label:useI18n().t('ProductImg.BottomLight')
|
||||
}
|
||||
])
|
||||
let RelightDirection:any = ref(RelightDirectionList.value[0].value)
|
||||
let ExportModel = ref()
|
||||
let selectList:any = ref({})
|
||||
let likeDesignCollectionList: any = computed(() => {
|
||||
@@ -245,7 +280,7 @@ export default defineComponent({
|
||||
let init = (userGroupId:any,beenPublished:any)=>{
|
||||
productImg.value = true
|
||||
productImgData.beenPublished = beenPublished
|
||||
selectList.value['ProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
|
||||
selectList.value['ToProductImage'] = JSON.parse(JSON.stringify(likeDesignCollectionList.value))
|
||||
upload.value = {
|
||||
userlikeGroupId:userGroupId
|
||||
}
|
||||
@@ -286,6 +321,7 @@ export default defineComponent({
|
||||
productImg.value = false
|
||||
productImgData.likeList = []
|
||||
productImgData.generateList = []
|
||||
selectList.value = {}
|
||||
productimgMenu.value = productimgMenuList.value[0]
|
||||
}
|
||||
|
||||
@@ -350,6 +386,8 @@ export default defineComponent({
|
||||
productImgData.generateList.splice(index,1)
|
||||
}else{
|
||||
productImgData.generateList.push(item)
|
||||
console.log(item,productImgData.generateList);
|
||||
|
||||
productImgData.likeList.splice(index,1)
|
||||
}
|
||||
|
||||
@@ -413,11 +451,13 @@ export default defineComponent({
|
||||
message.info(t('ProductImg.jsContent2'))
|
||||
return
|
||||
}
|
||||
let imageStrength = productImgData.similarity == 100? 95 :productImgData.similarity
|
||||
let data:any ={
|
||||
prompt:productImgData.searchName,
|
||||
toProductImageVOList:selectArr,
|
||||
userLikeGroupId:upload.value.userlikeGroupId,
|
||||
imageStrength:(100 - productImgData.similarity)/100,
|
||||
direction:RelightDirection.value,
|
||||
imageStrength:(100 - imageStrength)/100,
|
||||
}
|
||||
productImgData.isProductimg = true
|
||||
remPrductimgTime = setTimeout(()=>{
|
||||
@@ -492,6 +532,7 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
productImgData.generateList.filter((item:any)=>item.status == 'Success')
|
||||
clearInterval(prductimgTime)
|
||||
clearInterval(remPrductimgTime)
|
||||
productImgData.isProductimg = false
|
||||
@@ -517,10 +558,11 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
let scaleImage = ref()
|
||||
let setScaleImage = (arr:any,index:any)=>{
|
||||
let setScaleImage = (arr:any,index:any,isLike:any)=>{
|
||||
arr.forEach((item:any)=>{
|
||||
item.imgUrl = item.url
|
||||
})
|
||||
scaleImage.value.isProductimg = isLike
|
||||
scaleImage.value.init(arr,index)
|
||||
scaleImage.value.isLike = false
|
||||
scaleImage.value.isComparison = true
|
||||
@@ -536,6 +578,9 @@ export default defineComponent({
|
||||
if(!selectList.value[productimgMenu.value.value]){
|
||||
selectList.value[productimgMenu.value.value] = []
|
||||
}
|
||||
selectList.value[productimgMenu.value.value].forEach((item:any) => {
|
||||
item.isChecked = false
|
||||
});
|
||||
if(selectList.value[menuItem.value].indexOf(item) == -1){
|
||||
item.isChecked = true
|
||||
selectList.value[menuItem.value].push(item)
|
||||
@@ -563,6 +608,10 @@ export default defineComponent({
|
||||
...toRefs(productImgData),
|
||||
productimgMenuList,
|
||||
productimgMenu,
|
||||
|
||||
RelightDirectionList,
|
||||
RelightDirection,
|
||||
|
||||
selectList,
|
||||
likeDesignCollectionList,
|
||||
ExportModel,
|
||||
@@ -665,233 +714,248 @@ export default defineComponent({
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
.upload_item{
|
||||
|
||||
}
|
||||
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.productImg_content_item_title_menubtn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.productImg_content_item_title{
|
||||
font-weight: 600;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
&.productImg_content_item_title_menu{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.productImg_content_item_title_menubtn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.productImg_content_item_title_similarity{
|
||||
// margin-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.productImg_content_item_imgBox{
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
.content_item_imgBox_itemImg{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
height: 12rem;
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
&.active{
|
||||
opacity: .5;
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
&.productImg_content_item_title_similarity{
|
||||
// margin-bottom: 8rem;
|
||||
&.content_item_imgBox_itemImg:hover{
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.content_item_imgBox_itemImg:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_left,.productImg_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_left{
|
||||
width: 25%;
|
||||
position: relative;
|
||||
.upload_file_item{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
width: auto;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
&.upload_file_item:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_intro{
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
// width: 45%;
|
||||
.productImg_content_item_imgBox{
|
||||
.content_item_imgBox_itemImg{
|
||||
width: 5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate{
|
||||
--width:100%;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.system_silder{
|
||||
flex: 1;
|
||||
}
|
||||
input{
|
||||
width: 30%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_Direction{
|
||||
padding-bottom: calc(2rem* 1.2);
|
||||
.ant-select{
|
||||
font-size: 1.6rem;
|
||||
.ant-select-selector::after{
|
||||
line-height: 1;
|
||||
}
|
||||
.ant-select-selector .ant-select-selection-item{
|
||||
line-height: 1;
|
||||
}
|
||||
.ant-select-selector{
|
||||
height: auto;
|
||||
padding: 1rem 1rem;
|
||||
box-shadow: none !important;
|
||||
border: calc(0.1rem* 1.2) solid #F1F1F1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
.input_box{
|
||||
flex: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.started_btn{
|
||||
// width: 13rem;
|
||||
// text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right{
|
||||
width: 75%;
|
||||
padding-left: 2rem;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
.productImg_right_item_box{
|
||||
height: 40%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
width: auto;
|
||||
margin-bottom: 2rem;
|
||||
align-items: center;
|
||||
.content_item_imgBox_itemImg{
|
||||
display: flex;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 2%;
|
||||
padding: 1rem 1.5rem;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute
|
||||
}
|
||||
.productImg_right_item{
|
||||
height: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
height: 12rem;
|
||||
img{
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
object-fit: contain;
|
||||
&.active{
|
||||
opacity: .5;
|
||||
transform: scale(.9);
|
||||
}
|
||||
}
|
||||
&.content_item_imgBox_itemImg:hover{
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.content_item_imgBox_itemImg_delete{
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
.productImg_right_item_imgBox{
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,.2);
|
||||
position: absolute;
|
||||
i{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
color: #fff;
|
||||
.loadingImg{
|
||||
width: 14rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .5rem;
|
||||
border: .1rem solid #ccc;
|
||||
.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.productImg_right_item_menu{
|
||||
ul{
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
width: 13rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
li{
|
||||
background: #cccccc;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
li:hover{
|
||||
// background: rgba(0,0,0,.4);
|
||||
background: #999999;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iconLeft{
|
||||
left: 2rem;
|
||||
right: auto;
|
||||
}
|
||||
.productImg_right_item_scale{
|
||||
top: 6rem;
|
||||
}
|
||||
}
|
||||
.content_item_imgBox_itemImg:last-child{
|
||||
.productImg_right_item:hover{
|
||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.productImg_right_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_left,.productImg_right{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.productImg_content_item:last-child{
|
||||
.productImg_right_item_box:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_left{
|
||||
width: 25%;
|
||||
position: relative;
|
||||
.upload_file_item{
|
||||
display: flex;
|
||||
margin-right: 1rem;
|
||||
width: auto;
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
&.upload_file_item:last-child{
|
||||
margin-right: 0rem;
|
||||
}
|
||||
}
|
||||
// width: 45%;
|
||||
.productImg_content_item_imgBox{
|
||||
.content_item_imgBox_itemImg{
|
||||
width: 5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate{
|
||||
--width:100%;
|
||||
}
|
||||
.productImg_content_item_similarity{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.system_silder{
|
||||
flex: 1;
|
||||
}
|
||||
input{
|
||||
width: 30%;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.productImg_content_item_generate_btn{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
.input_box{
|
||||
flex: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.started_btn{
|
||||
// width: 13rem;
|
||||
// text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.productImg_right{
|
||||
width: 75%;
|
||||
padding-left: 2rem;
|
||||
height: 100%;
|
||||
.productImg_right_titleBtn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.productImg_right_item_box{
|
||||
height: 40%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background: #f6f6fa;
|
||||
border-radius: 2rem;
|
||||
margin-bottom: 2%;
|
||||
padding: 1rem 1.5rem;
|
||||
position: relative;
|
||||
.mark_loading{
|
||||
position: absolute
|
||||
}
|
||||
.productImg_right_item{
|
||||
height: 100%;
|
||||
padding: 1rem 0;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.productImg_right_item_imgBox{
|
||||
height: 100%;
|
||||
.loadingImg{
|
||||
width: 14rem;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
img{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
cursor: pointer;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: .5rem;
|
||||
border: .1rem solid #ccc;
|
||||
.fi-sr-heart{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
.productImg_right_item_menu{
|
||||
ul{
|
||||
top: 100%;
|
||||
position: absolute;
|
||||
width: 13rem;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
border-radius: calc(1rem*1.2);
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
li{
|
||||
background: #cccccc;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
li:hover{
|
||||
// background: rgba(0,0,0,.4);
|
||||
background: #999999;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.iconLeft{
|
||||
left: 2rem;
|
||||
right: auto;
|
||||
}
|
||||
.productImg_right_item_scale{
|
||||
top: 6rem;
|
||||
}
|
||||
}
|
||||
.productImg_right_item:hover{
|
||||
.productImg_right_item_like,.productImg_right_item_scale,.productImg_right_item_menu{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.productImg_right_item:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
.productImg_right_item_box:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.productImg_right_titleBtn{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user