205 lines
12 KiB
Vue
205 lines
12 KiB
Vue
<template>
|
|
<svg-container>
|
|
<svg
|
|
width="400px"
|
|
viewBox="0 0 688 403"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
>
|
|
<defs>
|
|
<rect
|
|
id="path-1"
|
|
x="140"
|
|
y="0"
|
|
width="549"
|
|
height="176"
|
|
rx="20"
|
|
/>
|
|
<mask
|
|
id="mask-2"
|
|
maskContentUnits="userSpaceOnUse"
|
|
maskUnits="objectBoundingBox"
|
|
x="0"
|
|
y="0"
|
|
width="549"
|
|
height="176"
|
|
fill="white"
|
|
>
|
|
<use xlink:href="#path-1" />
|
|
</mask>
|
|
</defs>
|
|
<g
|
|
id="Page-1"
|
|
stroke="none"
|
|
stroke-width="1"
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
>
|
|
<g
|
|
id="diagram-markdown-slot-relationship"
|
|
transform="translate(-1.000000, 0.000000)"
|
|
>
|
|
<circle
|
|
id="Oval"
|
|
fill="#00BC7D"
|
|
fill-rule="nonzero"
|
|
cx="235"
|
|
cy="88"
|
|
r="59"
|
|
/>
|
|
<text
|
|
id="Markdown-File-1"
|
|
font-family="PingFangSC-Regular, PingFang SC"
|
|
font-size="20"
|
|
font-weight="normal"
|
|
fill="#FFFFFF"
|
|
>
|
|
<tspan
|
|
x="186.79"
|
|
y="85"
|
|
>Markdown </tspan>
|
|
<tspan
|
|
x="211.43"
|
|
y="113"
|
|
>File 1</tspan>
|
|
</text>
|
|
<circle
|
|
id="Oval"
|
|
fill="#00BC7D"
|
|
fill-rule="nonzero"
|
|
cx="415"
|
|
cy="88"
|
|
r="59"
|
|
/>
|
|
<text
|
|
id="Markdown-File-2"
|
|
font-family="PingFangSC-Regular, PingFang SC"
|
|
font-size="20"
|
|
font-weight="normal"
|
|
fill="#FFFFFF"
|
|
>
|
|
<tspan
|
|
x="366.79"
|
|
y="85"
|
|
>Markdown </tspan>
|
|
<tspan
|
|
x="389.44"
|
|
y="113"
|
|
>File 2</tspan>
|
|
</text>
|
|
<circle
|
|
id="Oval"
|
|
fill="#EB4D5D"
|
|
fill-rule="nonzero"
|
|
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
|
cx="419"
|
|
cy="320"
|
|
r="83"
|
|
/>
|
|
<text
|
|
id="Layout-Component"
|
|
transform="translate(419.000000, 320.000000) rotate(-360.000000) translate(-419.000000, -320.000000) "
|
|
font-family="PingFangSC-Regular, PingFang SC"
|
|
font-size="24"
|
|
font-weight="normal"
|
|
fill="#FFFFFF"
|
|
>
|
|
<tspan
|
|
x="381.272"
|
|
y="312"
|
|
>Layout</tspan>
|
|
<tspan
|
|
x="354.572"
|
|
y="345"
|
|
>Component</tspan>
|
|
</text>
|
|
<circle
|
|
id="Oval"
|
|
fill="#00BC7D"
|
|
fill-rule="nonzero"
|
|
cx="595"
|
|
cy="88"
|
|
r="59"
|
|
/>
|
|
<text
|
|
id="Markdown-File-3"
|
|
font-family="PingFangSC-Regular, PingFang SC"
|
|
font-size="20"
|
|
font-weight="normal"
|
|
fill="#FFFFFF"
|
|
>
|
|
<tspan
|
|
x="546.79"
|
|
y="85"
|
|
>Markdown </tspan>
|
|
<tspan
|
|
x="569.44"
|
|
y="113"
|
|
>File 3</tspan>
|
|
</text>
|
|
<use
|
|
id="Rectangle"
|
|
stroke="#DC585F"
|
|
mask="url(#mask-2)"
|
|
stroke-width="8"
|
|
stroke-dasharray="5"
|
|
fill-rule="nonzero"
|
|
xlink:href="#path-1"
|
|
/>
|
|
<path
|
|
id="Path"
|
|
d="M317.737594,275.914863 C316.399837,275.439513 315.071319,274.934993 313.752054,274.40131 L314.877079,271.620246 C316.062011,272.099587 317.254567,272.554642 318.454758,272.985416 L320.320183,265.365584 L336.516196,279.111098 L315.802177,283.8206 L317.737594,275.914863 Z M237.053972,153.839171 L240.036678,154.160829 C239.860222,155.797097 239.727284,157.431576 239.637858,159.064293 L236.642347,158.900223 C236.734662,157.214791 236.871873,155.527765 237.053972,153.839171 Z M236.500062,163.984683 L239.50006,163.988115 C239.498183,165.6288 239.540423,167.267783 239.626781,168.905092 L236.630945,169.063103 C236.541751,167.372018 236.498123,165.679201 236.500062,163.984683 Z M237.034923,174.12831 L240.017951,173.809652 C240.191774,175.436839 240.409353,177.062453 240.670697,178.686519 L237.708802,179.163147 C237.439026,177.486687 237.214397,175.808399 237.034923,174.12831 Z M238.651506,184.177472 L241.584397,183.54648 C241.927872,185.142975 242.313817,186.738038 242.742248,188.33169 L239.845114,189.110544 C239.40355,187.46804 239.005676,185.823676 238.651506,184.177472 Z M241.277699,193.960604 L244.133333,193.041173 C244.633282,194.593949 245.173728,196.145426 245.754688,197.695614 L242.945486,198.748412 C242.348064,197.154297 241.792129,195.558357 241.277699,193.960604 Z M244.837653,203.467846 L247.596505,202.289399 C248.237243,203.789426 248.91606,205.288264 249.632972,206.785917 L246.927022,208.081229 C246.191725,206.545169 245.495264,205.007373 244.837653,203.467846 Z M249.214331,212.61803 L251.865379,211.213771 C252.629062,212.6555 253.428173,214.096132 254.262722,215.535667 L251.667331,217.040308 C250.813682,215.567829 249.996012,214.093736 249.214331,212.61803 Z M254.297283,221.391099 L256.836394,219.793315 C257.706019,221.175275 258.60841,222.556214 259.543577,223.936131 L257.060143,225.61915 C256.106032,224.21128 255.185076,222.801931 254.297283,221.391099 Z M259.974465,229.772936 L262.402649,228.01114 C263.362565,229.334138 264.3527,230.656183 265.373059,231.977271 L262.998786,233.811072 C261.960192,232.466375 260.952083,231.120331 259.974465,229.772936 Z M266.091044,237.698109 L268.411267,235.796382 C269.468483,237.08625 270.534696,238.346975 271.6099,239.578562 L269.349958,241.551545 C268.25419,240.296403 267.167887,239.011923 266.091044,237.698109 Z M272.734865,245.303177 L274.928459,243.25668 C276.064358,244.474225 277.209951,245.660334 278.365233,246.815016 L276.244465,248.936888 C275.064352,247.757389 273.894487,246.546149 272.734865,245.303177 Z M279.887015,252.446537 L281.927895,250.247718 C283.145938,251.378269 284.374389,252.475061 285.613248,253.538106 L283.65964,255.814817 C282.391056,254.726266 281.133515,253.603502 279.887015,252.446537 Z M287.576785,259.039625 L289.435074,256.684468 C290.736664,257.711462 292.049366,258.702468 293.373181,259.657502 L291.617984,262.09046 C290.259116,261.110138 288.912049,260.093188 287.576785,259.039625 Z M295.785278,264.957777 L297.4295,262.448487 C298.812943,263.354993 300.208145,264.223547 301.615114,265.054165 L300.089978,267.637566 C298.64262,266.783104 297.207718,265.889835 295.785278,264.957777 Z M304.529995,270.116457 L305.928241,267.462232 C307.386943,268.230677 308.857919,268.959729 310.341185,269.649406 L309.076317,272.36972 C307.547965,271.659079 306.032519,270.907986 304.529995,270.116457 Z"
|
|
fill="#8599A4"
|
|
fill-rule="nonzero"
|
|
/>
|
|
<path
|
|
id="Path"
|
|
d="M505.524249,279.462157 L520.680172,264.577668 L526.525394,282.656202 L505.524249,279.462157 Z M607.459883,153.645338 L610.450216,153.404698 C610.586546,155.098816 610.691833,156.77921 610.766069,158.445876 L607.76904,158.579368 C607.696405,156.948625 607.593356,155.303949 607.459883,153.645338 Z M607.896371,163.523725 L610.896305,163.503827 C610.907594,165.205698 610.885378,166.892755 610.829647,168.56499 L607.831312,168.465065 C607.885706,166.832931 607.907396,165.18582 607.896371,163.523725 Z M607.562992,173.41012 L610.554458,173.636245 C610.42622,175.332733 610.262196,177.013376 610.062375,178.678161 L607.083754,178.320643 C607.278311,176.69972 607.43806,175.062883 607.562992,173.41012 Z M606.384557,183.20243 L609.343631,183.696275 C609.063719,185.373481 608.746022,187.033908 608.390534,188.677536 L605.458331,188.043351 C605.803721,186.446416 606.112465,184.832782 606.384557,183.20243 Z M604.291922,192.859811 L607.189213,193.63808 C606.748727,195.277893 606.269015,196.900206 605.750076,198.504997 L602.895608,197.581952 C603.399033,196.025135 603.864471,194.451096 604.291922,192.859811 Z M601.271525,202.20035 L604.075335,203.267423 C603.472603,204.851146 602.829959,206.41696 602.147412,207.96484 L599.402435,206.754426 C600.064131,205.253832 600.687158,203.735815 601.271525,202.20035 Z M597.290807,211.224832 L599.969243,212.576121 C599.208118,214.084773 598.407288,215.575496 597.566769,217.048269 L594.961228,215.561273 C595.776314,214.133064 596.552836,212.687591 597.290807,211.224832 Z M592.397896,219.797817 L594.924421,221.41543 C594.015938,222.834374 593.068787,224.235757 592.082984,225.619564 L589.639589,223.878927 C590.596732,222.53535 591.516161,221.174984 592.397896,219.797817 Z M586.660862,227.851867 L589.017105,229.708777 C587.977352,231.028126 586.900649,232.33062 585.787016,233.616254 L583.51944,231.652049 C584.602788,230.401378 585.649923,229.134653 586.660862,227.851867 Z M580.265616,235.264939 L582.455796,237.315088 C581.30524,238.54423 580.129172,239.752667 578.927599,240.940392 L576.818608,238.806814 C577.992605,237.646347 579.141605,236.465724 580.265616,235.264939 Z M573.232259,242.218017 L575.257873,244.430909 C574.018262,245.565611 572.753689,246.680004 571.464163,247.774085 L569.523296,245.486502 C570.784152,244.416746 572.02047,243.327252 573.232259,242.218017 Z M565.69619,248.613677 L567.551459,250.971213 C566.232998,252.008779 564.890366,253.026639 563.523572,254.024792 L561.754283,251.602063 C563.092093,250.625076 564.406059,249.628948 565.69619,248.613677 Z M557.696251,254.45734 L559.379522,256.940603 C557.993427,257.880163 556.584154,258.800801 555.151714,259.702516 L553.553517,257.163665 C554.957366,256.279948 556.338275,255.377839 557.696251,254.45734 Z M549.296271,259.746128 L550.810006,262.336225 C549.366211,263.180025 547.900334,264.005779 546.412381,264.81349 L544.981154,262.176903 C546.441447,261.384207 547.879818,260.573948 549.296271,259.746128 Z M540.616615,264.460914 L541.967561,267.139522 C540.476204,267.891683 538.963914,268.626729 537.430695,269.344665 L536.158499,266.62777 C537.665372,265.922171 539.15141,265.199884 540.616615,264.460914 Z M531.631899,268.669952 L532.82743,271.421444 C531.297326,272.086278 529.747462,272.734956 528.17784,273.367482 L527.056524,270.58492 C528.601359,269.962383 530.126483,269.324059 531.631899,268.669952 Z"
|
|
fill="#8599A4"
|
|
fill-rule="nonzero"
|
|
/>
|
|
<path
|
|
id="Line"
|
|
d="M415,229 L405.5,210 L424.5,210 L415,229 Z M413.5,154 L416.5,154 L416.5,159 L413.5,159 L413.5,154 Z M413.5,164 L416.5,164 L416.5,169 L413.5,169 L413.5,164 Z M413.5,174 L416.5,174 L416.5,179 L413.5,179 L413.5,174 Z M413.5,184 L416.5,184 L416.5,189 L413.5,189 L413.5,184 Z M413.5,194 L416.5,194 L416.5,199 L413.5,199 L413.5,194 Z M413.5,204 L416.5,204 L416.5,209 L413.5,209 L413.5,204 Z"
|
|
fill="#8599A4"
|
|
fill-rule="nonzero"
|
|
/>
|
|
<text
|
|
id="Provider"
|
|
fill="#8599A4"
|
|
font-family="Arial-Black, Arial Black"
|
|
font-size="25"
|
|
font-weight="700"
|
|
>
|
|
<tspan
|
|
x="0.06640625"
|
|
y="28"
|
|
>Provider</tspan>
|
|
</text>
|
|
<text
|
|
id="Consumer"
|
|
fill="#8599A4"
|
|
font-family="Arial-Black, Arial Black"
|
|
font-size="25"
|
|
font-weight="700"
|
|
>
|
|
<tspan
|
|
x="0.243896484"
|
|
y="327"
|
|
>Consumer</tspan>
|
|
</text>
|
|
<path
|
|
id="Line-2"
|
|
d="M161,320 L320.5,320"
|
|
stroke="#DC585F"
|
|
stroke-width="4"
|
|
stroke-dasharray="5"
|
|
fill-rule="nonzero"
|
|
/>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</svg-container>
|
|
</template>
|