aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product

Browse Source
This commit is contained in:
X1627315083
2024-06-01 10:02:21 +08:00
parent 89ee910ce9
commit ff9e2f510b
21 changed files with 2046 additions and 1798 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/HomeView/HomeView.vue
View File

@@ -117,7 +117,8 @@
<div class="right_content_export" v-show="likeDesignCollectionList.length">
<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
<div class="button_second Guide_1_31" @click="exportModel()">
{{ $t('HomeView.Export') }}
<!-- {{ $t('HomeView.Export') }} -->
finalize collection
</div>
<!-- <div
:class="[
@@ -194,9 +195,9 @@
<KeepAlive>
<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
</KeepAlive>
<productImg ref="productImg" @setTask="setTask"></productImg>
<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
<!-- 导出缩略图的蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
@@ -227,7 +228,7 @@ import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode}
import CollectionModal from "@/component/HomePage/collectionModal.vue";
import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
import ExportModel from "@/component/HomePage/ExportModel.vue";
import productImg from "@/component/HomePage/productImg.vue";
import affiche from "@/component/HomePage/affiche.vue";
import DesignDetail from "@/component/Detail/DesignDetail.vue";
// import RobotAssist from "@/component/HomePage/RobotAssist.vue";
@@ -252,10 +253,10 @@ export default defineComponent({
NewCollectionReview,
DesignDetail,
ExportNewCoolection,
ExportModel,
affiche,
// RobotAssist,
draggable
draggable,
productImg
},
setup(props,{emit}) {
const store = useStore();
@@ -1074,8 +1075,10 @@ export default defineComponent({
document.removeEventListener("click", this.closeShowOperateContent);
},
exportModel(){
let exportModel:any = this.$refs.ExportModel
exportModel.init()
let productImg:any = this.$refs.productImg
productImg.productImgMask = true
productImg.init()
},
//打开图片详情

304
src/views/HomeView/Works.vue
View File

@@ -1,59 +1,27 @@
<template>
<div class="works_page">
<div class="works_page" :class="{active:isScroll}">
<!-- <div class="modal_title_text">
<div>Works</div>
</div> -->
<div class="modal_title_text">
<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
</div>
<div class="page_content">
<div class="page_content_item" v-for="item,index in worksList" :key="item">
<div class="page_content_item_img" @click.stop="getImgScale(index)">
<img v-lazy="item.designPythonOutfitUrl" alt="">
<div class="delete_like_file_block" >
<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
</div>
</div>
<div class="page_content_item_text">
<div class="page_content_item_text_name" :title="item.portfolioName">
{{item.portfolioName}}
</div>
<div class="page_content_item_text_bottom">
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span>321</span>
<!-- <span>{{ item.likeNum }}</span> -->
</div>
<div>
<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
<i v-else class="fi fi-rr-social-network"></i>
<span>321</span>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
</svg>
<span>321</span>
<!-- <span>{{ item.lookNum }}</span> -->
</div>
<!-- <div>
<i class="fi fi-rr-comment-alt-dots"></i>
<span>{{ item.lookNum }}</span>
</div> -->
</div>
</div>
<div class="modal_title_text modal_search">
<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
{{ item.name }}
</div>
<div class="modal_search_menu">
<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
</div>
</div>
<div class="page_content" >
<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll"></Falls>
<div class="page_loading_box">
<span class="page_loading" v-show="!isShowMark"></span>
<span v-show="isShowMark">
<a-spin size="large" />
</span>
</div>
</div>
<newScaleImage ref="newScaleImage"></newScaleImage>
<!-- 蒙层 start-->
<div class="mark_loading" v-show="isShowMark">
<a-spin size="large" />
</div>
<!-- 蒙层 end-->
<!-- <RobotAssist></RobotAssist> -->
</div>
@@ -73,10 +41,21 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
import { useI18n } from "vue-i18n";
import { ElCascader } from 'element-plus'
import { remove } from "jszip";
import generalMenu from "@/component/HomePage/generalMenu.vue";
import Falls from "@/component/WorksPage/Falls.vue";
export default defineComponent({
components: {
newScaleImage,
Falls,
generalMenu,
},
props:{
isScroll:{
type:Boolean,
default:true,
},
},
setup() {
let filter:any = reactive({
worksSelect: 'all',
@@ -93,101 +72,121 @@ export default defineComponent({
name: 'freehand sketching',
value: 'freehandSketching'
},
{
name: 'My Works',
value: 'myWorks'
},
],
worksList: [
{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},
{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/11.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'bbb',
lookNum:'999',
likeNum:'123',
like: true,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/1.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
like: false,
},{
imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
name:'aaa',
lookNum:'213',
likeNum:'123',
@@ -198,9 +197,36 @@ export default defineComponent({
page:1,
size:10,
},
isShowMark:false
isShowMark:false,
isNoData:false,//如果数据为空就不加载
})
let menuList:any = ref([
{
label:'全部',
value:'all',
},{
label:'男装',
value:'man',
},{
label:'女装',
value:'woman',
},{
label:'鞋子',
value:'shoes',
},{
label:'包包',
value:'bag',
},{
label:'配饰',
value:'accessories',
}
])
let selectMenu:any = ref({
label:'全部',
value:'all',
})
let newScaleImage:any = ref()
let fall:any = ref()
let setWorksSelect = (val:any) => {
filter.worksSelect = val.value
}
@@ -211,25 +237,49 @@ export default defineComponent({
newScaleImage.value.init(filter.worksList,index)
}
let getPorfolio = ()=>{
let data = filter.getListDate
Https.axiosPost(Https.httpUrls.getPorfolio, data)
.then((rv) => {
console.log(rv);
filter.worksList = rv.content
})
.catch((rv) => {});
// let data = filter.getListDate
// Https.axiosPost(Https.httpUrls.getPorfolio, data)
// .then((rv) => {
// console.log(rv);
// filter.worksList = rv.content
// })
// .catch((rv) => {});
if(filter.isShowMark && !filter.isNoData)return
filter.isShowMark = true
setTimeout(() => {
filter.isShowMark = false
fall.value.push(filter.worksList);
}, 1000);
}
let {t} = useI18n()
let setprintModel= (data:any)=>{
selectMenu.value = data
}
onMounted (()=>{
getPorfolio()
let worksPage:any = document.querySelector('.works_page')
let imgParent:any = document.querySelector('.page_loading')
new IntersectionObserver(
(entries, observer) => {
// 如果不是相交，则直接返回
// console.log(entries[0]);
if (!entries[0].intersectionRatio) return;
getPorfolio()
},
// { root:worksPage }
).observe(imgParent);
})
return {
...toRefs(filter),
menuList,
selectMenu,
newScaleImage,
fall,
setWorksSelect,
likeFile,
getImgScale,
t,
setprintModel,
}
},
data() {
@@ -273,14 +323,20 @@ export default defineComponent({
font-size: 14px;
}
.works_page {
border-radius: 4rem;
width: 100%;
overflow: hidden;
height: 100%;
// overflow: hidden;
// height: 100%;
height: auto;
padding: 0 9rem;
// min-width: 1440px;
position: relative;
padding-top: 5rem;
.modal_title_text{
display: flex;
margin: 0;
padding-bottom: 2.4rem;
.modal_title_text_assistant{
padding: 1rem 3rem;
border-radius: 2rem;
@@ -295,84 +351,36 @@ export default defineComponent({
background: #39215b;
color: #fff;
}
.modal_search_menu{
margin-left: auto;
z-index: 10;
.generalMenu_printModel{
margin-right: 0;
}
}
}
.page_content {
position: relative;
display: flex;
flex-wrap: wrap;
overflow-y: auto;
height: 125rem;
align-content: flex-start;
.page_content_item{
display: flex;
flex-direction: column;
margin-right: 4rem;
margin-bottom: 4rem;
width: 30rem;
}
.page_content_item_text,.page_content_item_img{
display: flex;
}
.page_content_item_img{
width: 30rem;
height: 30rem;
overflow: hidden;
padding: 2rem 0;
justify-content: center;
border-radius: 2rem;
position: relative;
img{
// width: 100%;
cursor: pointer;
max-height: 100%;
object-fit: cover;
transform: scale(1.15);
transition: all 0.5s;
}
.delete_like_file_block{
cursor: pointer;
}
&:hover{
.delete_like_file_block{
display: block;
}
img{
transform: scale(1);
}
}
}
.page_content_item_text{
justify-content: space-between;
align-items: center;
>div{
font-size: 2rem;
}
.page_content_item_text_name{
width: 30%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.page_content_item_text_bottom{
width: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
>div{
display: flex;
align-items: center;
font-size: 2rem;
margin-right: 1rem;
i{
display: flex;
font-size: 2rem;
}
span{
margin-left: calc(var(--padding) / 2);
}
}
height: auto;
background: #f7f8fa;
.page_loading_box{
text-align: center;
.page_loading{
display: block;
width: 20px;
height: 20px;
}
}
}
&.active{
display: flex;
flex-direction: column;
height: 100%;
.page_content{
overflow-y: auto;
width: 100%;
}
}
}
</style>

691
src/views/HomeView/library.vue
View File

@@ -16,7 +16,7 @@
<i :class="[menu.icon]"></i>
<div>{{menu.title}}</div>
</div>
<div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div>
<!-- <div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div> -->
</div>
<div v-show="menu.showChildren && menu.children.length">
<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
@@ -37,10 +37,11 @@
</div>
<div class="librart_headr_right">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'">
<div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
<a-select
ref="select"
v-model:value="sex.value"
v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
v-model:value="sex"
:options="sexList"
@change="sexChange"
>
@@ -53,10 +54,26 @@
</a-select>
<a-select
ref="select"
v-show="selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
v-model:value="designType.value"
:options="disignTypeList"
v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
v-model:value="designType"
:options="designTypeList[selectCode]"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
class="icon iconfont icon-xiala"
style="color: #343579"
></span
></template>
</a-select>
<a-select
ref="select"
v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
v-model:value="designType.value"
:options="designTypeList[selectCode]"
@change="handleChange"
:fieldNames="{ label: 'name', value: 'value' }"
>
<template #suffixIcon
><span
@@ -169,57 +186,78 @@
</div>
<div class="right_content_body" v-show="uploadGenerate !='Upload'">
<div class="content_body_header content_body_header_generate">
<div class="content_body_header_right" >
<div class="content_body_header_right" v-show="selectCode != 'Moodboard'">
<div class="checkboxItem" v-show="selectCode != 'Sketchboard'">
<label>
<input
type="checkbox"
v-model="checkbox[0].type"
@click="setKeyword(0)"
/>
<span>{{ $t('LibraryPage.ImageOnly') }}</span>
</label>
</div>
<div class="checkboxItem">
<label>
<input
type="checkbox"
v-model="checkbox[1].type"
@click="setKeyword(1)"
/>
<span>{{ $t('LibraryPage.TextOnly') }}</span>
</label>
</div>
<div class="checkboxItem">
<label>
<input
type="checkbox"
v-model="checkbox[2].type"
@click="setKeyword(2)"
/>
<span>{{ $t('LibraryPage.TextImage') }}</span>
</label>
</div>
</div>
<div class="content_body_header_right"></div>
<div v-show="selectCode == 'Printboard'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
</ul>
</div>
<div class="input_border">
<div class="input_box" :class="{active:inputShow}">
<input
class="search_input "
@input="ifMaximumLength"
:maxlength='inputShow?0:9999'
:class="{active:checkbox[0].type && selectCode != 'Moodboard'}"
@keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'"
:placeholder="$t('LibraryPage.inputContent2')"
v-model="captionGeneration">
<i class="icon iconfont icon-xiala" :class="{active:isTextarea, forbidden:checkbox[0].type&& selectCode != 'Moodboard'}" @click.stop="setTextareaShow"></i>
<div class="input_box_btnBox">
<div class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in selectGenerateList"
:key="file"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div
class="upload_file_item_content"
v-show="file?.status === 'done' || file?.base64"
>
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_like_file_block" :class="[driver__.driver?'hideEvents':'']">
<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
</div>
</div>
</div>
</div>
<input
class="search_input "
@input="ifMaximumLength"
:maxlength='inputShow?0:9999'
@keydown.enter="getgenerate"
@click="inputFocus()"
:placeholder="$t('LibraryPage.inputContent2')"
v-model="captionGeneration">
<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
<a-upload
class="search_upImg"
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:before-upload="beforeUpload"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="selectGenerateList"
multiple
:maxCount="1"
accept=".jpg,.png,.jpeg,.bmp"
@change="generateFileUploadChange"
>
</a-upload>
</i>
<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
</div>
<textarea
v-show="isTextarea "
class="search_textarea "
@input="ifMaximumLength"
:maxlength='inputShow?0:9999'
@keydown.enter="getgenerate" :readonly="checkbox[0].type && selectCode != 'Moodboard'"
@keydown.enter="getgenerate"
v-model="captionGeneration"
></textarea>
<div v-show="!isGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
@@ -232,67 +270,16 @@
<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
{{$t('Generate.Close')}}
</div>
<span ref="inputShowText"></span>
<span class="inputShowText" ref="inputShowText"></span>
</div>
</div>
<div v-show="selectCode == 'Printboard'" class="printModel">
<div @click.stop="PrintModel">{{ printModel.name }}</div>
<ul v-show="printModel.optype">
<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
</ul>
</div>
<div v-show="selectCode != 'Moodboard'" class="upload_item">
<div
class="upload_file_item"
v-for="(file, index) in selectGenerateList"
:key="file"
:class="[file?.checked?'active':'']"
>
<div
class="upload_file_item_content"
v-show="file?.status === 'uploading'"
>
<a-spin :indicator="indicator" tip="Uploading..." />
</div>
<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
<img :src="file?.imgUrl" class="upload_img" />
<div class="delete_file_block rightTop" @click.stop="deleteFile(index)" >
<span class="icon iconfont icon-shanchu"></span>
<div class="search_keyword" v-show="isInputFocus" @click.stop="">
<div class="search_keyword_center">
<div class="search_keyword_center_left">
<div v-for="item in workspace?.keyWord?.[selectCode]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
</div>
</div>
</div>
<div
class="upload_component upload_file_item"
v-show="selectGenerateList.length <= 2"
>
<a-upload
:capture="null"
:action="uploadUrl + '/api/element/upload'"
list-type="picture-card"
:before-upload="beforeUpload"
:disabled="checkbox[1].type"
:data="{
...upload
}"
:headers="{Authorization:token}"
v-model:file-list="selectGenerateList"
multiple
:maxCount="3"
accept=".jpg,.png,.jpeg,.bmp"
@change="generateFileUploadChange"
>
<div class="upload_tip_block">
<i class="fi fi-br-upload"></i>
<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
</div>
</a-upload>
</div>
</div>
</div>
<div class="content_body_table scroll_style">
@@ -318,7 +305,7 @@
</div>
</div>
</div>
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
<sketchCategory v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
</div>
<div class="content_img_name"></div>
</div>
@@ -351,7 +338,7 @@
</template>
<script lang="ts">
import { LoadingOutlined } from "@ant-design/icons-vue";
import { defineComponent,h ,ref,createVNode,nextTick,provide,computed} from 'vue'
import { defineComponent,h ,ref,createVNode,nextTick,reactive,provide,computed} from 'vue'
// import HeaderComponent from "@/component/HomePage/Header.vue";
import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
import setLabel from '@/component/LibraryPage/setLabel.vue';
@@ -382,14 +369,15 @@ export default defineComponent({
sketchCategory,
},
setup() {
const store = useStore();
let menuList = computed(()=>{
return [
{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
{title:'Design Elements',code:'DesignElements',icon:'fi fi-rs-people',showChildren:false,children:[]},
{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
]
@@ -397,15 +385,32 @@ export default defineComponent({
let selectImgList:any = ref([])
let selectCode:any = ref('Moodboard')
let searchPictureName = ref('')
let newSearchPictureName = ref('')
let designType:any = ref('Outwear')
let sex:any = ref('Meal')
let sexList:any = [
]
let disignTypeList:any = [
]
let designType:any = ref({
name:'',
value:''
})
let sex:any = ref({
label:'',
value:''
})
const sexList:any = ref([])
const printType = computed(() => {
return store.state.UserHabit.printType;
});
const designElementsType = computed(() => {
return store.state.UserHabit.designElementsType;
});
const positionType = computed(() => {
return store.state.UserHabit.Position;
});
let designTypeList:any = ref({
Sketchboard:positionType,
Moodboard:[],
Printboard:printType,
Models:[],
DesignElements:designElementsType,
})
let imgList = ref([])
let currentPage:any = ref(1)
let pageSize:any = ref(18)
@@ -413,32 +418,17 @@ export default defineComponent({
let uploadUrl:any = ref('')
let currentUploadFileNum:any = ref(0) //当次上传文件数量
let isShowMark:any = ref(false) //蒙层
let store = useStore();
let uploadGenerate:any = ref('Upload')
let checkbox = ref([
{
name: "image",
type: true,
},
{
name: "text",
type: false,
},
{
name: "text-image",
type: false,
},
]);
let inputShow = ref(false)
let generateCheckbox:any = ref()
let captionGeneration:any = ref()
let captionGeneration:any = ref('')
let inputTime = ref()
let generateList:any = ref({
Sketchboard:[],
Moodboard:[],
Printboard:[],
Models:[]
Models:[],
DesignElements:[],
})
let selectGenerateList:any = ref([])
let printModel = ref({
@@ -449,7 +439,6 @@ export default defineComponent({
let {t} = useI18n()
let type:any = {
selectCode:selectCode,
designType:designType
}
provide('type',type)
let value = ref({
@@ -466,27 +455,32 @@ export default defineComponent({
Sketchboard:'',
Moodboard:'',
Printboard:'',
Models:''
Models:'',
DesignElements:'',
})
let generateProceedList = ref([])
let isGenerate:any = ref({
Sketchboard:false,
Moodboard:false,
Printboard:false,
Models:false
Models:false,
DesignElements:false,
})
let remGenerate:any = ref({
Sketchboard:false,
Moodboard:false,
Printboard:false,
Models:false
Models:false,
DesignElements:false,
})
let remGenerateTime:any = ref({
Sketchboard:'',
Moodboard:'',
Printboard:'',
Models:''
Models:'',
DesignElements:'',
})
let scene:any = ref({})
let dragIdx:any=ref(0)
let getLibraryListInputTime:any = ref()
const options:any = ref([
@@ -500,15 +494,15 @@ export default defineComponent({
label:'classificationName',
}
let isTextarea = ref(false)
let workspace:any = ref({})
return {
menuList,
selectImgList,
selectCode,
searchPictureName,
newSearchPictureName,
sexList,
sex,
disignTypeList,
designTypeList,
designType,
imgList,
currentPage,
@@ -519,7 +513,6 @@ export default defineComponent({
isShowMark,
store,
uploadGenerate,
checkbox,
inputShow,
generateCheckbox,
captionGeneration,
@@ -537,11 +530,13 @@ export default defineComponent({
isGenerate,
remGenerate,
remGenerateTime,
scene,
dragIdx,
getLibraryListInputTime,
props,
options,
isTextarea,
workspace,
}
},
data(this_) {
@@ -560,6 +555,7 @@ export default defineComponent({
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
},
token: "",
isInputFocus:false,
};
},
watch:{
@@ -585,6 +581,9 @@ export default defineComponent({
this.getClass()
this.getSex()
this.token = getCookie("token") || "";
this.workspace = computed(()=>{
return this.store?.state?.Workspace?.workspace
})
},
methods:{
@@ -606,31 +605,36 @@ export default defineComponent({
})
},
async getPosition(){
let params
if(this.sex.value == 'Female'){
params = 'FemalePosition'
}else{
params = 'MalePosition'
}
await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
if (rv) {
let arr:any = []
rv.forEach((item:any) => {
arr.push({
value:item.name,
label:item.value,
name:item.value
})
});
this.designType = arr[0]
this.disignTypeList = arr
// this.workspaceItem.position = this.totalTypeList[0].label
}
})
// let params
// if(this.sex.value == 'Female'){
// params = 'FemalePosition'
// }else{
// params = 'MalePosition'
// }
this.store.commit('setPosition',this.sex.value)
this.designType = this.designTypeList.Sketchboard[0]
// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
// if (rv) {
// let arr:any = []
// rv.forEach((item:any) => {
// arr.push({
// value:item.name,
// label:item.value,
// name:item.value
// })
// });
// this.designType = arr[0]
// this.designTypeList['Sketchboard'] = arr
// // this.workspaceItem.position = this.totalTypeList[0].label
// }
// })
},
likeFile(item:any,str:string){
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? item.category : ''
let designType = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
}
if(str == 'like'){
let data = {
generateDetailId:item.id,
@@ -668,42 +672,29 @@ export default defineComponent({
this.total = 0,
this.searchPictureName = ''
this.imgList = [],
// this.sex = 'Female',
// this.designType = 'Outwear',
this.selectImgList = []
this.isTextarea = false
this.value.labelValue = []
this.getLibraryList('')
this.getClass()
if(this.designTypeList[this.selectCode].length >= 1){
this.designType = this.designTypeList[this.selectCode][0]
}else{
this.designType = {
name:'',
value:'',
}
}
if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
if(this.selectCode != 'DesignElements'){
this.getClass()
}
this.getLibraryList('')
this.captionGeneration = ''
this.selectGenerateList = []
// this.generateList = {
// 'Sketchboard':[],
// 'Moodboard':[],
// 'Printboard':[]
// }
this.inputShow = false
}
this.upload.level1Type = menu.code
}
if(this.selectCode == 'Sketchboard'){
this.checkbox=[
{
name: "image",
type: false,
},
{
name: "text",
type: true,
},
{
name: "text-image",
type: false,
},
]
}
},
async sexChange(){
@@ -933,7 +924,10 @@ export default defineComponent({
// message.info(this.t('isTest.image'));
// return
// }
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
let designType = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
}
let new_data = {
file:event.file,
level1Type:this.selectCode,
@@ -1001,7 +995,10 @@ export default defineComponent({
this.value.labelValue.forEach((item:any)=>{
labelArr.push(item[item.length-1])
})
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
let designType = ''
if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
designType = this.designType.value
}
let data = {
classificationIdList:labelArr,
level1Type:this.selectCode,
@@ -1020,13 +1017,12 @@ export default defineComponent({
this.isShowMark = true
Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
(rv: any) => {
if(rv.content.length == 0 && this.currentPage != 1){
if(rv.content?.length == 0 && this.currentPage != 1){
this.currentPage = 1
this.getLibraryList('')
}else{
this.imgList = rv.content
this.total = rv.total
this.newSearchPictureName = this.searchPictureName
this.isShowMark = false
}
}
@@ -1050,25 +1046,17 @@ export default defineComponent({
placementClick(data:any){
let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
placementModal.showPlacementModal(data,this.sex)
},
//generate
setKeyword(num: any) {
this.checkbox.forEach((v: any) => {
v.type = false;
});
nextTick().then(()=>{
this.checkbox[num].type = true
if(this.checkbox[1].type){
this.selectGenerateList.forEach((v:any)=>{
v.checked = false
})
}
})
},
setTextareaShow(){
if(this.checkbox[0].type && this.selectCode != 'Moodboard') return
this.isTextarea = !this.isTextarea
},
cliSetKeyword(value:any){
let str = ''
if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
str = ','
}
this.captionGeneration += str + value
},
ifMaximumLength(){
clearTimeout(this.inputTime)
this.inputTime = setTimeout(()=>{
@@ -1080,16 +1068,41 @@ export default defineComponent({
}
},500)
},
inputFocus(){
if(this.isInputFocus) return
this.isInputFocus = true
let setDomCli = ()=>{
this.isInputFocus = false
document.removeEventListener('click',setDomCli)
}
setTimeout(()=>{
document.addEventListener('click',setDomCli)
},200)
},
generateFileUploadChange(data:any){
let file = data.file;
let bor = true
if (file.status === "done") {
let res:any = JSON.parse(file.xhr.response);
if(res.errCode == 0){
let category:any={
value:'',
name:'',
}
file.id = res.data.id;
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = "upload";
if(this.designTypeList[this.selectCode] && this.selectCode == 'Sketchboard'){
this.designTypeList[this.selectCode].forEach((item:any) => {
if(item.name == res.data.level2Type){
category.value = item?.value
category.name = item?.name
}
});
}
file.categoryValue = category?.value;
file.category = category?.name;
}else{
bor = false
}
@@ -1115,21 +1128,6 @@ export default defineComponent({
this.selectGenerateList.splice(index, 1);
},
setSketchboardItem(item:any){
if(this.checkbox[1].type){
return
}
if(item.checked){
item.checked = false
}else{
this.selectGenerateList.forEach((v:any)=>{
if(v.checked){
v.checked = false
}
})
item.checked = true
}
},
PrintModel(){
if(!this.printModel.optype){
document.addEventListener('click',this.removePrintModel)
@@ -1154,79 +1152,36 @@ export default defineComponent({
if(this.isGenerate[selectCodeStr]){
return
}
let arr = ["Painting Style","Illustration Style","Real Style"]
let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
if(selectCodeStr == 'Moodboard'){
generateType = this.checkbox[1].name
let level2Type = ''
let collectionElementId = ''
let base64 = ''
if(this.selectGenerateList?.[0]){
level2Type = this.selectGenerateList[0].categoryValue?this.selectGenerateList[0].categoryValue:''
collectionElementId = this.selectGenerateList[0].id
if(this.selectGenerateList[0].base64){
base64 = this.selectGenerateList[0].imgUrl
}
}
let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
if(this.selectCode == "Sketchboard"){
console.log(this.selectGenerateList);
}else if(this.selectCode == "Printboard"){
level2Type = this.scene?.value
}
let arr = ["Painting Style","Illustration Style","Real Style"]
let data = {
generateType:generateType,
generateType:'text',
designType:'collection',
collectionElementId:generageImg?.id,
collectionElementId:collectionElementId,
level1Type:selectCodeStr,
level2Type:selectCodeStr == 'Sketchboard'?this.designType.value:'',
level2Type:level2Type,
userId:(this?.userInfo as any).userId,
isTestUser:this.driver__.driver?false:this.isTest,
text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
version:1,//为1就是Print
gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
base64:base64,
}
if(generateType == 'image'){
if(generageImg?.id){
data.text = arr[this.printModel.num-1]
}else{
message.info(
this.t('LibraryPage.jsContent9')
);
return
}
}else if(generateType == 'text'){
data.collectionElementId = ''
data.level2Type = ''
// this.beforeUpload(false)
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 250){
message.info(
this.t('LibraryPage.jsContent6')
);
return
}
}else{
message.info(
this.t('LibraryPage.jsContent7')
);
return
}
}else if(generateType == 'text-image'){
if(generageImg?.id){
if(this.captionGeneration){
let arr = this.captionGeneration.split(/\s+/).length
if(arr > 250){
message.info(
this.t('LibraryPage.jsContent6')
);
return
}
}else{
message.info(
this.t('LibraryPage.jsContent7')
);
return
}
}else{
message.info(
this.t('LibraryPage.jsContent9')
);
return
}
}
// this.isShowMark = true
this.isGenerate[selectCodeStr] = true
this.isTextarea = false
Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
@@ -1249,12 +1204,6 @@ export default defineComponent({
return
}
}
// rv.uniqueId.forEach((item:any) => {
// let arr:any = {}
// arr.taskId = item
// arr.status = 'execution'
// this.generateList[selectCodeStr].unshift(arr)
// });
this.setGenerate(selectCodeStr,rv.uniqueId)
}
@@ -1278,7 +1227,7 @@ export default defineComponent({
rv.forEach((element:any) => {
if(element.status === 'Success'){
element.imgUrl = element.url
this.disignTypeList.forEach((itemCategory:any) => {
this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
if(itemCategory.value == element.category){
element.categoryValue = itemCategory?.label
element.category = itemCategory?.value
@@ -1376,7 +1325,6 @@ export default defineComponent({
},
getClass(){
let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
let data = {
"classificationIdList": [],
"classificationName": "",
@@ -1449,7 +1397,8 @@ export default defineComponent({
display: flex;
padding-top: 2rem;
.library_body_left{
width: 27.5rem;
// width: 27.5rem;
width: 36.5rem;
height: 100%;
background: rgba(255,255,255,0.4);
margin-right: 5rem;
@@ -1715,132 +1664,58 @@ export default defineComponent({
}
}
.input_border{
padding-bottom: 0;
background: rgba(0, 0, 0, 0);
padding: 0;
.input_box{
background:initial;
position: relative;
padding: 1.5rem 0;
padding: 0;
// &:hover{
// .search_textarea{
// display: block
// }
// }
input{
width: 30rem;
width: 50rem;
.input_box_btnBox{
background: #fff;
align-items: center;
.search_input{
height: 3rem;
&.active{
cursor: no-drop;
}
}
.icon-xiala{
display: inline-block;
cursor: pointer;
transition: all .3s;
&.active{
transform: rotate(180deg);
}
&.forbidden{
cursor: no-drop;
}
}
.search_textarea{
z-index:3;
height: auto;
position: absolute;
left: 0;
width: 30rem;
border-radius: 4px;
height: 20rem;
top: .5rem;
border: 1px solid #dcdfe6;
&.forbidden{
cursor: no-drop;
}
}
.started_btn{
}
.generage_btn{
margin: 0 3rem;
}
}
}
.printModel{
font-size: 1.4rem;
font-weight: 500;
>div{
width: 13rem;
// display: flex;
display: block;
border-radius: 1rem;
margin: 0;
border: 2px solid;
font-size: 1.4rem;
font-weight: 500;
margin-right: 2rem;
>div{
width: 13rem;
// display: flex;
display: block;
border-radius: 1rem;
margin: 0;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 1rem;
text-align: center;
}
ul{
position: absolute;
width: 13rem;
text-align: center;
margin-top: .3rem;
border-radius: 1rem;
overflow: hidden;
z-index: 3;
li{
background: #c5c4c8;
line-height: 2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 1rem;
text-align: center;
}
ul{
position: absolute;
width: 13rem;
text-align: center;
margin-top: .3rem;
border-radius: 1rem;
overflow: hidden;
z-index: 3;
li{
background: #c5c4c8;
line-height: 2;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 1rem;
&.printModel_item:hover{
background: #949396;
}
&.printModel_item:hover{
background: #949396;
}
}
}
.upload_item{
margin-left: 4rem;
.upload_file_item{
width: 8rem;
height: 8rem;
margin: 0;
margin-right: 2rem;
.delete_file_block{
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
span{
font-size: 1.4rem;
}
}
}
.upload_component{
margin: 0;
}
}
.upload_item:hover{
.upload_file_item{
.delete_file_block{
opacity: 1;
}
}
}
}
}