静态 书写

src/App.vue

@@ -64,5 +64,21 @@ body {
 .active .switched {
   display: block;
 }
+
+.wslice8{
+  width: 12%;
+}
+.wslice7 {
+  width: 14%;
+}
+.wslice6 {
+  width: 16%;
+}
+
+.wslice4 {
+  width: 25%;
+}
+
+
 </style>
 

src/pages/school.vue

@@ -3,32 +3,162 @@ import fxykh from '~/assets/img/school/fxykh.png'
 import jbqk from '~/assets/img/school/jbqk.png'
 import syxxykh from '~/assets/img/school/syxxykh.png'
 import ysl from '~/assets/img/school/ysl.png'
+
+// 二级分校基本情况
+const secScholltableTitle = ref(["二级分校", "结对学校数量", "结对教师数量", "结对班级数量", "开课数量", "资源贡献数量", "线上教研次数", "覆盖学生数量"]);
+const secSchollTableContent = ref([
+  { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
+  { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
+  { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
+  { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
+  { schollName: "尚阳学校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 },
+  { schollName: "振东小校", linkNum: 1, linkTeacherNum: 2, linkClassMates: 3, startClassNum: 2, resourceControNum: 4, onlineTeachNum: 3, coverStudentNum: 120 }
+])
+
+//二级分校月考核数据表
+const secSchollYKTitle = ref(["学校", "硬件设施", "辐射范围", "教学管理", "教研活动", "教学效果", "总分"]);
+const secSchollYKContent = ref([
+  { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
+  { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
+  { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
+  { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
+  { a1: "尚阳学校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 },
+  { a1: "振东小校", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4, a7: 3 }
+])
+
+
+//受援学校月考核数据表
+const secSchollSupportTitle = ref(["学校", "硬件设施", "教学管理", "教研活动", "教学效果", "总分"]);
+const secSchollSupportContent = ref([
+  { a1: "河山", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+  { a1: "大麻", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+  { a1: "东方", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+  { a1: "河山", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+  { a1: "大麻", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+  { a1: "东方", a2: 1, a3: 2, a4: 3, a5: 2, a6: 4},
+])
+
+
 </script>
 
 <template>
   <div class="flex flex-col justify-between">
     <div class="flex justify-between">
-      <img :src="ysl" alt="">
-      <div>
-        <div class="text-lg mb-4 ">
-          二级分校基本情况
+      <!-- <div class="table">111</div> -->
+      <img :src="ysl" alt="" style="width:50%;">
+
+      <div style="width:49%;">
+        <div class="text-lg mb-2 ">二级分校基本情况</div>
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice8" v-for="(item,index)  in secScholltableTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="normalTable_content" v-for="(item,index) in secSchollTableContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice8" >{{ item.schollName}}</div>
+             <div class="wslice8" >{{ item.linkNum }}</div>
+             <div class="wslice8" >{{ item.linkTeacherNum }}</div>
+             <div class="wslice8" >{{ item.linkClassMates }}</div>
+             <div class="wslice8" >{{ item.startClassNum }}</div>
+             <div class="wslice8" >{{ item.resourceControNum }}</div>
+             <div class="wslice8" >{{ item.onlineTeachNum }}</div>
+             <div class="wslice8" >{{ item.coverStudentNum }}</div>
+            </div>
+          </div>
         </div>
-        <img :src="jbqk" alt="">
+        
       </div>
     </div>
     <div class="flex justify-between mt-4">
-      <div>
-        <div class="text-lg mb-4 ">
-          二级分校月考核数据表
+      <div style="width:49%;">
+        <div class="text-lg mb-2 ">二级分校月考核数据表</div>
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice7" v-for="(item,index)  in secSchollYKTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="flex justify-between normalTable_content" v-for="(item,index) in secSchollYKContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice7">{{ item.a1}}</div>
+             <div class="wslice7">{{ item.a2 }}</div>
+             <div class="wslice7">{{ item.a3 }}</div>
+             <div class="wslice7">{{ item.a4 }}</div>
+             <div class="wslice7">{{ item.a5 }}</div>
+             <div class="wslice7">{{ item.a6 }}</div>
+             <div class="wslice7">{{ item.a7 }}</div>
+            </div>
+          </div>
         </div>
-        <img :src="fxykh" alt="">
+
       </div>
-      <div>
-        <div class="text-lg mb-4 ">
-          受援学校月考核数据表
+      <div style="width:49%;">
+        <div class="text-lg mb-2 ">受援学校月考核数据表</div>
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice6" v-for="(item,index)  in secSchollSupportTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="flex justify-between normalTable_content" v-for="(item,index) in secSchollSupportContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice6">{{ item.a1}}</div>
+             <div class="wslice6">{{ item.a2 }}</div>
+             <div class="wslice6">{{ item.a3 }}</div>
+             <div class="wslice6">{{ item.a4 }}</div>
+             <div class="wslice6">{{ item.a5 }}</div>
+             <div class="wslice6">{{ item.a6 }}</div>
+            </div>
+          </div>
         </div>
-        <img :src="syxxykh" alt="">
+
       </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.wslice8{
+  width: 12%;
+}
+.wslice7{
+  width: 14%;
+}
+.wslice6{
+  width: 16%;
+}
+
+.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>

src/pages/student.vue

@@ -9,42 +9,143 @@ 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">
+    <div class="flex flex-col justify-between" style="width:50%;">
       <div class="flex justify-between">
-        <!-- <img :src="yspj" alt="">
-        <img :src="xcpj" alt=""> -->
-        <div class="px-3 py-2 w-410px h-332px border border-hex-0A337E bg-block">
+        <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 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>
-        <img :src="yxzp" alt="">
       </div>
       <div class="mt-4">
-        <div class="text-lg mb-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>
-        <img :src="yxzy" alt="">
       </div>
     </div>
-    <div class="flex flex-col justify-between w-960px">
-      <!-- <img :src="zpqk" alt=""> -->
+
+    <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">
+      <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>

src/pages/teacher.vue

@@ -6,36 +6,90 @@ 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'
+
+const secSchollTeacherTitle = ref(["全科教师", "协同数量", "教研次数", "教学效果","上传资源"]);
+const secSchollTeacherContent = ref([
+  { a1: "花花", a2: 28, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 28, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 28, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 28, a3: 8, a4: 5,a5:5, },
+  
+])
+
+const secSchollTeacher2Title = ref(["客座名师", "开课数量", "教研次数", "教学效果","上传资源"]);
+const secSchollTeacher2Content = ref([
+  { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
+  { a1: "花花", a2: 26, a3: 8, a4: 5,a5:5, },
+  
+])
+
 </script>
 
 <template>
   <div class="flex justify-between">
-    <div class="w-858px flex flex-col justify-between">
+    <div class="flex flex-col justify-between" style="width:49%;">
+      <div class="w-full ">
+        <div class="flex flex-row justify-between ">
+          <div>
+            <h4>参与教师</h4>
+            <div>1111</div>
+          </div>
+          <div>22</div>
+          <div>33</div>
+          <div>44</div>
+        </div>
+      </div>
+      <div class="w-full ">
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice5" v-for="(item,index)  in secSchollTeacherTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="normalTable_content" v-for="(item,index) in secSchollTeacherContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice5" >{{ item.a1}}</div>
+             <div class="wslice5" >{{ item.a2 }}</div>
+             <div class="wslice5" >{{ item.a3 }}</div>
+             <div class="wslice5" >{{ item.a4 }}</div>
+             <div class="wslice5" >{{ item.a5 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="w-full ">
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice5" v-for="(item,index)  in secSchollTeacher2Title " :key="index" >{{item }}</div>
+          </div>
+          <div class="normalTable_content" v-for="(item,index) in secSchollTeacher2Content" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice5" >{{ item.a1}}</div>
+             <div class="wslice5" >{{ item.a2 }}</div>
+             <div class="wslice5" >{{ item.a3 }}</div>
+             <div class="wslice5" >{{ item.a4 }}</div>
+             <div class="wslice5" >{{ item.a5 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
       <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-960px flex flex-col justify-between" style="width:50%;">
       <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="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="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6" style="margin-top: 1%;">
+        <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="w-full h-300px flex flex-col border border-hex-0A337E bg-block p-6" style="margin-top: 1%;">
+        <div class="text-lg mb-4 ">全科教师数量及构成</div>
         <div class="flex flex-auto">
           <pie3 />
         </div>
@@ -43,3 +97,54 @@ import top from '~/assets/img/teacher/top.png'
     </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>

src/pages/teaching.vue

@@ -4,29 +4,72 @@ 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'
+
+const secSchollResourceTitle = ref(["资源名称", "点击量", "点赞数", "下载数"]);
+const secSchollResourceContent = ref([
+  { a1: "童谣童话（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "家乡的古塔（教案）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "墙（教案）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "公交站台设计（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "流动的风景线（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "砖石上的雕刻（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "墙（教案）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "公交站台设计（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "流动的风景线（课件）", a2: 98150, a3: 220925, a4: 72645 },
+  { a1: "砖石上的雕刻（课件）", a2: 98150, a3: 220925, a4: 72645 }
+])
+
+const secSchollOpenClassTitle = ref(["", "昨日", "本周", "本月","累计"]);
+const secSchollOpenClassContent = ref([
+  { a1: "开课课时数", a2: 2, a3: 12, a4: 16, a5: 50, a6:216 },
+  { a1: "参与教师数", a2: 6, a3: 28, a4: 32,a5: 76, a6:189 },
+])
+
 </script>
 
 <template>
   <div class="flex justify-between">
-    <div class="w-857px flex flex-col justify-between">
+    <div class="flex flex-col justify-between" style="width:59%;">
+
       <div class="w-full">
-        <div class="text-lg py-4">
-          优秀资源呈现
+        <div class="text-lg py-4">优秀资源呈现</div>
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice4" v-for="(item,index)  in secSchollResourceTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="normalTable_content" v-for="(item,index) in secSchollResourceContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice4" >{{ item.a1}}</div>
+             <div class="wslice4" >{{ item.a2 }}</div>
+             <div class="wslice4" >{{ item.a3 }}</div>
+             <div class="wslice4" >{{ item.a4 }}</div>
+            </div>
+          </div>
         </div>
-        <img :src="youxiu_ziyuan" alt="">
       </div>
+
       <div class="w-full">
-        <div class="text-lg py-4">
-          近期开课情况
+        <div class="text-lg py-4">近期开课情况</div>
+        <div class="normalTable">
+          <div class="flex justify-between normalTable_title">
+            <div class="wslice5" v-for="(item,index)  in secSchollOpenClassTitle " :key="index" >{{item }}</div>
+          </div>
+          <div class="normalTable_content" v-for="(item,index) in secSchollOpenClassContent" :key="index">
+            <div class="normalTable_contentDetile" >
+             <div class="wslice5" >{{ item.a1}}</div>
+             <div class="wslice5" >{{ item.a2 }}</div>
+             <div class="wslice5" >{{ item.a3 }}</div>
+             <div class="wslice5" >{{ item.a4 }}</div>
+             <div class="wslice5" >{{ item.a5 }}</div>
+            </div>
+          </div>
         </div>
-        <img :src="kaike_qingkuang" alt="">
+
       </div>
     </div>
-    <div class="w-965px flex flex-col justify-between ">
+    <div class="w-965px flex flex-col justify-between " style="width:39%;">
       <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="text-lg mb-4 ">课程资源分布</div>
         <div class="flex flex-auto">
           <div class="w-1/2 h-full">
             <div class="flex items-end">
@@ -47,9 +90,7 @@ import youxiu_ziyuan from '~/assets/img/teaching/youxiu_ziyuan.png'
 
       <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="text-lg py-4">教学场景分布</div>
           <div class="w-full flex-grow">
             <pie />
           </div>
@@ -61,3 +102,55 @@ import youxiu_ziyuan from '~/assets/img/teaching/youxiu_ziyuan.png'
     </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>