mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 05:42:44 +08:00
feat(Image): localize default image (#10514)
* feat(Image): localize default image * chore: update
This commit is contained in:
neverland
GitHub
parent
666089edbb
commit
87782448b6
@ -364,7 +364,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="van-empty__bottom">
|
||||
<p class="van-coupon-list__empty-tip">
|
||||
@ -386,7 +546,167 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="van-empty__bottom">
|
||||
<p class="van-coupon-list__empty-tip">
|
||||
@ -484,7 +804,167 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="van-empty__bottom">
|
||||
<p class="van-coupon-list__empty-tip">
|
||||
@ -507,7 +987,167 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="van-empty__bottom">
|
||||
<p class="van-coupon-list__empty-tip">
|
||||
|
||||
@ -5,7 +5,7 @@ import {
|
||||
makeStringProp,
|
||||
createNamespace,
|
||||
} from '../utils';
|
||||
import { Network } from './Network';
|
||||
import { renderNetwork, renderMaterial } from './Images';
|
||||
|
||||
const [name, bem] = createNamespace('empty');
|
||||
|
||||
@ -33,7 +33,10 @@ export default defineComponent({
|
||||
let { image } = props;
|
||||
|
||||
if (image === 'network') {
|
||||
return Network;
|
||||
return renderNetwork();
|
||||
}
|
||||
if (image === 'default') {
|
||||
return renderMaterial();
|
||||
}
|
||||
|
||||
if (PRESET_IMAGES.includes(image)) {
|
||||
|
||||
136
packages/vant/src/empty/Images.tsx
Normal file
136
packages/vant/src/empty/Images.tsx
Normal file
@ -0,0 +1,136 @@
|
||||
const getId = (num: number | string) => `van-empty-${num}`;
|
||||
const useId = (num: number | string) => `url(#${getId(num)})`;
|
||||
|
||||
const renderStop = (color: string, offset: number, opacity?: number) => (
|
||||
<stop stop-color={color} offset={`${offset}%`} stop-opacity={opacity} />
|
||||
);
|
||||
|
||||
const renderBuildingDef = () => (
|
||||
<linearGradient id={getId('a')} x1="64%" y1="100%" x2="64%">
|
||||
{renderStop('#FFF', 0, 0.5)}
|
||||
{renderStop('#F2F3F5', 100)}
|
||||
</linearGradient>
|
||||
);
|
||||
|
||||
const renderCloudDef = () => (
|
||||
<linearGradient id={getId('b')} x1="64%" y1="97%" x2="64%" y2="0%">
|
||||
{renderStop('#F2F3F5', 0, 0.3)}
|
||||
{renderStop('#F2F3F5', 100)}
|
||||
</linearGradient>
|
||||
);
|
||||
|
||||
const renderBuilding = () => (
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z" fill={useId('a')} />
|
||||
<path d="M123 15h22v14h9v77h-31V15z" fill={useId('a')} />
|
||||
</g>
|
||||
);
|
||||
|
||||
const renderCloud = () => (
|
||||
<g opacity=".8">
|
||||
<path
|
||||
d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill={useId('b')}
|
||||
/>
|
||||
<path
|
||||
d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill={useId('b')}
|
||||
/>
|
||||
</g>
|
||||
);
|
||||
|
||||
export const renderNetwork = () => (
|
||||
<svg viewBox="0 0 160 160">
|
||||
<defs>
|
||||
{renderBuildingDef()}
|
||||
<linearGradient id={getId(1)} x1="64%" y1="100%" x2="64%">
|
||||
{renderStop('#FFF', 0, 0.5)}
|
||||
{renderStop('#F2F3F5', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient id={getId(2)} x1="50%" x2="50%" y2="84%">
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100, 0)}
|
||||
</linearGradient>
|
||||
<linearGradient id={getId(3)} x1="100%" x2="100%" y2="100%">
|
||||
{renderStop('#EAEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id={getId(4)}
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
fy="0%"
|
||||
r="100%"
|
||||
gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
|
||||
>
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#FFF', 100, 0)}
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g fill="none">
|
||||
{renderBuilding()}
|
||||
<path fill={useId(4)} d="M0 139h160v21H0z" />
|
||||
<path
|
||||
d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
|
||||
fill={useId(2)}
|
||||
/>
|
||||
<g opacity=".6" stroke-linecap="round" stroke-width="7">
|
||||
<path d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13" stroke={useId(3)} />
|
||||
<path d="M53 36a34 34 0 0 0 0 48" stroke={useId(3)} />
|
||||
<path d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13" stroke={useId(3)} />
|
||||
<path d="M106 84a34 34 0 0 0 0-48" stroke={useId(3)} />
|
||||
</g>
|
||||
<g transform="translate(31 105)">
|
||||
<rect fill="#EBEDF0" width="98" height="34" rx="2" />
|
||||
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
|
||||
<rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const renderMaterial = () => (
|
||||
<svg viewBox="0 0 160 160">
|
||||
<defs>
|
||||
{renderBuildingDef()}
|
||||
{renderCloudDef()}
|
||||
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id={getId(5)}>
|
||||
{renderStop('#F2F3F5', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%" y1="48%" x2="5.5%" y2="51%" id={getId(6)}>
|
||||
{renderStop('#EAEDF1', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%" y1="45%" x2="100%" y2="54%" id={getId(7)}>
|
||||
{renderStop('#EAEDF1', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{renderBuilding()}
|
||||
{renderCloud()}
|
||||
<g transform="translate(36 50)" fill="none">
|
||||
<g transform="translate(8)">
|
||||
<rect
|
||||
fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
/>
|
||||
<rect fill={useId(5)} width="64" height="66" rx="2" />
|
||||
<rect fill="#FFF" x="6" y="6" width="52" height="55" rx="1" />
|
||||
<g transform="translate(15 17)" fill={useId(6)}>
|
||||
<rect width="34" height="6" rx="1" />
|
||||
<path d="M0 14h34v6H0z" />
|
||||
<rect y="28" width="34" height="6" rx="1" />
|
||||
</g>
|
||||
</g>
|
||||
<rect fill={useId(7)} y="61" width="88" height="28" rx="1" />
|
||||
<rect fill="#F7F8FA" x="29" y="72" width="30" height="6" rx="1" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
@ -1,63 +0,0 @@
|
||||
const prefix = 'van-empty-network-';
|
||||
const renderStop = (color: string, offset: number, opacity?: number) => (
|
||||
<stop stop-color={color} offset={`${offset}%`} stop-opacity={opacity} />
|
||||
);
|
||||
|
||||
export const Network = (
|
||||
<svg viewBox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id={`${prefix}1`} x1="64%" y1="100%" x2="64%">
|
||||
{renderStop('#FFF', 0, 0.5)}
|
||||
{renderStop('#F2F3F5', 100)}
|
||||
</linearGradient>
|
||||
<linearGradient id={`${prefix}2`} x1="50%" x2="50%" y2="84%">
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100, 0)}
|
||||
</linearGradient>
|
||||
<linearGradient id={`${prefix}3`} x1="100%" x2="100%" y2="100%">
|
||||
{renderStop('#EAEDF0', 0)}
|
||||
{renderStop('#DCDEE0', 100)}
|
||||
</linearGradient>
|
||||
<radialGradient
|
||||
id={`${prefix}4`}
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
fy="0%"
|
||||
r="100%"
|
||||
gradientTransform="matrix(0 1 -.54 0 .5 -.5)"
|
||||
>
|
||||
{renderStop('#EBEDF0', 0)}
|
||||
{renderStop('#FFF', 100, 0)}
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g fill="none">
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z" fill={`url(#${prefix}1)`} />
|
||||
<path d="M123 15h22v14h9v77h-31V15z" fill={`url(#${prefix}1)`} />
|
||||
</g>
|
||||
<path fill={`url(#${prefix}4)`} d="M0 139h160v21H0z" />
|
||||
<path
|
||||
d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
|
||||
fill={`url(#${prefix}2)`}
|
||||
/>
|
||||
<g opacity=".6" stroke-linecap="round" stroke-width="7">
|
||||
<path
|
||||
d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
|
||||
stroke={`url(#${prefix}3)`}
|
||||
/>
|
||||
<path d="M53 36a34 34 0 0 0 0 48" stroke={`url(#${prefix}3)`} />
|
||||
<path
|
||||
d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
|
||||
stroke={`url(#${prefix}3)`}
|
||||
/>
|
||||
<path d="M106 84a34 34 0 0 0 0-48" stroke={`url(#${prefix}3)`} />
|
||||
</g>
|
||||
<g transform="translate(31 105)">
|
||||
<rect fill="#EBEDF0" width="98" height="34" rx="2" />
|
||||
<rect fill="#FFF" x="9" y="8" width="80" height="18" rx="1.1" />
|
||||
<rect fill="#EBEDF0" x="15" y="12" width="18" height="6" rx="1.1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
@ -4,7 +4,167 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
Description
|
||||
@ -98,7 +258,167 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div class="van-empty__image"
|
||||
style="width: 100px; height: 100px;"
|
||||
>
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
Description
|
||||
@ -120,7 +440,167 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div>
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
Description
|
||||
|
||||
@ -3,7 +3,167 @@
|
||||
exports[`should render bottom slot correctly 1`] = `
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="van-empty__bottom">
|
||||
Custom bottom
|
||||
@ -14,7 +174,167 @@ exports[`should render bottom slot correctly 1`] = `
|
||||
exports[`should render description slot correctly 1`] = `
|
||||
<div class="van-empty">
|
||||
<div class="van-empty__image">
|
||||
<img src="https://img.yzcdn.cn/vant/empty-image-default.png">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-b"
|
||||
x1="64%"
|
||||
y1="97%"
|
||||
x2="64%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
stop-opacity="0.3"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="50%"
|
||||
y1="0%"
|
||||
x2="50%"
|
||||
y2="100%"
|
||||
id="van-empty-5"
|
||||
>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="95%"
|
||||
y1="48%"
|
||||
x2="5.5%"
|
||||
y2="51%"
|
||||
id="van-empty-6"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient x1="0%"
|
||||
y1="45%"
|
||||
x2="100%"
|
||||
y2="54%"
|
||||
id="van-empty-7"
|
||||
>
|
||||
<stop stop-color="#EAEDF1"
|
||||
offset="0%"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#DCDEE0"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g opacity=".8">
|
||||
<path d="M87 6c3 0 7 3 8 6a8 8 0 1 1-1 16H80a7 7 0 0 1-8-6c0-4 3-7 6-7 0-5 4-9 9-9Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
<path d="M19 23c2 0 3 1 4 3 2 0 4 2 4 4a4 4 0 0 1-4 3v1h-7v-1l-1 1c-2 0-3-2-3-4 0-1 1-3 3-3 0-2 2-4 4-4Z"
|
||||
fill="url(#van-empty-b)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<g transform="translate(36 50)"
|
||||
fill="none"
|
||||
>
|
||||
<g transform="translate(8)">
|
||||
<rect fill="#EBEDF0"
|
||||
opacity=".6"
|
||||
x="38"
|
||||
y="13"
|
||||
width="36"
|
||||
height="53"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="url(#van-empty-5)"
|
||||
width="64"
|
||||
height="66"
|
||||
rx="2"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#FFF"
|
||||
x="6"
|
||||
y="6"
|
||||
width="52"
|
||||
height="55"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<g transform="translate(15 17)"
|
||||
fill="url(#van-empty-6)"
|
||||
>
|
||||
<rect width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<path d="M0 14h34v6H0z">
|
||||
</path>
|
||||
<rect y="28"
|
||||
width="34"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</g>
|
||||
<rect fill="url(#van-empty-7)"
|
||||
y="61"
|
||||
width="88"
|
||||
height="28"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
<rect fill="#F7F8FA"
|
||||
x="29"
|
||||
y="72"
|
||||
width="30"
|
||||
height="6"
|
||||
rx="1"
|
||||
>
|
||||
</rect>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="van-empty__description">
|
||||
Custom description
|
||||
@ -35,7 +355,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
<div class="van-empty__image">
|
||||
<svg viewbox="0 0 160 160">
|
||||
<defs>
|
||||
<linearGradient id="van-empty-network-1"
|
||||
<linearGradient id="van-empty-a"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
@ -50,7 +370,22 @@ exports[`should render svg when image is network 1`] = `
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-network-2"
|
||||
<linearGradient id="van-empty-1"
|
||||
x1="64%"
|
||||
y1="100%"
|
||||
x2="64%"
|
||||
>
|
||||
<stop stop-color="#FFF"
|
||||
offset="0%"
|
||||
stop-opacity="0.5"
|
||||
>
|
||||
</stop>
|
||||
<stop stop-color="#F2F3F5"
|
||||
offset="100%"
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-2"
|
||||
x1="50%"
|
||||
x2="50%"
|
||||
y2="84%"
|
||||
@ -65,7 +400,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<linearGradient id="van-empty-network-3"
|
||||
<linearGradient id="van-empty-3"
|
||||
x1="100%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
@ -79,7 +414,7 @@ exports[`should render svg when image is network 1`] = `
|
||||
>
|
||||
</stop>
|
||||
</linearGradient>
|
||||
<radialGradient id="van-empty-network-4"
|
||||
<radialGradient id="van-empty-4"
|
||||
cx="50%"
|
||||
cy="0%"
|
||||
fx="50%"
|
||||
@ -101,20 +436,20 @@ exports[`should render svg when image is network 1`] = `
|
||||
<g fill="none">
|
||||
<g opacity=".8">
|
||||
<path d="M36 131V53H16v20H2v58h34z"
|
||||
fill="url(#van-empty-network-1)"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
<path d="M123 15h22v14h9v77h-31V15z"
|
||||
fill="url(#van-empty-network-1)"
|
||||
fill="url(#van-empty-a)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
<path fill="url(#van-empty-network-4)"
|
||||
<path fill="url(#van-empty-4)"
|
||||
d="M0 139h160v21H0z"
|
||||
>
|
||||
</path>
|
||||
<path d="M80 54a7 7 0 0 1 3 13v27l-2 2h-2a2 2 0 0 1-2-2V67a7 7 0 0 1 3-13z"
|
||||
fill="url(#van-empty-network-2)"
|
||||
fill="url(#van-empty-2)"
|
||||
>
|
||||
</path>
|
||||
<g opacity=".6"
|
||||
@ -122,19 +457,19 @@ exports[`should render svg when image is network 1`] = `
|
||||
stroke-width="7"
|
||||
>
|
||||
<path d="M64 47a19 19 0 0 0-5 13c0 5 2 10 5 13"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
stroke="url(#van-empty-3)"
|
||||
>
|
||||
</path>
|
||||
<path d="M53 36a34 34 0 0 0 0 48"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
stroke="url(#van-empty-3)"
|
||||
>
|
||||
</path>
|
||||
<path d="M95 73a19 19 0 0 0 6-13c0-5-2-9-6-13"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
stroke="url(#van-empty-3)"
|
||||
>
|
||||
</path>
|
||||
<path d="M106 84a34 34 0 0 0 0-48"
|
||||
stroke="url(#van-empty-network-3)"
|
||||
stroke="url(#van-empty-3)"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user