浏览代码

tab样式优化

songxy 1 年之前
父节点
当前提交
a9b911ee7c

+ 14 - 2
zjugis-business/src/main/resources/static/flow/css/formCommon.css

@@ -91,8 +91,6 @@
 
 .form-boss {
   padding: 20px 30px;
-  overflow-y: auto;
-  margin-bottom: 70px;
 }
 
 .form-title {
@@ -298,3 +296,17 @@
 .form-table-info .table-btn span {
   color: #2e77e6;
 }
+.ow-tab {
+  display: flex;
+  flex-direction: column;
+}
+.ow-tab-item {
+  padding: 5px 15px !important;
+  cursor: pointer;
+}
+.ow-tab>.ow-tab-scroll {
+  height: 0px;
+  flex-grow: 1;
+  overflow-y: auto;
+  margin-top: 15px;
+}

+ 39 - 31
zjugis-business/src/main/resources/templates/FlowContract/apply.ftl

@@ -1,21 +1,21 @@
 <@w.workFlow javascripts=['/FlowContract/js/apply.js','/flow/js/formCommon.js']
 styles=[ '/flow/css/formCommon.css' ]>
-  <div class="z-position form-boss" name="flow-form">
+  <div class="z-position form-boss ow-tab" name="flow-form">
       <div class="oa_tabBox">
           <ul class="z-tab-bar">
-              <li z-tabindex="0" class="on"><a href="#test1">基础信息A</a></li>
-              <li z-tabindex="1"><a href="#test2">基础信息B</a></li>
+              <li z-tabindex="0" class="ow-tab-item on" data-name="test1">基础信息A</li>
+              <li z-tabindex="1" class="ow-tab-item" data-name="test2">基础信息B</li>
         <#if WORKFLOW.MATERIALS! != "">
-            <li z-tabindex="2"><a>收件材料</a></li>
+            <li z-tabindex="2">收件材料</li>
         </#if>
         <#if WORKFLOW.OPINION! != "">
-            <li z-tabindex="3"><a>意见内容</a></li>
+            <li z-tabindex="3">意见内容</li>
         </#if>
               </ul>
           </div>
 
-      <div class="z-tab-scroll">
-          <div class="z-tab-content on" id="test1">
+      <div class="ow-tab-scroll">
+          <div class="ow-tab-content" name="test1">
               <div class="z-form-row" style="display: none;">
                   <input type="text" value="${formEntity.instanceId!}" name="contract$instanceId">
                   <input type="text" value="${formEntity.id!}" name="contract$id">
@@ -677,7 +677,7 @@ styles=[ '/flow/css/formCommon.css' ]>
                   </table>
               </div>
           </div>
-          <div class="z-tab-content on" id="test2">
+          <div class="ow-tab-content" name="test2">
               <div class="z-form-row" style="display: none;">
                   <input type="text" value="${formEntity.instanceId!}" name="contract$instanceId">
                   <input type="text" value="${formEntity.id!}" name="contract$id">
@@ -1243,29 +1243,6 @@ styles=[ '/flow/css/formCommon.css' ]>
   </#if>
   </div>
   <style type="text/css">
-      .oa_tabBox {
-          border-bottom: 2px solid #E1E9F5;
-      }
-      .oa_tabBox>.z-tab-bar {
-          border-bottom: 0px;
-      }
-      .oa_tabBox>.z-tab-bar .on {
-          border-bottom: 0px;
-      }
-      .oa_tabBox>.z-tab-bar a {
-          font-size: 18px;
-          font-weight: bold;
-      }
-      .oa_tabBox>.z-tab-bar .on>a {
-          border-bottom: 3px solid #2E77E6;
-          color: #2E77E6;
-      }
-      .z-tab-scroll {
-          padding: 15px;
-          border: 1px solid #f00;
-          height: 400px;
-          overflow-y: auto;
-      }
       .jbxx-box-flex .th {
           width: 160px !important;
       }
@@ -1280,4 +1257,35 @@ styles=[ '/flow/css/formCommon.css' ]>
           flex: 1;
       }
   </style>
+    <script language="javascript">
+        ;(function(_g){
+            function TabScroll(){
+                if(!$) throw new Error("$未定义,请先引入jQuery库!");
+                $(".ow-tab-content").hide(0);
+                var dataName = $(".ow-tab-item").removeClass('on').eq(0).addClass("on").attr("data-name")
+                $("[name='"+dataName+"']").show();
+                return this;
+            }
+            TabScroll.prototype = {
+                init: function(handle){
+                    $(".ow-tab-item").click(function(){
+                        $(".ow-tab-item").removeClass('on')
+                        var dataName = $(this).addClass("on").attr('data-name');
+                        $(".ow-tab-content").hide(0);
+                        $("[name='"+dataName+"']").show();
+                        if(handle){
+                            handle($(this))
+                        }
+                    })
+                }
+            }
+            _g.tabScroll = TabScroll;
+        })(window);
+        setTimeout(function(){
+
+            new tabScroll().init(function(dom){
+                console.log(dom)
+            })
+        }, 4000)
+    </script>
 </@w.workFlow>

+ 1 - 1
zjugis-business/src/main/resources/templates/public/workFlow.ftl

@@ -22,7 +22,7 @@
         }
         .oa_formBox>div:nth-child(2){
             position: relative;
-            height: calc(100% - 40px)
+            height: calc(100% - 110px)
         }
         .oa_formBox>div:nth-child(2)>.z-position {
             float: none;

+ 2 - 2
zjugis-gateway/src/main/resources/bootstrap-local.yaml

@@ -5,7 +5,7 @@ spring:
     nacos:
       server-addr: 10.10.10.7:8848
       discovery:
-        namespace: 21aff5a9-3379-4c8a-a58c-78326ce994c1 # 命名空间。这里使用 dev 开发环境
+        namespace: 2cf329b5-95c5-4b3b-9112-8e09eb8f67cf # 命名空间。这里使用 dev 开发环境
 
 --- #################### 配置中心相关配置 ####################
 
@@ -15,7 +15,7 @@ spring:
       # Nacos Config 配置项,对应 NacosConfigProperties 配置属性类
       config:
         server-addr:  10.10.10.7:8848 # Nacos 服务器地址
-        namespace: 21aff5a9-3379-4c8a-a58c-78326ce994c1 # 命名空间。这里使用 dev 开发环境
+        namespace: 2cf329b5-95c5-4b3b-9112-8e09eb8f67cf # 命名空间。这里使用 dev 开发环境
         group: DEFAULT_GROUP # 使用的 Nacos 配置分组,默认为 DEFAULT_GROUP
         name: # 使用的 Nacos 配置集的 dataId,默认为 spring.application.name
         file-extension: yaml # 使用的 Nacos 配置集的 dataId 的文件拓展名,同时也是 Nacos 配置集的配置格式,默认为 properties

+ 2 - 2
zjugis-module-adm/zjugis-module-adm-biz/src/main/resources/bootstrap-local.yaml

@@ -5,7 +5,7 @@ spring:
     nacos:
       server-addr: 10.10.10.7:8848
       discovery:
-        namespace: 21aff5a9-3379-4c8a-a58c-78326ce994c1 # 命名空间。这里使用 dev 开发环境
+        namespace: 2cf329b5-95c5-4b3b-9112-8e09eb8f67cf # 命名空间。这里使用 dev 开发环境
         metadata:
           version: 1.0.0 # 服务实例的版本号,可用于灰度发布
 
@@ -17,7 +17,7 @@ spring:
       # Nacos Config 配置项,对应 NacosConfigProperties 配置属性类
       config:
         server-addr: 10.10.10.7:8848 # Nacos 服务器地址
-        namespace: 21aff5a9-3379-4c8a-a58c-78326ce994c1 # 命名空间 dev 的ID,不能直接使用 dev 名称。创建命名空间的时候需要指定ID为 dev,这里使用 dev 开发环境
+        namespace: 2cf329b5-95c5-4b3b-9112-8e09eb8f67cf # 命名空间 dev 的ID,不能直接使用 dev 名称。创建命名空间的时候需要指定ID为 dev,这里使用 dev 开发环境
         group: DEFAULT_GROUP # 使用的 Nacos 配置分组,默认为 DEFAULT_GROUP
         name: ${spring.application.name} # 使用的 Nacos 配置集的 dataId,默认为 spring.application.name
         file-extension: yaml # 使用的 Nacos 配置集的 dataId 的文件拓展名,同时也是 Nacos 配置集的配置格式,默认为 properties