修改图片预览
This commit is contained in:
A1300399510
parent
bee5f42a99
commit
a20164b8fe
@ -5,14 +5,12 @@
|
||||
<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">
|
||||
<img :src="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
|
||||
</div>
|
||||
<div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
|
||||
<!-- <source :src="item && item.url || item['videourl']" class="img" style="width:600px" -->
|
||||
<!-- type="video/mp4"> -->
|
||||
<div class="img-box dis-f jus-x" style="width:600px" v-if="item['type'] != 'attachment'">
|
||||
<video autoplay controls :src="item.url"></video>
|
||||
</div>
|
||||
<div class="img-box dis-f jus-x" v-else>
|
||||
<img :src="item && item.url || item['imageurl'] || item['image']" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
@ -25,8 +23,8 @@
|
||||
</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)" class="pos-r">
|
||||
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail">
|
||||
<div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r" style="margin-bottom: 10px;">
|
||||
<div class="voide" :class="{ 'select-box': imageTab === i }" v-if="item['type'] != 'attachment'">
|
||||
<div class="icon-box dis-f jus-x al-item" :class="{ 'bor-r-8': imageTab === i }">
|
||||
<img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
|
||||
</div>
|
||||
@ -44,7 +42,7 @@
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
|
||||
|
||||
// type 的类型代表 attachment 图片 videos 视频 lives 直播
|
||||
const props = defineProps({
|
||||
//url:展示图 thumbnail:缩略图
|
||||
// list:[{url:'',thumbnail:''}]
|
||||
@ -64,8 +62,8 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
console.log("list", props.list);
|
||||
}, 1000);
|
||||
console.log("list1111", props.list);
|
||||
}, 5000);
|
||||
|
||||
|
||||
let show = props.show
|
||||
@ -192,7 +190,8 @@ img {
|
||||
.list-img-box {
|
||||
overflow-x: scroll;
|
||||
width: 1200px;
|
||||
height: 100px;
|
||||
flex-wrap: wrap;
|
||||
/* height: 100px; */
|
||||
|
||||
.img-box-s {
|
||||
height: 62px;
|
||||
@ -219,8 +218,8 @@ img {
|
||||
}
|
||||
|
||||
.voide {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
width: calc(100% - 5px);
|
||||
height: 100%;
|
||||
border: 1px solid transparent;
|
||||
margin-left: 5px;
|
||||
border-radius: 8px;
|
||||
@ -234,8 +233,8 @@ img {
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: inherit;
|
||||
background-color: rgba(51, 51, 51, 0.733333333333333);
|
||||
border: none;
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
<el-carousel :autoplay="false" arrow="never" indicator-position="none" ref="remarkCaruselUp"
|
||||
@change="carouselChange">
|
||||
<el-carousel-item class="flexcenter" v-for="(item, index) in allCarouselsData">
|
||||
|
||||
<img v-if="index >= carouselIndex - 1 && index <= carouselIndex + 1" class="img"
|
||||
:src="item['image'] || item['imageurl']" @click="cloaseImageShow(allCarouselsData)">
|
||||
</el-carousel-item>
|
||||
@ -446,6 +445,16 @@ const init = () => {
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
|
||||
data['roomList'].forEach(element => {
|
||||
element['images'].forEach(element => {
|
||||
element['type'] = 'attachment'
|
||||
})
|
||||
element['videos'].forEach(element => {
|
||||
element['type'] = 'videos'
|
||||
})
|
||||
})
|
||||
|
||||
roomList.value = data['roomList']
|
||||
data['info']['coordinate'] = data['info']['coordinate'].split(',').map(item => {
|
||||
return +item
|
||||
@ -679,8 +688,6 @@ const handleScroll = () => {
|
||||
}
|
||||
|
||||
const indicateTypeState = () => {
|
||||
console.log("carouselsconfig", carouselsconfig);
|
||||
|
||||
let total = 0 // 累计
|
||||
for (const key in carouselsconfig.value) {
|
||||
if (carouselsconfig.value[key]['amount'] > 0) total++
|
||||
|
||||
@ -1106,21 +1106,25 @@ let housingInfo = reactive({})
|
||||
let concatInfo = reactive({})
|
||||
|
||||
let setHousingArr = () => {
|
||||
let arr = []
|
||||
arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
|
||||
arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
|
||||
imgList.value = imgList.value.concat(arr)
|
||||
// let arr = []
|
||||
// arr = housingInfo['data'].info.video ? arr.concat(housingInfo['data'] && housingInfo['data'].info.video) : []
|
||||
// arr = housingInfo['data'].info.picturegroup ? arr.concat(housingInfo['data'] && housingInfo['data'].info.picturegroup) : []
|
||||
// imgList.value = imgList.value.concat(arr)
|
||||
|
||||
console.log(imgList.value)
|
||||
if (housingInfo['data'].info.video) {
|
||||
housingInfo['data'].info.video.forEach(element => {
|
||||
element['type'] = 'videos'
|
||||
})
|
||||
|
||||
housingInfo['data'].info.video.forEach(element => {
|
||||
console.log("element", element);
|
||||
element['type'] = 'videos'
|
||||
})
|
||||
imgList.value = [...housingInfo['data'].info.video]
|
||||
}
|
||||
if (housingInfo['data'].info.picturegroup) {
|
||||
housingInfo['data'].info.picturegroup.forEach(element => {
|
||||
element['type'] = 'attachment'
|
||||
})
|
||||
imgList.value = [...housingInfo['data'].info.picturegroup]
|
||||
}
|
||||
|
||||
// lives
|
||||
|
||||
console.log("housingInfo['data'].info.video", housingInfo['data'].info.video);
|
||||
|
||||
}
|
||||
|
||||
@ -2644,7 +2648,6 @@ img {
|
||||
}
|
||||
|
||||
.school-info {
|
||||
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
@ -2794,5 +2797,6 @@ img {
|
||||
}
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user