|
|
@@ -275,9 +275,16 @@
|
|
|
<div v-for="(item,index) in JSON.parse(studentWork.works)" :key="index">
|
|
|
<div class="BodyCon" v-if="item.imageUrls && item.imageUrls.length">
|
|
|
<div class="BodyConTit">节点{{ index + 1}}</div>
|
|
|
- <div style="display: flex;flex-wrap: wrap;gap: 10px;" v-for="(image,index) in item.imageUrls" :key="index+'-image'">
|
|
|
- <img style="max-width: 390px;object-fit: cover;" :src="image" alt="" />
|
|
|
- </div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;gap: 10px;">
|
|
|
+ <img
|
|
|
+ style="max-width: 360px;object-fit: cover;cursor: pointer;"
|
|
|
+ v-for="(image,imgIndex) in item.imageUrls"
|
|
|
+ :key="index+'-image-'+imgIndex"
|
|
|
+ :src="image"
|
|
|
+ alt=""
|
|
|
+ @click="previewImage(image)"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="BodyCon" v-if="item.messages.length" >
|
|
|
<div class="BodyConTit">节点{{ index + 1}}</div>
|
|
|
@@ -308,6 +315,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <!-- 图片预览对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="imagePreviewVisible"
|
|
|
+ width="90%"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ :show-close="true"
|
|
|
+ class="image-preview-dialog"
|
|
|
+ @close="imagePreviewVisible = false">
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <img
|
|
|
+ :src="previewImageUrl"
|
|
|
+ alt="预览图片"
|
|
|
+ style="max-width: 100%; max-height: 80vh; object-fit: contain;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -420,6 +443,8 @@ export default {
|
|
|
testData: null,
|
|
|
testJson: null,
|
|
|
tool: null,
|
|
|
+ imagePreviewVisible: false,
|
|
|
+ previewImageUrl: '',
|
|
|
optionTypeList:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
|
|
|
|
|
|
};
|
|
|
@@ -459,7 +484,12 @@ export default {
|
|
|
},
|
|
|
init() {
|
|
|
this.studentWork = null;
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 预览图片
|
|
|
+ previewImage(imageUrl) {
|
|
|
+ this.previewImageUrl = imageUrl;
|
|
|
+ this.imagePreviewVisible = true;
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
renderedFormula() {
|
|
|
@@ -1000,5 +1030,32 @@ export default {
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
|
|
|
+ /* 图片预览对话框样式 */
|
|
|
+ .image-preview-dialog >>> .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ /* background: rgba(0, 0, 0, 0.8); */
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-preview-dialog >>> .el-dialog {
|
|
|
+ background: transparent;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-preview-dialog >>> .el-dialog__header {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-preview-dialog >>> .el-dialog__close {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-preview-dialog >>> .el-dialog__close:hover {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
|
|
|
</style>
|
SanHQin