个人房源

This commit is contained in:
2023-07-25 19:32:50 +08:00
parent fff3c786a8
commit 7e95fd62f8
6 changed files with 151 additions and 52 deletions

View File

@@ -5,11 +5,11 @@
<el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item" v-if="item">
<div class="img-box dis-f jus-x" v-if="!item.thumbnail">
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
<img :src="item&&item.url" class="img" alt="">
</div>
<div class="img-box dis-f jus-x" v-if="item.thumbnail">
<video :src="item&&item.url" class="img"></video>
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
<source :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
</div>
</div>
</el-carousel-item>
@@ -23,14 +23,14 @@
</div>
<div class="dis-f jus-x al-item">
<div class="list-img-box dis-f al-item jus-x">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)">
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r">
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail">
<div class="icon-box dis-f jus-x al-item">
<img :src="item.image" class="icon" alt="">
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
</div>
</div>
<div class="img-box-s dis-f jus-x" v-if="item.thumbnail" :class="{ 'select-box': imageTab === i }">
<img :src="item.thumbnail" alt="" class="img-s">
<div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
<img :src="item.thumbnail||item.image" alt="" class="img-s">
</div>
</div>
</div>
@@ -82,6 +82,7 @@ let next = () => {
//点击预览图
let watchSet=(num)=>{
imageTab.value=num
carousel.value.setActiveItem(num)
}
@@ -203,6 +204,9 @@ img {
margin-left: 5px;
border-radius: 8px;
cursor: pointer;
position: absolute;
top:0;
left:0;
.icon-box {
width: 60px;