forked from mengyxu/noob-components
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
4.2 KiB
116 lines
4.2 KiB
<template> |
|
<div class="list-table-empty"> |
|
<div class="list-table-empty__image"> |
|
<svg |
|
viewBox="0 0 79 86" |
|
version="1.1" |
|
xmlns="http://www.w3.org/2000/svg" |
|
xmlns:xlink="http://www.w3.org/1999/xlink" |
|
> |
|
<defs> |
|
<linearGradient :id="`linearGradient-1-${svgIdSuffix}`" x1="38.8503086%" y1="0%" x2="61.1496914%" y2="100%"> |
|
<stop stop-color="#fcfcfd" offset="0%"></stop> |
|
<stop stop-color="#eeeff3" offset="100%"></stop> |
|
</linearGradient> |
|
<linearGradient :id="`linearGradient-2-${svgIdSuffix}`" x1="0%" y1="9.5%" x2="100%" y2="90.5%"> |
|
<stop stop-color="#fcfcfd" offset="0%"></stop> |
|
<stop stop-color="#e9ebef" offset="100%"></stop> |
|
</linearGradient> |
|
<rect :id="`path-3-${svgIdSuffix}`" x="0" y="0" width="17" height="36"></rect> |
|
</defs> |
|
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> |
|
<g transform="translate(-1268.000000, -535.000000)"> |
|
<g transform="translate(1268.000000, 535.000000)"> |
|
<path |
|
d="M39.5,86 C61.3152476,86 79,83.9106622 79,81.3333333 C79,78.7560045 57.3152476,78 35.5,78 C13.6847524,78 0,78.7560045 0,81.3333333 C0,83.9106622 17.6847524,86 39.5,86 Z" |
|
fill="#f7f8fc" |
|
></path> |
|
<polygon |
|
fill="#e5e7e9" |
|
transform="translate(27.500000, 51.500000) scale(1, -1) translate(-27.500000, -51.500000) " |
|
points="13 58 53 58 42 45 2 45" |
|
></polygon> |
|
<g |
|
transform="translate(34.500000, 31.500000) scale(-1, 1) rotate(-25.000000) translate(-34.500000, -31.500000) translate(7.000000, 10.000000)" |
|
> |
|
<polygon |
|
fill="#e5e7e9" |
|
transform="translate(11.500000, 5.000000) scale(1, -1) translate(-11.500000, -5.000000) " |
|
points="2.84078316e-14 3 18 3 23 7 5 7" |
|
></polygon> |
|
<polygon fill="#edeef2" points="-3.69149156e-15 7 38 7 38 43 -3.69149156e-15 43"></polygon> |
|
<rect |
|
:fill="`url(#linearGradient-1-${svgIdSuffix})`" |
|
transform="translate(46.500000, 25.000000) scale(-1, 1) translate(-46.500000, -25.000000) " |
|
x="38" |
|
y="7" |
|
width="17" |
|
height="36" |
|
></rect> |
|
<polygon |
|
fill="#f8f9fb" |
|
transform="translate(39.500000, 3.500000) scale(-1, 1) translate(-39.500000, -3.500000) " |
|
points="24 7 41 7 55 -3.63806207e-12 38 -3.63806207e-12" |
|
></polygon> |
|
</g> |
|
<rect :fill="`url(#linearGradient-2-${svgIdSuffix})`" x="13" y="45" width="40" height="36"></rect> |
|
<g transform="translate(53.000000, 45.000000)"> |
|
<use |
|
fill="#e0e3e9" |
|
transform="translate(8.500000, 18.000000) scale(-1, 1) translate(-8.500000, -18.000000) " |
|
:xlink:href="`#path-3-${svgIdSuffix}`" |
|
></use> |
|
</g> |
|
<polygon |
|
fill="#f8f9fb" |
|
transform="translate(66.000000, 51.500000) scale(-1, 1) translate(-66.000000, -51.500000) " |
|
points="62 45 79 45 70 58 53 58" |
|
></polygon> |
|
</g> |
|
</g> |
|
</g> |
|
</svg> |
|
</div> |
|
<div class="list-table-empty__description"><p>No Data</p></div> |
|
</div> |
|
</template> |
|
<script lang="ts" setup> |
|
import { getCurrentInstance } from "vue"; |
|
|
|
const svgIdSuffix = `no-data-${getCurrentInstance()?.uid ?? "static"}`; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.list-table-empty { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
width: 100%; |
|
height: 100%; |
|
box-sizing: border-box; |
|
padding: 40px 0; |
|
text-align: center; |
|
} |
|
|
|
.list-table-empty__image { |
|
width: 160px; |
|
} |
|
|
|
.list-table-empty__image svg { |
|
display: block; |
|
width: 100%; |
|
height: auto; |
|
} |
|
|
|
.list-table-empty__description { |
|
margin-top: 20px; |
|
} |
|
|
|
.list-table-empty__description p { |
|
margin: 0; |
|
color: #909399; |
|
font-size: 14px; |
|
line-height: 1.4; |
|
} |
|
</style>
|
|
|