This commit is contained in:
2023-10-13 17:06:44 +08:00
parent 76315492ad
commit 19a3574fbb
15 changed files with 184 additions and 140 deletions

View File

@@ -131,15 +131,15 @@
User
</div>
</div>
<div class="model_img" v-show="systemSeleves">
<div v-mousewheel>
<div class="model_img" v-show="systemSeleves" v-mousewheel>
<div class="model_img_item">
<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')">
</div>
</div>
</div>
<div class="model_img" v-show="!systemSeleves">
<div v-mousewheel>
<div class="model_img" v-show="!systemSeleves" v-mousewheel>
<div class="model_img_item">
<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')">
</div>
@@ -286,33 +286,14 @@ export default defineComponent({
},
mousewheel:{
mounted (el) {
let parent = el.parentNode
// el.style.width='100%'
// el.style.height='100%'
let num = 0
let width = el.offsetWidth
let parentWidth = parent.offsetWidth
el.addEventListener('mouseover',()=>{
width = el.offsetWidth
parentWidth = parent.offsetWidth
})
el.addEventListener('mousewheel',(e:MouseEvent)=>{
if(0>(e as WheelEvent).deltaY && width>parentWidth){
num+=15
if(num >= 0){
num = 0
}
}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
num-=15
if(num<=parentWidth - width){
num = parentWidth - width
}
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.style.marginLeft = num+'px'
el.scrollBy(num, 0);
})
}
}
@@ -867,6 +848,34 @@ export default defineComponent({
display: flex;
flex: 1;
align-items: center;
overflow-x: auto;
&.model_img::-webkit-scrollbar {
/* 竖轴的宽度 */
width: 1rem;
/* 横轴的高度 */
height: 1rem;
transition: all .3s;
}
/* 进度 */
&.model_img::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: rgba(238, 238, 244, 0);
}
/* 轨道 */
&.model_img::-webkit-scrollbar-track {
border-radius: 1rem;
background: rgba(238, 238, 244, 0);
}
&.model_img:hover {
// overflow-x: scroll;
&.model_img::-webkit-scrollbar-thumb {
background: #543087;
}
/* 轨道 */
&.model_img::-webkit-scrollbar-track {
background: rgba(84, 48, 135,.2);
}
}
>div{
display: flex;