tyyx_chart/src/pages/student.vue

<script setup lang="ts">
import bar from './student/bar.vue'
import lines from './student/lines.vue'
import radars1 from './student/radars1.vue'
import radars2 from './student/radars2.vue'
import jdqk from '~/assets/img/student/jdqk.png'
import xcpj from '~/assets/img/student/xcpj.png'
import yspj from '~/assets/img/student/yspj.png'
import yxzp from '~/assets/img/student/yxzp.png'
import yxzy from '~/assets/img/student/yxzy.png'
import zpqk from '~/assets/img/student/zpqk.png'


//本学期优秀美术作品排行
const secSchollGoodArtTitle = ref(["序号", "作品展名称", "策展人", "单位", "作品类型", "作品数量", "点赞数","浏览量"]);
const secSchollGoodArtContent = ref([
  {a1:1, a2: "家乡的古塔", a3: "流年", a4: "世纪路学校", a5: "课堂作业展", a6: 12, a7: 930, a8: 348 },
  {a1:2, a2: "戏曲人物", a3: "流年", a4: "世纪路学校", a5: "课堂作业展", a6: 12, a7: 930, a8: 348 },
  {a1:3, a2: "为自己的书设计封面", a3: "流年", a4: "世纪路学校", a5: "课堂作业展", a6: 12, a7: 930, a8: 348 },
  {a1:4, a2: "窗外的风景", a3: "流年", a4: "世纪路学校", a5: "课堂作业展", a6: 12, a7: 930, a8: 348 },
  {a1:5, a2: "色彩的世界", a3: "流年", a4: "世纪路学校", a5: "课堂作业展", a6: 12, a7: 930, a8: 348 },
])

//本周优秀作业排行
const secSchollWeekArtTitle = ref(["序号", "作品名称", "作者", "班级", "学校", "指导教师", "点赞数","浏览量"]);
const secSchollWeekArtContent = ref([
  {a1:1, a2: "家乡的古塔", a3: "流年", a4: 601, a5: "世纪路学校", a6: "李爱国", a7: 930, a8: 348 },
  {a1:2, a2: "戏曲人物", a3: "流年", a4: 401, a5: "世纪路学校", a6: "李爱国", a7: 930, a8: 348 },
  {a1:3, a2: "为自己的书设计封面", a3: "流年", a4: 402, a5: "世纪路学校", a6: "李爱国", a7: 930, a8: 348 },
  {a1:4, a2: "窗外的风景", a3: "流年", a4: 602, a5: "世纪路学校", a6: "李爱国", a7: 930, a8: 348 },
  {a1:5, a2: "色彩的世界", a3: "流年", a4: 601, a5: "世纪路学校", a6: "李爱国", a7: 930, a8: 348 },
])

</script>

<template>
  <div class="flex justify-between">
    <div class="flex flex-col justify-between" style="width:50%;">
      <div class="flex justify-between">
        <div class="px-3 py-2 w-410px h-332px border border-hex-0A337E bg-block" style="margin-right: 1%;">
          <radars1 />
        </div>
        <div class="px-3 py-2 w-410px h-332px border border-hex-0A337E bg-block">
          <radars2 />
        </div>
      </div>
      <div class="mt-4" >
        <div class="text-lg mb-4">本学期优秀美术作品排行</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title">
            <div class="wslice8" v-for="(item,index)  in secSchollGoodArtTitle " :key="index" >{{item }}</div>
          </div>
          <div class="flex justify-between normalTable_content" v-for="(item,index) in secSchollGoodArtContent" :key="index">
            <div class="normalTable_contentDetile">
             <div class="wslice8">{{ item.a1}}</div>
             <div class="wslice8">{{ item.a2 }}</div>
             <div class="wslice8">{{ item.a3 }}</div>
             <div class="wslice8">{{ item.a4 }}</div>
             <div class="wslice8">{{ item.a5 }}</div>
             <div class="wslice8">{{ item.a6 }}</div>
             <div class="wslice8">{{ item.a7 }}</div>
             <div class="wslice8">{{ item.a8 }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-4">
        <div class="text-lg mb-4 ">本周优秀作业排行</div>
        <div class="normalTable">
          <div class="flex justify-between normalTable_title">
            <div class="wslice8" v-for="(item,index)  in secSchollWeekArtTitle " :key="index" >{{item }}</div>
          </div>
          <div class="flex justify-between normalTable_content" v-for="(item,index) in secSchollWeekArtContent" :key="index">
            <div class="normalTable_contentDetile">
             <div class="wslice8">{{ item.a1}}</div>
             <div class="wslice8">{{ item.a2 }}</div>
             <div class="wslice8">{{ item.a3 }}</div>
             <div class="wslice8">{{ item.a4 }}</div>
             <div class="wslice8">{{ item.a5 }}</div>
             <div class="wslice8">{{ item.a6 }}</div>
             <div class="wslice8">{{ item.a7 }}</div>
             <div class="wslice8">{{ item.a8 }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flex flex-col justify-between " style="width:49%;">
      <div class="w-full h-450px px-5 py-4 border border-hex-0A337E bg-block">
        <bar />
      </div>
      <div class="w-full h-450px px-5 py-4 border border-hex-0A337E bg-block" style="margin-top: 2%;">
        <lines />
      </div>
    </div>

  </div>
</template>

<style scoped>
.wslice8{
  width: 12%;
}
.wslice7{
  width: 14%;
}
.wslice6{
  width: 16%;
}
.wslice5{
  width: 20%;
}
.wslice4{
  width: 25%;
}

.normalTable_title{
  height:50px;
  line-height: 50px;
  box-sizing: border-box;
  padding:0 2%;
  background: linear-gradient(90deg,rgba(11,38,147,1) 0%, rgba(27,66,131,0) 100%);
  font-size: 14px;
  font-weight: normal;
  
}
.normalTable_title div{
  text-align: center;
}

.normalTable_content{
  display: flex;
  justify-content: space-between;
  height:40px;
  line-height:40px;
  box-sizing: border-box;
  padding:0 2%;
  background-color: rgba(0,22,68, 0.5);
}
.normalTable_contentDetile{
  width:100%;
  display: flex;
  flex-direction: row;
  justify-content:space-between;

}
.normalTable_contentDetile div{
  text-align: center;
}
</style>