z_element_plus/docs/.vitepress/vitepress/components/home/svg/component-svg.vue

<template>
  <svg
    class="component-svg"
    width="160"
    height="120"
    viewBox="0 0 160 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <circle cx="80" cy="60" r="60" fill="var(--component-c-0)" />
    <path
      d="M37 23C37 20.7909 38.7909 19 41 19H101C103.209 19 105 20.7909 105 23V97C105 99.2091 103.209 101 101 101H45C40.5817 101 37 97.4183 37 93V23Z"
      fill="var(--component-c-1)"
    />
    <path
      d="M112.048 91H49.0484C49.8484 95.4 46.715 99.5 45.0484 101H107.548C114.348 100.6 113.382 94.1667 112.048 91Z"
      fill="var(--component-c-2)"
    />
    <path
      d="M121.5 5.5L114.883 19.2063C114.791 19.3981 115.022 19.5824 115.188 19.4494L127 10L121.5 5.5Z"
      fill="#FFACAD"
    />
    <path
      d="M121.68 21.3628L115.49 27.0342C115.145 27.3502 115.385 27.9246 115.852 27.9022L124.153 27.5051C124.496 27.4887 124.721 27.1389 124.593 26.8199L122.482 21.5456C122.352 21.2211 121.938 21.1266 121.68 21.3628Z"
      fill="#FFD6D2"
    />
    <path
      d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V32H37V22Z"
      fill="#0077CE"
    />
    <path
      d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V30H37V22Z"
      fill="#20A0FF"
    />
    <circle cx="44" cy="25" r="2" fill="#0077CE" />
    <circle cx="51" cy="25" r="2" fill="#0077CE" />
    <circle cx="60" cy="25" r="2" fill="#0077CE" />
    <rect x="45" y="38" width="14" height="4" fill="var(--component-c-3)" />
    <rect x="45" y="55" width="14" height="4" fill="var(--component-c-3)" />
    <rect x="45" y="45" width="50" height="4" fill="var(--component-c-4)" />
    <rect x="45" y="62" width="50" height="4" fill="var(--component-c-4)" />
    <rect x="61" y="75" width="20" height="6" rx="3" fill="#20A0FF" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M87 42C85.8954 42 85 42.8954 85 44V69C85 70.1046 85.8954 71 87 71H96.6154L98 75.5H100.5L99.15 71H132C133.105 71 134 70.1046 134 69V44C134 42.8954 133.105 42 132 42H87Z"
      fill="var(--component-c-5)"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M89 42C87.8954 42 87 42.8954 87 44V69C87 70.1046 87.8954 71 89 71H98.6154L100 75.5L104.154 71H134C135.105 71 136 70.1046 136 69V44C136 42.8954 135.105 42 134 42H89Z"
      fill="var(--component-c-6)"
    />
    <path
      d="M103.391 61.7402L94.2305 57.1895V56.4473L103.391 51.3984V53.0879L96.584 56.75V56.7988L103.391 60.0605V61.7402ZM114.943 47.873L107.688 65.5098H105.9L113.156 47.873H114.943ZM126.789 57.1699L117.629 61.7207V60.041L124.445 56.8086V56.7402L117.629 53.0781V51.3887L126.789 56.4277V57.1699Z"
      fill="var(--component-c-7)"
    />
  </svg>
</template>

<style scoped lang="scss">
.component-svg {
  --component-c-0: #eff5fd;
  --component-c-1: white;
  --component-c-2: #d9edfe;
  --component-c-3: var(--component-c-2);
  --component-c-4: var(--component-c-2);
  --component-c-5: #6496dc;
  --component-c-6: #80a8e1;
  --component-c-7: #dff2ff;
}
.dark .component-svg {
  --component-c-0: #272b31;
  --component-c-1: #273751;
  --component-c-2: #394c68;
  --component-c-3: #20a0ff;
  --component-c-4: #384692;
  --component-c-5: #263346;
  --component-c-6: #3a5a88;
  --component-c-7: white;
}
</style>