<template>
  <div class="mt-3 flex text-center">
    <div class="w-3/12">
      <div class="bg-blue-850 rounded-lg" style="width: 300px; height: 339px;">
        <content-loader
          :height="339"
          :width="300"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <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-850 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 class="mt-4 bg-blue-850 rounded-lg" style="width: 300px; height: 384px;">
        <content-loader
          :height="384"
          :width="300"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="112" y="17" rx="3" ry="3" width="75" height="24" />
          <rect x="14" y="70" rx="3" ry="3" width="80" height="16" />
          <rect x="150" y="70" rx="3" ry="3" width="40" height="16" />
          <rect x="217" y="70" rx="3" ry="3" width="59" height="16" />
          <rect x="14" y="100" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="100" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="100" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="121" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="121" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="121" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="142" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="142" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="142" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="163" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="163" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="163" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="184" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="184" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="184" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="205" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="205" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="205" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="226" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="226" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="226" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="247" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="247" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="247" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="268" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="268" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="268" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="289" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="289" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="289" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="310" rx="3" ry="3" width="65" height="12" />
          <rect x="145" y="310" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="310" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="331" rx="3" ry="3" width="115" height="12" />
          <rect x="145" y="331" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="331" rx="3" ry="3" width="65" height="12" />
          <rect x="14" y="352" rx="3" ry="3" width="85" height="12" />
          <rect x="145" y="352" rx="3" ry="3" width="45" height="12" />
          <rect x="218" y="352" rx="3" ry="3" width="65" height="12" />
        </content-loader>
      </div>
    </div>
    <div class="w-9/12">
      <div
        v-for="index in 10"
        :key="index"
        :class="{'mt-4': index !== 1}"
        class="ml-4 bg-blue-850 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"
          :width="135"
          :speed="2"
          primary-color="#17314f"
          secondary-color="#2b6cb0"
        >
          <rect x="0" y="0" rx="6" ry="6" width="135" height="40" />
        </content-loader>
      </div>
    </div>
  </div>
</template>

<script>
import { ContentLoader } from 'vue-content-loader'

export default {
  components: {
    ContentLoader
  }
}
</script>
