test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-14 01:11:25 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
6f9d55471b
element-plus/docs/.vitepress/vitepress/components/home/svg/screen-svg.vue

147 lines
6.1 KiB
Vue
Raw Normal View History

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
<template>
<svg
class="screen-svg"
width="1163"
height="728"
viewBox="0 0 1163 728"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1152 0H8C3.58172 0 0 3.58172 0 8V720C0 724.418 3.58173 728 8 728H1152C1156.42 728 1160 724.418 1160 720V8C1160 3.58172 1156.42 0 1152 0Z"
fill="var(--screen-c-0)"
/>
<path
d="M1152 0H8C3.58172 0 0 3.58172 0 8V64H1160V8C1160 3.58172 1156.42 0 1152 0Z"
fill="#3F85ED"
/>
<path
d="M56 40C60.4183 40 64 36.4183 64 32C64 27.5817 60.4183 24 56 24C51.5817 24 48 27.5817 48 32C48 36.4183 51.5817 40 56 40Z"
fill="#FD873B"
/>
<path
d="M88 40C92.4183 40 96 36.4183 96 32C96 27.5817 92.4183 24 88 24C83.5817 24 80 27.5817 80 32C80 36.4183 83.5817 40 88 40Z"
fill="#FFCD8A"
/>
<path
d="M120 40C124.418 40 128 36.4183 128 32C128 27.5817 124.418 24 120 24C115.582 24 112 27.5817 112 32C112 36.4183 115.582 40 120 40Z"
fill="#91DD9D"
/>
<path
d="M503.394 16H200.606C191.435 16 184 23.1634 184 32C184 40.8366 191.435 48 200.606 48H503.394C512.565 48 520 40.8366 520 32C520 23.1634 512.565 16 503.394 16Z"
fill="var(--screen-c-1)"
/>
<path
d="M291.571 112H52.4286C49.9827 112 48 113.989 48 116.442V675.558C48 678.011 49.9827 680 52.4286 680H291.571C294.017 680 296 678.011 296 675.558V116.442C296 113.989 294.017 112 291.571 112Z"
fill="var(--screen-c-2)"
/>
<path
d="M251.52 144H92.48C90.0058 144 88 145.976 88 148.414V171.586C88 174.024 90.0058 176 92.48 176H251.52C253.994 176 256 174.024 256 171.586V148.414C256 145.976 253.994 144 251.52 144Z"
fill="var(--screen-c-3)"
/>
<path
d="M251.52 200H92.48C90.0058 200 88 201.976 88 204.414V227.586C88 230.024 90.0058 232 92.48 232H251.52C253.994 232 256 230.024 256 227.586V204.414C256 201.976 253.994 200 251.52 200Z"
fill="var(--screen-c-3)"
/>
<path
d="M251.52 256H92.48C90.0058 256 88 257.976 88 260.414V283.586C88 286.024 90.0058 288 92.48 288H251.52C253.994 288 256 286.024 256 283.586V260.414C256 257.976 253.994 256 251.52 256Z"
fill="var(--screen-c-3)"
/>
<path
d="M251.52 312H92.48C90.0058 312 88 313.976 88 316.414V339.586C88 342.024 90.0058 344 92.48 344H251.52C253.994 344 256 342.024 256 339.586V316.414C256 313.976 253.994 312 251.52 312Z"
fill="var(--screen-c-3)"
/>
<path
d="M251.52 368H92.48C90.0058 368 88 369.976 88 372.414V395.586C88 398.024 90.0058 400 92.48 400H251.52C253.994 400 256 398.024 256 395.586V372.414C256 369.976 253.994 368 251.52 368Z"
fill="var(--screen-c-3)"
/>
<path
d="M1107.55 112H336.448C333.991 112 332 114.075 332 116.635V253.365C332 255.925 333.991 258 336.448 258H1107.55C1110.01 258 1112 255.925 1112 253.365V116.635C1112 114.075 1110.01 112 1107.55 112Z"
fill="var(--screen-c-2)"
/>
<path
d="M751.574 144H474.426C471.981 144 470 145.976 470 148.414V171.586C470 174.024 471.981 176 474.426 176H751.574C754.019 176 756 174.024 756 171.586V148.414C756 145.976 754.019 144 751.574 144Z"
fill="var(--screen-c-5)"
/>
<path
d="M919.516 194H474.484C472.008 194 470 195.976 470 198.414V221.586C470 224.024 472.008 226 474.484 226H919.516C921.992 226 924 224.024 924 221.586V198.414C924 195.976 921.992 194 919.516 194Z"
fill="var(--screen-c-6)"
/>
<path
d="M1067.39 194H952.614C950.066 194 948 195.976 948 198.414V221.586C948 224.024 950.066 226 952.614 226H1067.39C1069.93 226 1072 224.024 1072 221.586V198.414C1072 195.976 1069.93 194 1067.39 194Z"
fill="var(--screen-c-6)"
/>
<path
d="M441.568 144H368.432C365.984 144 364 145.984 364 148.432V221.568C364 224.016 365.984 226 368.432 226H441.568C444.016 226 446 224.016 446 221.568V148.432C446 145.984 444.016 144 441.568 144Z"
fill="#3F85ED"
/>
<path
d="M1107 282H335C332.791 282 331 283.791 331 286V676C331 678.209 332.791 680 335 680H1107C1109.21 680 1111 678.209 1111 676V286C1111 283.791 1109.21 282 1107 282Z"
fill="var(--screen-c-2)"
/>
<path
d="M1015.7 672.14V444.023"
stroke="var(--screen-c-4)"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M817.559 672.14V444.023"
stroke="var(--screen-c-4)"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M619.413 672.14V444.023"
stroke="var(--screen-c-4)"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M421.268 672.14V444.023"
stroke="var(--screen-c-4)"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M354.386 544.206C369.65 570.57 382.138 592.494 419.047 591.384C461.229 590.115 469.25 538.656 519.23 538.656C579.173 538.656 628.571 613.585 708.495 602.484C805.903 588.955 804.515 362.434 846.975 362.434C896.928 362.434 846.975 555.307 949.933 575.01C997.09 584.035 1069.26 554.844 1089.24 538.656"
stroke="var(--screen-c-4)"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M358.271 504.799C390.186 524.503 408.224 525.058 426.54 522.005C454.569 517.333 488.148 465.114 528.666 459.564C579.451 452.607 605.26 490.258 663.538 480.655C718.399 471.616 760.113 367.707 843.09 380.472C920.794 392.427 913.58 530.608 954.374 540.043C977.13 545.307 989.063 516.732 1021.53 521.45C1047.51 525.224 1075.28 560.764 1085.91 578.063"
stroke="#75ADFF"
stroke-width="8.88047"
stroke-linecap="round"
/>
<path
d="M421 533C426.523 533 431 528.523 431 523C431 517.477 426.523 513 421 513C415.477 513 411 517.477 411 523C411 528.523 415.477 533 421 533Z"
fill="#E4EFFF"
stroke="#75ADFF"
stroke-width="4.99526"
/>
</svg>
</template>
<style scoped>
.screen-svg {
--screen-c-0: #e4efff;
--screen-c-1: #c7deff;
--screen-c-2: white;
--screen-c-3: #eff5ff;
--screen-c-4: var(--screen-c-3);
--screen-c-5: #bdd8ff;
--screen-c-6: #eff5ff;
}
.dark .screen-svg {
--screen-c-0: #0d1014;
--screen-c-1: #7fabee;
--screen-c-2: #14181e;
--screen-c-3: #303c4b;
--screen-c-4: #1d242c;
--screen-c-5: #5f7ca5;
--screen-c-6: #313c4b;
}
</style>
Reference in New Issue Copy Permalink