sync

src/styles/headertop.scss

@@ -2,6 +2,7 @@ $headerTextColor: #ffffff;
 
 #app {
   .header-container {
+    display: none;
     position: fixed;
     top: 0;
     left: 0;

src/styles/variables.scss

@@ -21,7 +21,7 @@ $subMenuHover: #f0f2f5;
 
 $sideBarWidth: 210px;
 $siderBarCollapseWidth: 64px;
-$headerHeight: 120px;
+$headerHeight: 0px;
 
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

src/views/home/index.vue

@@ -3,38 +3,70 @@
     <grid-layout
       :layout.sync="layout"
       :col-num="14"
-      :row-height="30"
+      :row-height="40"
       :is-draggable="true"
       :is-resizable="true"
       :is-mirrored="false"
-      :vertical-compact="true"
-      :margin="[5, 5]"
+      :vertical-compact="false"
+      :margin="[10, 10]"
       :use-css-transforms="true"
     >
       <grid-item :key="layout[0].i" :x="layout[0].x" :y="layout[0].y" :w="layout[0].w" :h="layout[0].h" :i="layout[0].i">
-        <el-card class="box-card">
-          <el-row type="flex" justify="center">
-            <el-col :span="10"><el-input /></el-col>
-            <el-col :span="2"><el-button type="primary">search</el-button></el-col>
-          </el-row>
-        </el-card>
+        <el-row type="flex" justify="center" class="searh-row">
+          <el-col :span="10"><el-input placeholder="请输入搜索内容" /></el-col>
+          <el-col :span="2"><el-button type="primary" icon="el-icon-search">智搜</el-button></el-col>
+        </el-row>
       </grid-item>
       <grid-item :key="layout[1].i" :x="layout[1].x" :y="layout[1].y" :w="layout[1].w" :h="layout[1].h" :i="layout[1].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>biz</span>
-            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
+            <span>消息提醒</span>
+            <el-button style="float: right; padding: 3px 0" type="text">更多<i class="el-icon-arrow-right" /></el-button>
           </div>
-          <el-tabs>
-            <el-tab-pane label="待办" name="first">待办</el-tab-pane>
-            <el-tab-pane label="已办" name="second">已办</el-tab-pane>
-          </el-tabs>
+
+          <el-scrollbar style="height: 100%" :native="false">
+            <el-tabs class="card-tab-box" value="todo">
+              <el-tab-pane :label="'待办（'+ message.todo + '）'" name="todo">
+                <div class="filter-box">
+                  <span>筛选条件：</span>
+                  <el-radio-group v-model="message.filter" size="mini">
+                    <el-radio-button label="0">全部</el-radio-button>
+                    <el-radio-button label="1">任务类</el-radio-button>
+                    <el-radio-button label="2">通知类</el-radio-button>
+                    <el-radio-button label="3">超期提醒类</el-radio-button>
+                  </el-radio-group>
+                </div>
+                <el-table :data="message.todoData" :show-header="false" size="mini">
+                  <el-table-column width="40">
+                    <template>
+                      <el-avatar shape="square" size="small"><svg-icon icon-class="yujing" /></el-avatar>
+                    </template>
+                  </el-table-column>
+                  <el-table-column show-overflow-tooltip>
+                    <template slot-scope="scope">
+                      <div>{{ scope.row.title }} <span :class="'priority-box priority-level'+ scope.row.priority">{{ scope.row.priorityName }}</span> </div>
+                      <div>{{ scope.row.appName }}</div>
+                    </template>
+                  </el-table-column>
+                  <el-table-column prop="createDate" width="140" />
+                  <el-table-column prop="createUser" width="70" show-overflow-tooltip />
+                  <el-table-column width="80">
+                    <template>
+                      <el-button size="mini">不再提醒</el-button>
+                    </template>
+                  </el-table-column>
+                </el-table>
+              </el-tab-pane>
+              <el-tab-pane :label="'已办（'+ message.done + '）'" name="done">已办</el-tab-pane>
+            </el-tabs>
+          </el-scrollbar>
         </el-card>
+
       </grid-item>
       <grid-item :key="layout[2].i" :x="layout[2].x" :y="layout[2].y" :w="layout[2].w" :h="layout[2].h" :i="layout[2].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>system</span>
+            <span>我的业务</span>
             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
           </div>
         </el-card>
@@ -42,7 +74,7 @@
       <grid-item :key="layout[3].i" :x="layout[3].x" :y="layout[3].y" :w="layout[3].w" :h="layout[3].h" :i="layout[3].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>utils</span>
+            <span>我的应用</span>
             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
           </div>
           <el-carousel height="150px">
@@ -55,7 +87,7 @@
       <grid-item :key="layout[4].i" :x="layout[4].x" :y="layout[4].y" :w="layout[4].w" :h="layout[4].h" :i="layout[4].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>specification</span>
+            <span>专项工具</span>
             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
@@ -66,7 +98,7 @@
       <grid-item :key="layout[5].i" :x="layout[5].x" :y="layout[5].y" :w="layout[5].w" :h="layout[5].h" :i="layout[5].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>navigator</span>
+            <span>标准规范</span>
             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
@@ -77,7 +109,7 @@
       <grid-item :key="layout[6].i" :x="layout[6].x" :y="layout[6].y" :w="layout[6].w" :h="layout[6].h" :i="layout[6].i">
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <span>message</span>
+            <span>外部应用导航</span>
             <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
           </div>
           <div v-for="o in 4" :key="o" class="item">
@@ -111,7 +143,22 @@ export default {
         { 'x': 6, 'y': 8, 'w': 8, 'h': 4, 'i': '4' },
         { 'x': 6, 'y': 12, 'w': 8, 'h': 4, 'i': '5' },
         { 'x': 0, 'y': 16, 'w': 14, 'h': 2, 'i': '6' }
-      ]
+      ],
+      message: {
+        todo: 10,
+        done: 45,
+        filter: '0',
+        todoData: [
+          { 'id': 1, 'type': '1', 'app': 'zfbapt', 'appName': 'XXXX平台', 'priority': '1', 'priorityName': '紧急', 'title': '消息测试1', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台平台', 'priority': '2', 'priorityName': '一般', 'title': '消息测试2消息测试2', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXX平台台', 'priority': '2', 'priorityName': '一般', 'title': '我是一条消息3', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' },
+          { 'id': 2, 'type': '2', 'app': 'zfbapt', 'appName': 'XXXXXXXXXXXX平台', 'priority': '2', 'priorityName': '一般', 'title': '我也是一条消息4', 'createDate': '2023-07-09 16:01:02', 'createUser': '张三', 'status': '0' }
+        ]
+      }
 
     }
   },
@@ -164,19 +211,65 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
+$gridBgColor: #ffffff;
+
+.searh-row {
+  height: 100%;
+  align-items: center;
+  background-color: $gridBgColor;
+}
+
+.box-card {
+  height: 100%;
+
+  ::v-deep .el-card__header{
+    padding: 10px 10px !important;
+    span{
+      font-weight: bold;
+    }
+  }
+
+  ::v-deep .el-card__body {
+      padding: 0 10px 10px 10px;
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+}
+
+.card-tab-box  {
+  ::v-deep {
+    .el-tabs__item {
+      font-size: 18px !important;
+    }
+    .el-table .cell {
+      padding-left: 0 !important;
+    }
   }
 }
 
+.filter-box>span {
+  display: inline-block;
+  font-size: 14px;
+}
+
+.priority-box{
+  display: inline-block;
+  padding: 0 5px;
+  color: #ffffff;
+}
+.priority-level1{
+  background: #F85252;
+}
+.priority-level2{
+  background: orange;
+}
+.priority-level3{
+  background: yellow;
+}
+.priority-level4{
+  background: blue;
+}
+
 .vue-grid-item:not(.vue-grid-placeholder) {
-    background: #ccc;
-    border: 1px solid black;
+    background: #e0dede;
 }
 
 .vue-grid-item .resizing {
@@ -184,7 +277,7 @@ export default {
 }
 
 .vue-grid-item .static {
-    background: #cce;
+    background: rgb(128, 128, 237);
 }
 
 .vue-grid-item .text {