mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-15 09:50:58 +08:00
84 lines
3.2 KiB
Vue
84 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<svg
|
||
|
|
class="component-svg"
|
||
|
|
width="160"
|
||
|
|
height="120"
|
||
|
|
viewBox="0 0 160 120"
|
||
|
|
fill="none"
|
||
|
|
xmlns="http://www.w3.org/2000/svg"
|
||
|
|
>
|
||
|
|
<circle cx="80" cy="60" r="60" fill="var(--component-c-0)" />
|
||
|
|
<path
|
||
|
|
d="M37 23C37 20.7909 38.7909 19 41 19H101C103.209 19 105 20.7909 105 23V97C105 99.2091 103.209 101 101 101H45C40.5817 101 37 97.4183 37 93V23Z"
|
||
|
|
fill="var(--component-c-1)"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M112.048 91H49.0484C49.8484 95.4 46.715 99.5 45.0484 101H107.548C114.348 100.6 113.382 94.1667 112.048 91Z"
|
||
|
|
fill="var(--component-c-2)"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M121.5 5.5L114.883 19.2063C114.791 19.3981 115.022 19.5824 115.188 19.4494L127 10L121.5 5.5Z"
|
||
|
|
fill="#FFACAD"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M121.68 21.3628L115.49 27.0342C115.145 27.3502 115.385 27.9246 115.852 27.9022L124.153 27.5051C124.496 27.4887 124.721 27.1389 124.593 26.8199L122.482 21.5456C122.352 21.2211 121.938 21.1266 121.68 21.3628Z"
|
||
|
|
fill="#FFD6D2"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V32H37V22Z"
|
||
|
|
fill="#0077CE"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M37 22C37 19.7909 38.7909 18 41 18H101C103.209 18 105 19.7909 105 22V30H37V22Z"
|
||
|
|
fill="#20A0FF"
|
||
|
|
/>
|
||
|
|
<circle cx="44" cy="25" r="2" fill="#0077CE" />
|
||
|
|
<circle cx="51" cy="25" r="2" fill="#0077CE" />
|
||
|
|
<circle cx="60" cy="25" r="2" fill="#0077CE" />
|
||
|
|
<rect x="45" y="38" width="14" height="4" fill="var(--component-c-3)" />
|
||
|
|
<rect x="45" y="55" width="14" height="4" fill="var(--component-c-3)" />
|
||
|
|
<rect x="45" y="45" width="50" height="4" fill="var(--component-c-4)" />
|
||
|
|
<rect x="45" y="62" width="50" height="4" fill="var(--component-c-4)" />
|
||
|
|
<rect x="61" y="75" width="20" height="6" rx="3" fill="#20A0FF" />
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
d="M87 42C85.8954 42 85 42.8954 85 44V69C85 70.1046 85.8954 71 87 71H96.6154L98 75.5H100.5L99.15 71H132C133.105 71 134 70.1046 134 69V44C134 42.8954 133.105 42 132 42H87Z"
|
||
|
|
fill="var(--component-c-5)"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
fill-rule="evenodd"
|
||
|
|
clip-rule="evenodd"
|
||
|
|
d="M89 42C87.8954 42 87 42.8954 87 44V69C87 70.1046 87.8954 71 89 71H98.6154L100 75.5L104.154 71H134C135.105 71 136 70.1046 136 69V44C136 42.8954 135.105 42 134 42H89Z"
|
||
|
|
fill="var(--component-c-6)"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
d="M103.391 61.7402L94.2305 57.1895V56.4473L103.391 51.3984V53.0879L96.584 56.75V56.7988L103.391 60.0605V61.7402ZM114.943 47.873L107.688 65.5098H105.9L113.156 47.873H114.943ZM126.789 57.1699L117.629 61.7207V60.041L124.445 56.8086V56.7402L117.629 53.0781V51.3887L126.789 56.4277V57.1699Z"
|
||
|
|
fill="var(--component-c-7)"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.component-svg {
|
||
|
|
--component-c-0: #eff5fd;
|
||
|
|
--component-c-1: white;
|
||
|
|
--component-c-2: #d9edfe;
|
||
|
|
--component-c-3: var(--component-c-2);
|
||
|
|
--component-c-4: var(--component-c-2);
|
||
|
|
--component-c-5: #6496dc;
|
||
|
|
--component-c-6: #80a8e1;
|
||
|
|
--component-c-7: #dff2ff;
|
||
|
|
}
|
||
|
|
.dark .component-svg {
|
||
|
|
--component-c-0: #272b31;
|
||
|
|
--component-c-1: #273751;
|
||
|
|
--component-c-2: #394c68;
|
||
|
|
--component-c-3: #20a0ff;
|
||
|
|
--component-c-4: #384692;
|
||
|
|
--component-c-5: #263346;
|
||
|
|
--component-c-6: #3a5a88;
|
||
|
|
--component-c-7: white;
|
||
|
|
}
|
||
|
|
</style>
|