mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 18:01:24 +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
140 lines
8.7 KiB
Vue
140 lines
8.7 KiB
Vue
<template>
|
|
<svg
|
|
class="people-svg"
|
|
width="344"
|
|
height="290"
|
|
viewBox="0 0 344 290"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<g clip-path="url(#clip0_11237_126775)">
|
|
<path
|
|
d="M171.535 81.4944C258.413 81.4944 261.727 164.471 256.177 184.452L169.593 230.797C144.616 218.771 93.1652 192.167 87.1709 181.954C79.678 169.189 88.5584 81.4944 171.535 81.4944Z"
|
|
fill="#428BFB"
|
|
/>
|
|
<path
|
|
d="M134.626 170.576C130.464 163.361 131.851 127.006 135.459 113.408C123.804 129.782 126.949 157.626 128.244 170.576C131.759 172.981 137.957 176.349 134.626 170.576Z"
|
|
fill="#2671E5"
|
|
/>
|
|
<path
|
|
d="M212.727 170.576C216.89 163.361 215.502 127.006 211.895 113.408C223.55 129.782 220.405 157.626 219.11 170.576C215.595 172.981 209.397 176.349 212.727 170.576Z"
|
|
fill="#2671E5"
|
|
/>
|
|
<path
|
|
d="M118.058 138.711L123.803 196.94L160.435 208.596H220.378L228.284 138.759C228.507 136.784 226.962 135.054 224.975 135.054H121.372C119.404 135.054 117.865 136.753 118.058 138.711Z"
|
|
fill="var(--people-c-0)"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M134.995 200.325L160.99 208.596H220.933L228.839 138.759C229.062 136.784 227.517 135.054 225.53 135.054H204.665L134.995 200.325Z"
|
|
fill="var(--people-c-1)"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M182.474 173.008C182.474 173.941 182.008 174.116 182.008 174.116C182.008 174.116 173.724 178.899 173.199 179.191C172.908 179.308 172.616 179.308 172.324 179.191C172.324 179.191 163.691 174.174 163.399 173.941C163.224 173.824 163.108 173.591 163.049 173.358C163.049 173.358 163.049 163.441 163.049 162.974C163.049 162.508 163.633 162.216 163.633 162.216L172.266 157.258C172.616 157.083 172.966 157.083 173.316 157.258C173.316 157.258 180.958 161.691 181.774 162.158C182.241 162.391 182.533 162.858 182.474 163.383C182.474 163.324 182.474 172.133 182.474 173.008ZM179.033 163.091C177.283 162.099 173.083 159.649 173.083 159.649C172.849 159.533 172.499 159.533 172.266 159.649L165.499 163.558C165.499 163.558 165.033 163.849 165.033 164.199C165.033 164.549 165.033 172.308 165.033 172.308C165.033 172.483 165.149 172.658 165.266 172.774C165.499 172.949 172.266 176.858 172.266 176.858C172.499 176.974 172.733 176.974 172.966 176.858C173.374 176.624 179.849 172.891 179.849 172.891C179.849 172.891 180.199 172.716 180.199 172.016C180.199 171.783 180.199 171.024 180.199 169.974L172.616 174.583V172.833C172.616 172.366 172.849 171.958 173.199 171.608L179.966 167.524C180.141 167.291 180.258 166.999 180.258 166.649C180.258 165.891 180.258 165.249 180.258 164.841L172.616 169.449V167.583C172.616 167.174 172.791 166.766 173.083 166.533L179.033 163.091Z"
|
|
fill="#409EFF"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M184.633 156.674C184.633 156.558 184.516 156.441 184.399 156.441H182.766V154.749C182.766 154.633 182.649 154.633 182.474 154.633L181.658 154.749C181.541 154.749 181.483 154.808 181.483 154.866V156.441H179.908C179.791 156.441 179.733 156.558 179.674 156.616V157.666H181.541V159.416C181.541 159.533 181.658 159.591 181.833 159.533L182.649 159.416C182.766 159.416 182.824 159.358 182.824 159.299V157.666H184.691V156.674H184.633Z"
|
|
fill="#409EFF"
|
|
/>
|
|
<path
|
|
d="M342.736 261.495C342.736 279.534 266.324 289.802 172.064 289.802C77.8049 289.802 1.39258 280.644 1.39258 261.495C1.39258 242.347 77.8049 233.189 172.064 233.189C266.324 233.189 342.736 241.514 342.736 261.495Z"
|
|
fill="var(--people-c-9)"
|
|
/>
|
|
<path
|
|
d="M157.382 85.9347C145.448 78.4418 140.453 59.5708 139.898 50.9678C140.176 45.4175 141.23 32.6518 143.228 25.9915C145.726 17.666 182.358 19.3311 192.348 21.8288C202.339 24.3264 200.674 33.7619 201.229 50.9678C201.784 68.1737 189.851 81.7719 186.243 85.1021C182.635 88.4323 169.315 93.4276 157.382 85.9347Z"
|
|
fill="var(--people-c-2)"
|
|
/>
|
|
<path
|
|
d="M171.813 106.193C160.157 106.748 156.827 102.03 154.329 97.0352L159.602 80.9393H183.191L186.798 97.5902C185.688 100.273 181.137 105.749 171.813 106.193Z"
|
|
fill="var(--people-c-2)"
|
|
/>
|
|
<path
|
|
d="M205.947 62.9009C207.612 58.7382 204.282 53.1879 200.951 53.1879C198.731 58.0906 194.902 68.0071 197.344 68.4512C200.396 69.0062 204.282 67.0636 205.947 62.9009Z"
|
|
fill="var(--people-c-2)"
|
|
/>
|
|
<path
|
|
d="M137.551 62.5564C136.206 58.2795 139.947 52.9973 143.268 53.2495C145.11 58.3064 148.178 68.4844 145.709 68.7422C142.623 69.0645 138.896 66.8332 137.551 62.5564Z"
|
|
fill="var(--people-c-2)"
|
|
/>
|
|
<path
|
|
d="M187.353 3.51273C178.473 -0.927495 170.98 3.79024 163.487 8.78549C159.139 8.32297 149.001 9.39603 143.229 17.3885C137.456 25.3809 137.591 46.7074 139.793 54.7659C140.59 54.1128 141.653 53.4747 143.218 53.412C143.218 52.8569 142.396 39.3122 143.229 36.8145C144.061 34.3169 144.339 29.5991 149.611 28.4891C154.884 27.379 160.712 32.3743 172.645 32.3743C184.578 32.3743 186.521 28.7666 193.181 28.2116C196.511 28.7666 199.009 30.1542 200.397 35.1494C201.507 39.1456 200.952 49.2102 200.674 53.4654C201.249 53.4654 202.727 53.2141 204.116 54.8013C204.154 54.6596 204.173 54.5544 204.195 54.4698C206.646 45.2823 203.937 25.8178 201.229 18.7761C199.009 13.0038 194.199 11.0056 192.071 10.7281C193.274 10.0806 191.794 5.73284 187.353 3.51273Z"
|
|
fill="var(--people-c-3)"
|
|
/>
|
|
<path
|
|
d="M102.711 260.213C109.094 260.491 112.702 261.878 121.305 261.046L127.133 237.18L108.262 235.792C106.597 237.365 102.045 240.232 97.1615 240.232C91.0562 240.232 81.0657 242.73 73.5728 245.505C64.922 248.709 58.3094 257.161 57.4769 260.213C57.1993 261.878 59.142 264.654 64.4148 263.266C69.6876 261.878 96.329 259.936 102.711 260.213Z"
|
|
fill="var(--people-c-4)"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
clip-rule="evenodd"
|
|
d="M108.54 260.748C106.714 260.529 104.871 260.307 102.71 260.213C96.3277 259.936 69.6863 261.879 64.4135 263.266C64.35 263.283 64.2871 263.299 64.2246 263.314C65.514 260.776 70.1256 255.071 76.9006 251.333C84.9485 246.893 94.939 245.228 101.877 244.673C108.815 244.118 111.312 242.453 116.03 238.567L123.465 252.197L121.304 261.046C115.613 261.597 112.108 261.176 108.54 260.748Z"
|
|
fill="#3678D8"
|
|
/>
|
|
<path
|
|
d="M287.536 261.324C287.023 263.891 285.039 264.654 280.876 263.266L261.172 258.548L227.593 260.491L221.488 250.223L226.483 238.567C229.998 237.827 237.583 237.18 239.804 237.18C241.191 238.567 245.354 240.494 252.292 240.788C271.995 241.62 282.264 251.888 284.484 254.386C286.704 256.883 288.091 258.548 287.536 261.324Z"
|
|
fill="var(--people-c-8)"
|
|
/>
|
|
<path
|
|
d="M245.631 244.95C237.306 244.118 237.583 242.175 229.258 242.453C227.778 248.373 225.428 260.324 227.87 260.768C230.923 261.324 240.639 260.676 252.847 261.046C262.005 261.324 268.388 261.879 280.876 263.266C276.158 251.333 253.957 245.783 245.631 244.95Z"
|
|
fill="#3678D8"
|
|
/>
|
|
<path
|
|
d="M174.866 214.146C162.378 210.261 147.392 201.38 127.966 192.777C125.746 191.785 109.373 184.729 96.8841 182.787C84.3959 180.844 67.4675 185.84 66.3575 201.103C65.2474 216.366 92.999 233.85 116.311 241.897C139.622 249.945 193.46 257.161 206.225 259.103C218.991 261.046 227.316 263.821 232.034 259.936C236.752 256.051 236.752 246.06 232.034 241.065C227.316 236.07 187.354 218.031 174.866 214.146Z"
|
|
fill="var(--people-c-5)"
|
|
/>
|
|
<path
|
|
d="M174.31 220.806C161.822 212.666 132.405 196.94 109.649 193.055C126.522 197.939 167.372 220.251 168.76 224.692L174.31 220.806Z"
|
|
fill="var(--people-c-6)"
|
|
/>
|
|
<path
|
|
d="M280.876 197.773C279.848 193.777 273.105 181.122 251.459 182.787C230.646 185.562 210.477 197.956 188.463 207.763C163.209 218.031 139.066 226.357 126.855 233.85C114.48 241.444 109.649 245.228 112.147 254.386C116.587 262.434 114.367 264.099 142.396 259.936C176.818 254.824 223.863 247.697 252.847 232.462C274.493 221.084 283.373 207.486 280.876 197.773Z"
|
|
fill="var(--people-c-7)"
|
|
/>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_11237_126775">
|
|
<rect
|
|
width="343"
|
|
height="289"
|
|
fill="white"
|
|
transform="translate(0.491211 0.941406)"
|
|
/>
|
|
</clipPath>
|
|
</defs>
|
|
</svg>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.people-svg {
|
|
--people-c-0: #ece6e6;
|
|
--people-c-1: #ddd7d7;
|
|
--people-c-2: #fbbda4;
|
|
--people-c-3: #190e02;
|
|
--people-c-4: #70a2eb;
|
|
--people-c-5: #3f3c7e;
|
|
--people-c-6: #504d84;
|
|
--people-c-7: #504d84;
|
|
--people-c-8: #70a2eb;
|
|
--people-c-9: #f1f7ff;
|
|
}
|
|
|
|
.dark .people-svg {
|
|
--people-c-0: #2e2929;
|
|
--people-c-1: #3a3838;
|
|
--people-c-2: #c19a8b;
|
|
--people-c-3: #252938;
|
|
--people-c-4: #42597a;
|
|
--people-c-5: #222045;
|
|
--people-c-6: #27235e;
|
|
--people-c-7: #29274f;
|
|
--people-c-8: #42597a;
|
|
--people-c-9: #1e1f1f;
|
|
}
|
|
</style>
|