From 8e2bf84dc036d17eeb02bb86e319e8614c0e0d0d Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期四, 24 八月 2023 14:56:57 +0800 Subject: [PATCH] 图片多传和查看 --- src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html | 12 +- src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html | 63 ++++++++++ src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html | 63 ++++++++++ src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html | 37 ++++++ src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html | 4 src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html | 63 ++++++++++ src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html | 4 src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html | 37 ++++++ src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html | 37 ++++++ 9 files changed, 301 insertions(+), 19 deletions(-) diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html index a647f0c..3cca9a5 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/detailDangerAccept.html @@ -177,11 +177,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics1" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container1" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -341,11 +348,18 @@ <div class="col-sm-6"> <label class="col-sm-4 control-label ">隐患整改后视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{postRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics2" th:src="*{postRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container2" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -418,6 +432,51 @@ <th:block th:include="include :: footer"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl1 = $('.allPics1'); + var imageUrls1 = imgsUrl1.attr('src') + var ids = imgsUrl1.attr('data-id') + var imageContainer1 = document.querySelector('.image-container1'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray1 = imageUrls1.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray1.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer1.appendChild(img); + }); + + var imgsUrl2 = $('.allPics2'); + var imageUrls2 = imgsUrl2.attr('src') + var imageContainer2 = document.querySelector('.image-container2'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray2 = imageUrls2.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray2.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer2.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html index b22e534..32325db 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerAccept/editDangerAccept.html @@ -182,11 +182,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics1" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container1" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -346,11 +353,18 @@ <label class="col-sm-4 control-label ">隐患整改后视图:</label> <div class="col-sm-8"> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{postRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics2" th:src="*{postRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container2" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -406,6 +420,51 @@ <th:block th:include="include :: jasny-bootstrap-js"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl1 = $('.allPics1'); + var imageUrls1 = imgsUrl1.attr('src') + var ids = imgsUrl1.attr('data-id') + var imageContainer1 = document.querySelector('.image-container1'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray1 = imageUrls1.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray1.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer1.appendChild(img); + }); + + var imgsUrl2 = $('.allPics2'); + var imageUrls2 = imgsUrl2.attr('src') + var imageContainer2 = document.querySelector('.image-container2'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray2 = imageUrls2.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray2.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer2.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html index f9a646f..73775fe 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/detailDangerExamine.html @@ -174,11 +174,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -290,6 +297,34 @@ <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl = $('.allPics'); + var imageUrls = imgsUrl.attr('src') + var ids = imgsUrl.attr('data-id') + var imageContainer = document.querySelector('.image-container'); + + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray = imageUrls.split(','); + + // 遍历URL数组并创建img元素 + imageUrlArray.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html index ebc4590..d02b036 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerExamine/editDangerExamine.html @@ -179,11 +179,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -337,6 +344,34 @@ <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl = $('.allPics'); + var imageUrls = imgsUrl.attr('src') + var ids = imgsUrl.attr('data-id') + var imageContainer = document.querySelector('.image-container'); + + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray = imageUrls.split(','); + + // 遍历URL数组并创建img元素 + imageUrlArray.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html index 568547c..727a0e1 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/detailDangerRectify.html @@ -173,11 +173,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics1" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container1" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -337,11 +344,18 @@ <div class="col-sm-6"> <label class="col-sm-4 control-label ">隐患整改后视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{postRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics2" th:src="*{postRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'postRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container2" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -360,6 +374,51 @@ <th:block th:include="include :: footer"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl1 = $('.allPics1'); + var imageUrls1 = imgsUrl1.attr('src') + var ids = imgsUrl1.attr('data-id') + var imageContainer1 = document.querySelector('.image-container1'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray1 = imageUrls1.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray1.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer1.appendChild(img); + }); + + var imgsUrl2 = $('.allPics2'); + var imageUrls2 = imgsUrl2.attr('src') + var imageContainer2 = document.querySelector('.image-container2'); + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray2 = imageUrls2.split(','); + // 遍历URL数组并创建img元素 + imageUrlArray2.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer2.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html index de8eb71..0e57f53 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerRectify/editDangerRectify.html @@ -222,11 +222,18 @@ <div class="form-group"> <label class="col-sm-4 control-label ">隐患视图:</label> <div class="col-sm-8"> - <img style="width: 100px; height: 100px;cursor:pointer;" +<!-- <img style="width: 100px; height: 100px;cursor:pointer;"--> +<!-- title="查看图片"--> +<!-- th:src="*{preRectifyPhoto}"--> +<!-- onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')"--> +<!-- th:data-id="${hdcp.id}">--> + <img style="width: 100px; height: 100px;cursor:pointer;display: none" title="查看图片" + class="allPics" th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hdcp.id}"> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -402,6 +409,34 @@ <th:block th:include="include :: datetimepicker-js"/> <th:block th:include="include :: jquery-steps-js"/> <script type="text/javascript"> + $(document).ready(function () { + var imgsUrl = $('.allPics'); + var imageUrls = imgsUrl.attr('src') + var ids = imgsUrl.attr('data-id') + var imageContainer = document.querySelector('.image-container'); + + // 将逗号分隔的字符串拆分为URL数组 + var imageUrlArray = imageUrls.split(','); + + // 遍历URL数组并创建img元素 + imageUrlArray.forEach(function(url, index) { + var img = document.createElement('img'); + img.setAttribute('src', url); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); + img.setAttribute('title', '查看图片'); + img.setAttribute('data-id', ids); + img.addEventListener('click', function() { + // showPicture(this.getAttribute('data-id'), 'preRectifyPhoto'); + openPicture(url) + }); + imageContainer.appendChild(img); + }); + }); + + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html index cc0c2f2..145d2c0 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotDanger.html @@ -109,7 +109,7 @@ th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> - <div class="image-container"></div> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -161,7 +161,7 @@ imageUrlArray.forEach(function(url, index) { var img = document.createElement('img'); img.setAttribute('src', url); - img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px'); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', ids); img.addEventListener('click', function() { @@ -172,15 +172,15 @@ }); }); + function openPicture(url) { + window.open(url) + } + /* 图片--查看 */ function showPicture(id,type) { var showPictureUrl = "/tr/hiddenDangerCheck/dangerBase/showPicture/{type}/{id}"; var urlLast = showPictureUrl.replace("{type}", type).replace("{id}", id); $.operate.openDetailInfo("查看图片", urlLast); - } - - function openPicture(url) { - window.open(url) } </script> diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html index 59799b6..393bda5 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailNotJudge.html @@ -108,7 +108,7 @@ th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> - <div class="image-container"></div> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -160,7 +160,7 @@ imageUrlArray.forEach(function(url, index) { var img = document.createElement('img'); img.setAttribute('src', url); - img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px'); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', ids); img.addEventListener('click', function() { diff --git a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html index 0e53535..4e7b271 100644 --- a/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html +++ b/src/main/resources/templates/tr/hiddenDangerCheck/dangerReport/detailYesDanger.html @@ -162,7 +162,7 @@ th:src="*{preRectifyPhoto}" onclick="showPicture(this.getAttribute('data-id'),'preRectifyPhoto')" th:data-id="${hiddenDangerCheckPoint.id}"> - <div class="image-container"></div> + <div class="image-container" style="display: flex;align-items: flex-start"></div> </div> </div> </div> @@ -214,7 +214,7 @@ imageUrlArray.forEach(function(url, index) { var img = document.createElement('img'); img.setAttribute('src', url); - img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin: 10px'); + img.setAttribute('style', 'width: 100px; height: 100px; cursor: pointer;margin-right: 10px'); img.setAttribute('title', '查看图片'); img.setAttribute('data-id', ids); img.addEventListener('click', function() { -- Gitblit v1.9.2