资金往来敏感词预警排名

src/components/scroll-table/index.html

@@ -3,7 +3,7 @@
       <div class="table_header table_one clearfix">
         <div v-for="header in headers" :key="header" class="item test_center">{{header}}</div>
       </div>
-      <div class="table_bodyer">
+      <div class="table_bodyer" :style="[bodyStyle]">
         <scroll :data="data" class="seamless-warp" :class-option="swiperOption">
           <div v-for="(line, index) in data" class="table_one clearfix item_height">
             <div v-for="(item, index) in line" class="item test_center ellipsis_1" >{{item }}</div>

src/components/scroll-table/index.js

@@ -16,6 +16,10 @@ export default {
       type: [String, Number],
       default: '100'
     },
+    bodyHeight: {
+      type: [Number],
+      default: 200
+    },
     headers: {
       type: Array,
       default: function () {
@@ -42,6 +46,11 @@ export default {
     dataLength: function () {
       return this.dataList.length;
     },
+    bodyStyle: function () {
+      return {
+        height: this.bodyHeight + 'px',
+      };
+    },
     style: function () {
       return {
         height: this.height,

src/views/capital/comps/left/middle/1/index.js

@@ -21,7 +21,6 @@ export default {
   },
   methods: {
     tabChange (info) {
-      console.log(info);
       this.tabIndex = info.id
     }
   }

src/views/capital/comps/right/middle/2/index.html

@@ -1,4 +1,11 @@
 
-<Pannel>
-  
+<Pannel title="资金往来敏感词预警排名" height="340">
+  <div class="full">
+    <div class="top">
+      <PannelTabs :data="pannelTabsData" @change="tabChange"></PannelTabs>
+    </div>
+    <div class="buttom">
+      <ScrollTable :headers="headers" :bodyHeight="160"></ScrollTable>
+    </div>
+  </div>
 </Pannel>

src/views/capital/comps/right/middle/2/index.js

@@ -1,11 +1,26 @@
 import Pannel from '@/components/pannel/index.vue';
-
+import ScrollTable from '@/components/scroll-table/index.vue';
+import PannelTabs from '@/components/pannel-tabs/index.vue';
 export default {
   components: {
+    PannelTabs,
+    ScrollTable,
     Pannel
   },
   data () {
     return {
+      pannelTabsData: [
+        {
+          id: '1',
+          name: '支出'
+        },
+        {
+          id: '2',
+          name: '收入'
+        }
+      ],
+      tabIndex: '1',
+      headers: ['部门名称', '支出金额', '排名']
     };
   },
   created () {
@@ -13,5 +28,8 @@ export default {
   mounted () {
   },
   methods: {
+    tabChange (info) {
+      this.tabIndex = info.id
+    }
   }
 };

src/views/capital/comps/right/middle/2/index.scss

@@ -0,0 +1,17 @@
+.full {
+  display: flex;
+  flex-direction: column;
+
+  .top {
+    height: 50px !important;
+    width: 100%;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end;
+  }
+
+  .buttom {
+    flex: 1;
+    width: 100%;
+  }
+}

src/views/capital/data.js

@@ -19,7 +19,7 @@ export const comps = {
     ],
     'right': [
       'Right12',
-      '',
+      'Right22',
       ''
     ]
   }

src/views/capital/index.js

@@ -9,6 +9,7 @@ import Right21 from './comps/right/middle/1/index.vue';
 import Right31 from './comps/right/bottom/1/index.vue';
 
 import Right12 from './comps/right/top/2/index.vue';
+import Right22 from './comps/right/middle/2/index.vue';
 
 import { getConfigKey } from "@/api/system/config";
 import { getInfo } from "@/api/login";
@@ -27,7 +28,8 @@ export default {
     Right11,
     Right21,
     Right31,
-    Right12
+    Right12,
+    Right22
   },
   data () {
     return {