fix

src/views/invest/components/left.vue

@@ -2,14 +2,14 @@
   <div>
     <div class="flex flex-col flex-center">
       <span class="font-16 grey-6 bold">年度资金管理</span>
-      <base-button class="mt-20" title="全县投资情况" icon="" :type='active === -1 ? "1" :"2" '  @click='viewAll'/>
+      <base-button class="mt-20" title="全县投资情况" icon="" :type='active === -1 ? "1" :"2" ' @click='viewAll'/>
       <div class='full-width flex flex-center mt-20'>
         <el-tabs v-model="activeName" class="font-16" @tab-change="getOrg">
           <el-tab-pane label="住建局" name="1"/>
           <el-tab-pane label="乡镇" name="2"/>
         </el-tabs>
       </div>
-      <div style='height: 1030px;overflow-y: scroll' class='hide-scrollbar'>
+      <div class='content hide-scrollbar'>
         <div v-for='(i,index) in deptList' class='item white bold font-16' :key='i.id'
              :class='active === index ? "item-select white" : "" ' @click='change(index)'>
           {{ i.deptName }}
@@ -62,6 +62,11 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.content {
+  height: 1020px;
+  overflow-y: scroll
+}
+
 .item {
   padding: 10px 20px;
   margin-bottom: 10px;

src/views/invest/components/years.vue

@@ -22,7 +22,42 @@
               <span class="ml-10" :style='`color:` + i.color'>{{ i.value }}</span>
             </div>
           </div>
-          <!--          <img :src='i.background'/>-->
+          <div class='' style='height: 50px'>
+            <div class="page">
+              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+                <defs>
+                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+                </defs>
+                <use class="wave" xlink:href="#wave" fill="#76CAF8" x="50" y="10">
+                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="2.2s" repeatCount="indefinite" />
+                </use>
+              </svg>
+
+              <svg class="waves" viewBox="0 24 180 24" preserveAspectRatio="none">
+                <defs>
+                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+                </defs>
+                <use class="wave" xlink:href="#wave" fill="#AFC6FA" x="50" y="0">
+                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="5.2s" repeatCount="indefinite" />
+                </use>
+              </svg>
+
+              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+                <defs>
+                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+                </defs>
+                <use class="wave" xlink:href="#wave" fill="#5691E2" x="150" y="10">
+                  <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="8.2s" repeatCount="indefinite" />
+                </use>
+              </svg>
+
+              <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
+                <defs>
+                  <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
+                </defs>
+              </svg>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -34,22 +69,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: [
         {
@@ -60,7 +95,7 @@ export default {
           box: '0 1px 10px 0 rgba(105, 204, 243, 0.3)',
           color: '#32B5F3',
           index: 0,
-          background: new URL('../../../assets/svg/invest/bg1.svg', import.meta.url).href,
+          background: new URL('../../../assets/svg/invest/bg1.svg', import.meta.url).href
         },
         {
           icon: new URL('../../../assets/svg/invest/2.svg', import.meta.url).href,
@@ -69,7 +104,7 @@ export default {
           prop: '',
           box: '0 1px 10px 0 rgba(200, 150, 230, 0.3)',
           color: '#AD46CB',
-          index: 1,
+          index: 1
         },
         {
           icon: new URL('../../../assets/svg/invest/3.svg', import.meta.url).href,
@@ -78,7 +113,7 @@ export default {
           prop: '',
           box: '0 1px 10px 0 rgba(236, 171, 83, 0.3)',
           color: '#EC9040',
-          index: 2,
+          index: 2
         },
         {
           icon: new URL('../../../assets/svg/invest/4.svg', import.meta.url).href,
@@ -87,20 +122,20 @@ export default {
           prop: '',
           box: '0 1px 10px 0 rgba(119, 94, 241, 0.3)',
           color: '#4F5EE7',
-          index: 3,
+          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)
     }
   }
@@ -114,9 +149,24 @@ export default {
   background-repeat: no-repeat;
 }
 
+.page {
+  width: 100%;
+  height: 50px;
+  position: relative;
+  overflow: hidden;
+
+  .waves {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
 .box {
   border-radius: 8px;
-  min-height: 85px;
+  min-height: 115px;
   margin: 20px;
   background-color: #F6F9FD;
 }