zhgkpt-datav/components/BorderPanel/index.vue

<template >
  <div class="border-panel" :style="borderPanelStyle">
    <div class="border-panel_header" :style="{
      backgroundImage: `url(${headerImageBgUrl})`
    }" >
      <div class="title" :data-text="title">{{title}}</div>
    </div>
    <div class="border-panel_content">
      <slot></slot>
    </div>
  </div>
</template>

<script >
import { headerTitleBgs } from './data'
/**
 * 边框面板
 */
export default {
  name: "BorderPanel",
  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'][this.$props.headerType]
      }
    },
    headerImageBgUrl: function() {
      return headerTitleBgs[this.$props.headerType]
    }
  }
}
</script>


<style scoped>
.border-panel {
  position: relative;
  height: var(--height);
  width: var(--width);
  box-sizing: border-box;
  /* background: linear-gradient(360deg, #0c5a87 0%, rgba(0, 163, 255, 0) 100%); */
  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;
}

.border-panel_header .title {
  position: relative;
  color: #95CCFF;
  font-size: 24px;
  line-height: 24px;
  top: 11px;
  left: 35px;
  text-shadow: 0 1px 1px #0057FF;
}
.border-panel_header .title::after {
  content: attr(data-text);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  color: #fff;
  -webkit-mask: linear-gradient(180deg, #95CCFF, transparent);
}

.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;
}

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