| | |
| | | <template> |
| | | <div> |
| | | <el-dialog title="查看附件" v-model="dialogVisitable" width="800px" @close="cancel"> |
| | | <el-dialog title="查看附件" |
| | | v-model="dialogVisitable" |
| | | width="800px" |
| | | @close="cancel"> |
| | | <div class="upload-container"> |
| | | <div class="form-container"> |
| | | <div class="title">生产前</div> |
| | | |
| | | <div class="title">图片列表</div> |
| | | <div class="media-list"> |
| | | <img |
| | | v-for="(item, index) in beforeProductionImgs" |
| | | <img v-for="(item, index) in beforeProductionImgs" |
| | | :key="`before-img-${index}`" |
| | | :src="item" |
| | | alt="" |
| | | class="media-image" |
| | | @click="showMedia(beforeProductionImgs, index, 'image')" |
| | | /> |
| | | @click="showMedia(beforeProductionImgs, index, 'image')" /> |
| | | </div> |
| | | |
| | | <div class="media-list"> |
| | | <div |
| | | v-for="(videoUrl, index) in beforeProductionVideos" |
| | | <div v-for="(videoUrl, index) in beforeProductionVideos" |
| | | :key="`before-video-${index}`" |
| | | class="video-item" |
| | | @click="showMedia(beforeProductionVideos, index, 'video')" |
| | | > |
| | | @click="showMedia(beforeProductionVideos, index, 'video')"> |
| | | <div class="video-thumb"> |
| | | <img src="@/assets/images/video.png" alt="播放" class="video-icon" /> |
| | | <img src="@/assets/images/video.png" |
| | | alt="播放" |
| | | class="video-icon" /> |
| | | </div> |
| | | <div class="video-text">点击播放</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | |
| | | <div class="form-container"> |
| | | <!-- <div class="form-container"> |
| | | <div class="title">生产中</div> |
| | | |
| | | <div class="media-list"> |
| | |
| | | <div class="video-text">点击播放</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer"> |
| | | <div class="media-viewer-content" @click.stop> |
| | | <vue-easy-lightbox |
| | | v-if="mediaType === 'image'" |
| | | <div v-if="isMediaViewerVisible" |
| | | class="media-viewer-overlay" |
| | | @click.self="closeMediaViewer"> |
| | | <div class="media-viewer-content" |
| | | @click.stop> |
| | | <vue-easy-lightbox v-if="mediaType === 'image'" |
| | | :visible="isMediaViewerVisible" |
| | | :imgs="mediaList" |
| | | :index="currentMediaIndex" |
| | | @hide="closeMediaViewer" |
| | | /> |
| | | |
| | | <div v-else-if="mediaType === 'video'" class="video-player-wrap"> |
| | | <video :src="mediaList[currentMediaIndex]" autoplay controls class="video-player" /> |
| | | @hide="closeMediaViewer" /> |
| | | <div v-else-if="mediaType === 'video'" |
| | | class="video-player-wrap"> |
| | | <video :src="mediaList[currentMediaIndex]" |
| | | autoplay |
| | | controls |
| | | class="video-player" /> |
| | | </div> |
| | | </div> |
| | | </div> |