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

@@ -66,8 +66,8 @@
</div>
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item" v-mousewheel>
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:designCollectionList.length != 0}">
<div class="right_content_img_item">
<!-- <draggable
group="people" > -->
<div class="content_img_block" v-for="(
@@ -106,8 +106,8 @@
</div>
<div class="right_content_body">
<div class="right_content_img_block scroll_style">
<div class="right_content_img_item" v-mousewheel id="right_content_img_block">
<div class="right_content_img_block scroll_style" v-mousewheel :class="{active:likeDesignCollectionList.length != 0}">
<div class="right_content_img_item" id="right_content_img_block">
<!-- <div class="content_img_block" v-for="(
design, index
) in likeDesignCollectionList" :key="design?.id" @click="
@@ -301,32 +301,39 @@ export default defineComponent({
directives:{
mousewheel:{
mounted (el) {
let parent = el.parentNode
// el.style.width='100%'
// el.style.height='100%'
// console.log(el);
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+=25
if(num >= 0){
num = 0
}
}else if(0<(e as WheelEvent).deltaY && width>parentWidth){
num-=25
if(num<=parentWidth - width){
num = parentWidth - width
}
// let parent = el.parentNode
// 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+=25
// if(num >= 0){
// num = 0
// }
// }else if(0<(e as WheelEvent).deltaY && width>parentWidth){
// num-=25
// if(num<=parentWidth - width){
// num = parentWidth - width
// }
}
// }
el.style.marginLeft = num+'px'
// el.style.marginLeft = num+'px'
// })
el.addEventListener('wheel',(e:WheelEvent)=>{
let num = 0
if(e.deltaY > 0){
num = 25
}else{
num = -25
}
el.scrollBy(num, 0);
})
}
}
@@ -1132,14 +1139,46 @@ export default defineComponent({
height: calc(50% - 5.5rem);
.right_content_img_block {
overflow-y: auto;
// overflow-y: auto;
background: #f6f6fa;
border-radius: 1rem;
height: 100%;
display: flex;
width: auto;
overflow: hidden;
// overflow: hidden;
align-items: center;
padding-bottom: 1rem;
overflow-x: auto;
&.active::-webkit-scrollbar-button:single-button{
display: none;
}
&.active::-webkit-scrollbar {
/* 竖轴的宽度 */
width: 1rem;
/* 横轴的高度 */
height: 1rem;
transition: all .3s;
}
/* 进度 */
&.active::-webkit-scrollbar-thumb {
border-radius: 1rem;
background: rgba(238, 238, 244, 0);
}
/* 轨道 */
&.active::-webkit-scrollbar-track {
border-radius: 1rem;
background: rgba(238, 238, 244, 0);
}
&.active:hover {
// overflow-x: scroll;
&.active::-webkit-scrollbar-thumb {
background: #543087;
}
/* 轨道 */
&.active::-webkit-scrollbar-track {
background: rgba(84, 48, 135,.2);
}
}
>div{
display: flex;
padding: 0 2.8rem 0 0.9rem;
@@ -1156,6 +1195,7 @@ export default defineComponent({
position: relative;
vertical-align: top;
flex-shrink: 0;
max-height: 100%;
&:hover .icon_like {
display: block;
}

View File

@@ -688,7 +688,12 @@ export default defineComponent({
// background: #FFFFFF;
color: #1A1A1A !important;
.ant-select{
.ant-select-arrow{
.icon-xiala{
margin-left: -2rem;
zoom: .7;
}
}
}
.icon-xiala{
color: #1A1A1A !important;