<template>
  <div class="moni-gradient">
    <div class="main-box">
      <div v-if="center" class="center-top"></div>
      <div class="gradient-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  // 正中间的样式
  center: {
    type: Boolean,
    default: false
  },
});
</script>

<style lang="scss" scoped>
.moni-gradient {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.main-box {
  width: 100%;
  height: 100%;
  padding: w(10);
  background-color: rgba(0, 138, 255, 0.08);
  backdrop-filter: blur(4px);
  background: linear-gradient(135deg, transparent w(6), rgba(0, 138, 255, 0.08) 0) top left,
    linear-gradient(-135deg, transparent w(6), rgba(0, 138, 255, 0.08) 0) top right,
    linear-gradient(-45deg, transparent w(6), rgba(0, 138, 255, 0.08) 0) bottom right,
    linear-gradient(45deg, transparent w(6), rgba(0, 138, 255, 0.08) 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  position: relative;
  .gradient-content{
    width: calc(100% - w(20));
    height: calc(100% - h(20));
    position: absolute;
  }
  .center-top{
    width: w(200);
    height: h(16);
    box-shadow: 0px 0px w(40) 0px rgba(0, 145, 255, 0.4);
    background: 
      linear-gradient(-45deg, transparent w(6), rgb(5, 33, 64) 0) bottom right,
      linear-gradient(45deg, transparent w(6), rgb(5, 33, 64) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - w(100));
    top: -calc(h(7));
    z-index: 1;
  }
  .center-top::after{
    width: 80%;
    height: h(6);
    content: "";
    display: block;
    background: 
      linear-gradient(-45deg, transparent w(3), rgb(0, 253, 255) 0) bottom right,
      linear-gradient(45deg, transparent w(3), rgb(0, 253, 255) 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    left: calc(50% - w(80));
    top: h(5);
  }
}
.main-box::after {
  // z-index: 1013;
  width: calc(100% - w(2));
  height: calc(100% - w(2));
  content: "";
  display: block;
  box-shadow: inset 0px 0px w(40) 0px rgba(0, 145, 255, 0.6);
  mask: linear-gradient(135deg, transparent w(6), rgba(4, 169, 229, 1) 0) top left,
    linear-gradient(-135deg, transparent w(6), rgba(4, 169, 229, 1) 0) top right,
    linear-gradient(-45deg, transparent w(6), rgba(4, 169, 229, 1) 0) bottom right,
    linear-gradient(45deg, transparent w(6), rgba(4, 169, 229, 1) 0) bottom left;
  -webkit-mask: linear-gradient(135deg, transparent w(6), rgba(4, 169, 229, 1) 0) top left,
    linear-gradient(-135deg, transparent w(6), rgba(4, 169, 229, 1) 0) top right,
    linear-gradient(-45deg, transparent w(6), rgba(4, 169, 229, 1) 0) bottom right,
    linear-gradient(45deg, transparent w(6), rgba(4, 169, 229, 1) 0) bottom left;
  mask-size: 55% 55%;
  -webkit-mask-size: 55% 55%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  position: absolute;
  left: w(1);
  top: h(1);
}
</style>
