<script></script>

<template>

      <!-- 渐变装饰层 -->
    <div class="gradient-overlay"></div>

</template>

<style scoped>
  /* 渐变装饰层 */
  .gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* 位于地图之上 */
    pointer-events: none;
  
    /* 边框宽度控制变量 */
    --border-width: 250px;
  
    /* 背景由四个线性渐变组合而成 */
    background:
      /* 顶部渐变（下到上） */
      linear-gradient(to bottom, rgba(0, 60, 120, 0.9) 0%, transparent var(--border-width)),
      /* 底部渐变（上到下） */
      linear-gradient(to top, rgba(0, 60, 120, 0.9) 0%, transparent var(--border-width)),
      /* 左侧渐变（右到左） */
      linear-gradient(to right, rgba(0, 60, 120, 0.9) 0%, transparent var(--border-width)),
      /* 右侧渐变（左到右） */
      linear-gradient(to left, rgba(0, 60, 120, 0.9) 0%, transparent var(--border-width));
  
    /* 背景定位和尺寸 */
    background-position:
      top,
      bottom,
      left,
      right;
    background-repeat: no-repeat;
    background-size:
      100% var(--border-width),
      /* 顶部 */
      100% var(--border-width),
      /* 底部 */
      var(--border-width) 100%,
      /* 左侧 */
      var(--border-width) 100%;
    /* 右侧 */
  }
</style>