mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
49c7ef2633
* 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
56 lines
2.3 KiB
Vue
56 lines
2.3 KiB
Vue
<template>
|
|
<svg
|
|
class="right-layer"
|
|
width="474"
|
|
height="328"
|
|
viewBox="0 0 474 328"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M25.1434 17.0806C22.6911 17.0806 20.7031 19.0686 20.7031 21.5209V285.714C20.7031 288.167 22.6911 290.155 25.1434 290.155H155.576L168.619 302.92L181.107 290.155H448.076C450.529 290.155 452.517 288.167 452.517 285.714V21.5209C452.517 19.0686 450.529 17.0806 448.076 17.0806H25.1434Z"
|
|
fill="var(--rl-c-0)"
|
|
/>
|
|
<path
|
|
d="M203.307 211.895H143.364C131.409 211.895 121.718 221.745 121.718 233.895V233.895C121.718 246.046 131.409 255.895 143.364 255.895H203.307C215.261 255.895 224.953 246.046 224.953 233.895V233.895C224.953 221.745 215.261 211.895 203.307 211.895Z"
|
|
fill="var(--rl-c-1)"
|
|
/>
|
|
<path
|
|
d="M329.299 211.895H269.356C257.401 211.895 247.71 221.745 247.71 233.895V233.895C247.71 246.046 257.401 255.895 269.356 255.895H329.299C341.254 255.895 350.945 246.046 350.945 233.895V233.895C350.945 221.745 341.254 211.895 329.299 211.895Z"
|
|
fill="#3F85ED"
|
|
/>
|
|
<path
|
|
d="M409.223 108.105H63.9949C61.5426 108.105 59.5547 110.093 59.5547 112.546V125.311C59.5547 127.764 61.5426 129.752 63.9949 129.752H409.223C411.676 129.752 413.664 127.764 413.664 125.311V112.546C413.664 110.093 411.676 108.105 409.223 108.105Z"
|
|
fill="var(--rl-c-1)"
|
|
/>
|
|
<path
|
|
d="M353.166 149.177H120.054C117.601 149.177 115.613 151.165 115.613 153.618V166.383C115.613 168.836 117.601 170.823 120.054 170.823H353.166C355.618 170.823 357.606 168.836 357.606 166.383V153.618C357.606 151.165 355.618 149.177 353.166 149.177Z"
|
|
fill="var(--rl-c-1)"
|
|
/>
|
|
<path
|
|
d="M318.754 49.8273H156.685C154.233 49.8273 152.245 51.8034 152.245 54.2411V77.4135C152.245 79.8511 154.233 81.8273 156.685 81.8273H318.754C321.206 81.8273 323.194 79.8511 323.194 77.4135V54.2411C323.194 51.8034 321.206 49.8273 318.754 49.8273Z"
|
|
fill="#91BEFF"
|
|
/>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.right-layer {
|
|
--rl-c-0: white;
|
|
--rl-c-1: #e4efff;
|
|
|
|
filter: drop-shadow(0px 0px 6px rgba(10, 34, 59, 0.04))
|
|
drop-shadow(0px 6px 20px rgba(10, 34, 59, 0.08));
|
|
}
|
|
|
|
.dark .right-layer {
|
|
--rl-c-0: #1e2835;
|
|
--rl-c-1: #444f5d;
|
|
|
|
filter: drop-shadow(0px 0px 6px rgba(6, 15, 26, 0.24))
|
|
drop-shadow(0px 6px 20px rgba(6, 15, 26, 0.48));
|
|
}
|
|
</style>
|