Home V1.0

src/views/home/components/Business.vue

@@ -4,33 +4,22 @@
       <span>Business</span>
       <el-button style="float: right; padding: 3px 0" type="text">More<i class="el-icon-arrow-right" /></el-button>
     </div>
-    <el-tabs class="business-content" value="todo">
-      <el-tab-pane label="All" name="all">
-        <el-table :data="todoData" :show-header="false" size="mini" height="calc(100% - 30px)">
-          <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="105">
-            <template>
-              <el-button size="mini">不再提醒</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-tab-pane>
-      <el-tab-pane v-if="type in bizType" :key="type" :label="type" :name="type">
-        <el-button v-for="item in bizData[type]" :key="item.id" type="test">{{ item.name }}</el-button>
-      </el-tab-pane>
-    </el-tabs>
+
+    <el-scrollbar class="business-content">
+      <el-tabs value="all">
+        <el-tab-pane label="All" name="all">
+          <div v-for="bizType in bizTypeData" :key="bizType" class="type-box">
+            <div class="type-title">{{ bizType }}</div>
+            <el-button v-for="item in bizData[bizType]" :key="item.id" type="test">{{ item.name }}</el-button>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane v-for="bizType in bizTypeData" :key="bizType" :label="bizType" :name="bizType">
+          <div class="type-box">
+            <el-button v-for="item in bizData[bizType]" :key="item.id" type="test">{{ item.name }}</el-button>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-scrollbar>
   </el-card>
 </template>
 
@@ -49,21 +38,34 @@ export default {
   data() {
     return {
       rawData: [
-        { id: '1', code: '1', name: 'System1', type: 'type1', link: '', icon: 'icon-1' },
-        { id: '2', code: '2', name: 'System2', type: 'type1', link: '', icon: 'icon-2' },
-        { id: '3', code: '3', name: 'System3', type: 'type1', link: '', icon: 'icon-3' },
-        { id: '4', code: '4', name: 'System4', type: 'type1', link: '', icon: 'icon-4' },
-        { id: '5', code: '5', name: 'System5', type: 'type2', link: '', icon: 'icon-5' },
-        { id: '6', code: '6', name: 'System6', type: 'type2', link: '', icon: 'icon-6' },
-        { id: '7', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
-        { id: '8', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
-        { id: '9', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
-        { id: '10', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
-        { id: '11', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
-        { id: '12', code: '12', name: 'System12', type: 'type3', link: '', icon: 'icon-12' },
-        { id: '13', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' }
+        { id: '0', code: '1', name: 'SystemSSSSSSSSSSSSSSSSSS1', type: 'type1', link: '', icon: 'icon-1' },
+        { id: '1', code: '2', name: 'SystemA2', type: 'type1', link: '', icon: 'icon-2' },
+        { id: '2', code: '3', name: 'SystemBC3', type: 'type1', link: '', icon: 'icon-3' },
+        { id: '3', code: '4', name: 'SystemDEF4', type: 'type1', link: '', icon: 'icon-4' },
+        { id: '4', code: '5', name: 'SystemGGGGGGGGG5', type: 'type2', link: '', icon: 'icon-5' },
+        { id: '5', code: '6', name: 'SystemHH6', type: 'type2', link: '', icon: 'icon-6' },
+        { id: '6', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
+        { id: '7', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
+        { id: '8', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
+        { id: '9', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
+        { id: '10', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
+        { id: '11', code: '12', name: 'System12', type: 'type4', link: '', icon: 'icon-12' },
+        { id: '12', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' },
+        { id: '13', code: '1', name: 'SystemSSSSSSSSSSSSSSSSSS1', type: 'type1', link: '', icon: 'icon-1' },
+        { id: '14', code: '2', name: 'SystemA2', type: 'type1', link: '', icon: 'icon-2' },
+        { id: '15', code: '3', name: 'SystemBC3', type: 'type1', link: '', icon: 'icon-3' },
+        { id: '16', code: '4', name: 'SystemDEF4', type: 'type1', link: '', icon: 'icon-4' },
+        { id: '17', code: '5', name: 'SystemGGGGGGGGG5', type: 'type2', link: '', icon: 'icon-5' },
+        { id: '18', code: '6', name: 'SystemHH6', type: 'type2', link: '', icon: 'icon-6' },
+        { id: '19', code: '7', name: 'System7', type: 'type2', link: '', icon: 'icon-7' },
+        { id: '20', code: '8', name: 'System8', type: 'type3', link: '', icon: 'icon-8' },
+        { id: '21', code: '9', name: 'System9', type: 'type3', link: '', icon: 'icon-9' },
+        { id: '22', code: '10', name: 'System10', type: 'type3', link: '', icon: 'icon-10' },
+        { id: '23', code: '11', name: 'System11', type: 'type3', link: '', icon: 'icon-11' },
+        { id: '24', code: '12', name: 'System12', type: 'type4', link: '', icon: 'icon-12' },
+        { id: '25', code: '13', name: 'System13', type: 'type3', link: '', icon: 'icon-13' }
       ],
-      bizType: ['type1', 'type2', 'type3', 'type4']
+      bizTypeData: ['type1', 'type2', 'type3', 'type4']
     }
   },
   computed: {
@@ -99,6 +101,36 @@ export default {
 
 <style lang="scss" scoped>
 .business-content {
+  .type-box {
+    margin-bottom: 5px;
+    .el-button + .el-button {
+      margin-left: 0px !important;
+    }
+    .el-button {
+      margin-right: 10px;
+      margin-bottom: 5px;
+    }
+  }
+  .type-title {
+    font-size: 19px;
+    color: rgba(0,0,0,0.85);
+    margin-bottom: 10px;
+  }
 
+  ::v-deep {
+    .el-tabs__header {
+      height: 40px;
+    }
+    .el-tabs__item {
+      font-size: 18px !important;
+    }
+    .el-tabs__content {
+      height: calc(100% - 55px);
+
+      .el-tab-pane{
+        height: 100%;
+      }
+    }
+  }
 }
 </style>

src/views/home/components/Link.vue

@@ -40,20 +40,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-box {
-  ::v-deep {
-    .el-scrollbar__wrap{
-      overflow-x: hidden;
-    }
-    .el-scrollbar__bar.is-horizontal {
-      display: none;
-    }
-    .el-table__row .cell {
-      padding-left: 0 !important;
-    }
-  }
-}
-
 .link-item {
   display: inline-block;
   height: 43px;

src/views/home/components/Specification.vue

@@ -39,17 +39,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.card-box {
-  ::v-deep {
-    .el-scrollbar__wrap{
-      overflow-x: hidden;
-    }
-    .el-scrollbar__bar.is-horizontal {
-      display: none;
-    }
-    .el-table__row .cell {
-      padding-left: 0 !important;
-    }
-  }
-}
 </style>

src/views/home/components/System.vue

@@ -102,9 +102,12 @@ export default {
   .system-box {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
+    width: 790px !important;
+    margin: 0 auto;
 
     .system-item-box {
-      width: 156px;
+      width: 150px;
       height: 110px;
       border: 1px solid rgba(0,0,0,0.09);
       border-radius:  10px;
@@ -112,7 +115,7 @@ export default {
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      margin: 5px 10px 5px 0;
+      margin: 5px 0;
 
       .system-title {
         font-size: 16px;

src/views/home/index.vue

@@ -11,7 +11,7 @@
       :margin="[10, 10]"
       :use-css-transforms="true"
     >
-      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :class="{'hidden': item.i !== '2'}">
+      <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
         <component :is="components[item.i]" class="card-box" :page-size="item.i === '4' ? 5 : 10" />
       </grid-item>
     </grid-layout>
@@ -47,23 +47,14 @@ export default {
   },
   data() {
     return {
-      // layout: [
-      //   { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
-      //   { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
-      //   { 'x': 0, 'y': 14, 'w': 6, 'h': 7, 'i': '2' },
-      //   { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
-      //   { 'x': 6, 'y': 10, 'w': 8, 'h': 5, 'i': '4' },
-      //   { 'x': 6, 'y': 15, 'w': 8, 'h': 6, 'i': '5' },
-      //   { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
-      // ],
       layout: [
-        { 'x': 1, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
-        { 'x': 1, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
-        { 'x': 0, 'y': 0, 'w': 6, 'h': 7, 'i': '2' },
-        { 'x': 1, 'y': 0, 'w': 8, 'h': 8, 'i': '3' },
-        { 'x': 1, 'y': 8, 'w': 8, 'h': 5, 'i': '4' },
-        { 'x': 1, 'y': 0, 'w': 8, 'h': 6, 'i': '5' },
-        { 'x': 1, 'y': 0, 'w': 14, 'h': 4, 'i': '6' }
+        { 'x': 0, 'y': 0, 'w': 14, 'h': 2, 'i': '0' },
+        { 'x': 0, 'y': 2, 'w': 6, 'h': 12, 'i': '1' },
+        { 'x': 0, 'y': 14, 'w': 6, 'h': 8, 'i': '2' },
+        { 'x': 6, 'y': 2, 'w': 8, 'h': 8, 'i': '3' },
+        { 'x': 6, 'y': 10, 'w': 8, 'h': 5, 'i': '4' },
+        { 'x': 6, 'y': 15, 'w': 8, 'h': 7, 'i': '5' },
+        { 'x': 0, 'y': 21, 'w': 14, 'h': 4, 'i': '6' }
       ],
       components: ['Search', 'Message', 'Business', 'System', 'System', 'Specification', 'Link']
     }
@@ -76,7 +67,7 @@ export default {
   created() {
   },
   mounted() {
-    this.calcLayoutWidth()
+    // this.calcLayoutWidth()
     this.connect()
   },
   beforeDestroy() {
@@ -125,10 +116,6 @@ export default {
 <style lang="scss" scoped>
 $msgCardHeaderHeight: 43px;
 
-.vue-grid-item.hidden {
-  display: none;
-}
-
 .card-box {
   height: 100%;
 
@@ -148,6 +135,16 @@ $msgCardHeaderHeight: 43px;
         height: 100%;
       }
     }
+
+    .el-scrollbar__wrap{
+      overflow-x: hidden;
+    }
+    .el-scrollbar__bar.is-horizontal {
+      display: none;
+    }
+    .el-table__row .cell {
+      padding-left: 0 !important;
+    }
   }
 }