货币资金分析

src/components/block/index.html

@@ -0,0 +1,7 @@
+<div class="block">
+  <img :src="data.icon" class="icon">
+  <div class="right col">
+    <p class="value">{{data.value}}</p>
+    <p class="name">{{data.name}}</p>
+  </div>
+</div>

src/components/block/index.js

@@ -0,0 +1,24 @@
+
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {
+          name: '标题',
+          value: '值',
+          icon: require('./icon.png')
+        }
+      }
+    },
+
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  methods: {
+  }
+};

src/components/block/index.scss

@@ -0,0 +1,30 @@
+.block {
+  display: block;
+  width: 100px;
+  height: 40px;
+  align-items: center;
+  display: flex;
+
+  .icon {
+    width: 80px;
+    height: 90px;
+  }
+
+  .right {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .value {
+      font-weight: bold;
+      font-size: 24px;
+      color: #FFFFFF;
+      text-shadow: 0px 3px 2px #05357D;
+    }
+
+    .name {
+      color: rgba(185, 211, 235, 1);
+      font-size: 12px;
+    }
+  }
+}

src/components/block/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/components/header/index.html

@@ -1,2 +1,6 @@
-<div>
+<div class="header">
+  <div class="left border">
+    <slot name="left"></slot>
+  </div>
+  <p class="title">{{title}}</p>
 </div>

src/components/header/index.js

@@ -6,7 +6,7 @@ export default {
   props: {
     title: {
       type: String,
-      default: ''
+      default: '我是标题'
     },
     back: {
       type: Boolean,

src/components/header/index.scss

@@ -0,0 +1,28 @@
+.header {
+  position: relative;
+  background: url('./header_bk.png');
+  background-size: 100% 100%;
+  width: 100%;
+  height: 90px;
+
+  .title {
+    overflow: visible;
+    padding: 0 20px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 40px;
+    font-style: italic;
+    font-weight: 600;
+    background: linear-gradient(180deg, #FFFFFF 38.330078125%, #99BAEC 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .left {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+  }
+}

src/components/pannel/index.js

@@ -22,7 +22,7 @@ export default {
     // 定义组件高度
     width: {
       type: String,
-      default: '500'
+      default: '430'
     }
   },
   computed: {

src/components/tabs/index.html

@@ -0,0 +1,3 @@
+<div class="tabs row">
+  <div v-for="(item) in data" class="tab hover_pointer" :class="[item.id === currentClick ? 'active' : '']" @click="tabClick(item)">{{item.name}}</div>
+</div>

src/components/tabs/index.js

@@ -0,0 +1,34 @@
+
+export default {
+  props: {
+    data: {
+      type: Array,
+      default: function () {
+        return [
+          {
+            id: '1',
+            name: '选项一'
+          },
+          {
+            id: '2',
+            name: '选项二'
+          }
+        ]
+      }
+    },
+
+  },
+  data () {
+    return {
+      currentClick: '1'
+    };
+  },
+  created () {
+  },
+  methods: {
+    tabClick (info) {
+      this.currentClick = info.id
+      this.$emit('change', info)
+    }
+  }
+};

src/components/tabs/index.scss

@@ -0,0 +1,16 @@
+.tab {
+  width: 111px;
+  height: 43px;
+  line-height: 43px;
+  text-align: center;
+  background: url('./normal.png');
+  background-size: 100% 100%;
+}
+
+.active {
+  width: 111px;
+  height: 43px;
+  text-align: center;
+  background: url('./actice.png') !important;
+  background-size: 100% 100% !important;
+}

src/components/tabs/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/router/index.js

@@ -6,13 +6,13 @@ const routes = [
   {
     path: '/',
     name: 'root',
-    redirect: '/layer'
+    redirect: '/capital'
   },
   // 首页
   {
-    path: '/layer',
-    name: 'layer',
-    component: () => import('@/views/layer/index.vue')
+    path: '/capital',
+    name: 'capital',
+    component: () => import('@/views/capital/index.vue')
   }
 ];
 

src/style/_base.scss

@@ -24,14 +24,14 @@ body {
   height: 1080px;
   border: 1px solid red;
 
-  .left {
+  .left_side {
     position: absolute;
     left: 20px;
     top: 100px;
     bottom: 20px;
   }
 
-  .right {
+  .right_side {
     position: absolute;
     right: 20px;
     top: 100px;

src/views/capital/comps/left/bottom/1/index.html

@@ -0,0 +1,3 @@
+<Pannel title="资金支出分析" height="340">
+  
+</Pannel>

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

@@ -0,0 +1,3 @@
+<Pannel title="资金收入分析" height="340">
+  
+</Pannel>

src/views/capital/comps/left/top/1/data.js

@@ -0,0 +1,26 @@
+export default [
+  [
+    {
+      name: '存款额（万元）',
+      icon: require('./1.png'),
+      value: '3420'
+    },
+    {
+      name: '组织数（个）',
+      icon: require('./2.png'),
+      value: '257'
+    }
+  ],
+  [
+    {
+      name: '现金额（万元）',
+      icon: require('./3.png'),
+      value: '160'
+    },
+    {
+      name: '组织数（个）',
+      icon: require('./2.png'),
+      value: '101'
+    }
+  ]
+]

src/views/capital/comps/left/top/1/index.html

@@ -0,0 +1,9 @@
+<Pannel title="货币资金分析" height="232">
+  <table>
+    <tr v-for="line in data">
+      <td v-for="item in line">
+        <Block :data="item"></Block>
+      </td>
+    </tr>
+  </table>
+</Pannel>

src/views/layer/comps/right/top/2/index.js → src/views/capital/comps/left/top/1/index.js

@@ -1,17 +1,14 @@
 import Pannel from '@/components/pannel/index.vue';
-
+import Block from '@/components/block/index.vue';
+import data from './data.js';
 export default {
   components: {
+    Block,
     Pannel
   },
   data () {
     return {
+      data
     };
-  },
-  created () {
-  },
-  mounted () {
-  },
-  methods: {
   }
 };

src/views/capital/comps/left/top/1/index.scss

@@ -0,0 +1,12 @@
+table {
+  width: 100%;
+  height: 100%;
+
+  tr {
+    width: 100%;
+
+    td {
+      width: 50%;
+    }
+  }
+}

src/views/capital/comps/right/bottom/1/index.html

@@ -0,0 +1,3 @@
+<Pannel title="资金支出排名" height="340">
+  
+</Pannel>

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

@@ -0,0 +1,3 @@
+<Pannel title="资金收入排名" height="340">
+  
+</Pannel>

src/views/capital/comps/right/top/1/index.html

@@ -0,0 +1,3 @@
+<Pannel title="资产负债分析" height="232">
+  
+</Pannel>

src/views/layer/index.html → src/views/capital/index.html

@@ -1,10 +1,15 @@
 <div class="page">
+  <Header>
+    <div slot="left">
+      <Tabs></Tabs>
+    </div>
+  </Header>
   <!-- 项目初始化 -->
-  <div class="left col space_between">
+  <div class="left_side col space_between">
     <!-- <Left11></Left11> -->
     <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
   </div>
-  <div class="right col space_between">
+  <div class="right_side col space_between">
     <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
   </div>
 </div>

src/views/layer/index.js → src/views/capital/index.js

@@ -1,3 +1,6 @@
+import Header from '@/components/header/index.vue';
+import Tabs from '@/components/tabs/index.vue';
+
 import Left11 from './comps/left/top/1/index.vue';
 import Left21 from './comps/left/middle/1/index.vue';
 import Left31 from './comps/left/bottom/1/index.vue';
@@ -9,6 +12,8 @@ import Right31 from './comps/right/bottom/1/index.vue';
 import { comps } from './data.js'
 export default {
   components: {
+    Header,
+    Tabs,
     Left11,
     Left21,
     Left31,

src/views/layer/comps/left/bottom/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>

src/views/layer/comps/left/middle/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>

src/views/layer/comps/left/top/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>

src/views/layer/comps/right/bottom/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>

src/views/layer/comps/right/middle/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>

src/views/layer/comps/right/top/1/index.html

@@ -1,3 +0,0 @@
-<Pannel>
-  
-</Pannel>