z_element_plus/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue

<template>
  <svg
    class="left-layer-svg"
    width="262"
    height="173"
    viewBox="0 0 262 173"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clip-path="url(#clip0_11237_126796)">
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M5.66289 1.92664C3.21061 1.92664 1.22266 3.9146 1.22266 6.36687V155.114C1.22266 157.567 3.21061 159.555 5.66289 159.555H173.559L186.602 172.32L199.09 159.555H256.536C258.988 159.555 260.976 157.567 260.976 155.114V6.36688C260.976 3.9146 258.988 1.92664 256.536 1.92664H5.66289Z"
        fill="var(--ll-c-0)"
      />
      <path
        d="M80.8689 23.0177H38.1317C32.1543 23.0177 27.3086 27.8633 27.3086 33.8407C27.3086 39.8182 32.1543 44.6638 38.1317 44.6638H80.8689C86.8463 44.6638 91.692 39.8182 91.692 33.8407C91.692 27.8633 86.8463 23.0177 80.8689 23.0177Z"
        fill="#C7DCFB"
      />
      <path
        d="M230.449 64.0898H31.7488C29.2966 64.0898 27.3086 66.0778 27.3086 68.5301V81.2957C27.3086 83.748 29.2966 85.7359 31.7488 85.7359H230.449C232.902 85.7359 234.89 83.748 234.89 81.2957V68.5301C234.89 66.0778 232.902 64.0898 230.449 64.0898Z"
        fill="#A2C5F9"
      />
      <path
        d="M230.449 103.497H31.7488C29.2966 103.497 27.3086 105.485 27.3086 107.938V120.703C27.3086 123.156 29.2966 125.144 31.7488 125.144H230.449C232.902 125.144 234.89 123.156 234.89 120.703V107.938C234.89 105.485 232.902 103.497 230.449 103.497Z"
        fill="#A2C5F9"
      />
    </g>
    <defs>
      <clipPath id="clip0_11237_126796">
        <rect
          width="261"
          height="172"
          fill="white"
          transform="translate(0.491211 0.941406)"
        />
      </clipPath>
    </defs>
  </svg>
</template>

<style scoped>
.left-layer-svg {
  --ll-c-0: #5c97ee;
}

.dark .left-layer-svg {
  --ll-c-0: #4372b6;
}
</style>