diff --git a/back/src/views/modules/workBench/components/bottom-view.vue b/back/src/views/modules/workBench/components/bottom-view.vue
index 93c9b0ca..b73cc86e 100644
--- a/back/src/views/modules/workBench/components/bottom-view.vue
+++ b/back/src/views/modules/workBench/components/bottom-view.vue
@@ -1,11 +1,12 @@
 <template>
     <div class="bottom-view">
-
+       
     </div>
 </template>
 <script>
+import FrequencyTop5View from './frequency-top5-view.vue';
 export default {
-
+    components: { FrequencyTop5View }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/back/src/views/modules/workBench/components/center-view.vue b/back/src/views/modules/workBench/components/center-view.vue
index a435f270..9099cf9a 100644
--- a/back/src/views/modules/workBench/components/center-view.vue
+++ b/back/src/views/modules/workBench/components/center-view.vue
@@ -1,19 +1,32 @@
 <template>
     <div class="center-view">
-
+        <!-- 频率 -->
+        <frequency-top-5-view></frequency-top-5-view>
+        <!-- 趋势 -->
+        <trend-view></trend-view>
+        <!-- 风险 -->
+        <risk-view></risk-view>
     </div>
 </template>
 <script>
+import frequencyTop5View from './frequency-top5-view.vue'
+import RiskView from './risk-view.vue'
+import TrendView from './trend-view.vue'
+
 export default {
+    components: { frequencyTop5View, TrendView, RiskView },
 
 }
 </script>
+
 <style lang="scss" scoped>
 .center-view {
     width: 100%;
     height: 335px;
     margin-bottom: 16px;
-    background: blue;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 </style>
\ No newline at end of file
diff --git a/back/src/views/modules/workBench/components/frequency-top5-view.vue b/back/src/views/modules/workBench/components/frequency-top5-view.vue
new file mode 100644
index 00000000..4e5f2742
--- /dev/null
+++ b/back/src/views/modules/workBench/components/frequency-top5-view.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="frequency">
+        555
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.frequency {
+    width: 540px;
+    height: 335px;
+    background: pink;
+    margin-right: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/workBench/components/risk-view.vue b/back/src/views/modules/workBench/components/risk-view.vue
new file mode 100644
index 00000000..879d05e9
--- /dev/null
+++ b/back/src/views/modules/workBench/components/risk-view.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="risk">
+        555
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.risk {
+    width: 540px;
+    height: 335px;
+    background: pink;
+}
+</style>
\ No newline at end of file
diff --git a/back/src/views/modules/workBench/components/trend-view.vue b/back/src/views/modules/workBench/components/trend-view.vue
new file mode 100644
index 00000000..b195debd
--- /dev/null
+++ b/back/src/views/modules/workBench/components/trend-view.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="trend">
+        趋势
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.trend {
+    width: 544px;
+    height: 335px;
+    background: pink;
+    margin-right: 4px;
+}
+</style>
\ No newline at end of file