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

修改图片预览

Browse Source
This commit is contained in:
A1300399510
2023-07-27 15:41:30 +08:00
parent bee5f42a99
commit a20164b8fe
3 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;