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

部分页面样式调整

Browse Source
This commit is contained in:
X1627315083
2025-06-30 10:53:25 +08:00
parent 6fc2a8fc57
commit 3ce63ea3a7
60 changed files with 1326 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/component/DetailCopy/model/modelNav.vue
View File

@@ -1,13 +1,20 @@
<template>
<div class="modelNav">
<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
<div class="modelNavBox">
<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
<div class="modelNav_item item"
v-for="item,index in designDetail.clothes"
:class="{active:(selectDetail && item.id == selectDetail.id)}"
@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')"
@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
@click="selectDetailItem(item,index)">
<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
<img :src="item.path" alt="">
</div>
<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
+
</div>
</div>
<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
+
</div>
</div>
</template>
<script lang="ts">
import { defineComponent,computed,createVNode,inject,watch,onBeforeUnmount,toRefs, reactive} from 'vue'
@@ -18,6 +25,7 @@ import { Modal,message } from 'ant-design-vue';
import { useStore } from "vuex";
import { useI18n } from 'vue-i18n'
import position from './modelPosition.vue';
import { getMousePosition } from "@/tool/mdEvent"
export default defineComponent({
components:{
position,
@@ -31,15 +39,33 @@ export default defineComponent({
frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
frontBack:{} as any,
isEditPattern:inject('isEditPattern') as any,
singleOveral:inject('singleOveral') as any,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
modelNav:null as any,
})
watch(()=>detailData.frontBack_,(newFollowVue)=>{
detailData.frontBack = newFollowVue
const collItemSize = reactive({
collValue:18,
num:1,
prentHeight:0 as any,
padding:10,
likeStyle:{
},
itemStyle:{
width:0,
height:0,
},
collTime:null as any,
isMove:false,
elList:[] as any,
selectIndex:0,
})
watch(()=>detailData.designDetail.clothes.length,(newVal)=>{
nextTick(()=>{
setItemPosition()
})
},{immediate:true})
const selectDetailItem = (item:any,index:number)=>{
new Promise((resolve, reject) => {
if(detailData.isEditPattern.value &&
@@ -80,14 +106,147 @@ export default defineComponent({
store.commit('DesignDetailCopy/addDesignColthes')
emit('addSketch')
}
const designMousedown = (e:any,uniqueId:number,str:string)=>{
let item:any = collItemSize.elList.filter((item:any)=>item.uniqueId == uniqueId)[0]
if(!item)return
item.el.style.zIndex = 2;
item.el.style.transition = 'all 0s';
let startX = e.clientX,
startY = e.clientY,
top = item.el.offsetTop;
collItemSize.isMove = false
let moveFun = (e:any) => {
collItemSize.isMove = true
let X = 0;
let Y = e.clientY - startY + top;
item.el.style.left = `${X}px`;
item.el.style.top = `${Y}px`;
reRange(item, X, Y,str);
};
let mouseUpFun = ()=>{
document.removeEventListener('mousemove',mouseMove)
document.removeEventListener('touchmove',touchmove)
document.removeEventListener('mouseup',mouseUpFun)
document.removeEventListener('touchend',mouseUpFun)
item.el.style.zIndex = 1;
item.el.style.transition = 'top .5s';
moveItem();
sortDesignCollection()
}
let mouseMove = function(event:any){
let e = getMousePosition(event,false)
moveFun(e)
}
let touchmove = function(event:any){
let e = getMousePosition(event,true)
moveFun(e)
}
document.addEventListener('mousemove',mouseMove)
document.addEventListener('touchmove',touchmove)
document.addEventListener('mouseup',mouseUpFun)
document.addEventListener('touchend',mouseUpFun)
}
//排序 从大到小
const sortDesignCollection = ()=> {
}
const reRange = (item:any, x:number, y:number,str:string)=>{
let elList:any = collItemSize.elList
let index = collItemSize.selectIndex
let width,height,num
num = collItemSize.num
width = collItemSize.itemStyle.width
height = collItemSize.itemStyle.height
let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
moveIndex = elList.length - 1 - moveIndex
moveIndex = moveIndex < 0 ? 0 : moveIndex;
moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
if(moveIndex != index){
collItemSize.selectIndex = moveIndex;
let currentSort = item.sort;
for(let i = 0;i < elList.length;i++){
if(currentSort < moveIndex){
if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
elList[i].sort -= 1;
};
}else if(currentSort > moveIndex){
if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
elList[i].sort += 1;
};
}
};
elList[item.index].sort = moveIndex;
moveItem();
}
}
const moveItem = ()=>{
let value = collItemSize.num
for(let i = 0;i < collItemSize.elList.length;i++){
let height = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +collItemSize.padding) + 'px';
collItemSize.elList[i].el.style.top = height
}
setZIndex()
}
const setZIndex = ()=>{
collItemSize.elList.forEach((elItem:any)=>{
let clothesIndex = detailData.designDetail.clothes.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
let clothesId = detailData.designDetail.clothes[clothesIndex].id
detailData.designDetail.clothes[clothesIndex].priority = elItem.sort
let frontIndex = detailData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
detailData.frontBack_.front[frontIndex].style.zIndex = elItem.sort + 10
// detailData.frontBack_.back[frontIndex].style.zIndex = elItem.sort + 1
})
}
const setItemPosition = ()=>{
let parent = detailData.modelNav.offsetWidth
let elArr = detailData.modelNav.querySelectorAll('.item')
let value = collItemSize.num
const htmlFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
const remValue = 12 * htmlFontSize;
//子元素宽度 = (父容器总宽度 - (列数-1)*间隙) / 列数
collItemSize.itemStyle.height = remValue
collItemSize.elList = []
let arr:any = detailData.designDetail.clothes
arr.forEach((item,index) => {item.uniqueId = `${Date.now()}_${index}`});
const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
const sortMap = {} as any;
sortedArray.forEach((item, index) => {
sortMap[item.priority] = index ; // 1, 2, 3, 4...
});
for(let i = 0;i < elArr.length;i++){
collItemSize.elList.push({
el: elArr[i],
// sort: elArr.length - i -1,
sort: sortMap[arr[i].priority],
index: i,
uniqueId:arr[i]?.uniqueId || 99999,
});
}
collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
onMounted(()=>{
})
// onBeforeUnmount(()=>{
// detailData.selectIndex = -1
// })
return{
...toRefs(detailData),
...toRefs(collItemSize),
selectDetailItem,
deleteDetailItem,
designMousedown,
addSketch,
getMousePosition,
}
},
@@ -99,8 +258,8 @@ export default defineComponent({
})
</script>
<style lang="less" scoped>
.modelNav{
> .modelNav_item{
.modelNavBox{
.modelNav_item{
width: 12rem;
height: 12rem;
padding: 1rem;
@@ -108,7 +267,9 @@ export default defineComponent({
border: 2px solid #B4B4B4;
margin-bottom: 1.5rem;
cursor: pointer;
position: relative;
position: absolute;
background: #fff;
transition: top .3s;
&:hover{
> i{
display: block;
@@ -137,8 +298,14 @@ export default defineComponent({
font-size: 8rem;
display: flex;
align-items: center;
position: absolute;
justify-content: center;
}
}
}
.modelNav{
position: relative;
width: 12rem;
}
</style>