diff --git a/src/render/components/CenterCmp.vue b/src/render/components/CenterCmp.vue
new file mode 100644
index 0000000..1ecf186
--- /dev/null
+++ b/src/render/components/CenterCmp.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="center-cmp">
+    <div class="cc-header">
+      <dv-decoration-1 style="width:200px;height:50px;" />
+      <div>机电设备总数</div>
+      <dv-decoration-1 style="width:200px;height:50px;" />
+    </div>
+
+    <div class="cc-details">
+      <div class="card">2</div>
+      <div class="card">1</div>
+      <div class="card">3</div>
+      <div class="card">7</div>
+    </div>
+
+    <div class="cc-main-container">
+      <div class="ccmc-left">
+        <div class="station-info">
+          收费站<span>1315</span>
+        </div>
+        <div class="station-info">
+          监控中心<span>415</span>
+        </div>
+      </div>
+
+      <dv-active-ring-chart class="ccmc-middle" :config="config" />
+
+      <div class="ccmc-right">
+        <div class="station-info">
+          <span>90</span>道路外场
+        </div>
+        <div class="station-info">
+          <span>317</span>其他
+        </div>
+      </div>
+
+      <LabelTag :config="labelConfig" />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/render/components/Layout/BorderBox3.vue b/src/render/components/Layout/BorderBox3.vue
new file mode 100644
index 0000000..8841232
--- /dev/null
+++ b/src/render/components/Layout/BorderBox3.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="dv-border-box-3" ref="dom">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
+      `" />
+
+      <polyline class="dv-bb3-line1"
+        :stroke="stroke"
+        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="stroke"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="stroke"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="stroke"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+
+const stroke          = '#2862b7'
+const backgroundColor = 'transparent'
+
+const dom    = ref(null)
+const width  = ref(0)
+const height = ref(0)
+onMounted(() => {
+	width.value  = dom.value.clientWidth
+	height.value = dom.value.clientHeight
+})
+
+
+</script>
+
+<style scoped>
+.dv-border-box-3 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.dv-border-svg-container {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	top: 0px;
+	left: 0px;
+}
+
+.dv-border-svg-container> polyline {
+	fill: none;
+}
+
+.dv-bb3-line1 {
+	stroke-width: 3;
+}
+
+.dv-bb3-line2 {
+	stroke-width: 1;
+}
+
+.border-box-content {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 25px;
+}
+</style>
\ No newline at end of file
diff --git a/src/render/components/Layout/Decoration1.vue b/src/render/components/Layout/Decoration1.vue
new file mode 100644
index 0000000..dea37d8
--- /dev/null
+++ b/src/render/components/Layout/Decoration1.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="dv-decoration-1" ref="dom">
+    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+
+      <template
+        v-for="(point, i) in points"
+      >
+        <rect
+          v-if="Math.random() > 0.6"
+          :key="i"
+          :fill="mergedColor[0]"
+          :x="point[0] - halfPointSideLength"
+          :y="point[1] - halfPointSideLength"
+          :width="pointSideLength"
+          :height="pointSideLength"
+        >
+          <animate
+            v-if="Math.random() > 0.6"
+            attributeName="fill"
+            :values="`${mergedColor[0]};transparent`"
+            dur="1s"
+            :begin="Math.random() * 2"
+            repeatCount="indefinite"
+          />
+        </rect>
+      </template>
+
+      <rect
+        v-if="rects[0]"
+        :fill="mergedColor[1]"
+        :x="rects[0][0] - pointSideLength"
+        :y="rects[0][1] - pointSideLength"
+        :width="pointSideLength * 2"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="height"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="y"
+          :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+
+      <rect
+        v-if="rects[1]"
+        :fill="mergedColor[1]"
+        :x="rects[1][0] - 40"
+        :y="rects[1][1] - pointSideLength"
+        :width="40"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          values="0;40;0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const pointSideLength     = 2.5
+const halfPointSideLength = pointSideLength / 2
+</script>
+
+<style>
+.dv-decoration-1 {
+  width: 100%;
+  height: 100%;
+}
+
+.dv-decoration-1 svg {
+  transform-origin: left top;
+}
+</style>
diff --git a/src/render/components/Layout/ScrollBoard.vue b/src/render/components/Layout/ScrollBoard.vue
new file mode 100644
index 0000000..2d83f8c
--- /dev/null
+++ b/src/render/components/Layout/ScrollBoard.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="dv-scroll-board" ref="dom">
+    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
+      <div
+        class="header-item"
+        v-for="(headerItem, i) in header"
+        :key="`${headerItem}${i}`"
+        :style="`
+          height: ${mergedConfig.headerHeight}px;
+          line-height: ${mergedConfig.headerHeight}px;
+          width: ${widths[i]}px;
+        `"
+        :align="aligns[i]"
+        v-html="headerItem"
+      />
+    </div>
+
+    <div
+      v-if="mergedConfig"
+      class="rows"
+      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
+    >
+      <div
+        class="row-item"
+        v-for="(row, ri) in rows"
+        :key="`${row.toString()}${row.scroll}`"
+        :style="`
+          height: ${heights[ri]}px;
+          line-height: ${heights[ri]}px;
+          background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+        `"
+      >
+        <div
+          class="ceil"
+          v-for="(ceil, ci) in row.ceils"
+          :key="`${ceil}${ri}${ci}`"
+          :style="`width: ${widths[ci]}px;`"
+          :align="aligns[ci]"
+          v-html="ceil"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+
+defineProps({
+	header: Array,
+	data: Array,
+	index: Boolean,
+	columnWidth: Array,
+  align: Array,
+  rowNum: Number,
+  headerBGC: String,
+  headerHeight: Number,
+  oddRowBGC: String,
+  evenRowBGC: String
+})
+
+const dom    = ref(null)
+</script>
\ No newline at end of file
diff --git a/src/render/components/Map copy.vue b/src/render/components/Map copy.vue
new file mode 100644
index 0000000..1f309ef
--- /dev/null
+++ b/src/render/components/Map copy.vue	
@@ -0,0 +1,63 @@
+<template>
+  <div id="map-container" class="w-h-full"></div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+let map 			  = null
+const initMap 	= () => {
+  if (typeof(BMapGL) == 'undefined') {
+    alert('地图api加载失败')
+    return
+  }
+
+  map = new BMapGL.Map('map-container', {
+    style: {
+      styleJson: styleJson2
+    }
+  });
+  map.centerAndZoom(new BMapGL.Point(79.068798, 39.868490), 11);
+  map.enableScrollWheelZoom(true);
+  map.setTilt(50);
+}
+
+const loadPrism = () => {
+  if (!map) return
+
+  const bd = new BMapGL.Boundary();
+  bd.get('图木舒克', function (rs) {
+      const count = rs.boundaries.length;
+      
+      for (let i = 0; i < count; i++) {
+        const path   = [];
+        const str    = rs.boundaries[i].replace(' ', '');
+        const points = str.split(';');
+
+        for (let j = 0; j < points.length; j++) {
+          const lng = points[j].split(',')[0];
+          const lat = points[j].split(',')[1];
+          path.push(new BMapGL.Point(lng, lat));
+        }
+
+        const prism = new BMapGL.Prism(path, 1000, {
+          topFillColor: '#5679ea',
+          topFillOpacity: 0.6,
+          sideFillColor: '#5679ea',
+          sideFillOpacity: 0.9
+        });
+
+        map.addOverlay(prism);
+      }
+  });
+}
+
+onMounted(() => {
+  initMap()
+  loadPrism()
+})
+
+const update = () => console.log
+
+defineExpose({ update })
+</script>
\ No newline at end of file
diff --git a/src/render/components/ScrollBoardTable.vue b/src/render/components/ScrollBoardTable.vue
new file mode 100644
index 0000000..1f1061a
--- /dev/null
+++ b/src/render/components/ScrollBoardTable.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="satellite-table overflow-hidden">
+    <div class="table-header flex">
+      <div
+        class="table-header-item leading-10 flex-1"
+        v-for="(headerItem, i) in header"
+        :key="`${headerItem}${i}`"
+        v-html="headerItem"
+      />
+    </div>
+
+    <div class="table-body flex flex-col overflow-hidden">
+      <div
+        class="row-item flex"
+        v-for="(row, ri) in satellites"
+        :key="`${row.toString()}`"
+        :style="`
+          line-height: 40px;
+          background-color: ${ri % 2 === 0 ? evenRowBGC : oddRowBGC};
+        `"
+      >
+        <div
+          class="ceil flex-1"
+          v-for="(ceil, ci) in row"
+          :key="`${ceil}${ri}${ci}`"
+          v-html="ceil"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const oddRowBGC  = '#003B51'
+const evenRowBGC = '#0A2732'
+
+const header = ['#', '卫星编号', '仰角', '方位角', '载噪比']
+const satellites = reactive([
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 2, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+  { id: 1, SVID: '1', ele: '1', az: '1', cn0: '1' },
+])
+</script>
+
+<style scoped>
+.table-header {
+  background-color: rgb(25, 129, 246);
+}
+</style>
\ No newline at end of file
diff --git a/src/render/page/InfoMonitorPage.vue b/src/render/page/InfoMonitorPage.vue
index 46888b8..4332b7b 100644
--- a/src/render/page/InfoMonitorPage.vue
+++ b/src/render/page/InfoMonitorPage.vue
@@ -3,11 +3,13 @@
     <TheHeader title="卫星信息监控平台" />
 
     <div class="main-content flex-1 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
-      <div>1</div>
-      <div>2</div>
-      <div class="row-span-2">3</div>
-      <div>4</div>
-      <div>5</div>
+      <border-box-3>
+        <scroll-board-table />
+      </border-box-3>
+      <border-box-3></border-box-3>
+      <border-box-3 class="row-span-2"></border-box-3>
+      <border-box-3></border-box-3>
+      <border-box-3></border-box-3>
     </div>
   </full-screen-container>
 </template>
@@ -15,4 +17,6 @@
 <script lang="ts" setup>
 import FullScreenContainer from '../components/Layout/FullScreenContainer.vue'
 import TheHeader from '../components/Layout/TheHeader.vue'
+import BorderBox3 from '../components/Layout/BorderBox3.vue'
+import ScrollBoardTable from '../components/ScrollBoardTable.vue'
 </script>