样式修改

src/views/information/spot-contract/components/detail/index.vue

@@ -13,6 +13,15 @@
                 :loading="loading"
                 @click="submit">关闭</a-button>
     </template>
+     <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="1" tab="合同详情"></a-tab-pane>
+      <a-tab-pane key="2" tab="点价记录"></a-tab-pane>
+      <a-tab-pane key="3" tab="交收记录"></a-tab-pane>
+      <a-tab-pane key="4" tab="款项记录"></a-tab-pane>
+      <a-tab-pane key="5" tab="发票记录"></a-tab-pane>
+      <a-tab-pane key="6" tab="入库记录"></a-tab-pane>
+      <a-tab-pane key="7" tab="变更记录"></a-tab-pane>
+    </a-tabs>
     <a-form class="inlineForm"
             :form="form"
             @submit="handleSearch">
@@ -220,6 +229,7 @@ export default defineComponent({
             maskClosableFlag,
             getContractTypeName,
             getBizTypeName,
+            activeKey: ref('1'),
         };
     },
 });
@@ -227,6 +237,38 @@ export default defineComponent({
 
 <style lang="less">
 .custom-detail {
+  .ant-modal-body {
+    padding-top: 0;
+    .ant-tabs {
+      .ant-tabs-bar {
+        margin-bottom: 0;
+        border-bottom: 0;
+      }
+      .ant-tabs-nav-container {
+        .ant-tabs-nav-wrap {
+          .ant-tabs-nav {
+            .ant-tabs-tab {
+              width: 70px;
+              margin-right: 43px;
+              text-align: center;
+              font-size: 16px;
+              color: #88A0AE;
+              padding: 0;
+              line-height: 45px; 
+            }
+            .ant-tabs-tab-active.ant-tabs-tab {
+              color: #3A87F7;
+            }
+            .ant-tabs-ink-bar {
+              width: 70px !important;
+              background: #3A87F7;
+              .rounded-corners(1px);
+            }
+          }
+        }
+      }
+    }
+  }
 }
 .ant-form.inlineForm {
     margin-top: 20px;