<template>
  <div class="panel">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
.panel {
  position: relative;
  width: 460px;
  height: 100%;
  background-color: rgba(29, 66, 110, 0.6);
  padding: 8px;
  box-sizing: border-box;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:  2px;
    background: linear-gradient(270deg, rgba(27, 97, 162, 1) 0%, rgba(62, 239, 239, 1) 47%, rgba(27, 97, 162, 1) 96%);
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height:  2px;
    background: linear-gradient(270deg, rgba(27, 97, 162, 1) 0%, rgba(62, 239, 239, 1) 47%, rgba(27, 97, 162, 1) 96%);
  }
}
</style>