Doble/LeagueStats
1
0
Fork 0
mirror of https://github.com/vkaelin/LeagueStats.git synced 2026-03-25 12:57:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: work on overview tab loader - almost done

Browse source
This commit is contained in:
Valentin Kaelin 2019-12-29 21:26:52 +01:00
parent 6af7689ccf
commit e546f942d8
2 changed files with 308 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

236
client/src/components/Summoner/SummonerLoader.vue
View file

@ -21,129 +21,129 @@
</content-loader>
</div>
<div class="bg-blue-800 rounded-lg" style="width: 351px; height: 210px;">
<div class="bg-blue-800 rounded-lg" style="width: 347px; height: 215px;">
<content-loader
:height="210"
:width="351"
:height="215"
:width="347"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="11" y="15" rx="3" ry="3" width="111.65" height="19" />
<rect x="53" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="135" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="220" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="302" y="40" rx="3" ry="3" width="30" height="11" />
<rect x="10" y="61" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="81" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="101" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="121" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="141" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="161" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="181" rx="3" ry="3" width="22" height="11" />
<rect x="43" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="43" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="63" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="83" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="103" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="123" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="143" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="163" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="183" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="203" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="223" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="243" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="263" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="283" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="158" rx="0" ry="0" width="16" height="16" />
<rect x="303" y="178" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="58" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="78" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="98" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="118" rx="0" ry="0" width="16" height="16" />
<rect x="323" y="138" rx="0" ry="0" width="16" height="16" />
<rect x="110" y="10" rx="3" ry="3" width="130" height="19" />
<rect x="53" y="45" rx="3" ry="3" width="30" height="11" />
<rect x="135" y="45" rx="3" ry="3" width="30" height="11" />
<rect x="220" y="45" rx="3" ry="3" width="30" height="11" />
<rect x="305" y="45" rx="3" ry="3" width="30" height="11" />
<rect x="10" y="66" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="86" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="106" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="126" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="146" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="166" rx="3" ry="3" width="22" height="11" />
<rect x="10" y="186" rx="3" ry="3" width="22" height="11" />
<rect x="38" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="38" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="58" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="78" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="98" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="118" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="138" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="158" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="178" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="198" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="218" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="238" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="258" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="278" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="144" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="164" rx="0" ry="0" width="16" height="16" />
<rect x="298" y="184" rx="0" ry="0" width="16" height="16" />
<rect x="318" y="64" rx="0" ry="0" width="16" height="16" />
<rect x="318" y="84" rx="0" ry="0" width="16" height="16" />
<rect x="318" y="104" rx="0" ry="0" width="16" height="16" />
<rect x="318" y="124" rx="0" ry="0" width="16" height="16" />
<rect x="318" y="144" rx="0" ry="0" width="16" height="16" />
</content-loader>
</div>
</div>

234
client/src/views/Summoner.vue
View file

@ -21,67 +21,194 @@
>More matches</LoadingButton>
</div>
</div>
<div v-else style="margin-top: 1.75rem">
<div class="mt-4 text-center">
<div
v-for="index in 10"
:key="index"
class="ml-10 mt-4 rounded-lg w-full bg-blue-800"
style="width: 1160px; height: 144px;"
>
<div v-else class="mt-3 flex text-center">
<div class="mt-4 w-3/12">
<div class="bg-blue-800 rounded-lg" style="width: 300px; height: 339px;">
<content-loader
:height="144"
:width="1160"
:height="339"
:width="300"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="241" y="46" rx="3" ry="3" width="94.35" height="26.5" />
<rect x="309" y="91.67" rx="0" ry="0" width="3" height="0" />
<rect x="330" y="105.67" rx="0" ry="0" width="0" height="0" />
<rect x="312" y="94.67" rx="0" ry="0" width="0" height="0" />
<rect x="305" y="65.67" rx="0" ry="0" width="0" height="0" />
<rect x="258" y="80.34" rx="3" ry="3" width="59.5" height="16.7" />
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
<rect x="142" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="142" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="396" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="396" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="432" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="468" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="555" y="38" rx="3" ry="3" width="72" height="13" />
<rect x="555" y="57" rx="3" ry="3" width="103" height="13" />
<rect x="555" y="76" rx="3" ry="3" width="131" height="13" />
<rect x="555" y="95" rx="3" ry="3" width="131" height="13" />
<circle cx="862" cy="32" r="12" />
<circle cx="862" cy="52" r="12" />
<circle cx="862" cy="72" r="12" />
<circle cx="862" cy="92" r="12" />
<circle cx="862" cy="112" r="12" />
<circle cx="926" cy="32" r="12" />
<circle cx="926" cy="52" r="12" />
<circle cx="926" cy="72" r="12" />
<circle cx="926" cy="92" r="12" />
<circle cx="926" cy="112" r="12" />
<rect x="770" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="770" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="945" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="1106" cy="50.55" r="11.88" />
<rect x="1074" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="1077" y="90" rx="3" ry="3" width="59" height="14" />
<rect x="94" y="18" rx="3" ry="3" width="111" height="24" />
<rect x="23" y="76" rx="3" ry="3" width="74" height="12" />
<rect x="130" y="76" rx="3" ry="3" width="34" height="12" />
<rect x="185" y="76" rx="3" ry="3" width="48" height="12" />
<rect x="246" y="76" rx="3" ry="3" width="30" height="12" />
<circle cx="40" cy="123" r="16" />
<rect x="60" y="116" rx="3" ry="3" width="49" height="13" />
<rect x="130" y="116" rx="3" ry="3" width="42" height="16" />
<rect x="185" y="116" rx="3" ry="3" width="42" height="16" />
<rect x="246" y="116" rx="3" ry="3" width="42" height="16" />
<circle cx="40" cy="171" r="16" />
<rect x="60" y="163" rx="3" ry="3" width="49" height="13" />
<rect x="130" y="163" rx="3" ry="3" width="42" height="16" />
<rect x="185" y="163" rx="3" ry="3" width="42" height="16" />
<rect x="246" y="163" rx="3" ry="3" width="42" height="16" />
<circle cx="40" cy="219" r="16" />
<rect x="60" y="212" rx="3" ry="3" width="49" height="13" />
<rect x="130" y="212" rx="3" ry="3" width="42" height="16" />
<rect x="185" y="212" rx="3" ry="3" width="42" height="16" />
<rect x="246" y="212" rx="3" ry="3" width="42" height="16" />
<circle cx="40" cy="267" r="16" />
<rect x="60" y="260" rx="3" ry="3" width="49" height="13" />
<rect x="130" y="260" rx="3" ry="3" width="42" height="16" />
<rect x="185" y="260" rx="3" ry="3" width="42" height="16" />
<rect x="246" y="260" rx="3" ry="3" width="42" height="16" />
<circle cx="40" cy="315" r="16" />
<rect x="60" y="308" rx="3" ry="3" width="49" height="13" />
<rect x="130" y="308" rx="3" ry="3" width="42" height="16" />
<rect x="185" y="308" rx="3" ry="3" width="42" height="16" />
<rect x="246" y="308" rx="3" ry="3" width="42" height="16" />
</content-loader>
</div>
<div class="mt-4 bg-blue-800 rounded-lg" style="width: 300px; height: 828px;">
<content-loader
:height="828"
:width="300"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="122" y="17" rx="3" ry="3" width="55" height="24" />
<rect x="26" y="72" rx="4" ry="4" width="8" height="51" />
<rect x="86" y="72" rx="4" ry="4" width="8" height="51" />
<rect x="146" y="72" rx="4" ry="4" width="8" height="51" />
<rect x="206" y="72" rx="4" ry="4" width="8" height="51" />
<rect x="266" y="72" rx="4" ry="4" width="8" height="51" />
<rect x="22" y="128" rx="3" ry="3" width="16" height="16" />
<rect x="82" y="128" rx="3" ry="3" width="16" height="16" />
<rect x="142" y="128" rx="3" ry="3" width="16" height="16" />
<rect x="202" y="128" rx="3" ry="3" width="16" height="16" />
<rect x="262" y="128" rx="3" ry="3" width="16" height="16" />
<rect x="14" y="182" rx="3" ry="3" width="45" height="16" />
<rect x="93" y="182" rx="3" ry="3" width="45" height="16" />
<rect x="155" y="182" rx="3" ry="3" width="58" height="16" />
<rect x="250" y="182" rx="3" ry="3" width="33" height="16" />
<rect x="14" y="212" rx="3" ry="3" width="45" height="12" />
<rect x="93" y="212" rx="3" ry="3" width="45" height="12" />
<rect x="168" y="212" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="212" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="237" rx="3" ry="3" width="45" height="12" />
<rect x="93" y="237" rx="3" ry="3" width="45" height="12" />
<rect x="168" y="237" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="237" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="262" rx="3" ry="3" width="45" height="12" />
<rect x="93" y="262" rx="3" ry="3" width="45" height="12" />
<rect x="168" y="262" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="262" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="287" rx="3" ry="3" width="45" height="12" />
<rect x="93" y="287" rx="3" ry="3" width="45" height="12" />
<rect x="168" y="287" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="287" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="312" rx="3" ry="3" width="45" height="12" />
<rect x="93" y="312" rx="3" ry="3" width="45" height="12" />
<rect x="168" y="312" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="312" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="337" rx="3" ry="3" width="105" height="12" />
<rect x="238" y="337" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="362" rx="3" ry="3" width="85" height="12" />
<rect x="238" y="362" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="397" rx="3" ry="3" width="115" height="16" />
<rect x="150" y="397" rx="3" ry="3" width="65" height="16" />
<rect x="223" y="397" rx="3" ry="3" width="60" height="16" />
<rect x="14" y="427" rx="3" ry="3" width="95" height="12" />
<rect x="165" y="427" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="427" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="452" rx="3" ry="3" width="95" height="12" />
<rect x="165" y="452" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="452" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="487" rx="3" ry="3" width="115" height="16" />
<rect x="150" y="487" rx="3" ry="3" width="65" height="16" />
<rect x="223" y="487" rx="3" ry="3" width="60" height="16" />
<rect x="14" y="517" rx="3" ry="3" width="95" height="12" />
<rect x="165" y="517" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="517" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="542" rx="3" ry="3" width="95" height="12" />
<rect x="165" y="542" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="542" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="577" rx="3" ry="3" width="115" height="16" />
<rect x="150" y="577" rx="3" ry="3" width="65" height="16" />
<rect x="223" y="577" rx="3" ry="3" width="60" height="16" />
<rect x="14" y="607" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="607" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="607" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="632" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="632" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="632" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="657" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="657" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="657" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="682" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="682" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="682" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="707" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="707" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="707" rx="3" ry="3" width="45" height="12" />
<rect x="14" y="732" rx="3" ry="3" width="50" height="12" />
<rect x="165" y="732" rx="3" ry="3" width="45" height="12" />
<rect x="238" y="732" rx="3" ry="3" width="45" height="12" />
<rect x="122" y="762" rx="3" ry="3" width="55" height="20" />
<rect x="115" y="789" rx="3" ry="3" width="70" height="12" />
<rect x="110" y="805" rx="3" ry="3" width="80" height="12" />
</content-loader>
</div>
</div>
<div class="w-9/12">
<div
v-for="index in 10"
:key="index"
class="mt-4 ml-4 bg-blue-800 rounded-lg"
style="width: 884px; height: 144px;"
>
<content-loader
:height="144"
:width="884"
:speed="2"
primary-color="#17314f"
secondary-color="#2b6cb0"
>
<rect x="68" y="36" rx="8" ry="8" width="64" height="64" />
<rect x="140" y="40" rx="6" ry="6" width="24" height="24" />
<rect x="140" y="72" rx="6" ry="6" width="24" height="24" />
<rect x="206" y="46" rx="3" ry="3" width="81" height="22" />
<rect x="218" y="74" rx="3" ry="3" width="59" height="16" />
<rect x="305" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="341" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="377" y="36" rx="6" ry="6" width="32" height="32" />
<rect x="305" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="341" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="377" y="72" rx="6" ry="6" width="32" height="32" />
<rect x="430" y="45" rx="3" ry="3" width="50" height="10" />
<rect x="430" y="60" rx="3" ry="3" width="50" height="10" />
<rect x="430" y="75" rx="3" ry="3" width="70" height="10" />
<rect x="430" y="90" rx="3" ry="3" width="70" height="10" />
<circle cx="608" cy="32" r="12" />
<circle cx="608" cy="52" r="12" />
<circle cx="608" cy="72" r="12" />
<circle cx="608" cy="92" r="12" />
<circle cx="608" cy="112" r="12" />
<circle cx="672" cy="32" r="12" />
<circle cx="672" cy="52" r="12" />
<circle cx="672" cy="72" r="12" />
<circle cx="672" cy="92" r="12" />
<circle cx="672" cy="112" r="12" />
<rect x="516" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="516" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="516" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="516" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="516" y="109" rx="3" ry="3" width="72" height="9" />
<rect x="691" y="29" rx="3" ry="3" width="72" height="9" />
<rect x="691" y="49" rx="3" ry="3" width="72" height="9" />
<rect x="691" y="69" rx="3" ry="3" width="72" height="9" />
<rect x="691" y="89" rx="3" ry="3" width="72" height="9" />
<rect x="691" y="109" rx="3" ry="3" width="72" height="9" />
<circle cx="830" cy="50" r="12" />
<rect x="800" y="66" rx="3" ry="3" width="64" height="17" />
<rect x="803" y="90" rx="3" ry="3" width="59" height="14" />
</content-loader>
</div>
<div class="mt-4 mx-auto" style="width: 135px; height: 40px;">
<content-loader
:height="40"
@ -94,6 +221,7 @@
</content-loader>
</div>
</div>
</div>
</template>