Browse Source

调整个人章选择样式

lishihao 2 years ago
parent
commit
cd6b030a2b
2 changed files with 23 additions and 9 deletions
  1. 11 0
      app/public/css/main.css
  2. 12 9
      app/public/report/js/rpt_signature.js

+ 11 - 0
app/public/css/main.css

@@ -2046,3 +2046,14 @@ animation:shake 1s .2s ease both;}
 .card-gk-active .card-gk-bottom{
   display: inline-block;
 }
+
+.private-stamp-img{
+  display: inline-block;
+  margin: auto;
+  vertical-align: middle; 
+}
+.private-stamp-img .check-state{
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}

+ 12 - 9
app/public/report/js/rpt_signature.js

@@ -926,25 +926,28 @@ let rptSignatureHelper = {
         let currentStamp='';
         const targetNode= ROLE_REL_LIST.find(item=>item.signature_name===signature_name);
         if(targetNode) currentStamp=targetNode.private_stamp_path
-        let content=''
+        let content=`<div class='row justify-content-md-center'>`;
         stampPathList.split('!;!').forEach(item=>{
-            content+=`<div class="card col-3 p-2 m-3 d-inline-block ${currentStamp===item?'card-gk-active':''} stampImg">
-                        <div class="card-body p-0">
-                            <div class="sel-width pull-right ${currentStamp===item?'sel-blue':''} "></div>
-                            <a href="#" class="thumbnail">
+            content+=`<div class="card col-3 p-2 m-3 d-flex ${currentStamp===item?'card-gk-active':''} stampImg">
+                            <div class="p-0 private-stamp-img">
+                                <div  class="sel-width check-state ${currentStamp===item?'sel-blue':''} "></div>
                                 <img src="${rptSignatureHelper.fujianOssPath}${item}" data-src='${item}' class="img-fluid" alt="...">
-                            </a>
                             </div>
                         </div>`;
         })
-        content+=`<div class='privateStampRoleName' data-name='${signature_name}'></div>`;
+        
+        for(let i=0;i<stampPathList.length%3;i++){
+            content+=`<div class="col-3 p-2 m-3"></div>`;
+        }
+
+        content+=` </div><div class='privateStampRoleName' data-name='${signature_name}'></div>`;
 
         $('#chose-private-stamp-path .modal-body').empty().append(content);
         $('.stampImg').on('click',(e)=>{
             $('.stampImg').removeClass('card-gk-active');
-            $('.stampImg').find('.pull-right').removeClass('sel-blue');
+            $('.stampImg').find('.sel-width').removeClass('sel-blue');
             $(e.currentTarget).addClass('card-gk-active');
-            $(e.currentTarget).find('.pull-right').addClass('sel-blue');
+            $(e.currentTarget).find('.sel-width').addClass('sel-blue');
         })
     },
     setPrivateStamp(e){