element-plus/docs/.vitepress/vitepress/components/home/svg/left-layer-svg.vue
云游君 49c7ef2633
feat(docs): use home svg layers for dark (#7408)
* feat(docs): use home svg layers for dark

* fix: people leg color & shadow color

* fix: add shadow for right layer

* fix: dot position in screen
2022-05-01 14:30:14 +08:00

52 lines
1.8 KiB
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>