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 18:28:49 +08:00
parent a733aa68ae
commit fff3c786a8
2 changed files with 92 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/App.vue
View File

@ -114,4 +114,27 @@ input[type="number"] {
font-style: normal;
font-display: swap;
}
.no-scrollbar {
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 浏览器的滚动条 */
}
}
</style>

103
src/views/apartmentDetail.vue
View File

@ -21,15 +21,16 @@
<div class="indicate">1/3</div>
</div>
<div class="slideshow-across flexflex">
<div class="slideshow-btn left flexcenter">
<div class="slideshow-btn left flexcenter" @click="handleslideshow('left')">
<img class="arrow" src="@/assets/img/publicImage/gray-arrow.svg" />
</div>
<div class="box flex1">
<!-- <div class="item" v-for=" item in info['attachment']"> -->
<!-- <img :src="item" /> -->
<!-- </div> -->
<div class="slideshow-list box no-scrollbar flex1 flexacenter">
<div class="item" :class="{ 'pitch': index == 0 }"
v-for="(item, index) in info['thumbnailList']">
<img class="img" :src="item" />
</div>
</div>
<div class="slideshow-btn flexcenter">
<div class="slideshow-btn flexcenter" @click="handleslideshow('right')">
<img class="arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
@ -98,12 +99,12 @@
<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] != 0" class="rotate180 arrow"
<img v-if="mediaBtnstate[index] && mediaBtnstate[index] != 0" class="rotate180 arrow"
src="@/assets/img/publicImage/black-arrow.svg" alt="">
<img v-show="mediaBtnstate[index] == 0" class="arrow"
<img v-else="mediaBtnstate[index] == 0" class="arrow"
src="@/assets/img/publicImage/gray-arrow.svg" alt="">
</div>
<div class="media-list flexacenter" :class="`element${index}`">
<div class="media-list flexacenter no-scrollbar" :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" />
@ -152,8 +153,8 @@
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
{{ info.location || '位置' }}
</div>
<view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
:name="info['address']"></view-map>
<!-- <view-map :latlng="{ longitude: info['coordinate'][0], latitude: info['coordinate'][1] }"
:name="info['address']"></view-map> -->
<!-- 交通 -->
<div class="traffic-box" v-if="info['traffic']">
@ -515,8 +516,8 @@ 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
if (type == 'left') left = element.scrollLeft - 86
else left = element.scrollLeft + 86
const scrollOptions = {
left,
behavior: 'smooth'
@ -524,14 +525,35 @@ const handleMediaBtn = (type, index) => {
element.scrollTo(scrollOptions);
nextTick(() => {
setTimeout(() => {
if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
else mediaBtnstate.value[index] = 2
}, 150);
})
}
}
// 顶部轮播图的左右按钮
const handleslideshow = (type) => {
const element = document.querySelector(`.slideshow-list`);
if (element) {
let left
if (type == 'left') left = element.scrollLeft - 100
else left = element.scrollLeft + 100
const scrollOptions = {
left,
behavior: 'smooth'
};
element.scrollTo(scrollOptions);
nextTick(() => {
setTimeout(() => {
// if (element.scrollLeft == 0) mediaBtnstate.value[index] = 0
// else if (element.scrollLeft + 460 == element.scrollWidth) mediaBtnstate.value[index] = 1
// else mediaBtnstate.value[index] = 2
}, 150);
})
}
}
@ -668,7 +690,39 @@ const handleMediaBtn = (type, index) => {
}
.box {
background-color: #50e3c2;
width: 360px;
overflow: auto;
.item {
height: 60px;
margin-right: 6px;
position: relative;
cursor: pointer;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.501960784313725);
}
&.pitch {
&::after {
height: 0;
}
}
// overflow: hidden;
.img {
height: 100%;
border-radius: 10px;
}
}
}
.arrow {
@ -892,26 +946,7 @@ const handleMediaBtn = (type, index) => {
.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 {