<template>
  <div class="flowLine">
   <svg width="1919" height="58" viewBox="0 0 1919 58" fill="none" xmlns="http://www.w3.org/2000/svg">
        <!-- 背景路径 - 静态 -->
        <path class="path-bg" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="rgba(0, 114, 255, 0.2)" stroke-width="4"/>
        
        <!-- 动画路径 - 带描边效果 -->
        <path class="path-animated" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="url(#paint0_linear_2539_19618)" stroke-width="4"/>
        
        <!-- 主发光点 -->
        <circle class="glow-dot" r="6" fill="url(#radialGradient)">
          <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
            <mpath href="#motionPath" />
          </animateMotion>
          <animate attributeName="r" values="5;7;5" dur="2s" repeatCount="indefinite" />
        </circle>
        
        <!-- 次要发光点 -->
        <circle class="glow-dot secondary" r="4" fill="url(#radialGradient2)">
          <animateMotion dur="6s" repeatCount="indefinite" rotate="auto" begin="1s">
            <mpath href="#motionPath" />
          </animateMotion>
          <animate attributeName="r" values="3;5;3" dur="1.5s" repeatCount="indefinite" />
        </circle>
        
        <!-- 用于动画的隐藏路径 -->
        <path id="motionPath" d="M0.5 2H700.5L711.5 16.5H740.5L778 56H1138L1175 16.5H1204L1213 2H1918.5" stroke="none"/>
        
        <defs>
          <linearGradient id="paint0_linear_2539_19618" x1="852.344" y1="1.29965" x2="853.359" y2="67.7414" gradientUnits="userSpaceOnUse">
            <stop stop-color="#0072FF"/>
            <stop offset="0.54596" stop-color="#00FFFF"/>
            <stop offset="1" stop-color="#0072FF"/>
          </linearGradient>
          
          <radialGradient id="radialGradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(10)">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="1"/>
            <stop offset="40%" stop-color="#00FFFF" stop-opacity="1"/>
            <stop offset="70%" stop-color="#0072FF" stop-opacity="0.8"/>
            <stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
          </radialGradient>
          
          <radialGradient id="radialGradient2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) scale(8)">
            <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0.9"/>
            <stop offset="50%" stop-color="#00FFFF" stop-opacity="0.8"/>
            <stop offset="100%" stop-color="#0072FF" stop-opacity="0"/>
          </radialGradient>
          
          <!-- 增强的滤镜效果 -->
          <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feComposite in="SourceGraphic" in2="blur" operator="over"/>
            <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0.5   0 0 0 0 1   0 0 0 1 0" result="blue-glow"/>
            <feBlend in="SourceGraphic" in2="blue-glow" mode="screen"/>
          </filter>
        </defs>
    </svg>
  </div>
</template>

<script setup>
</script>
<style scoped>
.flowLine {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 10px;
  pointer-events: none;
  pointer-events: none;
}

.zdy_line_svg {
  width: 100%;
  height: 100%;
}

/* 描边动画效果 */
.path-animated {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: dash 8s cubic-bezier(0.4, 0, 0.2, 1) forwards infinite;
  filter: url(#glow);
  will-change: stroke-dashoffset;
}

.glow-dot {
  filter: url(#glow);
  will-change: transform;
}

.glow-dot.secondary {
  opacity: 0.7;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 3000;
    opacity: 0.3;
  }
  30% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  70% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -3000;
    opacity: 0.3;
  }
}
</style>
