zhgkpt-datav/components/BorderPanel/index.vue

<template>
  <div class="border-panel" :style="borderPanelStyle">
    <div
      class="border-panel_header"
      :style="{
        backgroundImage: `url(${headerImageBgUrl})`,
      }"
    >
      <linear-text
        :text="title"
        startColor="#95CCFF"
        endColor="#fff"
        :extClass="{
          top: '11px',
          left: '35px',
          textShadow: '0 1px 1px #0057FF',
        }"
      />
      <div class="ext-header"><slot name="ext-header"></slot></div>
    </div>
    <div class="border-panel_content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { headerTitleBgs } from "./data";
import LinearText from "../LinearText";
/**
 * 边框面板
 */
export default {
  name: "BorderPanel",
  components: {
    LinearText,
  },
  props: {
    title: {
      type: String,
      default: "标题",
    },
    width: {
      type: String,
      default: "443px",
    },
    height: {
      type: String,
      default: "200px",
    },
    headerType: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    borderPanelStyle: function () {
      return {
        "--height": this.$props.height,
        "--width": this.$props.width,
        "--header-ops": ["-4px", "0px", "0px"][this.$props.headerType],
      };
    },
    headerImageBgUrl: function () {
      console.log(this.headerType)
      return headerTitleBgs[this.$props.headerType];
    },
  },
};
</script>

<style scoped lang="less">
.border-panel {
  position: relative;
  height: var(--height);
  width: var(--width);
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(
    360deg,
    rgba(0, 133, 255, 0.25) 0%,
    rgba(0, 163, 255, 0) 100%
  );
}

.border-panel_header {
  height: 50px;
  width: var(--width);
  background-image: url("../assets/border-panel_header_1.svg");
  background-repeat: no-repeat;
  background-position: var(--header-ops) 0px;
  display: flex;
  justify-content: space-between;
  .ext-header {
    margin-right: 15px;
    margin-top: 12px;
  }
}

.border-panel::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 1px;
  box-sizing: border-box;
  width: var(--width);
  height: var(--height);
  background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%);
  /* 随便定义颜色 */
  --mask-bg: linear-gradient(red, red);
  --m-o: content-box, padding-box;
  /* mask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域 */
  /* 设置了用作元素蒙版层的图像，默认值为none，值为透明图片，或透明渐变 */
  -webkit-mask-image: var(--mask-bg), var(--mask-bg);
  /* 默认值为border-box，可选值与background-origin相同 */
  -webkit-mask-origin: var(--m-o);
  /* 默认值为border-box，可选值与background-clip相同 */
  -webkit-mask-clip: var(--m-o);
  /* exclude排除，只显示不重合的地方,Firefox支持4个属性 */
  mask-composite: exclude;
  /*只显示下方遮罩，重合的地方不显示*/
  -webkit-mask-composite: destination-out;
  pointer-events: none;
}

.border-panel_content {
  padding: 0px 1px 0px 1px;
}
</style>