综合查询

src/main/resources/mappers/backstage/SynthesisQueryMapper.xml

@@ -14,7 +14,7 @@
                operate_time AS uploadTime,
                '1' AS sourceType,
                '违章照片' AS sourceTypeName,
-               '1' AS collectStatus
+               '0' AS collectStatus
         FROM sys_logs
     </select>
 </mapper>

src/main/resources/static/css/synthesisQuery/synthesisQuery.css

@@ -196,7 +196,51 @@ body {
     height: 100%;
     justify-content: space-evenly;
 }
+.hidden-btn>div{
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+    background-color: #fff;
+}
+.hidden-btn>div>div{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+.img-view{
+    background: url("../../img/synthesisQuery/view.png") no-repeat  0 0 / 100% 100% ;
+}
+.img-view:hover{
+    background: url("../../img/synthesisQuery/view_check.png") no-repeat 0 0 / 100% 100% ;
+}
 
+.img-download{
+    background: url("../../img/synthesisQuery/download.png") no-repeat  0 0 / 100% 100% ;
+}
+.img-download:hover{
+    background: url("../../img/synthesisQuery/download_check.png") no-repeat 0 0 / 100% 100% ;
+}
+
+.img-water{
+    background: url("../../img/synthesisQuery/water.png") no-repeat  0 0 / 100% 100% ;
+}
+.img-water:hover{
+    background: url("../../img/synthesisQuery/water_check.png") no-repeat 0 0 / 100% 100% ;
+}
+
+.img-collect{
+    background: url("../../img/synthesisQuery/collect.png") no-repeat  0 0 / 100% 100% ;
+}
+.img-collect:hover{
+    background: url("../../img/synthesisQuery/collect_check.png") no-repeat 0 0 / 100% 100% ;
+}
+
+.img-collect-check{
+    background: url("../../img/synthesisQuery/collect_check.png") no-repeat  0 0 / 100% 100% ;
+}
+.img-collect-check:hover{
+    background: url("../../img/synthesisQuery/collect.png") no-repeat 0 0 / 100% 100% ;
+}
 .layui-input:hover,
 .layui-select:hover,
 .layui-textarea:hover {

src/main/resources/static/js/synthesisQuery/synthesisQuery.js

@@ -99,10 +99,10 @@ function initImgData(list) {
                 "            <p>" + item.id.substr(0, 10) + "</p>" +
                 "        </div>" +
                 "        <div class='hidden-actions'><div class='hidden-btn layout'>" +
-                "           <button class='btn-edit' onclick='viewImg("+JSON.stringify(item)+")'>放大</button>" +
-                "           <button class='btn-delete' onclick='imgDownLoad("+JSON.stringify(item)+")'>原图下载</button>" +
-                "           <button class='btn-delete' onclick='waterImgDownLoad("+JSON.stringify(item)+")'>水印下载</button>" +
-                            (item.collectStatus === '0' ? "<button class='btn-delete' onclick='collectImg("+JSON.stringify(item)+",1)'>收藏</button>":"<button class='btn-delete' onclick='collectImg("+JSON.stringify(item)+",2)'>取消收藏</button>")  +
+                "           <div class='layout' onclick='viewImg("+JSON.stringify(item)+")'><div class='img-view'></div></div>" +
+                "           <div class='layout' onclick='imgDownLoad("+JSON.stringify(item)+")'><div class='img-download'></div></div>" +
+                "           <div class='layout' onclick='waterImgDownLoad("+JSON.stringify(item)+")'><div class='img-water'></div></div>" +
+                            (item.collectStatus === '0' ? "<div class='layout' onclick='collectImg("+JSON.stringify(item)+",1)'><div class='img-collect'></div></div>":"<div class='layout' onclick='collectImg("+JSON.stringify(item)+",2)'><div class='img-collect-check' ></div></div>")  +
                 "         </div></div>" +
                 "    </div>");
         })
@@ -110,18 +110,19 @@ function initImgData(list) {
     return htmlArr;
 }
 
+/**放大*/
 function viewImg(item) {
-
+    alert(item.id)
 }
-
+/**放大*/
 function imgDownLoad(item) {
-
+    alert(item.id)
 }
-
+/**水印下载*/
 function waterImgDownLoad(item) {
-
+    alert(item.id)
 }
-
+/**收藏*/
 function collectImg(item,type) {
-
+    alert(item.id)
 }