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

commit

Browse Source
This commit is contained in:
WangXiaoDong
2023-08-23 17:50:09 +08:00
parent d41b331e38
commit 2fda4a8c36
20 changed files with 2587 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/component/HomePage/ColorboardUpload.vue
View File

@@ -410,7 +410,6 @@ export default defineComponent({
return data
})
this.store.commit('setColorboardList',newColorList)
},
recollection(){

20
src/component/HomePage/Generate.vue
View File

@@ -290,8 +290,6 @@ export default defineComponent({
// this.store.commit("addGenerateFils", this.fileList);
this.token = getCookie("token") || "";
this.uploadUrl = getUploadUrl();
console.log(getUploadUrl());
},
computed: {
getSketchLabel(value: any) {
@@ -334,14 +332,14 @@ export default defineComponent({
nextTick().then(()=>{
this.checkbox[num].type = true
this.$emit('generateCheckbox',this.checkbox[0].type)
this.checkboxImage = this.checkbox[1].type
if(this.checkboxImage){
this.sketchboardList.forEach((v:any)=>{
v.checked = false
})
}
})
this.$emit('generateCheckbox',this.checkbox[0].type)
this.checkboxImage = this.checkbox[1].type
if(this.checkboxImage){
this.sketchboardList.forEach((v:any)=>{
v.checked = false
})
}
},
getLibraryList() {
// let data = {
@@ -363,8 +361,6 @@ export default defineComponent({
// });
},
fileUploadChange(data: any) {
console.log(data);
let file = data.file;
if (file.status === "done") {
let res = JSON.parse(file.xhr.response);
@@ -458,7 +454,7 @@ export default defineComponent({
this.selectImgListIds = [];
this.imgList = [];
this.currentPage = 1;
this.pageSize = 10;
// this.pageSize = 10;
this.total = 0;
},
},

103
src/component/HomePage/Material.vue
View File

@@ -11,7 +11,7 @@
<div class="my_material_header_right">
<div class="content_search_block">
<input class="search_input" placeholder="Please input" v-model="searchPictureName" @keydown.enter="getLibraryList()">
<div class="search_icon_block" @click="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
<div class="search_icon_block" @click.stop="getLibraryList()"><span class="icon iconfont icon-sousuo"></span></div>
</div>
</div>
</div>
@@ -44,10 +44,58 @@
</div>
</div> -->
<div class="material_content_body scroll_style">
<div class="content_img_item" v-for="(img) in imgList" :key="img.id" @click="selectImgItem(img)">
<div class="content_img_item_block" :class="{active:img?.checked}">
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="img.url" :key="img.url" :alt="img.name"/>
<div class="content_img_item" v-for="(file) in imgList" :key="file.id" :class="{active:type_.type2 !== 'Moodboard'}">
<div class="content_img_item_block" :class="{active:file?.checked}">
<img :class="[selectCode == 'Moodboard' || selectCode == 'Printboard' ? 'print_content_img' : 'content_img']" v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
<div class="operate_file_block" v-if="type_.type2 == 'Sketchboard'">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(file)"
>
{{ getSketchLabel(file.category) }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
file.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="file.categoryShow"
>
<div
:class="[
'category_item',
file.category == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in disignTypeList"
:key="index"
@click.stop="
selectFileCategory(
file,
cate
)
"
>
{{ cate.label }}
</div>
</div>
</div>
</div>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
</div>
<!-- <div class="content_img_name">{{img.name}}</div> -->
</div>
@@ -134,6 +182,21 @@ export default defineComponent({
}
}
},
computed: {
getSketchLabel(value:any) {
return (value: any) => {
let lable = "";
for (let item of this.disignTypeList) {
if (item.value === value) {
lable = item.label;
break;
}
}
return lable;
};
},
},
methods:{
init(code:any){
@@ -187,6 +250,10 @@ export default defineComponent({
let aa:any = []
this.imgList = rv.content
rv.content.forEach((item:any) => {
if(this.type_.type2 == 'Sketchboard'){
item.category = "Outwear";
item.categoryShow = false;
}
if(!item.id_){
item.id_ = GO.id++
aa.push(item)
@@ -212,7 +279,23 @@ export default defineComponent({
this.currentPage = 1
this.pageSize = 10
this.total = 0
}
},
showFileCategory(file: any) {
file.categoryShow = true;
document.addEventListener("click", this.hiddenFileCategory);
},
selectFileCategory(file: any, cate: any) {
file.category = cate.value;
for (let item of (this.imgList as any)) {
item.categoryShow = false;
}
},
hiddenFileCategory() {
for (let item of (this.imgList as any)) {
item.categoryShow = false;
}
document.removeEventListener("click", this.hiddenFileCategory);
},
}
})
</script>
@@ -383,6 +466,16 @@ export default defineComponent({
// margin-bottom: 2.8rem;
margin: 0 2rem 2rem 0;
padding: 0;
&.active{
height: 10rem;
margin: 0 2rem 4rem 0;
.pin_block{
display: block;
}
}
.pin_block{
display: none;
}
.content_img_item_block{
// border: 0.1rem solid transparent;
width: 10rem;

40
src/component/HomePage/MoodboardUpload.vue
View File

@@ -161,6 +161,7 @@ export default defineComponent({
let moodb_className:any = ref([]);
let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
let layoutList:any = []//选中后随机生成的list
let layoutOpen = ref(false)
return {
fileList,
lessenList,
@@ -170,6 +171,7 @@ export default defineComponent({
moodb_className,
flex_direction,
layoutList,
layoutOpen
};
},
data() {
@@ -225,7 +227,10 @@ export default defineComponent({
let res = JSON.parse(file.xhr.response);
file.imgUrl = res.data.url;
file.resData = res.data;
file.type_ = 'upload';
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.id_ = GO.id++
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
@@ -298,33 +303,51 @@ export default defineComponent({
}
})
console.log(this.fileList);
this.fileList.splice(moodboard,1)
console.log(this.fileList);
this.store.commit("setMoodboardFile", this.fileList);
}
this.store.commit("clearMoodTemplateId");
},
recollection() {
this.fileList = JSON.parse(
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.moodboardFiles
)
);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setMoodboardGenerateFiles", setboard.generate);
this.store.commit("setMoodboardMaterialFiles", setboard.material);
this.store.commit("setMoodboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
let moodTemplateId =
this.store.state.UploadFilesModule.allBoardData.moodTemplateId;
this.store.commit("setMoodboardFile", this.fileList);
this.store.commit("setMoodTemplateId", moodTemplateId);
},
changeTemplateModal() {
let layout:any = this.$refs.layout
if(this.layoutOpen){
let layout:any = this.$refs.layout
// layout.init('moodboard')
layout.init()
}else{
message.error('Please click Layout to sort randomlys')
}
},
layout(){
let arr = this.store.state.UploadFilesModule.moodboard
@@ -337,6 +360,7 @@ export default defineComponent({
this.flex_direction = false
}
this.moodb_className = this.moodb_[arr.length-1][random]
this.layoutOpen = true
},
setmoodbClass(val:any){
this.moodb_className = val

8
src/component/HomePage/NewCollectionReview.vue
View File

@@ -28,7 +28,7 @@
<div class="img_block_item">
<div class="color_item" v-for="(color) in allBoardData.colorBoards" :key="color">
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b})`}"></div>
<div class="color_content" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
<div class="color_content_body">
<div class="color_des">{{color.tcx}}</div>
<div class="color_des">{{color.name}}</div>
@@ -37,7 +37,7 @@
</div>
<div class="img_block_item">
<div class="lager_img_item" v-for="(skecth) in allBoardData.skecthboardFiles" :key="skecth">
<div class="lager_img_item" v-for="(skecth) in allBoardData.sketchboardFiles" :key="skecth">
<div class="all_img_item_block">
<img class="all_img_content" :src="skecth.imgUrl">
</div>
@@ -66,7 +66,9 @@ export default defineComponent({
return {
allBoardData,
}
}
},
mounted () {
}
})
</script>
<style lang="less" scoped>

73
src/component/HomePage/PrintboardUpload.vue
View File

@@ -37,9 +37,13 @@
<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="selectImg(file)" v-show="file?.status === 'done'">
<div class="upload_file_item_content" v-show="file?.status === 'done'">
<img v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
<div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
<div class="delete_file_block" @click.stop="deleteFile(file)">
<span
class="icon iconfont icon-shanchu"
></span>
</div>
</div>
</div>
<div class="pin_block" v-show="file?.status === 'done'">
@@ -86,7 +90,7 @@
<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
<img v-lazy="item.imgUrl">
<div class="checked" >
<i class="fi fi-rr-trash"></i>
@@ -97,16 +101,19 @@
<div v-show="openClick == 3" class="modal_accomplish">
<div class="input_box">
<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
<div class="generage_btn started_btn" @click.stop="getgenerate">Generate</div>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
<img :src="item.imgUrl">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" >
<img :src="item.imgUrl" @click.stop="generageAdd(item)">
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div>
</div>
</div>
</div>
</div>
<!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
</div>
</template>
<script lang="ts">
@@ -120,6 +127,8 @@ import { message,Upload} from 'ant-design-vue';
import Cropper from '@/component/HomePage/Cropper.vue'
import Material from '@/component/HomePage/Material.vue'
import Generate from "@/component/HomePage/Generate.vue";
import GO from "@/tool/GO";
export default defineComponent({
components:{
Cropper,
@@ -214,6 +223,12 @@ export default defineComponent({
},
fileUploadChange(data:any){
let file = data.file
file.id_ = GO.id++
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
file.pin = false;
let Cropper:any = this.$refs.Cropper
if(this.currentFileNum === 1){
var reader = new FileReader();
@@ -487,10 +502,29 @@ export default defineComponent({
},
recollection(){
this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setPrintboardGenerateFiles", setboard.generate);
this.store.commit("setPrintboardMaterialFiles", setboard.material);
this.store.commit("setPrintboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
// this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
this.store.commit('setPrintboardFile',this.fileList)
this.store.commit('setGeneratePrintFile',this.printImgList)
// this.store.commit('setGeneratePrintFile',this.printImgList)
},
confirmSelect(event:any){
@@ -655,7 +689,7 @@ export default defineComponent({
}
.upload_file_item{
margin: 0 2rem 4rem 0;
margin: 0 2rem 5rem 0;
// margin: 0 2rem 2rem 0;
display: inline-block;
width: 10rem;
@@ -668,10 +702,7 @@ export default defineComponent({
height: 100%;
}
.pin_block{
text-align: center;
margin-top:1.6rem;
}
&.upload_component{
border: none;
@@ -816,6 +847,8 @@ export default defineComponent({
.modal_right{
flex: 1;
margin-left: 3rem;
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
@@ -869,14 +902,18 @@ export default defineComponent({
height: 30rem;
display: flex;
flex-direction: column;
flex: 1;
overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
}
.input_box{
input{
&.forbidden{
cursor:not-allowed;
&.forbidden{
}
}
}
@@ -886,7 +923,7 @@ export default defineComponent({
flex-wrap: wrap;
justify-content: flex-start;
.modal_imgItem{
margin: 0 2rem 2rem 0;
margin: 0 2rem 5rem 0;
display: inline-block;
width: 10rem;
height: 10rem;

192
src/component/HomePage/SketchboardUpload.vue
View File

@@ -173,8 +173,56 @@
<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
</div>
<div class="modal_img">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
<img :src="item.imgUrl">
<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }">
<img :src="item.imgUrl" @click="generageAdd(item)">
<div class="operate_file_block">
<div class="select_img_type">
<div
class="select_category"
@click.stop="showFileCategory(item)"
>
{{ getSketchLabel(item.category) }}
<div
:class="[
'icon',
'iconfont',
'icon-xiala',
item.categoryShow
? 'icon_rotate'
: '',
]"
></div>
</div>
<div
class="category_list"
v-show="item.categoryShow"
>
<div
:class="[
'category_item',
item.category == cate.value
? 'select_category_item'
: '',
]"
v-for="(
cate, index
) in sketchCatecoryList"
:key="index"
@click.stop="
selectFileCategory(
item,
cate
)
"
>
{{ cate.label }}
</div>
</div>
</div>
</div>
<div class="pin_block">
<a-checkbox v-model:checked="item.pin">PIN</a-checkbox>
</div>
</div>
</div>
</div>
@@ -314,7 +362,10 @@ export default defineComponent({
file.category = "Outwear";
file.categoryShow = false;
file.id_ = GO.id++
file.type_ = 'upload';
file.type_ = {
type1:'upload',
type2:'Moodboard'
};
let fileList = this.fileList.filter(
(v: any) => v.status === "done"
);
@@ -355,13 +406,32 @@ export default defineComponent({
},
selectFileCategory(file: any, cate: any) {
file.category = cate.value;
this.store.commit("setSketchboardFile", this.fileList);
if(this.openClick == 3){
for (let item of this.generateList) {
item.categoryShow = false;
}
file.category = cate.value;
// this.store.commit("sketchGenerateFiles", this.fileList);
}else{
for (let item of this.fileList) {
item.categoryShow = false;
}
file.category = cate.value;
this.store.commit("setSketchboardFile", this.fileList);
}
},
hiddenFileCategory() {
for (let item of this.fileList) {
item.categoryShow = false;
}
if(this.openClick == 3){
for (let item of this.generateList) {
item.categoryShow = false;
}
}else{
for (let item of this.fileList) {
item.categoryShow = false;
}
}
document.removeEventListener("click", this.hiddenFileCategory);
},
@@ -383,13 +453,30 @@ export default defineComponent({
},
recollection() {
this.fileList = JSON.parse(
let arr = JSON.parse(
JSON.stringify(
this.store.state.UploadFilesModule.allBoardData
.skecthboardFiles
.sketchboardFiles
)
);
this.store.commit("setSketchboardFile", this.fileList);
let setboard = {
generate:[] as any,
material:[] as any,
moodboard:[] as any,
}
arr.forEach((v:any)=>{
if(v.type_.type1 == 'generate'){
setboard.generate.push(v)
}else if(v.type_.type1 == 'material'){
setboard.material.push(v)
}else{
setboard.moodboard.push(v)
}
})
this.store.commit("setSketchboardGenerateFiles", setboard.generate);
this.store.commit("setSketchboardMaterialFiles", setboard.material);
this.store.commit("setSketchboardFile", setboard.moodboard);
this.fileList = setboard.moodboard
},
confirmSelect(event: any) {
for (let item of event) {
@@ -623,77 +710,9 @@ export default defineComponent({
display: block;
}
.operate_file_block{
width: 100%;
height: 3rem;
font-size: 1.6rem;
color: #FFFFFF;
position: absolute;
left: 0;
bottom: 0;
.select_img_type{
height: 100%;
line-height: 3rem;
text-align: center;
background: rgba(0,0,0,0.6);
position: relative;
.select_category{
display: flex;
align-items: center;
justify-content: center;
.icon-xiala{
margin-left: 0.8rem;
}
}
.icon_rotate{
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
transform: rotate(180deg);
animation-direction: 0.5s;
}
.category_list{
position: absolute;
width: 100%;
cursor: pointer;
position: absolute;
// top: 3.1rem;
margin-top: .2rem;
left: 0;
background: rgba(0,0,0,0.4);
border: 1px solid #343579;
border-radius: 0.8rem;
// overflow: hidden;
z-index: 2;
height: 9rem;
overflow-x: hidden;
&.category_list::-webkit-scrollbar{display: none;}
.category_item{
text-align: left;
font-size: 1.4rem;
padding: 1rem 1.9rem;
line-height: 1.6rem;
&.select_category_item{
background: linear-gradient(160deg, #AC2A3B, #292161);
}
&:hover{
background: linear-gradient(160deg, #AC2A3B, #292161);
}
}
}
}
}
}
.pin_block{
}
}
}
@@ -702,6 +721,8 @@ export default defineComponent({
.modal_right{
flex: 1;
margin-left: 3rem;
display: flex;
flex-direction: column;
.modal_layout,.modal_accomplish{
.modal_text{
font-size: 1.2rem;
@@ -755,11 +776,17 @@ export default defineComponent({
height: 30rem;
display: flex;
flex-direction: column;
flex: 1;
overflow-x: hidden;
&.modal_accomplish::-webkit-scrollbar {
display: none;
}
.modal_text{
padding-top: 2rem;
padding-block: 2rem;
}
.input_box{
z-index: 1;
input{
&.forbidden{
cursor:not-allowed;
@@ -772,7 +799,7 @@ export default defineComponent({
flex-wrap: wrap;
justify-content: flex-start;
.modal_imgItem{
margin: 0 2rem 2rem 0;
margin: 0 2rem 4rem 0;
display: inline-block;
width: 10rem;
height: 10rem;
@@ -792,6 +819,7 @@ export default defineComponent({
transform: scale(0.9);
}
}
}
}
}

14
src/component/HomePage/collectionModal.vue
View File

@@ -14,7 +14,7 @@
<div v-show="collectionStep === 2">Printboard</div>
<div v-show="collectionStep === 3">Colorboard</div>
<div v-show="collectionStep === 4">Sketchboard</div>
<div v-show="collectionStep === 5">Markets Sketch</div>
<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
<div class="collection_title_text_intro">select moodboard for your collection</div>
</div>
<div>
@@ -32,8 +32,9 @@
<!-- <div v-if="collectionStep < 5" class="next_step_button" @click.stop="nextStep()">Next Step</div> -->
<!-- <div v-else class="next_step_button" @click.stop="finishCollection()">Finish</div> -->
<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
<i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i>
<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right" @click.stop="nextStep()"></i>
<!-- <i v-else class="fi fi-rr-arrow-small-right" @click.stop="finishCollection()"></i> -->
<i v-else class="fi fi-rr-check" @click.stop="finishCollection()"></i>
<!-- <span class="icon iconfont icon-fanhui header_icon_fanhui" @click="lastStep()"></span> -->
</div>
@@ -42,7 +43,7 @@
<PrintboardUpload ref="PrintboardUpload" v-show="collectionStep === 2"></PrintboardUpload>
<ColorboardUpload ref="ColorboardUpload" v-show="collectionStep === 3"></ColorboardUpload>
<SketchboardUpload ref="SketchboardUpload" v-show="collectionStep === 4"></SketchboardUpload>
<MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload>
<!-- <MarketingSketchUpload ref="MarketingSketchUpload" v-show="collectionStep === 5"></MarketingSketchUpload> -->
</div>
</a-modal>
</div>
@@ -90,7 +91,8 @@ export default defineComponent({
recollection(){
setTimeout(()=>{
let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload']
// let childredCom = ['MoodboardUpload','PrintboardUpload','ColorboardUpload','SketchboardUpload','MarketingSketchUpload']
for(let child of childredCom){
let childRef:any = this.$refs[child]
childRef.recollection()
@@ -254,7 +256,7 @@ export default defineComponent({
.ant-modal-body{
padding: 8rem 5rem !important;
// height: calc(65vh - 6.4rem);
height: 60rem;
height: 65rem;
}
}
}

18
src/component/HomePage/layout.vue
View File

@@ -20,12 +20,12 @@
></div>
</div>
<div class="layout_nav">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item,index)">
<img :src="item.imgUrl">
</div>
</div>
<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item,index)" ref="content" >
<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false">
<ul v-show="item.setPitch" class="layout_btn" >
<li class="layout_btn_top" v-compile.stop="'top'"></li>
@@ -109,7 +109,7 @@ export default defineComponent({
openClick,
drag,
layoutList,
content
content,
};
},
data() {
@@ -491,11 +491,15 @@ export default defineComponent({
this.moodbList = this.moodb[layoutList.length-1]
this.moodbClassName = this.moodb_className
},
setpitch(item:any){
setpitch(item:any,index:any){
this.layoutList.forEach((v:any)=>{
v.setPitch = false
})
item.setPitch = true
if(this.content){
(this.content as any)[index].style.zIndex = GO.zIndex++
}
},
setmoodb(item:any){
this.moodbClassName = item
@@ -593,7 +597,6 @@ export default defineComponent({
v.setPitch = false
})
let layoutCentent = document.getElementById('layoutCentent')
console.log(layoutCentent);
setTimeout(() => {
console.log(domTurnImg(layoutCentent));
this.layout = false
@@ -752,6 +755,11 @@ export default defineComponent({
cursor: crosshair;
cursor: move;
}
.layout_angle_tr,.layout_angle_tl,.layout_angle_br,.layout_angle_bl{
// opacity: 0;
width: .8rem;
height: .8rem;
}
.layout_angle_tr{
right: 0%;
top: 0;