<template>
  <div class="box">
    <div class="left"></div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="right"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.box {
  position: relative;
}
.content {
  width: 95%;
  height: 80px;
  margin: auto;
  border: 1.5px solid #0270b6;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-right-radius: 20px;
  border-left: none;
  border-right: none;
  background-image: linear-gradient(
    120deg,
    rgba(7, 47, 70, 0.6) 0%,
    /* 起始色：80% 透明度 */ rgba(6, 20, 37, 0.4) 100% /* 结束色：60% 透明度 */
  );
}

.left {
  width: 50px;
  height: 40px;
  background-color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: linear-gradient(to right, #00a8ff, #003366);
}

.right {
  width: 50px;
  height: 40px;
  background-color: white;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-image: linear-gradient(to left, #00a8ff, #003366);
}
</style>
