fix : 개별총정보 탭 변경

src/main/webapp/WEB-INF/jsp/fims/biz/cmm/cmmFimsCrackdownTotMgtPopup.jsp

@@ -39,15 +39,8 @@ Date       Author       Description
 <div style="display: flex" class="conttitle">
   <img src="${ctx }/resources/biz/common/images/titleLogo_01.png"/>
   <p class="title">개별총정보</p>
-<%--  <%@include file="/WEB-INF/jsp/framework/biz-popup-tab-btn.jsp" %>--%>
   <div class="popup_btn">
     <div class="flr p_flr">
-
-      <!--
-                          <a href="#" class="btn btn-blue"  id="prev">prev</a>
-                          <span id="totCnt" style="padding: 0 10px;"></span>
-                          <a href="#" class="btn btn-blue" id="next">next</a>
-      -->
       <button type="button" id="double_prev" name="double_prev">
         <i class="fa-solid fa-angles-left"></i>
       </button>
@@ -76,20 +69,30 @@ Date       Author       Description
 </div>
 
 <div class="pop">
-  <div id="popupTabs">
+  <div id="popupTabs" class="nav-align-top">
-    <ul>
+    <ul class="nav nav-tabs">
-      <li><a href="#tabs_0" id="0">위반정보<span id="t0"></span></a></li>
+      <li class="nav-item">
-      <li><a href="#tabs_1" id="1">의견진술<span id="t1"></span></a></li>
+        <button type="button" class="nav-link active" id="0" data-bs-toggle="tab" data-bs-target="#tabs_0">위반정보<span id="t0"></span></button>
-      <li><a href="#tabs_2" id="2">세부내역<span id="t2"></span></a></li>
+      </li>
-      <li><a href="#tabs_3" id="3">민원내역<span id="t3"></span></a></li>
+      <li class="nav-item">
+        <button type="button" class="nav-link" id="1" data-bs-toggle="tab" data-bs-target="#tabs_1">의견진술<span id="t1"></span></button>
+      </li>
+      <li class="nav-item">
+        <button type="button" class="nav-link" id="2" data-bs-toggle="tab" data-bs-target="#tabs_2">세부내역<span id="t2"></span></button>
+      </li>
+      <li class="nav-item">
+        <button type="button" class="nav-link" id="3" data-bs-toggle="tab" data-bs-target="#tabs_3">민원내역<span id="t3"></span></button>
+      </li>
     </ul>
+  </div>
 
-    <div id="tabs_0">
+  <div class="tab-content">
-      <div class="w_fix09 gridGroup" style="position: relative;">
+    <div id="tabs_0" class="tab-pane fade show active">
+      <div class="w_fix09 gridGroup card d-inline-flex" style="position: relative;">
         <p class="title deco_01">
           위반정보 <span id="violtDtlsNm" name="violtDtlsNm" style="padding-left: 20px; color:darkred;"></span>
         </p>
-        <%--<%@include file="/WEB-INF/jsp/framework/biz-popup-tab-btn.jsp" %>--%>
+
         <form id="frmReglt">
           <table class="tbl03">
             <caption>위반정보 상세</caption>
@@ -312,7 +315,7 @@ Date       Author       Description
 <%--        <%@include file="/WEB-INF/jsp/framework/biz-popup-tab-btn.jsp" %>--%>
       </div>
 
-      <div class="w_fix09 gridGroup" style="width:0px; min-width:300px!important;">
+      <div class="w_fix09 gridGroup  card d-inline-flex" style="width:0px; min-width:300px!important;">
         <p class="title deco_01">위반사진</p>
         <div id="imgList"></div>
         <div>
@@ -321,8 +324,8 @@ Date       Author       Description
       </div>
     </div>
 
-    <div id="tabs_1" style="display: flex;">
+    <div id="tabs_1" class="tab-pane fade">
-      <div class="w_fix02 gridGroup mR_01">
+      <div class="w_fix02 gridGroup mR_01 card d-inline-flex">
         <p class="title deco_01">진술내역</p>
         <table class="tbl03">
           <caption>의견진술 정보</caption>
@@ -408,7 +411,7 @@ Date       Author       Description
           </tbody>
         </table>
       </div>
-      <div class="w_fix02 gridGroup">
+      <div class="w_fix02 gridGroup card d-inline-flex">
         <p class="title deco_01">판정</p>
         <table class="tbl03">
           <colgroup>
@@ -440,7 +443,7 @@ Date       Author       Description
         </table>
       </div>
     </div>
-    <div id="tabs_2">
+    <div id="tabs_2" class="tab-pane fade">
       <div class="w_fix05" style="width: 1100px;">
         <div class="w_fix04 gridGroup">
           <div style="width: 100%; border:0px solid black">
@@ -586,7 +589,7 @@ Date       Author       Description
 
 
     </div>
-    <div id="tabs_3">
+    <div id="tabs_3" class="tab-pane fade">
 <form id="frmCmplt">
       <div class="w_fix05">
         <div class="w_fix04 gridGroup">
@@ -630,14 +633,14 @@ Date       Author       Description
 				</span>
             </div>
           </div>
-        </div><%--box--%>
+        <%--box--%>
       </div>
 </form>
 
     </div>
   </div><!--popupTabs -->
-<%--  <%@include file="/WEB-INF/jsp/framework/biz-popup-tab-btn.jsp" %>--%>
+
-</div><!--row -->
+</div><!-- pop -->
 
 <script type="text/javascript" src="${pageContext.request.contextPath}/resources/framework/js/cmm/cmmDownloadImg.js"></script>
 <script type="text/javaScript">
@@ -1291,15 +1294,12 @@ Date       Author       Description
 
   $(document).ready(function(){
     initPopupGrid();
-    $("#popupTabs").tabs({active : 0});
-//    orgData = $('form').serialize();
 
     fnPopupBiz.search({
       regltId: '${param.regltId}'
       ,regltSeCode: '${param.regltSeCode}'
       ,regltProcessSttusCode: '${param.regltProcessSttusCode}'
     })
-    //initPopupGrid();
 
   });
 

src/main/webapp/resources/biz/common/css/index.css

@@ -123,18 +123,15 @@ input[data-fmt-type=time], input[data-fmt-type=day] {
 }
 
 .w_fix02 {
-  width:75%;
+  width:48%;
   min-width:500px;
   height: 630px;
 }
 
-.w_fix03 {
-  width: 380px;
-  height: 345px; }
-
 .w_fix04 {
   width: 400px;
-  height: 345px; }
+  height: 345px;
+}
 
 .w_fix05 {
   width: 75%;
@@ -144,20 +141,13 @@ input[data-fmt-type=time], input[data-fmt-type=day] {
   display: flex;
 }
 
-.w_fix05-a {
-  width: 75%;
-  height: 360px;
-  min-width: 700px;
-}
-
 .w_fix06 {
-  /*width: 990px;*/
   width: 75%;
   min-width:700px;
 }
 
 .w_fix09 {
-  width: 75%;
+  width: 70%;
   min-width:600px;
   min-height: 730px;
 }
@@ -165,31 +155,24 @@ input[data-fmt-type=time], input[data-fmt-type=day] {
 
 
 .box {
-  display: flex; }
+  display: flex;
-
+}
-.deco_01 {
-  padding: 10px 10px 10px 15px;
-  margin-top: 12px; }
 
-.deco_02 {
-  padding: 10px 10px 10px 15px;
-  /*margin-top: 12px;*/ }
 
-#popupTabs {
-  /*height: 915px;*/
-  border: 1px solid #979797; }
-
-#popupTabs div[id^="tabs"] {
-  display: flex ;
-  flex-wrap: wrap ;
-}
 
 .gridGroup {
   border: 1px solid #f1f1f1;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   border-radius: 7px; }
 
+.deco_01 {
+  padding: 10px 10px 10px 15px;
+  margin-top: 12px;
+}
 
+.deco_02 {
+  padding: 10px 10px 10px 15px;
+}
 
 
 .title {
@@ -201,32 +184,25 @@ input[data-fmt-type=time], input[data-fmt-type=day] {
 }
 
 /* **  contents title 가이드  ** */
-
-.conttitle .title {
-  font-size: 20px !important; }
-
 .conttitle {
   padding: 2px 0px 10px 0px;
   font-size: 30px;
   font-weight: 700;
-  color: #333; }
+  color: #333;
+}
+
 .conttitle .title {
-  font-size: 23px;
+  font-size: 20px !important;
   padding: 12px 0px;
   padding-left: 23px;
 }
-.conttitle .popup_01 {
+
-  font-size: 20px;
-  border-bottom: 2px solid #ccc; }
-.conttitle .popup_02 {
-  font-size: 20px; }
 .conttitle img {
   width: 13px;
   display: block;
   align-items: baseline;
-  padding: 4px 4px 0px 10px; }
+  padding: 4px 4px 0px 10px;
-
+}
-
 
 /* 버튼 */
 button .ico {