<template>
|
<div class="findMgt-details">
|
<div class="find-img">
|
<el-carousel v-show="form.mediaType === '0'" @change="changeImg" :interval="5000" arrow="always">
|
<el-carousel-item v-for="item in form.urlList" :key="item">
|
<img @click="clickImg(item)" :src="item"/>
|
</el-carousel-item>
|
</el-carousel>
|
<div class="imgIndex" v-show="form.mediaType === '0'">{{imgIndex}}/{{form.urlList.length}}</div>
|
<video v-show="form.mediaType === '1'" :src="form.urlList[0]" controls/>
|
</div>
|
<div class="find-content">
|
{{form.content}}
|
</div>
|
<el-dialog title="图片详情" class="find-img-dialog" :visible.sync="dialogVisible" width="564px" v-if="dialogVisible" append-to-body>
|
<img :src="imgUrl" width="100%"/>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: ['form'],
|
data () {
|
return {
|
imgIndex: 1,
|
imgUrl: null,
|
dialogVisible: false
|
}
|
},
|
methods: {
|
// 点击图片 查看大图
|
clickImg (url) {
|
this.dialogVisible = true
|
this.imgUrl = url
|
},
|
// 轮播图切换获取当前图片索引
|
changeImg (newIndex, oldIndex) {
|
this.imgIndex = newIndex + 1
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.findMgt-details{
|
.find-img{
|
min-height: 300px;
|
max-height: 500px;
|
position: relative;
|
img{
|
cursor: pointer;
|
}
|
.imgIndex{
|
position:absolute;
|
z-index: 999;
|
bottom: 0;
|
text-align: center;
|
font-size: 18px;
|
background-color: rgba(0,0,0,.4);
|
width: 100%;
|
color: #eeeeee;
|
}
|
img,video{
|
width: 100%;
|
}
|
video{
|
height: 300px;
|
}
|
}
|
.find-content{
|
padding-top: 15px;
|
padding-bottom: 15px;
|
}
|
.el-carousel {
|
.el-carousel__indicators{
|
display: none;
|
}
|
}
|
}
|
.find-img-dialog{
|
.el-dialog__body{
|
max-height: 600px;
|
overflow-y: auto;
|
width: 90%;
|
margin: 0 auto;
|
&::-webkit-scrollbar {display:none}
|
}
|
}
|
</style>
|
