diantou/src_product/iam/audit/riskLibrary/audit-top-banner.vue

<template>
  <a-layout ref="formLayout" :class="$style.page">
    <a-layout-header :class="$style.header">
      <div>
        <span>
          <div :class="$style.titlepoint"></div>
          <span :class="['toptitle', $style.toptitle]">{{ titleName }}</span>
        </span>

        <a-button type="default" :class="$style.closeBtn" @click="close">关闭</a-button>
        <slot name="afterbtn"></slot>
      </div>
    </a-layout-header>
    <a-layout style="padding:20px">
      <a-layout
        style="height: 100%;padding:20px;overflow-y: auto;background: #fff"
        class="sd-has-table"
      >
        <div :class="$style.formDiv"> <slot></slot> </div>
      </a-layout>
    </a-layout>
  </a-layout>
</template>

<script>
import components from './_import-components/audit-top-banner-import'

export default {
  name: 'AuditTopBanner',
  metaInfo: {
    title: 'AuditTopBanner',
  },
  components,
  data() {
    return { titleName: '' }
  },
  mounted() {
    this.initTitle()
  },
  methods: {
    close(flag) {
      window.close()
    },
    // initTitle
    // 获取父节点 metaInfo.title
    initTitle() {
      const { title } = this.$parent.$options?.metaInfo || { title: '标题' }
      this.titleName = title || '标题'
    },
  },
}
</script>

<style module lang="scss">
@import '@/webflow/sd-flow-form.scss';
.toptitle {
  position: fixed;
  top: 9px;
  left: 40px;
  font-size: 22px;
  font-weight: bold;
  color: #404040;
}
.formDiv {
  // margin: -8px 22px 22px 22px;

  :global(.buttons_sd-detail-form_common) {
    :global(.ant-form-item-control-wrapper) {
      padding-top: 4%;
      padding-left: 24%;
    }
  }

  .tr_border {
    box-sizing: border-box;
    border-right: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
  }

  :global(.title_sd-detail-form_common) {
    font-size: 1.5em;
    text-align: center;
  }

  :global(.buttons_sd-detail-form_common) {
    display: none;
  }
}

.close-btn,
.submitBtn,
.save-btn,
.rollbackBtn,
.publishBtn {
  top: 8px;
  float: right;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
}

.close-btn {
  margin-right: 0;
}

// .save-btn {
//   right: 80px;
// }

// .submitBtn {
//   right: 145px;
// }

// .rollbackBtn {
//   right: 210px;
// }

.page {
  height: 100%;

  :global(.sd-frame-main) {
    height: 100%;
    padding: 10px;
    overflow: auto;
  }
}

.header {
  height: 30px;
  padding: 0;
  line-height: 30px;
  // background: linear-gradient(to right, #3f9bff, #0e7df6);
  // background-image: linear-gradient(90deg, #1890ff 0%, #0162eb 100%);
  background: transparent;
  .header-title {
    display: inline-block;
    width: 256px;
    height: 100%;
    background: url('~@custom/images/logo.png') no-repeat center;
  }
  .titlepoint {
    position: fixed;
    top: 12px;
    left: 20px;
    width: 8px;
    height: 27px;
    background: #1890ff;
    border-radius: 8px;
  }
}

.header > div:last-child {
  width: calc(100% - 20px);
}
</style>