commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user