XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图片查看更新

Browse Source
This commit is contained in:
luJianJun
2023-07-27 14:21:48 +08:00
parent ad303096ca
commit 25561ff12d
9 changed files with 94 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/detail/imageWatch.vue
View File

@@ -6,10 +6,11 @@
<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="">
<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">
<source :src="item && item.url || item['videourl']" class="img" style="width:600px"
type="video/mp4">
</div>
</div>
</el-carousel-item>
@@ -25,12 +26,13 @@
<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 class="icon-box dis-f jus-x al-item">
<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>
</div>
<div class="img-box-s dis-f jus-x" :class="[{ 'select-box': imageTab === i },{'voide':!item.thumbnail}]">
<img :src="item.thumbnail||item.image" alt="" class="img-s">
<div class="img-box-s dis-f jus-x"
:class="[{ 'select-box': imageTab === i&&item.thumbnail }, { 'voide-img': !item.thumbnail }]">
<img :src="item.thumbnail || item.image" alt="" class="img-s" style="object-fit: cover;">
</div>
</div>
</div>
@@ -40,7 +42,7 @@
</template>
<script setup>
import { reactive, onMounted, ref, defineProps,watchEffect } from 'vue'
import { reactive, onMounted, ref, defineProps, watchEffect } from 'vue'
const props = defineProps({
//url:展示图 thumbnail:缩略图
@@ -51,24 +53,24 @@ const props = defineProps({
return []
}
},
close:{
type:Function
close: {
type: Function
},
show:{
type:Boolean,
default:false
show: {
type: Boolean,
default: false
}
})
let show=props.show
let list =ref([])
let close=props.close
let show = props.show
let list = ref([])
let close = props.close
let carousel = ref(null)
let imageTab = ref(0)
//上一张
let prev = () => {
if (imageTab.value === list.value.length-1) return
if (imageTab.value === list.value.length - 1) return
imageTab.value++
carousel.value.prev()
}
@@ -81,16 +83,16 @@ let next = () => {
}
//点击预览图
let watchSet=(num)=>{
imageTab.value=num
let watchSet = (num) => {
imageTab.value = num
carousel.value.setActiveItem(num)
}
watchEffect(()=>{
show=props.show
list.value= props.list
if(imageTab.value>0)carousel.value.setActiveItem(imageTab.value)
watchEffect(() => {
show = props.show
list.value = props.list
if (imageTab.value > 0) carousel.value.setActiveItem(imageTab.value)
})
</script>
<style scoped>
@@ -157,9 +159,10 @@ img {
.mg-t-60 {
margin-top: 60px;
}
.select-box {
border: 1px solid #50e3c2 !important;
}
border: 1px solid #50e3c2 !important;
}
.watch-box {
width: 100%;
@@ -186,17 +189,29 @@ img {
height: 100px;
.img-box-s {
height:62px;
height: 62px;
border: 1px solid transparent;
border-radius: 8px;
margin-left: 5px;
cursor: pointer;
.img-s{
height:60px;
object-fit: cover;
.img-s {
height: 60px;
border-radius: 8px;
}
}
.voide-img {
width: 60px;
height: 60px;
border: 1px solid transparent;
margin-left: 5px;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
}
.voide {
width: 60px;
height: 60px;
@@ -205,16 +220,19 @@ img {
border-radius: 8px;
cursor: pointer;
position: absolute;
top:0;
left:0;
top: 0;
left: 0;
.bor-r-8{
border-radius:8px !important;
}
.icon-box {
width: 60px;
height: 60px;
width: 58px;
height: 58px;
background: inherit;
background-color: rgba(51, 51, 51, 0.733333333333333);
border: none;
border-radius: 8px;
border-radius: 6px;
.icon {
width: 18px;
@@ -225,7 +243,7 @@ img {
}
.img-box {
width:1200px;
width: 1200px;
height: 600px;
border-radius: 10px;
overflow: hidden;
@@ -238,6 +256,5 @@ img {
::-webkit-scrollbar {
display: none;
}
</style>
}</style>