<template>
  <div class="go-small-border">
    <div class="border-content">
      <div class="svg-content">
        <img src="./assets/title.svg" class="svg" />
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>

  </div>
</template>
<script lang="ts">export default { name: "SmallBorder" }</script>
<style lang="scss" scoped>
$border-radius: 10px;
$border-width: 2px;
$bg-color-start: rgba(14, 18, 27, 1);
$bg-color-end: rgba(14, 18, 27, 0.6);
$border-gradient-start: rgba(128, 128, 128, 0.3);
$border-gradient-end: rgba(128, 128, 128, 0);

@include go(small-border) {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  & .border-content {

    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: $border-radius;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(to top, $bg-color-start, $bg-color-end);


    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: $border-radius;
      padding: $border-width;
      background: linear-gradient(to top, $border-gradient-start, $border-gradient-end);
      // 实现边框遮罩效果，只显示边框区域
      -webkit-mask:
        linear-gradient(#fff, #fff) content-box,
        linear-gradient(#fff, #fff);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#fff, #fff) content-box,
        linear-gradient(#fff, #fff);
      mask-composite: exclude;
      pointer-events: none; // 确保点击能穿透到下层元素

    }
  }

  & .svg-content {
    // z-index: 2;
    width: 100%;
    height: 12%;
    // background-color: antiquewhite;
  }
}
</style>
