gter.net/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
A1300399510 2023-07-25 15:13:29 +08:00
parent 761793fe06
commit bc26ec8465
1 changed files with 65 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/views/apartmentDetail.vue
View File

@ -83,7 +83,7 @@
<div class="details-left flex1">
<!-- 房间类型 -->
<div class="type-box" v-if="roomList.length != 0" ref="roomEle">
<div class="type-item flexacenter" v-for="item in roomList">
<div class="type-item flexacenter" v-for="(item, index) in roomList">
<img class="type-icon" v-if="item['status'] == 1"
src="@/assets/img/apartmentDetail/apartment-have.svg" />
<img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
@ -93,11 +93,18 @@
<div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
<div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
</div>
<div class="media-box flexflex">
<div class="media-btn left flexcenter">
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
<!-- <view class="room-type-media" wx:if="{{ item.videos.length != 0 || item.images.length != 0 }}"> -->
<!-- {{ mediaBtnstate[index] != 1 }} -->
<div class="media-box flexflex" v-if="item.videos.length != 0 || item.images.length != 0">
<div class="media-btn flexcenter" @click="handleMediaBtn('left', index)"
v-if="item.videos.length + item.images.length > 5">
<img v-show="mediaBtnstate[index] != 1" class="left arrow"
src="@/assets/img/publicImage/black-arrow.svg" alt="">
<img v-show="mediaBtnstate[index] == 1" class="arrow"
src="@/assets/img/publicImage/gray-arrow.svg" alt="">
</div>
<div class="media-list flexacenter">
<div class="media-list flexacenter" :class="`element${index}`">
<div class="media-item flexcenter" v-for="it in item['videos']">
<img class="media-img" :src="it['thumbnail']">
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
@ -106,7 +113,8 @@
<img class="media-img" :src="it['thumbnail']">
</div>
</div>
<div class="media-btn flexcenter">
<div class="media-btn flexcenter" @click="handleMediaBtn('right', index)"
v-if="item.videos.length + item.images.length > 5">
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" alt="">
</div>
</div>
@ -458,12 +466,6 @@ const handleClickNav = (value) => {
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
// roomEle.value.scrollIntoView({ top: 100, behavior: 'smooth' });
// const scrollTop = elementObj[value].offsetTop - 110;
// window.scrollTo({ top: scrollTop, behavior: 'smooth' });
}
@ -508,6 +510,32 @@ const contactReservationService = () => {
}
let mediaBtnstate = ref({}) // 0 左边为不能点击 1 右边不能点击 2 是两个都能点击
const handleMediaBtn = (type, index) => {
const element = document.querySelector(`.element${index}`);
if (element) {
let left
if (type == 'left') left = element.scrollLeft - 50
else left = element.scrollLeft + 50
const scrollOptions = {
left,
behavior: 'smooth'
};
element.scrollTo(scrollOptions);
nextTick(() => {
console.log(element.scrollLeft + 460, element.scrollWidth);
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
else mediaBtnstate.value[index] = 2
})
}
}
</script>
<style lang="less" scoped>
@ -860,11 +888,29 @@ const contactReservationService = () => {
}
.media-box {
max-width: 460px;
// overflow: auto;
.media-list {
max-width: 460px;
overflow: auto;
scrollbar-width: none;
/* 隐藏滚动条 */
&::-webkit-scrollbar {
width: 0;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: transparent;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar {
display: none;
/* 隐藏 Chrome 浏览器的滚动条 */
}
}
.media-item {
@ -893,11 +939,13 @@ const contactReservationService = () => {
height: 80px;
width: 30px;
cursor: pointer;
&.left {
.rotate180{
transform: rotate(180deg);
}
.arrow {
width: 10px;
height: 17px;