fix

src/views/invest/components/amount.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    {{type}}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'amount',
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/invest/components/left.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <span>年度资金管理</span>
+    <el-button>总览</el-button>
   </div>
 </template>
 

src/views/invest/components/years.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class='flex flex-center'>
+    <div v-for='(item,index) in times' class='margin pointer' @click='change(index)' :key='item'>{{ item }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'time',
+  props: {
+    type: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      times: []
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const year = new Date().getFullYear()
+      this.times = [year + '年总览', '一季度', '二季度', '三季度', '四季度']
+    },
+    change (index) {
+      this.$emit('change', index)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/invest/index.vue

@@ -1,12 +1,26 @@
 <template>
   <div class='flex flex-center full-width'>
-    <div class='ml-10 mr-10 flex flex-center full-width'>
+    <div class='ml-10 mr-10 mt-10 flex flex-align-start full-width'>
       <basic-container style='width: 300px;padding: 0'>
         <left/>
       </basic-container>
-      <basic-container class='full-width ml-10'>
-        333
-      </basic-container>
+      <div class='full-width ml-5'>
+        <basic-container class='full-width'>
+          <div>
+            <years @change='change'/>
+          </div>
+        </basic-container>
+        <basic-container>
+          <div class='flex'>
+            <div class='flex-child-average'>
+              chart
+            </div>
+            <div class='flex-child-average'>
+              <amount :type='yearType'/>
+            </div>
+          </div>
+        </basic-container>
+      </div>
     </div>
   </div>
 </template>
@@ -14,10 +28,23 @@
 <script>
 import BasicContainer from '@/components/basic-container/main.vue'
 import left from './components/left.vue'
+import years from '@/views/invest/components/years.vue'
+import amount from '@/views/invest/components/amount.vue'
 
 export default {
   name: 'index',
-  components: { BasicContainer, left }
+  components: { BasicContainer, left, years, amount },
+  data () {
+    return {
+      yearType: 0
+    }
+  },
+  methods: {
+    change (index) {
+      console.log(index)
+      this.yearType = index
+    }
+  }
 }
 </script>