up

src/assets/svg/invest/bg1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="451" height="27" viewBox="0 0 451 27"><defs><style>.a{fill:#f6f9fd;}.b{fill:#fdfbf6;}.c{clip-path:url(#a);}.d{clip-path:url(#b);}.e{fill:none;}.f{fill:url(#c);}.g{fill:url(#d);}</style><clipPath id="a"><path class="a" d="M0,0H451a0,0,0,0,1,0,0V17a10,10,0,0,1-10,10H10A10,10,0,0,1,0,17V0A0,0,0,0,1,0,0Z" transform="translate(1403 -12454)"/></clipPath><clipPath id="b"><rect class="b" width="451" height="104" rx="10"/></clipPath><linearGradient id="c" x1="0.395" y1="0.201" x2="0.684" y2="-0.026" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#c7aaff"/><stop offset="1" stop-color="#3816f5"/></linearGradient><linearGradient id="d" x1="0.643" y1="0.322" x2="0" y2="0.905" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#5777e2" stop-opacity="0.749"/><stop offset="1" stop-color="#591fdd"/></linearGradient></defs><g class="c" transform="translate(-1403 12454)"><g class="d" transform="translate(1403 -12531)"><rect class="e" width="451" height="104" rx="10"/><path class="f" d="M1439.012-11671.908c97.246-1.7,81.443,18.236,182.057,18.236s140.531-42.424,278.53,11.416c1.273.723,127.217-34.475,127.217-34.475l-86.029,111.211-355.507-24.77-216.061-24.762v-56.857" transform="translate(-1461.191 11749)"/><path class="g" d="M1416.729-11659.515s34.076-51.619,229.158-29.581,347.627-24.051,347.627-24.051l-69.564,58.717Z" transform="translate(-1437.974 11775.146)"/></g></g></svg>

src/components/basic-tab/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <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`'
+  <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>
@@ -24,17 +25,17 @@ export default {
       default: 180
     }
   },
-  data () {
+  data() {
     return {
       active: 0,
       width: 0
     }
   },
-  created () {
+  created() {
     this.width = this.tabs.length * this.tabWidth
   },
   methods: {
-    change (item, index) {
+    change(item, index) {
       this.active = index
       this.$emit('change', item, index)
     }

src/views/invest/components/years.vue

@@ -4,18 +4,25 @@
       <basic-tab :tabs='tabs' :full='true' @change='change' style='width:99%'/>
     </div>
     <div class='flex flex-center full-width mt-10'>
-      <div   v-for='i in dash' class='flex-child-average' :key='i'>
+      <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 class="flex flex-col bold font-16 padding-14">
+            <div class='flex flex-justify-start'>
+              <img :src='i.icon'/>
+              <span class="grey-6 ml-5">{{ i.name }}</span>
+            </div>
+            <div v-if="i.index !== 2" class='flex flex-justify-start mt-5'>
+              <span class="grey" style="margin-left: 3px">￥</span>
+              <span class="ml-5" :style='`color:` + i.color'>{{ i.value }}</span>
+            </div>
+            <div v-else class='flex flex-justify-start flex-center mt-5'>
+              <div class="progress-bar">
+                <div class="bar full-height" style="width: 50%;"></div>
+              </div>
+              <span class="ml-10" :style='`color:` + i.color'>{{ i.value }}</span>
+            </div>
           </div>
+          <!--          <img :src='i.background'/>-->
         </div>
       </div>
     </div>
@@ -27,22 +34,22 @@ import basicTab from '@/components/basic-tab/index.vue'
 
 export default {
   name: 'years',
-  components: { basicTab },
+  components: {basicTab},
   props: {
     type: {
       type: Number,
       default: 0
     }
   },
-  data () {
+  data() {
     return {
       times: [],
       tabs: [
-        { name: '总览', value: 0 },
-        { name: '一季度', value: 1 },
-        { name: '二季度', value: 2 },
-        { name: '三季度', value: 3 },
-        { name: '四季度', value: 4 }
+        {name: '总览', value: 0},
+        {name: '一季度', value: 1},
+        {name: '二季度', value: 2},
+        {name: '三季度', value: 3},
+        {name: '四季度', value: 4}
       ],
       dash: [
         {
@@ -51,7 +58,9 @@ export default {
           value: 30303,
           prop: '',
           box: '0 1px 10px 0 rgba(105, 204, 243, 0.3)',
-          color: '#32B5F3'
+          color: '#32B5F3',
+          index: 0,
+          background: new URL('../../../assets/svg/invest/bg1.svg', import.meta.url).href,
         },
         {
           icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url).href,
@@ -59,7 +68,8 @@ export default {
           value: 30303,
           prop: '',
           box: '0 1px 10px 0 rgba(200, 150, 230, 0.3)',
-          color: '#AD46CB'
+          color: '#AD46CB',
+          index: 1,
         },
         {
           icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url).href,
@@ -67,7 +77,8 @@ export default {
           value: 30303,
           prop: '',
           box: '0 1px 10px 0 rgba(236, 171, 83, 0.3)',
-          color: '#EC9040'
+          color: '#EC9040',
+          index: 2,
         },
         {
           icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url).href,
@@ -75,20 +86,21 @@ export default {
           value: 30303,
           prop: '',
           box: '0 1px 10px 0 rgba(119, 94, 241, 0.3)',
-          color: '#4F5EE7'
+          color: '#4F5EE7',
+          index: 3,
         }
       ]
     }
   },
-  created () {
+  created() {
     this.init()
   },
   methods: {
-    init () {
+    init() {
       const year = new Date().getFullYear()
       this.tabs[0].name = year + '年总览'
     },
-    change (index) {
+    change(index) {
       this.$emit('change', index)
     }
   }
@@ -101,11 +113,26 @@ export default {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
+
 .box {
   border-radius: 8px;
   min-height: 85px;
   margin: 20px;
-  padding: 20px;
   background-color: #F6F9FD;
 }
+
+.progress-bar {
+  width: 140px;
+  height: 10px;
+  background: white;
+  border-radius: 10px;
+  margin-left: 5px;
+  border: 1px solid #F8B65F
+}
+
+.bar {
+  background: #F8B65F;
+  border-radius: 10px
+}
+
 </style>