lg_frontend/components/smallCommon/ModuleContent2.vue

<template>
  <div class="Content " :style="curStyle">
    <div class="content-header" :class="{ border }"></div>
    <div class="content-body" :class="{ border }"></div>
    <div class="content-box" :style="{padding, ...bgStyle}" :class="{ bg: isBg, bgStr, bgColor }">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import {getSize} from "@/utils/tools";
import checkTypes from "@/utils/checkTypes";
  export default {
    name: 'ModuleContent2',
    components: {},
    mixins: [],
    inject: [],
    provide() {
      return {
        Content: this
      }
    },
    props: {
      height: {
        type: [Number, String],
        default: 'auto'
      },
      scroll: {
        type: Boolean,
        default: true
      },
      bg: {
        type: [Boolean, String, Object],
        default: false
      },
      bgStr: {
        type: [Boolean, String, Object],
        default: false
      },
      bgColor: {
        type: [Boolean, String, Object],
        default: false
      },
      padding: {
        type: String,
        default: ''
      },
     unShowBackground: {
        type: Boolean,
        default: true
      },
      border: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {
      isBg () {
        if (checkTypes.isString(this.bg)) {
          return false
        }
        return this.bg
      },
      bgStyle () {
        if (checkTypes.isString(this.bg)) {
          return {
            backgroundSize: '100% 100%',
            border: '1px solid rgba(0, 64, 152, 1)'
          }
        }
        if (checkTypes.isObject(this.bg)) {
          return {
            ...this.bg,
            border: '1px solid rgba(0, 64, 152, 1)'
          }
        }
        return {}
      },
      curStyle () {
        if (this.height === 'auto') {
          return {
            flex: 1
          }
        }
        return {
          height: getSize(this.height)
        }
      }
    },
    watch: {},
    created() {
    },
    beforeDestroy() {
    },
    mounted() {
    },
    methods: {},
  }
</script>

<style scoped lang="less">
@import "../../assets/styles/mixin";
  .Content {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    pointer-events: auto;
    height: 100%;

    .content-border {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      &.border {
        border: 2px solid rgba(42, 207, 255, 1);
      }
    }


    .content-header {
      &.border {

        &::before {
          content: '';
          position: absolute;
          width: 15px;
          height: 15px;
          top: 0px;
          left: 0px;
          border-top: 2px solid rgba(42, 207, 255, 1);
          border-left: 2px solid rgba(42, 207, 255, 1);
          z-index: 2;
          pointer-events: none;
        }
        &::after {
          content: '';
          position: absolute;
          width: 15px;
          height: 15px;
          top:  0px;
          right:  0px;
          border-top: 2px solid rgba(42, 207, 255, 1);
          border-right: 2px solid rgba(42, 207, 255, 1);
          z-index: 2;
          pointer-events: none;
        }
      }
    }

    .content-body {
      &.border {
        &::before {
          content: '';
          position: absolute;
          width: 15px;
          height: 15px;
          bottom:  0px;
          left:  0px;
          border-bottom: 2px solid rgba(42, 207, 255, 1);
          border-left: 2px solid rgba(42, 207, 255, 1);
          z-index: 2;
          pointer-events: none;
        }
        &::after {
          content: '';
          position: absolute;
          width: 15px;
          height: 15px;
          bottom:  0px;
          right:  0px;
          border-bottom: 2px solid rgba(42, 207, 255, 1);
          border-right: 2px solid rgba(42, 207, 255, 1);
          z-index: 2;
          pointer-events: none;
        }
      }
    }
    .content-box {
      height: 100%;
      .clear-fix;
      position: relative;
      padding: 20px;
      box-sizing: border-box;
      &.bg {
        border: 1px solid rgba(0, 64, 152, 1);
        &.bgStr {
          background: url("~/assets/images/new/矩形 17.png") no-repeat;
          background-size: 100% 100%;
        }
        &.bgColor {
          background: linear-gradient(90deg, rgba(0, 107, 207, 0.08) 0%, rgba(0, 107, 207, 0.4) 52.25%, rgba(0, 128, 247, 0.08) 100%);
        }

      }


    }
  }
</style>