<script setup lang="ts">
import scrollblock from './home/scrollblock.vue'
import geoblock from './home/geoblock.vue'
import bar1 from './home/bar1.vue'
import bar2 from './home/bar2.vue'
import radars from './home/radars.vue'
import blocks from './home/blocks.vue'
import fgl from '~/assets/img/home/fgl.png'
import gxd from '~/assets/img/home/gxd.png'
import jdjss from '~/assets/img/home/jdjss.png'
import sszx from '~/assets/img/home/sszx.png'
import xsjyhd from '~/assets/img/home/xsjyhd.png'
import xssy from '~/assets/img/home/xssy.png'
import yyd from '~/assets/img/home/yyd.png'
</script>

<template>
  <div class="flex justify-between">
    <div class="w-444px h-full flex flex-col justify-between">
      <div class="border border-hex-0A337E bg-block p-4 h-466px">
        <radars />
      </div>
      <div class="border border-hex-0A337E bg-block p-4 h-442px">
        <bar1 />
      </div>
    </div>
    <div class="w-900px flex flex-col justify-between ">
      <div class="flex justify-evenly">
        <div class="flex flex-col">
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">
              全市学校数：
            </div>
            <div class="text-28px mr-1">
              40
            </div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">
              全市学校班级数：
            </div>
            <div class="text-28px mr-1">
              1326
            </div>
            <div>个</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">
              结对学校数：
            </div>
            <div class="text-28px mr-1">
              12
            </div>
            <div>个(市外：3个)</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-140px text-right">
              结对教师数：
            </div>
            <div class="text-28px mr-1">
              75
            </div>
            <div>个(市外：20个)</div>
          </div>
        </div>

        <div class="flex flex-col flex-grow max-w-480px">
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校数：
            </div>
            <div class="text-28px mr-1">
              7
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2">
              百分比17.5%
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              缺少专职美术教师学校班级数：
            </div>
            <div class="text-28px mr-1">
              327
            </div>
            <div>个</div>
            <div class="text-xs text-hex-16F5FF flex-auto text-right mr-2">
              百分比24.6%
            </div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对班级数：
            </div>
            <div class="text-28px mr-1">
              60
            </div>
            <div>个 ( 市外：14个 )</div>
          </div>
          <div class="flex items-end mb-2">
            <div class="w-240px text-right">
              结对学生数：
            </div>
            <div class="text-28px mr-1">
              2480
            </div>
            <div>个 ( 市外：144个 )</div>
          </div>
        </div>
      </div>
      <geoblock />

      <div class="flex justify-between h-240px">
        <blocks class="w-557px border border-hex-0A337E bg-block py-6 px-8 " />
        <scrollblock />
      </div>
    </div>
    <div class="w-444px h-full flex flex-col justify-between">
      <div class="border border-hex-0A337E bg-block p-4 h-421px">
        <bar2 />
      </div>
      <img :src="fgl" alt="">
      <img :src="gxd" alt="">
      <img :src="yyd" alt="">
    </div>
  </div>
</template>
