fix

src/assets/svg/invest/2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22"><defs><style>.a,.d{fill:url(#a);}.b{fill:none;}.c{clip-path:url(#b);}.d{stroke:rgba(0,0,0,0);stroke-miterlimit:10;}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#c862e0"/><stop offset="1" stop-color="#8d4bbc"/></linearGradient><clipPath id="b"><rect class="a" width="17.229" height="17.792" transform="translate(0 0)"/></clipPath></defs><g transform="translate(-588 -187)"><rect class="b" width="22" height="22" transform="translate(588 187)"/><g transform="translate(590.385 189.103)"><g class="c"><path class="d" d="M-1410,11732.9a2.5,2.5,0,0,1-.955-.188l-6.714-2.747a1.131,1.131,0,0,1-.715-1.063,1.135,1.135,0,0,1,.715-1.068l6.714-2.747a2.531,2.531,0,0,1,.955-.187,2.514,2.514,0,0,1,.953.188l6.717,2.747a1.135,1.135,0,0,1,.715,1.068,1.131,1.131,0,0,1-.715,1.063l-6.717,2.747A2.484,2.484,0,0,1-1410,11732.9Zm0-5.918a1.42,1.42,0,0,0-.5.091l-3.525,1.316a.543.543,0,0,0-.373.508.547.547,0,0,0,.373.514l3.525,1.316a1.5,1.5,0,0,0,.5.089,1.486,1.486,0,0,0,.5-.089l3.522-1.316a.548.548,0,0,0,.378-.513.544.544,0,0,0-.378-.509l-3.522-1.316A1.4,1.4,0,0,0-1410,11726.979Z" transform="translate(1418.616 -11724.897)"/><path class="a" d="M16.8,9.636,9.519,12.62a2.458,2.458,0,0,1-1.809,0L.427,9.636a.688.688,0,0,1,0-1.274L2.036,7.7a1.335,1.335,0,0,1,1.007,0L7.71,9.62a2.458,2.458,0,0,0,1.809,0l4.667-1.914a1.335,1.335,0,0,1,1.007,0l1.607.657a.688.688,0,0,1,0,1.274"/><path class="a" d="M16.8,14.636,9.519,17.62a2.458,2.458,0,0,1-1.809,0L.427,14.636a.688.688,0,0,1,0-1.274L2.036,12.7a1.335,1.335,0,0,1,1.007,0L7.71,14.62a2.458,2.458,0,0,0,1.809,0l4.667-1.914a1.335,1.335,0,0,1,1.007,0l1.607.657a.688.688,0,0,1,0,1.274"/></g></g></g></svg>

src/assets/svg/invest/3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22"><defs><style>.a{fill:url(#a);}.b{fill:none;}.c{clip-path:url(#b);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#ecaa55"/><stop offset="1" stop-color="#ec8d3d"/></linearGradient><clipPath id="b"><rect class="a" width="20.997" height="20.997" transform="translate(0 0)"/></clipPath></defs><g transform="translate(-588 -187)"><rect class="b" width="22" height="22" transform="translate(588 187)"/><g transform="translate(588.502 187)"><g class="c"><path class="a" d="M13,3.058V1.582A1.569,1.569,0,0,0,11.382,0,12.073,12.073,0,0,0,0,11.383,1.569,1.569,0,0,0,1.581,13H3.057A9,9,0,1,0,13,3.058m-2-1.01V9.523A1.474,1.474,0,0,1,9.523,11H2.047A10.03,10.03,0,0,1,11,2.048m2.062,16.871A7,7,0,0,1,5.077,13h5.074A2.855,2.855,0,0,0,13,10.152V5.078a7,7,0,0,1,.062,13.841"/></g></g></g></svg>

src/assets/svg/invest/4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22" height="22" viewBox="0 0 22 22"><defs><style>.a{fill:url(#a);}.b{fill:none;}.c{clip-path:url(#b);}</style><linearGradient id="a" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#7170e5"/><stop offset="1" stop-color="#5d31df"/></linearGradient><clipPath id="b"><rect class="a" width="16" height="18"/></clipPath></defs><g transform="translate(-588 -187)"><rect class="b" width="22" height="22" transform="translate(588 187)"/><g transform="translate(591 189)"><g class="c"><path class="a" d="M13.219,1H12a1,1,0,0,0-2,0H6A1,1,0,0,0,4,1H2.781A2.782,2.782,0,0,0,0,3.781V15.219A2.782,2.782,0,0,0,2.781,18H13.219A2.781,2.781,0,0,0,16,15.219V3.781A2.781,2.781,0,0,0,13.219,1M2.781,3H4A1,1,0,0,0,6,3h4a1,1,0,0,0,2,0h1.22a.782.782,0,0,1,.78.781V5H2V3.781A.783.783,0,0,1,2.781,3M13.219,16H2.781A.783.783,0,0,1,2,15.219V7H14v8.219a.782.782,0,0,1-.78.781"/><path class="a" d="M11.5,9h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2"/><path class="a" d="M11.5,12h-7a1,1,0,0,0,0,2h7a1,1,0,0,0,0-2"/></g></g></g></svg>

src/assets/svg/invest/wave/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="348" height="149" viewBox="0 0 348 149"><defs><style>.a{fill:#fdfbf6;}.b{fill:#f6f9fd;}.c{clip-path:url(#c);}.d{fill:none;}.e{fill:url(#d);}.f{fill:url(#e);}.g{filter:url(#a);}</style><filter id="a" x="0" y="0" width="348" height="149" filterUnits="userSpaceOnUse"><feOffset input="SourceAlpha"/><feGaussianBlur stdDeviation="7.5" result="b"/><feFlood flood-color="#69bff5" flood-opacity="0.302"/><feComposite operator="in" in2="b"/><feComposite in="SourceGraphic"/></filter><clipPath id="c"><rect class="a" width="303" height="104" rx="10" transform="translate(941 167)"/></clipPath><linearGradient id="d" x1="0.395" y1="0.201" x2="0.684" y2="-0.026" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#aac7ff"/><stop offset="1" stop-color="#16d3f5"/></linearGradient><linearGradient id="e" x1="0.643" y1="0.322" x2="0" y2="0.905" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#3aabf2" stop-opacity="0.749"/><stop offset="0.112" stop-color="#37a4f0" stop-opacity="0.776"/><stop offset="1" stop-color="#1f6fdd"/></linearGradient></defs><g transform="translate(-557.5 -344.5)"><g class="g" transform="matrix(1, 0, 0, 1, 557.5, 344.5)"><rect class="b" width="303" height="104" rx="10" transform="translate(22.5 22.5)"/></g><g class="c" transform="translate(-361 199)"><rect class="d" width="303" height="104" rx="10" transform="translate(941 167)"/><path class="e" d="M1416.1-11671.908c65.324-1.7,54.708,18.236,122.295,18.236s94.4-42.424,187.1,11.416c.855.723,85.457-34.475,85.457-34.475l-57.789,111.211-238.809-24.77-145.137-24.762v-56.857" transform="translate(-490 11916)"/><path class="f" d="M1416.729-11659.515s22.891-51.619,153.935-29.581,233.516-24.051,233.516-24.051l-46.729,58.717Z" transform="translate(-490 11942.146)"/></g></g></svg>

src/components/basic-tab/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class='flex flex-center tab-bg' :style='`width:`+width+`px`'>
-    <div v-for='(item,index) in tabs' :key='item' class='flex flex-center'
+  <div class='tab-bg flex' :style=' full ? `width:100%` : `width:`+width+`px`'>
+    <div v-for='(item,index) in tabs' :key='item' class='flex flex-center bold' :style='full ?  `width:`+ (100 / tabs.length)+`%` : `width:`+tabWidth+`px`'
          :class='active === index ? "tab-active":"tab" ' @click='change(item,index)'>
       {{ item.name }}
     </div>
@@ -14,6 +14,14 @@ export default {
     tabs: {
       type: Array,
       default: [] // {name:"首页"，value:1}
+    },
+    full: {
+      type: Boolean,
+      default: false
+    },
+    tabWidth: {
+      type: Number,
+      default: 180
     }
   },
   data () {
@@ -23,7 +31,7 @@ export default {
     }
   },
   created () {
-    this.width = this.tabs.length * 180
+    this.width = this.tabs.length * this.tabWidth
   },
   methods: {
     change (item, index) {

src/views/invest/components/years.vue

@@ -1,12 +1,31 @@
 <template>
-  <div class='flex flex-center'>
-    <div v-for='(item,index) in times' class='margin pointer' @click='change(index)' :key='item'>{{ item }}</div>
+  <div class='flex flex-center flex-col'>
+    <basic-tab :tabs='tabs' :full='true' @change='change'/>
+    <div class='flex flex-center full-width mt-20'>
+      <div   v-for='i in dash' class='flex-child-average' :key='i'>
+        <div class='box' :style='`box-shadow: `+ i.box'>
+          <div class='flex flex-justify-start font-16'>
+            <img :src='i.icon'/>
+            <span>{{ i.name }}</span>
+          </div>
+
+          <div class='flex flex-justify-start mt-20 bold font-16'>
+            <span>￥</span>
+            <span :style='`color:` + i.color'>{{ i.name }}</span>
+            <img :src='i.icon'/>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import basicTab from '@/components/basic-tab/index.vue'
+
 export default {
-  name: 'time',
+  name: 'years',
+  components: { basicTab },
   props: {
     type: {
       type: Number,
@@ -15,7 +34,48 @@ export default {
   },
   data () {
     return {
-      times: []
+      times: [],
+      tabs: [
+        { name: '总览', value: 1 },
+        { name: '一季度', value: 2 },
+        { name: '二季度', value: 2 },
+        { name: '三季度', value: 2 },
+        { name: '四季度', value: 2 }
+      ],
+      dash: [
+        {
+          icon: new URL('../../../assets/svg/invest/1.svg', import.meta.url).href,
+          name: '责任目标',
+          value: 30303,
+          prop: '',
+          box: '0 1px 10px 0 rgba(105, 204, 243, 0.3)',
+          color: '#32B5F3'
+        },
+        {
+          icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url).href,
+          name: '累计完成投资',
+          value: 30303,
+          prop: '',
+          box: '0 1px 10px 0 rgba(200, 150, 230, 0.3)',
+          color: '#AD46CB'
+        },
+        {
+          icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url).href,
+          name: '投资完成比例',
+          value: 30303,
+          prop: '',
+          box: '0 1px 10px 0 rgba(236, 171, 83, 0.3)',
+          color: '#EC9040'
+        },
+        {
+          icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url).href,
+          name: '计划纳统投资',
+          value: 30303,
+          prop: '',
+          box: '0 1px 10px 0 rgba(119, 94, 241, 0.3)',
+          color: '#4F5EE7'
+        }
+      ]
     }
   },
   created () {
@@ -24,7 +84,7 @@ export default {
   methods: {
     init () {
       const year = new Date().getFullYear()
-      this.times = [year + '年总览', '一季度', '二季度', '三季度', '四季度']
+      this.tabs[0].name = year + '年总览'
     },
     change (index) {
       this.$emit('change', index)
@@ -33,6 +93,17 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang='scss' scoped>
+.content {
+  background-image: url('./src/assets/svg/invest/wave/1.svg');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+}
+.box {
+  border-radius: 8px;
+  min-height: 65px;
+  margin: 20px;
+  padding: 20px;
+  background-color: #F6F9FD;
+}
 </style>

src/views/invest/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class='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'>
+      <basic-container style='flex: 1;padding: 0'>
         <left/>
       </basic-container>
-      <div class='full-width ml-5'>
+      <div class='full-width ml-5' style='flex:4;'>
         <basic-container class='full-width'>
           <div>
             <years @change='change'/>