关于 Empty 组件开发相关

[Tyh2001]

Empty 空状态

设计稿

https://www.figma.com/file/wy1t3zqrSdVEuPmSib3XSt/Empty-%E7%A9%BA%E7%8A%B6%E6%80%81?node-id=0%3A1

Svg

可在 IconPark 进行选择

或者使用：

<svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".302" d="M103.271 96.912c7.753 0 14.399 4.065 17.198 9.845h1.437c7.609 0 13.777 6.168 13.777 13.777v1.368c0 7.609-6.168 13.776-13.777 13.776H86.023c-7.609 0-13.776-6.167-13.776-13.776v-1.368c0-7.609 6.167-13.777 13.776-13.777h.05c2.798-5.78 9.444-9.845 17.198-9.845Z" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m130.034 82.192 72.851-20.969a4.229 4.229 0 0 1 5.054 2.392l22.526 52.317a4.229 4.229 0 0 1-2.681 5.727l-77 22.847a4.23 4.23 0 0 1-5.208-2.697l-18.377-54.195a4.229 4.229 0 0 1 2.835-5.422Z" fill="url(#b)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m128.963 127.35 28.816-6.736a7.401 7.401 0 0 0 4.84-3.713l2.995-5.596a7.404 7.404 0 0 1 4.505-3.627l32.04-9.092a7.4 7.4 0 0 0 5.378-6.911l.748-26.54a4.23 4.23 0 0 0-5.324-4.204l-78.243 21.008a4.23 4.23 0 0 0-3.125 4.333l2.186 37.208a4.229 4.229 0 0 0 5.184 3.87Z" fill="url(#c)"/><path fill-rule="evenodd" clip-rule="evenodd" d="m196.048 104.56 3.744 3.738-3.744 3.738-3.744-3.738 3.744-3.738ZM196.048 123.35l3.744 3.738-3.744 3.738-3.744-3.738 3.744-3.738ZM159.022 125.743l3.744 3.738-3.744 3.738-3.744-3.738 3.744-3.738ZM149.112 149.781l3.738 3.733-3.738 3.732-3.738-3.732 3.738-3.733ZM179.142 118.471l1.498 1.495-1.498 1.495-1.497-1.495 1.497-1.495Z" fill="#ECECF2"/><path d="M249 209.158c0 5.055-20.183 3.817-25.973 5.069-9.711 2.099 11.208 11.569-24.054 12.628-29.496.886-61.26-3.247-60.458-13.909.802-10.663 24.262-16.475 53.972-16.475 29.711 0 56.513 2.071 56.513 12.687Z" fill="url(#d)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M190.278 144.368c-5.025-5.267-8.275-8.233-9.75-8.897-.611-.304-1.939-3.767-3.985-10.388-.04-2.175-.604-3.456-1.691-3.844-.7-.225-1.926-.231-2.104.862-.119.728.367 1.813 1.458 3.253-.129 6.349 1.207 11.22 4.008 14.614 2.802 3.394 5.957 6.666 9.465 9.814l2.599-4.848v-.566Z" fill="url(#e)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M211.791 153.573c1.019.216 4.188 4.488 5.32 6.072-.015.369 6.875-6.987 7.65-7.537 2.114-1.501 4.196-.733 4.035 1.093-.16 1.826-3.361.972-3.557 1.261-3.421 5.05-3.468 5.589-5.782 8.926-1.913 2.913-6.529-1.606-11.67-6.023-5.14-4.417 2.985-4.007 4.004-3.792Z" fill="url(#f)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M188.664 209.046c-2.152 1.565-3.656 2.347-4.511 2.347-1.282 0-1.975 1.349-.782 2.077 1.192.728 5.011-.322 5.99-.322.978 0 3.496.417 2.531-2.88-.643-2.198-1.234-3.133-1.772-2.806l-1.456.463v1.121ZM206.551 209.046c2.152 1.565 3.656 2.347 4.511 2.347 1.282 0 1.975 1.349.783 2.077-1.193.728-5.012-.322-5.991-.322-.978 0-3.496.417-2.531-2.88.643-2.198 1.234-3.133 1.772-2.806l1.456.463v1.121Z" fill="#3E3E6E"/><path fill-rule="evenodd" clip-rule="evenodd" d="M188.606 170.275c-1.253 9.235-1.62 18.663-1.1 28.282.73 10.378-.034 10.149 1.1 10.149.428 0 2.173.233 2.557-.451.92-1.635 2.406-15.349 1.833-18.106-.057-.415 5.719-13.284 5.719-18.289-.215-.977-3.584-1.505-10.109-1.585Z" fill="url(#g)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M206.432 170.275c1.253 9.235 1.62 18.663 1.099 28.282-.729 10.378.035 10.149-1.099 10.149-.429 0-2.173.233-2.558-.451-.919-1.635-2.405-15.349-1.832-18.106.057-.415-5.719-13.284-5.719-18.289.215-.977 3.584-1.505 10.109-1.585Z" fill="url(#h)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M194.068 134.614c-.791 3.955-.419 6.281 1.116 6.977 2.01.839.59 2.568.184 2.781-.271.142-.205.622.199 1.442 1.271.672 2.205.94 2.802.803.597-.137 1.325-.81 2.184-2.019-1.601-1.152-2.158-2.076-1.671-2.772.486-.696 1.225-1.422 2.216-2.178.962-.738.925-1.299-.111-1.684.25-.697.343-1.493.278-2.387l-3.374-.963-3.433-.749-.39.749Z" fill="url(#i)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M196.325 135.513c3.288-.937 4.161.503 4.161 1.112 0 .406-.104 1.08-.311 2.02.404-.18.689-.317.854-.41 1.008-.571 1.676-1.584 1.914-2.373.444-1.473-.862-4.6-4.248-4.134-1.18-.223-1.367-1.963-3.418-.893-2.052 1.07-2.743.248-2.743 1.345 0 1.098.085 4.48 3.791 3.333Z" fill="#353564"/><path fill-rule="evenodd" clip-rule="evenodd" d="M195.685 144.048c1.397 1.562 2.806 1.562 4.226 0 1.338.208 8.298 1.038 11.67 6.238 1.841 2.713 2.768 4.472 2.782 5.276-2.603 3.806-3.905 5.618-3.905 5.438 0-.18-1.415-1.486-4.246-3.918 2.485 7.489 3.139 11.884 1.964 13.184-1.764 1.949-16.603 2.239-20.159.834-1.029-.535-.548-15.617 1.153-20.333.054-.249-2.552 1.772-9.893-7.04-.233-.323 1.657-2.453 5.672-6.389 1.724 1.931 3.131 3.232 4.221 3.902 1.091.669 3.262 1.606 6.515 2.808Z" fill="#5B5BEA"/><path opacity=".302" d="M79.478 172.186v79.767l28.726 10.59v-82.802l-28.726-7.555Z" fill="url(#j)"/><path opacity=".302" d="m108.158 179.625 26.638-9.818v82.518l-26.638 10.098v-82.798Z" fill="url(#k)"/><path opacity=".302" d="m79.295 172.106 27.132-9.996 28.364 7.759-26.647 9.822-28.849-7.585Z" fill="url(#l)"/><path opacity=".302" d="M234.506 118.101v63.12l22.798 8.379v-65.521l-22.798-5.978Z" fill="url(#m)"/><path opacity=".302" d="m257.268 123.987 21.142-7.769v65.298l-21.142 7.989v-65.518Z" fill="url(#n)"/><path opacity=".302" d="m234.361 118.038 21.534-7.91 22.51 6.14-21.148 7.772-22.896-6.002Z" fill="url(#o)"/><path opacity=".302" d="M283.888 170.921c7.753 0 14.399 4.065 17.198 9.845h1.437c7.609 0 13.777 6.168 13.777 13.776v1.369c0 7.608-6.168 13.776-13.777 13.776H266.64c-7.609 0-13.776-6.168-13.776-13.776v-1.369c0-7.608 6.167-13.776 13.776-13.776h.049c2.799-5.78 9.445-9.845 17.199-9.845Z" fill="url(#p)"/><defs><linearGradient id="a" x1="103.965" y1="96.912" x2="103.965" y2="135.678" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="215.759" y1="102.869" x2="159.234" y2="133.641" gradientUnits="userSpaceOnUse"><stop stop-color="#E2E2EA"/><stop offset="1" stop-color="#D9D9E8"/></linearGradient><linearGradient id="c" x1="180.557" y1="80.492" x2="141.903" y2="130.352" gradientUnits="userSpaceOnUse"><stop stop-color="#F4F4F9"/><stop offset="1" stop-color="#E3E3EA"/></linearGradient><linearGradient id="d" x1="193.75" y1="208.73" x2="193.75" y2="235.332" gradientUnits="userSpaceOnUse"><stop stop-color="#FCFCFE"/><stop offset="1" stop-color="#EBEBF0"/></linearGradient><linearGradient id="e" x1="178.13" y1="124.912" x2="189.688" y2="142.892" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD2C4"/><stop offset="1" stop-color="#FFB8A3"/></linearGradient><linearGradient id="f" x1="225.708" y1="158.519" x2="211.079" y2="158.349" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD2C4"/><stop offset="1" stop-color="#FFB8A3"/></linearGradient><linearGradient id="g" x1="192.724" y1="206.909" x2="195.785" y2="172.009" gradientUnits="userSpaceOnUse"><stop stop-color="#7878C3"/><stop offset="1" stop-color="#5C5CBB"/></linearGradient><linearGradient id="h" x1="202.314" y1="206.909" x2="199.253" y2="172.009" gradientUnits="userSpaceOnUse"><stop stop-color="#7878C3"/><stop offset="1" stop-color="#5C5CBB"/></linearGradient><linearGradient id="i" x1="196.087" y1="136.247" x2="199.53" y2="142.116" gradientUnits="userSpaceOnUse"><stop stop-color="#FFD2C4"/><stop offset="1" stop-color="#FFB8A3"/></linearGradient><linearGradient id="j" x1="84.835" y1="182.186" x2="84.835" y2="260.007" gradientUnits="userSpaceOnUse"><stop stop-color="#EEE"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="k" x1="121.477" y1="169.807" x2="121.477" y2="262.423" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="l" x1="107.043" y1="162.11" x2="107.043" y2="179.691" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="m" x1="238.758" y1="126.014" x2="238.758" y2="187.594" gradientUnits="userSpaceOnUse"><stop stop-color="#EEE"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="n" x1="267.839" y1="116.218" x2="267.839" y2="189.505" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="o" x1="256.383" y1="110.128" x2="256.383" y2="124.04" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient><linearGradient id="p" x1="284.582" y1="170.921" x2="284.582" y2="209.687" gradientUnits="userSpaceOnUse"><stop stop-color="#DCDCE4"/><stop offset="1" stop-color="#DEDEE6" stop-opacity="0"/></linearGradient></defs></svg>

Attributes

• image-size 自定义图片尺寸
• content 展示的内容
• content-size 展示的内容文字大小
• content-color 展示的内容文字颜色
• background 自定义背景色
• image-src 自定义图片地址
• style-list 自定义样式对象

Slots

• footer 自定义页脚内容
• image 自定义图片