add: 工作台

back/src/views/modules/workBench/components/bottom-view.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="bottom-view">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.bottom-view {
+    width: 100%;
+    height: 335px;
+    background: green;
+    box-sizing: border-box;
+}
+</style>

back/src/views/modules/workBench/components/center-view.vue

@@ -0,0 +1,19 @@
+<template>
+    <div class="center-view">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.center-view {
+    width: 100%;
+    height: 335px;
+    margin-bottom: 16px;
+    background: blue;
+    box-sizing: border-box;
+}
+</style>

back/src/views/modules/workBench/components/dept-chart-view.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="dept-box">
+        <div class="left-title-box">
+            <div class="content">
+                <!-- <img class="img" :src=""></img> -->
+                <div></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.dept-box {
+    width: 394px;
+    height: 252px;
+    margin: 16px;
+    background: pink;
+}
+</style>

back/src/views/modules/workBench/components/dept-todo-view.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="dept-box">
+
+    </div>
+</template>
+<script>
+export default {
+
+}
+</script>
+<style lang="scss" scoped>
+.dept-box {
+    width: 394px;
+    height: 252px;
+    margin: 16px;
+    background: pink;
+}
+</style>

back/src/views/modules/workBench/workBench.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="work-brnch-box">
+        <!-- 上 -->
+        <div class="flex-row-start top">
+            <div class="flex-row-start dept-left">
+                <dept-todo-view title="部门待办" :dataInfo="toToData"></dept-todo-view>
+                <dept-todo-view title="部门已办" :dataInfo="hasToDodoData"></dept-todo-view>
+            </div>
+            <div class="dept-chart-box"></div>
+        </div>
+        <!-- 中 -->
+        <div class="center">
+            <center-view></center-view>
+        </div>
+        <!-- 下 -->
+        <div class="bottom">
+            <bottom-view></bottom-view>
+        </div>
+    </div>
+</template>
+<script>
+import BottomView from '../workBench/components/bottom-view.vue'
+import CenterView from '../workBench/components/center-view.vue'
+import deptTodoView from '../workBench/components/dept-todo-view.vue'
+
+export default {
+    components: {
+        deptTodoView,
+        BottomView,
+        CenterView,
+    },
+    data() {
+        return {
+            // 部门待办
+            toToData: {
+                color: '#f86f01',
+                // imgSrc: require(''),
+            },
+            // 部门已办
+            hasToDodoData: {
+                color: '#21b107',
+            }
+        }
+    },
+    methods: {
+
+    },
+}
+</script>
+
+
+<style lang="scss" scoped>
+.margin-h-16 {
+    margin: 0 16px;
+}
+
+.flex-row-start {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.work-brnch-box {
+    .top {
+        height: 284px;
+        margin-bottom: 16px;
+        background: green;
+    }
+
+    .dept-left {
+        width: 836px;
+    }
+
+    .dept-chart-box {
+        width: 780px;
+        height: 100%;
+        background: orange;
+    }
+}
+</style>