<script setup lang="ts">
import pie1 from './teacher/pie1.vue'
import pie2 from './teacher/pie2.vue'
import pie3 from './teacher/pie3.vue'

import teacher1 from '~/assets/img/teacher/teacher1.png'
import teacher2 from '~/assets/img/teacher/teacher2.png'
import top from '~/assets/img/teacher/top.png'
</script>

<template>
  <div class="flex justify-between">
    <div class="w-858px flex flex-col justify-between">
      <img :src="top" alt="">
      <img :src="teacher1" alt="">
      <img :src="teacher2" alt="">
    </div>
    <div class="w-960px flex flex-col justify-between">
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6">
        <div class="text-lg mb-4 ">
          全市美术教师数据
        </div>
        <div class="flex flex-auto">
          <pie1 />
        </div>
      </div>
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6">
        <div class="text-lg mb-4 ">
          客座名师数量及构成
        </div>
        <div class="flex flex-auto">
          <pie2 />
        </div>
      </div>
      <div class="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6">
        <div class="text-lg mb-4 ">
          全科教师数量及构成
        </div>
        <div class="flex flex-auto">
          <pie3 />
        </div>
      </div>
    </div>
  </div>
</template>
