data-room/data-room-ui/packages/RemoteComponents/innerComponents/card/index.vue

<template>
  <div
    :class="`bs-card`"
    style="width: 100%;height: 100%;position: relative;"
  >
    <div
      :style="{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        boxSizing: 'border-box',
        backgroundColor: customize.backgroundColor,
        border:`${customize.border}px` + ' ' + customize.borderStyle + ' ' + customize.borderColor,
      }"
    >
      <header
        :style="{
          color: customize.headerColor,
          padding: '8px 0',
          lineHeight: '16px',
          borderBottom: `${customize.titleBottomLineWidth}px solid ${customize.titleBottomLineColor}`,
          fontSize: '16px',
          boxSizing: 'border-box',
          display: 'flex',
          justifyContent: 'space-between',
        }"
      >
        <span
          :style="{

            display: 'inline-block',
            borderLeft: `${customize.titleLineWidth}px solid ${customize.titleLineColor}`,
            paddingLeft: customize.titlePaddingLeft+'px'
          }"
        >
          {{ config.title }}
        </span>
      </header>
      <div
        :style="{
          flex: 1,
          position: 'relative'
        }"
      />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  components: {},
  props: {
    // 卡片的属性
    config: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      customClass: {}
    }
  },
  mounted () {
  },
  watch: {},
  computed: {
    customize () {
      return this.config.option.customize
    }
  },
  methods: { }
}
</script>

<style lang="scss" scoped>

</style>