web_sh_audit/src/components/common/BottomMenuSvg.vue

<template>
  <div class="test">
    <svg id="svgBox" @click="changeShowBottomMenusStatus()" width="300" height="180" viewBox="0 0 410 314" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <!-- 正常边框渐变定义 -->
      <defs>
        <!-- 内容透明定义 -->
        <linearGradient id="grad1" x1="0%" y1="100%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color: #27ffff; stop-opacity: 0" />
          <stop offset="100%" style="stop-color: #27ffff; stop-opacity: 0.5" />
        </linearGradient>
        <!-- 内容渐变定义 -->
        <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: #27cdff; stop-opacity: 0" />
          <stop offset="100%" style="stop-color: #27cdff; stop-opacity: 0.5" />
        </linearGradient>
        <!-- 第二层中部定义 -->
        <linearGradient id="grad2-2" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: #27cdffaa; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #27cdffaa; stop-opacity: 1" />
        </linearGradient>
        <!-- 左深右浅 -->
        <linearGradient id="grad2-3" x1="100%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: #74ffff; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #0037ff; stop-opacity: 1" />
        </linearGradient>
        <linearGradient id="grad2-4" x1="100%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: #27ffffaa; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #27cdff; stop-opacity: 0" />
        </linearGradient>
        <linearGradient id="grad2-5" x1="100%" y1="100%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: #27ffff; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #27cdff; stop-opacity: 0" />
        </linearGradient>
        <!-- 浅色圆环 -->
        <linearGradient id="grad3" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: #74ffff64; stop-opacity: 0.5" />
          <stop offset="100%" style="stop-color: #74ffff; stop-opacity: 1" />
        </linearGradient>
        <!-- 深色圆环 -->
        <linearGradient id="grad4" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color: #00aaff64; stop-opacity: 0.1" />
          <stop offset="100%" style="stop-color: #00244d; stop-opacity: 1" />
        </linearGradient>
        <!-- 圆盘面渐变颜色 -->
        <linearGradient id="shipGrad1" x1="100%" y1="0%" x2="0%" y2="0%">
          <stop offset="0%" style="stop-color: #5dd8d8; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #0037ff; stop-opacity: 1" />
        </linearGradient>
        <!-- ship内环背景渐变定义 -->
        <radialGradient id="coludFill" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <stop offset="80%" style="stop-color: #00000000; stop-opacity: 0" />
          <stop offset="100%" style="stop-color: #27cdff; stop-opacity: 1" />
        </radialGradient>
      </defs>
      <symbol>
        <!-- 定义组合（底座向上发光圆柱和向下流星） -->
        <g id="Upath1">
          <path d="M 0 0 L 100 0 L 100 50 Q 100,60 50,62 Q 0,60 0,50 L 0 50 z " fill="url(#grad2-4)" />
          <path d="M 38 25 L 62 25 L 62 50 Q 62,53 50,53 Q 38,53 38,50 L 38 50 z " fill="url(#grad2-5)" />
          <path class="svgPath index1" d="M 5 0 L 7 0 L 7 10 L 5 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index2" d="M 15 0 L 17 0 L 17 10 L 15 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index3" d="M 25 0 L 27 0 L 27 10 L 25 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index4" d="M 35 0 L 37 0 L 37 10 L 35 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index5" d="M 45 0 L 47 0 L 47 10 L 45 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index6" d="M 55 0 L 57 0 L 57 10 L 55 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index7" d="M 65 0 L 67 0 L 67 10 L 65 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index8" d="M 40 10 L 42 10 L 42 15 L 40 15 z" fill="url(#grad2-5)" />
          <path class="svgPath index9" d="M 50 10 L 52 10 L 52 15 L 50 15 z" fill="url(#grad2-5)" />
          <path class="svgPath index10" d="M 60 10 L 62 10 L 62 15 L 60 15 z" fill="url(#grad2-5)" />
          <path class="svgPath index11" d="M 75 0 L 77 0 L 77 10 L 75 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index12" d="M 85 0 L 87 0 L 87 10 L 85 10 z" fill="url(#grad2-5)" />
          <path class="svgPath index13" d="M 95 0 L 97 0 L 97 10 L 95 10 z" fill="url(#grad2-5)" />
        </g>
        <g width="22" height="26" x="0" y="0" id="userName">
            <image width="22" height="26" x="0" y="0"
                href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAaCAQAAAAZf2TLAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
                AAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElN
                RQfmDAQHExw2+iMxAAABJElEQVQ4y5XTsUoDQRDG8f8cCQiaVtMICSaNWKoIeQDt7G0Um6TRUrFX
                X0FFQVEI9oLgAwRBzjfQRBA0sfQQIhcYC2O8c/dy61ft7fwYdmc5IRYtUWOBEaDLLYfyGK1KjC6z
                QyayEbIvV1ascxxgpir3P0svsr2NLVu/ywHWGQpWPKXTZucySSmbOJuIMyZ+ScSvJvb5sNIAcxrS
                5cSKj+XTMjq54Mag11KPiHhNV1kj1/9450zOo1X520pHmaUAPOGL/RZu6XfWHCvMkyeLxqohbe6o
                SzDAOs4Rk0NaPlOVNxDQMU4pppygxboEHrCXSqHILni6RMXpdhVdFL2k5DiMB1HffXSeO/03bjrb
                lscmDXqpsEeDje8XnCA/5LeCkI604QvrnkULlWJvSgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0x
                Mi0wNFQwNjoxOToyOCswMTowMLMm2+oAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMTItMDRUMDY6
                MTk6MjgrMDE6MDDCe2NWAAAAAElFTkSuQmCC" />
        </g>
      </symbol>
      <!-- 底部圆饼外环 -->
      <ellipse cx="210" cy="268" rx="180" ry="45" stroke="url(#grad3)" fill="url(#grad1)" style="stroke-width: 4" />
      <!-- 底部圆饼中环 -->
      <ellipse
        class="strokeDashoffset2"
        cx="210"
        cy="268"
        rx="157"
        ry="40"
        stroke="url(#grad3)"
        stroke-dasharray="50,5"
        style="fill: #00000000; stroke-width: 2"
      />
      <!-- 底部圆饼内环 -->
      <ellipse
        class="strokeDashoffset2"
        cx="210"
        cy="258"
        rx="117"
        ry="30"
        stroke="url(#grad3)"
        stroke-dasharray="5,5"
        style="fill: #00000000; stroke-width: 2"
      />
      <!-- 第二层底部台座 -->
      <ellipse cx="210" cy="250" rx="90.6" ry="22.4" stroke="url(#grad3)" style="fill: #00244d; stroke-width: 10" />
      <!-- 第二层底部外环 -->
      <ellipse cx="210" cy="248" rx="93.6" ry="23.4" stroke="url(#grad4)" fill="url(#shipGrad1)" style="stroke-width: 2" />
      <!-- 第二层底部中环 -->
      <ellipse
        class="strokeDashoffset3"
        cx="210"
        cy="247"
        rx="80"
        ry="20"
        stroke="url(#grad3)"
        style="fill: #00000000; stroke-width: 2"
      />
      <!-- 第二层底部中内环 -->
      <ellipse
        class="strokeDashoffset2"
        cx="210"
        cy="247"
        rx="75"
        ry="18"
        stroke="url(#grad3)"
        style="fill: #00000000; stroke-width: 1"
      />
      <!-- 第二层底部内环 -->
      <ellipse cx="210" cy="246" rx="45" ry="10" stroke="url(#grad3)" fill="url(#grad2-2)" style="stroke-width: 0" />
      <!-- 第二层内环外圆饼 -->
      <ellipse cx="210" cy="246" rx="50" ry="12" stroke="url(#grad3)" fill="url(#grad2-2)" style="stroke-width: 0" />
      <!-- 第二层内环内圆饼 -->
      <ellipse cx="210" cy="246" rx="28" ry="7" stroke="url(#grad3)" fill="url(#grad2-3)" style="stroke-width: 0" />
      <ellipse cx="210" cy="246" rx="25" ry="6" stroke="url(#grad3)" fill="url(#shipGrad1)" style="stroke-width: 0" />
      <ellipse cx="210" cy="246" rx="15" ry="4" stroke="url(#grad3)" fill="url(#grad2-3)" style="stroke-width: 0" />
      <ellipse cx="210" cy="246" rx="12" ry="3" stroke="url(#grad3)" fill="#74ffff" style="stroke-width: 0" />
      <!-- 组合显示（圆盘中部光柱和流星效果） -->
      <use x="160" y="196" width="100" height="50" xlink:href="#Upath1" />
    </svg>
  </div>
</template>

<script>
/**
 * 底部菜单底座组件
 * @author: LiuMengxiang
 * @Date: 2022年11月14-18日
 */
export default {
  name: "BottomMenuSvg",
  components: {},
  data() {
    return {};
  },
  mounted() {},
  props: [],
  methods: {
    // 绑定并抛出用户点击svg事件，实现底部菜单显示隐藏切换。
    changeShowBottomMenusStatus(){
        this.$emit('changeShowBottomMenusStatus');
    }
  },
  watch: {}
};
</script>

<style>
.test {
  display: flex;
  position: relative;
  justify-content: center;
}
#svgBox {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
}
svg .strokeDashoffset2 {
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
  animation: dash 5s linear infinite;
}
svg .strokeDashoffset3 {
  stroke-dasharray: 8;
  stroke-dashoffset: 0;
  animation: dash2 3s linear infinite;
}
svg .svgPath {
  transform: rotate(-90deg);
  offset-path: path("M0 0 L0 40");
  offset-distance: 0%;
  opacity: 0;
}
svg .index1 {
  animation: ball 2.2s linear 0s infinite;
}
svg .index2 {
  animation: ball 0.7s linear 0.3s infinite;
}
svg .index3 {
  animation: ball 1.8s linear 0.9s infinite;
}
svg .index4 {
  animation: ball 2.2s linear 1.1s infinite;
}
svg .index5 {
  animation: ball 2.5s linear 1.7s infinite;
}
svg .index6 {
  animation: ball 2s linear 1.9s infinite;
}
svg .index7 {
  animation: ball 0.4s linear 0.1s infinite;
}
svg .index8 {
  animation: ball 0.5s linear 0.2s infinite;
}
svg .index9 {
  animation: ball 1.4s linear 0.7s infinite;
}
svg .index10 {
  animation: ball 1.6s linear 0.8s infinite;
}
svg .index11 {
  animation: ball 1s linear 0.5s infinite;
}
svg .index12 {
  animation: ball 1.5s linear 0.7s infinite;
}
svg .index13 {
  animation: ball 2s linear 1.3s infinite;
}
@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash2 {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 100;
  }
}
@keyframes ball {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  50% {
    offset-distance: 50%;
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
</style>