<script setup lang="ts">
import liquidfill from './teaching/liquidfill.vue'
import pie from './teaching/pie.vue'
import kaike_qushi from '~/assets/img/teaching/kaike_qushi.png'
import kaike_qingkuang from '~/assets/img/teaching/kaike_qingkuang.png'
import youxiu_ziyuan from '~/assets/img/teaching/youxiu_ziyuan.png'
</script>

<template>
  <div class="flex justify-between">
    <div class="w-857px flex flex-col justify-between">
      <div class="w-full">
        <div class="text-lg py-4">
          优秀资源呈现
        </div>
        <img :src="youxiu_ziyuan" alt="">
      </div>
      <div class="w-full">
        <div class="text-lg py-4">
          近期开课情况
        </div>
        <img :src="kaike_qingkuang" alt="">
      </div>
    </div>
    <div class="w-965px flex flex-col justify-between ">
      <div class="w-full h-362px flex flex-col border border-hex-0A337E bg-block p-6 mt-15">
        <div class="text-lg mb-4 ">
          课程资源分布
        </div>
        <div class="flex flex-auto">
          <div class="w-1/2 h-full">
            <div class="flex items-end">
              <span class="text-sm ">基础课程资源数</span>
              <span class="text-xl ml-4">675</span>
            </div>
            <liquidfill :val=".35" />
          </div>
          <div class="w-1/2 h-full">
            <div class="flex items-end">
              <span class="text-sm">拓展课程资源数</span>
              <span class="text-xl ml-4">1238</span>
            </div>
            <liquidfill :val=".65" />
          </div>
        </div>
      </div>

      <div class="w-full flex  h-457px justify-between mt-7">
        <div class="w-405px h-full p-4 flex flex-col border border-hex-0A337E bg-block">
          <div class="text-lg py-4">
            教学场景分布
          </div>
          <div class="w-full flex-grow">
            <pie />
          </div>
        </div>
        <div class="w-528px h-full">
          <img :src="kaike_qushi" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
