新增静态

src/pages/home/line1.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+  color: ['#37A2FF','#80FFA5', '#00DDFF', '#FF0087', '#FFBF00'],
+    tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['2021年9月', '2021年10月', '2021年11月', '2021年12月','2022年1月', '2022年2月', '2022年3月', '2022年4月','2022年5月', '2022年6月', '2022年7月', '2022年8月']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+        splitLine: {
+          show: false 
+      },
+    }
+  ],
+  series: [
+    {
+      name: '覆盖率（%）',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      lineStyle: {
+        width: 0
+      },
+      showSymbol: false,
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(34,143,255,1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(34,143,255,0.1)'
+          }
+        ])
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [1.3, 3.02, 3, 2,5, 1.6, 2.7, 3,7, 3, 5, 3]
+    },
+  ]
+})
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/home/line2.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+  color: ['#ED4E22','#80FFA5', '#00DDFF', '#FF0087', '#FFBF00'],
+    tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['2021年9月', '2021年10月', '2021年11月', '2021年12月','2022年1月', '2022年2月', '2022年3月', '2022年4月','2022年5月', '2022年6月', '2022年7月', '2022年8月']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',splitLine: {
+          show: false 
+      },
+    }
+  ],
+  series: [
+    {
+      name: '贡献度（%）',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      lineStyle: {
+        width: 0
+      },
+      showSymbol: false,
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(244,93,34,1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(244,93,34,0.1)'
+          }
+        ])
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [1.3, 3.02, 3, 2,5, 1.6, 2.7, 3,7, 3, 5, 3]
+    },
+  ]
+})
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/home/line3.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+  color: ['#80FFA5','#37A2FF', '#00DDFF', '#FF0087', '#FFBF00'],
+    tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      label: {
+        backgroundColor: '#6a7985'
+      }
+    }
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      data: ['2021年9月', '2021年10月', '2021年11月', '2021年12月','2022年1月', '2022年2月', '2022年3月', '2022年4月','2022年5月', '2022年6月', '2022年7月', '2022年8月']
+    }
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      splitLine: {
+          show: false 
+      },
+    }
+  ],
+  series: [
+    {
+      name: '应用度（%）',
+      type: 'line',
+      stack: 'Total',
+      smooth: true,
+      lineStyle: {
+        width: 0
+      },
+      showSymbol: false,
+      areaStyle: {
+        opacity: 0.8,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: 'rgb(9,180,177,1)'
+          },
+          {
+            offset: 1,
+            color: 'rgba(9,180,177,0.1)'
+          }
+        ])
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [1.3, 3.02, 3, 2,5, 1.6, 2.7, 3,7, 3, 5, 3]
+    },
+  ]
+})
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>

src/pages/index.vue

@@ -1,66 +1,48 @@
 <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 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 line1 from './home/line1.vue';
+import line2 from './home/line2.vue';
+import line3 from './home/line3.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">
+    <div class="h-full flex flex-col justify-between" style="width: 25%;">
+      <div class="border border-hex-0A337E bg-block p-4  h-1/2">
         <radars />
       </div>
-      <div class="border border-hex-0A337E bg-block p-4 h-442px">
+      <div class="border border-hex-0A337E bg-block mt-4 h-1/2">
         <bar1 />
       </div>
     </div>
-    <div class="w-900px flex flex-col justify-between ">
+    <div class="flex flex-col justify-between " style="width: 48%;">
       <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 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 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 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 class="w-140px text-right">结对教师数：</div>
+            <div class="text-28px mr-1">75</div>
             <div>个(市外：20个)</div>
           </div>
         </div>
@@ -113,17 +95,46 @@ import yyd from '~/assets/img/home/yyd.png'
       <geoblock />
 
       <div class="flex justify-between h-240px">
-        <blocks class="w-557px border border-hex-0A337E bg-block py-6 px-8 " />
+        <blocks class="w-557px border border-hex-0A337E bg-block py-6 px-8 mr-4" />
         <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">
+    <div class="h-full flex flex-col justify-between" style="width: 25%;">
+      <div class="border border-hex-0A337E bg-block p-4 mb-4 h-1/4">
         <bar2 />
       </div>
-      <img :src="fgl" alt="">
-      <img :src="gxd" alt="">
-      <img :src="yyd" alt="">
+      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
+        <div class="w-full flex flex-row justify-between p-2">
+          <div class="left_1">覆盖率·参与或者结对班级覆盖率</div>
+          <div class="left_2">1.0728%</div>
+        </div>
+        <line1 />
+      </div>
+      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
+        <div class="w-full flex flex-row justify-between p-2">
+          <div class="left_1">贡献度·教师周人均开课数</div>
+          <div class="left_2">0.1%</div>
+        </div>
+        <line2 />
+      </div>
+      <div class="border border-hex-0A337E bg-block mb-4 h-1/4">
+        <div class="w-full flex flex-row justify-between p-2">
+          <div class="left_1">应用度·班级周均上课次数</div>
+          <div class="left_2">0.3%</div>
+        </div>
+        <line3 />
+      </div>
     </div>
   </div>
 </template>
+
+<style scoped>
+.left_1{
+  text-align: left;
+  font-size: 14px;;
+}
+.left_2{
+  text-align: right;
+  color:#0FEEF1;
+}
+</style>

src/pages/teaching.vue

@@ -49,7 +49,7 @@ const secSchollOpenClassContent = ref([
       </div>
 
       <div class="w-full">
-        <div class="text-lg py-4">近期开课情况</div>
+        <div class="text-lg py-2">近期开课情况</div>
         <div class="normalTable">
           <div class="flex justify-between normalTable_title">
             <div class="wslice5" v-for="(item,index)  in secSchollOpenClassTitle " :key="index" >{{item }}</div>